/* FICHIER RECOPIÉ — NE PAS MODIFIER ICI.
   Source : brand/planche.css · Recopie : node brand/sync.mjs
   Une retouche faite dans cette copie est écrasée au prochain sync, et fait
   diverger le site de l'application entre-temps. */
/* ============================================================================
   OCC MIND — LES PRIMITIVES
   ----------------------------------------------------------------------------
   Le vocabulaire commun au site et à l'application. `brand/tokens.css` donne la
   matière (couleurs, polices, verre, ombres) ; ce fichier donne les FORMES.

   Il se lit avec `brand/planche.html`, qui n'invente rien : chaque bloc de la
   planche est une classe d'ici, rendue à sa taille réelle. Une primitive qui
   n'apparaît pas sur la planche n'existe pas — c'est ce qui empêche un
   quinzième bouton de naître dans un coin d'écran.

   Les échelles (--fs-*, --sp-*, --r-*) ne sont PAS définies ici : chaque
   produit pose la sienne. Le site respire, l'application travaille.
   ============================================================================ */

/* --- Base ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--chaux);
  background: var(--nuit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--terre);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover {
  color: var(--braise);
}

button {
  font: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Le clavier n'est pas un mode dégradé. */
:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* La barre de défilement fait partie de la marque : fine, Filet, sans piste. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--filet-clair);
  border-radius: var(--r-lg);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--galet-fonce);
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

::selection {
  background: var(--terre-a40);
  color: var(--chaux);
}

/* --- Typographie -----------------------------------------------------------
   Trois voix, une seule grille. Le titrage est TOUJOURS en capitales : c'est
   Archivo qui porte l'identité, et Archivo en bas-de-casse ressemble à
   n'importe quelle grotesque. */

/* `overflow-wrap: break-word` sur les trois titres, et ce n'est pas de la
   prudence décorative : Archivo 800 en capitales est LARGE. « CONFIDENTIALITÉ »
   mesure 411 px dans une colonne de 358 en 390 px de large — un seul mot, aucun
   endroit où revenir à la ligne, et c'est la page entière qui part hors de
   l'écran. Un titre coupé est laid ; une page qui défile latéralement est
   cassée. */
.titre-section,
h1.titre-section,
h2.titre-section {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: var(--tr-titre);
  text-transform: uppercase;
  color: var(--chaux);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.titre-ecran {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
  margin: 0;
  overflow-wrap: break-word;
}

/* Le nom d'un agent. Toujours Archivo 800, jamais en capitales : c'est un
   prénom, et un prénom crié n'est plus un prénom. */
.nom-agent {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
  margin: 0;
  overflow-wrap: break-word;
}

/* Le sur-titre. Il se pose AU-DESSUS d'un titre de bloc, jamais seul, jamais
   deux fois dans la même colonne. C'est le marqueur le plus reconnaissable du
   système : capitales minuscules, très espacées, en Terre d'Oc. */
.surtitre {
  display: block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 var(--sp-4);
}
.surtitre.neutre {
  color: var(--galet-fonce);
}

.chapo {
  font-size: var(--fs-xl);
  line-height: 1.62;
  color: var(--galet);
  margin: 0;
  max-width: 65ch;
  text-wrap: pretty;
}

.texte {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--galet);
  max-width: 65ch;
}
.texte strong {
  color: var(--chaux);
  font-weight: 600;
}

.legende {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--galet-fonce);
}

/* Les données. Chiffres tabulaires, toujours : deux colonnes de montants qui
   ne s'alignent pas se lisent comme deux montants différents. */
.donnee {
  font-family: var(--font-donnee);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--galet);
}

/* Le grand chiffre d'un indicateur. Archivo, pas Plex : ici le chiffre est un
   titre, il ne s'aligne avec rien. */
.chiffre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--tr-titre);
  font-variant-numeric: tabular-nums;
  color: var(--chaux);
}

/* --- Le verre --------------------------------------------------------------
   Le SEUL vocabulaire de profondeur. Trois épaisseurs, et rien d'autre :
   panneau (le rail, les barres), carte (ce qu'on lit), relief (ce qui flotte —
   menu, infobulle, dialogue). */

.verre {
  position: relative;
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r-lg);
  box-shadow: var(--arete), var(--sh-2);
}

