/*
 * ═══════════════════════════════════════════════════════════════════════════
 * regard pro — LE SYSTÈME DE DESIGN, APPLIQUÉ
 *
 * Anatomie des composants de DESIGN.md § 7 et § 8, écrite avec les jetons de
 * « jetons.css ». Aucune valeur en dur : tout passe par une variable.
 *
 * ───────────────────────────────────────────────────────────────────────────
 * TOUT EST SOUS PORTÉE « .systeme »
 *
 * Un écran adopte le système en passant `systeme: true` à son gabarit. Les
 * autres gardent l'habillage actuel, au pixel près.
 *
 * C'est ce qui permet de juger un écran pilote sur pièce sans faire bouger les
 * huit autres, et de revenir en arrière en retirant un drapeau — le projet n'a
 * pas de gestion de versions, une bascule générale serait irréversible.
 *
 * Le jour où tous les écrans auront basculé : retirer « .systeme » de ces
 * sélecteurs, supprimer le :root de style.css, et fondre ce fichier dedans.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────────────────────────────────────
 * Le conteneur
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--e-6) var(--e-5);
  font-size: var(--t-corps);
  font-weight: var(--g-normal);
  line-height: var(--i-corps);
}

.systeme h1 {
  font-size: var(--t-titre);
  line-height: var(--i-titre);
  font-weight: var(--g-gras);
  letter-spacing: -0.02em;
}

.systeme h2 {
  font-size: var(--t-section);
  line-height: var(--i-section);
  font-weight: var(--g-demi);
  letter-spacing: -0.01em;
}

/* Le texte d'introduction d'un écran : une seule phrase, largeur de lecture. */
.systeme .chapeau {
  margin-top: var(--e-2);
  max-width: var(--largeur-lecture);
  color: var(--gris);
}

.systeme .titre-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.systeme .secondaire {
  font-size: var(--t-secondaire);
  line-height: var(--i-secondaire);
  color: var(--gris);
  font-weight: var(--g-normal);
}

/* ⚠️ « --gris-clair » est SOUS le seuil AA : réservé à ce qui ne porte
   aucune information — un tiret d'absence de valeur, un espace réservé. */
.systeme .absent,
.systeme .manquant { color: var(--gris-clair); }

.systeme .etiquette-jeton {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Compteurs — § 4.2, grille auto-ajustable
 *
 * Compter les cartes dans le gabarit pour choisir une classe se trompe dès
 * qu'une carte devient conditionnelle. C'est arrivé, deux fois.
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .compteurs {
  display: grid;
  /* « min(100%, 190px) » : sous 190 px de large, la grille passe a UNE colonne
     au lieu d'ecraser les cartes. Mesure a 375 px : les compteurs tombaient a
     157 px et « 4 960,00 € » se coupait sur trois lignes. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px;
  margin-top: var(--e-5);
}
.systeme .compteurs > * { min-width: 0; }

.systeme .compteur {
  padding: var(--e-5);
  /* ⚠️ Teintes dérivées de l'ACCENT DU CLUB, relevées dans le DOM de Regard AI :
     bordure à 18 %, fond à 6 % qui s'éteint en diagonale. C'est ce qui donne à
     ses blocs de chiffres leur air reconnaissable, et nous ne l'avions nulle
     part : nos compteurs étaient des rectangles blancs sur fond crème. */
  border: var(--trait) solid color-mix(in srgb, var(--accent) 18%, var(--ligne));
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--accent) 6%, var(--blanc)),
    var(--blanc)
  );
  border-radius: var(--rayon);
}

/* ⚠️ LIBELLÉ ET VALEUR SUR LA MÊME LIGNE DE BASE, AUX DEUX BORDS.
   C'est LE trait du motif de Regard AI, et le seul que je n'avais nulle part :
   nos compteurs empilaient la valeur PUIS l'étiquette, l'une sous l'autre.
   Le libellé porte l'accent du club ; la valeur reste en encre. */
.systeme .compteur-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.systeme .compteur .nombre {
  /* ⚠️ OUTFIT, PAS DM MONO — mesuré dans le DOM de Regard AI.
     Le produit écrivait le MÊME chiffre de deux façons : `<strong>` en DM Mono
     18 px sur six écrans, `.nombre` en Outfit 30 px sur trois autres, parce que
     seul « style.css » stylait `.nombre`. Un seul nom, une seule règle. */
  font-family: var(--sans);
  font-size: var(--t-chiffre);
  font-weight: var(--g-noir);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  /* Un montant ne se coupe jamais entre le nombre et sa devise. */
  white-space: nowrap;
  text-align: right;
}

.systeme .compteur .etiquette {
  /* `min-width: 0` : sans lui, un libellé long (« quatre mille sept cent… »)
     pousse la valeur hors de la carte au lieu de passer à la ligne. */
  min-width: 0;
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: var(--g-gras);
  line-height: var(--i-petit);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--accent-lisible);
}

/* La ligne de précision — facultative. Elle dit ce que le chiffre ne dit pas
   tout seul : un reste, un dénominateur, une échéance. */
.systeme .compteur .precision {
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  color: var(--gris);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--g-normal);
}

/* Un seul cas colore une valeur : de l'argent en retard, ou un reste à livrer. */
.systeme .compteur-erreur { border-color: var(--etat-retard-bord); }
.systeme .compteur-erreur .nombre { color: var(--etat-retard-texte); }

/* Imbriqué dans une carte, le compteur se resserre — Regard AI passe de `p-4`
   à `p-3` dès qu'une carte en contient d'autres. */
.systeme .carte-cockpit .compteurs { margin-top: var(--e-4); gap: var(--e-2); }
.systeme .carte-cockpit .compteur { padding: var(--e-3); }

/* ───────────────────────────────────────────────────────────────────────────
 * Boutons — § 7.1
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .bouton,
.systeme .bouton-discret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--h-bouton-m);
  padding: 0 20px;
  font-family: inherit;
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
  text-decoration: none;
  border: none;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: opacity var(--duree) var(--courbe),
              background var(--duree) var(--courbe);
}

/* L'accent, ici et à deux autres endroits seulement. */
.systeme .bouton { background: var(--accent); color: var(--texte-sur-accent); }
.systeme .bouton-discret {
  background: var(--blanc);
  color: var(--encre);
  border: var(--trait) solid var(--ligne);
}

.systeme .bouton:hover,
.systeme .bouton-discret:hover { opacity: 0.92; }

.systeme .bouton:focus-visible,
.systeme .bouton-discret:focus-visible,
.systeme .lien-bouton:focus-visible,
.systeme .pastille:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

.systeme .bouton[disabled] { opacity: 0.45; cursor: default; }

/* Une action tertiaire, en apparence de lien — mais à 40 px de haut. */
.systeme .lien-bouton {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  padding: 0 var(--e-2);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--t-secondaire);
  color: var(--gris);
  text-decoration: underline;
  cursor: pointer;
  border-radius: var(--rayon);
}
.systeme .lien-bouton:hover { color: var(--encre); background: var(--papier); }

.systeme .petit-lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  font-size: var(--t-secondaire);
  color: var(--gris);
}
.systeme .petit-lien:hover { color: var(--encre); }

