/* Une app plein écran, une question par écran, pensée pour le pouce : barre de progression en haut, bouton de verre en bas.
   Noir profond, verre (effet glace VPE), blanc pour l'action, or seulement pour ce qui t'appartient (tes chiffres, ton point). */
:root {
  --noir: #070708;
  --noir-2: #111113;
  --blanc: #ffffff;
  --texte: #f4f4f5;
  --doux: #a3a3a9;
  --faible: #6c6c72;
  --or: #c9a24c;
  --rouge: #e0525a;
  --verre: linear-gradient(140deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 50%, rgba(255,255,255,.07) 100%);
  --verre-bord: rgba(255,255,255,.16);
  --verre-reflet: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.04);
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", Menlo, monospace;
  --marque: "Sora", "DM Sans", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--noir); color: var(--texte); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.fond { position: fixed; inset: 0; pointer-events: none; background:
  radial-gradient(520px 420px at 10% 8%, rgba(255,255,255,.08), transparent 65%),
  radial-gradient(520px 480px at 100% 92%, rgba(255,255,255,.06), transparent 65%), var(--noir); }
.fond::after { content: ""; position: absolute; left: 50%; top: 46%; width: 820px; height: 820px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 60%); animation: respire 9s ease-in-out infinite; }

.app { position: relative; height: 100%; max-width: 520px; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }

/* haut */
.haut { padding-block: 14px 8px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; }
.rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .2s, opacity .3s; }
.rond:active { transform: scale(.94); }
.rond svg { width: 18px; height: 18px; }
.rond[hidden] { display: grid !important; visibility: hidden; }
.progres { display: grid; gap: 7px; justify-items: center; }
.progres .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.piste { width: 100%; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.piste i { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.6); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.pct { font-family: var(--mono); font-size: 11px; color: var(--doux); text-align: center; }

/* scène */
.scene { position: relative; overflow: hidden; }
.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px; padding-block: 8px 12px; overflow-y: auto; scrollbar-width: none; }
/* centré quand ça tient, défilable sans chevauchement quand ça ne tient pas */
.ecran > * { flex-shrink: 0; }
.ecran > :first-child { margin-top: auto; }
.ecran > :last-child { margin-bottom: auto; }
.ecran::-webkit-scrollbar { display: none; }
.ecran[hidden] { display: none !important; }
.ecran.entre { animation: entre .55s cubic-bezier(.2,.8,.2,1) both; }
.ecran.entre-arriere { animation: entreArr .55s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); text-align: center; }
.q { font-size: clamp(25px, 6.6vw, 32px); line-height: 1.16; letter-spacing: -.03em; font-weight: 700; text-align: center; text-wrap: balance; }
.aide { text-align: center; color: var(--doux); font-size: 15.5px; max-width: 38ch; margin: 0 auto; text-wrap: pretty; }
.centre { display: grid; justify-items: center; gap: 14px; text-align: center; }

/* bas */
.bas { padding-block: 10px max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px)); display: grid; gap: 10px; }
.cta { height: 58px; border-radius: 18px; border: 1px solid rgba(255,255,255,.9); cursor: pointer; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #0a0a0b;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84)); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0,0,0,.08), 0 12px 34px rgba(255,255,255,.12);
  transition: transform .18s, opacity .3s, box-shadow .3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cta:active { transform: scale(.98); }
.cta:disabled { opacity: .28; cursor: default; box-shadow: none; }
.cta.pret { animation: lueur 2.8s ease-in-out infinite; }
.lien { background: none; border: 0; color: var(--doux); font-size: 14.5px; cursor: pointer; padding: 6px; }
.lien:hover { color: #fff; }

/* champs */
.champ { width: 100%; height: 64px; border-radius: 18px; padding: 0 20px; font-size: 22px; font-weight: 500; text-align: center; letter-spacing: -.02em;
  background: var(--verre), rgba(255,255,255,.03); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); outline: none; transition: border-color .3s, box-shadow .3s; }
.champ:focus { border-color: rgba(255,255,255,.55); box-shadow: var(--verre-reflet), 0 0 0 4px rgba(255,255,255,.06); }
.champ::placeholder { color: var(--faible); }
textarea.champ { height: 150px; padding: 16px 18px; font-size: 17px; text-align: left; resize: none; line-height: 1.5; }

/* choix */
.choix { display: grid; gap: 10px; }
.opt { min-height: 60px; border-radius: 18px; padding: 14px 18px; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .18s, border-color .25s, background .25s; font-size: 17px; font-weight: 500; }
.opt:active { transform: scale(.985); }
.opt .coche { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; transition: all .25s; }
.opt .coche::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #0a0a0b; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.opt.on { border-color: rgba(255,255,255,.85); background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); }
.opt.on .coche { background: #fff; border-color: #fff; }
.opt.on .coche::after { transform: scale(1); }
.opt small { display: block; font-size: 13px; color: var(--doux); font-weight: 400; margin-top: 2px; }
.echelle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.echelle .opt { flex-direction: column; justify-content: center; text-align: center; padding: 14px 4px; font-size: 13px; min-height: 84px; gap: 8px; }
.echelle .opt b { font-family: var(--marque); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }

/* repères */
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); }
.interrupteur b { font-weight: 600; font-size: 17px; }
.interrupteur span { display: block; font-size: 13px; color: var(--doux); }
.bascule { flex: none; width: 52px; height: 32px; border-radius: 99px; background: rgba(255,255,255,.14); position: relative; transition: background .3s; }
.bascule::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.interrupteur.on .bascule { background: rgba(201,162,76,.9); }
.interrupteur.on .bascule::after { transform: translateX(20px); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.puce { padding: 9px 14px; border-radius: 99px; font-size: 14.5px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: all .25s; }
.puce.on { background: #fff; color: #0a0a0b; border-color: #fff; font-weight: 600; }
.deplie { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.deplie > div { overflow: hidden; }
.deplie.ouvert { grid-template-rows: 1fr; }

/* chiffre de vie */
.chiffre-vie { font-family: var(--marque); font-weight: 800; font-size: 120px; line-height: .9; letter-spacing: -.06em; color: var(--or); text-shadow: 0 0 40px rgba(201,162,76,.35); }
.calc { font-family: var(--mono); font-size: 12px; color: var(--doux); letter-spacing: .04em; }

/* photo */
.cadre { position: relative; width: min(250px, 66vw); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cadre .base { filter: grayscale(1) contrast(1.12) brightness(.82); }
.cadre .neg { filter: grayscale(1) invert(1) contrast(1.7) brightness(1.15); mix-blend-mode: screen; opacity: .9; clip-path: inset(0 0 100% 0); }
.cadre .ligne { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: #fff; box-shadow: 0 0 18px 4px rgba(255,255,255,.65); opacity: 0; }
.cadre.actif .neg { animation: revele 4s cubic-bezier(.6,0,.4,1) infinite; }
.cadre.actif .ligne { opacity: 1; animation: balaye 4s cubic-bezier(.6,0,.4,1) infinite; }
.cadre .vide { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--doux); font-size: 14px; text-align: center; padding: 20px; }
.cadre .vide svg { width: 54px; height: 54px; opacity: .8; }
.cadre .visee { position: absolute; left: 20%; top: 14%; width: 60%; height: 56%; opacity: 0; transition: opacity .6s .3s; }
.cadre.actif .visee { opacity: 1; animation: vise 3s ease-in-out infinite; }
.visee i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255,255,255,.95); }
.visee i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 6px; }
.visee i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 6px; }
.visee i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 6px; }
.visee i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 6px; }
.fichier { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* introduction d'étape */
.etape { display: grid; justify-items: center; gap: 16px; text-align: center; }
.etape .num { font-family: var(--marque); font-weight: 800; font-size: 96px; line-height: .9; letter-spacing: -.06em; background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.25)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etape h2 { margin: 0; font-size: clamp(30px, 8vw, 40px); letter-spacing: -.04em; line-height: 1.05; }
.etape .duree { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); color: var(--doux); }

