/* Domaine du Mons — feuille unique. Aucune dépendance, aucune police distante. */

/* ------------------------------------------------------------------ tokens
   Une valeur écrite deux fois est une décision prise deux fois. Tout ce qui
   suit se réfère à ces variables, jamais à un littéral.
   Contrastes vérifiés au rapport WCAG, sur --papier et sur --surface. */
:root {
  /* substrat */
  --papier:  #ffffff;   /* fond de page */
  --surface: #f6f5f0;   /* fond de bloc : condensé, fiche, note */
  --encre:   #1a1915;   /* texte courant — 17,6:1, AAA */
  --douce:   #5b5749;   /* texte secondaire — 7,2:1, AAA */
  --filet:   #d8d4c7;   /* séparateur décoratif, hors critère de contraste */
  --bord:    #7d7768;   /* limite VISIBLE d'un contrôle — 4,5:1, seuil 3:1 */
  --grille:  #ebe8df;   /* quadrillage de graphe */

  /* accent — un seul, identitaire */
  --accent:      #5c6b4a;   /* 5,7:1 */
  --accent-fort: #4a5a3a;   /* 7,5:1, AAA — dès qu'un accent porte du texte */

  /* statuts — jamais sans le mot écrit à côté, jamais de changement de
     famille chromatique entre les deux thèmes */
  --calme:     #0a6f45;   /* 6,2:1 sur papier, 5,7:1 sur surface */
  --vigilance: #7d6100;   /* 5,9:1 / 5,4:1 — un ocre sourd : à l'écran, un
                             jaune sur blanc ne sera jamais conforme */
  --alerte:    #b23a0c;   /* 6,0:1 / 5,5:1 */

  /* le repère « nous sommes ici » : ce n'est pas une alerte, et une révision
     de la sémantique d'alerte ne doit pas déplacer le lieu sur la carte */
  --ici: #b23a0c;

  --trace: #5c6b4a;     /* courbes de graphe */

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           "Noto Serif", "Liberation Serif", "Times New Roman", serif;

  /* échelle typographique — 7 crans, ratio 1,125 */
  --t-xs:      0.79rem;   /* légendes, sources, horodatage, en-têtes */
  --t-s:       0.889rem;  /* tableaux, nav, pied, notes */
  --t-m:       1rem;      /* corps — plancher absolu pour du texte suivi */
  --t-l:       1.125rem;  /* chapeau, h3 */
  --t-xl:      1.266rem;  /* h2 */
  --t-xxl:     1.424rem;  /* h1 */
  --t-chiffre: 1.602rem;  /* .tuile .valeur */

  /* échelle d'espacement — base 4 px */
  --e-1: .25rem;  --e-2: .5rem;  --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;   --e-7: 3rem;

  /* mesures */
  --mesure-texte: 34rem;   /* ~64 signes en Georgia 16 px */
  --mesure-large: 52rem;   /* cartes, tableaux larges, graphes */
  --rail:         12rem;   /* colonne de gauche : sommaire, titres de section */
  --marge:        14rem;   /* colonne de droite : notes en marge */
  --gouttiere:    2.5rem;

}
@media (prefers-color-scheme: dark) {
  :root {
    --papier:  #14130e;
    --surface: #1c1a14;
    --encre:   #e8e2d2;   /* 14,4:1, AAA */
    --douce:   #a8a18c;   /* 7,2:1, AAA — était #9d9682 à 6,3:1 */
    --filet:   #3a352a;
    --bord:    #7a7463;   /* 4,0:1 sur papier, 3,7:1 sur surface — #6b6555
                             tombait pile sur 3,00:1, sans marge */
    --grille:  #282419;
    --accent:      #9cb388;
    --accent-fort: #9cb388;
    --calme:     #3fbc92;
    --vigilance: #d2a83a;
    --alerte:    #f0824e;   /* orange, comme en clair — c'était un rose */
    --ici:       #f0824e;
    --trace: #9cb388;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  /* Georgia est absente d'Android et de la plupart des Linux, Times New Roman
     aussi : sur la cible prioritaire, la pile s'effondrait jusqu'ici sur le
     serif générique — c'est-à-dire Noto Serif — sans que ce soit un choix.
     Les deux substituts sont nommés : le rendu ne change pas, il devient
     prévisible. */
  font: var(--t-m)/1.55 Georgia, "Iowan Old Style", "Palatino Linotype",
        "Book Antiqua", "Noto Serif", "Liberation Serif", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* La largeur de page dépend du gabarit (body[data-gabarit], plus bas) : un
   texte long se lit sur 34 rem, un tableau de bord a besoin de 66. Le bandeau
   et le pied suivent la page, pour que les bords s'alignent. */
body { --largeur-page: var(--mesure-texte); }
.bandeau-contenu, main, footer > div { max-width: var(--largeur-page); margin-inline: auto; }
main { padding: 0 var(--e-4) var(--e-4); }

/* ---------------------------------------------------- bandeau rétractable */

.bandeau {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
  transition: transform .22s ease;
}
@media (prefers-reduced-motion: reduce) {
  .bandeau { transition: none; }
  * { animation-duration: .01ms !important;
            animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.bandeau.replie { transform: translateY(-100%); }

.bandeau-contenu {
  display: flex; align-items: baseline; gap: var(--e-1) var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-2) var(--e-4) var(--e-2);
}

.titre { font-size: var(--t-l); font-weight: 600; margin: 0; letter-spacing: -.005em; white-space: nowrap; }
.titre a { text-decoration: none; color: inherit; }
.sous-titre { margin: 0; font-size: var(--t-xs); font-style: italic; color: var(--douce); }

nav { margin-left: auto; font-size: var(--t-s); }
/* sans flex-wrap, les six entrées tiennent sur une ligne de 403 px et
   débordent de 29 px sur un téléphone de 390 — mesuré au rendu */
nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
           gap: var(--e-1) var(--e-4); align-items: center; }
nav > ul > li { margin: 0; position: relative; }
/* Les entrées de navigation faisaient 19 px de haut : sous le plancher de
   24 px, et c'est le contrôle le plus utilisé du site au doigt. Le
   soulignement de page courante reste calé sur le texte. */
nav a, nav button {
  color: inherit; text-decoration: none; background: none; border: 0;
  font: inherit; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 1.5rem; padding: var(--e-1) 0;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav button:hover { border-bottom-color: var(--encre); }
nav [aria-current="page"] { border-bottom: 1.5px solid var(--accent); }
/* 24 px de cible au minimum (WCAG 2.2, 2.5.8). La marge négative annule
   l'encombrement : le glyphe ne grossit pas, la zone sensible si. */
nav .chevron { padding: var(--e-2); margin: calc(var(--e-2) * -1) -.2rem;
               min-width: 1.5rem; min-height: 1.5rem;
               line-height: 1; opacity: .55; }
nav .chevron:hover, nav .chevron[aria-expanded="true"] { opacity: 1; border-bottom-color: transparent; }
.menu-deroulant { display: inline-flex; align-items: baseline; gap: var(--e-1); }

.sous-menu {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 10;
  min-width: 13rem; margin: 0; padding: var(--e-1) 0; list-style: none;
  background: var(--papier); border: 1px solid var(--filet);
  box-shadow: 0 4px 14px rgba(0,0,0,.09);
}
/* pont invisible : la souris peut descendre du titre au menu sans le fermer */
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.65rem; height: .65rem; }
.sous-menu[hidden] { display: none; }
.sous-menu li { margin: 0; }
.sous-menu a { display: block; padding: var(--e-1) var(--e-3); border: 0; white-space: nowrap; }
.sous-menu a:hover { background: var(--surface); border: 0; }
.sous-menu hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e-1) 0; }
.sous-menu .groupe {
  padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--t-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--douce);
}
.sous-menu .groupe:first-child { padding-top: var(--e-1); }

