/* 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 Kyoto - Peinture par numéros Offrez-vous un instant suspendu avec le "Poster Kyoto" by Steloria. Ce kit de peinture par numéros transforme une scène japonaise délicate en une expérience sensorielle : lumière tamisée, lignes harmonieuses et couleurs choisies pour apaiser l'esprit. Pensé pour embellir votre intérieur, le Poster Kyoto invite à la création même si vous n'êtes pas artiste. La réalisation devient une caresse visuelle, un rituel simple et gratifiant. Ce que contient le kit Une toile imprimée avec contours numérotés, prête à peindre Palette de peintures assorties, teintes pré-mélangées pour un rendu fidèle Pinceaux de différentes tailles pour les détails et les aplats Instructions claires et astuces Steloria pour un résultat professionnel Pourquoi choisir Poster Kyoto Steloria a conçu ce poster pour qu'il soit accessible, élégant et transformateur. Chaque coup de pinceau révèle une atmosphère apaisante : jardins, lanternes et toits traditionnels se révèlent sous vos doigts. Le format s'intègre facilement au salon, à la chambre ou à un coin lecture. Ce produit est idéal pour un cadeau raffiné, pour débuter une pratique créative ou pour offrir un moment de détente à soi ou à un proche. Avantages & conseils pratiques Les bénéfices immédiats Détente : activité douce qui réduit le stress et recentre l'attention Accomplissement : résultat visible et valorisant en quelques heures Décoration sur-mesure : un poster unique qui reflète votre touche personnelle Conseils pour un rendu sublime Commencez par les grandes surfaces, puis passez aux détails avec le plus petit pinceau. Laissez sécher chaque zone avant de superposer pour éviter les bavures. Travaillez dans un lieu bien éclairé et posez votre poster sur une surface plane. Protégez votre œuvre avec un vernis mat ou satiné si vous souhaitez une meilleure longévité. Le Poster Kyoto de Steloria est une invitation à la poésie et à la maîtrise douce. Simple à utiliser, beau à exposer, il transforme un moment ordinaire en un geste élégant. Adoptez-le pour sublimer votre maison ou pour offrir une expérience créative inoubliable. Description Modèle : Poster KyotoMé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