/* curseur 1 à 10 */
.curseur { display: grid; gap: 14px; }
.valeur { text-align: center; font-family: var(--marque); font-weight: 800; font-size: 76px; line-height: 1; letter-spacing: -.06em; transition: color .3s; }
.valeur small { font-size: 22px; color: var(--faible); letter-spacing: 0; }
.valeur .mot { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--doux); margin-top: 6px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #fff var(--p, 50%), rgba(255,255,255,.14) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: #fff; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.12); transition: transform .15s; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.bornes { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--faible); margin-top: -6px; }

/* roue en direct */
.roue-box { width: min(300px, 78vw); margin: 0 auto; }
.roue-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.roue-box polygon.forme { transition: all .45s cubic-bezier(.2,.8,.2,1); }
.domaine { text-align: center; display: grid; gap: 4px; }
.domaine b { font-size: 24px; letter-spacing: -.03em; }
.domaine span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--doux); text-transform: uppercase; }

/* entourage */
.ajout { display: grid; grid-template-columns: 1fr 58px; gap: 8px; }
.ajout .champ { font-size: 18px; height: 58px; text-align: left; }
.plus { height: 58px; border-radius: 18px; border: 1px solid rgba(255,255,255,.9); background: #fff; color: #0a0a0b; font-size: 26px; font-weight: 500; cursor: pointer; transition: transform .15s; }
.plus:active { transform: scale(.94); }
.noms { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 44px; }
.nom { display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border-radius: 99px; background: var(--verre), rgba(255,255,255,.04); border: 1px solid var(--verre-bord); animation: pop .45s cubic-bezier(.3,1.5,.5,1) both; font-size: 15px; }
.nom button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); cursor: pointer; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.carte-box { width: 100%; max-width: 380px; margin: 0 auto; border-radius: 20px; background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); padding: 10px; }
.carte-box svg { width: 100%; height: auto; display: block; }
.carte-box circle.point { transition: cx .5s cubic-bezier(.2,.8,.2,1), cy .5s cubic-bezier(.2,.8,.2,1), fill .4s; }
.carte-box text.etiq { transition: x .5s cubic-bezier(.2,.8,.2,1), y .5s cubic-bezier(.2,.8,.2,1); }
.mini { display: grid; gap: 4px; }
.mini .tete-mini { display: flex; justify-content: space-between; font-size: 14px; color: var(--doux); }
.mini .tete-mini b { color: #fff; font-family: var(--mono); font-weight: 500; }
.personne { text-align: center; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.personne small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--doux); font-weight: 400; text-transform: uppercase; }

