/* 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; } Toronto Poster - Paint by numbers Give your interior a sensual dive into urban elegance with the Toronto Poster from Steloria. This paint by numbers kit transforms the famous silhouette of Toronto into an accessible and refined work of art. The chosen shades enhance the light on the water, the skyscrapers, and the reflections, for a soft and captivating rendering that draws the eye without ever tiring. Main features Poster format suitable for modern walls and small spaces. Quality pre-printed canvas, easy to stretch and frame. Acrylic paints with rich and durable pigments. Brushes in three sizes for details and flat areas. Clear numbering for a precise result, even for beginners. Kit contents 1 pre-numbered poster canvas (ready to paint). 18 to 24 pots of acrylic paint depending on the model. 3 brushes (fine, medium, large). Simple and illustrated step-by-step guide. Why choose Steloria? Steloria designed this Toronto Poster to provide a creative experience that is both relaxing and rewarding. The poster format easily fits into a living room, bedroom, or office, bringing a refined and personal touch. The paint by numbers process allows you to enjoy the pleasure of painting without constraints, and the final result evokes a painted photograph, rich in atmosphere. Benefits for you Immediate serenity: a step-by-step anti-stress hobby. Guaranteed aesthetics: a ready-to-display painting, carefully finished. Elegant gift: discreet packaging, ideal for gifting. Progressive learning: improves precision and color sense. Easy to use, enjoyable to paint, the Toronto Poster from Steloria transforms a creative moment into a unique decorative object. Embrace the view, follow the numbers, and reveal an urban scene that will charm your walls. Indulge in this pictorial journey and create an intimate, bright, and decidedly contemporary atmosphere in your home. Description Model : Toronto 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