/* =====================================================================
   InterTour — système d'interface de l'APPLICATION
   ---------------------------------------------------------------------
   Chargé APRÈS le thème des maquettes (theme.css), qui reste la source de
   l'identité visuelle (logo, palette). Ce fichier apporte la structure :
   la coque de navigation, la grille, et le comportement responsive.

   Archétype dominant : OPERATE (on agit sur des dossiers, on encaisse, on
   décide) et MONITOR (le tableau de bord se lit d'un coup d'œil). Donc :
   densité maîtrisée, hiérarchie par l'échelle et l'espace plutôt que par
   la décoration, aucune carte « icône + titre + phrase » en grille.

   Contraintes de terrain prises en compte :
   — aucune police distante : la connexion de l'agence peut être lente ;
   — chiffres tabulaires partout où il y a de l'argent : une colonne de
     montants doit s'aligner à l'unité pour être vérifiable d'un regard ;
   — cibles tactiles ≥ 44 px sur mobile ;
   — les tableaux défilent horizontalement sous 760 px avec la première
     colonne figée, plutôt que de s'écraser illisiblement.
   ===================================================================== */

/* =====================================================================
   POLICES — servies par nos soins, pas par un CDN.
   ---------------------------------------------------------------------
   Lato (titres) et Libre Franklin (texte) sont sous licence libre SIL OFL :
   les redistribuer est permis, et les héberger ici évite une dépendance
   distante — une agence sur connexion faible ne doit pas attendre un serveur
   tiers pour afficher sa première ligne. `font-display: swap` affiche le
   texte immédiatement, dans la police de secours, puis la remplace.
   Libre Franklin est une police VARIABLE : un seul fichier couvre 400 à 600.
   ===================================================================== */
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("polices/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("polices/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("polices/libre-franklin-400.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* Marque (reprise du thème, valeurs rappelées pour être lisible seul) */
  --vert: #089040;
  --vert-fonce: #066b30;
  --vert-nuit: #05401f;
  --vert-pale: #eaf6ee;
  --orange: #f8a000;
  --orange-pale: #fff6e5;
  --rouge: #b3261e;
  --rouge-pale: #fdecea;

  /* Neutres — l'échelle qui porte 90 % de l'interface */
  --encre: #16202b;
  --encre-douce: #47586a;
  --gris: #6b7b8d;
  --bord: #dde4ec;
  --bord-fort: #c3cedb;
  --fond: #f4f6f9;
  --blanc: #ffffff;

  /* Sémantique */
  --succes: var(--vert);
  --succes-pale: var(--vert-pale);
  --attention: #9a6200;
  --attention-pale: var(--orange-pale);
  --danger: var(--rouge);
  --danger-pale: var(--rouge-pale);

  /* Échelle d'espacement — 4 px de base, jamais de valeur hors échelle */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* Rayons et élévations */
  --r1: 6px; --r2: 10px; --r3: 14px; --r-pilule: 999px;
  --ombre-1: 0 1px 2px rgba(22, 32, 43, .06);
  --ombre-2: 0 2px 8px rgba(22, 32, 43, .08);
  --ombre-3: 0 10px 30px rgba(22, 32, 43, .14);

  /* Typographie */
  --police: "Libre Franklin", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Les titres prennent Lato : deux familles suffisent, et c'est le contraste
     de graisse et d'échelle qui porte la hiérarchie, pas la couleur. */
  --police-titre: "Lato", "Libre Franklin", "Segoe UI", Roboto, Arial, sans-serif;
  --police-mono: "DejaVu Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Gabarit */
  --coque-nav: 244px;
  --coque-texte: 1400px;
  --cible-tactile: 44px;
}

/* --------------------------------------------------------------- base */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 14px;
  line-height: 1.5;
  /* Les chiffres alignés à l'unité, partout : c'est une application d'argent. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-family: var(--police-titre);
                 font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }

a { color: var(--vert-fonce); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vert); }

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* Un lien « passer au contenu » : la navigation est longue au clavier. */
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--vert); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r1) 0;
}
.saut-contenu:focus { left: 0; }

.mini { font-size: 12px; color: var(--gris); }
.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fort { font-weight: 650; }
.vide { color: var(--gris); font-style: normal; }

/* ---------------------------------------------------------- coque : nav */
.coque { min-height: 100vh; display: grid; grid-template-columns: var(--coque-nav) 1fr; }

.nav {
  background: var(--vert-nuit);
  color: #dbe7df;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e4) var(--e3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.nav .marque {
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e2) var(--e4);
  margin-bottom: var(--e2);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav .marque img { height: 44px; width: auto; display: block; }
