/* ══════════════════════════════════════════════════════════════════
   SIMSIMUP — LA FEUILLE PARTAGÉE
   Version 3.1 · « La glace sans tain » · 2026-08-17

   ⚠️ **CE FICHIER EST LA SOURCE ; LA COPIE EN SERVICE EST
   `app/static/simsimup.css`.** Posée le 2026-08-17. **Modifier ici, puis
   recopier** — jamais l'inverse, sinon la source et la copie divergent à
   la première correction faite du mauvais côté.

   ⚠️ **CE QU'AJOUTE LA 3.1 — LE RELIEF FONCTIONNEL**, demandé par Franck
   après validation de l'écran de séance : *« un peu de mise en relief
   afin de montrer les zones de saisie ou d'interaction »*. Ce n'est pas
   un retour de « la matière » : en 2.0 TOUT portait du relief, donc il ne
   distinguait rien. Ici il **ne dit qu'une chose : ceci se manipule**, et
   il est réservé à ce qui se clique, se tape ou se déplie. Voir les trois
   jetons `--pose`, `--pose-forte`, `--saisie`.

   ─────────────────────────────────────────────────────────────────
   CE QUE CHANGE LA VERSION 3.0
   ─────────────────────────────────────────────────────────────────

   La 2.0 taillait tout l'écran dans UNE surface molle, et disait la
   hiérarchie par deux ombres opposées : **ce qui sort agit, ce qui
   s'enfonce contient.** Cette grammaire est abandonnée. Elle avait un
   défaut connu — le relief doux efface la frontière entre ce qui
   s'affiche et ce qui se clique — qu'il fallait tenir par trois parades.

   À la place, **une grammaire de camp** :

     **CE QUI SE DIT EST SUR LE PAPIER. CE QUI OBSERVE EST DANS LA NUIT.**

   Le papier porte ce que produit un humain : la parole du coach et du
   client, les rapports, les formulaires, les textes longs. La nuit porte
   ce qui l'observe et le mesure : le rail de navigation, les compteurs,
   le tuteur, la sonde, la consommation.

   ⚠️ **CE N'EST PAS UN GOÛT, C'EST LA RÈGLE MÉTIER LA PLUS STRICTE DU
   PROJET RENDUE VISIBLE.** Le client virtuel ne doit jamais voir le
   référentiel de processus ni la remarque du tuteur (D19, et les six
   interdits d'`ARCHITECTURE-LOGIQUE.md`). Sur l'écran de séance en 2.0,
   les deux colonnes ont exactement le même fond : **rien ne dit laquelle
   est vue du client.** Ici, le fond le dit.

   Corollaire opérationnel, et c'est le seul contrôle à faire en
   relisant un écran converti : *ce bloc, le client pourrait-il le voir ?*
   Si oui il est clair, si non il est sombre. Un bloc mal placé se repère
   sans discussion — ce que le relief ne permettait pas.

   ─────────────────────────────────────────────────────────────────
   ⚠️ POSER CE FICHIER NE CASSE AUCUN DES QUATORZE GABARITS
   ─────────────────────────────────────────────────────────────────

   C'est la décision d'ingénierie qui rend la refonte progressive, et
   elle mérite d'être comprise avant d'être utilisée.

   Les gabarits de la 2.0 écrivent leur relief de **deux** façons :

     ① par jeton — `box-shadow: var(--relief)` ou `var(--creux-doux)` ;
     ② en dur — `box-shadow: inset 4px 4px 8px var(--ombre), …`,
        recopié quarante fois dans l'accueil seul.

   Les deux sont neutralisées ici, et par deux moyens différents :

     ① les quatre jetons d'ombre valent **`none`** ;
     ② les trois couleurs d'ombre valent **`transparent`** — une ombre
        portée d'une couleur transparente ne se voit pas, quelle que
        soit la géométrie écrite dans le gabarit.

   **Conséquence : le jour où l'on copie ce fichier, les quatorze écrans
   basculent d'un coup sur le papier, sans relief, sans être touchés.**
   Ils ne sont pas encore *convertis* — ils n'ont ni gouttière, ni voix,
   ni camp — mais ils sont cohérents, lisibles et déployables. La
   conversion écran par écran vient ensuite, dans l'ordre donné par
   `DIRECTION-VISUELLE.md` §6.

   ⚠️ **LES ALIAS DE LA 2.0 SONT CONSERVÉS ET NE SE SUPPRIMENT PAS
   AVANT LA FIN.** `--matiere`, `--fond`, `--bord`, `--marque` et les
   autres pointent vers les nouveaux rôles. Les retirer avant que les
   quatorze écrans soient convertis rendrait blanches des pages entières.
   Le bloc porte sa propre date de péremption : voir §ALIAS.

   ─────────────────────────────────────────────────────────────────
   CE QUI EST REPRIS DE LA 2.0 SANS DISCUSSION
   ─────────────────────────────────────────────────────────────────

     · **Les jetons sont nommés par leur rôle, pas par leur teinte.**
       `--bord` survit à un changement de palette ; `--gris-clair` non.
       C'est ce qui a permis à la 2.0 d'exister, et c'est ce qui permet
       à la 3.0 de la remplacer sans réécrire treize fichiers.
     · **Les trois statuts disent un ÉTAT, jamais une catégorie**, et le
       libellé reste obligatoire à côté de la couleur.
     · **Le focus clavier est un contour PLEIN**, il ne se négocie pas.
     · **`prefers-contrast: more` et `prefers-reduced-motion`** en fin de
       fichier. Ne pas les supprimer en croyant nettoyer.
     · **Le fichier se charge AVANT le `<style>` du gabarit**, et c'est
       l'inverse de `navigation.css`. Un gabarit doit pouvoir redéfinir un
       jeton localement le temps d'une mise au point.
   ══════════════════════════════════════════════════════════════════ */


