/* =============================================================================
   MÔNE — Bibliothèque de composants

   Règle générale, inchangée : aucun effet gratuit. Une transition porte sur la
   couleur, sur la matière quand un élément se soulève, et sur la position
   quand un panneau entre ou sort. Rien ne bouge en permanence, rien ne
   s'anime au défilement, aucune boucle infinie.

   Ce que la révision change : la matière. Une carte n'est plus un rectangle
   blanc avec une ombre par défaut mais une surface qui a un bord, un contact
   et une diffusion ; un bouton plein a une arête supérieure ; un chiffre est
   composé en chasse fixe. Aucun nom de classe n'a bougé — les 157 gabarits
   Twig rendent le même balisage qu'avant.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Boutons
-------------------------------------------------------------------------- */
/*
  Toute action est une pilule — verrou de forme de tokens.css. Le primaire est
  l'aplat Vert Forêt, le secondaire un aplat sauge pâle, le discret une pilule
  claire cerclée d'un filet.
*/
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pilule);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.bouton--primaire {
  background: var(--vert-foret);
  color: var(--blanc);
}

.bouton--primaire:hover {
  background: var(--vert-foret-hover);
  color: var(--blanc);
}

.bouton--secondaire {
  background: var(--sauge-pale);
  color: var(--sauge-fonce);
}

.bouton--secondaire:hover {
  background: var(--sauge-clair);
  color: var(--vert-foret);
}

.bouton--discret {
  background: var(--surface);
  border-color: var(--filet-appuye);
  color: var(--anthracite);
}

.bouton--discret:hover { background: var(--sauge-brume); border-color: var(--sauge-clair); color: var(--anthracite); }

.bouton--destructif {
  background: var(--rouge-brique);
  color: var(--blanc);
}

.bouton--destructif:hover {
  background: #73202c;
  color: var(--blanc);
}

.bouton--petit { min-height: 34px; padding: 7px 14px; font-size: 12.5px; }

.bouton[disabled],
.bouton[aria-disabled='true'] {
  background: var(--desactive);
  border-color: var(--desactive);
  color: var(--blanc);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.bouton--secondaire[disabled] {
  background: var(--surface-creuse);
  color: var(--gris-moyen);
}

/* Retour tactile : la pilule s'enfonce légèrement sous le doigt. */
.bouton:active:not([disabled]) { transform: scale(.98); }

/* -----------------------------------------------------------------------------
   Cartes
-------------------------------------------------------------------------- */
/*
  Carte : surface claire à plat sur le canevas minéral, 24 px de rayon, sans
  bordure. Le filet d'un pixel porté par l'ombre ne sert qu'à tenir l'arête
  sur les écrans peu contrastés.
*/
.carte {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-filet);
  padding: var(--sp-5);
}

.carte--compacte { padding: var(--sp-4); }
.carte--sans-marge { padding: 0; overflow: hidden; }

.carte__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.carte__titre {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.016em;
}

.carte__note { font-size: var(--fs-small); color: var(--gris-moyen); }

.carte--sans-marge .carte__entete {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--filet);
}

/* -----------------------------------------------------------------------------
   Carte d'indicateur (KPI)
-------------------------------------------------------------------------- */
/*
  Carte d'indicateur. Quatre indicateurs alignés sont la première chose que
  voit la Présidence : c'est le seul endroit de l'application où le chiffre a
  le droit d'être grand. Il monte donc à 34 px, avec un interlettrage négatif
  franc — sans lui, Montserrat en 700 à cette taille paraît soufflée.

  Le liseré supérieur en Terre Cuite n'apparaît **qu'au survol** : posé en
  permanence sur quatre cartes côte à côte, il deviendrait une décoration ;
  au survol, il désigne la carte pointée.
*/
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-filet);
  padding: var(--sp-5);
  overflow: hidden;
  /* Contexte de conteneur : le chiffre de tête se dimensionne sur la largeur
     de **sa** carte, pas sur celle de la fenêtre. Quatre cartes sur une rangée
     ou deux sur une tablette, le montant tient sur une ligne dans les deux
     cas. Voir `.kpi__valeur`. */
  container-type: inline-size;
}

.kpi__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.kpi__libelle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--anthracite);
}

.kpi__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sauge-brume);
  color: var(--sauge-fonce);
  box-shadow: inset 0 0 0 1px var(--sauge-pale);
}

/*
  Le chiffre de tête reste en Montserrat, et c'est délibéré : à 34 px il est
  lu comme un **titre**, pas comme une donnée à comparer colonne par colonne.
  La chasse fixe est réservée aux chiffres qu'on aligne et qu'on dicte —
  tableaux, listes de définitions, matricules (voir `.chiffre` dans base.css).
*/
.kpi__valeur {
  /* Première déclaration : repli pour tout moteur sans requête de conteneur.
     Seconde : le corps suit la largeur de la carte, borné entre 21 et 32 px.
     9,5 % de la largeur, c'est la valeur pour laquelle « 18 460 000 FCFA » —
     le plus long montant que produise le filtre `fcfa` — tient sur une ligne
     dans une carte de rangée de quatre. */
  font-size: var(--fs-kpi);
  font-size: clamp(22px, 10cqi, 36px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  /* Pas de `overflow-wrap: anywhere` : la coupure tomberait au milieu de
     « FCFA ». Le montant se coupe entre mots, jamais dans un mot. */
  text-wrap: balance;
}

.kpi__valeur small {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris-moyen);
  margin-left: 3px;
}

