/* 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; } Shanghai Poster - Paint by numbers Dive into the nocturnal elegance of Shanghai with this Paint by numbers poster signed Steloria. Designed to reveal, under your fingers, a sensual and modern urban panorama, this model transforms each stroke into emotion. Ideal for decoration enthusiasts and creative minds looking for a soothing and rewarding activity. Charm and quality: what makes this poster unique Refined illustration: a panorama of Shanghai blending lights, reflection, and perspective for a captivating result. Clear numbering: numbered areas for simple guidance, even for beginners. Harmonious colors: predefined palette designed for a balance between softness and intensity. Neat finish: elegant result, ready to frame to enhance your interior. Contents of your kit 1 printed canvas in 50x40cm format. Assorted acrylic paints pre-dosed for each number. 3 brushes of varying sizes for fine areas and flat areas. Guide sheet with practical tips and color palette. Simple, soothing, and decorative This Paint by numbers poster is a gentle pause in the daily turmoil. Let yourself be guided by the numbers, breathe, and watch the painting come to life layer by layer. The activity promotes concentration, reduces stress, and offers immediate satisfaction as the image gradually appears under your hands. Quick tips for a perfect result Start with light colors and then progress to dark tones. Clean the brushes between each color for clean edges. Work in a well-lit area and let dry between layers if necessary. Frame your artwork as soon as it is completely dry to protect and display it. Who and why to give Give this poster to a creative loved one, to someone seeking relaxation, or keep it for yourself. It’s an elegant, useful, and memorable gift that transforms a simple afternoon into a personal creation. Steloria here signs an object that is both aesthetic and therapeutic, designed to beautify your interior. Description Model : Shanghai 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