/* 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; } A couple's walk in the rain - Paint by numbers Immerse yourself in an intimate and poetic scene with the paint by numbers "A couple's walk in the rain" by Steloria. This composition evokes the sweetness of a stolen moment, the complicity of a couple sheltered under an umbrella, and the magic of drops reflecting light. Designed to deliver a result worthy of a workshop, it combines simplicity and elegance for all levels. Essential features Practical and ready-to-paint format: pre-printed canvas with clear lines. Harmonious palette: shades chosen to reproduce reflections, shadows, and warmth. Included materials: numbered paints, quality brushes, step-by-step guide. Level: accessible to beginners, appealing to experienced hobbyists. Why this kit is appealing Each brushstroke becomes a moment of calm and concentration. The romantic scene stimulates creativity while offering a relaxing hobby: ideal for unwinding after a busy day or for sharing a workshop in pairs. The final result, delicate and sensitive, fits perfectly into a modern interior or a room with neutral tones. Contents of the Steloria kit Pre-drawn and numbered canvas (available in several sizes according to the offer). A set of acrylic paints with intense and opaque pigments. Matching brushes for details and large areas. Illustrated step-by-step guide for a professional result. Carefully packaged, ready to be given as a gift. Practical tips and gift idea Work by areas and from light to dark to preserve the sharpness of contrasts. Rinse your brushes between each shade and let dry between layers for a smooth finish. This paint by numbers makes a perfect gift for a birthday, Valentine's Day, or just to surprise a loved one. Offer a creative experience and a painting full of emotion - a pictorial memory signed Steloria. Description Model: A couple's walk in the rainMethod: 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]);
