/* Les SEULES règles ajoutées au système visuel de la maquette.
   Chargée APRÈS tribune.css, volontairement.

   public/tribune.css est l'extrait octet pour octet du bloc <style> de
   design/Tribune - Maquette v2 (blocs de couleur).html. Rien ne s'y ajoute :
   c'est le contrat visuel, trois pièges de mise en page y sont déjà corrigés, et
   l'ordre de ses règles compte (le bloc téléphone à la fin annule des
   white-space:nowrap déclarés plus haut). Ce fichier-ci existe pour que ce
   fichier-là n'ait jamais à être touché.

   Les rails de la maquette sont des <button data-go>, parce qu'une maquette
   change d'écran en JavaScript. Le produit fait du rendu serveur : ce sont des
   <a href>. Un <a> hérite du soulignement et de la couleur de lien du
   navigateur, que .nav ne neutralise pas puisqu'il était écrit pour un
   <button>. D'où ces deux déclarations, et rien de plus. */

a.nav {
  text-decoration: none;
  color: var(--fg-2);
}

/* Même raison pour les boutons d'action de la maquette devenus des liens
   (.btn était écrit pour <button>). */
a.btn {
  text-decoration: none;
}

/* Et pour la pastille « Aide » de la barre du haut : .chip aussi était écrit
   pour un <button>, donc un <a> y récupère le soulignement du navigateur. */
a.chip {
  text-decoration: none;
}

/* Écran Aide. La maquette n'avait pas d'écran d'aide, donc aucune règle pour
   une liste numérotée : sans celles-ci, les <ol> prennent les marges par
   défaut du navigateur et les étapes se collent au bord de la carte.
   Les cartes s'empilent en UNE colonne, volontairement : une aide se lit de
   haut en bas, et deux colonnes obligent l'oeil à choisir un ordre. */
.aide {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  max-width: 760px;
}

.aide ol {
  margin: 12px 0 0;
  padding-left: 24px;
  display: grid;
  gap: 8px;
}

.aide .pad > p + p {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ *
 * LES <select>. Trou du système visuel, mesuré le 2026-09-10.
 *
 * tribune.css style `.field input` (54 px, pilule, bordure de ligne, fond de
 * surface) et `.field textarea`, mais JAMAIS `.field select`. Conséquence
 * mesurée sur l'écran d'une réunion à 1440 px : 34 selects sur 34 avec un
 * rayon de 0, hauteur minimale de 19 px, à côté d'un champ texte de 54 px
 * dans le MÊME formulaire. Sur l'écran Utilisateurs : 21 sur 21.
 *
 * Le trou s'était déjà fait sentir : cinq endroits le contournaient à la main
 * en recopiant la recette dans un attribut style= (views/screens/centre.eta,
 * views/screens/depot.eta) ou en détournant `class="chip"`
 * (views/screens/recherche.eta). Ces contournements peuvent maintenant
 * disparaître ; la règle vit ici, en un seul endroit.
 *
 * DEUX traitements, parce que les selects vivent dans deux contextes que
 * mesurer a révélés : sur l'écran Utilisateurs, 3 selects sont dans un
 * `.field` et 18 dans une cellule de tableau dont la ligne fait 80 px. Une
 * pilule de 54 px imposée partout aurait fait gonfler chaque ligne.
 *
 * `appearance` n'est PAS mis à none : on garde le chevron natif du
 * navigateur. Le remplacer aurait demandé une image en data:URI, alors que
 * DESIGN.md dit « Textures en CSS uniquement. Aucune image. »
 * ------------------------------------------------------------------ */

/* Dans un formulaire : identique au champ texte voisin, au pixel près.
   width ET max-width : sans max-width, une longue étiquette d'option élargit
   le select au-delà de sa colonne de grille. C'est le défaut qu'a vu Red —
   « Insérer après » faisait 300 px dans un parent de 227, donc 73 px dans le
   vide, hors de la carte. */
.field select {
  min-height: 54px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 18px;
  font: inherit;
  color: inherit;
  width: 100%;
  max-width: 100%;
}

.field select:focus {
  outline: 3px solid var(--sun-deep);
  outline-offset: 0;
}

/* Dans un tableau : même langage, hauteur compacte. 40 px tient dans une
   ligne de 80 px sans la déformer, et reste au-dessus des 19 px natifs.
   Pas de width:100% ici : la colonne se dimensionne sur son contenu, et
   étirer le contrôle décalerait les colonnes voisines. */
td select,
th select {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 14px;
  font: inherit;
  color: inherit;
  max-width: 100%;
}

td select:focus,
th select:focus {
  outline: 3px solid var(--sun-deep);
  outline-offset: 0;
}

/* Les cases à cocher étaient laissées natives, à 13 x 13 px, à côté de
   contrôles de 54 px. accent-color les repeint dans l'accent du thème sans
   reconstruire la case, donc sans perdre l'état indéterminé ni le
   comportement clavier. */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--sun-deep);
  flex: none;
}

/* La bascule du droit de vote de l'écran Utilisateurs est un <button> dans un
   <form> htmx. Le formulaire ne doit rien ajouter à la mise en page du tableau :
   sans ça, il introduit une boîte de bloc dans une cellule alignée à droite et
   la colonne se décale. */
form.inline {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Zone de messages d'erreur des fragments htmx. Elle est vide la plupart du
   temps et ne doit alors occuper aucune place, sinon chaque ligne du tableau
   porte un blanc de 20 px pour rien. */
.msg:empty {
  display: none;
}

.msg {
  margin-top: 12px;
}