.kpi__pied {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.kpi__variation {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-pilule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kpi__variation--hausse { color: var(--statut-ok); background: var(--statut-ok-fond); }
.kpi__variation--baisse { color: var(--rouge-brique); background: var(--statut-alerte-fond); }
.kpi__variation--neutre { color: var(--gris-moyen); background: var(--statut-neutre-fond); }

/* -----------------------------------------------------------------------------
   Badges de statut
-------------------------------------------------------------------------- */
/*
  Badge de statut. La pastille n'est pas un ornement : elle porte l'état, elle
  est donc conservée — mais réduite à 5 px et doublée d'un filet de la même
  teinte, faute de quoi un badge posé sur une ligne de tableau survolée perd
  son contour et flotte.
*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pilule);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/*
  Le texte du badge est **plus sombre** que le jeton de statut, et seulement
  ici. Posé sur son propre aplat à 10 %, le Vert Statut donne 3,9:1 et l'Or
  d'attente 3,0:1 : deux échecs AA sur un libellé de 11,5 px. Les jetons
  eux-mêmes ne bougent pas — ils continuent de peindre les jauges, les puces
  de frise et les parts de graphique, où la couleur est une surface et non un
  texte à lire.
*/
.badge--ok      { background: var(--statut-ok-fond);      color: #1E5A41;               border-color: rgba(46, 125, 91, .22); }
.badge--attente { background: var(--statut-attente-fond); color: #7E5C07;               border-color: rgba(184, 134, 11, .24); }
.badge--alerte  { background: var(--statut-alerte-fond);  color: var(--statut-alerte);  border-color: rgba(139, 38, 53, .22); }
.badge--neutre  { background: var(--statut-neutre-fond);  color: var(--statut-neutre);  border-color: rgba(102, 102, 102, .20); }

.badge--sobre { background: var(--surface-creuse); color: var(--gris-moyen); border-color: var(--filet); }
.badge--sobre::before { display: none; }

/* -----------------------------------------------------------------------------
   Fil d'Ariane
-------------------------------------------------------------------------- */
.fil-ariane { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }

.fil-ariane__element {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gris-moyen);
}

.fil-ariane__element a { color: var(--gris-moyen); text-decoration: none; }
.fil-ariane__element a:hover { color: var(--vert-foret); text-decoration: underline; }
.fil-ariane__element[aria-current='page'] { color: var(--anthracite); font-weight: 650; }
.fil-ariane__separateur { color: var(--desactive); }

/* -----------------------------------------------------------------------------
   Tableaux de données
-------------------------------------------------------------------------- */
/*
  « C'est là que se joue le professionnalisme » (§10.2). Les règles du cahier
  des charges sont tenues à la lettre : en-têtes en gras alignés à gauche,
  aucune ligne verticale, filet bas seul, texte à gauche et chiffres à droite,
  12/16 px par cellule.

  Trois réglages s'ajoutent, tous optiques :
   — la première et la dernière colonne s'alignent sur la marge de la carte
     (24 px) au lieu de flotter à 16 px, sans quoi le tableau paraît décalé
     dans son panneau ;
   — le survol descend de 8 % à 4 % : à 8 %, la ligne pointée devenait plus
     lourde que l'en-tête ;
   — les chiffres passent en chasse fixe, donc réellement comparables.
*/
.tableau-enveloppe {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tableau caption {
  padding: 0 0 var(--sp-3);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.tableau thead th {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font);
  /* Le §10.2 nomme cette valeur (#FAFBFB) : c'est son jeton qui la porte. */
  background: var(--fond-entete);
  border-bottom: 1px solid var(--filet-appuye);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gris-moyen);
  text-align: left;
  white-space: nowrap;
}

/*
  Le filet bas des lignes reste sur `--bordure` (#E5E5E5) : c'est la seule
  valeur que le §10.2 écrive noir sur blanc pour un tableau, et sur vingt-cinq
  lignes elle se tient mieux que le filet teinté des cartes, plus clair.
*/
.tableau tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}

.tableau thead th:first-child,
.tableau tbody td:first-child { padding-left: var(--sp-5); }

.tableau thead th:last-child,
.tableau tbody td:last-child { padding-right: var(--sp-5); }

.tableau tbody tr { transition: background-color var(--transition); }
.tableau tbody tr:hover { background: var(--sauge-brume); }
.tableau tbody tr:last-child td { border-bottom: none; }

/* Règle d'or comptable : le texte à gauche, les chiffres à droite. */
.tableau .colonne-nombre,
.tableau th.colonne-nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau tbody td.colonne-nombre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: -.01em;
}

.tableau .colonne-action { text-align: right; width: 1%; white-space: nowrap; }

/*
  Écriture extournée (LOT 5, §7.2) : la ligne d'origine reste au journal — on
  ne l'efface jamais — mais elle ne compte plus dans le solde. Le barré le dit
  sans qu'aucune donnée ne soit modifiée.
*/
.tableau tbody tr.ligne--annulee td { text-decoration: line-through; color: var(--gris-moyen); }
.tableau tbody tr.ligne--annulee code { text-decoration: none; }

.tableau__lien-tri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.tableau__lien-tri:hover { color: var(--vert-foret); }
.tableau__lien-tri .icone { opacity: .35; }
.tableau__lien-tri[data-tri='asc'] .icone,
.tableau__lien-tri[data-tri='desc'] .icone { opacity: 1; color: var(--vert-foret); }

.cellule-identite {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.cellule-identite__nom { font-weight: 650; letter-spacing: -.008em; white-space: nowrap; }

/* Sous le nom vit le matricule : chasse fixe, parce qu'il se dicte. */
.cellule-identite__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Barre d'outils de tableau (filtres serveur)
-------------------------------------------------------------------------- */
.barre-outils {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-relief);
  border-bottom: 1px solid var(--filet);
}

.barre-outils__filtres {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.barre-outils__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.puce-filtre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--radius-pilule);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--gris-moyen);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.puce-filtre:hover { border-color: var(--sauge-clair); color: var(--anthracite); background: var(--sauge-brume); }

.puce-filtre[aria-pressed='true'],
.puce-filtre[data-actif='true'] {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--blanc);
}

/* -----------------------------------------------------------------------------
   Pagination
-------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-relief);
  border-top: 1px solid var(--filet);
}

.pagination__resume {
  font-size: var(--fs-small);
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}

.pagination__resume .chiffre { font-size: 11.5px; }

.pagination__liste { display: flex; align-items: center; gap: 4px; }

.pagination__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--radius-pilule);
  background: var(--surface);
  color: var(--anthracite);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.pagination__lien:hover { border-color: var(--sauge-clair); color: var(--anthracite); background: var(--sauge-brume); }

.pagination__lien[aria-current='page'] {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--blanc);
}

.pagination__lien[aria-disabled='true'] {
  color: var(--desactive);
  pointer-events: none;
  background: var(--surface-creuse);
  border-color: var(--filet);
}

.pagination__ellipse { padding: 0 4px; color: var(--gris-moyen); }

/* -----------------------------------------------------------------------------
   Formulaires
-------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: var(--sp-2); }

.champ + .champ { margin-top: var(--sp-4); }

/*
  Libellé de champ. Il était en capitales, à 12 px, en gris moyen — trois
  handicaps cumulés : les capitales suppriment la silhouette des mots et se
  lisent 15 % moins vite, et le gris moyen sur blanc plafonne à 5,7:1 alors
  qu'un libellé est ce qu'on lit **avant** de saisir.

  Il passe donc en bas de casse, 12,5 px, graisse 600, Anthracite. Les
  capitales restent là où elles servent : en-têtes de tableau et clés de
  données, où le libellé est une étiquette de colonne, pas une consigne.
*/
.champ__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--anthracite);
}

