/* 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; } Bogotá Poster - Paint by numbers Indulge in an elegant creative experience with the Bogotá Poster by Steloria. This kit transforms a moment of relaxation into an emotionally rich creation. The sharp lines and numbered areas guide your hand, while the selected palette evokes the warmth and poetry of Bogotá. Whether you are a beginner or an experienced hobbyist, the process becomes a sensual pleasure: each brushstroke caresses the canvas and gradually reveals a harmonious and characterful image. Main Features Generous format and neat design, intended to be framed and displayed. Precise numbered areas for a faithful and stress-free result. Balanced color palette, chosen to enhance the shades and depth. Quality materials for a durable result that is easy to fix. Why this poster is appealing A relaxing activity that stimulates concentration and calms the mind. A unique decorative object, personalized by your hands and ready to adorn your interior. Ideal for gifting: elegant, original, and personalized gift in just a few hours. Suitable for all levels: no experience needed to achieve a professional result. How to discover and succeed in Bogotá? Start by organizing your workspace: soft light, clean surface, and an inspiring break within reach. Follow the numbers, apply the paint gently, and let it dry between each layer to intensify the contrasts. The process is designed to enhance your gestures and gradually reveal the scene, like a delicate and sensual apparition. What's included in the kit The printed canvas with numbered markers for each area. A selection of paints suitable for the medium. One or more quality brushes for details and flat areas. A simple and clear guide to accompany each step. Tips for a perfect result Follow the order of colors to maintain visual harmony. Work from the background to the foreground for better control of contrasts. Clean the brushes regularly for sharp edges. Step back often to appreciate the progress and adjust if necessary. Steloria invites you to transform a simple poster into a personal work of art. Bogotá awaits you: let your hands trace the color, reveal the city, and create a painting imbued with elegance. Description Model : Bogotá 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