/* Vigie Route — « plan de relevé ».
 *
 * Le site est dessiné comme la planche d'un relevé de voirie : une feuille
 * réglée au trait fin, un cartouche qui porte la référence et la date, des
 * figures numérotées, des légendes en capitales étroites, et le réseau viaire
 * réel de la commune en colonne vertébrale graphique.
 *
 * Deux règles tenues partout :
 *   - Le trait remplace le vide. Séparer deux sections par un filet réglé et
 *     son libellé dit plus, et prend dix fois moins de place, que 180 px de
 *     blanc. L'ancienne version respirait tellement qu'elle paraissait vide.
 *   - Les couleurs d'état ne décorent pas. Vert, orange, bleu et rouge ne
 *     sortent que là où ils portent le sens qu'ils ont sur la carte : relevé,
 *     en attente, à parcourir, curatif. Une bordure colorée sur une carte
 *     blanche parce que « ça fait joli » est exactement ce qu'on a retiré.
 *
 * Thème unique, assumé : un plan s'imprime sur du papier.
 */

/* --- Fontes ---------------------------------------------------------
   IBM Plex, auto-hébergé, licence OFL 1.1 (voir fonts/OFL.txt). Dessinée
   pour les contextes techniques ; son mono tient la donnée chiffrée, ce
   dont une page pleine de linéaires et de coordonnées a besoin.
   `font-display: swap` : le texte s'affiche à la police système puis
   bascule, plutôt que de laisser la page blanche sur une 4G de mairie. */

@font-face {
  font-family: "Plex";
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --papier: #fbfcfd;        /* la feuille */
  --fond-plan: #e9edf3;     /* l'emprise dessinée, les zones en creux */
  --encre: #0e1829;
  --encre-douce: #55617a;
  --trait: #d2d9e3;         /* le filet fin du plan */
  --trait-fort: #9daabd;

  --afaire: #2461cf;
  --attente: #c9760c;
  --releve: #16764c;
  --curatif: #b0342a;

  /* Alias conservés : les pages générées et les pages annexes s'en servent. */
  --papier-creux: var(--fond-plan);
  --encours: var(--attente);

  --texte: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --data: "PlexMono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: none;

  --marge: clamp(18px, 4.6vw, 60px);
  --colonne: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--colonne); margin: 0 auto; padding: 0 var(--marge); }

.saut {
  position: absolute; left: -9999px; z-index: 20;
  background: var(--encre); color: #fff; padding: 10px 16px;
}
.saut:focus { left: var(--marge); top: 10px; }

a { color: var(--afaire); }
:focus-visible { outline: 2px solid var(--afaire); outline-offset: 2px; }

/* --- Étiquettes de plan ---------------------------------------------
   Capitales étroites en mono : c'est le lettrage des légendes de plan, et
   c'est ce qui donne son registre à toute la page. */

.eyebrow, .quoi, .lib, .legende, .cartouche, .fil, .identifiants,
.rassure, .pied-note, .territoires-legende, .db-fil {
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* --- Bandeau --------------------------------------------------------- */

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--encre);
}
.marque {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--encre);
}
.marque span { color: var(--afaire); }
.bandeau nav { display: none; gap: 20px; }
@media (min-width: 800px) { .bandeau nav { display: flex; } }
.bandeau nav a {
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.bandeau nav a:hover { color: var(--encre); border-bottom-color: var(--encre); }

.bouton-bandeau {
  display: none;
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--encre);
  padding: 9px 14px;
  white-space: nowrap;
}
.bouton-bandeau:hover { background: var(--afaire); }
@media (min-width: 940px) { .bouton-bandeau { display: inline-block; } }

/* --- Cartouche -------------------------------------------------------
   Le bloc de référence d'une planche : ce qu'on lit en haut à gauche d'un
   plan avant de regarder le dessin. */

.cartouche {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--trait);
  margin-top: 0;
}
.cartouche > span {
  padding: 9px 16px 9px 0;
  margin-right: 16px;
  border-right: 1px solid var(--trait);
}
.cartouche > span:last-child { border-right: 0; }
.cartouche b { color: var(--encre); font-weight: 500; }