/* ───────────────────────────────────────────────────────────────────────────
 * Pastilles de filtre
 *
 * L'actif est en ENCRE, jamais en accent : un filtre actif en accent devient
 * illisible avec un accent pâle et hurle avec un accent saturé.
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.systeme .pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--h-cible);
  padding: 0 14px;
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
  text-decoration: none;
  color: var(--gris);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-plein);
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.systeme .pastille:hover { color: var(--encre); border-color: var(--gris); }
/* Pas de trait d'accent ici : sur le fond encre, un accent sombre tombe a
   1,41:1 — un ornement que la moitie des clubs ne verrait pas. Le noir suffit
   a dire « actif ». Dans la barre de navigation, ou le trait porte vraiment la
   signature du club, il est pose sur le fond clair : voir style.css. */
.systeme .pastille.active {
  background: var(--encre);
  color: var(--blanc);
  border-color: var(--encre);
}
.systeme .pastille .compte {
  font-family: var(--mono);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.systeme .pastille-alerte { border-color: var(--etat-retard-bord); color: var(--etat-retard-texte); }
.systeme .pastille-alerte.active {
  background: var(--etat-retard-texte);
  border-color: var(--etat-retard-texte);
  color: var(--blanc);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Étiquettes d'état — § 7.2, palette FIXE
 *
 * Toujours accompagnées de leur libellé écrit : daltonisme, écran mal réglé,
 * impression en noir et blanc — la même information doit passer.
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  font-weight: var(--g-demi);
  border-radius: var(--rayon-plein);
  border: var(--trait) solid;
  white-space: nowrap;
}

.systeme .etat-fa-brouillon,
.systeme .etat-fa-annulee {
  color: var(--etat-neutre-texte);
  background: var(--etat-neutre-fond);
  border-color: var(--etat-neutre-bord);
}
.systeme .etat-fa-emise {
  color: var(--etat-alerte-texte);
  background: var(--etat-alerte-fond);
  border-color: var(--etat-alerte-bord);
}
.systeme .etat-fa-partiellement_payee {
  color: var(--etat-info-texte);
  background: var(--etat-info-fond);
  border-color: var(--etat-info-bord);
}
.systeme .etat-fa-payee {
  color: var(--etat-succes-texte);
  background: var(--etat-succes-fond);
  border-color: var(--etat-succes-bord);
}

/* Le retard : le SEUL signal de cet écran. */
.systeme .en-retard { color: var(--etat-retard-texte); font-weight: var(--g-demi); }
.systeme .complet { color: var(--etat-succes-texte); font-weight: var(--g-demi); }

/* ───────────────────────────────────────────────────────────────────────────
 * Tableau — § 7.4, lignes de 40 px
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .liste {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--e-5);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  overflow: hidden;
}
.systeme .liste th {
  text-align: left;
  padding: 10px var(--e-4);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
  border-bottom: var(--trait) solid var(--ligne);
}
.systeme .liste td {
  padding: 11px var(--e-4);
  font-size: var(--t-corps);
  border-bottom: var(--trait) solid var(--ligne);
  vertical-align: middle;
}
.systeme .liste tbody tr:last-child td { border-bottom: 0; }
.systeme .liste tbody tr { transition: background var(--duree) var(--courbe); }
.systeme .liste tbody tr:hover { background: var(--papier); }

.systeme .liste .principal { font-weight: var(--g-demi); }
.systeme .liste .principal a { color: var(--encre); text-decoration: none; }
.systeme .liste .principal a:hover { text-decoration: underline; }

/* ─── LA LIGNE ENTIÈRE EST LA CIBLE ────────────────────────────────────────
 *
 * Mesuré : le lien de référence faisait 18 px de haut, celui du partenaire
 * 19 px — très loin du plancher de 40 px. Un lien en ligne dans une cellule
 * n'est pas cliquable au pouce, et c'est le geste le plus fréquent de cet
 * écran.
 *
 * Le lien principal s'étire sur toute la ligne : la cible devient la ligne
 * elle-même. Motif standard, accessible — le lien reste un vrai lien pour le
 * clavier et le lecteur d'écran, seule sa surface de clic change.
 * ───────────────────────────────────────────────────────────────────────── */
.systeme .liste tbody tr { position: relative; }
.systeme .liste td.principal > a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ⚠️ TOUT CE QUI EST CLIQUABLE DANS UNE LIGNE DOIT REPRENDRE LA MAIN
   ------------------------------------------------------------------------
   La surface étirée ci-dessus recouvre la ligne ENTIÈRE, boutons compris. Un
   bouton posé dans une cellule sans reprendre la main est parfaitement visible,
   parfaitement stylé — et parfaitement inerte : le clic part sur la fiche.

   Le défaut est apparu sur « Aujourd'hui » : « Marquer comme faite », le bouton
   le plus cliqué de l'écran d'accueil, ne faisait rien. Aucun test ne pouvait le
   voir, et à l'écran tout paraissait normal. Vérifié par
   `document.elementFromPoint` au centre du bouton.

   La règle vise donc la CELLULE d'action, pas une classe de lien : une nouvelle
   commande y sera couverte sans qu'on ait à y penser. */
.systeme .liste td.actions,
.systeme .liste td.actions form {
  position: relative;
  z-index: 1;
}

/* Le bouton d'une ligne est une cible comme une autre : 40 px, jamais moins.
   Mesuré à 20 px avant correction — la moitié du plancher. */
.systeme .liste td.actions button,
.systeme .liste td.actions .lien-bouton {
  min-height: var(--h-cible);
  padding: 0 12px;
  font-size: var(--t-secondaire);
  font-weight: var(--g-demi);
  color: var(--encre);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
  cursor: pointer;
}

.systeme .liste td.actions button:hover { border-color: var(--gris); }

.systeme .liste td.actions button:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* Les liens SECONDAIRES d'une ligne doivent rester atteignables par-dessus la
   surface étirée, et atteindre eux aussi les 40 px. */
.systeme .liste td .lien-discret {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
}
.systeme .liste .secondaire { display: block; }

/* ⚠️ « display: block » vise le rappel placé SOUS un nom. Sur un <td>, il sort
   la cellule de la mise en table : sa bordure basse flotte au milieu de la
   ligne. Défaut déjà rencontré sur la liste des packs — il revient dès qu'on
   réécrit la règle ailleurs. */
.systeme .liste td.secondaire { display: table-cell; }
.systeme .liste .a-droite { text-align: right; }
.systeme .liste .montant {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ⚠️ « border: 0 » : la feuille historique donne une bordure basse a ce lien
   pour le souligner. Combinee a la marge negative qui lui donne ses 40 px,
   elle dessinait un trait parasite au milieu de la carte en petit ecran. */
.systeme .lien-discret { color: var(--gris); text-decoration: none; border: 0; }
.systeme .lien-discret:hover { color: var(--encre); text-decoration: underline; }

.systeme .denombrement {
  margin-top: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
}

/* Sous 760 px : l'en-tête disparaît, chaque cellule porte son intitulé.
   Sans lui, un « 1 » isolé ne veut plus rien dire — défaut constaté. */
@media (max-width: 760px) {
  .systeme .liste thead { display: none; }
  .systeme .liste tr { display: block; border-bottom: var(--trait) solid var(--ligne); }
  .systeme .liste tr:last-child { border-bottom: 0; }
  .systeme .liste td { display: block; border: 0; padding: var(--e-1) var(--e-4); }
  .systeme .liste td:first-child { padding-top: var(--e-3); }
  .systeme .liste td:last-child { padding-bottom: var(--e-3); text-align: left; }
  .systeme .liste td[data-intitule]::before {
    content: attr(data-intitule);
    display: block;
    margin-bottom: 1px;
    font-family: var(--mono);
    /* ⚠️ Écrit à 10 px, SOUS le plancher de 11 — et sur téléphone, là où on lit
       le plus mal. C'est le rappel d'intitulé de colonne : le retirer rendrait
       la cellule incompréhensible, le rendre illisible revient au même. */
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Filtre par partenaire
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .filtre-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-4);
}
.systeme .filtre-ligne .etiquette-champ {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
}
.systeme .filtre-ligne select {
  min-height: var(--h-champ);
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--t-corps);
  color: var(--encre);
  background: var(--champ);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
}
.systeme .filtre-ligne select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Messages et état vide — § 7.7 et § 7.8
 * ─────────────────────────────────────────────────────────────────────────── */
.systeme .confirmation {
  margin-bottom: var(--e-5);
  padding: 14px 18px;
  border-radius: var(--rayon);
  border-left: 3px solid var(--etat-succes-texte);
  background: var(--etat-succes-fond);
  color: var(--etat-succes-texte);
}

.systeme .vide {
  margin-top: var(--e-5);
  padding: 48px var(--e-5);
  text-align: center;
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  color: var(--gris);
}
.systeme .vide a { color: var(--encre); }

/* ───────────────────────────────────────────────────────────────────────────
 * Écran « Aujourd'hui »
 *
 * Les alertes sont des CARTES, pas des bandeaux empilés : un bandeau pleine
 * largeur se lit comme un message système qu'on chasse, une carte se lit comme
 * un dossier à traiter. Chacune porte son libellé écrit — jamais la couleur
 * seule (daltonisme, écran mal réglé, impression en noir et blanc).
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .alertes {
  display: grid;
  /* Même garde que les compteurs : sous 375 px, une grille en fractions pures
     écrasait les cartes au lieu de les empiler. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.systeme .alerte-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  /* Le filet de gauche porte la gravité. 4 px, pas 3 : c'est le seul repère
     visuel de niveau, il doit se voir sans être un aplat. */
  border-left: 4px solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
}

