/* 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; } Appetizer platter - Paint by numbers Give your evenings an artistic and sensual touch with the "appetizer platter" paint by numbers kit from Steloria, designed to enhance your convivial moments. Each stroke, each color lays like a caress on the wood, transforming a simple board into a warm work of art. Ideal for DIY enthusiasts and attentive hosts, this creation combines the pleasure of painting with the elegance of serving. Elegance, simplicity, and professional results The "appetizer platter" kit from Steloria is designed so that even a beginner can achieve a refined result. The numbered areas guide your hand, the pre-mixed colors glide smoothly for a velvety and harmonious finish. Kit contents Numbered canvas, quality finish. Set of fine acrylic paints, in shades selected for a gourmet finish. Brushes of different sizes for details and flat areas. Step-by-step instructions. Advantages that make a difference Quick and rewarding: neat result in a few hours. Perfect gift: a personal and refined attention. Usage advice: paint in a well-lit area, start with light tones, let dry between layers for a flawless finish. After complete drying, protect the surface with a varnish. Steloria transforms an appetizer platter into a memorable experience. Embrace the "appetizer platter" paint by numbers to create, share, and enhance your gourmet moments with elegance and simplicity. Description Model: Appetizer platterMethod: 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