/* 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; } Gourmet coffee - Paint by numbers Indulge in a sensory break with "Gourmet coffee", a paint by numbers created by Steloria that celebrates the precious moment of coffee accompanied by treats. Designed to awaken your senses and soothe the mind, this warm scene guides you step by step towards an elegant work, rich in textures and delicious shades. The final result, with sculpted colors and a velvety finish, will transform your interior into an intimate coffee corner, where the promise of a warm moment resonates. Why you will love it Easy to handle yet sophisticated in effect, this paint by numbers is aimed at both beginners and discerning enthusiasts. It invites a gentle and sensual creative experience: the brush glides, the shades are applied like an aroma that rises slowly, and the image comes to life before your eyes. Painting then becomes a relaxing ritual, a pause where one refocuses, while creating a decorative object that elicits compliments and desires. Warm atmosphere and refined aesthetics, ideal for the kitchen or living room. Complete kit for a hassle-free experience: numbered canvas, acrylic paints, brushes, detailed guide. Easy framing to immediately display your creation. Format designed for a rich rendering of details and subtle gradients. Kit contents and usage tips Each kit "Gourmet coffee" contains everything you need to create a finished work with peace of mind. The acrylic paints are pigmented for a bright and durable finish, the brushes are suitable for fine areas as well as flat surfaces, and the ready-to-paint canvas is of superior quality to ensure good color adhesion. Follow the included guide for precise gestures and enjoy our tips: start with the light areas, let dry between layers, and use a fine brush for the delicious details. Numbered canvas ready to hang. High pigmentation acrylic paints with quick drying. Two brushes (fine and medium) to master precision and coverage. Step-by-step illustrated guide for a stress-free result. Adopt "Gourmet coffee" to transform your free time into a creative and sensual moment. Whether for a thoughtful gift or to beautify your space, let Steloria guide you towards a delicious and characterful work. Description Model : Gourmet coffeeMethod : 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]);