.systeme .alerte-bloquant    { border-left-color: var(--etat-retard-texte); }
.systeme .alerte-attention   { border-left-color: var(--etat-alerte-texte); }
.systeme .alerte-information { border-left-color: var(--etat-info-texte); }

.systeme .alerte-titre {
  font-size: var(--t-section);
  font-weight: var(--g-gras);
  line-height: var(--i-section);
  letter-spacing: -0.02em;
}

.systeme .alerte-bloquant  .alerte-titre { color: var(--etat-retard-texte); }
.systeme .alerte-attention .alerte-titre { color: var(--etat-alerte-texte); }

.systeme .alerte-detail {
  font-size: var(--t-secondaire);
  line-height: var(--i-secondaire);
  color: var(--gris);
  /* Pousse le lien en bas : sans cela, des cartes de hauteurs différentes
     alignent leurs liens n'importe où et l'œil ne trouve plus l'action. */
  flex: 1;
}

.systeme .alerte-lien {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  /* Cible de clic à 40 px comme partout. Les marges négatives rattrapent le
     remplissage pour que la carte ne gonfle pas. */
  min-height: var(--h-cible);
  margin: calc(var(--e-2) * -1) 0;
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
  color: var(--encre);
  text-underline-offset: 3px;
}

.systeme .rien-a-signaler {
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--etat-succes-fond);
  border: var(--trait) solid var(--etat-succes-bord);
  border-radius: var(--rayon-grand);
  font-size: var(--t-corps);
  color: var(--etat-succes-texte);
  max-width: var(--largeur-lecture);
}

/* Une échéance qui tombe le jour même n'est pas un retard : elle ne prend pas
   la couleur du retard, sinon tout paraît en retard tout le temps. */
.systeme .echeance-du-jour {
  font-weight: var(--g-demi);
  color: var(--encre);
}

.systeme .note-basse {
  margin-top: var(--e-3);
  font-size: var(--t-secondaire);
  color: var(--gris);
  max-width: var(--largeur-lecture);
}

/* ─── Jauge d'objectif ───────────────────────────────────────────────────────
 * L'un des quatre endroits où l'accent du club a le droit d'être un aplat.
 * `--accent-lisible` et non `--accent` : sur le fond clair de la piste, un
 * accent pâle disparaîtrait — mesure faite sur la barre de navigation.
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .jauge {
  margin-top: var(--e-4);
  height: 10px;
  background: var(--champ);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-plein);
  overflow: hidden;
}

.systeme .jauge-remplie {
  height: 100%;
  background: var(--accent-lisible);
  border-radius: var(--rayon-plein);
}

/* ─── Voyant de conformité, en résumé ─────────────────────────────────────── */

.systeme .conformite-resume {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  font-size: var(--t-corps);
}

.systeme .conformite-resume .conformite-pastille {
  width: 10px;
  height: 10px;
  border-radius: var(--rayon-plein);
  flex: none;
}

.systeme .conformite-ok .conformite-pastille        { background: var(--etat-succes-texte); }
.systeme .conformite-attention .conformite-pastille { background: var(--etat-alerte-texte); }

.systeme .conformite-resume a {
  /* Repoussé à droite, et à 40 px de haut comme toute cible. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  font-weight: var(--g-demi);
  color: var(--encre);
  text-underline-offset: 3px;
}

.systeme .deconnexion {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: var(--trait) solid var(--ligne);
}

/* Se déconnecter n'est pas une action de l'écran d'accueil : le bouton reste
   atteignable à 40 px, mais il ne pèse pas plus que le reste. Sans cette
   règle il s'affichait large et centré, et attirait l'œil avant les alertes. */
.systeme .deconnexion button {
  min-height: var(--h-cible);
  padding: 0 14px;
  font-size: var(--t-secondaire);
  color: var(--gris);
  background: transparent;
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
  cursor: pointer;
}

.systeme .deconnexion button:hover { color: var(--encre); border-color: var(--gris); }

.systeme .deconnexion button:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Les CINQ autres familles d'états — même palette fixe que les factures
 *
 * Chaque famille dit la même chose avec ses propres mots : un contrat « signé »
 * et une contrepartie « livrée » et une facture « payée » sont trois succès. Ils
 * doivent donc porter la même couleur, sinon on réapprend l'outil à chaque
 * écran.
 *
 * ⚠️ Les couleurs d'avant étaient écrites en dur, hors palette. Mesure sur la
 * liste des partenaires : « Actif » tombait à 4,58:1 — le minimum strict pour du
 * texte de 11 px. La palette fixe le porte à 6,52:1.
 *
 * Le NEUTRE sert à ce qui n'est pas commencé ou plus actif ; l'INFO à ce qui est
 * en cours ; le SUCCÈS à ce qui est tenu ; l'ALERTE à ce qui attend une suite ;
 * le RETARD à ce qui a échoué ou été annulé.
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .etat-prospect,
.systeme .etat-inactif,
.systeme .etat-cp-a_faire,
.systeme .etat-cp-annulee,
.systeme .etat-contrat-brouillon,
.systeme .etat-ec-a_venir {
  color: var(--etat-neutre-texte);
  background: var(--etat-neutre-fond);
  border-color: var(--etat-neutre-bord);
}

.systeme .etat-en_negociation,
.systeme .etat-cp-planifiee,
.systeme .etat-contrat-envoye,
.systeme .etat-contrat-actif {
  color: var(--etat-info-texte);
  background: var(--etat-info-fond);
  border-color: var(--etat-info-bord);
}

.systeme .etat-actif,
.systeme .etat-cp-livree,
.systeme .etat-cp-prouvee,
.systeme .etat-preuve,
.systeme .etat-contrat-signe,
.systeme .etat-contrat-termine,
.systeme .etat-ec-payee {
  color: var(--etat-succes-texte);
  background: var(--etat-succes-fond);
  border-color: var(--etat-succes-bord);
}

.systeme .etat-contacte {
  color: var(--etat-alerte-texte);
  background: var(--etat-alerte-fond);
  border-color: var(--etat-alerte-bord);
}

.systeme .etat-perdu,
.systeme .etat-contrat-annule,
.systeme .etat-ec-en_retard {
  color: var(--etat-retard-texte);
  background: var(--etat-retard-fond);
  border-color: var(--etat-retard-bord);
}

/* ⚠️ « Inactif » n'avait AUCUN fond : seule étiquette sur six à flotter sans
   pastille. Le sélecteur générique ci-dessus ne suffit pas — il faut que la
   règle de forme s'applique aussi, sinon la couleur arrive sur rien. */
.systeme [class*='etat-'] {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--t-petit);
  font-weight: var(--g-demi);
  line-height: var(--i-petit);
  border-radius: var(--rayon-plein);
  border: var(--trait) solid;
  white-space: nowrap;
}