@media (max-width: 34rem) {
  .bandeau-contenu { padding-bottom: var(--e-2); }
  .sous-titre { flex-basis: 100%; }
  nav { margin-left: 0; flex-basis: 100%; margin-top: var(--e-1); }
  nav > ul { gap: var(--e-1) var(--e-3); }
  .sous-menu { right: auto; left: 0; }
}

/* ------------------------------------------------------------- le contenu */

main { padding-top: var(--e-5); }

/* h2 était à la taille exacte du chapeau : un titre de section ne se
   distinguait de son propre chapeau par rien */
h2 {
  font-size: var(--t-xl); line-height: 1.25; font-weight: 600;
  margin: var(--e-6) 0 var(--e-2);
}
h2 + p, h2 + div, h2 + ul { margin-top: 0; }
h3 { font-size: var(--t-l); line-height: 1.3; font-weight: 600; margin: var(--e-5) 0 var(--e-2); }
/* un titre n'est jamais plus petit que le texte qu'il titre : h4 gagne en
   graisse ce qu'il ne prend plus en taille */
h4 { font-size: var(--t-m); line-height: 1.35; font-weight: 700; margin: var(--e-4) 0 var(--e-2); }
.nb { color: var(--douce); font-size: .88em; }

p, ul, ol { margin: 0 0 var(--e-3); }
ul, ol { padding-left: var(--e-4); }
li { margin-bottom: var(--e-1); }