/* La carte : Ardoise pleine plutôt que du verre. C'est le fond de travail, il
   ne doit pas laisser passer la trame — la charte l'interdit derrière du texte
   courant, et une carte EST du texte courant. */
.carte {
  position: relative;
  background: var(--ardoise);
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  box-shadow: var(--arete), var(--sh-1);
  transition:
    border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.carte.cliquable {
  cursor: pointer;
}
.carte.cliquable:hover {
  background: var(--ardoise-haut);
  border-color: var(--filet-clair);
  transform: translateY(-2px);
  box-shadow: var(--arete-forte), var(--sh-3);
}

/* Le relief : ce qui flotte au-dessus de tout. Toujours du verre, jamais une
   carte — un menu opaque posé sur un écran opaque n'a aucune profondeur. */
.relief {
  background: var(--verre-haut);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord-clair);
  border-radius: var(--r-md);
  box-shadow: var(--arete-forte), var(--sh-4);
}

/* Le repli. `backdrop-filter` absent — GPU coupé, vieux WebView Android,
   Firefox mobile d'avant 2022 — et une surface à 5 % de blanc laisse passer
   tout ce qui est derrière : la trame vient rayer le texte. L'écran n'est pas
   dégradé, il est illisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre,
  .relief {
    background: var(--verre-repli);
  }
}

/* L'accent de bloc. Un filet de 3 px, en haut ou à gauche, à la couleur du
   pôle concerné — et UN SEUL par carte. */
.accent-haut::before,
.accent-gauche::before {
  content: '';
  position: absolute;
  background: var(--accent, var(--terre));
  border-radius: var(--r-pill);
}
.accent-haut::before {
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.accent-gauche::before {
  inset: var(--sp-5) auto var(--sp-5) 0;
  width: 3px;
}

/* Le filet horizontal. Il s'éteint aux deux bouts : un trait qui bute sur le
   bord d'une carte ressemble à une erreur de découpe. */
.filet {
  height: 1px;
  border: 0;
  margin: var(--sp-7) 0;
  background: linear-gradient(90deg, transparent, var(--filet) 12%, var(--filet) 88%, transparent);
}

/* --- Boutons ---------------------------------------------------------------
   Quatre, et c'est un plafond. Le primaire est ORANGE, et il y en a UN SEUL
   par écran : c'est ce qui fait que l'orange veut encore dire quelque chose. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: 0 var(--sp-7);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--chaux);
  /* `nowrap` est juste en large — un libellé de bouton cassé en trois lignes au
     milieu d'un écran vide est laid, et il l'était. Mais en étroit, un bouton
     qui refuse de revenir à la ligne pousse la PAGE ENTIÈRE hors de l'écran :
     « Ce qu'on garantit, et ce qu'on ne garantit pas » débordait de 5 px en
     390, et tout le site défilait latéralement — pour un bouton.
     D'où la règle en deux temps, plus bas : nowrap par défaut, retour à la
     ligne autorisé sous 560 px. `max-width` tient dans les deux cas. */
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn.primaire {
  background: var(--terre);
  color: var(--chaux);
  box-shadow: var(--sh-terre);
}
.btn.primaire:hover:not([disabled]) {
  background: var(--braise);
  box-shadow: var(--sh-terre), var(--sh-2);
}

.btn.contour {
  border-color: var(--filet-clair);
  color: var(--chaux);
  background: var(--verre);
}
.btn.contour:hover:not([disabled]) {
  border-color: var(--terre);
  color: var(--terre);
}

.btn.discret {
  color: var(--galet);
  padding: 0 var(--sp-5);
}
.btn.discret:hover:not([disabled]) {
  color: var(--chaux);
  background: rgba(255, 255, 255, 0.05);
}

.btn.danger {
  border-color: rgba(226, 86, 76, 0.4);
  color: var(--erreur);
  background: var(--erreur-fond);
}
.btn.danger:hover:not([disabled]) {
  background: var(--erreur);
  color: var(--chaux);
  border-color: var(--erreur);
}

.btn.petit {
  min-height: 34px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-xs);
}

