/* 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; } Barcelona Poster - Paint by numbers Immerse yourself in the soul of Barcelona with the Steloria poster, a paint-by-numbers artwork that transforms each stroke into emotion. The design evokes the golden light of the promenades, the Catalan rooftops, and the artistic momentum of the city. Easy to complete, this poster invites a moment of concentrated sweetness, where the gesture becomes pleasure and the color, memory. Atmosphere and Emotion Each shade has been chosen to awaken the Mediterranean warmth: ochres, blues, and touches of green respond to create a harmonious scene. The paint-by-numbers enhances the gradients effortlessly, offering an elegant result even for beginners. By working on this poster, you create not only an image but an atmosphere - intimate, sensual, and soothing. Transform Your Interior Hanging on the wall, this poster becomes a focal point, a living painting that captures the eye and warms the room. It fits a modern living room, a cozy bedroom, or an inspiring workspace. Ideal as a gift, it promises a creative moment to savor alone or share, leaving behind a precious personal artwork. Exclusive Steloria Design, inspired by Barcelona Easy to paint: clear numbers and well-defined areas Professional result without advanced technique Perfect for relaxing and developing creativity Features and Contents of the Kit Quality and Format The poster is printed on thick, matte, and durable paper, designed to absorb paint evenly. The numbered outlines are sharp for precise work. Optimized format for standard framing, it comes ready to be painted and then displayed. The included inks and paints offer careful coverage and colors true to the model. What the Steloria Kit Contains A pre-printed and numbered canvas A set of paints selected for this pattern Brushes of various sizes for details and flat areas A simple step-by-step guide to succeed in each area Indulge in a creative break with the Barcelona Steloria Poster: an accessible, sensual, and elegant project designed to enhance your interior. Let the color tell your story. Description Model : Barcelona 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