a { color: inherit; text-underline-offset: .14em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* Un seul anneau de focus, pour tout ce qui se pose au clavier. Seuls les
   liens en avaient un ; le chevron du menu, les boutons de filtre, le champ
   de recherche et les <summary> tombaient sur l'anneau par défaut du
   navigateur — variable, et invisible sur certains. Spécificité nulle :
   déclaré ici, avant les composants, et aucun composant ne touche outline. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.chapeau { font-size: var(--t-l); line-height: 1.45; margin-bottom: var(--e-5); }
.retour { font-size: var(--t-s); color: var(--douce); margin-bottom: var(--e-4); }
/* le lien de retour est une navigation à lui seul, pas un lien dans une
   phrase : plancher de 24 px */
.retour a { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* filet dessiné, en place des bordures */


/* ------------------------------------------------------------- les dessins */

.croquis { display: block; width: 100%; height: auto; margin: var(--e-1) 0 var(--e-2); }
.trait-croquis { fill: none; stroke: var(--encre); stroke-width: 1.15; stroke-linecap: round; opacity: .78; }
/* ------------------------------------------------- le texte des croquis
   Ces tailles sont en unités du viewBox : elles se réduisent avec le dessin.
   À 13,5 px dans un cadre de 640 rendu sur un téléphone de 360, l'étiquette
   sortait à 6,9 px, et la plus petite à 5,8 px — les croquis portaient
   l'argument, et l'argument ne se lisait pas. Mesuré, pas supposé.
   Les cinq étiquettes qui débordaient aux nouvelles tailles ont été ancrées
   à droite ; le contrôle de débordement est dans scripts/verifier.py. */
.texte-croquis text  { fill: var(--encre); font-family: var(--serif); font-size: 17px; opacity: .8; }
.texte-croquis .fort { font-size: 22px; font-weight: 600; opacity: .92; }
.texte-croquis .petit,
.texte-croquis .sur  { font-size: 15px; opacity: .62; font-style: italic; }
@media (max-width: 40rem) {
  /* sous 640 px de fenêtre, le dessin ne fait plus que ~330 px de large :
     il faut grossir dans le viewBox pour que le rendu tienne à 13 px */
  .texte-croquis text  { font-size: 26px; }
  .texte-croquis .fort { font-size: 33px; }
  .texte-croquis .petit,
  .texte-croquis .sur  { font-size: 23px; }
}

figure { margin: var(--e-4) 0 var(--e-5); }
figcaption { font-size: var(--t-s); color: var(--douce); margin-top: var(--e-1); }

/* ------------------------------------------------------------- l'encadré */

.note {
  border-left: 2px solid var(--accent);
  padding: var(--e-1) 0 var(--e-1) var(--e-3);
  margin: var(--e-4) 0 var(--e-5);
  font-size: var(--t-m);
}
.note p:last-child { margin-bottom: 0; }
.note .etiquette { display: block; font-size: var(--t-xs); font-style: italic; color: var(--douce); margin-bottom: var(--e-1); }

/* ------------------------------------------------------- listes d'états */

.etats { list-style: none; padding: 0; margin: var(--e-4) 0 var(--e-5); }
.etats li {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: var(--e-1) var(--e-4);
  padding: var(--e-2) 0; border-top: 1px solid var(--filet); margin: 0;
}
.etats li:last-child { border-bottom: 1px solid var(--filet); }
.etat { font-size: var(--t-xs); font-style: italic; color: var(--douce); padding-top: var(--e-1); }
@media (max-width: 30rem) { .etats li { grid-template-columns: 1fr; } .etat { padding-top: 0; } }

/* ------------------------------------------------------------- les tuiles */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; margin: var(--e-4) 0 var(--e-5); }
.tuile { background: var(--papier); padding: var(--e-3) var(--e-3) var(--e-3); box-shadow: 0 0 0 1px var(--filet); }
.tuile .libelle { margin: 0 0 var(--e-1); font-size: var(--t-xs); font-style: italic; color: var(--douce); }
.tuile .valeur { margin: 0 0 var(--e-1); font-size: var(--t-chiffre); line-height: 1.05; font-variant-numeric: tabular-nums; }
.tuile .valeur .unite { font-size: var(--t-xs); color: var(--douce); font-variant-numeric: normal; }
.tuile .detail { margin: 0; font-size: var(--t-xs); color: var(--douce); }
.tuile[data-etat="calme"] .valeur { color: var(--calme); }
.tuile[data-etat="vigilance"] .valeur { color: var(--vigilance); }
.tuile[data-etat="alerte"] .valeur { color: var(--alerte); }

.pastille { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: var(--e-1); }
.pastille.calme { background: var(--calme); }
.pastille.vigilance { background: var(--vigilance); }
.pastille.alerte { background: var(--alerte); }

/* --------------------------------------------------------- les graphiques */

.graphe { margin: var(--e-4) 0 var(--e-5); }
.graphe h3 { margin: 0 0 var(--e-1); }
.graphe .legende-axe { font-size: var(--t-s); color: var(--douce); margin: 0 0 var(--e-2); }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }

.grille-ligne { stroke: var(--grille); stroke-width: 1; }
.axe-texte { fill: var(--douce); font-size: 11px; font-family: var(--serif); }
.trace-ligne { fill: none; stroke: var(--trace); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.trace-bande { fill: var(--trace); opacity: .15; }
.trace-barre { fill: var(--trace); }
.trace-tendance { fill: none; stroke: var(--alerte); stroke-width: 1.8; stroke-dasharray: 5 4; }
.trace-reference { fill: var(--douce); opacity: .12; }
.trace-mediane { fill: none; stroke: var(--douce); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .7; }
.trace-zero { stroke: var(--douce); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.curseur { stroke: var(--douce); stroke-width: 1; }
.point-actif { fill: var(--trace); stroke: var(--papier); stroke-width: 2; }

.legende { list-style: none; padding: 0; margin: 0 0 var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-xs); color: var(--douce); }
.legende li { margin: 0; display: flex; align-items: center; gap: var(--e-1); }
.legende .ech { width: 1.4rem; height: .6rem; display: inline-block; }
.legende .ech.ligne { height: 0; border-top: 1.8px solid var(--trace); }
.legende .ech.bande { background: var(--douce); opacity: .18; }
.legende .ech.mediane { height: 0; border-top: 1.3px dashed var(--douce); }

.infobulle {
  position: absolute; pointer-events: none; z-index: 30;
  background: var(--papier); border: 1px solid var(--filet);
  padding: var(--e-1) var(--e-2); font-size: var(--t-xs); line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); white-space: nowrap;
}
.infobulle strong { display: block; font-weight: 600; margin-bottom: var(--e-1); }
.enveloppe-graphe { position: relative; }

/* --------------------------------------------------------- les tableaux */

.donnees { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin: var(--e-3) 0 var(--e-4); }
.donnees th, .donnees td { text-align: left; padding: var(--e-1) var(--e-2) var(--e-1) 0; border-bottom: 1px solid var(--filet); }
/* l'italique sur 12,6 px coûte de la lisibilité et n'apporte rien */
.donnees th { font-weight: 600; font-size: var(--t-xs); color: var(--douce); }
.donnees td { font-variant-numeric: tabular-nums; }
.defilant { overflow-x: auto; }
details.tableau-brut { margin: var(--e-1) 0 var(--e-5); }
details.tableau-brut summary { cursor: pointer; font-size: var(--t-s); color: var(--douce); }

/* ------------------------------------------------------------ les cartes */

.cartes { list-style: none; padding: 0; margin: var(--e-4) 0 var(--e-5); }
.cartes li { border-top: 1px solid var(--filet); padding: var(--e-3) 0; margin: 0; }
.cartes li:last-child { border-bottom: 1px solid var(--filet); }
.cartes h3 { margin: 0 0 var(--e-1); font-size: var(--t-m); }
.cartes h3 a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.cartes h3 a:hover { border-bottom-color: var(--encre); }
.cartes p { margin: 0 0 var(--e-1); font-size: var(--t-m); }
.cartes .source { margin: 0; }
.cartes .bientot h3 { color: var(--douce); }

