/* 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; } Ruelle fleurie - Peinture par numéros Laissez-vous emporter par la douceur d'une ruelle baignée de lumière et de fleurs. Steloria vous propose "Ruelle fleurie", une peinture par numéros conçue pour transformer un moment calme en une œuvre délicate. Chaque coup de pinceau révèle des nuances subtiles, un effleurement de couleurs qui redonne du sens à vos pauses créatives. Simple, élégant, sensuel - ce kit invite à la détente et au plaisir de créer. Pourquoi choisir Ruelle fleurie ? Apaisant et accessible : idéal pour débutants comme pour initiés, sans besoin d’expérience préalable. Résultat professionnel : palettes harmonieuses sélectionnées par nos artistes pour un rendu raffiné. Matières de qualité : peintures acryliques couvrantes, toile pré-imprimée résistante et pinceaux précis. Moment à soi : activité créative parfaite pour déstresser et retrouver un équilibre quotidien. Décor prêt à exposer : une œuvre élégante qui sublime un salon, une chambre ou un bureau. Contenu du kit et mode d'emploi Le kit "Ruelle fleurie" contient tout le nécessaire pour peindre facilement et avec plaisir. Les éléments sont pensés pour vous guider étape par étape, sans complication. Le format pratique permet de peindre chez soi, en voyage ou en cadeau. Ce que contient votre coffret Toile pré-imprimée numérotée et tendue pour une mise en place rapide. Palette de peintures acryliques numérotées, aux pigments stables et lumineux. Deux pinceaux de qualité : un fin pour les détails, un large pour les aplats. Notice claire et visuelle avec conseils de mélange et d’application. Conseils pour un rendu parfait Commencez par les zones claires, progressez vers les tons foncés. Nettoyez les pinceaux entre chaque couleur pour des contours nets. Laissez sécher entre les couches pour un relief délicat et soyeux. Encadrez votre toile pour un fini professionnel et une mise en valeur immédiate. Pour qui ? Pour ceux qui cherchent un loisir élégant, un cadeau raffiné ou une décoration personnelle. "Ruelle fleurie" convient aux amateurs d’art, aux personnes en quête de détente et à tous ceux qui aiment créer sans contrainte. Offrez-vous ce voyage sensoriel signé Steloria : une expérience créative, simple et gratifiante, qui transforme un instant en une belle œuvre à exposer. Description Modèle : Ruelle fleurieMéthode : Peinture par numérosNiveaux de difficulté : IntermédiaireDimensions : 20x30cm, 40x50cmOptions de cadre : Vendu sans cadreSupport : 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