/* ═══════════════ ASap FC — socle commun (toutes les pages) ═══════════════
   Jetons, reset, navigation, boutons, pied de page et mise en forme des
   pages juridiques. Les styles propres à la page d'accueil restent dans
   index.html.

   Identité : reprise des jetons de l'overlay (« 1A Broadcast Glass »,
   cf. asap-fc/DESIGN-SPEC.md) — or #f5c518, cyan #06b6d4, vert #22c55e,
   rouge #ef4444, arêtes et halos identiques. Le site ajoute par-dessus une
   surface sombre et un accent vert menthe pour les zones de lecture. */

:root{
  /* ── Surfaces & texte (site) ── */
  --bg:#080b0a;
  --surface:#0b100e;
  --surface-alt:#0a0f0d;
  --surface-early:#0d1411;
  --txt:#e9edea;
  --txt-2:#b6c0bb;
  --txt-3:#aab4af;
  --txt-4:#a3aea9;
  --mut:#8b978f;          /* méta — contraste AA sur --bg */
  --mut-2:#8b978f;
  --mut-3:#7d8a83;
  --accent:#63d492;
  --on-accent:#06120c;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.09);
  --line-3:rgba(255,255,255,.14);
  --line-4:rgba(255,255,255,.16);
  --wrap:1180px;
  --pad:32px;

  /* ── Jetons repris tels quels de l'overlay (DESIGN-SPEC §1, §2) ── */
  --gold:#f5c518;
  --gold-deep:#e8a020;
  --cyan:#06b6d4;
  --green:#22c55e;
  --red:#ef4444;
  --ovl-txt:#f1f5f9;
  --ovl-txt-dim:#aeb9c7;
  --ovl-txt-mut:#8595a6;
  --edge-gold:linear-gradient(180deg,#ffe27a,#e8a020);
  --edge-glow-gold:0 0 16px rgba(245,197,24,.6);
  --edge-glow-green:0 0 16px rgba(34,197,94,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:Archivo,'Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
a{color:var(--txt);text-decoration:none}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
p{margin:0}

/* Focus clavier visible sur toute la surface du site */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.mono{font-family:'IBM Plex Mono',ui-monospace,'Consolas',monospace}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* Lien d'évitement */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;font-size:14px}
.skip:focus{left:0;color:var(--on-accent)}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:600;
  padding:13px 24px;border-radius:7px;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .15s}
.btn-p{background:var(--accent);color:var(--on-accent)}
.btn-p:hover{background:#77e0a2;color:var(--on-accent);transform:translateY(-1px)}
.btn-s{border-color:var(--line-3);color:var(--txt);font-weight:500}
.btn-s:hover{border-color:var(--line-4);background:rgba(255,255,255,.03);color:var(--txt)}
.btn-xs{font-size:13.5px;font-weight:600;padding:9px 18px;background:var(--txt);color:var(--bg);border-radius:6px}
.btn-xs:hover{background:#fff;color:var(--bg)}

/* ── Navigation ── */
nav{position:sticky;top:0;z-index:50;background:rgba(8,11,10,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-in{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.brand span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--txt-3)}
.nav-links a{color:inherit}
.nav-links a:hover{color:var(--accent)}

/* ── Pied de page ── */
footer{border-top:1px solid var(--line)}
.foot{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;font-size:13px;color:var(--mut)}
.foot a{color:inherit}
.foot a:hover{color:var(--txt)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* ── Pages juridiques ── */
.legal-page{padding:64px 0 96px}
.legal-page h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1.06;margin-top:14px;max-width:22ch}
.legal-page .updated{margin-top:18px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.06em;color:var(--mut)}
.legal-body{max-width:74ch;margin-top:44px}
.legal-body h2{font-size:20px;letter-spacing:-.01em;margin:52px 0 14px;padding-top:22px;border-top:1px solid var(--line-2)}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:16px;margin:26px 0 10px;color:var(--txt-2)}
.legal-body p,.legal-body li{font-size:15px;line-height:1.75;color:var(--txt-4)}
.legal-body p+p{margin-top:14px}
.legal-body ul,.legal-body ol{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.legal-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-body strong{color:var(--txt-2);font-weight:600}
.legal-body .lead{font-size:17px;line-height:1.7;color:var(--txt-3)}

/* Champ à compléter — volontairement impossible à manquer */
.todo{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;font-weight:500;
  color:#ffd7a1;background:rgba(245,158,11,.14);border:1px dashed rgba(245,158,11,.6);
  border-radius:5px;padding:2px 8px;letter-spacing:.01em}

/* Encart d'avertissement */
.callout{margin:22px 0 0;border:1px solid var(--line-3);border-left:3px solid var(--gold);
  border-radius:10px;background:var(--surface);padding:20px 22px}
.callout p{font-size:14.5px;line-height:1.7;color:var(--txt-3)}
.callout .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* Sommaire des pages juridiques */
.toc{margin-top:36px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:20px 24px}
.toc .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.toc a{color:var(--txt-3);font-size:14.5px}
.toc a:hover{color:var(--accent)}

@media (max-width:860px){
  :root{--pad:20px}
  .nav-in{gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .nav-links{order:3;width:100%;gap:20px;font-size:13.5px;overflow-x:auto;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .nav-links a{white-space:nowrap}
  .brand b,.btn-xs{white-space:nowrap}
  .legal-page{padding-top:44px}
}
@media (max-width:520px){
  .brand span{display:none}
}