/* 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; } Le chat de chinatown - Peinture par numéros Plongez dans un instant de grâce et de couleur avec "Le chat de Chinatown", une peinture par numéros signée Steloria. Ce tableau révèle un chat mystérieux, posé sous des lanternes rouges et des néons doux. Les teintes chaudes et les contrastes subtils invitent à un voyage sensoriel : chaque coup de pinceau devient une caresse pour l'âme. Conçue pour tous les niveaux, cette création transforme un après-midi calme en moment d'art précieux. Pourquoi choisir cette peinture par numéros ? Simple, apaisante et incroyablement satisfaisante, "Le chat de Chinatown" est idéale pour qui cherche à allier détente et créativité. Le design élégant met en valeur : Une composition raffinée, mélange d'ombres et de lumières Couleurs pré-mélangées pour un rendu fidèle et harmonieux Contours nets et numérotation claire, pour peindre sans stress Format idéal pour exposer ou offrir Contenu du kit Chaque kit Steloria contient tout le nécessaire pour réussir votre œuvre, sans surprises : Toile imprimée de haute qualité, prête à peindre Ensemble de peintures acryliques numérotées Pinceaux de tailles variées pour détails et aplats Guide pas à pas simple à suivre Palette de couleurs et support de séchage Comment utiliser votre kit Peindre n'a jamais été aussi plaisant. Suivez ces étapes pour un résultat élégant : Installez un espace calme, bien éclairé Commencez par les grandes zones, peignez du numéro le plus bas au plus haut Utilisez les petits pinceaux pour les détails du regard et des lanternes Laissez sécher entre chaque couche et corrigez si besoin Un cadeau parfait et un objet d'art Offrez ou gardez cette œuvre comme un souvenir de sérénité. "Le chat de Chinatown" séduira les amateurs d'art, les passionnés de décoration et tous ceux qui aiment créer avec élégance. Steloria transforme un simple loisir en une expérience sensuelle et mémorable, où chaque geste révèle une part de beauté. Adoptez-la pour redécouvrir la joie de peindre et la douce fierté d'une création finie. Description Modèle : La chat de chinatownMéthode : Peinture par numérosNiveaux de difficulté : IntermédiaireDimensions : 30x20cm, 40x50cm, 50x65cm et 60x75cmOptions de cadre : Vendu sans cadre ou avec cadre en kit à monter soi-mêmeSupport : Toile de lin/coton traitée et impriméeType de peinture : AcryliqueEmballage : 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