/* 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; } Window overlooking the ocean - Paint by numbers Dive into a salty breath and soft light with Steloria: "Window overlooking the ocean" transforms a marine moment into a personal work. Each stroke calls the breeze, each color reveals the whisper of the waves. Designed to soothe the mind and awaken creativity, this paint by numbers kit guides you step by step to an elegant painting, ready to enhance your interior. Description This scene captures the horizon from an open window: dancing curtains, silver reflections on the water, sky in pastel shades. The carefully selected hues offer a bright, warm, and harmonious rendering. The format is ideal for hanging in the living room, bedroom, or to give a seaside atmosphere to any space. Main features Quality canvas, fine grain, easy to work with and durable. Non-toxic acrylic paints with intense and opaque pigments. Clear numbering and contrasting codes for error-free tracking. Brushes of different sizes for delicate details and soft washes. Why choose Steloria? Steloria combines creative pleasure and refined results. Whether you are a beginner looking for a moment of relaxation or an enthusiast wanting to refine personal decoration, this kit offers a stress-free journey to a work worthy of being displayed. It is also a refined gift idea, inviting rejuvenation and pride in handmade. What's in the kit 1 pre-numbered gallery quality canvas. 18 to 24 carefully measured pots of acrylic paint. 3 brushes (fine, medium, large) for all areas. Simple guide with step-by-step advice and mixing tips. Disposable palette to organize your colors. Tips & finishing Start with the light areas to facilitate progress. Let dry between layers for a clean and neat finish. For a more vibrant look, layer light touches and gradients. Protect your work with a matte or satin varnish once dry. Gift it framed for an immediately ready-to-admire present. Indulge yourself with the calm of an open window overlooking the ocean and create a unique piece with Steloria. A simple gesture for a decoration that speaks to the heart. Description Model: Window overlooking the oceanMethod: Paint by numbersDifficulty levels: IntermediateDimensions: 30x20cm, 40x50cm, 50x65cm and 60x75cmFrame options: Sold with no frame or DIY 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