/* 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; } Mini Robots Chibi - Manga - Paint by numbers Immerse yourself in a tender and futuristic universe with the Mini Robots Chibi kit from Steloria. Every detail breathes the softness of manga style, from the rounded lines to the expressive eyes of these little robots. Designed to awaken creativity, this paint by numbers kit transforms a calm moment into a sensual and satisfying experience. Ideal for beginners and enthusiasts alike, it promises a professional result without complicated effort. What's in your box Pre-printed canvas in a compact format, easy to frame. Numbered paint packets with rich and opaque pigments. Precision brushes suitable for chibi details and flat areas. Clear step-by-step guide to follow the numbered areas. The advantages that make a difference Every element of the kit has been designed to offer pleasure and elegance: the colors are chosen for their intensity and manga harmony, the pigments dry quickly without losing their brilliance, and the canvas perfectly retains the paint for a clean and durable finish. Painting becomes a caress for the mind - a sensory moment where the hand follows the gentle logic of the numbers and where the image comes to life, little by little. Usage, relaxation, and gifts Easy, calming, accessible The numbered principle makes creation accessible to everyone. In just a few calm sessions, you will see a small colorful world come to life. It’s a perfect activity to disconnect, practice mindfulness, and regain a sense of accomplishment. With family, friends, or solo, the pace is yours: detailed or quick, depending on your desire. A gift that touches Give an original present for birthdays, holidays, or just to please. Suitable for teenagers, young adults, and manga or kawaii enthusiasts. After finishing, display your work: it brings charm and modernity to any interior. Steloria invites you to create, feel, and display. Let yourself be seduced by the delicacy of Mini Robots Chibi and transform a simple kit into a lively and emotional painting. Description Model : Mini Robots Chibi - MangaMethod : 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