/* 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; } Tokyo Poster - Paint by numbers Discover Steloria and dive into the nocturnal elegance of Tokyo with this paint by numbers poster. Each shade has been designed to reveal a city that is both vibrant and mysterious. The silky touch of the canvas, the delicate lines, and the harmonious colors invite a creative and sensual moment, perfect for enhancing a wall or providing an aesthetic pause in your daily life. Atmosphere and design The pattern captures the urban essence: silhouettes, reflections. The numbered areas make coloring easy and ensure a professional finish, even for a beginner. In the end, the poster becomes a refined decorative piece that attracts the eye and transforms your interior into a gallery of emotions. Technical characteristics Poster format optimized for standard framing. High-quality canvas for a smooth application of paints. Clearly printed numbered areas for precise filling. Acrylic paints included, quick-drying and colorfast. Accessible level: beginner to intermediate - neat result guaranteed. Simple use, striking result Dare to embrace the serenity of a creative session. Follow the numbers, let the brush glide, and watch the scene reveal itself layer by layer. The activity is ideal for relaxing after a busy day, sharing a moment together as a duo, or introducing a teenager to art without complexity. Why choose Steloria Exclusive design, created to evoke emotions and sophistication. Selected materials for color retention and an elegant finish. Carefully packaged, perfect for immediate gifting. Box contents & tips Numbered printed canvas ready to paint. Set of matching acrylic paints. Brushes of various sizes and step-by-step guide. Tip: start with the light areas, then the shadows for a deep result. Adopt Tokyo Poster from Steloria! An artistic gesture that enhances your space and charms your guests. Order and start creating a work that tells your story. Description Model : Tokyo 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