/* Fizko — feuille commune des pages de contenu (guides, pages légales, diagnostic).
   Même identité que l'accueil : fond noir-vert, Geist, accent vert lumineux. */

:root {
  color-scheme: dark;
  --bg:#050d0a; --bg-2:#081410; --panel:#0c1a15; --panel-2:#10221b;
  --line:rgba(190,255,225,.09); --line-2:rgba(190,255,225,.16);
  --text:#eef6f2; --muted:#a9bdb3; --dim:#6d857a;
  --green:#1f9e74; --green-hi:#3fe0a4; --green-glow:rgba(63,224,164,.22);
  --amber:#f2a65a; --amber-wash:rgba(242,166,90,.08);
  --font:"Geist", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:""; position:absolute; inset:0 0 auto; height:520px; z-index:-1; pointer-events:none;
  background:radial-gradient(700px 300px at 50% -40px, rgba(63,224,164,.14), transparent 70%); }
a { color:var(--green-hi); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:#7ff0c5; }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within { outline:2px solid var(--green-hi); outline-offset:3px; border-radius:8px; }
img { max-width:100%; height:auto; }
.wrap { max-width:760px; margin:0 auto; padding-inline:24px; }
.wrap-wide { max-width:1160px; margin:0 auto; padding-inline:24px; }

/* En-tête (identique à l'accueil) */
header.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:30; backdrop-filter:blur(14px) saturate(140%); background:rgba(5,13,10,.72); border-bottom:1px solid var(--line); }
.top .wrap-wide { display:flex; align-items:center; gap:32px; height:64px; }
.brand { font-weight:800; font-size:25px; letter-spacing:-.058em; line-height:1; text-decoration:none; color:var(--text); }
.brand i { font-style:normal; color:var(--green-hi); margin-left:.02em; }
.brand:hover { color:var(--text); }
.top nav { display:flex; gap:26px; margin-left:auto; }
.top nav a { color:var(--dim); text-decoration:none; font-size:14.5px; }
.top nav a:hover { color:var(--text); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 20px; border-radius:999px; font:600 15px/1 var(--font); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s, background .15s; }
.btn-light { background:#eef6f2; color:#06120d; }
.btn-light:hover { background:#fff; color:#06120d; transform:translateY(-1px); }
.top .btn { height:38px; padding:0 16px; font-size:14px; }
@media (max-width:820px){ .top nav { display:none; } .top .btn { margin-left:auto; } }

/* Article */
main { padding-block:56px 40px; }
.eyebrow { display:inline-block; font:500 14px/1 var(--font); color:var(--green-hi); margin:0 0 18px; }
h1 { font-size:clamp(34px,5vw,50px); line-height:1.06; letter-spacing:-.04em; margin:0 0 20px; font-weight:600; text-wrap:balance;
     background:linear-gradient(180deg,#fff 40%,#a9c4b8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.standfirst { font-size:19px; color:var(--muted); margin:0 0 16px; }
.meta, .updated { font:400 13px/1.4 var(--mono); color:var(--dim); margin:0 0 40px; padding-bottom:26px; border-bottom:1px solid var(--line); }
h2 { font-size:28px; line-height:1.15; letter-spacing:-.03em; margin:52px 0 14px; font-weight:600; text-wrap:balance; color:#fff; }
h3 { font-size:19px; letter-spacing:-.015em; margin:30px 0 8px; font-weight:600; color:#fff; }
p, li { color:var(--muted); }
strong { color:var(--text); font-weight:600; }
ul, ol { padding-left:24px; }
li { margin-bottom:8px; }
li::marker { color:var(--dim); }
sup { line-height:0; }

.toc { background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:22px 26px; margin:8px 0 34px; }
.toc p { font:500 13px/1 var(--font); color:var(--dim); margin:0 0 14px; }
.toc ol { margin:0; padding-left:20px; }
.toc li { margin-bottom:7px; }
.toc a { color:var(--muted); text-decoration:none; }
.toc a:hover { color:var(--green-hi); }

.callout { background:var(--amber-wash); border:1px solid rgba(242,166,90,.22); border-radius:14px; padding:18px 22px; margin:24px 0; }
.callout strong { color:var(--amber); }
.callout p { color:var(--text); }
.key { background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid rgba(63,224,164,.22); border-radius:14px; padding:18px 22px; margin:24px 0; }
.key p { color:var(--text); }

table { width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px; display:block; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
thead, tbody { display:table; width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom:none; }
th { font:500 13px/1.3 var(--font); color:var(--dim); }
td strong { color:var(--text); }

.faq h3 { border-top:1px solid var(--line); padding-top:22px; }

.cta-box { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; padding:44px 32px; margin:56px 0 8px; text-align:center;
  background:radial-gradient(480px 200px at 50% 115%, rgba(63,224,164,.26), transparent 70%), linear-gradient(180deg, var(--panel), var(--bg-2)); }
.cta-box h2 { margin:0 0 10px; }
.cta-box p { color:var(--muted); margin:0 auto 24px; max-width:46ch; }
.cta-box a, .cta-box .cta { display:inline-flex; align-items:center; height:48px; padding:0 24px; border-radius:999px; background:#eef6f2; color:#06120d; font-weight:600; text-decoration:none; }
.cta-box a:hover { background:#fff; color:#06120d; }

.note { font-size:13px; color:var(--dim); border-top:1px solid var(--line); margin-top:44px; padding-top:20px; }

/* Diagnostic : quiz */
.quiz { background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:20px; padding:30px 30px 32px; margin:0 0 12px; }
.q { margin:0 0 28px; }
.q:last-of-type { margin-bottom:24px; }
.q > .label { display:block; font-weight:600; color:var(--text); font-size:17px; margin:0 0 12px; }
.q .num { color:var(--green-hi); font:500 13px/1 var(--mono); margin-right:8px; }
.opts { display:flex; flex-wrap:wrap; gap:9px; }
.opts label { flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; gap:8px; padding:12px 16px; border:1px solid var(--line-2); border-radius:12px; cursor:pointer; font-size:15px; color:var(--muted); background:rgba(5,13,10,.55); transition:border-color .12s, background .12s, color .12s; user-select:none; }
.opts label:hover { border-color:rgba(63,224,164,.45); color:var(--text); }
.opts input { position:absolute; opacity:0; pointer-events:none; }
.opts label:has(input:checked) { background:rgba(63,224,164,.14); border-color:var(--green-hi); color:#fff; font-weight:600; }
.q.err .label { color:var(--amber); }
.btn-go { display:block; width:100%; background:#eef6f2; color:#06120d; border:none; padding:16px 22px; border-radius:999px; font:600 17px var(--font); cursor:pointer; }
.btn-go:hover { background:#fff; }
.hint { font-size:13px; color:var(--dim); margin:12px 2px 0; text-align:center; }
#result { display:none; margin-top:22px; scroll-margin-top:84px; }
.verdict { border-radius:18px; padding:26px 28px; margin:0 0 16px; }
.verdict.yes { background:var(--amber-wash); border:1px solid rgba(242,166,90,.3); }
.verdict.no { background:rgba(63,224,164,.07); border:1px solid rgba(63,224,164,.28); }
.verdict .tag { font:500 13px/1 var(--mono); margin:0 0 10px; }
.verdict.yes .tag { color:var(--amber); }
.verdict.no .tag { color:var(--green-hi); }
.verdict h2 { margin:0 0 8px; font-size:24px; }
.verdict p { margin:0; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 18px; }
.fact { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.fact .k { font:500 12.5px/1 var(--font); color:var(--dim); margin:0 0 8px; }
.fact .v { font-size:20px; font-weight:600; color:var(--text); line-height:1.25; letter-spacing:-.02em; margin:0; }
.fact .v small { display:block; font-size:12.5px; font-weight:400; color:var(--dim); margin-top:3px; letter-spacing:0; }
.fact.risk .v { color:var(--amber); }
.signup-box { border:1px solid var(--line); border-radius:20px; padding:32px 28px; text-align:center;
  background:radial-gradient(420px 180px at 50% 115%, rgba(63,224,164,.24), transparent 70%), linear-gradient(180deg, var(--panel), var(--bg-2)); }
.signup-box h3 { margin:0 0 8px; font-size:22px; }
.signup-box p { color:var(--muted); margin:0 auto 20px; max-width:46ch; font-size:15.5px; }
.signup-box form { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:480px; margin:0 auto; }
.signup-box input[type=email] { flex:1 1 240px; min-width:0; height:48px; padding:0 18px; border-radius:999px; border:1px solid var(--line-2); background:rgba(5,13,10,.7); color:var(--text); font:inherit; font-size:15px; }
.signup-box input::placeholder { color:var(--dim); }
.signup-box button { height:48px; background:#eef6f2; color:#06120d; border:none; padding:0 24px; border-radius:999px; font:600 15px var(--font); cursor:pointer; }
.signup-box button:hover { background:#fff; }
.signup-box .micro { font-size:12.5px; color:var(--dim); margin:14px 0 0; }

/* Pied de page (identique à l'accueil) */
footer { margin-top:72px; border-top:1px solid var(--line); padding-block:32px; color:var(--dim); font-size:14px; }
footer .wrap-wide { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; }
footer a { color:var(--dim); text-decoration:none; }
footer a:hover { color:var(--text); }

@media (max-width:560px){ .facts { grid-template-columns:1fr; } .quiz { padding:24px 20px; } }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } * { transition:none !important; } }