/* --- Accroche --------------------------------------------------------
   Le titre et le plan de la commune côte à côte. Le dessin n'illustre pas
   le propos : il EST le propos. */

.accroche {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--encre);
}
@media (min-width: 960px) { .accroche { grid-template-columns: 1.02fr 0.98fr; } }

/* Accroche sans plan : pages annexes et têtes de territoire. Le bloc doit
   respirer autant que la version à deux colonnes, sinon le sur-titre vient
   coller au fil d'Ariane et se lit comme sa dernière entrée. */
.accroche-simple {
  display: block;
  padding: clamp(30px, 4.5vw, 54px) 0 clamp(26px, 3.5vw, 42px);
  border-bottom: 1px solid var(--encre);
}

.accroche-texte { padding: clamp(38px, 6vw, 76px) 0 clamp(34px, 5vw, 60px); }
@media (min-width: 960px) {
  .accroche-texte { padding-right: clamp(32px, 4vw, 56px); border-right: 1px solid var(--trait); }
}

.accroche h1 {
  margin-top: 18px;
  font-size: clamp(33px, 4.3vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.033em;
  font-weight: 700;
  max-width: 15ch;
  text-wrap: balance;
}
.accroche h1 em { font-style: normal; color: var(--afaire); }
.accroche .chapeau {
  margin-top: 22px;
  max-width: 48ch;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  color: var(--encre-douce);
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bouton, .bouton-2 {
  display: inline-block;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 20px;
}
.bouton { color: #fff; background: var(--encre); border: 1px solid var(--encre); }
.bouton:hover { background: var(--afaire); border-color: var(--afaire); }
.bouton-2 { color: var(--encre); background: transparent; border: 1px solid var(--trait-fort); }
.bouton-2:hover { border-color: var(--encre); }
.rassure { margin-top: 20px; line-height: 1.9; text-transform: none; letter-spacing: 0.04em; }

/* --- Le plan ---------------------------------------------------------
   Conteneur générique du dessin de réseau viaire. Le canevas se remplit,
   la légende est réglée dessous comme sur une planche. */

.plan {
  background: var(--fond-plan);
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
@media (min-width: 960px) { .plan { min-height: 100%; } }
.plan canvas { flex: 1; width: 100%; display: block; min-height: 300px; }
.plan .legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 11px 16px;
  border-top: 1px solid var(--trait);
  letter-spacing: 0.09em;
}
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.puce { width: 20px; height: 3px; display: inline-block; }
.pastille { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- Sections réglées ------------------------------------------------
   Un filet et un libellé, pas un océan de blanc. */

section {
  padding: clamp(40px, 5.5vw, 68px) 0;
  border-bottom: 1px solid var(--trait);
}
section.sans-trait { border-top: 0; }

.titre-section {
  font-size: clamp(23px, 2.9vw, 34px);
  letter-spacing: -0.028em;
  font-weight: 700;
  line-height: 1.1;
  max-width: 26ch;
  text-wrap: balance;
}
.intro-section {
  margin-top: 14px;
  max-width: 68ch;
  color: var(--encre-douce);
}
.sous-titre {
  margin-top: 44px;
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Repère de section : le libellé posé dans le filet, comme la référence
   d'une coupe sur un plan. */
.repere {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.repere::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait);
}

/* --- Séquences réglées ----------------------------------------------
   Remplace les grilles de cartes blanches à filet coloré. Chaque entrée est
   une ligne de tableau : filet au-dessus, libellé en mono, texte au fil. */

.sequence { margin-top: 30px; display: grid; }
.sequence > * {
  display: grid;
  gap: 6px 26px;
  padding: 22px 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 820px) {
  .sequence > * { grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.sequence h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.sequence p { color: var(--encre-douce); font-size: 15.5px; }
.sequence .quoi { padding-top: 3px; }
/* La pastille d'état ne s'allume que si la ligne porte vraiment cet état. */
.sequence [style*="--teinte"] .quoi { color: var(--teinte); }

/* Trois familles de défaut : même dispositif, avec le filet coloré en tête
   de ligne — ici la couleur EST l'information. */
.natures { margin-top: 30px; display: grid; }
.natures article {
  display: grid;
  gap: 6px 26px;
  padding: 22px 0 22px 18px;
  border-top: 1px solid var(--trait);
  border-left: 3px solid var(--teinte);
}
@media (min-width: 820px) {
  .natures article { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.natures .quoi { color: var(--teinte); padding-top: 3px; }
.natures h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.natures p { color: var(--encre-douce); font-size: 15.5px; }

/* Alias : les pages annexes utilisent encore ces noms. */
.usages, .echelle, .chaine { margin-top: 30px; display: grid; }
.usages article, .echelle article, .maillon {
  display: grid;
  gap: 6px 26px;
  padding: 22px 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 820px) {
  .usages article, .echelle article, .maillon {
    grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}
.usages .quoi, .echelle .quoi, .maillon .quoi { color: var(--teinte, var(--encre-douce)); padding-top: 3px; }
.usages h3, .echelle h3, .maillon h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.usages p, .echelle p, .maillon p { color: var(--encre-douce); font-size: 15.5px; }
.maillon .livrable { font-size: 14.5px; }
.maillon .livrable strong {
  display: block;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 500;
  margin-bottom: 3px;
}

/* --- Étapes numérotées ----------------------------------------------
   Numérotées parce que l'ordre est réel : on ne filme pas avant d'avoir le
   kit. Ailleurs, rien n'est numéroté. */

.etapes { margin-top: 30px; padding: 0; list-style: none; counter-reset: etape; display: grid; }
.etapes li {
  counter-increment: etape;
  display: grid;
  gap: 6px 26px;
  padding: 22px 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 820px) {
  .etapes li { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--data);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  color: var(--afaire);
  padding-top: 3px;
}
.etapes h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.etapes p { color: var(--encre-douce); font-size: 15.5px; }

/* --- Planches photographiques ---------------------------------------
   Les photos sont des pièces au dossier : cadre au trait, légende en mono
   portant la voie et la date. Pas d'ombre, pas d'arrondi. */

.planches { margin-top: 30px; display: grid; gap: 20px; align-items: start; }
@media (min-width: 800px) { .planches { grid-template-columns: 1fr 1fr; } }
.planches figure { border: 1px solid var(--trait); background: #fff; }
.planches img { display: block; width: 100%; height: auto; }
.planches figcaption {
  padding: 11px 14px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  line-height: 1.45;
  color: var(--encre-douce);
}
.planches .ref {
  display: block;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trait-fort);
  margin-bottom: 4px;
}
/* Ancien nom, conservé pour les pages non refondues. */
.mosaique { margin-top: 30px; display: grid; gap: 20px; align-items: start; }
@media (min-width: 800px) { .mosaique { grid-template-columns: 1fr 1fr; } }
.mosaique figure { border: 1px solid var(--trait); background: #fff; }
.mosaique img { display: block; width: 100%; height: auto; }
.mosaique figcaption {
  padding: 11px 14px; border-top: 1px solid var(--trait);
  font-size: 14px; line-height: 1.45; color: var(--encre-douce);
}

/* --- Figures ---------------------------------------------------------
   Numérotées, comme dans un rapport : la référence sert à les citer. */

.figure { margin-top: 30px; border: 1px solid var(--trait); background: var(--fond-plan); }
.figure img, .figure canvas { display: block; width: 100%; height: auto; }
.figure canvas { min-height: 360px; }
.figure figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding: 11px 16px; background: #fff;
  border-top: 1px solid var(--trait);
  font-family: var(--data); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--encre-douce);
}
.figure figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.carte { margin-top: 30px; border: 1px solid var(--trait); background: var(--fond-plan); }
.carte img { display: block; width: 100%; height: auto; }
.carte figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding: 11px 16px; background: #fff; border-top: 1px solid var(--trait);
  font-family: var(--data); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-douce);
}
.carte figcaption span { display: inline-flex; align-items: center; gap: 8px; }

/* --- Chiffres --------------------------------------------------------
   Alignés sur une réglure, pas posés dans des boîtes. */

.bilan {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--encre);
}
@media (min-width: 780px) { .bilan { grid-template-columns: repeat(4, 1fr); } }
.bilan > div { padding: 18px 20px 20px 0; border-right: 1px solid var(--trait); }
.bilan > div:last-child { border-right: 0; }
.chiffre {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--encre);
}
.chiffre-libelle {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--encre-douce);
  max-width: 26ch;
}

/* --- Tableaux réglés -------------------------------------------------- */

.tableau-enveloppe { margin-top: 22px; overflow-x: auto; }
table.rapport {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
table.rapport th, table.rapport td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
table.rapport thead th {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-weight: 500;
  border-bottom: 1px solid var(--encre);
}
table.rapport tbody th { font-weight: 600; }
table.rapport .cur, table.rapport .pre {
  font-family: var(--data); font-weight: 500; text-align: center;
}
table.rapport .cur { color: var(--curatif); }
table.rapport .pre { color: var(--attente); }
table.rapport .n {
  text-align: right;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.comparatif tbody tr.nous th { color: var(--afaire); }
table.comparatif tbody tr.nous td, table.comparatif tbody tr.nous th { font-weight: 600; }

.note-tableau {
  margin-top: 16px;
  max-width: 70ch;
  font-size: 14.5px;
  color: var(--encre-douce);
}

/* --- Taxonomie -------------------------------------------------------- */

.classes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 0; list-style: none; }
.classes li {
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 7px 14px 7px 0;
  margin-right: 14px;
  border-right: 1px solid var(--trait);
  color: var(--encre-douce);
}
.classes li:last-child { border-right: 0; }

/* --- Deux colonnes de texte ------------------------------------------- */

.couverture { display: grid; gap: 30px; margin-top: 30px; }
@media (min-width: 820px) { .couverture { grid-template-columns: 1fr 1fr; gap: 52px; } }
.couverture h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.couverture p { margin-top: 9px; color: var(--encre-douce); font-size: 15.5px; }

.encart {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--fond-plan);
  border-left: 3px solid var(--encre);
}
.encart h3 { font-size: 17px; letter-spacing: -0.02em; font-weight: 600; }
.encart p { margin-top: 8px; max-width: 70ch; font-size: 15px; color: var(--encre-douce); }

/* --- Repli clé en main ------------------------------------------------
   Volontairement discret : l'offre principale est l'autonomie. */

.repli {
  margin-top: 30px;
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--trait);
  background: var(--fond-plan);
}
@media (min-width: 800px) { .repli { grid-template-columns: 1fr auto; align-items: center; } }
.repli h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 600; }
.repli p { margin-top: 7px; font-size: 14.5px; color: var(--encre-douce); max-width: 62ch; }

/* --- Questions fréquentes --------------------------------------------- */

.faq { margin-top: 26px; border-top: 1px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  padding: 16px 0;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--data); color: var(--afaire); font-size: 17px; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--afaire); }
.faq details p { padding: 0 0 18px; max-width: 74ch; font-size: 15px; color: var(--encre-douce); }