/* ─── Tri des colonnes ───────────────────────────────────────────────────────
 * ⚠️ Mesuré à 15 px de haut : un en-tête de colonne cliquable est une cible
 * comme une autre. Le remplissage est repris en marge négative pour ne pas
 * gonfler l'en-tête.
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .liste th a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  margin: -12px 0;
  color: inherit;
  text-decoration: none;
}

.systeme .liste th a:hover { color: var(--encre); }

/* L'ACTIF EN ENCRE, jamais en accent — la règle vaut aussi pour le tri. */
.systeme .liste th a.tri-actif {
  color: var(--encre);
  font-weight: var(--g-gras);
}

.systeme .liste th a:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Fiches — blocs, fil d'Ariane, commandes en ligne
 *
 * ⚠️ MESURE SUR LA FICHE PARTENAIRE : le fil d'Ariane faisait 17 px, le bouton
 * « Marquer comme faite » 37 px, et l'adresse e-mail d'un contact 22 px. Trois
 * cibles sous le plancher, sur l'écran qu'un bénévole ouvre le plus souvent.
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .fil {
  font-size: var(--t-secondaire);
  margin-bottom: var(--e-3);
}

.systeme .fil a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  /* Le remplissage est repris en marge : le fil ne pousse pas le titre. */
  margin: -11px 0;
  color: var(--gris);
  text-decoration: none;
}

.systeme .fil a:hover { color: var(--encre); text-decoration: underline; }

.systeme .fil a:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

.systeme .petit-bouton {
  min-height: var(--h-cible);
  padding: 0 14px;
  font-size: var(--t-secondaire);
  font-weight: var(--g-demi);
  border-radius: var(--rayon);
  cursor: pointer;
}

/* Une adresse e-mail ou un téléphone dans une fiche est un lien : on l'appelle,
   on lui écrit. C'est donc une cible, pas du texte. */
.systeme .fiche-contact a,
.systeme .bloc a[href^='mailto:'],
.systeme .bloc a[href^='tel:'] {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  margin: -11px 0;
  color: var(--encre);
  text-underline-offset: 3px;
}

/* ⚠️ « principal » qualifie un contact — ce n'est ni une action ni l'identité
   du club. Il portait un aplat d'accent, soit le quatrième de l'écran. Une
   qualification se dit avec la palette d'états, comme partout ailleurs. */
.systeme .jeton-principal {
  color: var(--etat-info-texte);
  background: var(--etat-info-fond);
  border: var(--trait) solid var(--etat-info-bord);
}

/* Le filet du bloc « prochaine action » n'est pas un des quatre emplois
   autorisés de l'accent. En encre, il dit « c'est ici » sans emprunter la
   couleur du club — et il reste lisible chez un club à l'accent pâle. */
.systeme .bloc-action { border-left-color: var(--encre); }

/* ═══════════════════════════════════════════════════════════════════════════
 * FORMULAIRES
 *
 * C'est là que la densité compte le plus : saisir une fiche partenaire sur un
 * téléphone, dans les tribunes, est le geste le plus ingrat du produit.
 * ═══════════════════════════════════════════════════════════════════════════ */

.systeme .bloc {
  margin-top: var(--e-5);
  padding: var(--e-5);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
}

.systeme .bloc-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

/* ⚠️ Mesurée à 9,5 px. Le plancher est 11, et il ne se négocie pas : nos
   utilisateurs ne sont pas des experts qui viennent tous les jours. */
.systeme .etiquette {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  font-weight: var(--g-normal);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
  margin: 0;
}

.systeme .champ { margin-top: var(--e-4); }
.systeme .champ:first-of-type { margin-top: var(--e-2); }

.systeme .champ > label {
  display: block;
  font-size: var(--t-secondaire);
  font-weight: var(--g-demi);
  line-height: var(--i-secondaire);
  color: var(--encre);
  margin-bottom: var(--e-2);
}

.systeme .champ input:not([type='file']):not([type='checkbox']):not([type='radio']),
.systeme .champ select,
.systeme .champ textarea {
  font: inherit;
  font-size: var(--t-corps);
  width: 100%;
  min-height: var(--h-champ);
  padding: 0 var(--e-3);
  color: var(--encre);
  background: var(--champ);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
}

.systeme .champ textarea { padding: var(--e-3); line-height: var(--i-corps); }

.systeme .champ input:hover,
.systeme .champ select:hover,
.systeme .champ textarea:hover { border-color: var(--gris); }

.systeme .aide {
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--gris);
  margin-top: var(--e-1);
  max-width: var(--largeur-lecture);
}

/* ⚠️ DEUX CHAMPS CÔTE À CÔTE ÉTAIENT DÉCALÉS DE 10 PX
   -------------------------------------------------------------------------
   `.champ:first-of-type` porte 4 px de marge haute, les suivants 14. Dans une
   grille à deux colonnes, le premier est « first-of-type » et le second ne
   l'est pas : les deux champs ne commencent donc jamais à la même hauteur.
   Mesuré sur QUATRE paires du seul formulaire partenaire, et présent sur tous
   les autres. À l'œil, on voit juste « quelque chose de bâclé » sans savoir
   quoi. L'espacement passe sur la grille, où il est le même pour les deux. */
.systeme .deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--e-4);
  align-items: start;
  margin-top: var(--e-4);
}

.systeme .deux > .champ,
.systeme .deux > .champ:first-of-type { margin-top: 0; }

/* ───────────────────────────────────────────────────────────────────────────
 * Quatre classes employées par les gabarits et stylées NULLE PART
 *
 * ⚠️ Trouvées par le test « toute classe posée dans un gabarit est stylée
 * quelque part », écrit après avoir constaté que ma propre classe `.etroit`
 * ne faisait rien. Trois d'entre elles étaient là AVANT aujourd'hui : le
 * balisage les portait, la feuille les ignorait, et personne ne l'avait vu —
 * un paragraphe sans style reste un paragraphe lisible.
 * ─────────────────────────────────────────────────────────────────────── */

