/* ═══════════════════════════════════════════════════════════════════════════
   ASap FC — socle commun des pages annexes, direction « Prolongation ».
   Écrit le 21/08/2026. Remplace `base.css` (charte verte sur fond noir).

   ── Pourquoi ce fichier plutôt qu'une réécriture des pages ─────────────────
   Les cinq pages annexes (CGV, mentions légales, confidentialité, habillages,
   compte) consomment presque uniquement des JETONS : `var(--txt)`,
   `var(--accent)`, `var(--surface)`… et zéro couleur en dur, à une exception
   près. Elles portent aussi un contrat de classes stable — `.wrap`, `.btn`,
   `.toc`, `.callout`, `.legal-body`, `nav`, `footer`.

   Redéfinir ce contrat suffit donc à les faire basculer dans la nouvelle
   direction sans toucher à leur balisage. C'est décisif pour les pages
   juridiques : leur texte a une valeur contractuelle, on ne le réédite pas
   pour changer une couleur.

   ── La règle de contraste qui gouverne tout ───────────────────────────────
   Le jaune fluo (#e8ff3a) est ILLISIBLE en texte sur fond clair. Dans cette
   direction il n'a donc que deux emplois :
     • sur fond clair  → il est un FOND, avec de l'encre sombre dessus ;
     • sur fond sombre → il peut être du texte.
   Toute règle ci-dessous s'y tient. C'est aussi ce qui donne sa signature à
   la direction : le surlignage au feutre.

   ── Ce que la lecture longue impose ───────────────────────────────────────
   Les pages juridiques passent sur fond CLAIR, alors que l'accueil alterne.
   Un contrat de six mille mots ne se lit pas en blanc sur noir.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Palette « Prolongation » ─────────────────────────────────────────── */
  --bleu:#0b1329;
  --bleu-2:#070d1d;
  --bleu-3:#16224a;
  --blanc:#f7f6f1;
  --blanc-2:#eceae2;
  --fluo:#e8ff3a;
  --encre-sur-fluo:#141804;
  --malt:#FC5757;

  /* ── Le contrat de jetons hérité de base.css, remappé ──────────────────── */
  --bg:var(--blanc);
  --surface:#ffffff;
  --surface-alt:var(--blanc-2);
  --surface-early:#fdfdf9;
  --txt:var(--bleu);
  --txt-2:#33405c;
  --txt-3:#4a5468;
  --txt-4:#4a5468;          /* corps des pages juridiques : contraste AA */
  --mut:#6b7387;
  --mut-2:#6b7387;
  --mut-3:#7d8495;
  /* `--accent` sert au TEXTE (liens, survols, eyebrows) : c'est donc le bleu
     nuit, jamais le fluo. Le fluo intervient en surlignage, plus bas. */
  --accent:var(--bleu);
  /* `--accent` sert de TEXTE presque partout, mais `.hab-badge` s'en sert comme
     FOND et pose `--on-accent` par-dessus. Le couple doit donc rester lisible
     dans les deux sens : encre claire sur le bleu nuit. Avec l'encre sombre du
     fluo, le badge « Suggéré pour commencer » sortait noir sur navy — vu à la
     capture du 21/08. */
  --on-accent:var(--blanc);
  --line:#dcd9d0;
  --line-2:#d3cfc4;
  --line-3:#c6c1b4;
  --line-4:#b6b0a1;
  --wrap:1240px;
  --pad:32px;

  /* Jetons de l'overlay, conservés : les cartes d'habillage s'en servent pour
     citer les couleurs du produit. */
  --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}

/* La navigation est collante : sans marge de défilement, cliquer une entrée du
   sommaire d'une page juridique place le titre d'article SOUS la barre. C'est
   le « le sommaire domine la page, donc ça bug » relevé le 21/08. */
:target,[id]{scroll-margin-top:88px}

@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}
p{margin:0}

/* Le titrage porte la direction : Barlow Condensed, capitales, interlignage
   serré. C'est la même voix que l'accueil — une page de CGV reste la même
   maison. */
h1,h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;line-height:.98;letter-spacing:-.005em}
h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em}

:focus-visible{outline:3px solid var(--fluo);outline-offset:3px;border-radius:2px}

.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:.2em;text-transform:uppercase;color:var(--mut)}

/* Lien d'évitement : fluo sur encre sombre, la combinaison la plus visible de
   la palette. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--fluo);color:var(--encre-sur-fluo);
  padding:12px 18px;font-weight:700;font-size:14px;border:2px solid var(--bleu)}
.skip:focus{left:0;color:var(--encre-sur-fluo)}

/* ── Boutons : ceux de l'accueil, au trait ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 26px;border:3px solid var(--bleu);background:none;color:var(--bleu);
  cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,background .16s,color .16s}
/* ⚠️ GARDE-FOU, ET IL N'EST PAS DECORATIF. `[hidden]{display:none}` est une
   regle de l'AGENT ; `.btn{display:inline-flex}` juste au-dessus est une regle
   d'AUTEUR, et l'auteur gagne a specificite egale. Sans cette ligne,
   `bouton.hidden = true` ne cache RIEN.
   Le defaut a ete constate deux fois en deux jours : les boutons de paiement du
   bloc tarifs, visibles en production alors qu'ils se croyaient caches, puis le
   formulaire de la fenetre de contact. Toute classe qui pose `display` doit
   porter son `[hidden]`. */