/* ══ LES POLICES ═══════════════════════════════════════════════════
   Deux familles, un rôle chacune, et le partage n'est pas décoratif :
   il **dit qui parle** avant qu'on ait lu le mot.

     · **Newsreader** — la PAROLE. Les répliques, les rapports, les
       finalités d'étape, les retours d'expérience : tout ce qu'un
       humain a écrit ou dit. Empattements, pensée pour l'écran, italique
       vivante, accentuation française complète.
     · **Archivo** — la MESURE. Les étiquettes, les nombres, les titres,
       le rail, les boutons : tout ce que l'appareil affiche.

   ⚠️ **C'EST L'INVERSE DE L'USAGE COURANT**, qui met l'empattement en
   titre et la linéale en corps. Ici le corps est la matière du produit —
   un rapport de supervision se lit sur plusieurs écrans — et le titre
   est de l'appareillage.

   ⚠️ **LES DEUX SONT SOUS SIL OPEN FONT LICENSE 1.1**, comme Liberation
   Sans qu'elles remplacent. Servables depuis le VPS sans licence
   payante, et sans requête vers un tiers : voir `DIRECTION-VISUELLE.md`
   §3 pour la procédure de récupération et de sous-ensemblage.

   ⚠️ **L'ARGUMENT « MÉTRIQUES IDENTIQUES À ARIAL » TOMBE, ET C'EST LE
   COÛT ASSUMÉ DE LA REFONTE.** Liberation Sans était métriquement
   identique à Arial : si le téléchargement tardait, la page ne bougeait
   pas d'un pixel. Ce n'est plus vrai. Les replis ci-dessous sont donc
   choisis pour être **proches**, pas identiques — Georgia pour
   Newsreader, la pile système pour Archivo —, et `font-display: swap`
   reste : le texte s'affiche tout de suite, quitte à sauter une fois.
   L'inverse — attendre la police — laisserait une page blanche.

   ⚠️ **TANT QUE LES `.woff2` NE SONT PAS DANS `/static/polices/`, LE
   REPLI S'APPLIQUE ET RIEN NE PLANTE.** Un `@font-face` dont la source
   est introuvable est ignoré en silence. On peut donc poser cette
   feuille avant d'avoir posé les polices ; la page sera moins jolie, pas
   cassée. */

