/* 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 Rome - Peinture par numéros Découvrez la grâce intemporelle de Rome transformée en expérience sensorielle avec le Poster Rome de Steloria. Chaque trait numéroté devient une caresse colorée, chaque teinte révèle la douceur d’un souvenir méditerranéen. Conçu pour apaiser l’esprit et éveiller la créativité, ce kit allie élégance visuelle et plaisir tactile. Que vous soyez débutant ou amateur confirmé, laissez-vous guider par une palette raffinée et donnez vie à une scène romaine pleine de charme et de caractère. Ce que contient le kit Toile imprimée avec zones numérotées pour un guidage précis. Peintures acryliques sélectionnées pour leur couvrance et leur nuance satinée. Jeu de pinceaux adaptés aux détails et aux aplats. Guide pas-à-pas simple et illustrations de référence. Avantages & bénéfices Relaxant et proche d’une méditation créative : détendez-vous en coloriant chaque zone. Résultat élégant et décoratif : un poster prêt à sublimer votre intérieur. Accessible à tous : instructions claires pour un rendu soigné, même sans expérience. Cadeau raffiné : un présent artistique qui touche par sa simplicité et son esthétisme. Qualité Steloria : matériaux choisis pour durer et couleurs qui restent vives. Caractéristiques techniques & conseils Le Poster Rome a été conçu pour offrir une expérience fluide et gratifiante. La surface accueillante et les peintures faciles à appliquer garantissent un rendu harmonieux. Quelques gestes simples suffisent pour transformer ce kit en une œuvre personnelle dont vous pourrez être fièr(e). Caractéristiques techniques Impression haute définition pour des contours nets et un repérage aisé des zones. Peintures acryliques à séchage rapide, sans odeur forte. Pinceaux variés pour les détails et les aplats, réutilisables après nettoyage. Support pensé pour l’encadrement ou l’affichage direct. Conseils pour réussir Commencez par les couleurs claires puis progressez vers les teintes foncées. Rincez et essuyez les pinceaux entre chaque couleur pour une finition propre. Travaillez par petites zones et laissez sécher avant de superposer. Encadrez sans verre pour préserver la texture satinée des peintures. Description Modèle : Poster RomeMé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]);