.btn[hidden]{display:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--bleu)}
.btn-p{background:var(--fluo);color:var(--encre-sur-fluo)}
.btn-s{background:none;color:var(--bleu)}
.btn-xs{font-size:14px;padding:9px 16px;border-width:2px}

/* ── Navigation ── */
nav{position:sticky;top:0;z-index:50;background:var(--bleu);color:var(--blanc);border-bottom:3px solid var(--fluo)}
.nav-in{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:32px}
/* `a{color:var(--txt)}` vaut bleu nuit — sur la barre, elle aussi bleu nuit, le
   nom de la marque devenait invisible. Les liens de la barre reprennent donc
   explicitement la couleur claire. Vu à la capture du 21/08. */
nav a{color:inherit}
.brand{display:flex;align-items:baseline;gap:10px;color:var(--blanc)}
.brand b{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.brand span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fluo)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13.5px;color:#c8cbd6}
.nav-links a{color:inherit;position:relative;padding:4px 0}
/* Sur fond sombre, le fluo redevient du texte — et le filet se trace au
   survol, comme sur l'accueil. */
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--fluo);transition:right .22s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover{color:var(--fluo)}
.nav-links a:hover::after{right:0}
nav .btn{border-color:var(--fluo);color:var(--fluo);border-width:2px;font-size:14px;padding:9px 16px}
nav .btn:hover{background:var(--fluo);color:var(--encre-sur-fluo);box-shadow:none;transform:none}
nav .btn-p{background:var(--fluo);color:var(--encre-sur-fluo)}

/* ── Pied de page ── */
footer{background:var(--bleu-2);color:#c8cbd6}
.foot{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;font-size:13px}
.foot a{color:var(--fluo)}
.foot a:hover{color:#fff}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* ── Pages juridiques ─────────────────────────────────────────────────────
   Fond clair, mesure courte, titres d'article en condensé. Le repère de
   lecture n'est pas un numéro décoratif : c'est le filet qui sépare deux
   articles, parce que c'est ainsi qu'un contrat se lit. */
.legal-page{padding:56px 0 96px}
.legal-page h1{font-size:clamp(34px,4.4vw,58px);line-height:.96;margin-top:14px;max-width:20ch}
.legal-page .updated{margin-top:16px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.legal-body{max-width:72ch;margin-top:44px}
.legal-body h2{font-size:26px;margin:52px 0 14px;padding-top:22px;border-top:2px solid var(--bleu)}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-size:19px;margin:26px 0 10px;color:var(--txt-2)}
.legal-body p,.legal-body li{font-size:15.5px;line-height:1.75;color:var(--txt-4);font-family:Archivo,sans-serif;text-transform:none;letter-spacing:normal;font-weight:400}
.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}
/* Un lien se surligne au feutre au survol : c'est le geste de la direction,
   appliqué à la lecture. */
.legal-body a{color:var(--bleu);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  transition:background .15s}
.legal-body a:hover{background:var(--fluo);text-decoration-color:var(--encre-sur-fluo)}
.legal-body strong{color:var(--bleu);font-weight:700}
.legal-body .lead{font-size:17.5px;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:var(--encre-sur-fluo);background:var(--fluo);border:2px dashed var(--bleu);padding:2px 8px}

/* Encart d'avertissement */
.callout{margin:22px 0 0;border:2px solid var(--bleu);border-left-width:8px;background:var(--surface);padding:20px 22px}
.callout p{font-size:15px;line-height:1.7;color:var(--txt-3)}
.callout .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bleu);background:var(--fluo);display:inline-block;padding:3px 8px;margin-bottom:10px}

/* ── Sommaire ─────────────────────────────────────────────────────────────
   Il était une grande boîte posée en haut de page, qui repoussait le texte
   sous la ligne de flottaison. Il devient une colonne de renvois compacte, en
   deux colonnes dès qu'il y a la place : on voit le plan ET le début du
   contrat. (Le vrai « bug » venait d'ailleurs — voir `scroll-margin-top`
   plus haut.) */
.toc{margin-top:32px;border:2px solid var(--bleu);background:var(--surface);padding:18px 22px}
.toc .k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:7px 26px}
.toc a{color:var(--txt-3);font-size:14.5px;text-decoration:none}
.toc a:hover{color:var(--bleu);background:var(--fluo)}

@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:40px}
  .toc ol{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand span{display:none}
}