/* 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(18px, 2.2vw, 28px); font-weight:700; } .accordion button:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; border-radius:6px; } /* Icônes en ligne (flex child) */ .icon { width:22px; height:22px; opacity:.85; margin-right:6px } .title-left { display:flex; align-items:center; gap:14px; } /* Chevron */ .chevron { width:22px; height:22px; flex:0 0 22px; transition: transform .2s ease; color: var(--chev); } [aria-expanded="true"] .chevron{ 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; } Montevideo Poster - Paint by numbers Discover the visual poetry of the Montevideo Poster by Steloria. This paint by numbers kit transforms an elegant image into a sensual and soothing experience. Each shade glides over the paper like a caress, gradually revealing a soft and refined urban scene. Designed to offer you a simple and rewarding creative moment, this poster enhances your interior as soon as it is finished. Why choose the Montevideo Poster? The Montevideo Poster is designed for decoration and relaxation enthusiasts. Its harmonious palette blends warm tones and velvety blues, creating a serene atmosphere. Easy to use, the kit is suitable for both beginners and more experienced painters who want an aesthetic result without compromise. It adds a touch of accessible and personal art to your living room, bedroom, or office. What's in the kit A generously sized pre-printed canvas, numbered for each area. Opaque acrylic paint pots in matching colors. A quality brush set, suitable for details and large surfaces. A clear instruction manual with step-by-step tips for a smooth and professional finish. Practical advantages Quick setup: no complex tools required, just a quiet space and time for yourself. Easy cleaning: acrylic paints rinse easily, with no strong odor. Durable result: colors are resistant and vibrant once dry. Refined gift idea: presented as is, it delights creative minds. Usage tips Start with large areas and then move to details for a uniform finish. Work in a bright room to better appreciate the nuances. Let each layer dry before adding the next to avoid smudging. Indulge in a moment of sensual escape with Steloria. The Montevideo Poster invites relaxation, creation, and careful decoration. Transform your wall into a soft and soulful work of art, signed by your hands. Description Model : Montevideo PosterMethod : Paint by numbersDifficulty level : IntermediateDimensions : 50x40cmFrame options : Sold with no frameSupport : Treated and printed cotton/linen canvasPaint type : Acrylic (24 colors)Packaging : rolled or folded in secure packaging // 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