/* ------------------------------------------------------------------ états */

.chargement { color: var(--douce); font-style: italic; }
.echec { border-left: 2px solid var(--vigilance); padding-left: var(--e-3); font-size: var(--t-s); color: var(--douce); }
.horodatage { margin-top: var(--e-5); }

/* ----------------------------------------------------------------- le pied */

footer > div { padding-inline: var(--e-4); }
footer { border-top: 1px solid var(--filet); margin-top: 2.4rem; padding: var(--e-4) 0 2.4rem; font-size: var(--t-s); color: var(--douce); }
footer p { margin: 0 0 var(--e-1); }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
            gap: var(--e-1) var(--e-4); }
/* le pied est une liste de navigation, pas des liens dans une phrase :
   le plancher de 24 px s'y applique aussi */
footer ul a { display: inline-flex; align-items: center; min-height: 1.5rem; }

h1 { font-size: var(--t-xxl); line-height: 1.2; font-weight: 600; margin: 0 0 var(--e-3); letter-spacing: -.008em; }
h1 + .chapeau { margin-top: -.25rem; }

/* ------------------------------------------------------------- les cartes */
.carte figure { margin: 0 0 var(--e-4); }
.carte img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 0 0 1px var(--filet); background: var(--surface);
}
.carte figcaption { margin-top: var(--e-2); font-size: var(--t-s); color: var(--douce); }
.legende-carte {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); list-style: none;
  padding: 0; margin: var(--e-2) 0 0; font-size: var(--t-s);
}
.legende-carte li { display: flex; align-items: center; gap: var(--e-1); margin: 0; }
.pastille-carte {
  width: .8rem; height: .8rem; flex: none; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.epoques { display: flex; gap: var(--e-2); margin: 0 0 var(--e-2); flex-wrap: wrap; }
.epoques button {
  font: inherit; font-size: var(--t-s); padding: var(--e-2) var(--e-3); cursor: pointer;
  min-height: 2.25rem;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--bord); border-radius: 2px;
}
.epoques button[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* --------------------------------------------------- le condensé de tête */
.condense {
  margin: 0 0 var(--e-5); padding: var(--e-3) var(--e-4);
  background: var(--surface); box-shadow: inset 2px 0 0 var(--accent);
}
.condense ul { margin: 0; padding: 0; list-style: none; }
.condense li {
  margin: 0 0 var(--e-1); padding-left: var(--e-4); position: relative; line-height: 1.44;
}
.condense li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45rem; height: 1px; background: var(--douce);
}
.condense li:last-child { margin-bottom: 0; }
.condense p { margin: 0; }
@media (max-width: 34rem) { .condense { font-size: var(--t-m); padding: var(--e-3) var(--e-3); } }

/* ------------------------------------------------------- la carte du réseau */

@media (min-width: 860px) {  }










.filtres { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-1) 0 var(--e-3); }
.filtres button {
  font: inherit; font-size: var(--t-s); padding: var(--e-2) var(--e-3); cursor: pointer;
  min-height: 2.25rem;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--bord); border-radius: 2px;
}
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }



.liste-lieux { list-style: none; padding: 0; margin: 0; }
.liste-lieux li { margin: 0; padding: var(--e-2) 0; border-bottom: 1px solid var(--filet); }
.liste-lieux .lieu-nom { font-weight: 600; }
.liste-lieux .lieu-detail { color: var(--douce); font-size: var(--t-s); }

/* ---------------------------------------------------------------- la carte */
/* Leaflet sans tuiles : le fond de carte, c'est le papier de la page.
   Les couleurs viennent des variables du site, pas des valeurs de Leaflet. */

@media (max-width: 700px) {  }
@media (min-width: 860px) {  }









.leaflet-tooltip { background: var(--papier); border: 1px solid var(--filet); color: var(--encre);
                   font-family: var(--serif); font-size: var(--t-xs); box-shadow: none;
                   border-radius: 0; padding: 2px 6px; }
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before { border: none; }
.leaflet-tooltip.bulle-commune { color: var(--douce); }
.leaflet-tooltip.bulle-ici { font-weight: 600; border-color: var(--alerte); }
.leaflet-control-zoom a { background: var(--papier); color: var(--encre);
                          border-color: var(--filet); font-family: var(--serif); }
.leaflet-control-zoom a:hover { background: var(--grille); }
.leaflet-control-scale-line { background: transparent; border-color: var(--douce);
                              color: var(--douce); font-family: var(--serif); }
.liste-lieux .lecture { color: var(--douce); font-size: var(--t-s); font-style: italic; }
details > summary { cursor: pointer; color: var(--accent); margin: var(--e-2) 0; }
.recherche { margin: var(--e-3) 0 var(--e-4); }
.recherche label { display: block; color: var(--douce); font-size: var(--t-s); margin-bottom: var(--e-1); }
.recherche input { width: 100%; max-width: 26rem; padding: var(--e-2) var(--e-2); font-family: var(--serif);
                   font-size: var(--t-m); color: var(--encre); background: var(--papier);
                   border: 1px solid var(--bord); border-radius: 0; }
.recherche input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
button.suite { font: inherit; font-size: var(--t-s); color: var(--encre); min-height: 2.25rem;
               background: var(--surface); border: 1px solid var(--bord); border-radius: 0;
               padding: var(--e-2) var(--e-3); cursor: pointer; margin: var(--e-2) 0 var(--e-5); }
