@import url("fonts/fonts.css");

/* La Criée — une seule direction artistique pour tout le journal.
   Les valeurs sont celles de la une (sites/la-criee-v2/styles.css), relevées
   sur les planches du 03/09/2026 : les pages de commune en étaient restées à
   la charte du 01/09, plus chaude de papier, plus claire de navy, et sur deux
   autres familles de caractères. Une commune et la une doivent se lire comme
   deux pages du même journal.

   Les polices sont désormais SERVIES PAR NOUS et non par Google : le
   Content-Security-Policy préparé pour lacriee.info n'autorise que 'self',
   il aurait bloqué fonts.googleapis.com le jour de la bascule. */

:root {
  --paper: #F7F1E8;
  --paper-deep: #F2EAE0;
  --paper-hi: #FBF7F1;
  --ink: #23201D;                /* noir chaud, pas un noir de bureau */
  --ink-soft: #5F5A54;
  --navy: #16263B;
  --navy-dark: #0E1A28;
  --wax: #C8382A;                /* l'accent unique : vermillon, plus la cire */
  --vert: #2f6b4f;
  --line: #DDD2C6;
  --line-soft: #E7DED2;
  --muted: #5F5A54;
  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  /* Bodoni est un didone : sous 28px ses déliés disparaissent. Les chiffres et
     les noms lus de près prennent la face de texte, en demi-gras. */
  --data: "Spectral", Georgia, serif;
  --text: "Spectral", Georgia, serif;
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: 32px;
  --gap: 84px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* LE GRAIN DU PAPIER. C'est ce qui manquait aux pages de commune : mêmes
     couleurs et mêmes fontes que la une, mais un fond plat de site web sous un
     journal. Huit kilo-octets, servis une fois pour les 163 pages, et la page
     cesse d'être un écran pour devenir une feuille. */
  background: var(--paper) url("papier.jpg");
  background-size: 420px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; }

.wrap { width: min(1240px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 40;
}
.skip:focus { left: 12px; top: 12px; }

/* Bodoni Moda est variable sur l'axe optique. Laissé à « auto », le navigateur
   choisit en grand corps le dessin le plus contrasté : les déliés, les virgules
   et les traits d'union tombent sous le pixel et disparaissent. On impose le
   dessin des petits corps, dont les fines tiennent à l'écran. */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}

p { margin: 0 0 1em; max-width: 68ch; }

.eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 22px;
  background: var(--navy);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--navy);
  transition: background .2s;
}
.btn { border-radius: 2px; transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.btn:hover, .btn:focus-visible { background: var(--navy-dark); box-shadow: 0 10px 24px -14px rgba(22, 58, 99, .85); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.clair { background: transparent; color: var(--navy); }
.btn.clair:hover, .btn.clair:focus-visible { background: var(--navy); color: var(--paper); }

/* ── entête ── */
header.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 960px) { header.top { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; } }

/* La marque de la une : le monogramme, un filet, le nom en capitales Bodoni.
   Une page de commune doit se reconnaître à son en-tête avant son contenu. */
header.top .marque-lien { text-decoration: none; }
header.top .marque { display: flex; align-items: center; gap: 14px; }
header.top .mono { width: 42px; height: 42px; display: block; }
header.top .marque-nom {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-optical-sizing: none;
}
.pied-marque .marque { display: flex; align-items: center; gap: 14px; }
.pied-marque .mono { width: 42px; height: 42px; display: block; }
.pied-marque .marque-nom {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-optical-sizing: none;
}

header.top nav {
  display: flex;
  justify-content: center;
  gap: 26px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
header.top nav a { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
header.top nav a:hover, header.top nav a:focus-visible, header.top nav a[aria-current] { border-bottom-color: var(--wax); }

/* ── manchette ── */
.manchette { padding: 26px 0 8px; display: grid; grid-template-columns: 148px 1fr 148px; align-items: center; gap: 22px; }
@media (max-width: 900px) { .manchette { grid-template-columns: 1fr; justify-items: center; gap: 16px; } }

.manchette .edition {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 2;
}
.manchette .edition b { display: block; font-family: var(--display); font-size: 25px; letter-spacing: 0; color: var(--ink); text-transform: none; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 14; }

.titre-bloc { text-align: center; }
/* la ligne de surtitre, très espacée, débordait sur un écran étroit */
@media (max-width: 460px) {
  .fondee { letter-spacing: .12em; font-size: 10.5px; }
  .devise { letter-spacing: .14em; text-indent: .14em; }
}
.fondee { font-family: var(--ui); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; max-width: none; }

h1.marque, .marque-lien {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 11.4vw, 142px);
  line-height: 1.02;
  letter-spacing: .01em;
  display: inline-block;
  transform: scaleX(.76);
  white-space: nowrap;
  text-decoration: none;
}

.devise { font-family: var(--ui); font-size: 11.5px; letter-spacing: .25em; text-indent: .25em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 0; max-width: none; }
.sceau { width: 124px; height: 124px; justify-self: end; }
@media (max-width: 900px) { .sceau { justify-self: center; } }
.flourish { display: block; margin: 16px auto 0; width: 180px; opacity: .7; }

/* ── sections ── */
/* Le chiffre romain tient sa propre colonne : le titre et tout le contenu de la
   section s'alignent alors sur la même verticale, ce qui n'était pas le cas
   quand seule la tête était en grille. */
/* ── l'ouverture : le crieur, et pourquoi ce nom ── */
.ouverture {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 8px 0 var(--gap);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .ouverture { grid-template-columns: 1fr; gap: 30px; } }

.crieur { margin: 0; }
.crieur img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  filter: sepia(.22) contrast(1.04);
}
.crieur figcaption {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 10px;
  max-width: 42ch;
}

.ouverture-mots h2 { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.1; margin: 6px 0 18px; }
.ouverture-mots p { font-size: 17.5px; color: var(--ink-soft); max-width: 62ch; }
.ouverture-mots p:last-child { margin-bottom: 0; color: var(--ink); }

section.bloc {
  margin-top: var(--gap);
  padding: 14px 0 var(--gap);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
/* seules les sections numérotées portent la colonne du chiffre romain */
section.bloc.numerote {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 780px) { section.bloc.numerote { grid-template-columns: 1fr; gap: 6px; } }
.sec-corps { min-width: 0; }
section.bloc:last-of-type { border-bottom: 0; }

.tete-sec { margin-bottom: 26px; }

section.bloc.numerote > .rom {
  font-family: var(--display);
  font-size: 34px;
  color: var(--wax);
  line-height: .9;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}
.tete-sec h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.06; letter-spacing: -.008em; }
.tete-sec .intro { color: var(--ink-soft); margin: 12px 0 0; font-size: 17px; }

h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }

/* Au-delà de soixante pixels, le dessin des petits corps donne des accents
   énormes qui montent dans la ligne du dessus : ces titres-là reprennent la
   taille optique de leur corps réel. */
.marque-lien, .commune-tete h1 { font-variation-settings: "opsz" 72; }

/* ── titre de commune ── */
.commune-tete { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 28px 0 26px; }
@media (max-width: 760px) { .commune-tete { grid-template-columns: 1fr; } }

.commune-tete .kick { font-family: var(--ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wax); }
/* line-height serré : les jambages du g et du y dépassaient sur le filet */
.commune-tete h1 { font-size: clamp(50px, 11vw, 128px); line-height: 1; letter-spacing: -.022em; margin: 6px 0 0; }
.commune-tete .situe { font-family: var(--ui); font-size: 12.5px; line-height: 2; text-align: right; color: var(--muted); }
@media (max-width: 760px) { .commune-tete .situe { text-align: left; } }
.commune-tete .situe b { color: var(--ink); font-weight: 500; }

/* ── hero ── */
.hero { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 13px 0; margin-bottom: 8px; }
.hero img { width: 100%; height: clamp(240px, 42vh, 460px); object-fit: cover; display: block; }
figcaption, .credit { font-family: var(--ui); font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ── chiffres ── */
.bref { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); border: 1px solid var(--ink); }
.bref div { padding: 18px 16px 16px; border-right: 1px solid var(--line); }
.bref div:last-child { border-right: 0; }
.bref .v { font-family: var(--display); font-size: clamp(28px, 4vw, 42px); font-weight: 500; line-height: 1; display: block; font-variant-numeric: tabular-nums; font-optical-sizing: none; font-variation-settings: "opsz" 14; }
.bref .v .u { font-family: var(--text); font-size: .46em; font-weight: 400; }
.bref .l { font-family: var(--ui); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 9px; }
.bref .s { font-size: 13.5px; color: var(--ink-soft); display: block; margin-top: 4px; }