.champ__label .obligatoire { color: var(--rouge-brique); margin-left: 2px; }

.champ__controle,
.saisie {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--radius);
  background: var(--blanc);
  font-size: 13.5px;
  /* Interligne posé explicitement : laissé à `normal`, un `<input>` calculait
     38 px de hauteur intrinsèque et un `<select>` 44 — deux pixels de décalage
     visibles dès que les deux sont côte à côte dans une barre de filtres. */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.champ__controle::placeholder,
.saisie::placeholder { color: #767B72; }

.champ__controle:hover:not(:disabled),
.saisie:hover:not(:disabled) { border-color: var(--sauge); }

.champ__controle:focus,
.saisie:focus {
  outline: none;
  border-color: var(--sauge-fonce);
  box-shadow: 0 0 0 4px var(--sauge-pale);
}

.champ__controle:disabled,
.saisie:disabled {
  background: var(--surface-creuse);
  color: var(--gris-moyen);
  box-shadow: none;
  cursor: not-allowed;
}

textarea.champ__controle { min-height: 96px; resize: vertical; line-height: var(--lh-base); }

select.champ__controle {
  appearance: none;
  padding-right: var(--sp-6);
  /* Chevron encodé en donnée : aucune requête réseau, compatible CSP. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}

.champ__aide { font-size: var(--fs-small); color: var(--gris-moyen); }

.champ__erreur {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--rouge-brique);
}

.champ--erreur .champ__controle {
  border-color: var(--rouge-brique);
  box-shadow: 0 0 0 3px var(--statut-alerte-fond);
}

.champ-groupe { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.champ-groupe .champ + .champ { margin-top: 0; }

/* Un groupe de champs et un champ isolé gardent le même rythme vertical. */
.champ-groupe + .champ,
.champ + .champ-groupe,
.champ-groupe + .champ-groupe { margin-top: var(--sp-4); }

/*
  `.champ + .champ` pose 16 px de rythme vertical, ce qui est juste dans une
  colonne de formulaire et faux dans une grille : la barre de filtres de
  l'annuaire alignait ses champs sur une seule ligne, et tous sauf le premier
  se retrouvaient poussés de 16 px vers le bas. La grille porte déjà son
  propre `gap` ; le rythme vertical y est donc remis à zéro, exactement comme
  dans `.champ-groupe`.
*/
.filtres__champs .champ + .champ,
.formulaire-en-ligne .champ + .champ { margin-top: 0; }

.champ__prefixe-groupe { position: relative; display: flex; align-items: center; }

.champ__suffixe {
  position: absolute;
  right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gris-moyen);
  pointer-events: none;
}

/* Alignement à droite réservé aux valeurs chiffrées : une adresse e-mail
   alignée à droite se lit mal et trahit la règle comptable. */
.champ__prefixe-groupe--unite .champ__controle {
  padding-right: 62px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.case-a-cocher {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}

.case-a-cocher input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sauge-fonce);
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Téléversement de fichier
-------------------------------------------------------------------------- */
.televersement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1.5px dashed var(--filet-appuye);
  border-radius: var(--radius-lg);
  background: var(--surface-creuse);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.televersement:hover,
.televersement[data-survol='true'] {
  border-color: var(--sauge);
  background: var(--sauge-brume);
}

.televersement__icone { color: var(--sauge-fonce); }
.televersement__titre { font-size: 13.5px; font-weight: 600; }
.televersement__contrainte { font-size: var(--fs-small); color: var(--gris-moyen); }

.televersement__fichier {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.televersement__nom { font-size: 13px; font-weight: 500; }

.progression {
  width: 100%;
  height: 6px;
  margin-top: var(--sp-2);
  border-radius: var(--radius-pilule);
  background: var(--sauge-brume);
  overflow: hidden;
}

.progression__valeur {
  height: 100%;
  border-radius: inherit;
  background: var(--sauge);
  transition: width var(--transition-panneau);
}

/* -----------------------------------------------------------------------------
   Alertes
-------------------------------------------------------------------------- */
/*
  Alerte. Le filet vertical porte le ton, l'aplat teinté le double. Le texte
  reste en Anthracite adouci et non en Gris Moyen : sur un fond déjà teinté, le
  gris moyen tombe sous le seuil AA.
*/
.alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  background: var(--surface);
}

.alerte__contenu { flex: 1 1 auto; min-width: 0; }
.alerte__titre { font-size: 13.5px; font-weight: 650; letter-spacing: -.008em; margin-bottom: 2px; }
.alerte__texte { font-size: 13px; color: #3C3C3C; }

.alerte--succes { border-color: rgba(61, 122, 87, .22);  background: var(--statut-ok-fond); }
.alerte--succes .icone { color: var(--statut-ok); }
.alerte--info   { border-color: var(--sauge-clair);        background: var(--sauge-brume); }
.alerte--info .icone { color: var(--sauge-fonce); }
.alerte--attention { border-color: rgba(176, 127, 18, .26); background: var(--statut-attente-fond); }
.alerte--attention .icone { color: var(--statut-attente); }
.alerte--erreur { border-color: rgba(139, 38, 53, .24);   background: var(--statut-alerte-fond); }
.alerte--erreur .icone { color: var(--rouge-brique); }

/* -----------------------------------------------------------------------------
   Modale
-------------------------------------------------------------------------- */
.modale {
  position: fixed;
  inset: 0;
  z-index: var(--z-modale);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(6, 28, 22, .52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/*
  Une modale qui apparaît d'un coup se lit comme un bug d'affichage ; 180 ms
  d'échelle disent d'où elle vient. Le mouvement est neutralisé par
  `prefers-reduced-motion` (base.css).
*/
.modale__boite {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-6);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes mone-modale {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }

  .modale__boite { animation: mone-modale 180ms cubic-bezier(.2, .8, .3, 1) both; }
}

.modale__entete { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }

.modale__pictogramme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--statut-alerte-fond);
  color: var(--rouge-brique);
}

.modale__titre { font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
.modale__texte { margin-top: var(--sp-2); color: #3C3C3C; font-size: 13.5px; }

.modale__pied {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* -----------------------------------------------------------------------------
   Notifications éphémères
-------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  /* Sous l'en-tête : une notification ne doit jamais masquer le menu du
     compte ni la cloche, qui sont les deux commandes toujours accessibles. */
  top: calc(var(--header-h) + var(--sp-3));
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(360px, calc(100vw - 32px));
}

/*
  La notification éphémère était Anthracite : un gris neutre posé à côté d'une
  interface verte se voit comme une pièce d'un autre jeu. Elle passe au vert le
  plus sombre de la marque, avec un filet clair pour détacher le panneau du
  contenu qui défile derrière.
*/
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--filet-clair-fort);
  border-radius: var(--radius-lg);
  background: var(--vert-abysse);
  color: var(--sur-sombre);
  box-shadow: var(--shadow-modal);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes mone-toast {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
  }

  .toast { animation: mone-toast 220ms cubic-bezier(.2, .8, .3, 1) both; }
}

.toast__titre { font-size: 13.5px; font-weight: 650; color: var(--blanc); }
.toast__texte { font-size: 12.5px; color: var(--sur-sombre-2); }
.toast__fermer { margin-left: auto; background: none; border: none; color: inherit; opacity: .6; cursor: pointer; }
.toast__fermer:hover { opacity: 1; }
.toast--succes .icone { color: #6FD1A5; }
.toast--erreur .icone { color: #E8919C; }

/* -----------------------------------------------------------------------------
   Jauge budgétaire
-------------------------------------------------------------------------- */
.jauge + .jauge { margin-top: var(--sp-4); }

.jauge__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.jauge__libelle { font-size: 13px; font-weight: 650; letter-spacing: -.008em; }

.jauge__valeurs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}

/* La piste est creusée d'un pixel : sans ce creux, une piste et son
   remplissage à 100 % se confondent en une seule barre plate. */
.jauge__piste {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pilule);
  background: var(--sauge-brume);
  overflow: hidden;
}

.jauge__remplissage {
  height: 100%;
  border-radius: inherit;
  background: var(--sauge);
  transition: width var(--transition-panneau);
}

.jauge--attention .jauge__remplissage { background: linear-gradient(90deg, #96690A, var(--statut-attente)); }
.jauge--alerte .jauge__remplissage { background: linear-gradient(90deg, #73202C, var(--rouge-brique)); }

.jauge__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

/* -----------------------------------------------------------------------------
   Frise de workflow
-------------------------------------------------------------------------- */
.frise { display: flex; flex-direction: column; }

.frise__etape {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

.frise__etape:last-child { padding-bottom: 0; }

.frise__etape::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13px;
  width: 2px;
  border-radius: 1px;
  background: var(--filet);
}

.frise__etape:last-child::before { display: none; }

.frise__puce {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blanc);
  border: 1.5px solid var(--filet-appuye);
  color: var(--gris-moyen);
  box-shadow: 0 0 0 4px var(--surface);
}

.frise__etape--faite .frise__puce { background: var(--statut-ok); border-color: var(--statut-ok); color: var(--blanc); }
.frise__etape--courante .frise__puce { background: var(--statut-attente); border-color: var(--statut-attente); color: var(--blanc); }
.frise__etape--rejetee .frise__puce { background: var(--rouge-brique); border-color: var(--rouge-brique); color: var(--blanc); }

.frise__corps { min-width: 0; padding-top: 4px; }
.frise__titre { font-size: 13.5px; font-weight: 650; letter-spacing: -.008em; }
.frise__meta { font-size: var(--fs-small); color: var(--gris-moyen); }

.frise__commentaire {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--filet-appuye);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-creuse);
  font-size: 12.5px;
  color: #3C3C3C;
}

/*
  Étape non encore atteinte. Elle était composée en #CCCCCC — la couleur
  « désactivé » du §10.2, qui vaut pour un bouton mais pas pour du texte : sur
  blanc elle plafonne à 1,6:1, donc illisible pour qui lit mal. L'étape reste
  visiblement en attente par sa graisse et sa puce vide, pas par un gris
  illisible : le titre repasse en Gris Moyen (5,7:1) et seule la puce garde le
  ton effacé.
*/
.frise__etape--attente .frise__titre {
  font-weight: 500;
  color: var(--gris-moyen);
}

.frise__etape--attente .frise__meta { color: var(--gris-moyen); }
.frise__etape--attente .frise__puce { border-color: var(--filet); color: var(--desactive); }

/* -----------------------------------------------------------------------------
   État vide
-------------------------------------------------------------------------- */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

.etat-vide__pictogramme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sauge-brume);
  box-shadow: inset 0 0 0 1px var(--sauge-pale);
  color: var(--sauge-fonce);
}

