/* Le thème du portail Efm — « Registre », choisi le 26/09/2026 (phase D5).
 *
 * **Changer l'apparence du produit, c'est réécrire ce fichier, et lui seul.**
 * `efm.css` dit *comment* les choses se disposent — une barre en haut, une bande de
 * chiffres, des tables filetées — et ne contient **aucune** valeur d'apparence : ni
 * couleur, ni police, ni rayon, ni ombre. Tout cela vit ici, sous forme de jetons nommés
 * par leur **rôle** (`--action`, `--papier`, `--attenue`) et jamais par leur teinte : un
 * jeton `--carmin` deviendrait un mensonge le jour où le carmin partira, et chaque règle
 * qui le lit serait à relire. Des témoins tiennent cette frontière (`TestLesDeuxThemes`).
 *
 * Ce qu'une nouvelle identité touche, et rien d'autre :
 *   1. ce fichier — les jetons des deux thèmes et les polices ;
 *   2. `polices/` — les fichiers de fonte, servis par le portail lui-même ;
 *   3. les trois dessins qui figent une couleur, parce qu'une image n'hérite pas d'une
 *      variable : `marque.svg`, `chevron.svg`, `chevron-sombre.svg`. Un témoin les relie
 *      aux jetons.
 * Ce qu'elle ne touche pas : la **disposition** des écrans. Remplacer la barre du haut par
 * une colonne, par exemple, est un changement de `base.html` et de `efm.css` — c'est une
 * refonte, pas un changement de thème, et aucun jeton ne peut la rendre gratuite.
 *
 * **Les polices sont servies par le portail**, et c'est une contrainte, pas un goût : la
 * politique de contenu est `default-src 'self'`, et une fonte de CDN demanderait une
 * exception. Licence SIL OFL 1.1 pour les deux familles, jointe dans `polices/`.
 */

/* Public Sans, **variable** : un seul fichier porte toutes les graisses de 100 à 900, et
   c'est le jeu latin — accents, œ, guillemets français, espace fine et € compris. */
@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* IBM Plex Mono, pour ce qu'on cherche des yeux et qu'on recopie : références de
   commande, codes ERP, adresses de boîte, secrets. Deux graisses suffisent. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ═══ LE THÈME CLAIR ══════════════════════════════════════════════════════════════════
 * Blanc, filets crème, encre chaude, et un seul carmin. **Pas de carte, pas d'ombre** :
 * la page se découpe par des filets d'un pixel. Tout contraste annoncé ici est recalculé
 * par un témoin, et c'est lui qui fait foi — le commentaire peut vieillir.
 */
