/* 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; } Red wine and cheeses - Paint by numbers Immerse yourself in a warm and sensual atmosphere with "Red wine and cheeses", a paint by numbers created by Steloria. Each brushstroke reveals the depth of ruby, the creamy texture of cheeses, and the soft glow of an intimate table. Designed for lovers of aesthetics and well-being, this kit transforms a simple moment into a tactile and visual experience, accessible to all, beginners and experts alike. Why this kit is appealing Steloria combines elegance and simplicity: rich colors, precise outlines, and a composition designed to evoke the conviviality of a shared evening. The paint by numbers unleashes your creativity without the effort of artistic setup. You achieve a professional result, without stress, by following a relaxing process that calms the mind and stimulates the senses. What's in your box Printed canvas with numbers and an easy-to-stretch frame High-quality acrylic paints, colors specially selected to reproduce the shades of wine and dairy products Set of brushes suitable for details and flat areas Clear instructions and mixing guide to refine gradients Practical palette to prepare your shades Instructions and benefits This kit is not just a hobby: it is a sensory experience that offers relaxation, pride, and decoration. In just a few evenings, you create an elegant work ready to enhance your interior or become a refined gift. Tips for a perfect result Start with the small numbered areas to master the gesture Clean the brushes between each color for pure colors Layer slightly to create highlights and relief Let dry completely before framing or displaying Usage ideas and gifts Creative evening for two for a shared moment Relaxation workshop among friends to share a gourmet atmosphere Elegant gift for birthdays, housewarmings, or celebrations Warm decoration for kitchen, living room, or tasting corner Treat yourself or give the luxury of an artistic moment with Steloria "Red wine and cheeses". A kit designed to reveal your sense of detail and bring a touch of refined sensuality to your daily life. Description Model : Red wine and cheeses - Paint by numbersMethod : 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