.etat-vide__titre { font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: -.012em; }
.etat-vide__texte { font-size: 13px; color: var(--gris-moyen); max-width: 46ch; }

/* -----------------------------------------------------------------------------
   Squelette de chargement
-------------------------------------------------------------------------- */
.squelette {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-creuse) 25%, #ECEFEC 37%, var(--surface-creuse) 63%);
  background-size: 400% 100%;
  animation: squelette-defilement 1.4s ease infinite;
}

.squelette--ligne { height: 12px; }
.squelette--titre { height: 20px; width: 45%; }

@keyframes squelette-defilement {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* -----------------------------------------------------------------------------
   Carte de membre
-------------------------------------------------------------------------- */
/*
  Aperçu de la carte de membre. La version imprimée (format CR80, LOT 2) reste
  gouvernée par sa propre feuille : ici on ne montre qu'un aperçu à l'écran.
  Le liseré clair intérieur imite la découpe du support plastique.
*/
.carte-membre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(232, 224, 212, .16), transparent 55%),
    linear-gradient(150deg, var(--vert-abysse) 0%, var(--vert-foret) 55%, var(--vert-clair) 130%);
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--filet-clair-fort), var(--shadow-eleve);
}

.carte-membre__entete { display: flex; align-items: center; gap: var(--sp-3); }

