/* 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 Hvar - Peinture par numéros Plongez dans l'élégance méditerranéenne avec le Poster Hvar signé Steloria. Conçu pour éveiller vos sens et calmer votre esprit, ce kit de peinture par numéros transforme un simple moment créatif en une expérience sensuelle et apaisante. Les teintes chaudes et les nuances marines s'harmonisent pour recréer l'atmosphère lumineuse de l'île de Hvar, invitation au voyage et à la détente. Un résultat professionnel, accessible à tous Que vous soyez débutant ou artiste confirmé, le Poster Hvar offre une finition soignée sans effort. Les zones numérotées et les encres de haute qualité garantissent des transitions douces et des couleurs profondes. En quelques heures, révélez un tableau élégant prêt à sublimer votre intérieur. Contenu du kit Toile imprimée de grande qualité, prête à peindre Palette de peintures acryliques assorties, pigments résistants Jeu de pinceaux de précision pour détails et aplats Guide clair étape par étape, astuces pour un rendu harmonieux Avantages et bénéfices Steloria a conçu ce Poster Hvar pour offrir plus qu'une œuvre d'art : un moment de bien-être et une décoration unique. Peindre libère l'esprit, réduit le stress et stimule la créativité. Le résultat final, délicat et raffiné, apporte une touche chaleureuse et contemporaine à votre salon, chambre ou bureau. Pourquoi choisir le Poster Hvar ? Finition haut de gamme : support robuste et encre résistante Facile à réaliser : instructions simples, idéal en cadeau Esthétique intemporelle : palette douce, ambiance méditerranéenne Moment sensoriel : geste lent, satisfaction visuelle Conseils d'utilisation Travaillez dans un lieu lumineux et calme pour mieux apprécier les couleurs Commencez par les grandes surfaces puis détaillez avec les petits pinceaux Laissez sécher entre les couches pour un rendu net Cadrez votre poster pour le protéger et le mettre en valeur Offrez-vous une pause créative avec Steloria. Commandez le Poster Hvar et laissez-vous transporter par la douceur des couleurs et la beauté simple d'une œuvre que vous aurez révélée de vos propres mains. Description Modèle : Poster HvarMé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]);
