/* 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 Avignon - Peinture par numéros Offrez-vous une parenthèse douce et sensuelle avec le "Poster Avignon" de Steloria. Inspiré des ruelles ensoleillées et des façades ocres de la cité, ce kit de peinture par numéros transforme une image élégante en œuvre personnelle. Chaque coup de pinceau révèle des nuances chaudes et une profondeur subtile, pour une décoration qui respire l’art et la tranquillité. Conçu pour les amateurs comme pour les créatifs confirmés, le Poster Avignon invite à la détente et à la concentration. Sa qualité soignée et son rendu raffiné feront de votre intérieur un lieu d’apaisement ou un cadeau précieux, signé de vos propres mains. Ce que contient le kit Une toile pré-imprimée au trait net pour un rendu professionnel. Palette de couleurs numérotée, soigneusement sélectionnée pour restituer les tons d’Avignon. Deux pinceaux de qualité (fin et medium) pour détails et aplats harmonieux. Instructions claires pas à pas, compatibles débutants et ateliers créatifs. Pourquoi craquer pour Avignon ? Le Poster Avignon est plus qu’un simple loisir : c’est une expérience sensorielle. Il offre un résultat prestigieux sans complexité, un moment intime où chaque couleur raconte une histoire. Idéal pour: Détente après une journée chargée : peindre apaise et recentre. Décorer un salon, une chambre ou un bureau avec une touche artistique. Offrir un cadeau élégant, personnalisé et durable. Partager un atelier créatif en duo ou en petit groupe. Facile à suivre, gratifiant à compléter, le Poster Avignon par Steloria transforme le geste artistique en plaisir accessible. Laissez-vous porter par la douceur des couleurs, révélez une création unique et sublimez votre espace avec une pièce qui vous ressemble. Description Modèle : Poster AvignonMé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]);