.rangee-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* Le second temps de la règle : sous 560 px, un libellé long revient à la ligne
   plutôt que de faire défiler la page entière. `min-height` laisse le bouton
   grandir, donc rien ne casse. Le libellé doit rester court — mais la primitive
   ne doit pas pouvoir crever une page quand il ne l'est pas. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    text-wrap: balance;
  }
}

/* --- Pastilles d'état ------------------------------------------------------
   Le libellé porte l'information, la couleur ne fait que la répéter. Une
   pastille lue en niveaux de gris doit rester compréhensible. */

.etat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-donnee);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--filet);
  background: rgba(255, 255, 255, 0.03);
  color: var(--galet);
  white-space: nowrap;
}
.etat.succes {
  color: var(--succes);
  border-color: rgba(78, 201, 127, 0.35);
  background: var(--succes-fond);
}
.etat.alerte {
  color: var(--alerte);
  border-color: rgba(232, 163, 61, 0.35);
  background: var(--alerte-fond);
}
.etat.erreur {
  color: var(--erreur);
  border-color: rgba(226, 86, 76, 0.35);
  background: var(--erreur-fond);
}
.etat.encours {
  color: var(--terre);
  border-color: var(--terre-a24);
  background: var(--terre-a06);
}

/* Le point qui bat : « ça se passe MAINTENANT ». Il ne décore pas — un point
   qui bat sur une ligne terminée est un mensonge d'interface. */
.etat.encours::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  animation: battement 2s var(--ease) infinite;
}
@keyframes battement {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.75);
  }
}

/* --- Portraits d'agent -----------------------------------------------------
   UNE SEULE REPRÉSENTATION. Le portrait photoréaliste est la seule image
   officielle d'un agent : partout, la même image. Pas de version redessinée,
   pas d'icône de substitution. En très petite taille on recadre en cercle
   serré — on ne remplace jamais par autre chose.

   Le cadre porte la couleur du PÔLE. C'est le seul endroit de l'interface où
   une couleur de pôle touche un agent, et c'est voulu : elle dit d'où il vient,
   son visage dit qui il est. */

.portrait {
  --taille: 44px;
  position: relative;
  flex: none;
  width: var(--taille);
  height: var(--taille);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--nuit);
  border: 1px solid var(--accent, var(--filet-clair));
  box-shadow: var(--sh-1);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait.rond {
  border-radius: 50%;
}
.portrait.xs {
  --taille: 28px;
  border-radius: 50%;
}
.portrait.sm {
  --taille: 36px;
}
.portrait.lg {
  --taille: 72px;
  border-radius: var(--r-lg);
}
.portrait.xl {
  --taille: 128px;
  border-radius: var(--r-lg);
}

/* --- La carte d'agent ------------------------------------------------------ */

.carte-agent {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  overflow: hidden;
}
.carte-agent .entete {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.carte-agent .fonction {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--accent, var(--terre));
  margin: 0 0 var(--sp-1);
}
.carte-agent .citation {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--chaux);
  margin: 0;
}
.carte-agent .traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Les traits de caractère d'un agent SONT des étiquettes : une seule forme, une
   seule définition. Deux dessins pour la même chose, c'est une fiche d'agent qui
   ne ressemble pas à la carte d'agent d'à côté, et personne ne sait dire
   pourquoi. Seule la casse change ici — un trait de caractère se lit en petites
   capitales, un filtre non. */
.carte-agent .traits li {
  font-family: var(--font-donnee);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--galet-fonce);
}

/* --- La ligne de mission ---------------------------------------------------
   Le motif le plus employé de la plateforme : un portrait, ce qui se passe, qui
   s'en occupe, où ça en est. On nomme l'AGENT, jamais « le système » ni
   « l'IA ». */

