*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f0e0c;--ink2:#4a4843;--ink3:#9a9790;
  --bg:#fafaf8;--surface:#ffffff;
  --accent:#2155c4;--accent-light:#eef2fc;--accent-dark:#173b99;
  --border:rgba(15,14,12,.10);--border-strong:rgba(15,14,12,.18);
  --radius:10px;
  --success:#0c7c4a;--success-light:#e8f8f0;
  --warn:#b45309;--warn-light:#fef3c7;
  --danger:#b42318;--danger-light:#fef2f1;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
nav{position:sticky;top:0;z-index:200;background:rgba(250,250,248,.94);backdrop-filter:blur(14px);border-bottom:.5px solid var(--border);padding:0 2rem;height:62px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Playfair Display',serif;font-size:21px;color:var(--ink);text-decoration:none}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:14px;color:var(--ink2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.btn-nav{background:var(--accent);color:#fff;border:none;cursor:pointer;padding:9px 22px;border-radius:var(--radius);font-size:14px;font-weight:500;font-family:'Inter',sans-serif;text-decoration:none;display:inline-block}
.btn-nav:hover{background:var(--accent-dark)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;width:38px;height:38px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav-panel{display:none;position:fixed;top:62px;left:0;right:0;background:var(--surface);border-bottom:.5px solid var(--border);box-shadow:0 12px 28px rgba(15,14,12,.08);z-index:199;flex-direction:column;padding:.5rem 1.25rem 1.25rem;max-height:0;overflow:hidden;transition:max-height .25s ease}
.mobile-nav-panel.open{max-height:400px}
.mobile-nav-panel a{padding:13px 4px;font-size:15px;color:var(--ink2);text-decoration:none;border-bottom:.5px solid var(--border);display:block}
.mobile-nav-panel a:last-child{border-bottom:none}
@media(max-width:860px){.nav-links{display:none}}
.wrap{max-width:720px;margin:0 auto;padding:60px 1.5rem 100px}
.crumb{font-size:13px;color:var(--ink3);margin-bottom:2rem}
.crumb a{color:var(--accent);text-decoration:none}
h1{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,42px);line-height:1.18;margin-bottom:.8rem;color:var(--ink)}
.subtitle{font-size:16.5px;color:var(--ink2);margin-bottom:2.5rem;line-height:1.6}
.disclaimer{font-size:12.5px;color:var(--ink3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:2.5rem}
.progress-bar{height:6px;background:var(--border);border-radius:99px;margin-bottom:2.5rem;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:99px;width:0%;transition:width .3s ease}
.q{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.6rem 1.8rem;margin-bottom:1.2rem}
.q-num{font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:.5rem}
.q-text{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:1rem;line-height:1.4}
.q-options{display:flex;gap:10px;flex-wrap:wrap}
.q-opt{flex:1;min-width:100px;padding:11px 16px;border-radius:var(--radius);border:1.5px solid var(--border-strong);background:var(--bg);cursor:pointer;font-size:14.5px;font-weight:500;color:var(--ink2);text-align:center;transition:.15s}
.q-opt:hover{border-color:var(--accent);color:var(--accent)}
.q-opt.selected{background:var(--accent);border-color:var(--accent);color:#fff}
#result{display:none;margin-top:2rem}
.result-card{border-radius:16px;padding:2rem;text-align:center;margin-bottom:1.5rem}
.result-card.low{background:var(--success-light)}
.result-card.medium{background:var(--warn-light)}
.result-card.high{background:var(--danger-light)}
.result-score{font-family:'Playfair Display',serif;font-size:52px;font-weight:700;line-height:1}
.result-label{font-size:18px;font-weight:600;margin-top:.5rem}
.result-card.low .result-score,.result-card.low .result-label{color:var(--success)}
.result-card.medium .result-score,.result-card.medium .result-label{color:var(--warn)}
.result-card.high .result-score,.result-card.high .result-label{color:var(--danger)}
.result-detail{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.6rem 1.8rem;margin-bottom:1.2rem}
.result-detail h3{font-size:16px;margin-bottom:.8rem;color:var(--ink)}
.result-detail ul{margin-left:1.2rem;color:var(--ink2);font-size:15px;line-height:1.7}
.result-detail li{margin-bottom:.4rem}
.cta-box{background:var(--accent-light);border-radius:14px;padding:1.6rem 1.8rem;margin-top:1.5rem;text-align:center}
.cta-box p{color:var(--ink2);margin-bottom:1rem;font-size:15px}
.btn-restart{background:none;border:1.5px solid var(--border-strong);color:var(--ink2);padding:10px 20px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;margin-top:1rem}
.btn-restart:hover{border-color:var(--accent);color:var(--accent)}
footer{background:#171614;color:#b8b4ac;padding:56px 2rem 30px;margin-top:60px}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{font-size:13px;margin-top:.8rem;line-height:1.6;color:#8a8680}
.footer-col h4{font-size:13px;color:#e8e6e0;margin-bottom:1rem;font-weight:600}
.footer-col a{display:block;font-size:13px;color:#a8a49c;text-decoration:none;margin-bottom:.6rem}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:1.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#7a766e}
@media(max-width:700px){.footer-inner{grid-template-columns:1fr 1fr}.q-options{flex-direction:column}.nav-toggle{display:flex}nav .nav-links{display:none}}

/* ── Accessibilité : lien d'évitement (skip-link) ── */
.skip-link{
  position:absolute;top:-48px;left:12px;z-index:10000;
  background:var(--accent, #2155c4);color:#fff;
  padding:12px 20px;border-radius:8px;font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}