/* Tokens, repris de DESIGN.md du site. Sombre par défaut, .light en surcharge. */
:root{
  --bg:#0b0b0d; --card:#17171a; --inset:#202024; --inset-hover:#292930;
  --border:#212126; --border-strong:#2e2e35;
  --text:#f4f4f5; --text-muted:#a0a0a9; --text-faint:#6a6a73;
  --accent:#dedbd4; --accent-strong:#f2efe9; --accent-fg:#101012; --accent-soft:rgb(222 219 212 / .1);
  --good:#3ecf8e; --good-soft:rgb(62 207 142 / .14);
  --bad:#f2565f; --bad-soft:rgb(242 86 95 / .14);
  --font-sans:"Geist","Geist Fallback",Inter,ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,monospace;
  color-scheme:dark;
}
.light{
  --bg:#f3f2ef; --card:#ffffff; --inset:#eae7df; --inset-hover:#e0dcd2;
  --border:#e6e4de; --border-strong:#d6d3cb;
  --text:#121214; --text-muted:#5c5c64; --text-faint:#8b8b93;
  --accent:#6c6860; --accent-strong:#17171a; --accent-fg:#faf9f6; --accent-soft:rgb(108 104 96 / .09);
  --good:#16a06a; --good-soft:rgb(22 160 106 / .12);
  --bad:#d1454f; --bad-soft:rgb(209 69 79 / .12);
  color-scheme:light;
}
*,::before,::after{box-sizing:border-box;border:0 solid var(--border);margin:0;padding:0}
html{-webkit-text-size-adjust:100%;line-height:1.5}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:15px;line-height:23px;
  font-feature-settings:"cv11","ss01";font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
a{color:inherit;text-decoration:inherit}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit;background:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
input::placeholder,textarea::placeholder{color:var(--text-faint);opacity:1}

/* Échelle typographique exacte */
.t-4xl{font-size:48px;line-height:54px;letter-spacing:-.03em}
.t-3xl{font-size:38px;line-height:46px;letter-spacing:-.028em}
.t-2xl{font-size:28px;line-height:36px;letter-spacing:-.022em}
.t-xl{font-size:21px;line-height:29px;letter-spacing:-.018em}
.t-lg{font-size:17px;line-height:26px}
.t-base{font-size:15px;line-height:23px}
.t-sm{font-size:13px;line-height:19px}
.muted{color:var(--text-muted)} .faint{color:var(--text-faint)}
.relaxed{line-height:1.625} .snug{line-height:1.375} .tight{line-height:1.25}
.mono{font-family:var(--font-mono)}

/* Forme de fond : archipel low-poly, 3/5 de la largeur, collé en bas à droite, presque invisible */
.bgshape{position:fixed;right:-3vw;bottom:-6vh;width:60vw;min-width:420px;max-width:1100px;z-index:0;pointer-events:none;color:var(--accent);opacity:.055}
.light .bgshape{opacity:.07}
.bgshape svg{display:block;width:100%;height:auto}
main{position:relative;z-index:1}
@media (max-width:640px){.bgshape{width:90vw;min-width:0;right:-12vw;bottom:-4vh;opacity:.045}}

/* Barre de progression : 3px, fixée en haut */
.progress{position:fixed;left:0;right:0;top:0;z-index:20;height:3px;background:var(--inset)}
.progress i{display:block;height:100%;border-radius:0 999px 999px 0;background:var(--accent);width:0;transition:width .3s cubic-bezier(.4,0,.2,1)}

/* Écran */
.step-screen{margin:0 auto;display:flex;min-height:100vh;width:100%;max-width:660px;flex-direction:column;justify-content:center;padding:48px 24px 56px}
.step-screen.wide{padding-top:80px;padding-bottom:80px}
.step-screen section{display:flex;flex-direction:column;gap:32px}
.step-screen section.g9{gap:36px}
.step-item{animation:rise 320ms cubic-bezier(.22,1,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-in-right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-28px)}}
@keyframes slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(28px)}}
.in-right{animation:slide-in-right 300ms cubic-bezier(.22,1,.36,1) both}
.in-left{animation:slide-in-left 300ms cubic-bezier(.22,1,.36,1) both}
.out-left{animation:slide-out-left 160ms ease-in both}
.out-right{animation:slide-out-right 160ms ease-in both}
.fade{animation:fade-in 180ms ease-out}
.pop{animation:pop 240ms cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){.step-item,.step-screen{animation:none!important}}