.nav .marque .agence { font-size: 14px; color: #e8f0eb; font-weight: 650; }

.nav .groupe { margin-top: var(--e4); }
.nav .groupe > span,
.nav .groupe > summary {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #8aa595;
}
.nav .groupe > span {
  display: block; padding: 0 var(--e2) var(--e2);
}
.nav .groupe > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--e2) var(--e2);
  cursor: pointer; list-style: none; user-select: none;
}
.nav .groupe > summary::-webkit-details-marker { display: none; }
.nav .groupe > summary::after {
  content: "▾"; font-size: 11px; transition: transform .15s ease;
}
.nav .groupe[open] > summary::after { transform: rotate(180deg); }
.nav .groupe > summary:hover { color: #fff; }
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 9px var(--e3);
  color: #dbe7df; text-decoration: none; border-radius: var(--r1);
  font-size: 13.5px;
  min-height: 38px;
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.ici { background: var(--vert); color: #fff; font-weight: 650; }
.nav a .compte {
  font-size: 11px; background: rgba(255, 255, 255, .14);
  border-radius: var(--r-pilule); padding: 1px 7px;
}
.nav a.ici .compte { background: rgba(0, 0, 0, .22); }

/* --------------------------------------------------- coque : entête + corps */
.principal { min-width: 0; display: flex; flex-direction: column; }

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
  padding: var(--e3) var(--e5);
  display: flex; align-items: center; gap: var(--e4);
  position: sticky; top: 0; z-index: 20;
}
.entete .fil { min-width: 0; flex: 1; font-size: 13px; color: var(--gris); }
.entete .fil b { color: var(--encre); font-weight: 650; }
.entete .fil a { color: var(--gris); text-decoration: none; }
.entete .fil a:hover { color: var(--vert); text-decoration: underline; }
.entete .moi {
  display: flex; align-items: center; gap: var(--e2);
  font-size: 12.5px; color: var(--encre-douce);
}
.entete .moi .pastille {
  width: 30px; height: 30px; border-radius: var(--r-pilule);
  background: var(--vert-pale); color: var(--vert-fonce);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.entete .moi .role {
  font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .05em;
}

.contenu { padding: var(--e5); max-width: var(--coque-texte); width: 100%; }

/* Voile du tiroir mobile : masqué par défaut, y compris sur bureau. Sans cette
   règle hors media query, il occupait une cellule de la grille sur grand écran
   et repoussait la navigation en bas de page. */
.voile { display: none; }

/* Le bouton de menu n'existe qu'en mobile. */
.burger {
  display: none; align-items: center; gap: var(--e2);
  background: var(--blanc); border: 1px solid var(--bord-fort); border-radius: var(--r1);
  min-height: var(--cible-tactile); min-width: var(--cible-tactile);
  font: inherit; font-size: 13px; padding: 0 var(--e3); cursor: pointer; color: var(--encre);
}

/* --------------------------------------------------------------- cartes */
.card {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r2);
  box-shadow: var(--ombre-1);
  margin-bottom: var(--e5);
  overflow: hidden;
}
.card > h2 {
  padding: var(--e4) var(--e5) var(--e3);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.card > h2 .r { font-size: 13px; font-weight: 500; color: var(--gris); }
.card > h3 { padding: var(--e4) var(--e5) var(--e2); }

.grid { display: grid; gap: var(--e4); }
.grid.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Chiffre-clé : la valeur domine, le libellé explique. Pas d'icône en pastille. */
.chiffre {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r2);
  padding: var(--e4); box-shadow: var(--ombre-1);
}
.chiffre .libelle {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris);
  display: block; margin-bottom: var(--e2);
}
.chiffre .valeur { font-size: 26px; font-weight: 680; letter-spacing: -.02em; }
.chiffre .valeur.petite { font-size: 20px; }
.chiffre .dessous { font-size: 12px; color: var(--gris); margin-top: var(--e1); }
.chiffre.alerte { border-color: var(--orange); background: var(--orange-pale); }

/* -------------------------------------------------------------- tableau */
.tableau-enveloppe { width: 100%; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px var(--e4); border-bottom: 1px solid var(--bord); }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris);
  font-weight: 650; background: #fafbfd; position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
tbody tr:hover td { background: #fafcfe; }
tbody tr:last-child td { border-bottom: none; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
td.negatif { color: var(--rouge); font-weight: 650; }

/* ------------------------------------------------------------- étiquettes */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pilule);
  font-size: 11.5px; font-weight: 600; background: var(--fond); color: var(--encre-douce);
  white-space: nowrap;
}
.tag.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.tag.orange { background: var(--orange-pale); color: var(--attention); }
.tag.rouge { background: var(--rouge-pale); color: var(--rouge); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vert-pale); color: var(--vert-fonce);
  border-radius: var(--r-pilule); padding: 3px 11px; font-size: 12px; font-weight: 600;
}

