/* 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; } Macarons pyramid - Paint by numbers Dive into a sensory and creative experience with the "Macaron Pyramid" by Steloria. This paint-by-numbers canvas combines the delicacy of French pastries with a soft and sensual palette. Designed for relaxation and elegance, it transforms an ordinary moment into an artistic break, where each brushstroke reveals a harmony of colors and textures. Product Description The canvas offers a refined composition: a macaron pyramid in pastel shades, subtly shaded to give relief and depth. The format is designed to be hung or gifted. The numbers guide your gesture, making painting accessible even to beginners while appealing to discerning enthusiasts with the quality of the rendering. What's in the kit High-quality pre-printed canvas with numbered areas Palette of acrylic paints with rich and satin pigments Set of brushes of various sizes for details and flat areas Clear instructions with tips for execution and framing Carefully packaged signed Steloria, ready to gift Kit contents and benefits Indulge in a suspended moment: the Macaron Pyramid invites gentle concentration, reduces stress, and awakens creativity. Its gourmet and elegant rendering enhances your interior or becomes a refined gift for a loved one. Each shade has been selected to evoke the delicacy of a tasting, while remaining easy to apply. Why fall for this paint by numbers? Easy access: ideal for beginners as well as experienced Professional result without complex techniques Quick drying and durable finish Complete kit: nothing to add, just desire Tips for a perfect result Start with light colors for better layering Use the fine brush for outlines and the wider one for flat areas Let dry between layers for a smooth finish Frame the painting for an elegant presentation or gift it as is Let Steloria transform your break into a precious moment. Order the Macaron Pyramid and savor the combination of artistic gesture and gourmet charm. Description Model : Macaron PyramidMethod : 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]);
