/* kit-vivant.css : styles des interactions (jetons du site : --c-primaire, --c-texte, --c-surface…). */ /* Apparition au defilement : deplacement seul, jamais d'opacite nulle. Un bloc reste lisible si l'observateur ne se declenche pas ou si la capture tombe pendant la transition (regle portier : etat visible par defaut). */ /* Etat visible par defaut : l'opacite vaut 1 en CSS, avant tout JavaScript, et le reste pendant la transition. L'animation ne joue que sur le deplacement, ajoute en surcouche par le JS (classe .kv-js sur ). */ [data-apparait], .kv-js [data-apparait], .kv-js [data-apparait]:not(.kv-vu) { opacity: 1; } .kv-js [data-apparait] { transform: translateY(18px); transition: transform .45s ease; } .kv-js [data-apparait="gauche"] { transform: translateX(-24px); } .kv-js [data-apparait="droite"] { transform: translateX(24px); } .kv-js [data-apparait].kv-vu { 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); } /* étapes : l'étape active ressort, le visuel change en fondu */ [data-etape], [data-etape] h3, [data-etape] p { opacity: 1; } [data-etape] { transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease; } [data-etape].kv-actif { border-color: var(--c-secondaire); box-shadow: var(--o-carte); transform: translateY(-2px); } [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; } @keyframes kv-fondu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* défilé de logos partenaires :
logos ×2
*/ [data-defile] { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } [data-defile] .kv-piste { display: flex; gap: 3rem; align-items: center; width: max-content; animation: kv-defile 38s linear infinite; } [data-defile]:hover .kv-piste { animation-play-state: paused; } /* Hauteur optique homogene pour tous les items, et gris jamais plus clair que #6b575b : un logo doit rester lisible sur fond blanc. */ /* Bande de logos : toutes les marques sont resolues en noir plein, quelle que soit la couleur d'origine de l'asset (un logotype bleu clair passait en gris delave avec un simple grayscale). Densite et hauteur optique identiques pour tous les items ; la couleur de marque ne revient qu'au survol. */ [data-defile] img { height: 30px; max-height: 30px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: 1; transition: filter .25s, opacity .25s; } [data-defile] img:hover { filter: none; } @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) { [data-apparait], .kv-js [data-apparait], .kv-js [data-apparait]:not(.kv-vu) { opacity: 1 !important; transform: none !important; transition: none !important; } [data-defile] .kv-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } [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] [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; }