.ligne-mission {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  width: 100%;
  text-align: left;
}
.ligne-mission .quoi {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-base);
  color: var(--chaux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne-mission .qui {
  color: var(--accent, var(--terre));
}
.ligne-mission .qui::before {
  content: ' · ';
  color: var(--galet-fonce);
}

/* --- Indicateur ------------------------------------------------------------ */

.indicateur {
  padding: var(--sp-6) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.indicateur .libelle {
  font-size: var(--fs-sm);
  color: var(--galet);
}
.indicateur .delta {
  font-family: var(--font-donnee);
  font-size: var(--fs-xs);
  color: var(--succes);
}
.indicateur .delta.neutre {
  color: var(--galet-fonce);
}

/* --- Champs ---------------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.champ > label {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--galet);
}
.champ input,
.champ textarea,
.champ select {
  min-height: var(--touch);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  color: var(--chaux);
  font-size: var(--fs-base);
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
.champ textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--galet-fonce);
}
.champ input:hover,
.champ textarea:hover {
  border-color: var(--filet-clair);
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--terre);
  background: rgba(255, 255, 255, 0.05);
}
.champ .aide {
  font-size: var(--fs-sm);
  color: var(--galet-fonce);
}

/* --- L'interrupteur -------------------------------------------------------- */

.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
}
.interrupteur .piste {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--filet);
  border: 1px solid var(--filet-clair);
  transition: background-color var(--t-fast) var(--ease);
}
.interrupteur .piste::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--galet);
  transition:
    transform var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
.interrupteur.actif .piste {
  background: var(--terre);
  border-color: var(--terre);
}
.interrupteur.actif .piste::after {
  transform: translateX(18px);
  background: var(--chaux);
}

/* --- Le vide --------------------------------------------------------------- */

.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  color: var(--galet);
}
.vide .titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
}

/* --- Le bandeau de réassurance ---------------------------------------------
   Quatre preuves, en bas de chaque page. Les quatre, dans cet ordre, jamais
   trois. */

.reassurance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.reassurance > div {
  padding: var(--sp-6);
  border-top: 1px solid var(--filet);
}
.reassurance .titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: var(--sp-3);
}
.reassurance p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--galet);
}
@media (max-width: 780px) {
  .reassurance {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Le logo ---------------------------------------------------------------
   Zone de protection — X : un vide égal à la MOITIÉ DE LA HAUTEUR du symbole
   tout autour du bloc. Aucun texte, aucune image, aucun bord de page dedans.
   Interdits : déformer, faire pivoter, recolorer le symbole en couleur de pôle,
   l'inscrire dans une pastille, lui ajouter une ombre ou un contour. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-titre);
  font-weight: 800;
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo svg,
.logo img {
  /* Symbole à hauteur de capitale × 1,3. */
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

/* ============================================================================
   LE VOCABULAIRE PARTAGÉ DES ÉCRANS
   ----------------------------------------------------------------------------
   Ces classes-là gardent leur ANCIEN NOM, et c'est délibéré. `.tabs`, `.chip`,
   `.savebar`, `.md` sont déjà écrits dans des dizaines de fichiers `.tsx` : les
   renommer obligerait à toucher chaque vue pour ne rien changer d'autre que le
   nom, et un renommage de masse au milieu d'une refonte est le meilleur moyen
   d'en casser une moitié.

   Ce qui change, c'est leur APPARENCE, pas leur nom. Et le fait qu'elles vivent
   ici plutôt que dans huit feuilles d'écran : trois écrans qui inventent chacun
   leurs onglets, c'est trois hauteurs de barre différentes sur trois onglets qui
   se suivent — et c'est précisément de là que vient l'impression d'amateurisme,
   pas d'un manque de style.
   ============================================================================ */

/* --- Onglets ---------------------------------------------------------------
   L'onglet actif est marqué par un TRAIT, pas par un fond : un fond plein
   demande une couleur, et la seule disponible est Terre d'Oc, qui est réservée
   au bouton primaire — un écran avec quatre onglets aurait quatre accents. */

.tabs {
  display: flex;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--filet);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs button,
.tabs a {
  position: relative;
  flex: none;
  padding: var(--sp-4) 0;
  border: 0;
  background: none;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  color: var(--galet);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.tabs button:hover,
.tabs a:hover {
  color: var(--chaux);
}
.tabs button[aria-selected='true'],
.tabs button.on,
.tabs a[aria-current='page'] {
  color: var(--chaux);
}
.tabs button[aria-selected='true']::after,
.tabs button.on::after,
.tabs a[aria-current='page']::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--terre);
  border-radius: var(--r-pill);
}

/* Les onglets segmentés : un choix court et exclusif, pas une navigation. */
.seg-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
}
.seg-tabs button {
  border: 0;
  background: none;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-xs);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--galet);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.seg-tabs button[aria-selected='true'],