@font-face {
  font-family: "Newsreader";
  src: url("/static/polices/newsreader-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/polices/newsreader-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/polices/newsreader-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/polices/archivo-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/polices/archivo-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/polices/archivo-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}


:root {
  /* ── LES DEUX PILES ──────────────────────────────────────────────
     ⚠️ **NE JAMAIS ÉCRIRE `font-family` EN DUR DANS UN GABARIT.** Le
     nom du rôle survit à un changement de fonte ; le nom de la fonte,
     non. C'est la même règle que pour les couleurs. */
  --parole:   "Newsreader", Georgia, "Times New Roman", serif;
  --mesure:   "Archivo", "Liberation Sans", Arial, Helvetica, sans-serif;
  --chiffres: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ══ LES DEUX CAMPS ═══════════════════════════════════════════════
     Le papier est un gris très légèrement vert, à chroma très basse.
     ⚠️ **CE N'EST NI DU BLANC NI DU CRÈME, ET LES DEUX SONT ÉCARTÉS
     POUR DES MOTIFS DIFFÉRENTS.** Le blanc pur fatigue sur une heure de
     lecture — un écran d'entraînement se tient longtemps. Le crème
     (jaune) donnerait au produit un air de papeterie, quand il est un
     instrument de mesure. */
  --papier:       #efefea;   /* la page : ce qui se dit                */
  --papier-vif:   #f7f7f3;   /* une carte, un bloc qui appelle         */
  --papier-creux: #e6e6df;   /* un champ, une réplique reçue, un total */

  /* La nuit est un bleu marine, pas un noir. Un noir pur se lit comme
     une absence de choix — et le produit est bleu depuis l'origine. */
  --nuit:         #141e33;   /* le fond de l'appareil                  */
  --nuit-clair:   #222e49;   /* les séparations DANS la nuit           */
  --nuit-creux:   #0e1626;   /* une jauge vide, un fond de barre       */

  /* ── L'ENCRE, SUR LE PAPIER ──────────────────────────────────────
     Trois niveaux, et pas quatre : au-delà, personne ne distingue plus
     le tertiaire du quaternaire, et l'on écrit du gris au hasard.
     Les rapports sont mesurés sur `--papier`. */
  --encre:        #17233f;   /* 13,9:1 — le texte, les titres          */
  --encre-douce:  #46506b;   /*  7,4:1 — le secondaire                 */
  --encre-pale:   #656c82;   /*  5,0:1 — les légendes, les unités.
                                LA LIMITE BASSE, et pas au-delà        */

  /* ── LA LUEUR, SUR LA NUIT ───────────────────────────────────────
     Le pendant exact des trois encres, mesuré sur `--nuit`. Un gabarit
     qui passe un bloc dans la nuit change de triplet, pas de logique. */
  --lueur:        #c8d6e8;   /* 11,4:1 — le texte dans la nuit         */
  --lueur-pale:   #8c9bb5;   /*  5,4:1 — le secondaire dans la nuit    */
  --lueur-vive:   #ffffff;   /* le chiffre qu'on doit lire de loin     */

  /* ── LA VOIX QUI OBSERVE ─────────────────────────────────────────
     ⚠️ **LA SEULE TEINTE DU PRODUIT QUI NE SOIT NI L'ENCRE NI UN
     STATUT, ET ELLE NE VEUT DIRE QU'UNE CHOSE : c'est le TUTEUR ou le
     SUPERVISEUR qui parle** — ni le coach, ni le client.

     Le jour où elle servira à décorer autre chose, elle ne voudra plus
     rien dire, exactement comme les trois statuts. C'est le risque
     assumé de cette direction, et il tient dans un jeton : s'il déplaît,
     c'est cette ligne qu'on change, et elle seule. */
  --annotation:      #6d3f72;   /* 5,6:1 sur le papier                 */
  --annotation-nuit: #c39bcb;   /* 7,1:1 sur la nuit                   */

  /* ── LES STATUTS ─────────────────────────────────────────────────
     ⚠️ **RÉSERVÉS**, et retendus sur le nouveau fond. Ils disent un
     ÉTAT — jamais une catégorie, jamais « la série n°3 ». Le libellé
     reste obligatoire : jamais la couleur seule. */
  --bon:       #2f6b3a;   /* 5,4:1 */
  --attention: #8a5a00;   /* 4,8:1 */
  --alerte:    #a3231c;   /* 6,1:1 */
  /* Leurs pendants dans la nuit — un vert de 5,4:1 sur du papier tombe
     sous la barre sur du marine. Ne pas réutiliser les trois ci-dessus
     dans un bloc sombre. */
  --bon-nuit:       #8fd39a;
  --attention-nuit: #f0c36b;
  --alerte-nuit:    #f2a09a;

  /* ── LES FILETS ──────────────────────────────────────────────────
     Discrets, et exprimés en alpha : ils se posent aussi bien sur
     `--papier` que sur `--papier-vif` sans être redéfinis deux fois. */
  --filet:      rgba(23,35,63,.12);
  --filet-fort: rgba(23,35,63,.24);
  --filet-nuit: #222e49;

  /* ── LE FOCUS CLAVIER ────────────────────────────────────────────
     Il a son propre jeton parce qu'il ne se supprime jamais : c'est le
     seul repère de qui navigue sans souris. Il vaut l'encre sur le
     papier — et le gabarit le passe à `--lueur` dans un bloc sombre,
     règle posée plus bas. */
  --focus:      #17233f;
  --focus-nuit: #c8d6e8;

  /* ── LA GÉOMÉTRIE ────────────────────────────────────────────────
     ⚠️ **UN SEUL RAYON, ET IL EST PETIT.** La 2.0 en avait trois (22,
     16, 12 px) parce qu'une surface molle a besoin de coins ronds pour
     que l'ombre tourne. Sans relief, un grand rayon n'est plus qu'une
     manière. 4 px suffit à dire « c'est un objet » sans rien décorer. */
  /* ══ LE RELIEF DOUX — 3.2, style arbitré par Franck le 2026-08-17 ═══
     Sur capture : pastilles en pilule qui SORTENT, bloc de texte qui
     S'ENFONCE, ombres bidirectionnelles, une seule source de lumière en
     haut à gauche. C'est le geste de « la matière » (2.0), demandé avec
     les couleurs et les polices de la charte en cours.

     ⚠️ **CE QUI REVIENT DE LA 2.0, ET LA LIGNE QUI NE BOUGE PAS.** La 2.0
     avait un défaut connu : *le relief doux efface la frontière entre ce
     qui s'affiche et ce qui se clique*, parce que **TOUT en portait** —
     cartes, compteurs, titres, boutons, indistinctement. Trois parades le
     tenaient.

     La 3.2 reprend le geste et garde la garde. Deux règles, et c'est
     tout :

       ① **CE QUI SORT AGIT — et rien d'autre ne sort.** `--pose` est
          réservé à ce qui se clique, se tape ou se déplie. Une carte, un
          titre, un bandeau n'en portent JAMAIS. C'est la seule chose qui
          empêche le défaut de la 2.0 de revenir avec son style.
       ② **CE QUI S'ENFONCE CONTIENT.** `--creuse` est libre : un résumé,
          un total, un message, un champ. Aucun risque de confusion — un
          creux n'a jamais eu l'air d'un bouton, et c'est bien un objet
          qui sort qu'on essaie de cliquer, pas un objet qui rentre.

     ⚠️ **LE JOUR OÙ UNE CARTE PORTERA `--pose`, LE DÉFAUT DE LA 2.0 SERA
     DE RETOUR**, à l'identique et pour la même raison. C'est la ligne à
     ne pas franchir, et elle est la contrepartie de ce style. */

  /* Les deux lumières du papier — relevées sur `--papier` : une source en
     haut à gauche, une ombre en bas à droite. */
  --clair-papier: #fbfbf8;
  --sombre-papier: #d2d2ca;
  --pose:        -3px -3px 7px var(--clair-papier), 4px 4px 9px var(--sombre-papier);
  --pose-forte:  -4px -4px 10px var(--clair-papier), 6px 7px 15px var(--sombre-papier);
  --creuse:      inset 3px 3px 7px var(--sombre-papier),
                 inset -3px -3px 7px var(--clair-papier);
  --creuse-douce: inset 2px 2px 5px var(--sombre-papier),
                  inset -2px -2px 5px var(--clair-papier);
  /* Leurs pendants dans la nuit : la source de lumière ne change pas de
     place, seules les valeurs changent de sens. */
  --clair-nuit: #1e2b47;
  --sombre-nuit: #090f1c;
  --pose-nuit:       -3px -3px 7px var(--clair-nuit), 4px 4px 9px var(--sombre-nuit);
  --pose-nuit-forte: -4px -4px 10px var(--clair-nuit), 6px 7px 15px var(--sombre-nuit);
  --creuse-nuit:     inset 3px 3px 7px var(--sombre-nuit),
                     inset -3px -3px 7px var(--clair-nuit);
  /* Alias : `--saisie` était le nom de la 3.1, les gabarits l'écrivent. */
  --saisie:      var(--creuse);
  --saisie-nuit: var(--creuse-nuit);

  /* ⚠️ **LE RAYON MONTE ENCORE, ET IL LE DOIT.** Une ombre douce a besoin
     d'un angle généreux pour tourner : c'est exactement la raison pour
     laquelle la 2.0 portait 22 / 16 / 12 px. `--r` reste franc pour ce qui
     n'a pas de relief ; ce qui en porte prend `--r-doux`, et les pastilles
     la pilule pleine. */
  --r:      6px;
  --r-doux: 16px;
  --r-plein: 999px;   /* les pastilles et jetons d'état, eux seuls */

  /* ⚠️ **LA GOUTTIÈRE EST LA SIGNATURE DE CETTE DIRECTION**, et sa
     largeur est CONSTANTE sur tous les écrans. C'est ce qui fait qu'on
     lit la marge d'un écran à l'autre sans réapprendre où regarder :
     numéro de tour sur la séance, date sur les retours, lettre d'étape
     sur l'accueil. Une valeur différente par page tuerait l'effet. */
  --gouttiere: 3.4rem;
}


/* ══ §ALIAS — LES JETONS DE LA 2.0, LE TEMPS DE LA CONVERSION ══════
   ⚠️ **NE PAS SUPPRIMER CE BLOC AVANT QUE LES QUATORZE ÉCRANS SOIENT
   CONVERTIS.** Il est ce qui permet de poser la feuille aujourd'hui et
   de convertir demain. Le retirer trop tôt rend blanches des pages
   entières — les gabarits non convertis n'écrivent que ces noms-là.

   **Date de péremption : le jour où `DIRECTION-VISUELLE.md` §6 ne porte
   plus aucune ligne « à faire ».** Ce jour-là, supprimer ce bloc, puis
   lancer `python scripts/verif_gabarits.py` : toute page qui redevient
   illisible portait encore un jeton mort. */
:root {
  --police:          var(--mesure);        /* l'ancien nom générique   */
  --police-chiffres: var(--chiffres);

  --matiere:   var(--papier);
  --fond:      var(--papier);
  --fond-doux: var(--papier-vif);
  --bord:      var(--filet);
  --bord-fort: var(--filet-fort);

  --marque:       var(--encre);      /* l'action était bleue, elle est
                                        maintenant pleine encre        */
  --marque-vif:   #26365c;
  --marque-pale:  var(--papier-creux);
  --marque-ombre: transparent;

  /* ⚠️ **`!important` ICI, ET C'EST LE SEUL DU FICHIER — MESURÉ, PAS
     SUPPOSÉ.** La première version de ce bloc écrivait ces sept jetons
     sans lui, en affirmant que les quatorze écrans basculeraient d'un
     coup. **L'aperçu de l'accueil rendu hors serveur le 2026-08-17 a
     montré la page TOUJOURS EN RELIEF**, et la cause est un choix
     documenté de la 2.0 : cette feuille se charge **avant** le `<style>`
     du gabarit, *« pour qu'un gabarit puisse redéfinir un jeton
     localement le temps d'une mise au point »*.

     Or **quatre gabarits redisent les couleurs d'ombre dans leur propre
     `:root`** — `accueil`, `comptes`, `consommation`, `economie` — et
     sept redéfinissent `:root` tout court. À égalité de spécificité, le
     dernier écrit gagne : le gabarit. L'extinction passait dessous.

     `!important` sur une propriété personnalisée l'emporte quel que soit
     l'ordre. C'est un **échafaudage**, pas une manière de faire : il vit
     dans le bloc `§ALIAS`, qui a déjà sa date de péremption, et il
     disparaît avec lui. **Ne pas l'étendre aux autres jetons** — la
     matière et l'accent locaux d'un gabarit doivent rester surchargeables
     jusqu'à sa conversion. */
  --relief:      none !important;
  --creux:       none !important;
  --relief-doux: none !important;
  --creux-doux:  none !important;

  /* Les ombres écrites EN DUR sont éteintes par la couleur : un gabarit
     qui écrit `inset 4px 4px 8px var(--ombre)` obtient une ombre
     transparente — la géométrie subsiste, elle ne peint rien. */
  --lumiere:     transparent !important;
  --ombre:       transparent !important;
  --ombre-forte: transparent !important;

  --r-grand: var(--r);
  --r-moyen: var(--r);
  --r-petit: var(--r);

  --ambre: var(--attention);   /* l'accueil l'appelle ainsi */
}

/* ⚠️ **ÉTEINDRE LE CREUX FAIT DISPARAÎTRE LES CHAMPS DE SAISIE, ET C'EST
   MESURÉ.** L'aperçu de l'accueil du 2026-08-17 a rendu les deux champs
   du bloc Administration **invisibles** : plus de bordure du tout.

   La cause est écrite noir sur blanc dans la feuille 2.0 : *« la bordure
   disparaît — c'est le creux qui dessine le champ »*. Les gabarits posent
   donc `border: 0` et comptent sur l'ombre. Éteindre l'ombre laisse un
   rectangle de la couleur exacte de la page.

   **Un champ de formulaire invisible n'est pas un défaut cosmétique.**
   D'où cette règle, qui rend le filet et **rien d'autre** — pas le fond,
   pour ne pas écraser `.nuit input` d'un écran déjà converti.

   Échafaudage, comme le reste de ce bloc : elle part avec lui. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  border: 1px solid var(--filet-fort) !important;
}


/* ══ LA BASE ═══════════════════════════════════════════════════════
   Ce bloc ne pose que des **surfaces** et des **familles** : aucune
   marge, aucun cadre de mise en page. Les quatorze `<style>` en ligne
   ont chacun leur idée de la largeur et du remplissage, et cette
   feuille perd toujours contre eux à spécificité égale — elle est
   chargée avant. */

body {
  font-family: var(--parole);
  background: var(--papier);
  color: var(--encre);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ **LES TITRES SONT DE LA MESURE, PAS DE LA PAROLE.** Un titre
   nomme un écran ou un bloc : c'est de l'appareillage. Le serif est
   réservé à ce qui a été dit ou écrit par quelqu'un. */
h1, h2, h3, h4, th, label, button, .mesure {
  font-family: var(--mesure);
}
h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
h2, h3 { font-weight: 700; letter-spacing: -.02em; }

/* ── LES DEUX CAMPS, EN CLASSES ────────────────────────────────────
   ⚠️ **UN GABARIT NE PEINT PAS UN BLOC SOMBRE À LA MAIN.** Il pose
   `class="nuit"` et hérite du triplet complet — fond, texte, filets,
   focus. Sans cela, chaque page choisirait son marine, et les trois
   nuances auraient divergé à la première correction faite d'un seul
   côté. C'est exactement ce qui était arrivé au rail en 2.0. */
.nuit {
  background: var(--nuit);
  color: var(--lueur);
  border-radius: var(--r);
}
.nuit h1, .nuit h2, .nuit h3, .nuit strong, .nuit b { color: var(--lueur-vive); }
.nuit a { color: var(--lueur); }
.nuit hr, .nuit td, .nuit th { border-color: var(--filet-nuit); }
.nuit :focus-visible { outline-color: var(--focus-nuit); }

/* ── L'ŒIL — l'étiquette de l'appareil ─────────────────────────────
   La seule majuscule espacée du service, et elle est réservée : elle
   nomme un bloc de mesure, jamais une phrase. */
.oeil {
  font-family: var(--mesure);
  font-size: .67rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--encre-pale);
}
.nuit .oeil { color: var(--lueur-pale); }

/* ── LA GOUTTIÈRE DE MESURE ────────────────────────────────────────
   ⚠️ **C'EST LA SIGNATURE, ET ELLE SE MÉRITE : on n'y écrit QUE de la
   donnée ordonnée.** Un numéro de tour, une lettre d'étape, une date,
   une marque d'intervention. Jamais une icône décorative, jamais un
   libellé — sans quoi elle devient une colonne comme une autre et la
   marge cesse de se lire d'un balayage.

   Le sens est celui-ci : on doit pouvoir **raconter la séance en
   balayant la marge**, sans lire une seule réplique — où l'on en est,
   et à quels tours le tuteur est intervenu. */
.a-gouttiere { display: grid; grid-template-columns: var(--gouttiere) 1fr; }
.marge {
  font-family: var(--mesure);
  font-size: .74rem; font-weight: 700;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.nuit .marge { color: var(--lueur-pale); }

/* La marque du tuteur dans la marge : un trait, pas une pastille. Elle
   dit « il a parlé ICI », à la hauteur exacte du tour concerné. */
.marge-tuteur {
  display: block; width: 2px; height: 1.35rem; margin-top: .3rem;
  background: var(--annotation); border-radius: 2px;
  transform-origin: top;
  animation: marge-parait .5s ease both;
}
@keyframes marge-parait { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── LES TROIS VOIX ────────────────────────────────────────────────
   ⚠️ **LA COULEUR SEULE NE DIT PAS QUI PARLE — LA FORME LE DIT AUSSI**,
   et c'est ce qui fait tenir le système sur un écran monochrome.

     · le COACH  — un filet d'encre. Ce qu'il dit est une marque
                   portée dans la marge : il pointe.
     · le CLIENT — une surface, pas un filet. Sa parole est reçue :
                   elle occupe du terrain, elle ne pointe rien.
     · le TUTEUR — un filet prune. Il annote, comme on annote une copie.

   Le nom de la voix reste écrit au-dessus, en toutes lettres : trois
   signaux pour la même information, dont deux survivent à un écran
   monochrome. C'est la règle du rail de la 2.0, transposée. */
.voix-coach  { border-left: 2px solid var(--encre); padding-left: .85rem; }
.voix-client { background: var(--papier-creux); border-radius: var(--r); padding: .6rem .85rem; }
.voix-tuteur { border-left: 2px solid var(--annotation); padding-left: .85rem; }
.nuit .voix-tuteur { border-left-color: var(--annotation-nuit); }
.nom-voix {
  display: block; margin-bottom: .1rem;
  font-family: var(--mesure); font-size: .63rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-pale);
}
.nuit .nom-voix { color: var(--lueur-pale); }
.voix-tuteur .nom-voix { color: var(--annotation); }
.nuit .voix-tuteur .nom-voix { color: var(--annotation-nuit); }

/* ── LES CHAMPS DE SAISIE ──────────────────────────────────────────
   ⚠️ **LE CREUX A DISPARU, LE FILET REVIENT.** En 2.0 un champ
   s'enfonçait, et c'était la seule chose qui le dessinait. Sans relief,
   il faut un fond légèrement en retrait ET un filet : un fond seul se
   confondrait avec une carte, un filet seul avec un tableau. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  font-family: var(--mesure); font-size: .95rem;
  padding: .6rem .8rem;
  border: 0; border-radius: var(--r-doux);
  color: var(--encre); background: var(--papier-creux);
  /* ⚠️ **LE CHAMP SE CREUSE — 3.1.** Un filet seul ne se distinguait pas
     assez d'un simple cadre : Franck a demandé qu'on VOIE les zones de
     saisie. Le creux est léger et à sens unique — un liseré interne en
     haut, comme une entaille — et c'est l'inverse exact du bouton, qui
     sort. Rien à voir avec le creux de la 2.0, qui cernait l'objet de
     quatre côtés et le faisait disparaître dans la page. */
  box-shadow: var(--creuse);
  transition: box-shadow .14s ease, background .14s ease;
  /* ⚠️ **`box-sizing` EST POSÉ ICI, ET SEULEMENT SUR LES CHAMPS — mesuré
     le 2026-08-17 sur la planche de contrôle.** Un champ en `width: 100%`
     débordait de son bloc : le remplissage et le filet s'ajoutaient à la
     largeur. **Huit gabarits sur quinze posent `* { box-sizing }` chez
     eux ; les sept autres, non** — et c'est chez ceux-là que le défaut
     apparaît.

     Il n'est PAS posé sur `*` : cette feuille ne fait pas de mise en
     page, et basculer le mode de calcul de sept gabarits qui vivent sans
     déplacerait leurs marges sans que personne ait regardé. Le poser sur
     ce que la feuille dessine elle-même n'a, lui, aucun effet de bord.
     *La factorisation générale se fera écran par écran, à la conversion.* */
  box-sizing: border-box;
}
input::placeholder, textarea::placeholder { color: var(--encre-pale); }
/* Le survol renforce le filet : la zone se déclare AVANT qu'on clique.
   C'est le pendant du soulèvement des boutons, en plus discret — un champ
   n'a pas à sauter sous le curseur, il a à se signaler. */
/* Le survol CREUSE un peu plus : la zone se déclare avant qu'on clique. */
input:hover, select:hover, textarea:hover { box-shadow: var(--creuse), inset 0 0 0 1px var(--sombre-papier); }
.nuit input:hover, .nuit select:hover, .nuit textarea:hover {
  box-shadow: var(--creuse-nuit), inset 0 0 0 1px var(--sombre-nuit); }
/* ⚠️ **LA ZONE DE RÉPLIQUE EST LA SEULE EXCEPTION** : ce qu'on y écrit
   sera dit à un client, donc c'est de la parole. Le gabarit de séance
   pose `class="parole"` sur son `<textarea>`. */
textarea.parole { font-family: var(--parole); font-size: 1rem; }

/* ⚠️ **LE CHAMP NE CHANGE PLUS DE MATIÈRE AU FOCUS — 2026-08-17.** Il
   s'éclaircissait et son creux s'adoucissait : deux changements de plus
   au moment du clic, alors que Franck demande qu'il **n'en subisse
   aucun**. Le creux reste donc celui du repos, et l'arrondi avec.

   *Ce qui est perdu — le champ qui « cesse d'attendre, et reçoit » — était
   une nuance ; ce qui est gagné est la stabilité de l'objet sous le doigt.
   Le contour de focus dit déjà où l'on est.* */

.nuit input, .nuit select, .nuit textarea {
  background: var(--nuit-creux); color: var(--lueur);
  border: 0;
  box-shadow: var(--creuse-nuit);
}
.nuit input:focus, .nuit select:focus, .nuit textarea:focus {
  background: var(--nuit-creux);
  box-shadow: var(--creuse-nuit);
}

/* ── LES BOUTONS ───────────────────────────────────────────────────
   ⚠️ **LE PROBLÈME D'AFFORDANCE DE LA 2.0 DISPARAÎT AVEC LE RELIEF, ET
   IL N'Y A PLUS DE PARADE À TENIR** : ce qui agit est PLEIN, le reste
   ne l'est pas. Un seul signal, sans exception, sur tous les écrans.

   L'action principale est pleine encre — plus bleue. Le bleu était la
   marque ; la marque est maintenant le fond de la nuit, et deux bleus
   concurrents se seraient disputés le même sens. */
.bouton, button.principal {
  font-family: var(--mesure); font-size: .88rem; font-weight: 600;
  padding: .62rem 1.1rem;
  border: 0; border-radius: var(--r-doux); cursor: pointer;
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--encre); color: var(--papier-vif);
  /* ⚠️ **LE BOUTON EST POSÉ SUR LA PAGE — 3.1.** Une ombre courte, à une
     seule direction : il flotte d'un millimètre, pas de dix. Au survol il
     se soulève, à l'appui il rentre. **C'est le seul objet du service qui
     bouge sous le doigt**, et c'est ce qui le désigne comme manipulable
     sans qu'aucune couleur ait à le dire. */
  box-shadow: var(--pose);
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}
/* ⚠️ **LE SURVOL SOULÈVE — 3.1, correction de Franck : *« intéragir au
   survol afin de montrer que le bouton est interactif »*.** L'ombre
   renforcée seule ne se voyait pas : elle change de deux pixels sous un
   objet qu'on ne regarde pas encore. **Un objet qui BOUGE sous le curseur
   se remarque sans être regardé** — c'est le seul signal qui n'a pas
   besoin d'attention pour fonctionner.

   Un pixel vers le haut, pas trois : au-delà, la page tremble au passage
   de la souris. Et `prefers-reduced-motion` ramène la transition à
   0,001 ms — le bouton saute alors sans glisser, ce qui reste juste. */
.bouton:hover, button.principal:hover { background: var(--marque-vif);
                                        box-shadow: var(--pose-forte);
                                        transform: translateY(-1px); }
/* L'appui ENFONCE — un pixel, pas plus. Le geste doit se sentir, pas se
   voir. */
.bouton:active, button.principal:active,
button.secondaire:active, button.tuteur:active {
  transform: translateY(1px); box-shadow: var(--creuse);
}
/* L'action secondaire n'est pas pleine : elle porte un filet ET le même
   relief. Ce qui la distingue de la principale est la couleur, pas la
   manipulabilité — les deux se cliquent autant l'une que l'autre. */
/* ⚠️ **L'ACTION SECONDAIRE N'A PLUS DE FILET, ELLE A LE MÊME RELIEF.**
   C'est ce que montre la capture : les onglets non retenus SORTENT de la
   matière, sans bordure. Ce qui la distingue de la principale est la
   couleur — l'une est pleine d'encre, l'autre est de la matière nue. */
.bouton.second, button.secondaire {
  background: var(--papier); color: var(--encre-douce);
  box-shadow: var(--pose);
}
.bouton.second:hover, button.secondaire:hover {
  color: var(--encre);
  box-shadow: var(--pose-forte);
  transform: translateY(-1px);
}
.nuit .bouton, .nuit button.principal {
  background: var(--lueur); color: var(--nuit); box-shadow: var(--pose-nuit); }
.nuit .bouton:hover, .nuit button.principal:hover {
  box-shadow: var(--pose-nuit-forte); transform: translateY(-1px); }
.nuit .bouton.second, .nuit button.secondaire {
  background: var(--nuit); color: var(--lueur);
  box-shadow: var(--pose-nuit); }

/* Un dépliant se manipule aussi : il reçoit le même geste, en plus
   discret — il ouvre, il n'engage rien. */
summary { cursor: pointer; border-radius: var(--r-doux); }
summary:hover { color: var(--encre); }

/* ⚠️ **LE CONTOUR DE FOCUS EST POSÉ ICI POUR TOUT LE SERVICE**, et il
   ne se négocie pas. Un gabarit peut le redéfinir ; aucun n'a besoin de
   le réinventer. */
/* ⚠️ **`border-radius` A ÉTÉ RETIRÉ D'ICI — 2026-08-17, demande de
   Franck : « lorsque l'on clique, aucune modification graphique ne doit
   être faite sur le champ, afin de garder les arrondis ».**

   Cette règle portait `border-radius: 2px`. Or un `border-radius` posé
   dans un bloc `:focus-visible` s'applique **à l'élément lui-même**, pas
   au contour : le champ perdait donc ses 16 px d'arrondi au moment précis
   où on le touchait, et redevenait presque carré. Le défaut venait de la
   2.0, où le rayon des champs était de 12 px et l'écart peu visible.

   **Le contour, lui, reste et ne se négocie pas** : c'est le seul repère
   de qui navigue sans souris. Il ne déforme rien — `outline` se dessine
   EN DEHORS de la boîte et épouse désormais l'arrondi du champ. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

/* ── LES TABLEAUX ──────────────────────────────────────────────────
   Les filets restent : un tableau sans séparation de lignes n'est plus
   un tableau. L'en-tête est de la mesure, et les chiffres s'alignent. */
table { border-collapse: collapse; }
th { font-family: var(--mesure); color: var(--encre-pale);
     font-size: .68rem; font-weight: 700;
     letter-spacing: .12em; text-transform: uppercase; }
td, th { border-bottom: 1px solid var(--filet); }
td, .valeur, .chiffre { font-variant-numeric: tabular-nums; }
/* Un tableau est de la donnée : son contenu est de la mesure, sauf une
   colonne de texte libre, que le gabarit repasse en `.parole`. */
td { font-family: var(--mesure); font-size: .9rem; }

/* ⚠️ **UN TABLEAU DÉBORDE SUR UN TÉLÉPHONE, ET C'EST LA PAGE ENTIÈRE QUI
   PORTE ALORS UN ASCENSEUR HORIZONTAL** — mesuré le 2026-08-17 :
   `seances.html` faisait 491 px dans 375. Le défaut est le même que celui
   du rail, qui avait vécu quatre jours dans le dépôt.

   Le tableau devient sa propre zone défilante. **C'est lui qui défile, pas
   la page** : un ascenseur sur le corps décale tout, en-tête comprise, et
   donne l'impression d'un site cassé ; un ascenseur sur le tableau se
   comprend au premier geste.

   ⚠️ `display: block` casse l'alignement des colonnes entre `thead` et
   `tbody` — c'est le prix connu de ce remède, et il ne se paie que sous
   48 rem, là où un tableau à cinq colonnes était de toute façon illisible.
   Cinq écrans en dépendent : séances, comptes, consommation, économie,
   tarification. */
@media (max-width: 48rem) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { white-space: nowrap; }
}
td.parole { font-family: var(--parole); font-size: .97rem; }

