/* Charte Fulchiron : la couche COMMUNE aux quatre pages du produit.

   Elle existe parce qu'il y en avait trois qui se contredisaient. `login.html`, `admin.html` et `compte.html` portaient chacune son
   propre <style> et redéfinissaient les mêmes composants avec d'autres valeurs :
   carte à 10 px ici et 11 là, bouton carré à 6 px chez l'un et pilule à 25 px chez
   l'autre, couleurs de message en dur d'un côté et en jetons de l'autre.

   Le défaut qui a tranché la question : `compte.html` employait --teal-actif,
   --bleu-actif et --clair, qui n'étaient déclarées QUE dans le <style> de
   `login.html`, donc invisibles chez elle. Une var() qui ne résout pas invalide sa
   déclaration entière : sur la seule page où l'on tape un mot de passe, le bouton
   n'avait plus de bordure, le champ plus d'anneau de focus, le survol plus d'effet.
   Un jeton emprunté à une autre page n'est pas un jeton, c'est une coïncidence.

   Ce fichier ne contient donc QUE ce que plusieurs pages partagent : les jetons, la
   remise à zéro, et les composants de formulaire des pages-outil. Ce qui n'appartient
   qu'à une page reste chez elle — le board dans `styles.css`, la porte d'entrée dans
   `login.html`.

   DEUX REGISTRES ASSUMÉS, ET C'EST VOULU. La porte d'entrée est la vitrine du client :
   fond clair, titres turquoise, Poppins, boutons en pilule, relevés sur fulchiron.com.
   Les pages-outil sont l'intérieur : Instrument Sans, gris neutres, angles courts.
   Les deux registres partagent maintenant les mêmes JETONS, ce qui les empêche de
   dériver l'un par rapport à l'autre ; ils ne partagent pas leurs formes, parce
   qu'une vitrine et un poste de travail ne font pas le même métier. */

:root {
  /* ---- pages-outil : le board, les comptes, mon compte ---- */
  --bg: #fafaf9; --card: #ffffff; --ink: #1a1a1a; --ink2: #52514e; --muted: #8a8a8a;
  --line: #ececea;
  /* Le fond neutre d'une pastille, d'un rail de segments, d'un filet léger.
     Il existait en trois valeurs à un point d'écart (#efefec, #f1f1ef, #f2f2f0),
     réparties entre le board et la page Comptes : indistinguables à l'œil, et
     libres de dériver chacune de son côté. */
  --gris-doux: #f1f1ef;
  --ok: #0f7b3d; --okbg: #e5f3ea; --ko: #b3261e; --kobg: #fbeae9;
  /* L'orange du NON AFFECTÉ : ni un succès ni une faute, une somme incomplète. */
  --warn: #b45309; --warnbg: #fdf1e2;

  /* ---- la marque, relevée sur fulchiron.com (kit Elementor + styles calculés) ----
     Leur monde est CLAIR : fond blanc, titres turquoise, texte marine-bleuté. Le
     marine n'est chez eux qu'un petit libellé, jamais un grand aplat. */
  --marine: #041750;
  --encre: #344678;      /* kit « text » */
  --titre: #34A2AA;      /* kit « secondary » — couleur de LEURS titres */
  --accent: #18AED9;     /* kit « accent » */
  --turquoise: #44BDAF;
  --degrade-a: #5BCCBB;  /* bornes exactes de leur bouton « Découvrir » */
  --degrade-b: #18AED9;
  --clair: #F6FBFF;
  --ligne: #e3edf5;

  /* Leur bleu et leur turquoise, assombris à teinte et saturation IDENTIQUES (193° et
     184°). Les originaux ne peuvent pas porter de texte : #18AED9 est à 2,59 contre du
     blanc et #34A2AA à 3,05 sur blanc, tous deux sous les 4,5 exigés. Ces deux-là
     tiennent la même famille de couleur et passent — 4,73 et 4,70. C'est la teinte de
     la marque, à la luminosité près.
     --bleu-actif remplace --side, qui nommait un bandeau latéral retiré :
     même valeur, deux noms, et c'est ce doublon qui avait laissé `compte.html`
     emprunter celui qu'elle ne voyait pas. */
  --bleu-actif: #117D9C;
  --bleu-actif-fonce: #0F6E8A;
  --teal-actif: #297F85;
  --teal-actif-fonce: #236C71;
}

* { box-sizing: border-box; margin: 0; }

/* Un `display: flex/grid` déclaré plus bas ÉCRASE l'attribut `hidden` : l'élément
   reste visible alors que le code le croit masqué. Piège payé deux fois côté board
   (le sélecteur d'exercices, puis les tuiles laissées sous le message d'exercice
   absent — des chiffres d'une autre année sous « aucune donnée »). La règle est donc
   posée une fois pour toutes, à la racine, plutôt que rattrapée conteneur par
   conteneur. */
[hidden] { display: none !important; }

/* ============================ COMPOSANTS DES PAGES-OUTIL ====================
   Employés par `admin.html` et `compte.html`, et par le board pour la carte. Ce qui
   est propre à une page (le tableau des comptes, la grille du formulaire d'ouverture)
   reste dans son <style>. */

.card { background: var(--card); border: 1px solid var(--line); border-radius: 11px; }
.pad { padding: 16px 18px; }

/* L'en-tête d'une page-outil : son titre, et le retour vers le board à côté. */
.tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.tete h1 { font-size: 21px; }
.tete a { font-size: 12.5px; color: var(--ink2); }
.sous { color: var(--muted); font-size: 12.5px; margin-bottom: 22px; }

/* Un seul dessin de bouton pour tout l'intérieur du produit. La pilule à 25 px que
   portait `compte.html` venait de la porte d'entrée : elle appartient à la vitrine,
   pas au poste de travail. */
button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px;
  border-radius: 7px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; }
button:hover { border-color: var(--muted); }
button[disabled] { opacity: .5; cursor: default; }
button.fort { background: var(--bleu-actif); color: #fff; border-color: var(--bleu-actif); }
button.fort:hover { background: var(--bleu-actif-fonce); border-color: var(--bleu-actif-fonce); }
button.danger { color: var(--ko); }
button.danger:hover { border-color: var(--ko); }

label.champ { display: block; font-size: 11.5px; color: var(--ink2); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], select {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: var(--ink); }
/* L'anneau de focus n'est pas un ornement : sans lui on saisit à l'aveugle au
   clavier. Il avait DISPARU de « Mon compte » par la variable fantôme décrite en
   tête de fichier, sur le seul écran où l'on tape un mot de passe. */
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--bleu-actif); outline-offset: 1px; }
input[readonly] { background: var(--bg); color: var(--muted); cursor: default; }
input[readonly]:focus-visible { outline: none; border-color: var(--line); }

/* Les messages prennent les jetons et jamais des couleurs en dur. `compte.html`
   écrivait ses propres #fdecec et #8c1c1c : deux rouges pour un même sens, qui ne
   bougeaient pas ensemble. */
.msg { margin: 14px 0; padding: 11px 14px; border-radius: 8px; font-size: 13px; }
.msg.ko, .msg.err { background: var(--kobg); color: var(--ko); }
.msg.ok { background: var(--okbg); color: var(--ok); }