/* Jetons de design partagés (@md/ui) exposés en variables CSS. */
:root {
  --md-color-primary: #12604f;
  --md-color-primary-dark: #0b3f34;
  --md-color-primary-light: #3e9e86;
  --md-color-accent: #e9a23b;
  --md-color-ink: #12171a;
  --md-color-body: #3c464c;
  --md-color-muted: #6b777e;
  --md-color-line: #dce2e5;
  --md-color-surface: #f5f7f8;
  --md-color-background: #ffffff;
  --md-color-success: #1e7b4d;
  --md-color-warning: #b4740b;
  --md-color-danger: #b32218;
  --md-color-info: #1c5c93;
  --md-radius-md: 8px;
  --md-space-md: 16px;
  --md-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--md-font-family);
  color: var(--md-color-ink);
  background: var(--md-color-surface);
  line-height: 1.55;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--md-space-md) * 2) var(--md-space-md);
}

h1 {
  font-size: 1.9rem;
  margin-bottom: 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin-top: 2rem;
}

.subtitle {
  color: var(--md-color-muted);
  margin-top: 0;
}

.card {
  background: var(--md-color-background);
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  padding: var(--md-space-md);
  margin-bottom: var(--md-space-md);
}

/*
 * Une carte dans une carte : une dette parmi d'autres, avec ses propres gestes.
 *
 * Fond légèrement teinté plutôt qu'une simple bordure : quand trois dettes se
 * suivent, chacune portant deux formulaires, la bordure seule ne dit plus où
 * l'une finit et où la suivante commence — et un motif saisi dans le mauvais
 * bloc solderait la mauvaise créance.
 */
.card--nested {
  background: var(--md-color-surface, #f6f7f9);
  margin-top: var(--md-space-md);
  margin-bottom: 0;
}

.card--nested + .card--nested {
  margin-top: var(--md-space-md);
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.badge--up {
  background: var(--md-color-success);
}

.badge--down {
  background: var(--md-color-danger);
}

.badge--neutral {
  background: var(--md-color-muted);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--md-color-line);
}

th {
  color: var(--md-color-muted);
  font-weight: 600;
}

code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--md-color-surface);
  padding: 1px 5px;
  border-radius: 4px;
}

.notice {
  border-left: 3px solid var(--md-color-warning);
  background: #fff8ec;
  padding: 12px 14px;
  border-radius: 0 var(--md-radius-md) var(--md-radius-md) 0;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */
nav.topbar {
  background: var(--md-color-primary-dark);
  padding: 10px var(--md-space-md);
  display: flex;
  /*
   * Quinze entrées ne tiennent pas sur une ligne : sans retour, la barre
   * débordait dès 1 280 px, la dernière entrée coupée et une barre de
   * défilement horizontale sous toute la page. Relevé pendant la recette du
   * 14 septembre 2026 ; le défaut venait de Next.js.
   */
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  /*
   * Le blanc est posé sur la barre, et non sur ses seuls liens : le nom de la
   * marque et « Se déconnecter » en héritent. Sans lui, ils prenaient l'encre
   * sombre de la page — du noir sur vert foncé, presque illisible.
   */
  color: #fff;
}

/* Un libellé reste d'un seul tenant : « Tableau de bord » s'écrivait sur trois lignes. */
nav.topbar a,
nav.topbar .brand {
  white-space: nowrap;
}

nav.topbar a {
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0.85;
}

nav.topbar a:hover {
  opacity: 1;
  text-decoration: underline;
}

nav.topbar .brand {
  font-weight: 700;
  opacity: 1;
}

main.main--wide {
  /*
   * 1400 px bornait la carte bien en deçà des écrans courants. Un plan de
   * découpage n'est pas un texte : on ne le lit pas, on l'embrasse du regard, et
   * chaque pixel de largeur est du territoire visible en plus.
   */
  max-width: min(1800px, 96vw);
}

/* ------------------------------------------------------------------ */
/* Éditeur cartographique                                              */
/* ------------------------------------------------------------------ */
.editor {
  display: grid;
  /*
   * La colonne de commandes est resserrée au profit de la carte : découper un
   * territoire demande de voir loin, pas de voir des boutons.
   */
  grid-template-columns: minmax(240px, 280px) 1fr;
  gap: var(--md-space-md);
  align-items: start;
}

@media (max-width: 900px) {
  .editor {
    grid-template-columns: 1fr;
  }
}

/* Bandeau pleine largeur au-dessus des deux colonnes. */
.editor__referential {
  grid-column: 1 / -1;
}

.editor__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editor__controls label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-color-muted);
}