/* --- Identité, contact, formulaire ------------------------------------ */

.identite { border-top: 1px solid var(--encre); }
.identite dl { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 14.5px; margin: 0; }
.identite dt {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-douce);
  padding: 12px 20px 12px 0; border-bottom: 1px solid var(--trait);
}
.identite dd {
  margin: 0; font-weight: 600; padding: 12px 0;
  border-bottom: 1px solid var(--trait); text-align: right;
}

.pleine-largeur {
  margin-left: calc(var(--marge) * -1);
  margin-right: calc(var(--marge) * -1);
  padding-left: var(--marge);
  padding-right: var(--marge);
}
.contact { background: var(--fond-plan); }

form { margin-top: 28px; display: grid; gap: 16px; max-width: 660px; }
.duo { display: grid; gap: 16px; }
@media (min-width: 620px) { .duo { grid-template-columns: 1fr 1fr; } }
label {
  display: block;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--texte);
  font-size: 16px;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--trait-fort);
  border-radius: 0;
}
textarea { min-height: 130px; resize: vertical; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button {
  justify-self: start;
  padding: 14px 24px;
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--encre);
  border: 0;
  cursor: pointer;
}
button:hover { background: var(--afaire); }
button:disabled { opacity: 0.5; cursor: default; }
.mention { font-size: 13.5px; color: var(--encre-douce); max-width: 66ch; }
#reponse { font-size: 15px; padding: 13px 16px; display: none; }
#reponse.ok { display: block; background: #dff0e6; border-left: 3px solid var(--releve); }
#reponse.ko { display: block; background: #fbe7e7; border-left: 3px solid var(--curatif); }