.carte-membre__ong {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .75;
}

.carte-membre__nom { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: var(--sp-3); }

.carte-membre__matricule {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--beige-sable);
  font-variant-numeric: tabular-nums;
}

.carte-membre__lignes { display: flex; gap: var(--sp-5); margin-top: var(--sp-4); }

.carte-membre__cle {
  display: block;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .65;
}

.carte-membre__valeur { font-size: 12.5px; font-weight: 600; }

.carte-membre__qr {
  align-self: center;
  width: 80px;
  height: 80px;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: 0 2px 6px rgba(6, 28, 22, .35);
}

/* -----------------------------------------------------------------------------
   Graphiques
-------------------------------------------------------------------------- */
.graphique { position: relative; width: 100%; }
.graphique--haut { height: 260px; }
.graphique--moyen { height: 210px; }
.graphique--anneau { height: 200px; }

/* Graphique sans aucune valeur : une phrase centrée sur un aplat creux, à la
   hauteur prévue pour le graphique — la mise en page ne saute pas. */
.graphique--sans-donnees {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-creuse);
}

.graphique__vide {
  margin: 0;
  padding: var(--sp-4);
  font-size: 13px;
  color: var(--gris-moyen);
  text-align: center;
}

.legende { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }

.legende__element {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.legende__pastille { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   Onglets
-------------------------------------------------------------------------- */
.onglets {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}

.onglets__bouton {
  position: relative;
  padding: var(--sp-3) 0;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--gris-moyen);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition);
}

.onglets__bouton:hover { color: var(--anthracite); }

.onglets__bouton[aria-selected='true'] {
  color: var(--vert-foret);
  font-weight: 650;
}

/* Le trait actif est en sauge, comme la pilule de navigation : dans toute
   l'application, « vous êtes ici » se dit avec la même couleur. */
.onglets__bouton[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--sauge-fonce);
}

/* -----------------------------------------------------------------------------
   Menu déroulant
-------------------------------------------------------------------------- */
.menu { position: relative; }

.menu__panneau {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  max-width: min(340px, calc(100vw - 32px));
  padding: var(--sp-2);
  border: 1px solid var(--filet);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-flottant);
  z-index: var(--z-header);
}

.menu__element {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--anthracite);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

.menu__element:hover { background: var(--sauge-brume); color: var(--anthracite); }

.menu__element-texte { display: flex; flex-direction: column; min-width: 0; }

/* Notification non lue : titre plus gras, icône en sauge. */
.menu__element--non-lu .activite__texte { font-weight: 650; }
.menu__element--non-lu .icone { color: var(--sauge-fonce); }
.menu__element--destructif { color: var(--rouge-brique); }
.menu__element--destructif:hover { background: var(--statut-alerte-fond); color: var(--rouge-brique); }
.menu__separateur { height: 1px; margin: var(--sp-2) 0; background: var(--filet); }

.menu__entete {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--sp-2);
}

/* -----------------------------------------------------------------------------
   Liste d'activité
-------------------------------------------------------------------------- */
.activite { display: flex; flex-direction: column; }

.activite__element {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--filet);
}

.activite__element:last-child { border-bottom: none; padding-bottom: 0; }

.activite__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sauge-brume);
  box-shadow: inset 0 0 0 1px var(--sauge-pale);
  color: var(--sauge-fonce);
}

.activite__texte { font-size: 13px; }
.activite__meta { font-size: var(--fs-small); color: var(--gris-moyen); }

/* -----------------------------------------------------------------------------
   Tableaux en cartes sur mobile (jamais de défilement horizontal)
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tableau--adaptatif thead { display: none; }

  .tableau--adaptatif tbody tr {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--filet);
  }

  .tableau--adaptatif tbody td {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    /* Sans cela, un badge — pastille de statut ou de département — s'étirerait
       sur toute la largeur de la cellule et ressemblerait à une barre. */
    justify-items: start;
    padding: 0;
    border: none;
    text-align: left;
  }

  /* La cellule d'actions contient plusieurs boutons : en grille, chacun
     deviendrait un élément et passerait à la ligne. */
  .tableau--adaptatif tbody td.colonne-action {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* Le `width: 1%` du mode tableau écrase la cellule en mode carte : les
       boutons viendraient alors se superposer au libellé. */
    width: auto;
  }

  .tableau--adaptatif tbody td.colonne-action::before {
    width: 40%;
    flex: 0 0 auto;
  }

  .tableau--adaptatif tbody td::before {
    content: attr(data-libelle);
    font-size: var(--fs-label);
    font-weight: var(--fw-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--gris-moyen);
  }

  /* En mode carte, la première et la dernière cellule perdent la marge
     optique du mode tableau : elles sont déjà dans le rembourrage de la
     ligne-carte. */
  .tableau--adaptatif tbody td:first-child { padding-left: 0; }
  .tableau--adaptatif tbody td:last-child { padding-right: 0; }

  .tableau--adaptatif .colonne-nombre,
  .tableau--adaptatif .colonne-action { text-align: left; }

  .toasts { top: auto; bottom: var(--sp-4); right: var(--sp-4); left: var(--sp-4); width: auto; }
  .pagination { justify-content: center; }
}

/* =============================================================================
   Ajouts du LOT 1 — formulaires d'authentification, listes de synthèse, tuiles
   ========================================================================== */

.bouton--bloc { width: 100%; }

/* Action secondaire présentée comme un lien : même sémantique qu'un bouton
   (elle soumet un formulaire), même apparence qu'un lien pour ne pas concurrencer
   l'action primaire — une seule par écran (§10.2). */
.bouton-lien {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--gris-moyen);
  text-decoration: underline;
  cursor: pointer;
}

.bouton-lien:hover { color: var(--vert-foret); }

/* Action tertiaire posée dans un panneau clair : même géométrie qu'un bouton
   discret, sans son poids visuel. */
.bouton--fantome {
  background: transparent;
  border-color: transparent;
  color: var(--gris-moyen);
}

.bouton--fantome:hover { background: var(--vert-foret-04); color: var(--vert-foret); }