.editor__controls select,
.editor__controls textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  font-family: inherit;
  font-size: 0.88rem;
}

.editor__controls textarea {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  resize: vertical;
}

.editor__controls button {
  padding: 8px 12px;
  border: 1px solid var(--md-color-primary);
  background: var(--md-color-primary);
  color: #fff;
  border-radius: var(--md-radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.editor__controls button:disabled {
  background: var(--md-color-line);
  border-color: var(--md-color-line);
  color: var(--md-color-muted);
  cursor: not-allowed;
}

.editor__controls .row {
  display: flex;
  gap: 8px;
}

.editor__controls .row button {
  flex: 1;
}

.editor__controls .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--md-color-body);
}

.editor__controls hr {
  border: none;
  border-top: 1px solid var(--md-color-line);
  margin: 4px 0;
}

.editor__map svg {
  width: 100%;
  height: auto;
  /*
   * Hauteur plancher : sur un écran large, la seule contrainte de rapport
   * laissait une bande de carte trop basse pour se repérer. Le plafond évite
   * l'inverse — une carte plus haute que la fenêtre, qu'on ne peut cadrer
   * qu'en faisant défiler la page.
   */
  /*
   * La carte occupe la hauteur utile de l'écran.
   *
   * Le plancher précédent (460 px) datait d'un temps où elle partageait sa
   * ligne : elle tenait dans un mouchoir. Maintenant qu'elle a toute la colonne
   * droite, la contrainte utile est l'inverse — remplir la fenêtre sans la
   * dépasser, pour qu'on cadre sans faire défiler la page.
   */
  min-height: 620px;
  max-height: 82vh;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  cursor: crosshair;
  display: block;
  /* Le glissement pilote la carte, pas le défilement de la page. */
  touch-action: none;
}

/*
 * Commandes de navigation, posées sous la carte.
 *
 * Elles ne flottent pas par-dessus : la carte est une surface de dessin, et un
 * bouton superposé finit toujours par recouvrir le sommet qu'on voulait poser.
 */
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.map-toolbar button {
  min-width: 38px;
  padding: 6px 12px;
  border: 1px solid var(--md-color-line);
  background: var(--md-color-surface);
  color: var(--md-color-body);
  border-radius: var(--md-radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.map-toolbar button:hover:not(:disabled) {
  border-color: var(--md-color-primary);
  color: var(--md-color-primary);
}

.map-toolbar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.map-toolbar .hint {
  margin: 0;
  font-size: 0.78rem;
}

.map-toolbar__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-color-muted);
}

.map-toolbar select {
  padding: 6px 8px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  font-size: 0.85rem;
  background: var(--md-color-surface);
  color: var(--md-color-body);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--md-color-body);
}

.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.hint {
  font-size: 0.82rem;
  color: var(--md-color-muted);
  margin: 4px 0;
}

.validation--ok {
  border-left: 3px solid var(--md-color-success);
  background: #eef8f2;
  padding: 10px 12px;
  border-radius: 0 var(--md-radius-md) var(--md-radius-md) 0;
  font-size: 0.85rem;
}

.validation ul,
.notice ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* --------------------------------------------------------------------------
   Administration des utilisateurs et journal d'audit (Phase 3)
   -------------------------------------------------------------------------- */

form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-color-body);
  margin: 12px 0 4px;
}

form input[type='text'],
form input[type='tel'],
form input[type='search'],
form select {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--md-color-ink);
  background: var(--md-color-background);
}

