/* CESTREGLE · jetons de design partagés.
 *
 * Avant ce fichier, chaque gabarit portait son propre bloc :root : environ
 * 60 Ko de CSS en ligne sur huit fichiers, dont cinq redéclaraient
 * --bleu:#0b1b4d et --or:#c9a227 par copier-coller, pendant que les deux
 * générateurs Python employaient un autre vocabulaire (--blue, --gold) pour
 * les mêmes valeurs. --ink désignait même deux couleurs différentes selon le
 * fichier. D'où six identités de H1, 87 couleurs sur /courrier, et sept pages
 * indexables rendues sans aucune police de marque.
 *
 * Ce fichier est la seule source. Une couleur nouvelle se rattache à un
 * palier existant, ou justifie explicitement une étape supplémentaire.
 * tests/test_visual_coherence.py verrouille l'invariant.
 *
 * Il est servi depuis /css/ et non intégré en ligne : les pages font déjà une
 * requête bloquante vers fonts.googleapis.com, donc un fichier same-origin de
 * 2 Ko coûte moins que ce qui existe déjà, et il est mis en cache une journée.
 */

:root {
  /* Rampe marine. Huit paliers de luminosité d'une seule teinte. */
  --navy-950:#06102e; --navy-900:#0a1740; --navy-800:#0b1b4d;
  --navy-700:#10266e; --navy-600:#1c2a5e; --navy-500:#34427e;
  --navy-300:#8b94b8; --navy-200:#b9c0da; --navy-050:#e7ecff;

  /* Rampe or, du brun d'encre au parchemin. */
  --gold-900:#2a2009; --gold-800:#5a4a16; --gold-700:#7a5b00;
  --gold-500:#c9a227; --gold-400:#e6c65a; --gold-200:#e3d8b3;
  --gold-100:#f4ecd8; --gold-050:#f8f2e2;

  /* Sémantiques. --ink-600 est le gris de texte secondaire : 5.00:1 au pire
     sur les trois fonds de page, donc AA tenu pour du corps de texte. */
  --ink-600:#6b6450; --ok-700:#176b3a; --ok-300:#7ee0a0;

  /* Hors rampe, volontairement : --navy-glow est le seul bleu saturé (halo du
     hero), --bad-600 le seul rouge hors pastilles macOS du mock navigateur. */
  --navy-glow:#1a3aa0; --bad-600:#c0506b;

  /* Alias français, lus par les gabarits HTML. --ink, --muted, --bg, --or2 et
     --bleu2 ont été retirés : chacun désignait deux ou trois couleurs selon le
     fichier, ce qui rendait toute mise en commun impossible. Leurs usages
     pointent désormais directement sur le palier voulu. */
  --bleu:var(--navy-800); --or:var(--gold-500);
  --cream:var(--gold-100); --parch:var(--gold-050);

  /* Alias anglais, lus par les générateurs Python (guides, comparatifs). */
  --blue:var(--navy-800); --gold:var(--gold-500);

  /* Couche applicative : /courrier, /suivi, /admin, /juriste et la page
     amende-radar partagent une grille plus froide et plus dense que les pages
     éditoriales. Ces jetons portent des noms distincts précisément parce que
     les mêmes rôles y prennent d'autres valeurs ; c'est la collision de noms
     (--ink valait trois couleurs, --or2 un or clair ici et foncé là) qui a
     produit l'incohérence que ce fichier corrige. */
  --slate-800:#23233a; --slate-500:#6a6a86;
  --surface-100:#edeef5; --card:#fff; --line:#e8e8f1;
  --gold-600:#a9821c;
  --ok-600:#18753c; --bad-700:#b3132b;

  /* États. Ces couleurs existaient déjà, mais éparpillées : huit verts, cinq
     rouges et quatre ambres pour quatre rôles, sur /courrier et la page
     amende-radar. Trois paliers par état suffisent : le texte, la bordure, le
     fond teinté. --warn-700 est le plus foncé des deux ambres en usage, choisi
     dans ce sens parce que l'autre tombait à 4.34:1, sous le plancher AA. */
  --ok-500:#1f9d55; --ok-200:#c2e6cf; --ok-050:#eafaf0;
  --bad-500:#dc2626; --bad-200:#f3c9cf;
  --warn-700:#9a3412; --warn-500:#d97706; --warn-100:#fff2c2;
  --info-700:#1d4ed8; --info-500:#2563eb; --info-200:#bfdbfe; --info-050:#eef2ff;

  /* Échelle typographique. Un H2 rendu à 42px en script et à 24px en serif
     lisait comme deux niveaux distincts alors que c'est le même niveau
     sémantique. Un seul pas par niveau, partout. */
  --fs-h1:clamp(30px,6vw,44px);
  --fs-h2:clamp(22px,3.2vw,28px);
  --fs-h3:19px;

  /* Trois familles chargées, pas une de plus. Petit Formal Script n'existe
     qu'en 400 : lui demander 700 déclenche un faux gras de synthèse. */
  --hand:'Petit Formal Script', ui-rounded, cursive;
  --serif:'Lora','Constantia',Georgia,serif;
  --sans:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Helvetica, Arial, sans-serif;
}

/* La page d'accueil porte la voix de marque : son H1 et ses H2 montent d'un
   cran par rapport aux pages de contenu, sans sortir de l'échelle. */
.is-landing {
  --fs-h1:clamp(38px,10vw,56px);
  --fs-h2:clamp(28px,4.6vw,38px);
}

/* Les écrans applicatifs (/courrier, /suivi) descendent d'un cran : ils sont
   denses, et un H1 à 44px y écraserait l'interface. Le titre doit malgré tout
   se lire comme un titre. Sur /courrier il était à 18,24px en graisse 500,
   c'est-à-dire au niveau du corps de texte, parce que le <h1> empruntait
   la classe d'accroche du bandeau. Le même pas descendant vaut pour /suivi,
   qui n'avait aucun H1. */
.is-app {
  --fs-h1:clamp(22px,3vw,29px);
  --fs-h2:clamp(18px,2.2vw,21px);
}

/* Les contrôles de formulaire n'héritent pas de font-family : sans cette
   règle, un bouton s'affiche dans l'Arial du navigateur au milieu du reste. */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Cibles tactiles : 44px est le minimum confortable au pouce. */
.tap-44 { min-height: 44px; display: inline-flex; align-items: center; }

/* Pied de page légal, présent sur chaque page. Les mentions légales, les CGU
   et la politique de confidentialité doivent rester joignables depuis
   n'importe où sur le site (LCEN art. 6 III-1) : elles ne l'étaient que
   depuis l'accueil, pas depuis les guides ni les comparatifs, c'est-à-dire
   pas depuis les pages où l'on arrive par une recherche. */
.cr-legal {
  border-top: 1px solid rgba(11, 27, 77, .12);
  margin-top: 56px; padding: 26px 22px 40px;
  font-size: 13.5px; line-height: 1.7; text-align: center;
  color: var(--ink-600);
}
.cr-legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.cr-legal a { color: var(--navy-800); text-decoration: underline; }
.cr-legal a:hover { color: var(--navy-700); }
/* La page courante se lit comme telle plutôt que de proposer un lien vers
   elle-même ; aria-current le dit aussi aux lecteurs d'écran. */
.cr-legal [aria-current="page"] { color: var(--navy-800); font-weight: 700; }
.cr-legal p { margin: 14px auto 0; max-width: 620px; }