/* ===== L'Audit du Coach — aligné sur le design system "La Forge" (Gryndl) ===== */
@property --beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root{
  --bg:#0B0B0D; --bg-2:#111114; --bg-3:#16161A;
  --surface:#1A1A1E; --surface-2:#212126;
  --line:#26262C; --line-2:#34343C; --line-3:#45454F; --orange-line:rgba(255,90,31,.45);
  --orange:#FF5A1F; --orange-bright:#FF7A45; --orange-deep:#C7461A;
  --orange-soft:rgba(255,90,31,.12); --orange-soft-2:rgba(255,90,31,.20); --on-orange:#0A0A0B;
  --text:#F3F5F8; --text-2:#B8BEC7; --text-3:#7A828D; --muted:#565C66;
  --success:#22C55E;
  --r-sm:8px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  display:flex; flex-direction:column; line-height:1.55;
  font-feature-settings:'cv11','ss01','ss03';
}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
::selection{background:var(--orange-soft-2);color:var(--text)}

/* ---------- fond : l'établi sombre ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(125% 92% at 50% 0%,#000 32%,transparent 78%);mask-image:radial-gradient(125% 92% at 50% 0%,#000 32%,transparent 78%)}
.bg-glow{position:absolute;top:-32%;left:50%;transform:translateX(-50%);width:760px;height:540px;
  background:radial-gradient(closest-side,rgba(255,90,31,.20),transparent 72%);filter:blur(18px)}

/* ---------- topbar / wordmark ---------- */
.topbar{display:flex;justify-content:center;padding:24px 20px 6px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{display:inline-flex;align-items:flex-end;gap:3px;height:21px}
.brand-mark i{width:5px;border-radius:1.5px;background:var(--orange);display:block}
.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:21px}
.brand-name{font-weight:800;letter-spacing:.04em;font-size:15px;color:var(--text)}
.brand-name span{color:var(--text-3);font-weight:600}

/* ---------- layout ---------- */
.app{flex:1;width:100%;max-width:600px;margin:0 auto;padding:18px 20px 40px;display:flex;flex-direction:column;justify-content:center}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:14px 20px 28px;letter-spacing:.01em}

/* ---------- carte d'étape : plate, tonale (pas de glass déco) ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 24px 60px -30px rgba(0,0,0,.7)}
.step{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- intro ---------- */
h1{font-size:clamp(30px,6.4vw,46px);font-weight:800;line-height:1.04;letter-spacing:-.03em;color:var(--text);text-wrap:balance}
h1 .hl{color:var(--orange)}
.lead{color:var(--text-2);font-size:clamp(15.5px,1.5vw,17px);line-height:1.55;margin-top:15px;max-width:50ch;text-wrap:pretty}
.meta-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;color:var(--text-3);font-size:13px}
.meta-row b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.btn-row{margin-top:26px}

/* ---------- boutons ---------- */
.btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:16px;
  border-radius:var(--r-md);padding:16px 22px;width:100%;transition:transform .14s var(--ease),filter .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2}
/* CTA de forge : gradient + border-beam conique rotatif + glow */
.btn-primary{position:relative;color:var(--on-orange);border:1.5px solid transparent;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep)) padding-box,
    conic-gradient(from var(--beam-a),rgba(255,255,255,0) 0 18%,var(--orange-bright) 32%,rgba(255,255,255,.9) 40%,var(--orange-bright) 48%,rgba(255,255,255,0) 64% 100%) border-box;
  box-shadow:0 8px 20px -8px rgba(255,90,31,.32),inset 0 1px 0 rgba(255,255,255,.22);
  animation:beam 7s linear infinite}
