/* 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; } Mont Rushmore - USA - Peinture par numéros Plongez dans une expérience artistique élégante et apaisante avec la peinture par numéros Steloria Mont Rushmore. Ce kit transforme le monumental en intime : les visages sculptés deviennent une danse de couleurs, vos gestes glissent, chaque coup de pinceau révèle une texture veloutée. Conçu pour offrir un résultat saisissant sans effort, ce tableau est une invitation sensuelle à la création, idéale pour décorer votre intérieur ou offrir un cadeau mémorable. Une œuvre accessible, résultat professionnel La toile pré-tracée et numérotée guide vos mouvements, même si vous débutez. Les peintures acryliques de qualité garantissent une couvrance lisse et des teintes fidèles, faciles à mélanger pour nuancer les reliefs et la lumière du site emblématique. En quelques soirées, constatez l’évolution d’un assemblage harmonieux de tons chauds et froids qui restitue la majesté ue Mont Rushmore avec finesse. Caractéristiques du kit Contenu complet Toile pré-imprimée et numérotée, tissu tendu et surface mate pour un rendu soigné Palette de peintures acryliques de haute qualité, soigneusement sélectionnées Ensemble de pinceaux variés pour détails et remplissage Guide pas à pas simple et illustrations d’aide pour les techniques de base Conseils de finition pour protéger et mettre en valeur votre tableau Pourquoi choisir Steloria Mont Rushmore Design captivant qui combine histoire et beauté visuelle Kit pensé pour la détente et la concentration : idéal anti-stress Format prêt à accrocher pour une décoration immédiate Parfait pour débutants et amateurs exigeants cherchant un résultat soigné Emballage soigné, prêt à offrir pour anniversaires ou occasions spéciales Conseils d’utilisation et finition Commencez par les zones claires puis progressez vers les plus foncées pour une meilleure gestion des couches Nettoyez les pinceaux entre chaque couleur pour préserver la pureté des teintes Laissez sécher complètement puis appliquez un vernis protecteur pour intensifier les couleurs et prolonger la vie de l’œuvre Accrochez votre tableau à hauteur de regard pour sublimer les traits sculptés du Mont Rushmore Description Modèle : Mont Rushmore - USAMé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