/* 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 Genève - Peinture par numéros Découvrez le "Poster Genève" par Steloria, une invitation à peindre la ville sous une lumière sensuelle et raffinée. Ce kit de peinture par numéros transforme un motif élégant en une œuvre personnelle, facile à réaliser même si vous débutez. Les teintes choisies rendent justice aux silhouettes des quais, aux reflets de l'eau et aux façades délicates. Adoptez ce poster pour sublimer un mur, offrir un cadeau marquant ou trouver un moment de détente créative. Une expérience sensorielle et créative Chaque trait devient caresse : les zones numérotées guident vos gestes, les couleurs se fondent doucement et le résultat final évoque chaleur et sérénité. Le support mat du poster et la qualité des encres procurent un rendu harmonieux, lumineux sans être agressif. Peindre ce poster, c’est retrouver le plaisir tactile du pinceau et l’apaisement d’une activité lente et soignée. Ce que contient votre kit Poster Genève Une toile imprimée prête à peindre, avec numérotation précise Peintures acryliques aux pigments stables et séchage rapide Jeu de pinceaux adaptés aux détails et aux grandes surfaces Guide simple pas à pas pour réussir chaque nuance Emballage soigné pour offrir ou conserver votre création Caractéristiques et avantages Facile d’accès : idéal pour débutants et amateurs confirmés Finition durable : couleurs résistantes et fidèle rendu des tons Moment détente garanti : activité anti-stress pour la maison Idée cadeau raffinée pour un anniversaire, une pendaison de crémaillère ou sans occasion Steloria vous propose un poster qui allie esthétique et simplicité d’exécution. En quelques heures, révélez une scène genevoise au charme discret et transformez votre intérieur avec une pièce unique, peinte par vous. Laissez-vous guider par les numéros, respirez, et savourez la fierté de créer une œuvre qui raconte votre regard sur Genève. Description Modèle : Poster GenèveMé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]);
Related
Related
Related
Related