/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — LA PALETTE, ET IL N'Y EN A QU'UNE.

   ⚠️ POURQUOI UN FICHIER PARTAGÉ dans un projet qui tient par ailleurs à
   « tout dans un seul fichier ». Trois pages — la vitrine, la connexion et
   l'application — portaient chacune sa copie des couleurs. Trois copies d'une
   palette, c'est trois palettes le jour où l'une bouge : le produit se met à
   avoir deux identités selon l'écran, et personne ne sait laquelle fait foi.
   Une valeur dérivée a une seule AUTORITÉ ; les pages sont des RENDUS.

   ⚠️ THÈME SOMBRE ASSUMÉ, PAS UNE BASCULE. Un seul monde visuel, peint
   explicitement de bout en bout : aucun élément n'emprunte un fond au
   navigateur. C'est un choix, pas un oubli — et il vaut mieux un thème tenu
   qu'une bascule à moitié faite.

   ⚠️ LES DEUX FAMILLES DE NOMS DÉSIGNENT LES MÊMES COULEURS. La vitrine parle
   d'abysse et de coque, l'application de `ground` et de `surface` : ce sont
   deux vocabulaires nés à deux moments, et les fondre d'autorité casserait
   l'un des deux. Ils pointent ici sur les mêmes valeurs, ce qui suffit à
   garantir qu'ils ne divergeront pas.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── LE VOCABULAIRE DE LA VITRINE ────────────────────────────────────── */
  --abysse:#F5FBFD;
  --coque:#FFFFFF;
  --coque-haute:#E9F8F5;
  --trait:#D9E9ED;
  --trait-vif:#A9D4D1;
  --encre:#062A43;
  --encre-douce:#466679;
  /* 🔴 MESURÉE, PAS ESTIMÉE. Cette encre valait #6B7C94 : sur le fond des
     cartes (#0E1725) elle donne un rapport de 4,23 pour un seuil AA de 4,5 —
     sous la norme, sur cinq paragraphes de la vitrine, à 13,4 px. Un écart de
     0,27 qu'aucun œil ne voit et qu'aucune relecture n'aurait trouvé : c'est la
     sonde de contraste qui l'a nommé, à l'élément près.

     ⚠️ ET ELLE N'A ÉTÉ TROUVÉE QU'APRÈS AVOIR ÉLARGI LA SONDE. Celle-ci ne
     regardait que l'application ; la vitrine et l'écran d'entrée, deux surfaces
     neuves avec leurs propres couleurs, n'étaient mesurés nulle part. Une
     mesure partielle se lit comme une mesure.

     La valeur ci-dessous donne 5,16 sur ce même fond. La marge est délibérée :
     un rapport qui frôle le seuil repasse dessous au premier fond retouché. */
  --encre-tenue:#648194;
  --or:#087D69;
  --or-sourd:#076653;
  --lagon:#00A99D;
  --corail:#C44843;
  --rayon:16px;

  /* ── LE VOCABULAIRE DE L'APPLICATION ─────────────────────────────────── */
  --ground:#F5FBFD;  --surface:#FFFFFF;  --surface-2:#F0F8F8;
  --line:#D9E9ED;    --line-soft:#E8F1F2;
  /* ⚠️ `--ink-faint` SUIT `--encre-tenue`, et pour la même raison mesurée.
     Il porte « non mesuré » dans l'application — un texte qui ne s'affiche que
     lorsqu'une donnée manque, donc rarement, donc jamais au moment où quelqu'un
     regarde le contraste. La sonde le laissait passer faute de l'avoir sous les
     yeux : une sonde qui passe sur un ensemble vide ne prouve rien. */
  --ink:#062A43;     --ink-dim:#466679;  --ink-faint:#648194;

  /* 🔴 DEUX JETONS D'ACCENT, ET C'EST UNE CORRECTION, PAS UN RAFFINEMENT.
     L'application n'en avait qu'un, employé À LA FOIS comme fond de bouton
     (texte blanc dessus) et comme couleur de LIEN sur le fond de page. En
     clair, une seule valeur pouvait servir aux deux. En sombre, c'est
     impossible : un teal assez clair pour se lire sur l'abysse est bien trop
     clair pour porter du texte blanc, et un teal assez sombre pour porter du
     blanc disparaît sur le fond. Une seule valeur aurait forcément échoué
     d'un côté — et le côté qui échoue est celui qu'on ne regarde pas.

       --accent      → SURFACE  : fond de bouton, texte blanc dessus
       --accent-ink  → TEXTE    : liens et libellés sur fond sombre       */
  --accent:#008B73;  --accent-vif:#00735F;  --accent-ink:#087D69;
  --accent-wash:#E2F7F3;

  --ok:#087D69;      --ok-wash:#E6F7F0;
  --warn:#9A6300;    --warn-wash:#FFF5D9;
  --risk:#B23B32;    --risk-wash:#FDECEA;

  --nav:#FFFFFF;     --nav-ink:#173B51;   --nav-actif:#DDF5F1;
  --r:12px;
}

/* ⚠️ LE FOCUS RESTE VISIBLE PARTOUT. Un anneau retiré « parce que c'est plus
   propre » rend le clavier inutilisable, et le défaut ne se voit jamais à la
   souris — donc jamais par celui qui l'a introduit. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--or);
  outline-offset:2px;
}

/* Les champs de formulaire du navigateur ne savent pas qu'on est en sombre :
   sans cette déclaration, les listes déroulantes et les sélecteurs de date
   s'ouvrent en clair au milieu d'une page nuit. */
:root{color-scheme:light}

/* ═══ `hidden` CACHE, QUELLE QUE SOIT LA CLASSE ══════════════════════════════
   🔴 Mesuré le 2026-10-08 : la société d'un VRAI client portait le badge
   « démonstration ». L'attribut `hidden` était bien posé (`demo = false`), mais
   `.et{display:inline-block}` l'emportait sur la règle du navigateur — un
   sélecteur de classe bat `[hidden]`. Le même piège guettait tout élément
   masqué qui porte une classe d'affichage : `#btn-nouveau` (`.btn`), que la
   règle « zéro bouton mort » cache aux comptes sans le droit.
   On règle la CLASSE de défaut, une fois, ici — pas élément par élément. */
[hidden]{display:none !important}