.seg-tabs button.on {
  background: var(--ardoise-haut);
  color: var(--chaux);
  box-shadow: var(--arete);
}

/* --- Pastilles de comptage et étiquettes ----------------------------------- */

.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--terre);
  color: var(--chaux);
  font-family: var(--font-donnee);
  font-size: var(--fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Zéro chose à faire ne se signale pas : une pastille à « 0 » demande de
   l'attention pour dire qu'il n'y en a pas à donner. */
.count-pill.vide,
.count-pill:empty {
  display: none;
}

.chip,
.carte-agent .traits li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--galet);
  font-size: var(--fs-xs);
  white-space: nowrap;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.chip.on,
.chip[aria-pressed='true'] {
  border-color: var(--terre);
  color: var(--terre);
  background: var(--terre-a06);
}

/* --- Le tableau ------------------------------------------------------------
   Chiffres tabulaires et alignement à droite sur les colonnes numériques : deux
   montants qui ne s'alignent pas se lisent comme deux montants différents.
   L'en-tête ne bouge pas au défilement — une colonne dont on a perdu le titre
   est une colonne qu'on relit en remontant. */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.tableau th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ardoise);
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--galet-fonce);
  border-bottom: 1px solid var(--filet);
  white-space: nowrap;
}
.tableau td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--filet);
  color: var(--galet);
  vertical-align: top;
}
.tableau tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}
.tableau tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.tableau td.nombre,
.tableau th.nombre {
  text-align: right;
  font-family: var(--font-donnee);
  font-variant-numeric: tabular-nums;
  color: var(--chaux);
}
.tableau td.principal {
  color: var(--chaux);
}

/* En étroit, un tableau de données défile DANS SA BOÎTE.
   Sans ça, cinq colonnes de tarifs poussent la page entière hors de l'écran et
   c'est tout le site qui défile latéralement — la page de tarifs débordait de
   174 px en 390. `display: block` est le seul moyen de le faire depuis le
   tableau lui-même, sans exiger de chaque écran qu'il pense à l'envelopper : une
   règle qui dépend du fait qu'on y pense n'est pas une règle. C'est aussi ce que
   fait déjà `.md table`, pour la même raison. */
@media (max-width: 720px) {
  .tableau {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tableau th {
    position: static;
  }
}

/* --- La barre d'enregistrement ---------------------------------------------
   Elle n'apparaît QUE s'il y a quelque chose à enregistrer. Une barre toujours
   présente ne signale plus rien, et laisse croire qu'un réglage non modifié
   attend une confirmation. */

.savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--verre-bord-clair);
  border-radius: var(--r-md);
  background: var(--verre-haut);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow: var(--arete-forte), var(--sh-3);
}
.savebar .quoi {
  font-size: var(--fs-md);
  color: var(--galet);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .savebar {
    background: var(--verre-repli);
  }
}

/* --- Les bandeaux ----------------------------------------------------------
   Un bandeau porte un TEXTE qui dit quoi faire. La couleur ne fait que répéter
   la gravité — lu en niveaux de gris, il doit rester compréhensible. */

.error-banner,
.auth-expiry-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: var(--fs-md);
}
.error-banner {
  border-color: rgba(226, 86, 76, 0.4);
  background: var(--erreur-fond);
  color: var(--erreur);
}
.auth-expiry-banner {
  border-color: rgba(232, 163, 61, 0.4);
  background: var(--alerte-fond);
  color: var(--alerte);
}
.error-banner .btn,
.auth-expiry-banner .btn {
  margin-left: auto;
}

/* --- Navigation arrière ---------------------------------------------------- */

/* ── Les icônes au trait ─────────────────────────────────────────────────────
   Elles sont DESSINÉES, jamais écrites.

   Les trois polices sont auto-hébergées et sous-ensemblées : `←`, `→`, `✓`,
   `▸`, `▾` n'existent dans AUCUN des six fichiers livrés. Le navigateur ne
   signale rien — il va chercher le caractère manquant dans une police système.
   Une flèche de retour en Times New Roman au milieu d'Instrument Sans, personne
   ne sait dire pourquoi ça fait bricolé, mais tout le monde le voit.

   La charte avait déjà tranché : « Iconographie : trait uniquement, épaisseur
   1,6 px sur une grille de 24 px, angles vifs, extrémités droites ». Une flèche
   est une icône, pas un caractère. Ces classes le rendent gratuit : le balisage
   n'écrit plus que le mot, le trait vient d'ici — et il suit `currentColor`,
   donc il change de couleur avec son texte sans qu'on y pense.

   `scripts/verifie-marque.mjs` empêche le caractère de revenir. */

