/* 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; } Cairo Poster - Paint by numbers Dive into the enchanting atmosphere of the Cairo with the "Cairo" poster signed by Steloria. Designed for art lovers and curious minds, this paint by numbers kit transforms a creative moment into an elegant and sensual work. Every detail has been thought out to provide a soft, soothing, and perfectly mastered experience, even for beginners. A simple and refined artistic experience Imagine the softness of a brush gliding over a quality surface, the warm colors gradually revealing a scene bathed in mystery. Our "Cairo" poster offers a perfect balance between ease of execution and spectacular results. You enjoy following the numbers, while the image comes to life under your fingers, a moment of creative relaxation to give or to indulge in. What your kit contains A pre-printed canvas "Cairo" to paint A carefully measured palette of acrylic paints Several quality brushes for details and flat areas A clear and visual guide to assist with each step Quality, size, and commitment The poster is printed on a thick canvas, suitable for acrylic paints, with no risk of deformation. It fits your space, wall, desk, or reading nook. Steloria is committed to quality: durable inks, stable colors, and materials selected to last. The careful packaging ensures delivery without creases or damage. Practical tips for a perfect result Start with the large areas, then move on to the details. Clean the brushes between each color for pure shades. Let each area dry before layering. Frame your poster once dry to protect and enhance the artwork. Why choose Steloria? Steloria offers a simple promise: an accessible, elegant, and rewarding creative experience. The "Cairo" poster is a sensory invitation to creation, ideal for relaxing, decorating, or giving a personalized gift. Start your pictorial journey today and let the magic happen. Description Model : Cairo 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