/* Une valeur qu'on montre sans pouvoir la modifier ici. Elle doit se lire
   comme une valeur, pas comme un champ désactivé — il n'y a rien à activer. */
.systeme .valeur-figee {
  margin-top: 2px;
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  font-weight: var(--g-demi);
  color: var(--encre);
}

/* Un lien ou une précision qui suit un bloc, et qui lui appartient encore. */
.systeme .apres-bloc {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--gris);
}

/* ⚠️ « archivé » n'est pas une erreur : c'est un ÉTAT NEUTRE. En rouge, il
   ferait croire à un problème alors que rien n'est perdu — et le texte dit
   précisément le contraire. */
.systeme .bandeau-archive {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: var(--trait) solid var(--etat-neutre-bord);
  border-radius: var(--rayon);
  background: var(--etat-neutre-fond);
  color: var(--etat-neutre-texte);
  font-size: var(--t-secondaire);
  line-height: var(--i-secondaire);
}

/* Un champ qui prend toute la largeur, y compris dans une grille à deux
   colonnes — un motif d'annulation ne se saisit pas dans une demi-ligne. */
.systeme .champ.champ-large { grid-column: 1 / -1; }

/* ───────────────────────────────────────────────────────────────────────────
 * Une ligne de tableau qui se corrige sur place
 *
 * Le détail d'une facture en brouillon se modifie dans le tableau lui-même.
 * Deux règles suffisent, et elles manquaient toutes les deux :
 *
 * ⚠️ Le champ doit REMPLIR sa cellule. Sans cela il gardait la largeur par
 * défaut d'un champ de formulaire — mesuré : 143 px dans une cellule de
 * 199 px — et « Panneau bord de terrain 3 m » s'affichait « Panneau bord de
 * terrai ». On corrige un libellé qu'on ne peut pas lire en entier.
 *
 * ⚠️ Une colonne de nombres n'a pas besoin de la même place qu'un libellé.
 * Le tableau distribuait tout également : « Qté » recevait 198 px pour deux
 * caractères, pendant que le libellé étouffait dans la même largeur.
 * ─────────────────────────────────────────────────────────────────────── */

.systeme .liste td input[type='text'],
.systeme .liste td input[type='date'] {
  width: 100%;
  min-width: 0;
}

/* Un champ qui ne porte que des chiffres. La classe était posée dans le
   gabarit et n'existait NULLE PART dans la feuille : elle ne faisait rien. */
/* ⚠️ Un MINIMUM autant qu'un maximum. Sans plancher, la colonne des libellés
   — qui prend tout l'espace restant — écrasait celle des montants : « 1200,00 »
   s'affichait « 1200 ». Un champ qui coupe la valeur qu'il contient invite à la
   ressaisir de travers. */
.systeme .liste td input.etroit { min-width: 5.5rem; max-width: 7rem; }

/* La colonne des libellés prend ce que les autres ne réclament pas. */
.systeme .liste td.principal,
.systeme .liste th:first-child { width: 100%; }
.systeme .liste td.actions { white-space: nowrap; }
/* Une période « du … au … » coupée en quatre lignes se déchiffre au lieu de se
   lire. Elle tient sur une ligne, la colonne des libellés absorbe le reste. */
.systeme .liste td.periode { white-space: nowrap; }

/* Plusieurs liens discrets au bout d'un titre de section. */
.systeme .liens-section { display: flex; align-items: baseline; gap: var(--e-4);
                          flex-wrap: wrap; }

/* Une mention neutre sur une ligne — « vous », un rappel sans jugement.
   Palette d'état FIXE, jamais l'accent du club : ce n'est pas une couleur de
   marque, c'est une information. */
.systeme .etat-neutre {
  color: var(--etat-neutre-texte);
  background: var(--etat-neutre-fond);
  border-color: var(--etat-neutre-bord);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ⚠️ LE PREMIER ENFANT D'UN <fieldset> S'EFFONDRE S'IL EST EN GRILLE
 *
 * Mesuré dans le navigateur, sur l'écran d'identité fiscale : un `.deux` placé
 * juste après le `<legend>` faisait 0 px de large, ses deux colonnes 22 px,
 * et les champs se tassaient contre le bord droit. Le MÊME `.deux` placé plus
 * bas dans le même fieldset faisait 638 px.
 *
 * Ce n'est ni le contenu ni une règle de la feuille : c'est la POSITION.
 * Vérifié en insérant trois éléments neufs en tête du fieldset :
 *
 *     <div> ordinaire        → 638 px
 *     <div display:grid>     →   0 px
 *     <div display:flex>     →   0 px
 *
 * Un bloc ordinaire va bien ; un contexte de grille ou de boîte flexible
 * s'effondre. `min-inline-size: 0`, `display: flow-root` et une cale devant
 * n'y changent rien — seule une largeur explicite corrige.
 *
 * ⚠️ CE DÉFAUT ÉTAIT DÉJÀ EN PRODUCTION, sur `actif-formulaire` (deux fois) et
 * `partenaire-formulaire`. Personne ne l'avait signalé : un formulaire dont
 * deux champs sont écrasés à droite se lit comme un formulaire mal dessiné,
 * pas comme un défaut.
 * ═══════════════════════════════════════════════════════════════════════════ */
.systeme fieldset > legend + * { width: 100%; }

/* Sous 760 px, deux colonnes de saisie font des champs trop étroits pour un
   pouce : elles s'empilent. */
@media (max-width: 760px) {
  .systeme .deux { grid-template-columns: 1fr; gap: var(--e-4); }
}

/* ⚠️ LA CASE À COCHER MESURAIT 13 PX
   -------------------------------------------------------------------------
   Intouchable au pouce. On agrandit la case ET on fait du LIBELLÉ ENTIER une
   cible de 40 px : viser une case de 20 px reste difficile, viser une ligne de
   texte ne l'est pas. */
.systeme .champ-case > label,
.systeme .case-role {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--h-cible);
  font-size: var(--t-corps);
  font-weight: var(--g-normal);
  line-height: var(--i-corps);
  cursor: pointer;
}

.systeme .champ-case input[type='checkbox'],
.systeme .case-role input[type='checkbox'],
.systeme .champ input[type='radio'] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--encre);
  cursor: pointer;
}

.systeme .cases { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }

.systeme .pied-formulaire,
.systeme .actions-formulaire {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.systeme .message-erreur,
.systeme .erreur-bandeau {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-secondaire);
  color: var(--etat-retard-texte);
  background: var(--etat-retard-fond);
  border: var(--trait) solid var(--etat-retard-bord);
  border-radius: var(--rayon);
  max-width: var(--largeur-lecture);
}

.systeme .champ.en-erreur input,
.systeme .champ.en-erreur select,
.systeme .champ.en-erreur textarea { border-color: var(--etat-retard-texte); }

.systeme .champ .requis { color: var(--etat-retard-texte); }

/* Le contour de focus est en ENCRE, jamais en accent : un club à l'accent pâle
   n'aurait aucun repère au clavier. 19,80:1 quelle que soit la couleur. */
.systeme .champ input:focus-visible,
.systeme .champ select:focus-visible,
.systeme .champ textarea:focus-visible,
.systeme .champ-case input:focus-visible,
.systeme .case-role input:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
  border-color: var(--encre);
}

