/*
  pages.css — les pages de texte et d'index, sous la charte.
  Chargée après charte.css sur /methodologie/, /limites/, /mentions-legales/,
  /confidentialite/, /regions/, /departements/ et /gares/.

  LES NOMS DE CLASSES NE CHANGENT PAS. Ce sont ceux de la feuille historique ;
  seule leur apparence change. index-filtre.js ne lit que #qi, #listei, #cnti et
  l'attribut data-n — mais il escamote en posant la propriété `hidden`, donc la
  règle `.liens>li[hidden]{display:none}` est obligatoire : sans elle le filtre
  compte juste, sans rien masquer.

  charte.css donne la famille et la graisse des titres, mais aucune taille et
  aucune marge de paragraphe : c'est ici qu'une page de texte les pose.
*/

/* ---- l'en-tête est fixe : le contenu commence dessous ---- */
.sous-tete{padding-top:76px}
main{padding-bottom:104px}

/* ---- rythme du texte ---- */
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(24px,2.8vw,34px);margin:1.9em 0 .5em}
h3{font-size:18.5px;margin:1.7em 0 .45em}
p{margin:0 0 1.05em}

/* ---- fil d'Ariane ---- */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:24px 0 0;
  font-size:13px;color:var(--encre-3)}
.fil a{border-bottom:1px solid transparent;transition:var(--tr)}
.fil a:hover{color:var(--encre-2);border-color:var(--filet-f)}

/* ---- bandeau de titre ---- */
.hero{padding:30px 0 38px;margin-bottom:46px;border-bottom:1px solid var(--filet)}
.hero h1{max-width:20ch}
.hero .lede{margin-top:18px;max-width:62ch;font-size:17.5px;line-height:1.62;color:var(--encre-2)}

/* ---- colonne de lecture ----
   `.narrow` reste une `.wrap` : elle garde la même gouttière et le même
   centrage que le bandeau de titre, et ce sont ses enfants qui sont bornés.
   Borner le conteneur décalerait le texte par rapport au h1. */
.narrow>*{max-width:74ch}
/* Le bandeau de titre porte deja sa marge basse. */
.narrow>*:first-child{margin-top:0}
/* Un tableau a quatre colonnes etouffe a 74ch : il a droit a plus large. */
.narrow>table.tb{max-width:96ch}
.narrow a{color:var(--vert);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.narrow a:hover{color:var(--encre)}
.narrow ol,.narrow ul{margin:0 0 1.05em 1.2em}
.narrow li{margin-bottom:.5em}
.narrow ul.mentions{margin-left:0}
.mut{color:var(--encre-2)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--papier-2);padding:2px 6px;border-radius:var(--r)}

/* ---- tableaux ---- */
table.tb{width:100%;border-collapse:collapse;font-size:14.5px;margin:20px 0;
  border:1px solid var(--filet)}
table.tb th{text-align:left;background:var(--papier);padding:12px 14px;font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--encre-3);
  border-bottom:1px solid var(--filet)}
table.tb td{padding:12px 14px;border-top:1px solid var(--filet);vertical-align:top}
td.vieux{color:var(--ambre-t);font-weight:600}

/* ---- encarts ---- */
.note{background:var(--papier);border:1px solid var(--filet);border-left:3px solid var(--vert);
  padding:18px 22px;margin:26px 0;font-size:15px;color:var(--encre-2)}
.note b{color:var(--encre)}
.note.alerte{background:var(--ambre-pale);border-left-color:var(--ambre)}

/* ---- listes de mentions légales ----
   `.manque` marque un champ obligatoire non renseigné : la feuille historique
   ne la stylait pas, la pastille ambre le dit maintenant. */
.mentions{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mentions li{position:relative;padding-left:18px;font-size:15px;line-height:1.6}
.mentions li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--vert)}
.mentions li.manque::before{background:var(--ambre)}
.mentions mark{background:var(--ambre-pale);color:var(--ambre-t);padding:1px 7px;
  border-radius:var(--r);font-weight:600}

/* ---- champ de filtre des pages d'index ----
   `.chip` porte ici un <input> : la famille et la taille sont posées
   explicitement, sinon le champ retombe sur la police du navigateur. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--blanc);
  border:1px solid var(--filet-f);border-radius:var(--r);padding:11px 16px;
  font-family:var(--f);font-size:14.5px;color:var(--encre);white-space:nowrap}
.chip::placeholder{color:var(--encre-3)}
.chip:focus{outline:2px solid var(--vert);outline-offset:2px}
.chip.on{background:var(--encre);border-color:var(--encre);color:#fff;font-weight:600}
/* #cnti est vide tant que le script n'a pas compte : sans cette regle une
   pastille noire vide s'affiche, et reste si le script echoue. Le selecteur
   vise le compteur seul : un <input> est toujours « vide » au sens de :empty,
   et `.chip:empty` escamotait le champ de recherche. */
#cnti:empty{display:none}

/* ---- listes de liens ---- */
.liens{columns:4;column-gap:34px;list-style:none;padding:0;font-size:15px}
.liens li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--filet)}
.liens a:hover{color:var(--vert)}
.liens>li[hidden]{display:none}
.cpt{color:var(--encre-3);font-size:13px}
@media(max-width:900px){.liens{columns:2}}
@media(max-width:520px){.liens{columns:1}}