/* Un chevron est un carré dont on ne garde que DEUX côtés, tourné d'un
   huitième de tour. Chaque direction pose son propre pseudo-élément — les
   déclarer en commun sur `::before` ET `::after` mettait un angle parasite à
   gauche de chaque bouton qui n'avait demandé qu'une flèche à droite. */
.chevron-gauche::before,
.chevron-droite::after,
.chevron-bas::after {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-style: solid;
  border-width: 0 0 1.6px 1.6px;
  border-color: currentcolor;
  flex: none;
}
.chevron-gauche::before {
  transform: rotate(45deg);
  margin-right: 0.1em;
}
.chevron-droite::after {
  transform: rotate(-135deg);
  margin-left: 0.1em;
}
.chevron-bas::after {
  transform: rotate(-45deg);
  margin-left: 0.1em;
  margin-bottom: 0.15em;
}

/* La coche : le même carré, mais aux côtés inégaux — c'est ce qui fait un `✓`
   et non un angle droit. */
.coche {
  display: inline-block;
  width: 0.38em;
  height: 0.72em;
  border-style: solid;
  border-width: 0 1.6px 1.6px 0;
  border-color: currentcolor;
  transform: rotate(42deg);
  flex: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--galet);
  transition: color var(--t-fast) var(--ease);
}
/* Le lien de retour porte sa flèche tout seul : le balisage n'écrit que le mot.
   C'est ce qui a permis de retirer d'un coup les vingt « ← » écrits à la main
   dans autant d'écrans, sans avoir à se souvenir de la règle vingt fois. */
.back-link::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-style: solid;
  border-width: 0 0 1.6px 1.6px;
  border-color: currentcolor;
  transform: rotate(45deg);
  flex: none;
}
.back-link:hover {
  color: var(--terre);
}

.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--terre);
  font: inherit;
  text-align: left;
}
.link-btn:hover {
  color: var(--braise);
}

/* --- Le corps markdown -----------------------------------------------------
   Ce qui s'affiche ici vient souvent du DEHORS — un mail, une fiche rédigée par
   le client, une proposition d'agent. On borne donc tout : la largeur de ligne,
   la taille des titres, et surtout le débordement d'un tableau ou d'un bloc de
   code, qui autrement pousse la colonne entière hors de l'écran. */

.md {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--galet);
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.md > :first-child {
  margin-top: 0;
}
.md > :last-child {
  margin-bottom: 0;
}
.md h1,
.md h2,
.md h3 {
  font-family: var(--font-titre);
  font-weight: 800;
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
  line-height: 1.25;
  margin: var(--sp-6) 0 var(--sp-4);
}
.md h1 {
  font-size: var(--fs-xl);
}
.md h2 {
  font-size: var(--fs-lg);
}
.md h3 {
  font-size: var(--fs-base);
}
.md p,
.md ul,
.md ol {
  margin: 0 0 var(--sp-5);
}
.md li {
  margin-bottom: var(--sp-2);
}
.md strong {
  color: var(--chaux);
  font-weight: 600;
}
.md a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md code {
  font-family: var(--font-donnee);
  font-size: 0.92em;
  padding: 1px var(--sp-2);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.06);
  color: var(--chaux);
}
.md pre {
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--filet);
  background: var(--nuit);
  overflow-x: auto;
}
.md pre code {
  padding: 0;
  background: none;
}
.md blockquote {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--filet);
  color: var(--galet-fonce);
}
.md table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: var(--sp-5);
}
.md th,
.md td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--filet);
  text-align: left;
}
.md img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* --- Le mouvement ----------------------------------------------------------
   Une seule apparition, et elle ne se déclenche jamais deux fois sur le même
   élément. `prefers-reduced-motion` coupe tout : ce n'est pas une option de
   confort, c'est une condition d'accès pour qui a des vertiges. */

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.monte {
  animation: monte var(--t-slow) var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}