.formulaire { display: block; }

.liste-puces {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-4);
  list-style: none;
}

.liste-puces li {
  position: relative;
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.liste-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sauge);
}

.liste-definitions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
  align-items: center;
}

/*
  Liste de définitions : c'est ici que les capitales gardent leur emploi. Le
  terme est une **clé de donnée** (« Montant engagé », « Matricule »), pas une
  consigne : sa forme d'étiquette aide à le distinguer de la valeur qui lui
  fait face, alignée à droite en chasse fixe.
*/
.liste-definitions dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gris-moyen);
}

/*
  La valeur garde la police de texte. Passer **tout** `dd` en chasse fixe a été
  essayé et rejeté : « Membre actif », « Féminin » ou « Aucun » ne sont pas des
  nombres, et la chasse fixe leur donnait un air de sortie de terminal. Seule
  la référence — portée par `<code>` dans les gabarits — est en chasse fixe,
  et elle l'est déjà par base.css.
*/
.liste-definitions dd {
  margin: 0;
  text-align: right;
  font-size: var(--fs-body);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.liste-definitions dd.texte,
.liste-definitions dd code { font-weight: 600; }

/*
  Cellule qui porte une explication et non une simple valeur : ce n'est plus
  une paire clé/valeur alignée en colonne, donc elle prend la largeur entière
  et repasse à gauche. Sans cette règle, la phrase d'aide de « Mon profil » se
  composait sur 160 px, alignée à droite, en drapeau — illisible.
*/
.liste-definitions > div:has(.texte-petit) { grid-column: 1 / -1; }
.liste-definitions > div:has(.texte-petit) dd { text-align: left; }

/* Repli pour les moteurs sans `:has()` : le paragraphe passe au moins en bloc
   aligné à gauche au lieu de suivre l'alignement de la valeur. */
.liste-definitions dd .texte-petit {
  display: block;
  margin-top: var(--sp-1);
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
}

/* Tuile d'accès : raccourci vers un module autorisé. */
.tuile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-creuse);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--anthracite);
  transition: border-color var(--transition), background-color var(--transition);
}

.tuile:hover {
  background: var(--sauge-brume);
  border-color: var(--sauge-pale);
  color: var(--anthracite);
}

.tuile .icone { color: var(--sauge-fonce); flex: none; }

.tuile__contenu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tuile__libelle { font-size: var(--fs-body); font-weight: 650; letter-spacing: -.008em; }