/* ══ LE RELIEF RENDU AUX BOUTONS DES GABARITS — 3.3, 2026-08-17 ═══════
   ⚠️ **CETTE RÈGLE EXISTE PARCE QUE LA CONVERSION DES DOUZE DERNIERS
   ÉCRANS A ÉTÉ MÉCANIQUE.** Elle a supprimé 31 reliefs — c'était le bon
   défaut : *un relief est supprimé, pas converti*, une carte qui sort
   ayant l'air d'un bouton géant. Mais elle les a supprimés AUX BOUTONS
   AUSSI, qui eux doivent sortir.

   Plutôt que de les rendre un par un dans douze fichiers, on les rend
   ici : **tout élément dont la classe porte « bouton » agit**, par
   construction — c'est la convention de nommage du service depuis
   l'origine, `bouton-action`, `bouton-rapide`, `bouton-valider`,
   `bouton-accueil`, `bouton-partenaire`…

   ⚠️ **LA SPÉCIFICITÉ EST BASSE À DESSEIN** : un gabarit qui a une idée
   précise du relief de son bouton la garde, puisque son `<style>` est
   chargé après. Ici on donne un socle, on n'impose rien. */
/* ⚠️ **UN CHOIX EN RADIO SE MANIPULE AUSSI.** Les gabarits les habillent
   en `<label>` porteur d'un `<input type="radio">` masqué — le formulaire
   de retour, le paramétrage de séance. Ils n'ont pas « bouton » dans leur
   classe et la passe mécanique les avait donc laissés plats, alors qu'ils
   se cliquent. Le sélecteur les attrape par leur STRUCTURE, qui, elle, ne
   varie pas d'un gabarit à l'autre. */
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) {
  border-radius: var(--r-doux); box-shadow: var(--pose);
  padding: .45rem 1.05rem; cursor: pointer;
  transition: box-shadow .16s ease, transform .12s ease;
}
label:has(> input[type="radio"]):hover,
label:has(> input[type="checkbox"]):hover {
  box-shadow: var(--pose-forte); transform: translateY(-1px);
}
/* Le choix RETENU s'enfonce : il ne propose plus, il est acquis. */
label:has(> input:checked) { box-shadow: var(--creuse); transform: none;
                             color: var(--encre); font-weight: 600; }