button.suite:hover { background: var(--grille); }
/* --- carte : filtres, points masqués, échec --- */
.leaflet-interactive.masque { opacity: .12; pointer-events: none; }
.carto-liste tr[hidden] { display: none; }
.carto-liste tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.carto-zone p.chargement, .carto-zone p.echec { padding: var(--e-4); color: var(--douce); }
.carto-zone p.echec { color: var(--encre); }
.carto-meta { margin: var(--e-2) 0 var(--e-5); }
.carto-meta dt { font-weight: 600; display: inline; }
.carto-meta dd { display: inline; margin: 0 var(--e-4) 0 var(--e-1); }
.carto-meta dd::after { content: ""; display: block; }


/* ------------------------------------------ le socle cartographique, branché
   carto-socle.css annonce que le site hôte redéfinit ses variables. Aucune ne
   l'était : deux jeux parallèles cohabitaient sur la même page — deux noirs,
   deux crèmes, et surtout deux accents, donc deux couleurs de focus. */
.carto {
  --carto-encre:  var(--encre);
  --carto-douce:  var(--douce);
  --carto-trait:  var(--bord);
  --carto-fond:   var(--surface);
  --carto-accent: var(--ici);
  --carto-maille: var(--filet);
}
@media (prefers-color-scheme: dark) {
  /* La surface cartographique reste claire — un fond de carte sombre est un
     autre travail cartographique, et les halos blancs des étiquettes y
     comptent. Mais la fiche, la liste et les métadonnées sont dans le flux de
     la page : elles suivaient jusqu'ici le crème du vendor, en blocs clairs
     posés au milieu d'une page sombre. */
  .carto-zone { --carto-fond: #f4f2ee; --carto-encre: #1f1d1a; --carto-trait: #cfc9bf; }
}

/* Les six couleurs de familles sont celles d'Okabe & Ito, validées pour les
   trois dichromaties : on ne les modifie pas. Deux d'entre elles passent mal
   en aplat sur fond crème (2,0:1) — le remède est de les cerner, pas de les
   foncer. La forme reste le porteur d'information, la couleur un confort. */
.carto-symbole svg path, .carto-pastille-svg svg path { stroke: var(--encre); stroke-width: 1; }
.carto-pastille { border: 1px solid var(--bord); }

/* 191 cellules de description libre, sans aucune règle jusqu'ici, dans un
   tableau à 100 % de large. */
/* Le tableau des 191 fiches fait six colonnes : à 390 px il poussait la page
   à 735 px de large, donc tout le site débordait latéralement sur téléphone.
   Il défile dans son propre cadre, comme .defilant. Mesuré au rendu. */
.carto-liste { overflow-x: auto; }
.carto-liste table { min-width: 34rem; }

/* ------------------------------------------------- le débordement contrôlé
   La carte du réseau faisait 544 px de large sur un écran de 1400 : elle
   était enfermée dans la mesure de lecture, qui est faite pour du texte.
   Deux règles visaient ce cas, avec un décalage forfaitaire de −70 px ; elles
   ciblaient l'ancienne carte et sont mortes avec elle.
   Le débordement est ici symétrique et calculé. Sous 56rem, le bloc reprend
   simplement la largeur du conteneur : aucune bascule, aucun saut. */
.carto-zone, .carto-liste, .defilant.large { max-width: var(--mesure-large); }
@media (min-width: 56rem) {
  .carto-zone, .carto-liste, .defilant.large {
    width: var(--mesure-large);
    margin-inline: calc((var(--mesure-texte) - var(--mesure-large)) / 2);
  }
}
.carto-dit { max-width: 22rem; font-size: var(--t-s); color: var(--douce); }
@media (max-width: 40rem) {
  /* la description libre est la colonne la plus large : on la borne */
  .carto-dit { max-width: 14rem; }
}

/* Un nombre se compare en colonne, et c'est la seule raison d'être d'un
   tableau de données : il s'aligne à droite. */
.donnees td.nombre, .donnees th.nombre { text-align: right; font-variant-numeric: tabular-nums; }


/* --------------------------------------------------- le cartouche de source
   L'argument du site est la traçabilité : dire d'où vient chaque chiffre. Ce
   cartouche existait sous quatre formes — .cartes .source, .horodatage,
   .carto-meta, .carto-fiche-source — toutes en italique, aucune nommée comme
   un composant. Elles partagent maintenant une seule définition. L'italique
   est retirée : une source se cite. */
.source,
.cartes .source,
.horodatage,
.carto-meta,
.carto-fiche .carto-fiche-source {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--douce);
  font-style: normal;
}
.source a,
.horodatage a,
.carto-meta a { color: inherit; }
/* trois champs, toujours dans cet ordre : origine — date de relevé — licence */
.source { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--filet); }
.source dt, .carto-meta dt { font-weight: 600; display: inline; }
.source dd { display: inline; margin: 0 var(--e-4) 0 var(--e-1); }
.source dd::after { content: ""; display: block; }

/* ================================================================ gabarits
   Ajouté le 24/09/2026. Chaque page déclare un gabarit (body[data-gabarit]) ;
   le contenu ne dit rien de sa mise en page. Au téléphone, tous les gabarits
   reviennent à la même colonne de lecture : les structures ne s'ouvrent
   qu'au-delà de 64 rem, là où il y a la place de les lire.

     accueil    portail en mosaïque, dessin en regard du texte
     recit      sommaire à gauche, texte, notes en marge à droite
     planche    titres de section dans un rail, contenu à 52 rem
     registre   pleine largeur pour les tableaux, texte tenu à 34 rem
     portail    cartes en mosaïque
     fiche      cartouche, points numérotés en marge, à emporter dans le rail
   ======================================================================== */

.evitement {
  position: absolute; left: var(--e-2); top: -3rem; z-index: 50;
  background: var(--papier); padding: var(--e-2) var(--e-3); border: 1px solid var(--bord);
}
.evitement:focus { top: var(--e-2); }