/* ── grilles ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
/* sans min-width:0 un item de grille refuse de descendre sous la largeur de son
   tableau : l'encart déborde de l'écran au lieu de laisser le tableau défiler */
.duo > *, .trio > *, .empile > * { min-width: 0; }

/* deux encarts très inégaux se lisent mieux l'un sous l'autre que côte à côte */
.empile { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.encart {
  border: 1px solid var(--line);
  background: var(--paper-hi);
  padding: 24px;
  border-radius: 2px;
  box-shadow: 0 1px 0 0 rgba(23, 23, 23, .04), 0 14px 28px -26px rgba(23, 23, 23, .5);
}
.encart .titre-encart {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin: 0 0 16px;
  max-width: none;
}

/* ── barres et graphiques ── */
.poste { margin-bottom: 15px; }
.poste .l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.poste .l span { font-size: 15.5px; }
.poste .l span .lg { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.poste .l b { font-family: var(--data); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.poste .l b .u { font-family: var(--text); font-size: .66em; font-weight: 400; }
.poste .rail { height: 10px; background: rgba(23, 23, 23, .07); }
.poste .rail i { display: block; height: 100%; background: var(--navy); }
.poste.p2 .rail i { background: var(--wax); }
.poste.p3 .rail i { background: #8a7c58; }

.courbe { width: 100%; height: auto; display: block; }
.courbe line { stroke: var(--line); stroke-width: 1; }
.courbe .aire { fill: rgba(22, 58, 99, .1); }
.courbe .trait { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.courbe .pt { fill: var(--wax); }
.courbe text { font-family: var(--ui); font-size: 11.5px; fill: var(--muted); }

.colonnes { display: flex; align-items: flex-end; gap: 5px; height: 140px; margin-top: 6px; }
.colonnes .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.colonnes .tige { width: 100%; background: var(--navy); }
.colonnes .an { font-family: var(--ui); font-size: 11px; color: var(--muted); }

.par-hab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.par-hab b { font-family: var(--data); font-size: 21px; font-weight: 600; display: block; font-variant-numeric: tabular-nums; }
.par-hab b .u { font-family: var(--text); font-size: .68em; font-weight: 400; }
.par-hab .lg { font-family: var(--ui); font-size: 12.5px; color: var(--muted); line-height: 1.4; display: block; margin-top: 3px; }

.note { font-family: var(--ui); font-size: 13.5px; color: var(--muted); line-height: 1.62; margin: 14px 0 0; max-width: 78ch; }

/* ── listes de faits ── */
.faits { border-top: 1px solid var(--ink); }
.fait { display: grid; grid-template-columns: 112px 1fr 148px; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
@media (max-width: 760px) { .fait { grid-template-columns: 1fr; gap: 3px; } }
.fait .d { font-family: var(--ui); font-size: 12.5px; color: var(--wax); letter-spacing: .04em; }
.fait .o { font-size: 17px; }
.fait .o small { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.fait .m { font-family: var(--data); font-size: 17.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fait .m .u { font-family: var(--text); font-size: .72em; font-weight: 400; }
@media (max-width: 760px) { .fait .m { text-align: left; } }

/* ── cartes ── */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; }
.carte { border: 1px solid var(--line); background: var(--paper-hi); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.carte .no { font-family: var(--ui); font-size: 11px; letter-spacing: .14em; color: var(--wax); }
.carte .nom { font-family: var(--data); font-size: 19px; font-weight: 600; line-height: 1.2; }
.carte .det { font-family: var(--ui); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.carte p { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: none; }
.carte .prix { font-family: var(--data); font-size: 18px; font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; font-variant-numeric: tabular-nums; }
.carte .sous-prix { font-family: var(--ui); font-size: 12.5px; color: var(--muted); display: block; margin-top: 4px; line-height: 1.45; }
.carte .prix .u { font-family: var(--text); font-size: .7em; font-weight: 400; }

/* ── vue du ciel ── */
.ciel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
@media (max-width: 820px) { .ciel { grid-template-columns: 1fr; } }
.ciel .cadre { border: 1px solid var(--line); background: var(--paper-hi); padding: 9px; }
.ciel .cadre img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.contour-boite { border: 1px solid var(--line); background: var(--paper-hi); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.contour-boite svg { width: 100%; height: auto; max-height: 340px; display: block; }
/* le viewBox change à chaque commune : le trait se mesure à l'écran, pas dedans */
.contour-boite path { fill: rgba(141, 45, 36, .08); stroke: var(--wax); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.contour-boite .lg { font-family: var(--ui); font-size: 13px; color: var(--muted); text-align: center; margin: 0; max-width: none; }

/* ── aujourd'hui ── */
.jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); border: 1px solid var(--line); background: var(--paper-hi); }
.jour div { padding: 18px; border-right: 1px solid var(--line-soft); text-align: center; }
.jour div:last-child { border-right: 0; }
.jour .k { font-family: var(--ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jour .g { font-family: var(--data); font-size: 29px; font-weight: 600; display: block; margin-top: 7px; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jour .g .u { font-family: var(--text); font-size: .62em; font-weight: 400; }
.jour .p { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; max-width: none; }

/* ── galerie ── */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.galerie figure { border: 1px solid var(--line); background: var(--paper-hi); padding: 9px; }
.galerie img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--paper-deep); }

/* ── listes simples ── */
.liste-nue { list-style: none; margin: 0; padding: 0; column-gap: 30px; }
.liste-nue li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; break-inside: avoid; }
.liste-nue li b { font-weight: 400; }
.liste-nue li span { font-family: var(--ui); font-size: 13px; color: var(--muted); }
@media (min-width: 780px) { .liste-nue.deux { column-count: 2; } .liste-nue.trois { column-count: 3; } }

.puces { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.puces span {
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  border-radius: 2px;
  font-family: var(--ui);
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--paper-hi);
  padding: 5px 11px;
}
.puces span b { font-weight: 600; color: var(--navy); }

/* ── tableau ── */
/* un tableau plus large que son encart défile : l'ombre de bord le fait voir */
.tw {
  --fond: var(--paper);
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--fond) 40%, rgba(255, 255, 255, 0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left, var(--fond) 40%, rgba(255, 255, 255, 0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(23, 23, 23, .12), rgba(23, 23, 23, 0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 23, 23, .12), rgba(23, 23, 23, 0)) right center / 11px 100% no-repeat scroll;
}
.encart .tw { --fond: var(--paper-hi); }
/* min() plutôt qu'une valeur fixe : sur un écran étroit le tableau se replie
   au lieu de déborder, et il garde sa largeur confortable sur grand écran. */
table { width: 100%; border-collapse: collapse; min-width: min(520px, 100%); }
td small { display: block; font-family: var(--ui); font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
th { text-align: left; font-family: var(--ui); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0 0 9px; border-bottom: 1px solid var(--ink); }
th.dr, td.dr { text-align: right; }
td { padding: 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; font-size: 15.5px; }

/* le tableau des exercices tient cinq colonnes dans une demi-largeur */
table.serree { min-width: 340px; }
/* SUR UN TÉLÉPHONE, C'EST LA TABLE QUI CÈDE, PAS LA PAGE.
   Mesuré le 04/09 sur Nice à 360 px : une table serrée (340 px au minimum) dans
   un encart de demi-colonne poussait la page à 382 px de large — tout le
   document glissait latéralement, y compris le texte courant. Une largeur
   minimale n'a de sens que tant qu'elle tient dans son cadre. */
@media (max-width: 560px) { table.serree { min-width: 0; } }
/* Un encart est un cadre, pas un poussoir : il ne doit jamais élargir la grille
   qui le porte, quel que soit son contenu. */
.encart { min-width: 0; }
.unite { font-family: var(--ui); font-size: 11.5px; color: var(--muted); text-align: right; margin: -4px 0 8px; max-width: none; }
td.dr.nu { font-size: 16px; }
table.serree th { font-size: 10.5px; letter-spacing: .04em; }
table.serree td { padding: 9px 0; font-size: 14.5px; }
table.serree th + th, table.serree td + td { padding-left: 10px; }
td.dr { font-family: var(--data); font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.dr .u { font-family: var(--text); font-size: .74em; font-weight: 400; }

/* ── participer ── */
.participer { border: 2px solid var(--ink); background: var(--paper-hi); padding: 26px; display: flex; justify-content: space-between; gap: 22px; align-items: center; flex-wrap: wrap; }
.participer h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 6px; }

.sources { font-family: var(--ui); font-size: 13.5px; color: var(--muted); line-height: 1.8; border-top: 1px solid var(--line); padding-top: 14px; max-width: none; }
.sources b { color: var(--ink-soft); font-weight: 600; }
.sources a { color: var(--navy); }

/* ── annuaire des communes ── */
/* Le champ de recherche est une ligne de plume : un filet sous le texte qui
   s'épaissit à la saisie, plutôt qu'un rectangle posé sur la page. */
.recherche { position: relative; max-width: 480px; margin-bottom: 28px; }
.recherche label {
  display: block; font-family: var(--ui); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.recherche .champ {
  display: flex; align-items: stretch;
  background: linear-gradient(var(--paper-hi), var(--paper-hi)) padding-box;
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--ink);
  border-radius: 2px 2px 0 0;
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.recherche .champ:hover { border-color: var(--muted); border-bottom-color: var(--navy); }
.recherche input {
  flex: 1; border: 0; background: transparent; padding: 16px 4px 15px 16px;
  font-family: var(--text); font-size: 17.5px; color: var(--ink); min-width: 0;
}
.recherche input::placeholder { color: var(--muted); opacity: .85; }
.recherche input:focus { outline: none; }
.recherche .champ:focus-within {
  border-color: var(--navy); border-bottom-color: var(--navy);
  box-shadow: 0 2px 0 0 var(--navy), 0 6px 18px -10px rgba(22, 58, 99, .5);
}
.recherche .loupe {
  display: flex; align-items: center; padding: 0 18px; background: var(--navy);
  border-radius: 0 1px 0 0; transition: background-color .22s ease;
}
.recherche .champ:focus-within .loupe, .recherche .loupe:hover { background: var(--navy-dark); }
.recherche .loupe svg { width: 18px; height: 18px; }

/* Le filet est porté par chaque case et non par le fond de la grille : sinon
   les emplacements vides de la dernière ligne se remplissent de sa couleur. */
.annuaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px; padding: 1px; }
.annuaire a { background: var(--paper-hi); box-shadow: 0 0 0 1px var(--line); padding: 14px 16px; text-decoration: none; display: block; }
.annuaire a:hover, .annuaire a:focus-visible { background: var(--paper-deep); }
.annuaire .n { font-family: var(--data); font-size: 18px; font-weight: 600; line-height: 1.2; display: block; }
.annuaire .p { font-family: var(--ui); font-size: 12.5px; color: var(--muted); display: block; margin-top: 3px; }
.annuaire a.cache { display: none; }

/* le sceau des données : une fiche par famille */
.famille { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 26px; }
.famille:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.famille h3 { font-size: 23px; margin-bottom: 6px; }
.famille-donnees { color: var(--ink-soft); margin: 0 0 12px; max-width: 78ch; }
.famille td:first-child { width: 30%; font-family: var(--ui); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); vertical-align: top; padding-right: 18px; }
.famille td { font-size: 15px; line-height: 1.55; }
.famille table { min-width: min(420px, 100%); }
.famille a { color: var(--navy); }

/* le sceau au pied de chaque page de commune */
.sceau-data { border: 1px solid var(--ink); background: var(--paper-hi); padding: 22px; }
.sceau-data table { min-width: min(460px, 100%); }
.sceau-data td { font-size: 15px; padding: 9px 0; }
.sceau-data a { color: var(--navy); }

.epci-titre { font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--wax); margin: 34px 0 12px; }

/* ── carte du département ── */
.carte-boite { position: relative; }
.carte-boite svg { width: 100%; height: auto; max-height: 600px; display: block; margin-inline: auto; }
.carte-boite path { fill: #ece1cb; stroke: #8c8271; stroke-width: 1.1; cursor: pointer; }
.carte-boite path:hover, .carte-boite path.actif { fill: var(--navy); stroke: var(--navy-dark); }
.carte-boite path.grande { fill: #dbcaa6; }
.carte-legende {
  position: absolute; left: 0; bottom: 0;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 2px;
  padding: 12px 17px;
  font-family: var(--ui); font-size: 13px; min-width: 196px;
  pointer-events: none;
  box-shadow: 0 18px 34px -28px rgba(23, 23, 23, .75);
  transition: transform .25s ease;
}
.carte-legende b { display: block; font-family: var(--data); font-size: 19px; font-weight: 600; }
.carte-legende span { color: var(--muted); font-size: 13px; }

/* ── pied ── */
footer.pied { background: var(--paper-deep); border-top: 1px solid var(--line); padding: 56px 0 26px; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
@media (max-width: 940px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }
.pied-grille h4 { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.pied-grille a { display: block; text-decoration: none; font-size: 15px; padding: 5px 0; color: var(--ink-soft); }
.pied-grille a:hover, .pied-grille a:focus-visible { color: var(--wax); }
/* La marque du pied porte sa propre taille depuis qu elle est dessinee. */
.pied-marque { font-size: 0; }
.pied-marque em { font-style: italic; color: var(--wax); }
.pied-bas { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ── les jetons de commune réagissent au doigt ── */
.puces span:hover, .puces span:focus-within {
  border-color: var(--navy);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -14px rgba(23, 23, 23, .8);
}
.puces span a { text-decoration: none; }

/* ── les cases de l'annuaire réagissent aussi ── */
.annuaire a { transition: background-color .18s ease, box-shadow .18s ease; }
.annuaire a:hover, .annuaire a:focus-visible { box-shadow: 0 0 0 1px var(--navy); position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn, .puces span, .recherche .champ, .recherche .loupe, .annuaire a { transition: none; }
  .btn:hover, .puces span:hover { transform: none; }
}


/* ── Une apparition au défilement, une seule fois, très courte : la page se
   pose au lieu de surgir. Rien ne dépend d'elle : sans script, tout est là. ── */
.js .apparait { opacity: 0; transform: translateY(10px); }
.js .apparait.vu { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .js .apparait, .js .apparait.vu { opacity: 1; transform: none; transition: none; }
}

/* LE TRAIT DISTINCTIF — ce qu'aucune autre commune ne peut dire.
   Il vit sous le nom, en corps de texte : c'est une phrase de journaliste, pas
   une étiquette. Le rang s'affirme (encre, filet vermillon) ; l'écart à la
   médiane se murmure (gris, sans filet). */
.trait {
  margin: 14px 0 0;
  max-width: 46ch;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.trait-fort {
  color: var(--ink);
  padding-left: 14px;
  border-left: 2px solid var(--wax);
}
@media (max-width: 760px) { .trait { font-size: 16px; max-width: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   LA MATIÈRE DE LA UNE, APPORTÉE AUX PAGES DE COMMUNE.
   Relevé sur `sites/la-criee/styles.css` : les couleurs et les fontes y
   étaient déjà identiques, c'est le DÉCOR qui manquait. On en reprend le
   vocabulaire, mais à voix basse — une une peut être fastueuse, une page de
   vingt sections de données doit rester lisible.
   ═══════════════════════════════════════════════════════════════════════ */

/* LE MUR D'AFFICHES derrière la manchette. Un décor, jamais une illustration :
   très pâle, mangé sur les bords par un fondu radial pour qu'aucune découpe ne
   se voie, et sous le texte en toutes circonstances. */
.manchette { position: relative; isolation: isolate; }
.manchette::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: min(760px, 96%);
  height: calc(100% + 34px);
  background: url("placards.webp") center/cover no-repeat;
  opacity: .17;
  -webkit-mask-image: radial-gradient(115% 100% at 50% 48%, #000 26%, transparent 78%);
  mask-image: radial-gradient(115% 100% at 50% 48%, #000 26%, transparent 78%);
  pointer-events: none;
}
/* Sur un écran étroit la manchette se met en colonne : le mur d'affiches
   passerait derrière trois lignes empilées et brouillerait la lecture. */
@media (max-width: 900px) { .manchette::before { display: none; } }

/* LE CRIEUR, EN FIN DE PAGE. Il criait les actes du conseil sur la place :
   sa place est à l'endroit où l'on demande aux habitants de parler, pas en
   décoration de tête. Posé sur son disque vermillon, comme sur la une. */
/* CE QU'ON COUPE COMPTE. La une coupe ses bottes et garde son visage : une
   figure tronquée par le haut n'est plus personne. On l'ancre donc en HAUT du
   bloc, et c'est le bas qui sort du cadre. */
.participer-crieur { position: relative; padding-right: 244px; overflow: hidden; min-height: 208px; }
.crieur-pied {
  position: absolute;
  right: -6px;
  top: 10px;
  width: 210px;
  margin: 0;
  pointer-events: none;
}
.crieur-pied img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.crieur-disque {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-46%);
  width: 138px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wax);
  opacity: .9;
}
/* Sous 1000 px la colonne se resserre : le crieur mangerait le bouton. */
@media (max-width: 1000px) {
  .participer-crieur { padding-right: 0; }
  .crieur-pied { display: none; }
}