/* 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; } Rainbow Witch - Manga - Peinture par numéros Plongez dans un monde doux et vibrant avec Rainbow Witch, une œuvre manga pensée par Steloria pour éveiller votre sensibilité artistique. Ce kit de peinture par numéros transforme chaque coup de pinceau en caresse chromatique : des teintes lumineuses, des contrastes subtils et une silhouette ensorcelante qui invite à la rêverie. Conçu pour offrir plaisir et détente, il convient aussi bien aux débutants qu'aux amateurs confirmés. Une expérience sensorielle et simple Rainbow Witch vous guide pas à pas. La toile pré-imprimée, numérotée avec soin, facilite la progression. Les couleurs, choisies pour leur harmonie, se posent comme une caresse sur la surface, révélant progressivement l'âme du personnage. Chaque session devient un moment doux, propice à la concentration et au lâcher-prise, pour un résultat élégant et abouti. Contenu du kit - tout ce qu'il vous faut Toile pré-imprimée et numérotée, prête à peindre Peintures acryliques aux pigments lumineux, lavables Ensemble de pinceaux de différentes tailles pour détails et aplats Guide pas-à-pas simple et conseils d'entretien Pourquoi choisir Rainbow Witch par Steloria ? Ce kit est une invitation à créer sans contrainte. Il offre : Un résultat professionnel même sans expérience avancée Un moment de relaxation créative, idéal pour déconnecter Une pièce déco unique, parfaite pour offrir ou embellir votre espace Un design manga moderne, sensible et plein de charme Offrez-vous un voyage coloré Adoptez Rainbow Witch pour transformer un instant ordinaire en moment précieux. Que vous cherchiez un loisir apaisant, un cadeau original ou une œuvre à exposer, ce kit Steloria vous accompagne avec élégance. Laissez-vous guider par les couleurs, sentez chaque nuance révéler l'univers de la sorcière arc-en-ciel - un plaisir créatif à portée de pinceau. Description Modèle : Rainbow Witch - MangaMéthode : Peinture par numérosNiveaux de difficulté : DébutantDimensions : 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]);