/* Groupes de cases à cocher : services et catégories d'un point chaud.
   Le cadre par défaut du navigateur jure avec le reste des formulaires ; on ne
   garde que le titre et un léger retrait. */
form fieldset {
  border: none;
  padding: 0;
  margin: 12px 0 0;
}

form fieldset legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-color-body);
  padding: 0;
}

form label.form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 6px 0 0;
}

form label.form__checkbox input {
  width: auto;
  margin: 0;
}

form button {
  margin-top: 12px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--md-radius-md);
  background: var(--md-color-primary);
  color: var(--md-color-background);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

form button:disabled {
  opacity: 0.5;
  cursor: progress;
}

form button.danger {
  background: var(--md-color-danger);
}

/* Formulaire d'action inline : le motif tient sur la même ligne que le bouton
   pour rester lisible dans un tableau de sessions. */
.action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.action-form label {
  flex: 1 1 220px;
  margin: 0;
}

.action-form input[type='text'] {
  margin-top: 4px;
}

.action-form button {
  margin-top: 0;
}

.action-form p {
  flex-basis: 100%;
  margin: 4px 0 0;
}

/*
  Un titre dans un formulaire d'action prend toute la ligne.

  Sans cela, le code pays se rangeait à côté du premier champ, comme s'il en
  était l'étiquette — et deux pays à la suite devenaient un seul bloc continu
  où l'on ne savait plus quel seuil appartenait à qui.
*/
.action-form h3 {
  flex-basis: 100%;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--md-color-line, #dce2e5);
}

.topbar__form {
  display: inline;
  margin: 0;
}

.topbar__button {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

th {
  text-align: left;
  font-weight: 600;
  color: var(--md-color-body);
}

/* --- Vérification des dossiers prestataires ------------------------------ */

/* Chaque pièce et chaque véhicule forment un bloc autonome : le vérificateur
   traite une ligne à la fois, sans perdre le fil entre l'état constaté et la
   décision qu'il prend. */
.review-item {
  border-top: 1px solid var(--md-color-line);
  padding-top: var(--md-space-sm);
  margin-top: var(--md-space-sm);
}

.review-item h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.review-item p {
  margin: 4px 0;
}

.action-form input[type='date'],
.action-form select {
  margin-top: 4px;
}

/* Fiche d'identité : libellé et valeur alignés, lisibles en diagonale. */
.details {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 6px var(--md-space-md);
  margin: 0;
}

.details dt {
  color: var(--md-color-muted);
  font-size: 0.9rem;
}

.details dd {
  margin: 0;
}

/*
 * Mention légale du fond de carte.
 *
 * Sa présence est une obligation de la licence ODbL, pas un choix de mise en
 * page : elle reste donc dans le flux du document, sous la carte, et non
 * superposée aux tuiles où un fond clair pourrait la rendre illisible.
 */
.map-attribution {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--md-color-muted, #6b777e);
}

/* ------------------------------------------------------------------ */
/* Barèmes tarifaires                                                  */
/* ------------------------------------------------------------------ */
.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--md-space-md);
}

.rates__group h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-color-muted);
  margin: 0 0 8px;
}

.rates dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 0.9rem;
}

.rates dt {
  color: var(--md-color-body);
}

.rates dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--md-color-ink);
}

.rate-form {
  margin-top: var(--md-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--md-space-md);
}

