/* 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; } Seascape - High tides - Paint by numbers Dive into the intimate and majestic atmosphere of a coastline where high tides sculpt the light. Steloria offers you a paint by numbers designed to awaken your senses and soothe your mind. Each shade has been chosen to recreate the salty softness, the vibration of the waves, and the warmth of a moving sky. Easy to follow and rich in details, this kit transforms a quiet afternoon into an aesthetic creation ready to enhance your interior. Why you will love it Sensory atmosphere: deep and harmonious colors that evoke the sea and nostalgia. Serenity and concentration: a relaxing activity that reduces stress and hones patience. Accessible to all: no prior talent required, clear instructions and intuitive numbering. Decorative result: a finished piece worthy of being framed, ideal for the living room, bedroom, or a refined gift. Kit contents — Steloria quality Pre-printed canvas with precise numbering for each area. Palette of acrylic paints selected for their coverage and longevity. Set of brushes suitable for details and large areas. Simple instructions and application tips for a professional finish. Practical guide and tips for a perfect finish To fully experience Steloria, settle into a bright and calm space. Follow the numbering starting with the largest areas, then return to the details. Lightly wet the brush for a smooth texture and try to work each shade evenly to maintain the depth of the landscape. Quick tips Work from the background to the foreground to preserve perspective. Clean the brushes between each color to avoid impurities. Let each layer dry before adding touch-ups for a clean finish. Treat yourself to a moment of escape Steloria “High tides” is not just a kit, it’s a sensory break. Treat yourself to this visual and creative journey - create a piece that speaks of calm, power, and elegance. Transform an ordinary moment into a lasting memory and let the sea invite itself into your home. Description Model: Marine landscape - High tidesMethod: Paint by numbersDifficulty levels: IntermediateDimensions: 40x30cm, 50x40cm and 65x50cmFrame options: Sold with no frame or ready frameSupport: Treated and printed cotton/linen canvasPaint type: AcrylicPackaging: 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