[class*="bouton"], a.bouton, button:not([class]) {
  border-radius: var(--r-doux);
  box-shadow: var(--pose);
  transition: box-shadow .16s ease, transform .12s ease, background .16s ease;
}
[class*="bouton"]:hover, a.bouton:hover, button:not([class]):hover {
  box-shadow: var(--pose-forte); transform: translateY(-1px);
}
[class*="bouton"]:active, a.bouton:active, button:not([class]):active {
  transform: translateY(1px); box-shadow: var(--creuse);
}
/* ⚠️ **LE RAIL EST DE LA NUIT SANS PORTER LA CLASSE `nuit`** — il a la
   sienne, `.rail`, depuis 2026-08-10. Sans cette ligne, le bouton « Se
   déconnecter » recevait le relief du PAPIER : un halo clair au milieu du
   marine. Vu à l'écran le 2026-08-17. */
.rail button, .rail button:hover, .rail button:active { box-shadow: none;
                                                        transform: none; }
.nuit [class*="bouton"] { box-shadow: var(--pose-nuit); }
.nuit [class*="bouton"]:hover { box-shadow: var(--pose-nuit-forte); }
.nuit [class*="bouton"]:active { box-shadow: var(--creuse-nuit); }

/* ⚠️ **ET LE MOUVEMENT DISPARAÎT POUR QUI L'A DEMANDÉ.** Le bloc
   `prefers-reduced-motion` de fin de fichier ramène les durées à 0,001 ms,
   mais un `transform` figé reste un déplacement : on l'annule ici. */