@keyframes beam{to{--beam-a:360deg}}
.btn-primary:hover{background:linear-gradient(135deg,var(--orange-bright),#D9531E) padding-box,
    conic-gradient(from var(--beam-a),rgba(255,255,255,0) 0 18%,var(--orange-bright) 32%,#fff 40%,var(--orange-bright) 48%,rgba(255,255,255,0) 64% 100%) border-box;
  transform:scale(1.02);box-shadow:0 14px 30px -8px rgba(255,90,31,.46),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:active{transform:scale(.985)}
.btn-primary[disabled]{filter:saturate(.6) brightness(.85);cursor:default;animation:none}
.btn-ghost{background:rgba(255,255,255,.015);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--orange-line);background:var(--orange-soft);color:var(--text)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- progression ---------- */
.progress{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.progress-track{flex:1;height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--orange-deep),var(--orange));border-radius:5px;transition:width .5s var(--ease);box-shadow:0 0 12px -2px rgba(255,90,31,.6)}
.progress-num{font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- question ---------- */
.q{font-size:clamp(20px,4.4vw,24px);font-weight:700;line-height:1.24;letter-spacing:-.02em;color:var(--text);margin-bottom:22px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1px solid var(--line);
  color:var(--text);border-radius:var(--r-md);padding:16px 17px;cursor:pointer;font-family:inherit;font-size:15.5px;font-weight:500;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .14s var(--ease)}
.opt:hover{border-color:var(--orange-line);background:var(--surface-2);transform:translateX(2px)}
.opt:active{transform:scale(.992)}
.opt.sel{border-color:var(--orange);background:var(--orange-soft)}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-3);flex:0 0 auto;position:relative;transition:border-color .16s var(--ease)}
.opt:hover .dot{border-color:var(--orange-line)}
.opt.sel .dot{border-color:var(--orange)}
.opt.sel .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px -1px rgba(255,90,31,.7)}
.back{margin-top:20px;background:none;border:0;color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;padding:4px;transition:color .15s}
.back:hover{color:var(--text-2)}

/* ---------- email ---------- */
.field{margin-top:15px}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:8px;font-weight:600}
.input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:15px 16px;color:var(--text);font-family:inherit;font-size:16px;transition:border-color .15s var(--ease),box-shadow .2s var(--ease)}
.input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.input::placeholder{color:var(--muted)}
.err{color:#FF8A6B;font-size:13px;margin-top:11px;min-height:18px}
.reassure{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:12.5px;margin-top:18px}

/* ---------- résultat ---------- */
.score-wrap{display:flex;align-items:center;gap:20px;margin:4px 0 24px}
.score-ring{--p:0;width:98px;height:98px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--orange) calc(var(--p)*1%),var(--surface-2) 0);
  filter:drop-shadow(0 0 14px rgba(255,90,31,.28))}
.score-ring .inner{width:76px;height:76px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;text-align:center}
.score-ring b{font-size:27px;font-weight:800;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.score-ring small{display:block;font-size:10px;color:var(--text-3);letter-spacing:.05em;margin-top:3px}
.score-txt h2{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.score-txt p{color:var(--text-2);font-size:14px;margin-top:5px;line-height:1.5}
.fuites{display:flex;flex-direction:column;gap:11px;margin:8px 0 24px}
.fuite{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:15px 17px;transition:border-color .2s var(--ease)}
.fuite b{display:block;font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;letter-spacing:-.01em}
.fuite b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--orange);margin-right:10px;vertical-align:middle;transform:translateY(-2px)}
.fuite span{color:var(--text-2);font-size:13.5px;line-height:1.5}
.verdict{border-radius:var(--r-lg);padding:22px;margin-top:6px}
.verdict.go{background:linear-gradient(180deg,var(--orange-soft),rgba(255,90,31,.04));border:1px solid var(--orange-line)}
.verdict.grow{background:var(--surface);border:1px solid var(--line-2)}
.verdict h3{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:9px;color:var(--text);text-wrap:balance}
.verdict p{color:var(--text-2);font-size:14.5px;line-height:1.55}
.verdict .cta{margin-top:18px}
.verdict .sub{display:block;text-align:center;color:var(--text-3);font-size:12px;margin-top:12px}
.kit-link{display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-weight:600;font-size:14px;text-decoration:none;margin-top:16px;transition:color .15s}
.kit-link:hover{color:var(--orange-bright);text-decoration:underline;text-underline-offset:3px}

@media(max-width:480px){
  .card{padding:24px 18px}
  .app{padding:14px 16px 36px}
  .score-wrap{gap:16px}
  .score-ring{width:86px;height:86px}.score-ring .inner{width:66px;height:66px}
  .meta-row{gap:14px}
}

/* ---------- toast (message copié) ---------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(14px);z-index:50;
  background:var(--surface-2);color:var(--text);border:1px solid var(--orange-line);
  padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;max-width:90vw;
  box-shadow:0 16px 44px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,90,31,.06);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-deep));border-color:var(--orange-bright)}
  .progress-fill{transition:none}
}