.tuile__groupe {
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

/* =============================================================================
   LOT 2 — Membres, adhésions, référentiels
   =============================================================================
   Ajouts strictement limités à ce que les écrans du lot introduisent
   réellement. Tout le reste — cartes, badges, tableaux, formulaires, états
   vides — réutilise le design system du LOT 0 : un écran qui invente son
   propre style est un écran qui vieillira seul.
   ========================================================================== */

/* --- En-tête de page avec portrait ---------------------------------------- */
.entete-page__identite {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

/* --- Photo de membre ------------------------------------------------------ */
/* La miniature remplace la pastille d'initiales sans changer la géométrie :
   une liste dont les lignes changent de hauteur selon la présence d'une photo
   se lit mal. */
.avatar--photo {
  object-fit: cover;
  background: var(--gris-perle);
}

/* --- Barre de filtres ----------------------------------------------------- */
/* Les filtres sont des champs de formulaire GET : l'état de la liste vit dans
   l'URL, donc il se partage et survit à un rechargement. */
.filtres { display: grid; gap: var(--sp-4); }

.filtres__champs {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.filtres__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* --- Pied de carte et barre d'actions ------------------------------------- */
.carte__pied {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.barre-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* Formulaire court intégré à un panneau : champ + bouton sur la même ligne. */
.formulaire-en-ligne {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.formulaire-en-ligne .champ { flex: 1 1 220px; }

/* --- Carte critique ------------------------------------------------------- */
/* Rouge Brique en filet, jamais en aplat : la couleur signale la gravité de la
   zone sans rendre le texte illisible (§10.2). */
.carte--critique {
  border-left: 3px solid var(--rouge-brique);
  /* Le rayon de gauche est supprimé : un filet droit sur un angle arrondi de
     12 px laisse un éclat blanc en haut et en bas du trait. */
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* --- Secret affiché une seule fois ---------------------------------------- */
/* Mot de passe temporaire : caractères espacés et police à chasse fixe, parce
   qu'il sera recopié à la main ou dicté au téléphone. Le `user-select` reste
   actif — c'est bien de le copier qu'il s'agit. */
.secret-affiche {
  margin: var(--sp-3) 0;
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface-creuse);
  border: 1.5px dashed var(--rouge-brique);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  word-break: break-all;
}

.matricule-evidence {
  margin: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: .04em;
}

/* --- Onglets serveur ------------------------------------------------------ */
/* Variante « liens » de `.onglets` : chaque onglet porte un `?onglet=`, ce qui
   permet à l'écran de fonctionner sans JavaScript. */
.onglets__liste {
  display: flex;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.onglets__lien {
  display: inline-block;
  padding: var(--sp-3) 0;
  color: var(--gris-moyen);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.onglets__lien:hover { color: var(--anthracite); }

.onglets__lien[data-actif='true'] {
  color: var(--vert-foret);
  font-weight: 650;
  border-bottom-color: var(--sauge-fonce);
}

/* --- Textes longs et listes d'étapes -------------------------------------- */
.texte-long {
  max-width: 68ch;
  line-height: var(--lh-base);
  white-space: pre-line;
}

.liste-etapes {
  margin: var(--sp-3) 0 var(--sp-4);
  padding-left: var(--sp-5);
  line-height: var(--lh-base);
}

.liste-etapes li + li { margin-top: var(--sp-2); }

/*
  Rapport de contrôle de clôture (LOT 5, §7.8) : un verdict par ligne, son
  détail dessous, et le lien vers l'écran qui le résout à droite. Une liste de
  blocages sans lien vers leur correction est un reproche, pas un outil.
*/
.liste-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.liste-controles__ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--filet);
}

.liste-controles__ligne:last-child { border-bottom: none; padding-bottom: 0; }
.liste-controles__ligne > div { flex: 1; }
.liste-controles__titre { margin: 0; font-weight: 600; }

/* =============================================================================
   Planning du parc (LOT 8, §7.3)
   -----------------------------------------------------------------------------
   Le premier écran du projet à demander un positionnement bidimensionnel. La
   tentation du `style="grid-column: 3 / 5"` généré en gabarit est forte, et elle
   est refusée (écart 2, tenu depuis le LOT 0) : la position d'un créneau passe
   par **deux classes utilitaires**, `creneau--debut-{n}` et `creneau--duree-{n}`,
   déclarées ici une fois pour toutes.

   Les colonnes sont les unités de temps. `--planning-colonnes` porte leur
   nombre, posé par `.planning--{n}-colonnes` : sept en vue semaine, vingt-huit à
   trente et un en vue mois.
   ============================================================================= */
.planning {
  --planning-colonnes: 7;
  --planning-vehicule: 12rem;
  display: grid;
  gap: var(--sp-2);
  overflow: hidden;
}

.planning--28-colonnes { --planning-colonnes: 28; }
.planning--29-colonnes { --planning-colonnes: 29; }
.planning--30-colonnes { --planning-colonnes: 30; }
.planning--31-colonnes { --planning-colonnes: 31; }

.planning__entete,
.planning__ligne {
  display: grid;
  grid-template-columns: var(--planning-vehicule) 1fr;
  align-items: center;
  gap: var(--sp-3);
}

.planning__entete {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--filet-appuye);
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

/*
  L'en-tête porte ses jours dans une sous-grille de même largeur que la piste :
  sans cela, les colonnes de dates et les créneaux dériveraient l'un par rapport
  à l'autre, et le planning mentirait d'un jour.
*/
.planning__entete > .planning__jour:first-of-type { grid-column: 2; }

.planning__entete .planning__jour,
.planning__piste {
  grid-column: 2;
}

.planning__entete {
  grid-template-columns: var(--planning-vehicule) repeat(var(--planning-colonnes), 1fr);
}

.planning__entete .planning__jour {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.planning__jour-nom { font-weight: 600; }
.planning__jour-date { color: var(--gris-moyen); }

.planning__ligne {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--filet);
}

.planning__ligne:last-child { border-bottom: none; }

.planning__vehicule {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
}

.planning__piste {
  display: grid;
  grid-template-columns: repeat(var(--planning-colonnes), 1fr);
  grid-auto-rows: minmax(2.25rem, auto);
  gap: var(--sp-1);
  min-height: 2.25rem;
}

.creneau {
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.25;
  overflow: hidden;
}

/*
  Trois tons distincts (§7.3). La maintenance emprunte la Terre Cuite et non le
  Rouge Brique : une révision planifiée n'est pas une panne, et la couleur ne
  doit pas faire croire à une immobilisation subie.
*/
.creneau--planifie   { background: var(--vert-foret-08); border-left: 3px solid var(--vert-foret); border-radius: 0 var(--radius) var(--radius) 0; }
.creneau--en-cours   { background: var(--statut-ok-fond); border-left: 3px solid var(--statut-ok); border-radius: 0 var(--radius) var(--radius) 0; }
.creneau--maintenance { background: var(--terre-cuite-12); border-left: 3px solid var(--terre-cuite); border-radius: 0 var(--radius) var(--radius) 0; }

.creneau__lien { color: inherit; text-decoration: none; display: block; }
.creneau__lien:hover { text-decoration: underline; }
.creneau__motif { display: block; font-weight: 600; }
.creneau__dates { display: block; color: var(--gris-moyen); }

/* Colonne de départ — 1 à 31, la plus longue fenêtre du planning. */
.creneau--debut-1  { grid-column-start: 1; }
.creneau--debut-2  { grid-column-start: 2; }
.creneau--debut-3  { grid-column-start: 3; }
.creneau--debut-4  { grid-column-start: 4; }
.creneau--debut-5  { grid-column-start: 5; }
.creneau--debut-6  { grid-column-start: 6; }
.creneau--debut-7  { grid-column-start: 7; }
.creneau--debut-8  { grid-column-start: 8; }
.creneau--debut-9  { grid-column-start: 9; }
.creneau--debut-10 { grid-column-start: 10; }
.creneau--debut-11 { grid-column-start: 11; }
.creneau--debut-12 { grid-column-start: 12; }
.creneau--debut-13 { grid-column-start: 13; }
.creneau--debut-14 { grid-column-start: 14; }
.creneau--debut-15 { grid-column-start: 15; }
.creneau--debut-16 { grid-column-start: 16; }
.creneau--debut-17 { grid-column-start: 17; }
.creneau--debut-18 { grid-column-start: 18; }
.creneau--debut-19 { grid-column-start: 19; }
.creneau--debut-20 { grid-column-start: 20; }
.creneau--debut-21 { grid-column-start: 21; }
.creneau--debut-22 { grid-column-start: 22; }
.creneau--debut-23 { grid-column-start: 23; }
.creneau--debut-24 { grid-column-start: 24; }
.creneau--debut-25 { grid-column-start: 25; }
.creneau--debut-26 { grid-column-start: 26; }
.creneau--debut-27 { grid-column-start: 27; }
.creneau--debut-28 { grid-column-start: 28; }
.creneau--debut-29 { grid-column-start: 29; }
.creneau--debut-30 { grid-column-start: 30; }
.creneau--debut-31 { grid-column-start: 31; }

/* Durée en colonnes couvertes — bornée à la fenêtre par le contrôleur. */
.creneau--duree-1  { grid-column-end: span 1; }
.creneau--duree-2  { grid-column-end: span 2; }
.creneau--duree-3  { grid-column-end: span 3; }
.creneau--duree-4  { grid-column-end: span 4; }
.creneau--duree-5  { grid-column-end: span 5; }
.creneau--duree-6  { grid-column-end: span 6; }
.creneau--duree-7  { grid-column-end: span 7; }
.creneau--duree-8  { grid-column-end: span 8; }
.creneau--duree-9  { grid-column-end: span 9; }
.creneau--duree-10 { grid-column-end: span 10; }
.creneau--duree-11 { grid-column-end: span 11; }
.creneau--duree-12 { grid-column-end: span 12; }
.creneau--duree-13 { grid-column-end: span 13; }
.creneau--duree-14 { grid-column-end: span 14; }
.creneau--duree-15 { grid-column-end: span 15; }
.creneau--duree-16 { grid-column-end: span 16; }
.creneau--duree-17 { grid-column-end: span 17; }
.creneau--duree-18 { grid-column-end: span 18; }
.creneau--duree-19 { grid-column-end: span 19; }
.creneau--duree-20 { grid-column-end: span 20; }
.creneau--duree-21 { grid-column-end: span 21; }
.creneau--duree-22 { grid-column-end: span 22; }
.creneau--duree-23 { grid-column-end: span 23; }
.creneau--duree-24 { grid-column-end: span 24; }
.creneau--duree-25 { grid-column-end: span 25; }
.creneau--duree-26 { grid-column-end: span 26; }
.creneau--duree-27 { grid-column-end: span 27; }
.creneau--duree-28 { grid-column-end: span 28; }
.creneau--duree-29 { grid-column-end: span 29; }
.creneau--duree-30 { grid-column-end: span 30; }
.creneau--duree-31 { grid-column-end: span 31; }

.champ__controle--court { max-width: 8rem; display: inline-block; }

/* Sous 768 px, les cartes reprennent le rembourrage de la charte moins un
   cran : 24 px de marge intérieure sur un écran de 360 px ne laissent que
   312 px de contenu. */
@media (max-width: 767px) {
  .carte { padding: var(--sp-4); }
  .kpi { padding: var(--sp-4); }
  .barre-outils,
  .pagination { padding-inline: var(--sp-4); }
  .tableau thead th:first-child,
  .tableau tbody td:first-child { padding-left: var(--sp-4); }
  .tableau thead th:last-child,
  .tableau tbody td:last-child { padding-right: var(--sp-4); }
  .modale__boite { padding: var(--sp-5); }
}

/*
  Sous 768 px, la grille temporelle devient une **liste chronologique par
  véhicule** (§7.3). Une grille de trente et une colonnes ne se lit pas sur un
  téléphone, et la contorsionner produirait un défilement horizontal — interdit
  depuis le LOT 0 (§10.3).
*/
@media (max-width: 768px) {
  .planning__entete { display: none; }

  .planning__ligne {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .planning__piste {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* Les classes de position n'ont plus de grille où s'appliquer : la liste
     suit l'ordre chronologique rendu par le serveur. */
  .creneau { width: 100%; }
}

/* =============================================================================
   Icônes bicolores par domaine
   =============================================================================
   `data-domaine` pose trois variables ; tout ce qui contient une icône les
   lit. Les rangées d'indicateurs alternent les domaines, de sorte que quatre
   cartes côte à côte ne portent jamais quatre fois la même pastille.
   ========================================================================== */
[data-domaine],
.ton-associatif  { --domaine-encre: var(--associatif-encre);  --domaine-fond: var(--associatif-fond);  --domaine-teinte: var(--associatif-teinte); }
[data-domaine='finances'],
.ton-finances    { --domaine-encre: var(--finances-encre);    --domaine-fond: var(--finances-fond);    --domaine-teinte: var(--finances-teinte); }
[data-domaine='activites'],
.ton-activites   { --domaine-encre: var(--activites-encre);   --domaine-fond: var(--activites-fond);   --domaine-teinte: var(--activites-teinte); }
[data-domaine='logistique'],
.ton-logistique  { --domaine-encre: var(--logistique-encre);  --domaine-fond: var(--logistique-fond);  --domaine-teinte: var(--logistique-teinte); }
[data-domaine='institution'],
.ton-institution { --domaine-encre: var(--institution-encre); --domaine-fond: var(--institution-fond); --domaine-teinte: var(--institution-teinte); }

/* Indicateurs : rotation des tons sur la rangée. */
.grille--kpi > .kpi:nth-child(4n + 1) .kpi__icone,
.tdb-tuiles > .tdb-tuile:nth-child(4n + 1) .tdb-tuile__icone { --domaine-encre: var(--associatif-encre);  --domaine-fond: var(--associatif-fond);  --domaine-teinte: var(--associatif-teinte); }
.grille--kpi > .kpi:nth-child(4n + 2) .kpi__icone,
.tdb-tuiles > .tdb-tuile:nth-child(4n + 2) .tdb-tuile__icone { --domaine-encre: var(--finances-encre);    --domaine-fond: var(--finances-fond);    --domaine-teinte: var(--finances-teinte); }
.grille--kpi > .kpi:nth-child(4n + 3) .kpi__icone,
.tdb-tuiles > .tdb-tuile:nth-child(4n + 3) .tdb-tuile__icone { --domaine-encre: var(--activites-encre);   --domaine-fond: var(--activites-fond);   --domaine-teinte: var(--activites-teinte); }
.grille--kpi > .kpi:nth-child(4n + 4) .kpi__icone,
.tdb-tuiles > .tdb-tuile:nth-child(4n + 4) .tdb-tuile__icone { --domaine-encre: var(--logistique-encre);  --domaine-fond: var(--logistique-fond);  --domaine-teinte: var(--logistique-teinte); }

.kpi__icone {
  background: var(--domaine-teinte, var(--sauge-brume));
  color: var(--domaine-encre, var(--sauge-fonce));
  box-shadow: none;
  --icone-fond: var(--domaine-fond, var(--sauge));
  --icone-fond-opacite: .75;
}

.kpi__icone .icone { width: 22px; height: 22px; }

/* Navigation : chaque groupe porte sa couleur. Le lien actif repasse en blanc
   sur la pilule sauge, second ton compris. */
.sidebar__lien .icone {
  width: 20px;
  height: 20px;
  color: var(--domaine-encre, var(--sauge-fonce));
  --icone-fond: var(--domaine-fond, var(--sauge));
  --icone-fond-opacite: .6;
}

.sidebar__lien:hover .icone { color: var(--domaine-encre, var(--sauge-fonce)); --icone-fond-opacite: .85; }
.sidebar__lien[aria-current='page'] .icone { color: var(--blanc); --icone-fond: var(--blanc); --icone-fond-opacite: .35; }

/* Pastilles d'état et de menus : second ton plus présent que le défaut. */
.etat-vide__pictogramme .icone,
.activite__pastille .icone,
.menu__element .icone,
.alerte .icone { --icone-fond-opacite: .3; }