:root {
  /* ── L'encadré ─────────────────────────────────────────────────────────────────────
     Le panneau sombre de l'écran de connexion, le seul aplat foncé du produit. Il ne
     change pas entre les thèmes : il est déjà sombre. */
  --encadre: #1f1a17;
  --encadre-trait: #3a302a;
  --encadre-texte: #d9cfc1;   /* 11,4:1 */
  --encadre-titre: #b3a797;   /* 7,3:1 */
  --encadre-vif: #fbf8f2;
  --encadre-accent: #f0566b;  /* 5,1:1 — la coche des promesses */

  /* ── L'accent ──────────────────────────────────────────────────────────────────────
     **Carmin `#A60321`, la couleur que le commanditaire a donnée.** Elle sert deux rôles
     qui se séparent en sombre, d'où deux familles de jetons :
       - `--accent` : ce qui s'écrit ou se trace en carmin — lien, filet de l'onglet
         courant, anneau de focus, chiffre « à relire » ;
       - `--action` : l'aplat d'un bouton principal, et ce qu'on écrit dessus.
     En clair elles valent la même chose ; en sombre, un texte carmin doit s'éclaircir
     pour rester lisible alors qu'un aplat doit rester profond pour porter du texte clair.

     Le triplet reste séparé parce que l'anneau de focus a besoin de l'accent
     **transparent**, et qu'une couleur ne se rend pas translucide sans ses composantes. */
  --accent-rvb: 166 3 33;
  --accent: rgb(var(--accent-rvb));   /* 7,6:1 sur le papier */
  --accent-fonce: #7d0218;            /* Le survol d'un lien */
  --lien: var(--accent);
  --action: #a60321;
  --action-survol: #7d0218;
  --sur-action: #ffffff;              /* 7,6:1 */

  /* ── Neutres ───────────────────────────────────────────────────────────────────────
     Chauds, tirés vers le crème `#F2E9D8`, qui est la seconde couleur donnée : il fait
     l'en-tête des tables, la sélection et le fond des pastilles neutres. */
  --encre: #1f1a17;          /* 17,0:1 sur le papier */
  --encre-2: #5e554d;        /* 7,4:1 — la navigation au repos */
  --attenue: #6b625a;        /* 6,0:1 sur le papier, 4,9 sur le crème */
  --trait: #e6ddd0;          /* Les filets qui délimitent une section */
  --trait-doux: #efe7da;     /* Les filets qui séparent des lignes */
  --fond: #ffffff;
  --papier: #ffffff;
  --tete-table: #f2e9d8;
  --ligne-survol: #fbf8f2;   /* Aussi la cellule mise en avant de la bande de chiffres */
  --pastille-fond: #f2e9d8;
  /* Le bord d'un champ **délimite** une commande : 3:1 au moins (règle 1.4.11). 3,6:1. */
  --trait-champ: #8f8579;

  /* ── Sémantiques ───────────────────────────────────────────────────────────────────
     Quatre familles × trois rôles. Jamais la couleur seule : chaque état porte aussi un
     libellé, et chaque rang d'alerte une forme.

     **L'alerte et l'action partagent le carmin**, et c'est assumé : il n'y a qu'un rouge
     dans ce produit. Ce qui les distingue est la forme — un bouton est un aplat qu'on
     presse, une alerte est un repère carré devant une phrase — et le libellé. */
  --succes: #2f6b3a; --succes-fond: #eef5ee; --succes-trait: #b9d6bd;
  --avis: #8a5a00;   --avis-fond: #fbf1de;   --avis-trait: #e8cf9c;
  --alerte: #a60321; --alerte-fond: #fbeeee; --alerte-trait: #e9b4b9;
  --info: #2b5c80;   --info-fond: #edf3f8;   --info-trait: #b5cbdd;
  --sur-alerte: #ffffff; --sur-alerte-survol: #fbeeee;

  /* ── Les jauges ────────────────────────────────────────────────────────────────────
     En encre et non en carmin : une consommation n'est pas une alerte. Elle ne le devient
     qu'au plafond, et c'est alors le carmin qui le dit. */
  --jauge: #1f1a17;
  --jauge-fond: #efe7da;
  --jauge-chaud: #a60321;

  /* ── Ombres ────────────────────────────────────────────────────────────────────────
     **Aucune sur la page.** Une seule, pour ce qui flotte au-dessus d'elle — le menu du
     compte. `--ombre-1` existe encore pour que les règles qui la lisaient n'aient pas à
     changer : elle vaut « rien ». */
  --ombre-teinte: 31 26 23;
  --ombre-1: none;
  --ombre-2: 0 4px 16px rgb(var(--ombre-teinte) / .10);
  --anneau: 0 0 0 3px rgb(var(--accent-rvb) / .15);

  /* ── La flèche des menus déroulants ────────────────────────────────────────────────
     Un fichier par thème, parce qu'une image de fond n'hérite pas de `currentColor`.
     Chacun porte le `--attenue` de son thème ; un témoin le vérifie. */
  --chevron: url("chevron.svg");

  /* ── Géométrie ─────────────────────────────────────────────────────────────────────
     Espacement base 4. */
  --pas-1: .25rem; --pas-2: .5rem;  --pas-3: .75rem; --pas-4: 1rem;
  --pas-5: 1.5rem; --pas-6: 2rem;   --pas-7: 3rem;

  /* ── Typographie ───────────────────────────────────────────────────────────────────
     Corps à 14 px, tables à 13 : c'est un outil de travail, dense par destination. Le
     16 px reste réservé aux **champs** — iOS zoome au focus en dessous. Les piles de
     repli sont celles du système : si la fonte manque, l'écran reste lisible. */
  --police: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-xs: .75rem; --t-s: .8125rem; --t-base: .875rem;
  --t-m: .9375rem; --t-xl: 1.375rem; --t-xxl: 1.625rem;
  --gras-moyen: 500; --gras-fort: 600; --gras-titre: 600;
  --chasse-titre: -.01em;
  --chasse-chiffre: -.02em;   /* Les grands chiffres : Public Sans les espace un peu trop */
  --t-accroche: 1.75rem;      /* La promesse de l'écran de connexion */
  --t-mono: .92em;            /* Plex Mono paraît plus grande que Public Sans à corps égal */
  /* Le plancher des champs : iOS zoome au focus en dessous de 16 px. */
  --t-champ: 1rem;
  --chiffres: tabular-nums;

  /* Un rayon, petit : un rectangle net se lit « outil », un arrondi de quatorze pixels se
     lit « application grand public ». Trois noms pour la même valeur — champ, boîte, cadre
     —, parce qu'un prochain thème voudra peut-être les distinguer ; la pastille, elle, a
     déjà le sien. **Un jeton que plus aucune règle ne lit se retire** : la ronde 2 de D5
     en a trouvé cinq, dont un dont le commentaire décrivait un élément disparu. */
  --rayon-s: 4px; --rayon-m: 4px; --rayon-l: 4px; --rayon-pastille: 3px;

  --hauteur-barre: 3.5rem;
  --largeur-contenu: 90rem;
  --cible-doigt: 2.75rem;
  --cible-dense: 2.25rem;   /* Un bouton de bureau : la barre et les en-têtes d'écran */
  /* DOCUMENTAIRE : une requête média ne lit pas une propriété personnalisée. Le point de
     bascule est écrit en littéral dans `efm.css`, et il vaut celui-ci. */
  --bascule: 60rem;
}

