/* kit-vivant.css : styles des interactions (jetons du site : --c-primaire, --c-texte, --c-surface…). */
.kv-js [data-apparait] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
/* gauche et droite glissent à la verticale : un décalage horizontal créait un défilement
   horizontal sur mobile tant que le bloc n était pas apparu (25/09, demo-immo à 390 px) */
.kv-js [data-apparait="gauche"] { transform: translateY(18px); }
.kv-js [data-apparait="droite"] { transform: translateY(18px); }
.kv-js [data-apparait].kv-vu { opacity: 1; transform: none; }
/* frise : un trait de fond et un trait qui se remplit (--kv-progression 0 → 1) */
[data-frise] { position: relative; padding-left: 2.25rem; list-style: none; }
[data-frise]::before, [data-frise]::after { content: ""; position: absolute; left: .6rem; top: .4rem; width: 3px; border-radius: 3px; }
[data-frise]::before { bottom: .4rem; background: color-mix(in srgb, var(--c-texte, #222) 14%, transparent); }
[data-frise]::after { height: calc((100% - .8rem) * var(--kv-progression, 0)); background: var(--c-primaire, #333); transition: height .15s linear; }
[data-jalon] { position: relative; }
[data-jalon]::before { content: ""; position: absolute; left: -1.95rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--c-fond, #fff); border: 3px solid color-mix(in srgb, var(--c-texte, #222) 25%, transparent); transition: all .3s ease; z-index: 1; }
[data-jalon].kv-atteint::before { border-color: var(--c-primaire, #333); background: var(--c-primaire, #333); transform: scale(1.15); }
/* Sous 640 px (garde 29/09/2026, activ-travaux-habitat.com) : le rail de la frise mange 2,25rem
   et la carte du jalon 3rem de plus : le texte du jalon tombait sous 300 px (page-cassee
   colonne_etroite a 390 px). La frise devient une pile de cartes, rail et pastilles retires. */
@media (max-width: 639px) {
  [data-frise] { padding-left: 0; }
  [data-frise]::before, [data-frise]::after, [data-jalon]::before { display: none; }
}
/* étapes : l'étape active ressort, le visuel change en fondu */
[data-etape] { opacity: .5; transition: opacity .35s ease, transform .35s ease; }
[data-etape].kv-actif { opacity: 1; transform: translateX(4px); }
[data-etapes-visuel] { transition: opacity .18s ease; }
[data-etapes-visuel].kv-change { opacity: 0; }
@media (min-width: 900px) { [data-etapes] [data-etapes-visuel] { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); } }
/* quiz */
.kv-choix { display: flex; gap: .6rem; margin: .75rem 0; }
.kv-bouton { cursor: pointer; border: 2px solid var(--c-primaire, #333); background: transparent; color: var(--c-texte, #222);
  border-radius: 999px; padding: .45rem 1.2rem; font: inherit; font-weight: 600; transition: background .2s, color .2s, transform .1s; }
.kv-bouton:hover { transform: translateY(-1px); }
.kv-bouton.kv-choisi { background: var(--c-primaire, #333); color: var(--c-sur-primaire, #fff); }
[data-question].kv-juste { box-shadow: inset 4px 0 0 #1f9d55; }
[data-question].kv-rate { box-shadow: inset 4px 0 0 #d64545; }
[data-question][data-repondu] .kv-bouton:not(.kv-choisi) { opacity: .45; }
[data-explication] { animation: kv-fondu .35s ease; }
/* quiz pas à pas (Cedia 26/09) : une affirmation à la fois, compteur, Suivante, score */
[data-quiz] [data-question][hidden], .kv-quiz-pied [hidden] { display: none !important; }
.kv-quiz-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; }
.kv-quiz-compteur { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.kv-bouton { min-height: 44px; }
.kv-bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.kv-bouton:focus-visible { outline: 3px solid var(--c-primaire, #333); outline-offset: 2px; }
[data-question].kv-nuance { box-shadow: inset 4px 0 0 #c58a00; }
@keyframes kv-fondu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* défilé de logos partenaires : <div data-defile><div class="kv-piste"> logos ×2 </div></div> */
[data-defile] { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
[data-defile] .kv-piste { display: flex; gap: 0; align-items: center; width: max-content; animation: kv-defile 38s linear infinite; }
/* l'écart est une marge de chaque logo, pas un gap : les deux moitiés font exactement la même largeur */
[data-defile] .kv-piste > * { flex: none; margin-right: 3rem; }
[data-defile]:hover .kv-piste { animation-play-state: paused; }
[data-defile] img { height: 36px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
[data-defile] img:hover { filter: none; opacity: 1; }
@keyframes kv-defile { to { transform: translateX(-50%); } }
[data-lottie] { width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .kv-js [data-apparait] { opacity: 1; transform: none; transition: none; }
  [data-defile] .kv-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  /* Un défilé DANS un bandeau ne se replie jamais : le bandeau est collant (règle [data-bandeau]
     ci-dessus) et souvent posé en tête de page. Replié, il devient une barre de plusieurs
     centaines de pixels qui couvre l'écran et masque le titre principal (garde du parc
     30/09/2026, decorateur-maison.com : 20 titres repliés = 898 px de bandeau, 967 px de
     header fixe pour 900 px d'écran). Il reste donc sur une ligne et se parcourt au doigt,
     faute d'animation. Une bande de logos, elle, garde son repli : rien à parcourir. */
  [data-bandeau] [data-defile] { overflow-x: auto; overflow-y: hidden; }
  [data-bandeau] [data-defile] .kv-piste { flex-wrap: nowrap; width: max-content; justify-content: flex-start; }
  [data-etape], [data-etapes-visuel], [data-frise]::after, [data-jalon]::before { transition: none; }
}
/* ───────────── widgets de thématique ───────────── */
[data-calcul] { display: grid; gap: .9rem; }
[data-calcul] label { display: grid; gap: .3rem; font-weight: 600; }
[data-calcul] input, [data-calcul] select { font: inherit; padding: .6rem .8rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--c-texte, #222) 20%, transparent); background: var(--c-fond, #fff); color: var(--c-texte, #222); }
[data-calcul] input[type="range"] { padding: 0; accent-color: var(--c-primaire, #333); }
[data-formule] { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 700; color: var(--c-primaire, #333); font-variant-numeric: tabular-nums; }
[data-onglets] [role="tablist"], [data-bascule] .kv-interrupteur { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--c-texte, #222) 7%, transparent); }
[data-onglet], [data-choix] { cursor: pointer; border: 0; background: transparent; font: inherit; font-weight: 600; padding: .5rem 1.1rem; border-radius: 999px; color: var(--c-texte, #222); transition: background .2s, color .2s; }
[data-onglet].kv-actif, [data-choix].kv-actif { background: var(--c-primaire, #333); color: var(--c-sur-primaire, #fff); }
[data-panneau] { animation: kv-fondu .3s ease; }
.kv-en-avant { outline: 3px solid var(--c-primaire, #333); outline-offset: -3px; transform: translateY(-4px); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--c-primaire, #333) 60%, transparent); transition: all .25s ease; }
[data-avant-apres] { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 10; }
[data-avant-apres] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-avant-apres] .kv-avant-traite { filter: grayscale(.75) sepia(.35) contrast(.8) brightness(.82) saturate(.7); }
[data-avant-apres] [data-apres] { clip-path: inset(0 0 0 var(--kv-coupe, 50%)); }
[data-avant-apres]::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--kv-coupe, 50%); width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.kv-curseur { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
[data-bandeau] { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .55rem 1rem; background: var(--c-primaire, #333); color: var(--c-sur-primaire, #fff); font-weight: 600; }
[data-bandeau] a { color: inherit; text-decoration: underline; }
[data-bandeau] [data-fermer] { background: transparent; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }

/* Barre de progression du quiz : --kv-quiz-prog (0 a 1) est posee sur [data-quiz] par le kit,
   --kv-nb (nombre d'affirmations) et --i (rang du segment) aussi. Le remplissage passe par
   scaleX : la micro-syntaxe An+B de :nth-child n'accepte pas var(), tout le selecteur serait jete. */
[data-quiz] { --kv-quiz-prog: .2; --kv-nb: 5; }
.kv-quiz-gauche { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.kv-quiz-prog { display: flex; gap: 6px; width: clamp(120px, 22vw, 220px); }
.kv-quiz-prog span { position: relative; flex: 1 1 0; height: 8px; border: 2px solid var(--c-primaire, #333); background: transparent; }
.kv-quiz-prog span::after {
  content: ""; position: absolute; inset: 0; background: var(--c-primaire, #333);
  transform: scaleX(clamp(0, calc(var(--kv-quiz-prog) * var(--kv-nb) - var(--i) + 1), 1));
  transform-origin: left; transition: transform .18s linear;
}
@media (prefers-reduced-motion: reduce) { .kv-quiz-prog span::after { transition: none; } }