/* ------------------------------------------------------ fil d'Ariane */
.ariane { font-size: var(--t-xs); color: var(--douce); margin: 0 0 var(--e-3); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-2); }
.ariane li { margin: 0; display: inline-flex; align-items: center; min-height: 1.5rem; }
.ariane li + li::before { content: "/"; margin-right: var(--e-2); opacity: .6; }
.ariane a { color: inherit; }
.ariane [aria-current] { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

nav .rubrique-courante > .menu-deroulant > a,
nav .rubrique-courante > a { border-bottom: 1.5px solid var(--accent); }

/* ------------------------------------------------------------ le rail */
.rail { font-size: var(--t-s); margin: 0 0 var(--e-5); }
.sommaire { border-top: 1px solid var(--filet); padding-top: var(--e-2); }
.sommaire-titre { font-size: var(--t-xs); color: var(--douce); margin: 0 0 var(--e-1); font-style: italic; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
.sommaire li { margin: 0; }
.sommaire a { display: inline-flex; align-items: center; min-height: 1.5rem; text-decoration: none;
              border-bottom: 1px solid var(--filet); }
.sommaire a:hover, .sommaire a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--accent-fort); }

.a-emporter { margin-top: var(--e-4); padding: var(--e-3); background: var(--surface); }
.a-emporter-titre { font-size: var(--t-xs); font-style: italic; color: var(--douce); margin: 0 0 var(--e-1); }
.a-emporter ul { list-style: none; padding: 0; margin: 0 0 var(--e-2); }
.a-emporter li { margin: 0; }
.a-emporter li a { display: inline-flex; min-height: 1.5rem; align-items: center; }
.a-emporter .citer { font-size: var(--t-xs); color: var(--douce); margin: 0; }

/* -------------------------------------------------- relayer, en pied */
.relayer { margin: var(--e-7) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--filet); }
.relayer h2 { font-size: var(--t-s); font-weight: 600; margin: 0 0 var(--e-2); }
.relais { list-style: none; padding: 0; margin: 0 0 var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.relais li { margin: 0; }
.relais a, .relais button {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--e-3);
  font: inherit; font-size: var(--t-s); color: var(--encre); text-decoration: none;
  background: var(--papier); border: 1px solid var(--bord); border-radius: 2px; cursor: pointer;
}
.relais a:hover, .relais button:hover { background: var(--surface); }
.relais-note { font-size: var(--t-xs); color: var(--douce); margin: 0; }
.mastodon-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: var(--e-2) 0; font-size: var(--t-s); }
.mastodon-form input { font: inherit; padding: var(--e-1) var(--e-2); min-height: 2.25rem;
                       border: 1px solid var(--bord); background: var(--papier); color: var(--encre); }

.bouton {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--e-3);
  font: inherit; font-size: var(--t-s); color: var(--encre); text-decoration: none;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 2px; cursor: pointer;
}
.bouton:hover { background: var(--grille); }
.bouton[data-fait] { border-color: var(--calme); color: var(--calme); }

/* ----------------------------------------------------- l'accueil */
.portes { list-style: none; padding: 0; margin: var(--e-5) 0; display: grid; gap: 1px;
          grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--filet);
          box-shadow: 0 0 0 1px var(--filet); }
.portes li { margin: 0; background: var(--papier); }
.portes a { display: flex; flex-direction: column; gap: var(--e-1); height: 100%;
            padding: var(--e-4); text-decoration: none; }
.portes a:hover { background: var(--surface); }
.portes a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.porte-sur { font-size: var(--t-xs); font-style: italic; color: var(--douce); }
.portes strong { font-size: var(--t-l); font-weight: 600; }
.porte-dit { font-size: var(--t-s); color: var(--douce); line-height: 1.45; }

.nouvelles { list-style: none; padding: 0; margin: var(--e-3) 0; }
.nouvelles li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 var(--e-3);
                padding: var(--e-2) 0; margin: 0; border-top: 1px solid var(--filet); }