/* ─── Les sections d'un formulaire sont des <fieldset> ───────────────────────
 * Et non des « .bloc » : les règles écrites pour les fiches ne les touchent
 * pas. La légende native se pose SUR la bordure et la coupe — un titre à
 * cheval sur un trait, illisible à 9,5 px. On la sort du cadre : elle devient
 * un micro-libellé posé au-dessus de la carte, comme les en-têtes de colonne.
 * ─────────────────────────────────────────────────────────────────────────── */

.systeme .formulaire-large fieldset {
  padding: var(--e-5);
  margin-bottom: var(--e-4);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
}

.systeme .formulaire-large legend {
  /* « float: left » sort la légende du flux réservé par le navigateur, donc
     elle cesse d'entailler la bordure ; le padding du fieldset la remet dans
     le cadre. `width: 100%` force le champ suivant à passer à la ligne. */
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  text-transform: uppercase;
  letter-spacing: var(--approche-micro);
  color: var(--gris);
}

/* Le rappel du catalogue : ses deux liens sont le SEUL chemin vers les actifs
   et les packs depuis que la barre est passée à cinq entrées. Mesurés à 17 px
   — c'est-à-dire la hauteur de leur texte, et rien de plus. */
.systeme .rappel-catalogue {
  margin-top: var(--e-2);
  font-size: var(--t-secondaire);
  color: var(--gris);
  max-width: var(--largeur-lecture);
}

.systeme .rappel-catalogue a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  margin: -11px 0;
  color: var(--encre);
  text-underline-offset: 3px;
}

.systeme .rappel-catalogue a:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* Le dépôt de fichier de l'import : le sélecteur des champs exclut
   explicitement « type=file », donc il gardait la boîte native de 22 px. */
.systeme .champ input[type='file'],
.systeme input[type='file'] {
  font: inherit;
  font-size: var(--t-secondaire);
  width: 100%;
  min-height: var(--h-champ);
  padding: var(--e-2) var(--e-3);
  background: var(--champ);
  border: var(--trait) dashed var(--ligne);
  border-radius: var(--rayon);
  cursor: pointer;
}

.systeme input[type='file']:hover { border-color: var(--gris); }

.systeme input[type='file']:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* Le sous-titre d'une fiche porte des liens — le partenaire, le contrat
   d'origine. Mesurés à 22 px : la hauteur de leur texte. Ce sont les chemins
   de navigation les plus empruntés du produit, ils méritent une vraie cible. */
.systeme .sous-titre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  font-size: var(--t-secondaire);
  color: var(--gris);
}

.systeme .sous-titre a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  margin: -11px 0;
  color: var(--encre);
  text-underline-offset: 3px;
}

.systeme .sous-titre a:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LARGEUR : les écrans de DONNÉES respirent, les écrans de LECTURE se tiennent
 *
 * Mesuré à 1440 px : le contenu occupait 992 px et laissait 224 px de vide de
 * chaque côté, pendant que le tableau des partenaires serrait six colonnes.
 * Une largeur de lecture appliquée à un tableau n'est pas de la sobriété,
 * c'est une mesure prise pour autre chose.
 *
 * La classe vient du gabarit, pas d'une devinette sur le contenu : un écran
 * sait s'il montre des données ou du texte.
 * ═══════════════════════════════════════════════════════════════════════════ */

.systeme.large { max-width: var(--largeur-large); }

/* En dessous, la largeur large ne change plus rien : le contenu prend déjà
   toute la place. La règle n'a donc pas besoin de media query. */

/* ═══════════════════════════════════════════════════════════════════════════
 * AFFÛTAGE — sept défauts mesurés sur un écran de 1440 px
 *
 * Aucun arbitrage de DESIGN.md n'est rouvert : densité de bénévole, actif en
 * encre, six paliers typographiques, palette d'états fixe. Ce qui change, c'est
 * la PRÉSENCE — le produit avait la qualité sans l'assurance.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. L'en-tête de page : une zone, pas trois éléments qui flottent ─────
 * Le titre, le chapeau et les actions partagent une ligne de base et une
 * séparation nette avec le contenu. Avant, « Importer un fichier » et le bouton
 * principal flottaient à des hauteurs différentes du titre.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .titre-ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.systeme .titre-ligne > :first-child { flex: 1 1 24rem; }

/* Les actions d'en-tête s'alignent sur la HAUTEUR DU TITRE, pas sur son haut :
   un bouton de 44 px calé sur la première ligne d'un titre de 26 px paraît
   toujours trop haut. */
.systeme .titre-ligne .bouton,
.systeme .titre-ligne .bouton-discret,
.systeme .boutons-titre {
  align-self: center;
  flex: none;
}

.systeme .boutons-titre {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
}

/* Le chapeau appartient à l'en-tête : il ne doit pas s'en détacher. */
.systeme .chapeau {
  margin-top: var(--e-2);
  font-size: var(--t-secondaire);
  line-height: var(--i-secondaire);
  color: var(--gris);
  max-width: var(--largeur-lecture);
}

/* ─── 2. Le tableau : un en-tête qui se voit, un survol qui répond ────────
 * L'en-tête de colonne était à 11 px gris pâle sur blanc, indiscernable de la
 * première ligne. Un tableau de données a besoin qu'on distingue l'étiquette
 * de la donnée sans y penser.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .liste thead th {
  background: var(--champ);
  border-bottom: var(--trait) solid var(--ligne);
  color: var(--gris);
  /* Le repos vertical vient du remplissage, pas d'une hauteur imposée : une
     colonne triable porte un lien de 40 px qui doit tenir dedans. */
  padding-top: var(--e-2);
  padding-bottom: var(--e-2);
}

.systeme .liste thead th:first-child { border-top-left-radius: var(--rayon-grand); }
.systeme .liste thead th:last-child  { border-top-right-radius: var(--rayon-grand); }

/* Le survol dit « cette ligne entière est cliquable ». Sans lui, la surface
   étirée sous la ligne est une promesse invisible. */
.systeme .liste tbody tr:hover { background: var(--champ); }

/* ─── 3. La recherche : un groupe, pas un champ et un bouton posés côte à côte */

.systeme .barre-recherche {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-5);
  max-width: 34rem;
}

.systeme .barre-recherche input {
  flex: 1;
  min-height: var(--h-champ);
  padding: 0 var(--e-4);
  font-size: var(--t-corps);
  color: var(--encre);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
}

.systeme .barre-recherche input:focus-visible {
  outline: var(--trait-fort) solid var(--encre);
  outline-offset: 2px;
  border-color: var(--encre);
}

.systeme .barre-recherche button {
  flex: none;
  min-height: var(--h-champ);
  padding: 0 var(--e-5);
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
  color: var(--encre);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon);
  cursor: pointer;
}

.systeme .barre-recherche button:hover { border-color: var(--gris); }