/* --- Pied -------------------------------------------------------------- */

footer { border-top: 1px solid var(--encre); padding: 26px 0 46px; display: grid; gap: 14px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied-liens a {
  font-family: var(--data); font-size: 11px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--encre-douce); text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.pied-liens a:hover { color: var(--encre); border-bottom-color: var(--encre); }
.pied-note { max-width: 74ch; line-height: 1.7; text-transform: none; letter-spacing: 0.03em; }

/* --- Territoires ------------------------------------------------------- */

.territoires { display: grid; margin-top: 26px; border: 1px solid var(--trait); }
@media (min-width: 900px) { .territoires { grid-template-columns: 1fr 358px; } }
.territoires-carte { background: var(--fond-plan); padding: 16px; min-height: 420px; display: flex; flex-direction: column; }
.territoires-carte canvas { flex: 1; width: 100%; min-height: 340px; display: block; }
.territoires-legende {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px;
  letter-spacing: 0.09em;
}
.territoires-legende span { display: inline-flex; align-items: center; gap: 8px; }
.territoires-flanc { background: #fff; padding: 20px; border-left: 1px solid var(--trait); }
@media (max-width: 899px) { .territoires-flanc { border-left: 0; border-top: 1px solid var(--trait); } }
.totaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.totaux .v {
  font-family: var(--data); font-variant-numeric: tabular-nums;
  font-size: 23px; font-weight: 500; letter-spacing: -0.035em; color: var(--encre); line-height: 1.1;
}
.totaux .l { font-size: 11.5px; line-height: 1.35; color: var(--encre-douce); margin-top: 5px; }
.filtre-label {
  display: block; margin: 22px 0 7px;
  font-family: var(--data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce);
}
.filtre { width: 100%; }
.territoires-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.territoires-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--trait); font-size: 14.5px;
}
.territoires-liste .lieu { font-weight: 600; }
.territoires-liste .ref {
  display: block; font-family: var(--data); font-size: 11px;
  font-weight: 400; color: var(--encre-douce); margin-top: 2px; letter-spacing: 0.04em;
}
.etat {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.07em;
  padding: 4px 9px; border: 1px solid; white-space: nowrap;
}
.etat.publie { color: var(--releve); border-color: var(--releve); }
.etat.encours { color: var(--attente); border-color: var(--attente); }
.etat.fiche { color: var(--encre-douce); border-color: var(--trait); }