/* --------------------------------------------------------------- boutons */
button, .bouton {
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 9px var(--e4); min-height: 38px;
  border: 1px solid var(--bord-fort); background: var(--blanc); color: var(--encre);
  border-radius: var(--r1); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e2);
  text-decoration: none;
}
button:hover, .bouton:hover { background: #f7f9fc; border-color: var(--gris); }
button.primary, .bouton.primary {
  background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 650;
}
button.primary:hover, .bouton.primary:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
button.lien {
  background: none; border: none; padding: 0; min-height: 0; color: var(--vert-fonce);
  text-decoration: underline; cursor: pointer;
}
button[disabled], .bouton[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- formulaires */
.form { display: grid; gap: var(--e4); padding: 0 var(--e5) var(--e4); }
.form.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
label { font-size: 12px; font-weight: 600; color: var(--encre-douce); }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--encre);
  padding: 9px var(--e3); min-height: var(--cible-tactile);
  border: 1px solid var(--bord-fort); border-radius: var(--r1); background: var(--blanc);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); outline-offset: 0; }
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
input[type="search"] { min-height: 38px; }

/* Groupe de champ : un préfixe ou un suffixe collé au champ. Le préfixe porte
   l'indicatif (« +226 »), le suffixe l'unité (« FCFA ») — deux choses qu'on
   répétait à la main dans chaque libellé, et qu'on oubliait une fois sur deux. */
.groupe-champ { display: flex; align-items: stretch; }
.groupe-champ > .prefixe, .groupe-champ > .suffixe {
  display: flex; align-items: center; padding: 0 var(--e3);
  background: var(--fond); color: var(--encre-douce); font-size: 13px;
  border: 1px solid var(--bord-fort); white-space: nowrap;
}
.groupe-champ > .prefixe { border-right: none; border-radius: var(--r1) 0 0 var(--r1); }
.groupe-champ > .suffixe { border-left: none; border-radius: 0 var(--r1) var(--r1) 0; }
.groupe-champ > input, .groupe-champ > select { border-radius: 0 var(--r1) var(--r1) 0; }
.groupe-champ > input:only-of-type { border-radius: 0 var(--r1) var(--r1) 0; }
.groupe-champ.avec-suffixe > input, .groupe-champ.avec-suffixe > select { border-radius: var(--r1) 0 0 var(--r1); }

/* Section de formulaire : un titre, une phrase, des champs. */
.section { border-top: 1px solid var(--bord); padding: var(--e4) var(--e5) var(--e2); }
.section:first-of-type { border-top: none; }
.section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--vert-fonce);
                margin-bottom: 2px; }
.section > p { margin: 0; font-size: 12.5px; color: var(--gris); }
.section .rang { display: inline-flex; align-items: center; justify-content: center;
                 width: 20px; height: 20px; border-radius: var(--r-pilule);
                 background: var(--vert-pale); color: var(--vert-fonce);
                 font-size: 11.5px; font-weight: 700; margin-right: 6px; }
label .obligatoire { color: var(--rouge); font-weight: 700; }