@media (prefers-reduced-motion: reduce) {
  [class*="bouton"]:hover, [class*="bouton"]:active,
  a.bouton:hover, a.bouton:active { transform: none; }
}


/* ══ CE QUI DÉSAMORCE LE STYLE QUAND IL LE FAUT ════════════════════
   ⚠️ **NE PAS SUPPRIMER CES DEUX BLOCS EN CROYANT NETTOYER.** */

/* Qui a demandé plus de contraste à son système reçoit des filets nets
   et des encres poussées à fond. Le sélecteur d'attribut attrape les
   objets nommés par les gabarits, comme en 2.0. */
@media (prefers-contrast: more) {
  :root { --encre-pale: #46506b; --lueur-pale: #c8d6e8;
          --filet: rgba(23,35,63,.45); --filet-fort: rgba(23,35,63,.7); }
  [class*="carte"], [class*="bloc"], [class*="panneau"], [class*="option"],
  input, select, textarea, button, table, .nuit {
    border: 1px solid var(--encre-douce);
  }
  .nuit { border-color: var(--lueur-pale); }
}

/* Qui a demandé moins d'animations n'en reçoit aucune — y compris la
   marque du tuteur, qui se pose alors franche et immobile. C'est le bon
   comportement, pas un effet de bord. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
}


/* ══ À L'IMPRESSION ════════════════════════════════════════════════
   ⚠️ **LA NUIT NE S'IMPRIME PAS, ET C'EST PLUS GRAVE QUE LE RELIEF DE
   LA 2.0.** Une ombre douce sortait en aplat gris sale ; un fond marine
   sort en **aplat noir plein page**, vide la cartouche et rend le texte
   clair illisible. L'export PDF de la simulation économique existe
   depuis le 2026-08-12 : ce bloc n'est pas facultatif.

   Le papier redevient blanc, la nuit redevient blanche AUSSI, et les
   filets reviennent — sur le papier, la hiérarchie se refait par le
   trait. */
@media print {
  :root {
    --papier: #fff; --papier-vif: #fff; --papier-creux: #fff;
    --nuit: #fff; --nuit-clair: #fff; --nuit-creux: #fff;
    --encre: #000; --encre-douce: #333; --encre-pale: #555;
    --lueur: #000; --lueur-pale: #555; --lueur-vive: #000;
    --annotation: #000;
    --filet: #999; --filet-fort: #666; --filet-nuit: #999;
    /* Le relief fonctionnel ne s'imprime pas : sur papier, rien ne se
       clique, et une ombre y sort en aplat gris sale. */
    --pose: none; --pose-forte: none; --saisie: none;
    --pose-nuit: none; --pose-nuit-forte: none; --saisie-nuit: none;
  }
  body { background: #fff; }
  .nuit {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999;
  }
  .nuit h1, .nuit h2, .nuit h3, .nuit strong, .nuit b { color: #000 !important; }
  /* La voix du tuteur perd sa teinte : elle garde son filet, plus épais,
     pour rester distincte en noir et blanc. */
  .voix-tuteur { border-left-width: 3px; border-left-color: #000; }
  [class*="carte"], [class*="bloc"], [class*="panneau"] {
    box-shadow: none !important; border: 1px solid #999;
  }
}