/* --- Pages de territoire ----------------------------------------------- */

.fil { padding-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; letter-spacing: 0.09em; }
.fil a { color: var(--encre-douce); text-decoration: none; border-bottom: 1px solid var(--trait); }
.fil a:hover { color: var(--encre); }
.fil span { color: var(--encre); }
.identifiants { margin-top: 18px; line-height: 1.9; letter-spacing: 0.08em; }
.identifiants strong { color: var(--encre); font-weight: 500; }
.identifiants a { color: var(--encre-douce); }

.sources { padding-bottom: clamp(38px, 5vw, 64px); }
.sources ul { margin-top: 20px; padding-left: 18px; max-width: 76ch; }
.sources li { font-size: 14.5px; color: var(--encre-douce); margin-top: 9px; }
.sources strong { color: var(--encre); font-weight: 600; }

/* --- Signature méthode (schéma des deux sens) --------------------------- */

.signature { margin-top: 30px; padding: 24px; border: 1px solid var(--trait); background: #fff; }
.signature h2 { font-size: clamp(18px, 2.2vw, 23px); line-height: 1.2; letter-spacing: -0.025em; max-width: 34ch; }
.signature p { margin-top: 11px; max-width: 64ch; color: var(--encre-douce); font-size: 15.5px; }
.rue { margin-top: 24px; }
.rue svg { width: 100%; height: auto; display: block; }
.signature .legende { margin-top: 18px; }