/* --------------------------------------------------------------- messages */
.note, .warn, .lock {
  border-radius: var(--r1); padding: var(--e3) var(--e4); font-size: 13px; line-height: 1.5;
}
.note { background: var(--fond); color: var(--encre-douce); border: 1px solid var(--bord); }
.warn { background: var(--orange-pale); color: #6b4400; border: 1px solid #f0d9a8; }
.lock { background: var(--danger-pale); color: #7a1c16; border: 1px solid #f2c9c4; }
.ok  { background: var(--succes-pale); color: var(--vert-fonce); border: 1px solid #c7e3d2; }

.message { display: grid; gap: var(--e2); padding: 0 var(--e5) var(--e4); }
.message > div { border-radius: var(--r1); padding: var(--e3) var(--e4); font-size: 13px; }
.message .succes { background: var(--succes-pale); color: var(--vert-fonce); border: 1px solid #c7e3d2; }
.message .erreur { background: var(--danger-pale); color: #7a1c16; border: 1px solid #f2c9c4; }
.message .info   { background: var(--fond); color: var(--encre-douce); border: 1px solid var(--bord); }

/* ------------------------------------------------------- en-tête de page */
.page-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4);
}
.page-tete .titre { min-width: 0; }
.page-tete .titre p { margin: 2px 0 0; color: var(--gris); font-size: 13px; }
.page-tete .actions { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---------------------------------------------------------- fiche (kv) */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e4); padding: var(--e4) var(--e5); }
.kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.kv .v { font-size: 14px; font-weight: 600; margin-top: 3px; }
.who { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5) 0; }
.who .av { width: 40px; height: 40px; border-radius: var(--r-pilule); background: var(--vert-pale);
           color: var(--vert-fonce); display: grid; place-items: center; font-weight: 700; }
.pc { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0 var(--e5) var(--e4); }
.pc .item {
  border: 1px solid var(--bord); border-radius: var(--r1); padding: var(--e2) var(--e3);
  font-size: 12.5px; background: var(--blanc);
}

/* ------------------------------------------------------------ pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e5) var(--e4); border-top: 1px solid var(--bord);
  font-size: 12.5px; color: var(--gris); flex-wrap: wrap;
}
.pagination a, .pagination .commandes { display: flex; align-items: center; gap: var(--e2); }
.pagination .inactif {
  padding: 6px var(--e3); min-height: 34px; display: inline-flex; align-items: center;
  border: 1px dashed var(--bord); border-radius: var(--r1); color: #a9b4c1;
  background: #fbfcfd; cursor: not-allowed;
}
.pagination .courant {
  padding: 6px var(--e3); min-height: 34px; display: inline-flex; align-items: center;
  border: 1px solid var(--bord); border-radius: var(--r1); text-decoration: none;
  background: var(--blanc);
}
.pagination .commandes { display: flex; align-items: center; gap: var(--e2); }
.pagination .inactif {
  padding: 6px var(--e3); min-height: 34px; display: inline-flex; align-items: center;
  border: 1px dashed var(--bord); border-radius: var(--r1); color: #a9b4c1;
  background: #fbfcfd; cursor: not-allowed;
}
.pagination .courant { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 650; }

.foot { padding: var(--e4) var(--e5) var(--e5); color: var(--gris); font-size: 12px; }

/* ----------------------------------------------------------- barre d'outils */
.barre-actions {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e5) var(--e4);
}
.barre-actions .cherche { flex: 1; min-width: 200px; }

/* =====================================================================
   COMPATIBILITÉ — les classes héritées des maquettes
   ---------------------------------------------------------------------
   Les seize écrans ont été écrits contre le vocabulaire des maquettes
   (.cols, .who, .nm, .sub, .kv, .btn, .side, .line, .v, .pc, .retire…).
   Le style de ces classes vivait dans le <style> INTERNE de chaque
   maquette : il n'a jamais suivi dans l'application. Les écrans utilisaient
   donc des classes sans définition — c'est la vraie raison de l'impression
   de « pas ergonomique ». Cette couche les définit une fois pour toutes,
   dans le système. Les écrans que je ne réécris pas s'améliorent d'un coup.
   ===================================================================== */

/* Deux colonnes avec un volet à droite, qui s'empilent sur téléphone. */
.cols { display: grid; gap: var(--e5); align-items: start; }
.cols:not([style]) { grid-template-columns: minmax(0, 1fr) 380px; }
.side { display: grid; gap: var(--e5); }

/* Fiche : identité à gauche, montants à droite. */
.who { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: flex-start;
       padding: var(--e4) var(--e5); }
