/* 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(16px, 1.8vw, 22px); font-weight:700; color: #464746; } .accordion button:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; border-radius:6px; } /* Icônes en ligne (flex child) */ .icona { width:22px; height:22px; opacity:.85; margin-right:6px; color: #464746; } .title-left { display:flex; align-items:center; gap:14px; } /* Chevron */ .chevrona { width:22px; height:22px; flex:0 0 22px; transition: transform .2s ease; color: #464746; } [aria-expanded="true"] .chevrona{ 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; } Poster Porto - Peinture par numéros Découvrez le "Poster Porto" signé Steloria, une invitation sensuelle au voyage à travers la peinture par numéros. Chaque trait se transforme en caresse, chaque couleur enveloppe votre regard pour recréer l'atmosphère chaude et intimiste de Porto. Conçu pour offrir détente et satisfaction créative, ce poster est idéal pour débutants comme pour passionnés souhaitant un projet élégant et maîtrisé. Description élégante Le Poster Porto présente un motif finement détaillé, imprimé sur un support de qualité qui capte la peinture sans bavure. Les zones numérotées guident la main, rendant l'expérience fluide et agréable. Les teintes sélectionnées par Steloria s'harmonisent pour restituer la lumière dorée des façades et la douceur des ruelles. Le résultat est une œuvre prête à être exposée, qui apporte une touche raffinée à votre intérieur. Caractéristiques pratiques Toile préparée pour la peinture, facile à travailler et résistant Zones numérotées claires pour un remplissage précis Palette de couleurs harmonieuse, pensée pour un rendu professionnel Instructions simples et adaptées aux débutants Format pratique, prêt à encadrer et à offrir Pourquoi choisir le Poster Porto ? Choisir Steloria, c'est opter pour une expérience sensorielle et maîtrisée. Le Poster Porto transforme un après-midi en parenthèse créative : un moment de calme, focalisé sur la beauté des couleurs et la douceur du geste. C'est aussi une manière élégante d'ajouter une touche personnelle à votre décor, sans nécessité d'être un artiste confirmé. Conseils d'utilisation Installez-vous dans un espace lumineux et calme. Commencez par les couleurs claires, puis passez aux nuances profondes. Nettoyez les pinceaux entre chaque teinte pour un rendu net. Laissez sécher avant de manipuler ou d'encadrer le poster. Idée cadeau et finition Le Poster Porto est un cadeau raffiné pour un proche ou pour soi-même. Offrez une expérience créative qui se transforme en décoration unique. Une fois achevé, il sublimera un mur, une bibliothèque ou un coin détente. Steloria accompagne votre geste d'art en proposant simplicité, beauté et plaisir à chaque numéro rempli. Description Modèle : Poster PortoMéthode : Peinture par numérosNiveaux de difficulté : IntermédiaireDimensions : 50x40cmOptions de cadre : Vendu sans cadreSupport : Toile de lin/coton traitée et impriméeType de peinture : Acrylique (24 couleurs)Emballage : roulé ou plié dans un emballage sécurisé // 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]);