/* situation */
.situation { border-radius: 22px; padding: 22px 20px; background: var(--verre), rgba(255,255,255,.03); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); text-align: center; display: grid; gap: 10px; }
.situation .heure { font-family: var(--marque); font-weight: 800; font-size: 44px; letter-spacing: -.05em; line-height: 1; }
.situation p { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.tel { justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 14px; animation: sonne 1.8s ease-in-out infinite; }
.tel i { width: 8px; height: 8px; border-radius: 50%; background: #48d27a; box-shadow: 0 0 10px #48d27a; }

/* vocal */
.micro { width: 128px; height: 128px; border-radius: 50%; margin: 6px auto 0; display: grid; place-items: center; cursor: pointer; position: relative; border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84)); box-shadow: inset 0 1px 0 #fff, 0 20px 50px rgba(255,255,255,.12); transition: transform .2s; }
.micro:active { transform: scale(.95); }
.micro svg { width: 40px; height: 40px; }
.micro::before, .micro::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); opacity: 0; }
.micro.rec { background: linear-gradient(180deg, #2a2a2c, #0c0c0d); border-color: rgba(255,255,255,.4); }
.micro.rec svg { color: #fff; }
.micro.rec::before { animation: onde 1.8s ease-out infinite; }
.micro.rec::after { animation: onde 1.8s .9s ease-out infinite; }
.carre { width: 34px; height: 34px; border-radius: 9px; background: var(--rouge); box-shadow: 0 0 20px rgba(224,82,90,.6); }
.spectre { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.spectre i { width: 4px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); transition: height .12s; }
.minuteur { text-align: center; font-family: var(--mono); font-size: 15px; letter-spacing: .08em; color: var(--doux); }
.lecteur { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--verre), rgba(255,255,255,.03); border: 1px solid var(--verre-bord); }
.lecteur .lire { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 0; cursor: pointer; }
.lecteur .lire::before { content: ""; border-left: 11px solid #0a0a0b; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.lecteur .barres { flex: 1; display: flex; gap: 3px; align-items: center; height: 28px; min-width: 0; overflow: hidden; }
.lecteur .barres i { flex: none; width: 3px; border-radius: 2px; background: rgba(255,255,255,.5); }
.lecteur span { font-family: var(--mono); font-size: 12px; color: var(--doux); }
.note-proto { text-align: center; font-size: 12.5px; color: var(--faible); }

/* jalon */
.jalon { display: grid; justify-items: center; gap: 18px; text-align: center; }
.anneau { width: 170px; height: 170px; position: relative; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--marque); font-weight: 800; font-size: 44px; letter-spacing: -.05em; }
.anneau circle.val { transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.jalon p.phrase { font-size: 21px; line-height: 1.35; letter-spacing: -.02em; max-width: 26ch; font-weight: 500; }

/* fin : le scan */
.final { display: grid; justify-items: center; gap: 22px; text-align: center; }
.final .cadre { width: min(220px, 58vw); }
.etapes-scan { display: grid; gap: 10px; width: 100%; max-width: 360px; text-align: left; }
.etapes-scan div { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--faible); transition: color .4s; }
.etapes-scan div i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: all .4s; }
.etapes-scan div.encours { color: #fff; }
.etapes-scan div.encours i { border-color: #fff; border-top-color: transparent; animation: tourne .8s linear infinite; }
.etapes-scan div.fait { color: var(--doux); }
.etapes-scan div.fait i { background: #fff; border-color: #fff; }
.etapes-scan div.fait i::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #0a0a0b; border-bottom: 2px solid #0a0a0b; transform: rotate(-45deg) translate(1px, -1px); }
.marque { font-family: var(--marque); font-weight: 800; font-size: clamp(70px, 22vw, 112px); line-height: .85; letter-spacing: -.06em; }
.marque span { color: var(--or); }
.pret-titre { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }

/* passage entre deux parties : le chemin des 7 étapes + la voix */
.passage { display: grid; gap: 22px; }
.chemin { display: grid; gap: 2px; position: relative; padding-left: 4px; }
.chemin::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: rgba(255,255,255,.1); border-radius: 2px; }
.chemin .remplit { position: absolute; left: 15px; top: 14px; width: 2px; height: 0; background: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,.6); transition: height 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
.jalon-l { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 6px 0; opacity: 0; animation: ligne .5s cubic-bezier(.2,.8,.2,1) both; }
.jalon-l .pt { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: var(--noir); display: grid; place-items: center; z-index: 1; }
.jalon-l span { font-size: 15.5px; color: var(--faible); }
.jalon-l em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faible); }
.jalon-l.fait .pt { background: #fff; border-color: #fff; }
.jalon-l.fait .pt::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #0a0a0b; border-bottom: 2px solid #0a0a0b; transform: rotate(-45deg) translate(1px, -1px); }
.jalon-l.fait span { color: var(--doux); }
.jalon-l.ici .pt { border-color: var(--or); box-shadow: 0 0 0 5px rgba(201,162,76,.15), 0 0 22px rgba(201,162,76,.5); animation: battement 2s ease-in-out infinite; }
.jalon-l.ici .pt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); }
.jalon-l.ici span { color: #fff; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.jalon-l.ici em { color: var(--or); }
.recit { font-size: clamp(19px, 5vw, 22px); line-height: 1.4; letter-spacing: -.015em; font-weight: 500; text-align: center; text-wrap: pretty; min-height: 4.2em; }
.recit b { color: var(--or); font-weight: 700; }
.recit .m { opacity: .12; transition: opacity .35s; }
.recit .m.lu { opacity: 1; }
.voix { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.voix .eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.voix .eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--or); }
.voix.parle .eq i { animation: eq .9s ease-in-out infinite; }
.voix.parle .eq i:nth-child(2) { animation-delay: .15s; } .voix.parle .eq i:nth-child(3) { animation-delay: .3s; } .voix.parle .eq i:nth-child(4) { animation-delay: .45s; }
.etapes-accueil { display: grid; gap: 10px; width: 100%; max-width: 360px; margin: 6px auto 0; text-align: left; }
.etapes-accueil div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); opacity: 0; animation: ligne .6s cubic-bezier(.2,.8,.2,1) both; }
.etapes-accueil b { font-family: var(--marque); font-weight: 800; font-size: 20px; letter-spacing: -.04em; color: var(--or); text-align: center; }
.etapes-accueil span { font-size: 15px; line-height: 1.35; }
.etapes-accueil span small { display: block; color: var(--doux); font-size: 12.5px; }
.douceur { text-align: center; font-size: 14px; color: var(--doux); padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.douceur b { color: #fff; }
.son-coupe .ondes { display: none; } .son-coupe .barre-son { display: inline !important; }
@keyframes ligne { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes battement { 0%, 100% { box-shadow: 0 0 0 5px rgba(201,162,76,.15), 0 0 22px rgba(201,162,76,.5); } 50% { box-shadow: 0 0 0 9px rgba(201,162,76,.06), 0 0 30px rgba(201,162,76,.7); } }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* prise de photo façon vérification d'identité */
.kyc { position: relative; width: min(290px, 74vw); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #050506; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.kyc .k-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.05); opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s; }
.kyc.photo .k-photo { opacity: 1; transform: none; }
.kyc.fini .k-photo { filter: grayscale(1) contrast(1.12) brightness(.85); }
.kyc .k-neg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) invert(1) contrast(1.7) brightness(1.15); mix-blend-mode: screen; opacity: 0; clip-path: inset(0 0 100% 0); }
.kyc.fini .k-neg { opacity: .9; animation: revele 4s cubic-bezier(.6,0,.4,1) infinite; }
.kyc svg.k-masque { position: absolute; inset: 0; width: 100%; height: 100%; }
.kyc .k-ovale { stroke-dasharray: 5 9; animation: tourneOvale 14s linear infinite; transition: stroke .4s, stroke-width .4s; }
.kyc.detecte .k-ovale { stroke-dasharray: none; animation: none; }
.kyc .k-progres { transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.kyc .k-points circle { opacity: 0; transition: opacity .5s; }
.kyc.maillage .k-points circle { opacity: 1; }
.kyc .k-points line { opacity: 0; transition: opacity .8s .3s; }
.kyc.maillage .k-points line { opacity: .35; }
.kyc .k-sil { position: absolute; left: 50%; top: 44%; width: 46%; transform: translate(-50%, -50%); opacity: .22; transition: opacity .4s; }
.kyc.photo .k-sil { opacity: 0; }
.kyc .k-ligne { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #fff; box-shadow: 0 0 18px 4px rgba(255,255,255,.65); opacity: 0; }
.kyc.balaye .k-ligne { opacity: 1; animation: balayeUn 1.6s cubic-bezier(.6,0,.4,1) both; }
.kyc.fini .k-ligne { opacity: 1; animation: balaye 4s cubic-bezier(.6,0,.4,1) infinite; }
.kyc .k-compte { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--marque); font-weight: 800; font-size: 96px; letter-spacing: -.06em; color: #fff; text-shadow: 0 0 30px rgba(0,0,0,.6); pointer-events: none; }
.kyc .k-compte b { animation: compte .6s cubic-bezier(.2,.8,.2,1) both; }
.kyc .k-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.kyc.flash .k-flash { animation: flash .5s ease-out both; }
.kyc .k-coin { position: absolute; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: rgba(255,255,255,.75); text-transform: uppercase; }
.kyc .k-c1 { top: 12px; left: 14px; } .kyc .k-c2 { top: 12px; right: 14px; } .kyc .k-c3 { bottom: 12px; left: 14px; } .kyc .k-c4 { bottom: 12px; right: 14px; }
.kyc .k-rec::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); margin-right: 6px; vertical-align: 1px; animation: clignote 1.2s steps(2) infinite; }
.k-etat { text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-height: 26px; }
.k-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.k-check { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faible); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: all .35s; }
.k-check i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: all .35s; }
.k-check.ok { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
.k-check.ok i { background: #fff; border-color: #fff; }
.k-check.ok i::after { content: ""; width: 7px; height: 3.5px; border-left: 2px solid #0a0a0b; border-bottom: 2px solid #0a0a0b; transform: rotate(-45deg) translate(1px, -1px); }
.k-check.encours i { border-color: #fff; border-top-color: transparent; animation: tourne .8s linear infinite; }
.k-vie { text-align: center; font-size: 12.5px; color: var(--faible); }
@keyframes tourneOvale { to { stroke-dashoffset: -280; } }
@keyframes balayeUn { from { top: 0%; } to { top: 100%; } }
@keyframes compte { from { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: .9; } }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes clignote { 50% { opacity: 0; } }

/* constellation des étapes */
.constellation { width: 100%; max-width: 420px; margin: 0 auto; }
.constellation svg { width: 100%; height: auto; display: block; overflow: visible; }
.constellation .halo { transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-in-out infinite; }
.constellation .noeud.ici .halo { animation-duration: 1.8s; }
.constellation .noeud.ici { opacity: 0; animation: apparaitNoeud .7s cubic-bezier(.3,1.6,.5,1) both; transform-box: fill-box; }
.constellation .noeud.ici .coeur { filter: drop-shadow(0 0 8px rgba(201,162,76,.9)); }
.constellation .noeud.fait .coeur { filter: drop-shadow(0 0 5px rgba(201,162,76,.6)); }
.constellation .trait-neuf { animation: traceTrait 1s cubic-bezier(.6,0,.2,1) .15s both; filter: drop-shadow(0 0 4px rgba(201,162,76,.8)); }
.nom-etape { margin: 0; text-align: center; font-size: clamp(30px, 8vw, 38px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; display: grid; gap: 8px; justify-items: center; }
.nom-etape span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; font-weight: 400; color: var(--or); padding: 6px 11px; border-radius: 99px; border: 1px solid rgba(201,162,76,.4); }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.7); opacity: 0; } }
@keyframes apparaitNoeud { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes traceTrait { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }

/* motion des pages : la nouvelle page est « scannée » sous nos yeux */
.ecran.sortie { animation: sortie .38s cubic-bezier(.4,0,.6,1) both; pointer-events: none; }
.ecran.scanne { animation: scanne .7s cubic-bezier(.65,0,.25,1) both; }
.ecran.scanne-arriere { animation: scanneArr .7s cubic-bezier(.65,0,.25,1) both; }
.balayage { position: absolute; left: -10%; right: -10%; height: 2px; top: 0; background: #fff; box-shadow: 0 0 22px 5px rgba(255,255,255,.55), 0 0 80px 18px rgba(255,255,255,.12); pointer-events: none; z-index: 5; animation: descend .7s cubic-bezier(.65,0,.25,1) both; }
.balayage.monte-l { animation-name: monteL; }
.mot-q { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: motQ .6s cubic-bezier(.2,.8,.2,1) both; }
.cascade > * { animation: cascade .55s cubic-bezier(.2,.8,.2,1) both; }
.opt, .cta, .plus, .micro { position: relative; overflow: hidden; }
.onde-tap { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0); width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); pointer-events: none; animation: ondeTap .6s ease-out both; }
@keyframes sortie { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(8px); } }
@keyframes scanne { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes scanneArr { from { clip-path: inset(100% 0 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes descend { from { top: 0%; opacity: 1; } 85% { opacity: 1; } to { top: 100%; opacity: 0; } }
@keyframes monteL { from { top: 100%; opacity: 1; } 85% { opacity: 1; } to { top: 0%; opacity: 0; } }
@keyframes motQ { to { opacity: 1; transform: none; filter: none; } }
@keyframes cascade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ondeTap { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

/* la molette : roue dentée vue de face */
.molette { position: relative; height: 86px; border-radius: 18px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden; outline-offset: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012) 38%, rgba(255,255,255,.012) 62%, rgba(255,255,255,.05)), #08080a;
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 12px 16px -12px rgba(0,0,0,.95), inset 0 -12px 16px -12px rgba(0,0,0,.95), var(--verre-reflet), 0 18px 40px -26px rgba(0,0,0,.9); }
.molette.compacte { height: 58px; border-radius: 14px; }
.molette.tenue { cursor: grabbing; }
.molette canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.molette { width: 100%; min-width: 0; }
.curseur, .mini, #d-mol, #c-mol, #m-d, #m-p, #m-c { min-width: 0; }
.mol-repere { position: absolute; left: 50%; top: 9px; bottom: 9px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--or); pointer-events: none;
  box-shadow: 0 0 10px rgba(201,162,76,.8), 0 0 22px rgba(201,162,76,.35); animation: pulseRep 2.2s ease-in-out infinite; }
.mol-repere::before, .mol-repere::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.mol-repere::before { top: -9px; border-top: 6px solid var(--or); }
.mol-repere::after { bottom: -9px; border-bottom: 6px solid var(--or); }
.mol-repere.cran { animation: cranRep .3s ease-out, pulseRep 2.2s ease-in-out .3s infinite; }
.molette.compacte .mol-repere { top: 7px; bottom: 7px; }
.valeur.bump { animation: bump .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes pulseRep { 0%, 100% { opacity: .85; box-shadow: 0 0 10px rgba(201,162,76,.8), 0 0 22px rgba(201,162,76,.35); } 50% { opacity: 1; box-shadow: 0 0 14px rgba(201,162,76,1), 0 0 34px rgba(201,162,76,.6); } }
@keyframes cranRep { from { transform: scaleY(1.2); filter: brightness(1.7); } to { transform: none; filter: none; } }
@keyframes bump { 0% { transform: scale(1.1); } 100% { transform: none; } }
.carte-box { max-width: 330px; }

/* sélections plus poussées */
.opt .coche::after { display: none; }
.opt .coche svg { width: 14px; height: 14px; display: block; }
.opt .coche path { fill: none; stroke: #0a0a0b; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .38s cubic-bezier(.6,0,.3,1) .1s; }
.opt.on .coche path { stroke-dashoffset: 0; }
.opt.on .coche { animation: cochePop .5s cubic-bezier(.3,1.7,.5,1); }
.opt:active { transform: scale(.975) translateY(1px); box-shadow: inset 0 3px 12px rgba(0,0,0,.55), var(--verre-reflet); }
.opt.on { animation: choisi .7s cubic-bezier(.2,.8,.2,1); box-shadow: var(--verre-reflet), 0 0 0 1px rgba(255,255,255,.35), 0 16px 40px -20px rgba(255,255,255,.35); }
.echelle:has(.opt.on) .opt:not(.on) { opacity: .45; }
.echelle .opt.on { transform: translateY(-5px); }
.echelle .opt.on b { color: var(--or); text-shadow: 0 0 18px rgba(201,162,76,.65); }
.interrupteur:active .bascule::after { width: 32px; }
.interrupteur.on .bascule { box-shadow: 0 0 16px rgba(201,162,76,.45); }
@keyframes cochePop { 0% { transform: scale(.55); } 100% { transform: none; } }
@keyframes choisi { 0% { box-shadow: var(--verre-reflet), 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: var(--verre-reflet), 0 0 0 10px rgba(255,255,255,0); } }

/* VSCAN : trait de lumière autour du mot, reflet sur les lettres */
.marque-scan { position: relative; display: inline-block; padding: 12px 20px 16px; }
.marque-scan svg.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marque-scan .trace rect { fill: none; }
.marque-scan .trace .fond { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.marque-scan .trace .tour { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 11 89; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255,255,255,.7)); animation: tour 3.8s linear infinite; }
.marque { position: relative; }
.marque::after { content: none !important; }
.marque-svg { display: block; height: .86em; width: auto; max-width: 100%; overflow: visible; margin: 0 auto; }
.marque .contour { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30 1400; stroke-dashoffset: 30; opacity: 0;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255,255,255,.75)); animation: contour 3.4s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes contour { 0% { stroke-dashoffset: 30; opacity: 1; } 14% { stroke-dashoffset: -560; opacity: 1; } 15%, 100% { stroke-dashoffset: -560; opacity: 0; } }
/* fin : la chaîne de l'analyse, dans le style de la constellation */
.chaine-scan { display: grid; width: 100%; max-width: 340px; text-align: left; }
.maillon { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center; padding: 7px 0; font-size: 15.5px; color: var(--faible); transition: color .4s; }
.maillon .pt { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); position: relative; z-index: 1; transition: all .5s cubic-bezier(.3,1.5,.5,1); }
.maillon::before, .maillon::after { content: ""; position: absolute; left: 12px; top: 50%; width: 2px; height: 100%; }
.maillon::before { background: rgba(255,255,255,.08); }
.maillon::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); transform: scaleY(0); transform-origin: top; transition: transform .8s cubic-bezier(.6,0,.2,1); }
.maillon:last-child::before, .maillon:last-child::after { display: none; }
.maillon.fait::after { transform: scaleY(1); }
.maillon.encours { color: #fff; font-weight: 600; }
.maillon.encours .pt { width: 13px; height: 13px; background: #fff; animation: battementB 1.4s ease-in-out infinite; }
.maillon.fait { color: var(--doux); }
.maillon.fait .pt { width: 11px; height: 11px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.7); }
@keyframes battementB { 0%, 100% { box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.85); } 50% { box-shadow: 0 0 0 11px rgba(255,255,255,.03), 0 0 30px rgba(255,255,255,1); } }
.marque::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.95) 49%, rgba(255,255,255,0) 58% 100%); background-size: 260% 100%; background-position: 135% 0;
  -webkit-background-clip: text; background-clip: text; animation: brille 3.8s cubic-bezier(.6,0,.4,1) .5s infinite; }