/* ─── 4. La profondeur : les ombres existaient, on ne les voyait pas ──────
 * 2 px de décalage et 7 % d'opacité sur un fond crème ne produisent aucune
 * séparation. Une carte doit se détacher de son fond, sinon elle n'est qu'un
 * rectangle blanc.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .bloc,
.systeme .liste,
.systeme .alerte-carte,
.systeme .compteur,
.systeme .formulaire-large fieldset {
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 4px 16px rgba(10, 10, 10, 0.06);
}

/* ─── 5. La grille d'alertes : jamais une carte orpheline ─────────────────
 * Quatre alertes donnaient 3 + 1, avec un trou béant à droite et une quatrième
 * carte plus courte que ses voisines. Deux colonnes se remplissent toujours
 * proprement, et laissent plus de place au texte de chaque alerte.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * ⚠️ LE NOMBRE DE COLONNES EST DÉCIDÉ, PAS DEVINÉ
 *
 * `auto-fit` remplit ce qu'il peut : à 1344 px et 380 px minimum, il tient
 * trois colonnes — donc quatre alertes donnent 3 + 1, avec une carte orpheline
 * et un trou béant à droite. Élargir le minimum ne fait que déplacer le
 * problème vers un autre compte.
 *
 * On compte donc les cartes. Quatre alertes se rangent en 2 × 2, trois en une
 * ligne, cinq en 3 + 2. Aucune configuration ne laisse une carte seule sur sa
 * ligne, et l'écran ne change pas de forme d'un jour à l'autre pour une alerte
 * de plus ou de moins.
 */
.systeme .alertes { grid-template-columns: repeat(3, 1fr); }

.systeme .alertes:has(> :nth-child(1):last-child) { grid-template-columns: 1fr; }
.systeme .alertes:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.systeme .alertes:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }

/* Une alerte seule ne s'étale pas sur toute la largeur : au-delà, son texte
   dépasse la mesure de lecture et devient pénible à parcourir. */
.systeme .alertes .alerte-carte:only-child { max-width: 46rem; }

/* Sous 760 px, tout s'empile — trois colonnes de 380 px n'y tiennent pas, et
   `:has()` ne doit pas ressusciter une grille impossible. */
@media (max-width: 760px) {
  .systeme .alertes,
  .systeme .alertes:has(> :nth-child(2):last-child),
  .systeme .alertes:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}

/* ─── 6. Ce qui pesait plus lourd que son importance ───────────────────────
 * « Me déconnecter » s'affichait large et centré, en bas de l'écran d'accueil :
 * il attirait l'œil avant les alertes. Se déconnecter n'est pas une action de
 * l'écran d'entrée — le bouton reste atteignable à 40 px, mais rentre dans le
 * rang.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .deconnexion { display: flex; }
.systeme .deconnexion button { flex: none; }

/* ─── 7. La respiration en haut de page ───────────────────────────────────
 * Le titre démarrait à 20 px du filet de la barre. Un écran qui commence
 * immédiatement sous sa navigation paraît serré, quelle que soit la qualité de
 * ce qu'il contient.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme { padding-top: var(--e-6); }

/* ─── 8. La ligne de conformité : deux blocs, pas deux bords ──────────────
 * Le texte à gauche et le lien à droite laissaient 1 200 px de vide entre eux
 * sur un écran large. Le lien suit maintenant son texte.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .conformite-resume { max-width: 48rem; }
.systeme .conformite-resume a { margin-left: var(--e-4); }

/* ─── 9. La jauge dit où elle en est ──────────────────────────────────────
 * Un trait rempli à 19 % sans chiffre oblige à estimer à l'œil. Le pourcentage
 * est déjà connu du serveur : il s'écrit.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .jauge-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.systeme .jauge-ligne .jauge { flex: 1; margin-top: 0; max-width: 42rem; }

.systeme .jauge-part {
  font-family: var(--mono);
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ALIGNEMENT SUR REGARD AI — petites tailles, graisses fortes
 *
 * Ce qui suit annule la transposition « pour bénévoles » de l'échelle et des
 * graisses. Le crème, les rayons, Outfit, DM Mono et les ombres étaient déjà
 * identiques au pixel près : ce qui manquait était le CONTRASTE DE GRAISSE.
 *
 * Regard AI met du semibold et du bold partout, à des tailles que nous avions
 * doublées. C'est ce qui lui donne son assurance — et c'est exactement ce qui
 * nous manquait.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Titres ──────────────────────────────────────────────────────────────
 * Regard AI : titre de page 18px, titre de carte 13px en `font-bold`.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme h1 {
  font-size: var(--t-titre);
  line-height: var(--i-titre);
  font-weight: var(--g-gras);
  letter-spacing: -0.02em;
}

.systeme h2,
.systeme .titre-section {
  font-size: var(--t-section);
  line-height: var(--i-section);
  font-weight: var(--g-gras);
  letter-spacing: -0.01em;
  margin-top: var(--e-6);
}

.systeme .chapeau,
.systeme .note-haute {
  font-size: var(--t-secondaire);
  font-weight: var(--g-normal);
  color: var(--gris);
}

/* ─── Étiquettes d'état : 10 px en GRAS, comme les badges de Regard AI ────
 * Une étiquette de 12 px en 600 occupe la place d'un mot ; à 10 px en 700 elle
 * devient un repère, et la ligne du tableau respire.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme [class*='etat-'] {
  padding: 1px 8px;
  font-size: var(--t-micro);
  font-weight: var(--g-gras);
  line-height: var(--i-micro);
  letter-spacing: 0.01em;
}

/* ─── Le tableau se resserre ──────────────────────────────────────────────
 * Les cellules gardent 40 px de hauteur — la cible ne bouge pas — mais le
 * texte descend à 12,5 px et les intitulés à 10 px en gras.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .liste { font-size: var(--t-corps); }

.systeme .liste thead th {
  font-size: var(--t-micro);
  font-weight: var(--g-gras);
  letter-spacing: var(--approche-micro);
}

.systeme .liste td { padding-top: var(--e-2); padding-bottom: var(--e-2); }
.systeme .liste .principal a { font-weight: var(--g-demi); }
.systeme .liste .secondaire { font-size: var(--t-petit); }

/* ─── Boutons : le texte rétrécit, la cible reste ────────────────────────── */

.systeme .bouton,
.systeme .bouton-discret,
.systeme .lien-bouton,
.systeme .petit-bouton,
.systeme .liste td.actions button {
  font-size: var(--t-corps);
  font-weight: var(--g-demi);
}

/* ─── Compteurs et cartes ─────────────────────────────────────────────────
 * Regard AI tient ses cartes en 16 px de padding. Une carte trop matelassée
 * fait paraître son contenu maigre.
 * ───────────────────────────────────────────────────────────────────────── */

.systeme .bloc,
.systeme .alerte-carte,
.systeme .formulaire-large fieldset { padding: var(--e-5); }

/* Les tailles du compteur sont définies une seule fois, avec le composant.
   Elles l'étaient ici AUSSI, et les deux endroits divergeaient. */

.systeme .alerte-titre {
  font-size: var(--t-section);
  font-weight: var(--g-gras);
  line-height: var(--i-section);
}
.systeme .alerte-detail { font-size: var(--t-secondaire); }
.systeme .alerte-lien { font-size: var(--t-corps); }

/* ─── Formulaires ────────────────────────────────────────────────────────── */

.systeme .champ > label { font-size: var(--t-petit); font-weight: var(--g-demi); }
.systeme .champ input:not([type='file']),
.systeme .champ select,
.systeme .champ textarea { font-size: var(--t-corps); }
.systeme .aide { font-size: var(--t-petit); }

/* ─── Navigation : 56 px de barre, texte serré ───────────────────────────── */

.systeme ~ * .navigation a,
.navigation a { font-size: var(--t-corps); }