/* Accueil */
.intro-list{display:flex;flex-direction:column;gap:12px}
.intro-list li{display:flex;gap:12px;list-style:none}

/* Question : posée à même le fond, sans carte */
.q{display:flex;flex-direction:column;gap:16px}
.q-head{display:flex;flex-direction:column;gap:6px}
.req{margin-left:4px;color:var(--bad)}
.opts{display:grid;gap:8px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{display:flex;width:100%;cursor:pointer;align-items:center;gap:14px;border-radius:14px;padding:10px 16px;text-align:left;
  transition:background-color .15s,color .15s,transform .15s;background:var(--inset);color:var(--text)}
.opt:hover{background:var(--inset-hover)}
.opt:active{transform:scale(.995)}
.opt.on{background:var(--accent);color:var(--accent-fg)}
.opt.on:hover{background:var(--accent)}
.sr-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.mark{display:grid;width:18px;height:18px;flex-shrink:0;place-items:center;transition:background-color .15s,border-color .15s;
  border:1.5px solid var(--text-muted);background:var(--bg)}
.mark.radio{border-radius:999px}.mark.check{border-radius:7px}
.opt.on .mark{border-color:transparent;background:var(--accent-fg)}
.dot{width:8px;height:8px;background:var(--accent)}
.mark.radio .dot{border-radius:999px}.mark.check .dot{border-radius:3px}
.opt .lbl{font-size:15px;line-height:1.375}

.input{height:48px;width:100%;border-radius:14px;background:var(--inset);padding:0 16px;font-size:15px;color:var(--text);transition:background-color .15s}
.input:hover,.input:focus{background:var(--inset-hover);outline:none}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea.input{min-height:110px;height:auto;padding:12px 16px;line-height:1.625;resize:vertical}
.err{color:var(--bad);font-size:13px;line-height:19px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:999px;font-weight:400;transition:color .15s,background-color .15s,opacity .15s}
.btn:disabled{pointer-events:none;opacity:.4}
.btn svg{width:16px;height:16px;flex-shrink:0}
.primary{background:var(--accent-strong);color:var(--accent-fg)}.primary:hover{opacity:.9}
.ghost{color:var(--text-muted)}.ghost:hover{background:var(--inset);color:var(--text)}
.secondary{background:var(--inset);color:var(--text)}.secondary:hover{background:var(--inset-hover)}
.lg{height:48px;padding:0 28px;font-size:15px}
.md{height:40px;padding:0 20px;font-size:15px}
.sm{height:32px;padding:0 14px;font-size:13px}
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:16px}

/* Écran consentement */
.card{border-radius:24px;background:var(--card);padding:20px;display:flex;flex-direction:column;gap:20px}
.consent{display:flex;cursor:pointer;align-items:flex-start;gap:16px}
.cb{display:flex;width:20px;height:20px;flex-shrink:0;align-items:center;justify-content:center;border-radius:7px;border:1.5px solid var(--text-muted);background:var(--bg);transition:background-color .15s,border-color .15s;margin-top:2px}
.cb.on{border-color:var(--accent);background:var(--accent)}
.cb svg{width:14px;height:14px;color:var(--accent-fg)}
.banner{border-radius:14px;background:var(--bad-soft);padding:16px 20px;font-size:15px;color:var(--bad)}
.link{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* Écran de fin */
.good-pill{display:grid;width:48px;height:48px;place-items:center;border-radius:999px;background:var(--good-soft);color:var(--good)}
.good-pill svg{width:24px;height:24px}
.cartouche{display:flex;align-items:center;gap:16px;border-radius:14px;background:var(--inset);padding:16px 20px;font-size:17px;line-height:26px;color:var(--text);transition:background-color .15s,transform .15s}
.cartouche:hover{background:var(--inset-hover)}.cartouche:active{transform:scale(.995)}
.cartouche span{flex:1}.cartouche svg{width:16px;height:16px;flex-shrink:0;color:var(--text-faint)}

.decision{display:none}