@keyframes tour { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes brille { 0% { background-position: 135% 0; } 45%, 100% { background-position: -35% 0; } }

/* les vidéos explicatives */
.passage-ecran { gap: 16px; }
.passage-ecran .intro-p { display: grid; gap: 14px; }
.passage-ecran .constellation, .passage-ecran .nom-etape { transition: all .8s cubic-bezier(.2,.8,.2,1); }
.passage-ecran.en-video .constellation { max-width: 230px; opacity: .6; }
.passage-ecran.en-video .nom-etape { font-size: clamp(21px, 5.6vw, 25px); }
.passage-ecran.en-video .intro-p { gap: 8px; }
.passage-ecran .video { display: none; }
.passage-ecran.en-video .video { display: grid; gap: 14px; animation: videoEntre .9s cubic-bezier(.2,.8,.2,1) both; }
.ecran-video { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(260px 200px at 50% 45%, rgba(255,255,255,.06), transparent 70%), #050506;
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--verre-reflet), 0 30px 70px -40px rgba(0,0,0,.95); }
.ecran-video svg.scene { display: block; width: 100%; height: auto; }
.ecran-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.passer { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 7px 12px; border-radius: 99px; cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--verre), rgba(0,0,0,.45); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .4s; }
.video-finie .passer { opacity: 0; pointer-events: none; }
.video-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.video-barre i { display: block; height: 100%; width: 0; background: var(--or); box-shadow: 0 0 10px rgba(201,162,76,.8); }
.sous-titre { text-align: center; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; min-height: 3.6em; text-wrap: balance; }
.sous-titre .m { opacity: .22; transition: opacity .25s; }
.sous-titre .m.lu { opacity: 1; }
.sous-titre.neuf { animation: stEntre .45s cubic-bezier(.2,.8,.2,1); }
@keyframes videoEntre { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes stEntre { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 128px); transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 99px; font-size: 14px;
  background: var(--verre), rgba(20,20,22,.8); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: all .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; white-space: nowrap; }