.rate-form fieldset {
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.rate-form legend {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-color-primary);
  padding: 0 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.field__label {
  font-weight: 600;
  color: var(--md-color-body);
}

.field__label em {
  font-weight: 400;
  color: var(--md-color-muted);
  font-style: normal;
}

.field__hint {
  color: var(--md-color-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.field input,
.field select {
  padding: 7px 8px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  font-family: inherit;
  font-size: 0.88rem;
}

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.field--check input {
  margin-top: 3px;
}

.days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.days__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.inline-form input {
  padding: 5px 7px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  font-size: 0.82rem;
  min-width: 120px;
}

.inline-form button {
  padding: 5px 10px;
  border: 1px solid var(--md-color-primary);
  background: var(--md-color-primary);
  color: #fff;
  border-radius: var(--md-radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cell--reason {
  max-width: 260px;
  font-size: 0.82rem;
  color: var(--md-color-muted);
}

.badge--info {
  background: var(--md-color-info);
}

/* --- Tableaux d'exploitation : une ligne par enregistrement --------------- */

/*
 * Les tableaux de tarification portent une douzaine de colonnes courtes —
 * codes, coefficients, priorités, jours. Sans consigne, le navigateur préfère
 * toujours empiler : « lun, mar, mer, jeu, ven » descendait sur cinq lignes et
 * « District autonome d'Abidjan » sur trois, si bien qu'une ligne de tableau
 * occupait la hauteur de cinq. On ne compare pas trente affectations dans ces
 * conditions.
 *
 * `nowrap` seul déborderait sur les petits écrans : le tableau est donc
 * enveloppé dans un conteneur qui défile horizontalement. Le défilement est
 * moins coûteux que l'empilement — il conserve l'alignement des colonnes, qui
 * est précisément ce qu'on vient lire.
 */
.table-scroll {
  overflow-x: auto;
  /* Un tableau qui déborde doit le montrer : sans marge, la dernière colonne
     paraît coupée par accident plutôt que par défilement. */
  padding-bottom: 2px;
}

.table--dense {
  font-size: 0.86rem;
}

.table--dense th,
.table--dense td {
  white-space: nowrap;
  padding: 6px 10px;
  vertical-align: middle;
}

/* Les nombres se comparent en colonne : chiffres de largeur fixe et alignement
   à droite, sinon l'œil doit relire chaque valeur au lieu de balayer. */
.table--dense .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Le libellé humain accompagne le code sans lui voler la vedette. */
/*
  Texte d'accompagnement, hors tableau.

  La classe était employée par plusieurs écrans mais n'existait qu'à
  l'intérieur des tableaux denses : le texte s'affichait donc en couleur
  ordinaire, et rien ne distinguait l'explication de l'information.
*/
.muted {
  color: var(--md-color-muted);
  font-size: 0.9rem;
}

/*
  Un avertissement qui doit se lire avant le reste de la fiche.

  Bordure à gauche plutôt que fond plein : la fiche reste lisible, et l'œil
  attrape quand même la ligne. Le fond plein aurait fait concurrence au titre
  de la carte, qui porte la référence — l'information qu'on est venu chercher.
*/
.alerte {
  border-left: 3px solid var(--md-color-warning, #b8860b);
  background: #fff8ec;
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}

/*
  Les preuves côte à côte, dans l'ordre du trajet.

  C'est la comparaison qui tranche un litige — l'état au départ, l'état à
  l'arrivée. Les empiler verticalement obligerait à faire défiler entre les deux
  au moment précis où l'on veut les voir ensemble.
*/
.preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.preuve {
  flex: 1 1 280px;
  margin: 0;
}

.preuve figcaption {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.preuve img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid var(--md-color-line, #dce2e5);
  border-radius: 8px;
  background: var(--md-color-surface, #f5f7f8);
}

/* Étiquette réservée aux lecteurs d'écran : la colonne porte déjà le titre. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table--dense .muted {
  color: var(--md-color-muted);
}

/* --- Reçu de mission ------------------------------------------------------ */

.recu__kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--md-color-muted);
}

.recu__grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 6px 16px;
  margin: var(--md-space-md) 0;
}

.recu__grid dt {
  color: var(--md-color-muted);
}

.recu__grid dd {
  margin: 0;
}

.recu__total {
  font-weight: 700;
  border-top: 1px solid var(--md-color-line);
  padding-top: 6px;
}

/* Une absence se dit, elle ne se laisse pas deviner : sans cette mention, une
   ligne de taxe manquante se lirait comme une taxe nulle. */
.recu__absent {
  color: var(--md-color-muted);
  font-style: italic;
}

.recu__notice {
  font-size: 0.85rem;
  color: var(--md-color-muted);
}

/*
 * Impression : le reçu, et rien d'autre.
 *
 * Le PDF est produit par le navigateur — aucune bibliothèque n'est embarquée —
 * ce qui garantit que le document imprimé est exactement celui qui a été relu à
 * l'écran. Reste à écarter ce qui n'appartient pas au justificatif : navigation,
 * formulaire de recherche, liens de retour.
 */
@media print {
  nav,
  form,
  .no-print,
  h1,
  .subtitle {
    display: none !important;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .recu {
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/*
  --- Suivi partagé ---

  Une page lue par quelqu'un qui n'a pas de compte, souvent sur un téléphone,
  souvent en attendant. Large marge, gros titre, peu d'éléments : elle répond à
  une seule question — où en est le colis.
*/
.suivi {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.suivi h1 {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.suivi-carte {
  margin: 20px 0 8px;
}

/* La carte occupe la largeur disponible sans jamais déborder. */
.suivi-carte svg {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--md-color-line);
  background: #E8EDEF;
}

.suivi-carte figcaption {
  font-size: 0.75rem;
  margin-top: 6px;
}

/* Les libellés des repères doivent rester lisibles sur n'importe quelle tuile. */
.suivi-repere {
  font-size: 13px;
  font-weight: 700;
  fill: #12171A;
  paint-order: stroke;
  stroke: #FFFFFF;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.suivi-eta {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 4px 0 20px;
}

.suivi-pied {
  margin-top: 28px;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
 * Reversements marchands
 *
 * Les lignes sont des fiches et non un tableau : chacune porte un formulaire,
 * et un formulaire dans une cellule de tableau se replie mal dès que l'écran
 * rétrécit. La fiche accepte de passer en colonne sans rien casser.
 * ----------------------------------------------------------------------- */

.settlements {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settlement {
  border: 1px solid var(--md-color-line);
  border-radius: 8px;
  padding: 16px;
  background: var(--md-color-background);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settlement__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settlement__amount {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* Le retard est ce qui bloque, pas le montant : il porte donc la couleur. */
.badge--late {
  background: var(--md-color-danger);
}

.settlement__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.settlement__facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-color-muted);
}

.settlement__facts dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
  word-break: break-all;
}

.settle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
  align-items: end;
  border-top: 1px solid var(--md-color-line);
  padding-top: 12px;
}

.settle__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.settle__field--wide {
  grid-column: 1 / -1;
}

.settle__field input,
.settle__field select {
  padding: 7px 9px;
  border: 1px solid var(--md-color-line);
  border-radius: 6px;
  font: inherit;
}

.settle__message {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.88rem;
  color: var(--md-color-danger);
}

.settle__message--ok {
  color: var(--md-color-primary);
}

.page__lede,
.page__summary {
  color: var(--md-color-body);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
 * Tableau de bord — vue de synthèse
 *
 * Quatre tuiles de dénombrement, puis le chiffre d'affaires et la répartition
 * des missions par étape. Les tuiles ne portent pas d'icône : le libellé dit
 * déjà ce qu'elles comptent, et un pictogramme de plus ne s'y lirait qu'avant
 * d'être compris.
 * ----------------------------------------------------------------------- */

.synthese {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0 32px;
}

.synthese__tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.tuile {
  background: var(--md-color-background);
  border: 1px solid var(--md-color-line);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tuile__titre {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-color-muted);
}

.tuile__valeur {
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--md-color-ink);
  font-variant-numeric: tabular-nums;
}

.tuile__legende {
  margin: 0;
  font-size: 0.82rem;
  color: var(--md-color-muted);
}

.synthese__bas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  align-items: start;
}

.panneau {
  background: var(--md-color-background);
  border: 1px solid var(--md-color-line);
  border-radius: 8px;
  padding: 18px 20px;
}

.panneau__titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--md-color-ink);
}

.panneau__sous-titre {
  margin: 2px 0 14px;
  font-size: 0.82rem;
  color: var(--md-color-muted);
}

.chiffre + .chiffre {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--md-color-line);
}

.chiffre__montant {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--md-color-info);
  font-variant-numeric: tabular-nums;
}

.chiffre__detail {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--md-color-body);
}

/* La répartition : une ligne par étape, et une barre à l'échelle du total. */
.repartition {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repartition__part {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  font-size: 0.88rem;
}

.repartition__pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--phase);
}

.repartition__libelle { color: var(--md-color-body); }

.repartition__nombre {
  font-weight: 600;
  color: var(--md-color-ink);
  font-variant-numeric: tabular-nums;
}

.repartition__piste {
  grid-column: 2 / 4;
  height: 5px;
  background: var(--md-color-surface);
  border-radius: 999px;
  overflow: hidden;
}

.repartition__barre {
  display: block;
  height: 100%;
  background: var(--phase);
  border-radius: 999px;
}

/* Une couleur par étape, reprise d'une répartition à l'autre : « terminée » et
   « livré » partagent le même vert, « affecté » le même bleu. */
.repartition__part { --phase: var(--md-color-muted); }
.phase-WAITING     { --phase: #8a959c; }
.phase-ASSIGNED    { --phase: #2563c9; }
.phase-PICKED_UP   { --phase: #d99a1e; }
.phase-ON_TRIP,
.phase-IN_DELIVERY { --phase: #7a4fc4; }
.phase-COMPLETED,
.phase-DELIVERED   { --phase: var(--md-color-success); }
.phase-NO_DRIVER   { --phase: #e07a1f; }
.phase-CANCELLED   { --phase: var(--md-color-danger); }

.section-titre {
  margin: 8px 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--md-color-ink);
}

/* ---------------------------------------------------------------------------
   Éditeur de tracé de zone

   La classe est posée par le script, jamais par le gabarit : sans JavaScript la
   carte n'est pas cliquable, et un curseur en croix promettrait une interaction
   qui n'existe pas.
   --------------------------------------------------------------------------- */
.carte--editable {
  cursor: crosshair;
}

/* Le tracé en cours n'a pas à intercepter les clics : viser un sommet déjà posé
   pour en ajouter un autre à côté est le geste le plus fréquent. */
[data-calque-de-trace] {
  pointer-events: none;
}

[data-panneau-de-trace] textarea {
  width: 100%;
  font-family: var(--md-font-mono, monospace);
  font-size: 0.8rem;
}

/* ---- Tableau de bord : choix du pays et de la période --------------------
   Les pays sont des liens, pas une liste déroulante : une liste ne faisait
   rien tant qu'on ne cliquait pas sur « Filtrer », et rien ne le disait. */
.segments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 10px;
}
.segments a {
  padding: 6px 14px;
  border: 1px solid var(--md-color-line);
  border-radius: 999px;
  background: var(--md-color-background);
  color: var(--md-color-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.segments a:hover {
  border-color: var(--md-color-primary);
  color: var(--md-color-primary);
}
.segments a.segments__actif {
  background: var(--md-color-primary);
  border-color: var(--md-color-primary);
  color: #fff;
}
form.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  margin: 0 0 22px;
}
form.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-color-muted);
}
form.filters button {
  margin-top: 0;
}

/* ---- Zones : sommaire au-dessus de la carte ------------------------------
   Le tableau des zones est deux écrans sous la carte ; ce sommaire mène à
   chaque fiche sans avoir à le chercher. */
.sommaire-zones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 14px;
  font-size: 0.9rem;
}
.sommaire-zones__titre {
  font-weight: 700;
  color: var(--md-color-ink);
  margin-right: 4px;
}
.sommaire-zones a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-md);
  background: var(--md-color-background);
  color: var(--md-color-ink);
  text-decoration: none;
}
.sommaire-zones a:hover {
  border-color: var(--md-color-primary);
}
.sommaire-zones__versions {
  font-size: 0.8rem;
  color: var(--md-color-muted);
}
a.sommaire-zones__tableau {
  border-style: dashed;
  color: var(--md-color-primary);
  font-weight: 600;
}

/* ---- Fiche d'une zone : qui elle est -------------------------------------- */
.zone-identite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: -4px 0 8px;
  color: var(--md-color-body);
}