.nouvelles li:last-child { border-bottom: 1px solid var(--filet); }
.nouvelles time { grid-row: span 2; font-size: var(--t-s); color: var(--douce); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.nouvelles span { font-size: var(--t-s); color: var(--douce); }

/* --------------------------------------------------- le portail */
.vedette { margin: var(--e-5) 0; padding: var(--e-4) var(--e-5); background: var(--surface);
           box-shadow: inset 3px 0 0 var(--accent); }
.vedette-sur { font-size: var(--t-xs); font-style: italic; color: var(--douce); margin: 0 0 var(--e-1); }
.vedette h2 { margin: 0 0 var(--e-2); }
.vedette h2 a { text-decoration: none; }
.vedette p:last-child { margin-bottom: 0; }
.carte-code { font-size: var(--t-xs); color: var(--douce); margin: 0 0 var(--e-1) !important; font-variant-numeric: tabular-nums; }
.code { font-variant-numeric: tabular-nums; color: var(--accent-fort); white-space: nowrap; }
h1 .code { display: block; font-size: var(--t-m); font-weight: 600; margin-bottom: var(--e-1); }

/* ----------------------------------------------------- la fiche */
.cartouche { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
             margin: 0 0 var(--e-5); border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.cartouche div { padding: var(--e-2) var(--e-3); border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.cartouche dt { font-size: var(--t-xs); font-style: italic; color: var(--douce); }
.cartouche dd { margin: 0; font-size: var(--t-s); }
[data-gabarit="fiche"] .corps-page blockquote {
  margin: var(--e-4) 0; padding: var(--e-3) var(--e-4); font-size: var(--t-l); line-height: 1.4;
  background: var(--surface); box-shadow: inset 3px 0 0 var(--accent);
}
[data-gabarit="fiche"] .corps-page blockquote p { margin: 0; }
.point { position: relative; }
.point::before { content: attr(data-n); font-weight: 600; color: var(--accent-fort);
                 font-variant-numeric: tabular-nums; margin-right: var(--e-2); }
.sec:has(> .h-contreindications) { margin: var(--e-6) 0; padding: var(--e-1) var(--e-4) var(--e-2);
                                   box-shadow: inset 3px 0 0 var(--vigilance); background: var(--surface); }
.sec:has(> .h-contreindications) h2 { margin-top: var(--e-3); }
.sec:has(> .h-verification) { padding: var(--e-1) var(--e-4) var(--e-2); box-shadow: inset 3px 0 0 var(--calme); }
.gabarit-texte { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: .8rem;
                 line-height: 1.5; background: var(--surface); padding: var(--e-3); overflow-x: auto;
                 box-shadow: 0 0 0 1px var(--filet); }
.renvoi-absent { color: var(--douce); }
code { font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: .86em; }

/* ------------------------------------------------ la page Relayer */
.extrait { display: grid; grid-template-columns: 1fr; gap: var(--e-3); padding: var(--e-4) 0;
           border-top: 1px solid var(--filet); }
.extrait h3 { margin: 0 0 var(--e-2); }
.extrait-vignette img { display: block; width: 100%; max-width: 10rem; height: auto; box-shadow: 0 0 0 1px var(--filet); }
.extrait-texte { font-size: var(--t-s); }
.extrait-meta { font-size: var(--t-xs); color: var(--douce); }
.canal { border-top: 1px solid var(--filet); }
.canal summary { display: flex; justify-content: space-between; gap: var(--e-3); min-height: 2.25rem;
                 align-items: center; margin: 0; color: var(--encre); }
.canal .compte { font-size: var(--t-xs); color: var(--douce); font-variant-numeric: tabular-nums; }
.canal textarea { width: 100%; font: inherit; font-size: var(--t-s); line-height: 1.45; padding: var(--e-2);
                  color: var(--encre); background: var(--surface); border: 1px solid var(--filet); resize: vertical; }
.canal .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 var(--e-3); }
.serie { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.serie img { display: block; width: 7.5rem; height: auto; box-shadow: 0 0 0 1px var(--filet); }
@media (min-width: 44rem) { .extrait { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--e-5); } }

/* ------------------------------------------------ les éditions */
.editions { list-style: none; padding: 0; margin: var(--e-4) 0; display: grid; gap: var(--e-4);
            grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.editions li { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: var(--e-2); }
.editions .apercu { display: block; aspect-ratio: 148 / 210; background: var(--surface);
                    box-shadow: 0 0 0 1px var(--filet), 3px 3px 0 var(--filet); overflow: hidden; }
.editions .apercu.a4 { aspect-ratio: 210 / 297; }
.editions .apercu.paysage { aspect-ratio: 297 / 210; }
.editions .apercu img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.editions h3 { margin: 0; font-size: var(--t-m); }
.editions p { margin: 0; font-size: var(--t-s); color: var(--douce); }

/* ===================================================== grands écrans */
@media (min-width: 64rem) {

  /* -------- récit : sommaire | texte | marge */
  [data-gabarit="recit"],
  [data-gabarit="fiche"] {
    --largeur-page: calc(var(--rail) + var(--mesure-texte) + var(--marge) + 2 * var(--gouttiere) + 2rem);
  }
  [data-gabarit="recit"] main,
  [data-gabarit="fiche"] main {
    display: grid; column-gap: var(--gouttiere);
    grid-template-columns: var(--rail) minmax(0, var(--mesure-texte)) var(--marge);
    grid-template-areas: "ariane ariane ariane" "rail tete tete" "rail corps corps" ". relayer relayer";
    align-items: start;
  }
  [data-gabarit="recit"] .ariane, [data-gabarit="fiche"] .ariane { grid-area: ariane; }
  [data-gabarit="recit"] .tete-page, [data-gabarit="fiche"] .tete-page { grid-area: tete; max-width: var(--mesure-texte); }
  [data-gabarit="recit"] .rail, [data-gabarit="fiche"] .rail {
    grid-area: rail; grid-row: 2 / 4; position: sticky; top: 4.5rem; margin: 0;
    max-height: calc(100vh - 6rem); overflow-y: auto;
  }
  [data-gabarit="recit"] .sommaire ol, [data-gabarit="fiche"] .sommaire ol,
  [data-gabarit="planche"] .sommaire ol { display: block; }
  [data-gabarit="recit"] .corps-page, [data-gabarit="fiche"] .corps-page { grid-area: corps; }
  [data-gabarit="recit"] .relayer, [data-gabarit="fiche"] .relayer { grid-area: relayer; max-width: var(--mesure-texte); }

  /* les notes passent en marge : le texte garde sa mesure, la note se lit
     en regard du paragraphe qui la suit. Une figure ne se glisse jamais
     sous une note. */
  [data-gabarit="recit"] .corps-page > .sec > *:not(.note):not(figure),
  [data-gabarit="fiche"] .corps-page > .sec > *:not(figure):not(.defilant) { max-width: var(--mesure-texte); }
  [data-gabarit="recit"] .corps-page .note {
    float: right; clear: right; width: var(--marge); margin: .3rem 0 var(--e-4) var(--gouttiere);
    font-size: var(--t-s);
  }
  [data-gabarit="recit"] .corps-page figure { clear: right; }
  [data-gabarit="recit"] .corps-page figure .croquis { max-width: calc(var(--mesure-texte) + var(--marge)); }
  [data-gabarit="fiche"] .corps-page .defilant { max-width: calc(var(--mesure-texte) + var(--marge)); }
  [data-gabarit="fiche"] .corps-page { max-width: calc(var(--mesure-texte) + var(--marge)); }

  /* dans une fiche, les points numérotés sortent dans la gouttière */
  [data-gabarit="fiche"] .point::before { position: absolute; right: calc(100% + .8rem); top: 0; margin: 0;
                                          font-size: var(--t-xl); line-height: 1.2; }

  /* -------- planche : rail des titres | contenu */
  [data-gabarit="planche"] {
    --largeur-page: calc(var(--rail) + var(--gouttiere) + var(--mesure-large) + 2rem);
  }
  [data-gabarit="planche"] .tete-page {
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gouttiere); grid-auto-flow: row dense; align-items: start;
  }
  [data-gabarit="planche"] .tete-page > * { grid-column: 2 / 4; }
  [data-gabarit="planche"] .tete-page > h1 { grid-column: 1 / 4; }
  [data-gabarit="planche"] .tete-page > .condense { grid-column: 2; }
  [data-gabarit="planche"] .tete-page > .tuiles { grid-column: 3; margin-top: 0; }
  [data-gabarit="planche"] .rail { margin-left: calc(var(--rail) + var(--gouttiere)); }
  [data-gabarit="planche"] .rail .sommaire ol { display: flex; }
  [data-gabarit="planche"] .sec {
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gouttiere);
    border-top: 1px solid var(--filet); margin-top: var(--e-6); padding-top: var(--e-3);
  }
  [data-gabarit="planche"] .sec > * { grid-column: 2; }
  [data-gabarit="planche"] .sec > h2 {
    grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 4.5rem;
    margin: 0; font-size: var(--t-l); line-height: 1.3;
  }
  [data-gabarit="planche"] .sec > h2 + * { margin-top: 0; }
  [data-gabarit="planche"] .sec-annexe > * { font-size: var(--t-s); }
  [data-gabarit="planche"] .relayer { margin-left: calc(var(--rail) + var(--gouttiere)); }

  /* -------- registre : pleine largeur */
  [data-gabarit="registre"] { --largeur-page: 70rem; }
  [data-gabarit="registre"] .tete-page > *:not(.tuiles):not(.condense),
  [data-gabarit="registre"] .corps-page .sec > p,
  [data-gabarit="registre"] .corps-page .sec > ul:not(.cartes),
  [data-gabarit="registre"] .corps-page .sec > .note { max-width: var(--mesure-texte); }
  [data-gabarit="registre"] .carto-zone, [data-gabarit="registre"] .carto-liste,
  [data-gabarit="registre"] .defilant.large { width: auto; max-width: none; margin-inline: 0; }
  [data-gabarit="registre"] .sec { border-top: 1px solid var(--filet); margin-top: var(--e-6); }

  /* -------- portail et accueil : mosaïque */
  [data-gabarit="portail"], [data-gabarit="accueil"] { --largeur-page: 66rem; }
  [data-gabarit="portail"] .tete-page > *, [data-gabarit="portail"] .sec > p,
  [data-gabarit="portail"] .sec > .note, [data-gabarit="accueil"] .sec > * { max-width: var(--mesure-texte); }
  [data-gabarit="portail"] .cartes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--e-4);
  }
  [data-gabarit="portail"] .cartes li { border: 0; padding: var(--e-3) 0 0; box-shadow: inset 0 1px 0 var(--encre); }
  [data-gabarit="portail"] .cartes li:last-child { border: 0; }
  [data-gabarit="portail"] .cartes li:first-child { grid-column: span 2; }
  [data-gabarit="portail"] .cartes li:first-child h3 { font-size: var(--t-xl); }
  [data-gabarit="portail"] .vedette { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
  [data-gabarit="portail"] .vedette > .vedette-sur, [data-gabarit="portail"] .vedette > h2 { grid-column: 1 / -1; }

  [data-gabarit="accueil"] .tete-page {
    display: grid; grid-template-columns: minmax(0, var(--mesure-texte)) minmax(0, 1fr);
    column-gap: var(--e-6); align-items: start;
  }
  [data-gabarit="accueil"] .tete-page > * { grid-column: 1; }
  [data-gabarit="accueil"] .tete-page > figure { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
  [data-gabarit="accueil"] .tete-page > .portes { grid-column: 1 / -1; }
  [data-gabarit="accueil"] .corps-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
  [data-gabarit="accueil"] .corps-page > .sec:last-child { grid-column: 1 / -1; }
  [data-gabarit="accueil"] .corps-page > .sec:last-child > * { max-width: none; }
  [data-gabarit="accueil"] .nouvelles { columns: 2; column-gap: var(--e-6); }
  [data-gabarit="accueil"] .nouvelles li { break-inside: avoid; }
}
@media (min-width: 64rem) and (max-width: 72rem) {
  [data-gabarit="portail"] .cartes li:first-child { grid-column: auto; }
}

/* ------------------------------------------------------------- impression
   Un tableau de bord dont l'argument est la traçabilité finit imprimé, ne
   serait-ce que pour une réunion. Sans cette feuille, il sortait avec son
   bandeau collant, ses liens muets et ses tuiles coupées en deux. */
@media print {
  :root {
    --papier: #fff; --surface: #fff; --encre: #000; --douce: #333;
    --filet: #bbb; --bord: #666; --grille: #ddd;
  }
  .bandeau, footer, .carto-evitement, .filtres, .epoques, .recherche,
  .rail, .relayer, .ariane, .evitement, .a-emporter,
  button.suite, details.tableau-brut summary { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  details.tableau-brut[open] > *:not(summary) { display: block; }
  details.tableau-brut { display: block; }
  /* un lien imprimé sans son adresse ne mène nulle part */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; word-break: break-all; }
  a[href^="#"]::after, a[href^="mailto"]::after { content: ""; }
  .tuile, figure, .note, .donnees tr, .condense { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .croquis, img { max-width: 100%; }
  .carto-zone { display: none; }   /* une carte Leaflet ne s'imprime pas ;
                                      le tableau équivalent, si */
  .carto-liste { overflow: visible; }
  .carto-liste table { min-width: 0; }
}