.toast.vu { opacity: 1; transform: translate(-50%, 0); }

@keyframes entre { from { opacity: 0; transform: translateX(28px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entreArr { from { opacity: 0; transform: translateX(-28px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes respire { 0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes lueur { 0%, 100% { box-shadow: inset 0 1px 0 #fff, 0 0 0 0 rgba(255,255,255,.18); } 50% { box-shadow: inset 0 1px 0 #fff, 0 0 26px 3px rgba(255,255,255,.28); } }
@keyframes revele { 0% { clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(0 0 0% 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes balaye { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }
@keyframes vise { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.03); opacity: .7; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes onde { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
@keyframes sonne { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-2deg); } 20% { transform: rotate(2deg); } 30% { transform: rotate(0); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- VSCAN Express (21/10) : vraie caméra, consentements, champs courts ---------- */
.kyc video.k-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); filter: grayscale(.2) contrast(1.05); }
.kyc.live .k-sil { opacity: 0; }
.kyc.live .k-ovale { stroke: rgba(201,162,76,.9); }
textarea.champ.court { height: 108px; }
.consentements .opt.case { font-size: 14.5px; line-height: 1.4; text-align: left; padding-top: 14px; padding-bottom: 14px; }
.consentements .opt.case small { display: inline; margin-left: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faible); }
.aide.petit { font-size: 12.5px; }
.aide.petit a { color: var(--doux); }
.passage-ecran.sans-video .constellation { max-width: 320px; }
.passage-ecran .texte-court { text-align: center; color: var(--doux); font-size: 16px; line-height: 1.5; max-width: 340px; margin: 0 auto; }

/* ---------- accueil (21/10, demande de KLY) : les 3 cartes arrivent l'une après l'autre, fondu zoomé, chiffre qui se pose, reflet ---------- */
.etapes-accueil > div { position: relative; overflow: hidden; opacity: 0; transform-origin: 50% 60%; animation: etapeEntre 1s cubic-bezier(.16,1,.3,1) both; }
.etapes-accueil > div:nth-child(1) { animation-delay: 1.1s; }
.etapes-accueil > div:nth-child(2) { animation-delay: 1.75s; }
.etapes-accueil > div:nth-child(3) { animation-delay: 2.4s; }
.etapes-accueil > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.04) 55%, transparent 70%); transform: translateX(-130%); animation: etapeReflet 1.2s cubic-bezier(.5,0,.25,1) both; }
.etapes-accueil > div:nth-child(1)::after { animation-delay: 1.45s; }
.etapes-accueil > div:nth-child(2)::after { animation-delay: 2.1s; }
.etapes-accueil > div:nth-child(3)::after { animation-delay: 2.75s; }
.etapes-accueil > div > b { display: block; animation: etapeNum .9s cubic-bezier(.2,1.3,.4,1) both; }
.etapes-accueil > div:nth-child(1) > b { animation-delay: 1.25s; }
.etapes-accueil > div:nth-child(2) > b { animation-delay: 1.9s; }
.etapes-accueil > div:nth-child(3) > b { animation-delay: 2.55s; }
.etapes-accueil > div > span { animation: etapeTexte .8s cubic-bezier(.16,1,.3,1) both; }
.etapes-accueil > div:nth-child(1) > span { animation-delay: 1.3s; }
.etapes-accueil > div:nth-child(2) > span { animation-delay: 1.95s; }
.etapes-accueil > div:nth-child(3) > span { animation-delay: 2.6s; }
@keyframes etapeEntre { 0% { opacity: 0; transform: scale(1.16) translateY(10px); filter: blur(14px); } 45% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes etapeReflet { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes etapeNum { 0% { opacity: 0; transform: scale(2.1); text-shadow: 0 0 26px rgba(201,162,76,.9); } 60% { opacity: 1; text-shadow: 0 0 18px rgba(201,162,76,.7); } 100% { opacity: 1; transform: none; text-shadow: 0 0 10px rgba(201,162,76,.25); } }
@keyframes etapeTexte { from { opacity: 0; transform: translateX(10px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .etapes-accueil > div, .etapes-accueil > div > b, .etapes-accueil > div > span { animation: none; opacity: 1; } .etapes-accueil > div::after { display: none; } }

/* ---------- accueil (21/10, KLY) : « 15 minutes » en chronomètre, accroche coupée au bon endroit ---------- */
.chrono { display: inline-flex; align-items: center; gap: 12px; margin: 4px auto 2px; padding: 8px 18px 8px 12px; border-radius: 999px; background: var(--verre), rgba(255,255,255,.02); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet); opacity: 0; animation: chronoEntre .7s cubic-bezier(.16,1,.3,1) .45s both; }
.chrono-svg { width: 38px; height: 41px; overflow: visible; }
.chrono-arc { animation: chronoArc 1.3s cubic-bezier(.33,1,.68,1) .65s both; filter: drop-shadow(0 0 4px rgba(201,162,76,.55)); }
.chrono-aiguille { transform-origin: 24px 29px; animation: chronoAiguille 1.3s cubic-bezier(.33,1,.68,1) .65s both; }
.chrono-t { font-family: var(--marque); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.04em; color: #fff; width: 2.78em; text-align: left; font-variant-numeric: tabular-nums; }
.chrono.fini .chrono-t { animation: chronoPose .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes chronoEntre { from { opacity: 0; transform: translateY(8px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chronoArc { from { stroke-dashoffset: 25; } to { stroke-dashoffset: 0; } }
@keyframes chronoAiguille { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes chronoPose { 0% { transform: scale(1); } 40% { transform: scale(1.08); text-shadow: 0 0 16px rgba(255,255,255,.45); } 100% { transform: scale(1); } }
.accroche { font-size: clamp(16px, 4.7vw, 22px) !important; line-height: 1.2 !important; margin-top: 16px; white-space: nowrap; }
.accroche .a1 { font-family: var(--sans); font-weight: 400; letter-spacing: -.01em; color: rgba(255,255,255,.78); }
.accroche .a2 { font-family: var(--marque); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.chrono-aiguille { transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
@media (prefers-reduced-motion: reduce) { .chrono, .chrono-arc, .chrono-aiguille { animation: none; opacity: 1; } .chrono-arc { stroke-dashoffset: 0; } .chrono-aiguille { transform: rotate(90deg); } }

/* VSCAN complet offert par un proche : annonce en haut de l'accueil */
.cadeau-recu{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:420px;margin:0 auto 22px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:cadeauEntre .7s cubic-bezier(.2,.8,.2,1) both}
.cadeau-recu[hidden]{display:none}
.cadeau-recu svg{flex:none;width:22px;height:22px;color:#c9a24c;margin-top:1px}
.cadeau-recu p{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.cadeau-recu b{color:#fff;font-weight:600}
@keyframes cadeauEntre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* la 2e offre, pendant que le VSCAN complet s'écrit */
.offre-app{max-width:400px;margin:26px auto 0;padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center;animation:cadeauEntre .8s cubic-bezier(.2,.8,.2,1) both}
.offre-app[hidden]{display:none}
.offre-app h3{margin:0 0 8px;font-family:Sora,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:#fff;line-height:1.25}
.offre-app p{margin:0 0 14px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.7)}
.offre-app-b{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#0a0a0b;font-weight:600;font-size:15px;text-decoration:none}
.offre-app small{display:block;margin-top:10px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.5)}

/* invitation à ouvrir VSCAN dans le vrai navigateur (depuis Instagram, TikTok, Facebook, Snapchat) */
.nav-invite{position:fixed;inset:0;z-index:999;background:rgba(5,5,6,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;padding:96px 18px 24px;animation:navEntre .45s ease both}
.nav-invite.sort{animation:navSort .38s ease both}
.nav-fleche{position:absolute;top:8px;right:10px;width:92px;height:92px;overflow:visible;animation:navPointe 1.6s cubic-bezier(.4,0,.2,1) infinite}
.nav-carte{position:relative;width:100%;max-width:360px;padding:24px 22px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);text-align:center}
.nav-carte h2{margin:0 0 10px;font-family:Sora,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.03em;line-height:1.2;color:#fff}
.nav-carte p{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.7)}
.nav-carte .nav-etape{color:#fff;font-weight:500;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:border-color .3s,background .3s}
.nav-carte .nav-etape.insiste{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
.pts{display:inline-flex;align-items:center;justify-content:center;gap:3px;vertical-align:middle;width:30px;height:22px;margin:0 2px;border-radius:7px;background:rgba(255,255,255,.14);font-style:normal}
.pts b{display:block;width:4px;height:4px;border-radius:50%;background:#fff}
.pts.v{flex-direction:column;gap:2px;width:22px;height:26px}
.pts.v b{width:3.5px;height:3.5px}
.nav-bouton{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:6px;border-radius:999px;background:linear-gradient(180deg,#fff,#e9e9ea);color:#0a0a0b;font-weight:700;font-size:16px;text-decoration:none}
.nav-ici{display:block;margin:12px auto 0;padding:8px 12px;background:none;border:0;color:rgba(255,255,255,.55);font:500 14px 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes navEntre{from{opacity:0}to{opacity:1}}
@keyframes navSort{to{opacity:0}}
@keyframes navPointe{0%,100%{transform:translate(0,0);opacity:.75}50%{transform:translate(6px,-6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.nav-fleche{animation:none}}

/* un VSCAN par mail : message sous le champ */
.deja-fait{margin:16px auto 0;max-width:380px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);text-align:left;animation:cadeauEntre .5s ease both}
/* la roue pas encore touchée : le repère respire */
.molette.invite .mol-repere{animation:pulseRep 1.4s ease-in-out infinite}
/* iPhone : pas de bouton (Instagram bloque l'ouverture directe de Safari), l'étape des trois points devient la consigne principale */
.nav-carte .nav-etape.seule{font-size:16px;padding:16px;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);margin-bottom:4px}

/* logotype animé de l'accueil (le même que dans le hub), en boucle */
.marque-anim{display:flex;justify-content:center;margin:6px 0 4px}
.logo-anim{display:block;width:min(300px,74vw);height:auto;overflow:visible}
.logo-anim .hv-l{opacity:.16}
.logo-anim .hv-c{stroke:#FFFFFF;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24 76;stroke-dashoffset:100;opacity:0}
.logo-anim .hv-halo{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 20px rgba(255,255,255,.7))}
.logo-anim.hv-joue .hv-l{animation:hvF .5s ease-out forwards,hvA .32s ease-out forwards}
.logo-anim.hv-joue .hv-c{animation:hvT .62s cubic-bezier(.5,0,.3,1) forwards}
.logo-anim.hv-fini .hv-l{opacity:1}
.logo-anim.hv-joue .hv-l-V{animation-delay:0s,.62s}.logo-anim.hv-joue .hv-c-V{animation-delay:.25s}
.logo-anim.hv-joue .hv-l-S{animation-delay:0s,.76s}.logo-anim.hv-joue .hv-c-S{animation-delay:.39s}
.logo-anim.hv-joue .hv-l-C{animation-delay:0s,.90s}.logo-anim.hv-joue .hv-c-C{animation-delay:.53s}
.logo-anim.hv-joue .hv-l-A{animation-delay:0s,1.04s}.logo-anim.hv-joue .hv-c-A{animation-delay:.67s}
.logo-anim.hv-joue .hv-l-N{animation-delay:0s,1.18s}.logo-anim.hv-joue .hv-c-N{animation-delay:.81s}
.logo-anim.hv-joue .hv-l-pt{animation-delay:0s,1.44s}
@keyframes hvF{from{opacity:0}to{opacity:.16}}
@keyframes hvA{from{opacity:.16}to{opacity:1}}
@keyframes hvT{0%{opacity:0;stroke-dashoffset:100}8%{opacity:1}82%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
/* boucle : le trait de lumière repasse sur les lettres allumées, sans fondu */
.logo-anim.hv-trace .hv-c{animation:hvT .62s cubic-bezier(.5,0,.3,1) forwards}
.logo-anim.hv-trace .hv-c-V{animation-delay:0s}.logo-anim.hv-trace .hv-c-S{animation-delay:.14s}.logo-anim.hv-trace .hv-c-C{animation-delay:.28s}
.logo-anim.hv-trace .hv-c-A{animation-delay:.42s}.logo-anim.hv-trace .hv-c-N{animation-delay:.56s}