/* ═══════════════════════════════════════════════════════════════════════════
 * L'ENTRÉE — connexion, lien envoyé, confirmation
 *
 * ⚠️ Ces écrans étaient restés hors du système par une distinction qui ne
 * tenait pas : « écrans sans structure ». Or la structure est parfaitement
 * connue ici — c'est le sous-domaine qui la donne. Seuls le domaine racine et
 * la page « structure inconnue » n'en ont réellement pas.
 *
 * C'est le premier écran qu'un bénévole voit, et longtemps le seul dont il se
 * souviendra. Il portait encore l'ancienne échelle.
 * ═══════════════════════════════════════════════════════════════════════════ */

.systeme.centre {
  display: flex;
  align-items: center;
  justify-content: center;
  /* La barre fait 56 px : on retire sa hauteur pour centrer sur ce qui reste,
     sinon la carte descend d'une demi-barre. */
  min-height: calc(100vh - var(--h-barre) - var(--e-6) * 2);
  padding-top: var(--e-6);
  padding-bottom: var(--e-6);
}

.carte-accueil {
  width: 100%;
  max-width: 25rem;
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 8px 32px rgba(10, 10, 10, 0.08);
}

.carte-accueil-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-1);
  margin-bottom: var(--e-5);
}

/* La couleur du club, en petit et une seule fois : elle dit « vous êtes bien
   chez vous » avant même que le nom soit lu. */
.carte-accueil-pastille {
  width: 34px;
  height: 34px;
  border-radius: var(--rayon);
  background: var(--accent);
  margin-bottom: var(--e-3);
}

.carte-accueil h1 { font-size: var(--t-titre); font-weight: var(--g-gras); }
.carte-accueil .chapeau { margin: 0; font-size: var(--t-secondaire); }

.carte-accueil .formulaire { display: flex; flex-direction: column; gap: var(--e-4); }
.carte-accueil .champ { margin-top: 0; }
.carte-accueil .bouton { width: 100%; justify-content: center; }

.carte-accueil-pied {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: var(--trait) solid var(--ligne);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--gris);
  text-align: center;
}

/* Les deux écrans qui suivent — lien envoyé, confirmation — partagent la même
   forme sans avoir la carte : ils tiennent en une phrase. */
.systeme.centre > h1,
.systeme.centre > .chapeau,
.systeme.centre > .fiche,
.systeme.centre > .formulaire,
.systeme.centre > p { max-width: 30rem; }

.systeme.centre > * { margin-left: auto; margin-right: auto; }
.systeme.centre { flex-direction: column; text-align: center; }
.systeme.centre .carte-accueil { text-align: left; }
.systeme.centre .fiche { text-align: left; }





/* ═══════════════════════════════════════════════════════════════════════════
 * LA CARTE DE COCKPIT — le motif de Regard AI
 *
 * Relevé dans « components/cockpit/CeoCockpit.tsx », bloc « Business Score » :
 *
 *   Card (rounded-2xl · border-border/60 · p-4 · shadow-card)
 *     ├ en-tête : icône 16 px en accent + titre 12 px gras
 *     ├ corps   : chiffre 40 px font-black à GAUCHE, badge + résumé à DROITE
 *     └ détails : lignes de 10,5 px
 *
 * ⚠️ UN SEUL chiffre est énorme. Les autres restent petits — c'est ce qui le
 * fait ressortir. J'avais agrandi les quatre à la fois, ce qui revenait à n'en
 * grandir aucun.
 *
 * ⚠️ Et une carte de Regard AI commence TOUJOURS par une icône. Le produit
 * n'en avait aucune, nulle part : rien n'aidait à repérer un bloc du regard.
 * ═══════════════════════════════════════════════════════════════════════════ */

.systeme .carte-cockpit {
  margin-top: var(--e-4);
  padding: var(--e-5);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 4px 16px rgba(10, 10, 10, 0.06);
}

/* ─── En-tête : icône + titre ─────────────────────────────────────────── */

.systeme .carte-cockpit-tete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

.systeme .carte-cockpit-tete svg {
  width: 16px;
  height: 16px;
  flex: none;
  /* L'icône porte la couleur du club — `--accent-lisible` et non `--accent` :
     un accent pâle disparaîtrait sur le blanc de la carte. */
  color: var(--accent-lisible);
}

.systeme .carte-cockpit-tete h3 {
  font-size: var(--t-secondaire);
  font-weight: var(--g-gras);
  line-height: var(--i-secondaire);
  margin: 0;
}

/* ─── Corps : le chiffre, puis son résumé ─────────────────────────────── */

.systeme .carte-cockpit-corps {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

/* ⚠️ ALIGNÉ À GAUCHE, PAS CENTRÉ.
   Regard AI centre parce que sa légende — « / 100 » — est plus ÉTROITE que son
   chiffre. La nôtre — « % de l'objectif » — est trois fois plus large : centrée,
   elle débordait des deux côtés et le chiffre ne tenait plus le bord gauche du
   bloc. Reprendre le centrage aurait été copier la forme sans la raison. */
.systeme .score { text-align: left; flex: none; }

.systeme .score-valeur {
  display: block;
  /* ⚠️ OUTFIT, PAS DM MONO.
     Mesuré dans le DOM de Regard AI : son « 39 » est en Outfit 900, jamais en
     mono. Le chiffre géant de regard pro était le SEUL élément du produit à
     s'écrire dans une autre police que le reste de la page — c'était l'écart
     visuel principal avec Regard AI, et je l'avais mis là de moi-même.
     Notre Outfit est une variable plafonnée à 800 : mesuré, 82,05 px de large
     là où Regard AI en fait 83,32. L'écart de graisse est de 1,5 %. */
  font-family: var(--sans);
  font-size: var(--t-score);
  font-weight: var(--g-noir);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ LE GRAND CHIFFRE PORTE LE VERDICT — mesuré : `rgb(225, 29, 72)` sur le
   score « fragile » de Regard AI. Ce n'est pas une entorse à la règle « actif
   en noir » : celle-là vise l'ÉTAT DE NAVIGATION, pas un jugement. Ici la
   couleur EST l'information, et elle vient de la palette FIXE à ≥ 6,45:1 —
   jamais de l'accent du club, qui varie et ne veut rien dire. */
.systeme .score-valeur.est-faible { color: var(--etat-retard-texte); }
.systeme .score-valeur.est-moyen  { color: var(--etat-alerte-texte); }
.systeme .score-valeur.est-bon    { color: var(--etat-succes-texte); }

.systeme .score-sur {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  line-height: var(--i-micro);
  color: var(--gris);
}

.systeme .score-resume { min-width: 0; flex: 1; }

/* Le libellé du cycle prend la forme d'une étiquette d'état — Regard AI met un
   Badge à cet endroit. */
.systeme .etat-cycle {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--rayon-plein);
  border: var(--trait) solid var(--etat-info-bord);
  background: var(--etat-info-fond);
  color: var(--etat-info-texte);
  font-size: var(--t-micro);
  font-weight: var(--g-gras);
  line-height: var(--i-micro);
}

.systeme .score-resume p {
  margin-top: var(--e-1);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
  color: var(--gris);
}

.systeme .score-resume strong {
  font-weight: var(--g-gras);
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Les trois autres repères de la saison utilisent le composant `.compteur`.
   Ils avaient d'abord leur propre jeu de règles `.releve-*` — c'est-à-dire le
   MÊME composant sous un second nom, donc deux endroits où il pouvait dériver. */


@media (max-width: 760px) {
  .systeme .carte-cockpit-corps { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
}