/* CONTENEUR EN FLEX */ .accordion { display:flex; flex-direction:column; gap:0; /* lignes séparatrices gérées par border */ max-width: 880px; margin: 0 auto; } /* ITEM EN FLEX COLONNE */ .accordion-item { display:flex; flex-direction:column; } /* En-tête : H2 + bouton (ligne en flex) */ .accordion h2 { margin:0; } .accordion button{ all: unset; display:flex; /* FLEX ICI */ align-items:center; justify-content:space-between; gap:14px; width:100%; cursor:pointer; padding:10px 6px; } .accordion .label { flex:1; font-size: clamp(16px, 1.8vw, 22px); font-weight:700; color: #464746; } .accordion button:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; border-radius:6px; } /* Icônes en ligne (flex child) */ .icona { width:22px; height:22px; opacity:.85; margin-right:6px; color: #464746; } .title-left { display:flex; align-items:center; gap:14px; } /* Chevron */ .chevrona { width:22px; height:22px; flex:0 0 22px; transition: transform .2s ease; color: #464746; } [aria-expanded="true"] .chevrona{ transform: rotate(-180deg); } /* PANNEAU EN FLEX COLONNE + TRANSITION hauteur */ .panel { display:flex; /* FLEX ICI */ flex-direction:column; overflow:hidden; max-height:0; /* fermé */ transition:max-height .28s ease; } .panel[data-open="true"] { max-height: 600px; /* valeur assez grande pour contenir le contenu */ } .panel > div { padding: 0 6px 18px 6px; color: var(--muted); line-height: 1.6; font-size: 16px; } Poster Londres - Peinture par numéros Laissez-vous emporter par la douceur d'un coucher de soleil sur la Tamise. Le Poster Londres de Steloria transforme le détail en émotion : lignes délicates, couleurs choisies pour éveiller la beauté urbaine. Conçu pour vous offrir un moment créatif et sensuel, ce kit invite au lâcher-prise, tout en promettant une décoration raffinée pour votre intérieur. Caractéristiques du Poster Londres Format généreux et stable, idéal pour encadrer ou exposer tel quel. Impression haute définition pour des contours nets et une palette fidèle. Nuances harmonieuses inspirées des teintes londoniennes — tons chauds et bleus doux. Zones numérotées claires, adaptées aux débutants et aux amateurs confirmés. Ce qui est inclus dans votre kit Steloria Toile pré-imprimée avec numérotation précise. Ensemble de peintures acryliques assorties, couvrance optimale. Pinceaux de différentes tailles pour les détails et les aplats. Notice pas à pas simple et illustrée pour réussir votre œuvre. Un moment créatif, un objet de décoration Peindre ce Poster Londres, c’est prendre le temps d’habiter une image. Chaque coup de pinceau révèle une part d’intimité : le rythme de la ville devient une composition personnelle. En quelques soirées, vous composez une pièce unique qui réchauffe la pièce et capte les regards. Facile, apaisant et gratifiant Étapes claires pour avancer sans stress. Résultat visible rapidement, plaisir immédiat et durable. Activité idéale pour décompresser, partager ou offrir. Idée déco & cadeau Offrez ou exposez un fragment de Londres. Ce poster est parfait comme cadeau raffiné pour un proche, un couple, ou pour sublimer votre salon, chambre ou bureau. Steloria vous propose une expérience esthétique et tactile qui transforme un mur en récit visuel. Description Modèle : Poster LondresMéthode : Peinture par numérosNiveaux de difficulté : IntermédiaireDimensions : 50x40cmOptions de cadre : Vendu sans cadreSupport : Toile de lin/coton traitée et impriméeType de peinture : Acrylique (24 couleurs)Emballage : roulé ou plié dans un emballage sécurisé // Accordéon : un seul panneau ouvert à la fois const accordion = document.getElementById('accordion'); const buttons = accordion.querySelectorAll('.accordion-item h2 > button'); function closeItem(btn){ btn.setAttribute('aria-expanded', 'false'); const panel = document.getElementById(btn.getAttribute('aria-controls')); panel.dataset.open = "false"; panel.style.maxHeight = null; } function openItem(btn){ btn.setAttribute('aria-expanded', 'true'); const panel = document.getElementById(btn.getAttribute('aria-controls')); panel.dataset.open = "true"; // ajuste la hauteur pour la transition panel.style.maxHeight = panel.scrollHeight + "px"; } buttons.forEach(btn => { btn.addEventListener('click', () => { const wasOpen = btn.getAttribute('aria-expanded') === 'true'; // ferme tous les items buttons.forEach(closeItem); // ouvre seulement celui cliqué s'il n'était pas déjà ouvert if (!wasOpen) openItem(btn); }); // touche Entrée/Espace pour accessibilité btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); } }); }); // (Optionnel) ouvrir le premier par défaut : // if (buttons.length) openItem(buttons[0]);
