/* 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 Santorin - Peinture par numéros Offrez-vous un voyage sensoriel vers les falaises de Santorin sans quitter votre maison. Ce poster signé Steloria réunit la simplicité d'une peinture par numéros et l'élégance d'une scène méditerranéenne. Les bleus profonds de la mer, les blancs éclatants des maisons et la chaleur dorée du soleil se révèlent sous vos pinceaux, instantanément accessibles, même sans expérience artistique. Caractéristiques essentielles Toile prédessinée et numérotée pour un guidage clair et sans effort. Couleurs fidèles et contrastes étudiés pour un rendu raffiné. Format pratique, facile à encadrer ou à offrir en cadeau. Ce que vous vivez en le peignant Chaque coup de pinceau devient une caresse : le bleu azur se fond, les blancs s’illuminent, la scène prend vie. Peindre ce poster, c'est composer un instant de calme et de plaisir sensoriel. Le geste devient rituel, l'esprit se détend, et vous repartez avec une œuvre décorative, empreinte de lumière et d'élégance. Pourquoi choisir le Poster Santorin par Steloria ? Steloria a conçu ce poster pour ceux qui cherchent à allier détente créative et décoration soignée. Sans prétention technique, le système par numéros garantit un résultat harmonieux, accessible en quelques heures. Idéal pour un week-end détente, un atelier entre amis ou un cadeau qui touche. Avantages pratiques Accessible à tous les niveaux : débutants comme confirmés. Rapide à réaliser : satisfaction visible dès les premières zones peintes. Facile à encadrer pour sublimer un mur, une entrée ou un salon. Design intemporel qui s’accorde avec une décoration moderne ou bohème. Offrez-vous un moment d'élégance Adoptez le Poster Santorin pour transformer un mur et un instant. Steloria vous invite à peindre, relaxer, et exposer une scène qui évoque le soleil, la mer et la douceur de vivre. Un choix raffiné pour embellir votre intérieur ou offrir un cadeau empreint de sens. Description Modèle : Poster SantorinMé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]);
Related
Related
Related
Related