/* ═══ LE THÈME SOMBRE ═════════════════════════════════════════════════════════════════
 * **Il ne redéfinit que des jetons, et il redéfinit tous ceux qui portent une couleur**
 * (décision 156) — un jeton oublié garderait sa valeur claire sur fond noir. `screen and`
 * épargne l'impression : sans lui, un navigateur réglé en sombre imprimerait en blanc sur
 * noir.
 *
 * Même registre que le clair, retourné : un brun presque noir, l'encre devient le crème,
 * le carmin s'éclaircit pour le texte et reste profond pour l'aplat.
 */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --encadre: #0d0a08;
    --encadre-trait: #2a221e;
    --encadre-texte: #d9cfc1;
    --encadre-titre: #b3a797;
    --encadre-vif: #fbf8f2;
    --encadre-accent: #f0566b;

    /* **Seul le triplet est redéclaré** : `--accent` et `--lien` en sont dérivés. */
    --accent-rvb: 240 86 107;           /* 5,3:1 sur le papier sombre */
    --accent-fonce: #ff8595;            /* Le survol **éclaircit** au lieu d'assombrir */
    --action: #b0102e;                  /* Un aplat profond, qui porte du crème */
    --action-survol: #c41e3c;
    --sur-action: #fbf8f2;              /* 6,7:1 */

    --encre: #f2e9d8;
    --encre-2: #cbbfae;
    --attenue: #a89b89;
    --trait: #342a25;
    --trait-doux: #2a221e;
    --fond: #14100e;
    --papier: #1b1613;         /* Plus clair que le fond : ce qui porte du contenu avance */
    --tete-table: #2a211d;
    --ligne-survol: #221b18;
    --pastille-fond: #2a211d;
    --trait-champ: #7a6d62;

    --succes: #8fcf9a; --succes-fond: #13241a; --succes-trait: #2e5a3a;
    --avis: #e0a94a;   --avis-fond: #2a1e0b;   --avis-trait: #6d4b15;
    --alerte: #f0566b; --alerte-fond: #2b1214; --alerte-trait: #7c2a33;
    --info: #8fb3cf;   --info-fond: #10202d;   --info-trait: #2c5570;
    --sur-alerte: #1a0508; --sur-alerte-survol: #2b1214;

    --jauge: #f2e9d8;
    --jauge-fond: #2a221e;
    --jauge-chaud: #f0566b;

    --ombre-teinte: 0 0 0;
    --ombre-2: 0 4px 16px rgb(var(--ombre-teinte) / .5);
    --anneau: 0 0 0 3px rgb(var(--accent-rvb) / .25);

    --chevron: url("chevron-sombre.svg");
  }
}