.who .nm { font-size: 16px; font-weight: 650; }
.who .sub { font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.who .kv { margin-left: auto; padding: 0; }

.kv .v.ok { color: var(--vert-fonce); }
.kv .v.due { color: var(--rouge); }
.kv .v.due:not(:empty) { font-weight: 680; }

/* Ligne libellé / valeur, pour les explications en volet. */
.line { display: flex; justify-content: space-between; gap: var(--e4);
        padding: 8px var(--e5); border-bottom: 1px solid var(--bord); font-size: 13px; }
.line:last-child { border-bottom: none; }
.line .k { color: var(--gris); }
.line .v { font-weight: 600; text-align: right; }
.line .v.up { color: var(--vert-fonce); }

/* Prestations : une puce par ligne accordée ; une ligne retirée se voit. */
.pc .item, .pc > span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bord); border-radius: var(--r1);
  padding: 5px var(--e3); font-size: 12.5px; background: var(--blanc);
}
.pc > span.retire, .pc .retire {
  background: var(--rouge-pale); border-color: #f2c9c4; color: #7a1c16;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* .btn est l'ancien nom de .bouton : on garde les deux. */
.btn { font: inherit; font-size: 13.5px; font-weight: 550; padding: 9px var(--e4);
       min-height: 38px; border: 1px solid var(--bord-fort); background: var(--blanc);
       color: var(--encre); border-radius: var(--r1); cursor: pointer;
       display: inline-flex; align-items: center; gap: var(--e2); text-decoration: none; }
.btn:hover { background: #f7f9fc; border-color: var(--gris); }
.btn.primary { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 650; }

/* =====================================================================
   RESPONSIVE — trois seuils, un seul comportement par seuil
   1024 : la navigation se resserre. 760 : elle passe en tiroir et la
   première colonne des tableaux se fige. 480 : tout prend la largeur.
   ===================================================================== */

@media (min-width: 1600px) {
  :root { --coque-texte: 1580px; }
}

@media (max-width: 1024px) {
  :root { --coque-nav: 208px; }
  .contenu { padding: var(--e4); }
  .grid.col-3, .grid.col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* La coque passe en une colonne : la navigation devient un tiroir. */
  .coque { grid-template-columns: 1fr; }
  .nav {
    position: fixed; inset: 0 auto 0 0; width: 84%; max-width: 310px; z-index: 60;
    transform: translateX(-102%); transition: transform .18s ease-out;
    height: 100vh; box-shadow: var(--ombre-3);
  }
  .nav.ouvert { transform: none; }
  .voile {
    position: fixed; inset: 0; background: rgba(10, 20, 15, .45); z-index: 50; display: none;
  }
  .voile.ouvert { display: block; }

  .burger { display: inline-flex; }
  .entete { padding: var(--e2) var(--e3); gap: var(--e2); }
  .entete .fil { font-size: 12.5px; }
  .entete .moi .qui { display: none; }        /* le nom passe dans le tiroir */
  .contenu { padding: var(--e3); }

  .card { border-radius: var(--r2); margin-bottom: var(--e4); }
  .card > h2 { padding: var(--e3) var(--e4) var(--e2); font-size: 16px; }
  .form, .kv, .who, .pc, .foot, .barre-actions { padding-left: var(--e4); padding-right: var(--e4); }
  .form, .form.deux, .form.trois { grid-template-columns: 1fr; }
  .grid.col-2, .grid.col-3, .grid.col-4 { grid-template-columns: 1fr; }
  .page-tete { flex-direction: column; align-items: stretch; }
  .page-tete .actions > * { flex: 1; justify-content: center; }

  /* Tableaux sur téléphone : la ligne devient un BLOC ÉTIQUETÉ.
     Six colonnes ne tiennent pas dans 390 px, et un défilement horizontal
     utile au bureau devient pénible au guichet. Les étiquettes sont posées par
     un script qui lit la ligne d'en-têtes (voir base.html), donc cela vaut pour
     tous les tableaux sans toucher aux seize gabarits. */
  .tableau-enveloppe { border: none; overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  /* La ligne d'en-têtes se reconnaît à ses cellules <th> : le navigateur
     insère un <tbody> implicite, un sélecteur sur l'ordre échouerait. */
  tr:has(th) { display: none; }
  table { min-width: 0; font-size: 13px; }
  tbody tr {
    border: 1px solid var(--bord); border-radius: var(--r1); background: var(--blanc);
    margin-bottom: var(--e2); padding: var(--e2) var(--e3);
  }
  tbody tr:hover td { background: transparent; }
  td {
    border: none; padding: 3px 0; min-height: 26px;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--e4); white-space: normal; text-align: left;
  }
  td::before {
    content: attr(data-label);
    color: var(--gris); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    flex: 0 0 auto;
  }
  /* La référence ouvre le bloc et se lit seule : pas de doublon avec son
     étiquette, et elle reste en gras. */
  td:first-child { font-weight: 650; font-size: 14px; padding-bottom: 6px;
                   border-bottom: 1px solid var(--bord); margin-bottom: 4px; }
  td.r { justify-content: space-between; }
  td[data-label=""]::before { content: none; }
  th:first-child, td:first-child {
    position: sticky; left: 0; background: var(--blanc); z-index: 2;
    box-shadow: 1px 0 0 var(--bord);
  }
  th:first-child { background: #fafbfd; }

  /* Cibles tactiles : 44 px minimum. */
  button, .bouton, input, select { min-height: var(--cible-tactile); }
  .pagination { padding: var(--e3) var(--e4) var(--e4); }
}

@media (max-width: 480px) {
  .chiffre .valeur { font-size: 22px; }
  .entete .moi .pastille { width: 26px; height: 26px; font-size: 11px; }
  h1 { font-size: 19px; }
  .contenu { padding: var(--e2); }
}

/* Le mouvement sert la compréhension, jamais le spectacle. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .entete, .burger, .voile, .pagination, .barre-actions, .foot { display: none !important; }
  .coque { grid-template-columns: 1fr; }
  .contenu { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; }
}