/* 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; } Mumbai Poster - Paint by numbers Dive into the vibrant soul of Mumbai with this paint by numbers poster. Designed to combine relaxation and creativity, this kit transforms an urban pattern into a sensory experience: warm colors, careful contrasts, and details that invite calm. Whether you are a beginner or an experienced hobbyist, this poster guides you step by step towards a work ready to enhance your interior. An elegant design, a scene that tells a story The visual captures the characteristic light of the alleys and facades of Mumbai, with well-defined areas for a harmonious rendering. The shapes are simple enough to offer a moment of relaxation, while maintaining a finesse that gives elegance once the painting is completed. Easy, soothing, satisfying Painting becomes a sensual ritual: the brush glides, the color lays down, and the daily tension fades away. Each numbered section is designed for an effortless result, allowing you to quickly see the work come to life and providing immediate satisfaction. Practical Features Poster format: dimensions suitable for a standard frame 50x40cm Support: quality canvas for durable paint retention. Marking: clear and readable numbers for a smooth and enjoyable work. Colors: palette selected to reproduce the warm and bright atmosphere of Mumbai. Level: accessible to beginners, interesting for enthusiasts looking for a quick project. Kit contents Printed canvas with numbered areas. Palette of pre-numbered and non-toxic acrylic paints. 1 set of quality brushes (different sizes). Simple and illustrated guide to accompany each step. Framing and care tips to preserve your work. Indulge in a moment of creative escape or choose this poster as a refined gift. It adds an immediate artistic touch to your living room, office, or bedroom. Order this Mumbai Poster - Paint by numbers and let the city reveal its colors under your fingers. Description Model : Mumbai 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