/* =========================================================================
   LES LISTES — archives, résultats de recherche, page introuvable

   Les listes du site — celles d'archive.php (le rayon des enquêtes, les
   entretiens, une rubrique, la une et la grille, les années des éditions, la
   grille) et celles des gabarits dédiés qui partagent la bande d'un dossier
   (les dossiers, les chroniques, le fil des brèves) — et rien d'autre. Tout vient de variables.css, comme partout ailleurs.
   ========================================================================= */

/* --- La tête d'une archive -------------------------------------------------
   Un fil d'ariane, un titre fort, un chapô sur la largeur de lecture. Le
   titre n'est plus un `titre-section` : sa taille (20 px) et son filet sur
   les 1232 px du conteneur étaient ceux d'un bloc de la page d'accueil, pas
   d'une page (planche 0 de l'archive des brèves, 01/09). */
.archive-entete { margin-bottom: var(--espace-bloc); }

/* 🔴 LE FIL D'ARIANE OUVRE LA PAGE, À 24 px SOUS LA BARRE (Ludovic, 17/09).
   C'est lui qui porte l'écart du haut, et plus la marge de bloc de 56 px du
   `<main>` — les gabarits l'ont perdue. La page d'un numéro et l'archive des
   éditions ouvraient déjà ainsi depuis le 16/09, quand le filet du haut est
   tombé ; toutes les autres pages les rejoignent. Une valeur, un endroit. */
.archive-ariane {
  margin-top: var(--space-24);
  margin-bottom: 18px;
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.archive-ariane .sep { margin: 0 7px; color: var(--gris-filet); }

.archive-titre {
  font-family: var(--police-titre-page);
  font-weight: var(--graisse-titre-page);
  text-transform: var(--casse-titre-page);
  font-size: var(--taille-titre-archive);
  line-height: 1.05;
}

.archive-chapeau {
  margin-top: 12px;
  max-width: var(--largeur-lecture);
}

.archive-reprise { margin-top: 12px; }
.archive-reprise a { border-bottom: 1px solid var(--gris-filet); }

/* --- LE FIL DES BRÈVES (A, le jour en tête, 23/09) ---------------------------
   La bande d'un dossier, un JOUR dans la colonne d'identité : son âge en
   pastille carrée, son nom. Les brèves en lignes à droite, sans
   vignette : heure · rubrique, titre, chapô sur trois lignes. Gabarit
   dédié, taxonomy-format-breve.php. */

/* Le premier jour ouvre sous le manchon, sans filet à lui : celui du manchon
   est juste au-dessus. Un jour chargé ensuite garde le sien. */
.fil-breves > .jour-breves:first-child { border-top: 0; padding-top: 0; }

.jour-breves-identite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* L'âge du jour dit la fraîcheur par son REMPLISSAGE : plein sombre
   aujourd'hui, un filet ensuite. Pas de rouge : il est réservé aux boutons. */
.age-jour {
  display: inline-flex;
  align-items: center;
  height: var(--hauteur-age-jour);
  padding: 0 7px;
  font-family: var(--police-meta);
  font-size: var(--taille-age-jour);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--filet-clair);
  border-radius: var(--rayon-pastille);
  color: var(--couleur-format-carte);
  margin-bottom: 12px;
}
.age-jour-frais {
  background: var(--gris-texte);
  border-color: var(--gris-texte);
  color: #fff;
}

.jour-breves-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: none;
  font-size: var(--taille-nom-jour);
  line-height: 1.15;
}

/* LES LIGNES — un filet clair ENTRE deux brèves d'un même jour, jamais entre
   le jour et sa première brève : ni au bureau, où le filet noir est au-dessus,
   ni empilé, où le nom du jour est juste au-dessus (Ludovic, 23/09). */
.ligne-breve {
  padding: var(--espace-ligne-dossier) 0;
  border-top: 1px solid var(--filet-clair);
}
.ligne-breve:first-child { border-top: 0; }
.ligne-breve .carte-service { margin-top: 0; }
.breve-heure { font-weight: 600; font-variant-numeric: tabular-nums; }
.ligne-breve-titre {
  margin-top: 8px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-titre-breve);
  line-height: 1.2;
  text-wrap: pretty;
}
.ligne-breve-titre a:hover { text-decoration: underline; }

/* Le chapô est coupé à trois lignes (socle, 07/09), sur la mesure de la
   planche : au-delà, la ligne se lit mal. */
.ligne-breve-chapo {
  margin-top: 8px;
  max-width: var(--largeur-chapo-breve);
  font-family: var(--police-meta);
  font-size: var(--taille-chapo-breve);
  line-height: 1.5;
  color: var(--couleur-extrait-carte);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lignes-chapo-liste);
  line-clamp: var(--lignes-chapo-liste);
  overflow: hidden;
}

/* --- Densité « rayon » : les enquêtes ----------------------------------------
   La une en grand, puis une enquête par étage, le chapô ENTIER. La liste
   des grandes pièces du média, pas une grille de résultats (D, 02/09). */
.rayon-tete {
  display: grid;
  grid-template-columns: var(--grille-rayon-tete);
  gap: var(--gouttiere-trame);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--gris-texte);
}
/* ⚗ 23/09 — LA UNE DES ENQUÊTES PREND LE GABARIT DE CELLE DES ARTICLES
   (Ludovic : « image plus horizontale, chapeau plus court, mais plus gros »).
   La vignette passe en 16/9 (gabarit), le titre au calibre de la une d'une
   liste, le chapô en PT Serif 18 px coupé à cinq lignes — il était ENTIER, en
   Simplon 15, sur une douzaine de lignes. Le rayon garde ce qu'il a en
   propre : le visage, la date et le temps de lecture. Les étages dessous ne
   changent pas, leur chapô reste entier. */
/* Son titre, son chapô, sa ligne de service et sa signature sont ceux de
   toutes les unes de liste : « LA UNE D'UNE LISTE », en fin de fichier. */

.rayon-entree {
  display: grid;
  grid-template-columns: var(--largeur-vignette-rayon) minmax(0, 1fr);
  gap: var(--gouttiere-trame);
  padding: 36px 0;
  border-bottom: 1px solid var(--gris-filet);
}
.rayon-entree:last-child { border-bottom: 0; }
/* ⚗ 15/09 — la ligne de service de la carte « g » ouvre le texte, à
   hauteur du haut de l'image. */
.rayon-tete-corps .carte-service,
.rayon-corps .carte-service { margin-top: 0; }
.rayon-titre {
  font-size: var(--taille-titre-rayon);
  line-height: 1.15;
  margin-top: 8px;
  max-width: var(--largeur-lecture);
  text-wrap: pretty;
}

/* Le chapô ENTIER : c'est la matière première de ce calibre, et la raison
   d'être du rayon. Pas de troncature ici — c'est voulu (02/09). La voix est
   celle du chapô de la carte « g » (15/09), un cran plus grande. */
.rayon-chapo {
  margin-top: 12px;
  max-width: var(--largeur-lecture);
  font-family: var(--police-meta);
  font-size: var(--taille-chapo-rayon);
  line-height: var(--interligne-extrait-carte);
  color: var(--couleur-extrait-carte);
}

/* La signature incarnée : le portrait, les noms de la carte, la date et le
   temps de lecture. Sans photo, pas de rond vide : le portrait s'omet. */
.rayon-signature {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.rayon-signature .carte-auteur { margin-top: 0; }
.rayon-signature .service-sep { margin: 0 5px; }
.portrait-liste {
  width: var(--taille-portrait-liste);
  height: var(--taille-portrait-liste);
  flex: 0 0 var(--taille-portrait-liste);
}
.portrait-liste::after { content: none; }

/* L'encart d'abonnement du rayon : le cadre des demandes au lecteur, posé
   en travers de la liste. Le seul bouton rouge de la page. */
.rayon-encart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gouttiere-trame);
  margin: 36px 0 0;
}
.rayon-encart-texte { flex: 1 1 320px; }
.rayon-encart .mur-texte { margin-top: 6px; }
.rayon-encart .mur-actions { margin-top: 0; }

/* --- L'ARCHIVE DES ÉDITIONS — mécanique A (01/09), habillage C2 (16/09) ---
   Elle reprend le manchon de la page d'un numéro : un surtitre, le titre en
   sérif, puis la barre des années entre un filet simple et un filet double.

   🔴 LE PASSAGE D'UNE ÉDITION À L'ARCHIVE EST SANS SECOUSSE (Ludovic,
      16/09) : le manchon se pose là où était la bande du numéro. Depuis le
      16/09 au soir, c'est acquis par construction — les deux pages servent
      la MÊME TÊTE, la brique `.logo-bplt` et les deux jetons du contrat
      (`--tete-liste-haut`, `--tete-liste-bas`). La page, elle, n'a pas
      la marge de bloc (le gabarit retire `bloc` du `main` sur cette forme) :
      56 px décaleraient tout.
   ------------------------------------------------------------------------ */
/* `.tete-liste` (composants.css) porte tout : l'air du haut, la zone
   d'identité, la marge du manchon et la marge du bas. Cette page n'ajoute
   rien — elle appelle la brique. */

/* Plus de fil d'ariane sur une page de liste depuis le 30/09 (A5, E5) : la
   tête commence à `--tete-liste-haut` sous la barre. */

/* LE MANCHON est un composant partagé depuis le 17/09 (`composants.css`) :
   l'archive des éditions y pose ses années, l'archive d'une rubrique ses
   formats. Cette page n'ajoute rien — elle l'appelle. */

/* --- Le profil d'une signature (B2, 23/09) --------------------------------
   Sous la tête de toutes les listes, qui s'arrête sur son filet noir : la
   fiche — la photo à gauche, sa légende à droite (la fonction, la bio en
   serif sur la largeur de lecture, les liens) —, puis le manchon des
   rubriques, puis la grille. Sans portrait, la légende prend toute la ligne :
   pas de rond vide (socle). */
.profil-fiche {
  display: flex;
  gap: var(--espace-filet-noir);
  align-items: flex-start;
}
.portrait-profil {
  width: var(--taille-portrait-profil);
  height: var(--taille-portrait-profil);
  flex: 0 0 var(--taille-portrait-profil);
}
.portrait-profil::after { content: none; }
.profil-corps { flex: 1 1 auto; min-width: 0; }
.profil-fonction {
  font-family: var(--police-meta);
  font-size: var(--taille-fonction-profil);
  font-weight: 500;
  color: var(--gris-texte);
}
.profil-bio {
  margin-top: 10px;
  max-width: var(--largeur-bio-profil);
  font-family: var(--police-texte);
  font-size: var(--taille-bio-profil);
  line-height: 1.55;
  color: var(--gris-texte);
  text-wrap: pretty;
}
.profil-bio a { border-bottom: 1px solid var(--gris-texte-secondaire); } /* comme un lien dans le texte d'un article */
.profil-fonction + .profil-liens,
.profil-bio + .profil-liens { margin-top: 10px; }
.profil-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -6px; /* le premier logo s'aligne sur la bio, pas sa zone de clic */
}
/* LE LOGO SEUL, en gris (Ludovic, 23/09) : les liens mènent HORS du site, ils
   ne passent pas devant la bio. Le survol les rend au noir. La zone de clic
   fait 32 px, le logo 16. */
.profil-liens a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gris-texte-secondaire);
}
.profil-liens a:hover { color: var(--gris-texte); }
.profil-liens svg { flex: none; width: 16px; height: 16px; }
/* Le manchon, sous la fiche : 32 px au-dessus, comme sous une une. */
.profil-fiche + .manchon-sous-une { margin-top: var(--espace-filet-noir); }

/* --- La page Équipe (B2, 23/09) ---------------------------------------------
   Sous le manchon (un sommaire de deux ancres), le comité dans la bande d'un
   dossier — le titre et la phrase à gauche, les cinq à droite —, puis, sous
   un filet noir, « Les signatures » en cinq colonnes, puis la signature
   collective. Sans photo, la place du visage reste vide : les noms restent
   alignés. */
.equipe-personnes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px var(--espace-interne);
}
/* La bande ne remonte pas ses contenus : ce ne sont pas des lignes à filet. */
.equipe-comite .bande-dossier-contenus { margin-top: 0; }
.equipe-comite { --taille-portrait-equipe: var(--taille-portrait-membre); }
.equipe-signatures {
  --taille-portrait-equipe: var(--taille-portrait-visage);
  padding-top: var(--espace-bande-dossier);
  border-top: 1px solid var(--filet-noir);
}
.equipe-signatures .equipe-personnes { margin-top: var(--espace-filet-noir); }
/* Les ancres du sommaire : la cible s'arrête un peu sous le haut de l'écran. */
.equipe [id] { scroll-margin-top: var(--espace-filet-noir); }
.equipe-personne { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.equipe-portrait,
.equipe-portrait-vide {
  display: block;
  width: var(--taille-portrait-equipe);
  height: var(--taille-portrait-equipe);
  flex: 0 0 auto;
}
.equipe-portrait::after { content: none; }
.equipe-nom {
  margin-top: 16px;
  font-family: var(--police-titre);
  font-size: var(--taille-nom-equipe);
  font-weight: 700;
  line-height: 1.15;
}
.equipe-nom a:hover { text-decoration: underline; }
.equipe-fonction {
  margin-top: 4px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--gris-texte-secondaire);
}

/* --- LA BANDE D'UN DOSSIER — l'archive (A) et la page d'un dossier (D1) -------
   Une brique, deux pages (23/09). Une bande, c'est une colonne d'identité à
   gauche et des lignes à droite, un filet clair dans la gouttière (tracé en
   pseudo-élément, comme sur une rubrique), un filet noir au-dessus. Sur
   l'archive, une bande par dossier ; sur la page d'un dossier, une bande pour
   son nom et son chapeau, puis une par étape. Sous 992 px, l'identité passe
   au-dessus (responsive.css). */
.bande-dossier {
  display: grid;
  grid-template-columns: var(--largeur-identite-dossier) minmax(0, 1fr);
  grid-template-areas: "identite contenus";
  column-gap: var(--gouttiere-colonnes);
  align-items: start;
  padding: var(--espace-bande-dossier) 0;
  border-top: 1px solid var(--filet-noir);
}
.bande-dossier-identite {
  grid-area: identite;
  position: relative;
  align-self: stretch;
}
.bande-dossier-identite::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--gouttiere-colonnes) / -2);
  width: 1px;
  background: var(--filet-clair);
}

/* LES LIGNES — la carte en ligne (`.carte-ligne`, composants.css), réglée
   par ses variables. Un filet clair au-dessus de chaque ligne ; la colonne
   remonte d'autant, pour que la première vignette s'aligne sur le nom. */
.bande-dossier-contenus {
  grid-area: contenus;
  margin-top: calc(-1 * var(--espace-ligne-dossier));
}
.carte-bande {
  --largeur-vignette-ligne: var(--vignette-ligne-dossier);
  --gouttiere-carte-ligne: var(--gouttiere-ligne-dossier);
  padding: var(--espace-ligne-dossier) 0;
  border-top: 1px solid var(--filet-clair);
}
.carte-bande .carte-titre { font-size: var(--taille-titre-ligne-dossier); margin-top: 6px; }
.carte-bande .carte-auteur { margin-top: 6px; }

/* ⚠ SOUS UN FILET NOIR, LA PREMIÈRE LIGNE N'A PAS DE FILET (Ludovic, 23/09) :
   le clair doublait le trait. Au bureau seulement — empilée, la ligne suit
   l'identité. ⚠ Plus d'exception pour la première vitrine depuis le 23/09 au
   soir : collée au manchon, son filet clair tombait 14 px sous le double
   filet noir et faisait un troisième trait. */
@media (min-width: 992px) {
  .carte-bande:first-child { border-top: 0; }
}

/* --- L'archive des dossiers (A, la vitrine resserrée, 22/09 ; écrite le 23/09)
   L'identité : le nom, le chapeau, « Tout le dossier ». Trois derniers
   contenus, sans chapô. */

/* LA PREMIÈRE VITRINE N'OUVRE PAS SUR SON PROPRE FILET (22/09 au soir) :
   celui du manchon est juste au-dessus. Une vitrine sert aussi une voix, sur
   les chroniques (23/09).
   🔴 ET ELLE TOMBE À L'ESPACE D'APRÈS UN FILET NOIR, À TOUTES LES LARGEURS
   (Ludovic, 23/09 au soir : « cohérente entre tous les gabarits ») : la marge
   de la tête suffit (32 · 28 · 28). Son padding s'y ajoutait au bureau — 64
   sous le manchon, quand toutes les autres listes en ont 32. */
.tete-liste + .vitrine { border-top: 0; padding-top: 0; }

/* Un seul balisage, trois placements : les aires se redistribuent à la
   tablette et au téléphone. */
.vitrine .bande-dossier-identite {
  display: grid;
  grid-template-areas: "nom" "chapeau" "suite";
  align-content: start;
  justify-items: start;
}
.vitrine-titre {
  grid-area: nom;
  font-family: var(--police-titre);
  font-size: var(--taille-nom-vitrine);
  line-height: 1.15;
}
.vitrine-titre a:hover { text-decoration: underline; }

/* Le chapeau serré : il dit de quoi parle le dossier, le texte entier est sur
   sa page. Coupé sur une variable, comme le chapô des listes. */
.vitrine-chapeau {
  grid-area: chapeau;
  margin-top: 12px;
  max-width: var(--largeur-chapeau-vitrine);
  font-family: var(--police-meta); /* la voix du chapô d'une carte, pas celle du texte long */
  font-size: var(--taille-chapeau-vitrine);
  line-height: 1.5;
  color: var(--couleur-extrait-carte);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lignes-chapeau-vitrine);
  line-clamp: var(--lignes-chapeau-vitrine);
  overflow: hidden;
}
.vitrine-suite { grid-area: suite; margin-top: 16px; white-space: nowrap; }

/* --- LES BANDES LARGES — la page d'un dossier et la page d'une voix (23/09)
   Les lignes y montrent tout : vignette 220, titre 20, chapô sur deux lignes. */
.bandes-larges {
  --vignette-ligne-dossier: 220px;
  --gouttiere-ligne-dossier: 24px;
  --espace-ligne-dossier: 22px;
  --taille-titre-ligne-dossier: 20px;
}
/* --- L'archive des éditions (A2, 23/09) -------------------------------------
   Une bande par numéro (`template-parts/bande-edition.php`), sous
   `.bandes-larges` : la une et les deux d'à côté au calibre de la page d'un
   dossier, avec leur bout de chapô. L'identité : le numéro en grand, la date,
   « Ouvrir l'édition », PDF · ePub. La suite : les cartes « g » dépouillées
   du sommaire (`.carte-sommaire`, composants.css), sur deux colonnes, un
   filet clair entre deux rangées et au-dessus de la première. */
.bandes-editions > .bande-edition:first-child { border-top: 0; padding-top: 0; }
.bande-edition-identite { display: flex; flex-direction: column; align-items: flex-start; }
.bande-edition-numero {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-numero-bande-edition);
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.bande-edition-numero a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bande-edition-date {
  margin-top: 10px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--gris-texte-secondaire);
}
.bande-edition-ouvrir { margin-top: 18px; }
.bande-edition-fichiers {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-weight: 500;
}
.bande-edition-fichiers a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bande-edition-suite {
  display: grid;
  grid-template-columns: repeat(var(--colonnes-sommaire), minmax(0, 1fr));
  column-gap: var(--gouttiere-sommaire);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet-clair);
}
.bande-edition-suite > li { padding: 18px 0; border-top: 1px solid var(--filet-clair); }
.bande-edition-suite > li:nth-child(-n + 2) { border-top: 0; }
.bande-edition-vide { color: var(--gris-texte-secondaire); }

/* --- La page d'un dossier (D1, le manchon des dossiers, 23/09) ---------------
   La tête de /dossiers/, l'onglet du dossier allumé. Puis le dossier sur la
   grille des bandes : son nom (le h1) à gauche, le chapeau en grand à droite,
   « Lire la suite » et les téléchargements dessous ; puis les étapes, du plus
   ancien au plus récent. */
.dossier-intro { border-top: 0; padding-top: 0; padding-bottom: var(--espace-bloc); }
.dossier-intro .bande-dossier-contenus { margin-top: 0; }
.dossier-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: none;
  font-size: var(--taille-nom-dossier);
  line-height: 1.15;
}

/* Le chapeau est le pourquoi du dossier : il se lit en entier, en grand. */
.dossier-chapeau {
  font-family: var(--police-titre);
  font-size: var(--taille-chapeau-dossier);
  line-height: 1.55;
  color: var(--gris-texte);
}

/* « Lire la suite » et les téléchargements, sur une ligne. Déplié, tout
   s'empile dans l'ordre de la lecture : le texte, les téléchargements,
   « Replier » (Ludovic, 23/09). */
.dossier-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 24px;
}
.dossier-actions:has(.dossier-suite[open]) {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.dossier-suite-bouton { list-style: none; cursor: pointer; display: inline-flex; }
.dossier-suite-bouton::-webkit-details-marker { display: none; }
.dossier-replier { cursor: pointer; }
/* `.bouton` pose un display qui l'emporte sur l'attribut : sans cette ligne,
   « Replier » se montrait dépliant fermé (vu le 28/09). */
.dossier-replier[hidden] { display: none; }
/* Quand js/plis.js a posé le bouton du bas, le résumé du haut se tait. */
.dossier-suite.avec-replier[open] > summary { display: none; }
.dossier-presentation {
  font-size: var(--taille-texte-lecture);
  line-height: var(--interligne-lecture);
  color: var(--couleur-lecture);
}
.dossier-presentation > :first-child { margin-top: 0; }
.dossier-presentation p { margin-top: var(--espace-paragraphes); }

/* L'identité d'une étape : quand, puis quoi — le titre dans le gris. */
.etape-quand,
.etape-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-etape-dossier);
  font-weight: 700;
  line-height: 1.2;
}
.etape-titre { margin-top: 2px; color: var(--gris-texte); } /* en noir (Ludovic, 28/09) */
.etape-titre:first-child { margin-top: 0; }

/* --- « Charger la suite » -----------------------------------------------------
   Un lien habillé en bouton de contour, centré sous la liste. Le rouge est
   réservé aux actions que le média demande ; lire la suite d'une liste n'en
   est pas une. */
.archive-suite {
  margin-top: 44px;
  text-align: center;
}
.charger-plus[aria-busy="true"] { opacity: .5; cursor: progress; }

/* --- Une liste vide le dit -------------------------------------------------
   Elle ne se remplit pas avec autre chose : un bloc rempli de contenus pris
   ailleurs mentirait au lecteur ET cacherait un défaut de migration. */
.archive-vide {
  padding: 40px 0;
  color: var(--gris-texte-secondaire);
}

/* --- Le formulaire de recherche ------------------------------------------- */
.archive-recherche { margin-top: 20px; max-width: var(--largeur-lecture); }
.archive-recherche form { display: flex; gap: 10px; align-items: stretch; }
.archive-recherche label { flex: 1 1 auto; display: block; }
.archive-recherche input[type="search"] {
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  background: #fff;
}
.archive-recherche input[type="submit"] {
  font: inherit;
  cursor: pointer;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--gris-noir);
  color: #fff;
}

/* --- La page introuvable --------------------------------------------------
   Elle REMET EN ROUTE au lieu de s'excuser : le lecteur arrive presque
   toujours d'un lien ancien, et il cherchait quelque chose de précis. */
.introuvable-sorties {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--espace-bloc);
}

/* --- La pagination numérotée de WordPress ---------------------------------
   ⚠ Elle ne sert plus que search.php, tant qu'il n'est pas réécrit sur sa
   direction (E, 01/09) : les archives passent par « Charger la suite ». Elle
   partira avec lui. */
.pagination {
  margin-top: var(--espace-bloc);
  padding-top: 24px;
  border-top: 1px solid var(--gris-filet);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pagination .page-numbers {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.pagination .page-numbers.current {
  background: var(--gris-noir);
  border-color: var(--gris-noir);
  color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; }

/* --- Une page de texte ----------------------------------------------------
   Pas de tête côte à côte, pas de signature : ce sont des pages du média, et
   les traiter comme des articles leur ajouterait des promesses qu'elles ne
   tiennent pas. */
.detail-entete-page { max-width: var(--largeur-lecture); }
/* ⚗ 08/09 — Le corps d'une page de texte se centre ICI, sur la colonne de
   lecture. Il se centrait dans detail.css jusqu'au 08/09 ; single.php n'en a
   plus besoin depuis ses trois colonnes, la règle est partie avec, et les
   pages de texte s'étalaient sur toute la largeur du conteneur. */
.detail-page .detail-corps {
  max-width: var(--largeur-lecture);
  margin: 34px auto 0;
}


/* =========================================================================
   L'ARCHIVE VIDÉO — direction E (31/08, confirmée le 01/09)

   Deux morceaux : une bande sombre en tête qui porte la dernière vidéo, et
   la grille chronologique dessous. La bande réutilise `.video-bande` de la
   page vidéo — même fond, même grammaire de filets et de gris : le fond
   sombre veut dire vidéo, et il n'y en a qu'un.
   ========================================================================= */

/* La bande touche l'en-tête : `main.archive-video` ne porte pas `.bloc`,
   donc pas de marge — « une marge externe n'est pas de l'espace, c'est du
   fond de page qui se voit » (principe 2 de la mise en page).

   🔴 ET DEPUIS LE 22/09 AU SOIR, ELLE PORTE TOUTE LA TÊTE (Ludovic) : le fil
      d'ariane, le nom du format en grand, le manchon des rubriques et le tri,
      puis la une. C'est la brique `.tete-liste` — la même que sur un numéro,
      l'archive des éditions et une rubrique —, servie sur fond sombre.

   ⚠ SON AIR DU HAUT EST CELUI DU FIL D'ARIANE, PAS CELUI D'UNE BANDE. Le
     padding de bande (48 px) ajouté à la marge de l'ariane (24) aurait posé
     l'ariane à 72 px sous la barre : le manchon serait tombé 48 px plus bas
     que sur les trois autres pages, et le contrat de la tête se serait rompu
     sur la seule page sombre du site. La bande ouvre donc à 24 et l'ariane
     n'ajoute rien ; en bas elle garde son padding de bande. */
.tete-bande { padding-top: var(--space-24); }
.tete-bande .archive-ariane { margin-top: 0; }

/* ⚗ 23/09 — ENTRE LE FILET ET LA UNE, 32 px COMME SUR LES AUTRES LISTES
   (Ludovic : « on a toujours un problème de marge avec les entretiens par
   rapport aux articles, enquêtes et courrier »). C'était un écart de bloc,
   56 px, du temps où le manchon était dans la bande : la tête porte
   maintenant sa propre marge, la même partout. */

/* LE MANCHON SOUS LA BANDE EST CENTRÉ ENTRE ELLE ET LA GRILLE : 32 px de
   part et d'autre (Ludovic, 23/09 : « réduire le top pour que la nav soit
   centrée haut bas »). C'était 56 au-dessus, 32 dessous. */
.tete-bande + .archive-entretiens { margin-top: var(--espace-filet-noir); }

.une-video {
  display: grid;
  grid-template-columns: var(--grille-une-video);
  gap: var(--gouttiere-une-video);
  /* ⚠ `start`, PAS `stretch` — la même règle qu'à la scène de la page vidéo,
     et pour la même raison : la vignette porte un rapport 16/9, et WebKit
     étiré lui donne une hauteur nulle puis, par ce rapport, une largeur
     nulle. Safari rendait une bande vide le 09/09. */
  align-items: start;
}

.une-video-vignette { display: block; min-width: 0; }

.une-video-corps {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.une-video-surtitre {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-meta-sur-sombre);
}

/* Son titre, son chapô, sa ligne de service et sa signature sont ceux de
   toutes les unes de liste (« LA UNE D'UNE LISTE », en fin de fichier) ; ne
   restent ici que les couleurs du fond sombre. Ses autres couleurs sont dans
   composants.css (`.sur-sombre`). */
.sur-sombre .une-video-titre { color: var(--gris-fond); }
/* 🔴 23/09 — LA UNE EST SUR FOND BLANC (retenu par Ludovic) : elle y prend les
   couleurs des autres unes, plus bas. La règle ci-dessus ne sert que si la
   bande sombre est rallumée (`antithese_entretiens_sombre`). */

/* Plus de bouton « Voir l'entretien » depuis le 23/09 : `.une-video-actions`
   est retirée avec lui. */

/* --- Le sélecteur d'ordre -------------------------------------------------
   Le seul réglage que Ludovic ait gardé sur la planche, le 01/09. Un
   dépliant natif : deux vraies adresses dedans, aucun script. Le chevron
   suit l'état et ne se déplace pas (socle). */
.archive-tri { margin-top: 22px; }

.tri-pli { position: relative; display: inline-block; }
.tri-pli > summary { list-style: none; }
.tri-pli > summary::-webkit-details-marker { display: none; }

.tri-resume {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-meta);
  font-size: var(--taille-texte);
  color: var(--gris-texte);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  padding: 8px 13px;
  cursor: pointer;
}
.tri-resume::after {
  content: "\2304";
  font-size: 15px;
  line-height: 1;
  color: var(--gris-texte-secondaire);
}
.tri-pli[open] > .tri-resume::after { content: "\2303"; }

.tri-choix {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--gris-fond);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  padding: 4px 0;
}
.tri-choix a {
  display: block;
  white-space: nowrap;
  font-family: var(--police-meta);
  font-size: var(--taille-texte);
  padding: 9px 13px;
}
.tri-choix a:hover { background: var(--gris-fond-clair); }
.tri-choix a[aria-current] { font-weight: 700; }


/* =========================================================================
   LA RECHERCHE — direction E, 01/09

   Elle réutilise tout ce que les archives ont déjà : la tête (`archive-*`),
   la grille à quatre colonnes, « Charger la suite », et les dépliants
   `tri-pli` du sélecteur d'ordre des entretiens, qui sont le patron des cinq
   filtres. Ce qui suit n'ajoute que ce qu'elle a en propre : le champ, la
   barre, l'état de la liste et ses puces effaçables.
   ========================================================================= */

/* --- LE CHAMP : un seul objet, dans la zone d'identité (B, 23/09) -----------
   Loupe, saisie et bouton dans le même cadre. Sur le site en ligne ce sont
   deux boîtes qui flottent côte à côte ; ici une recherche se lit comme une
   phrase. Il se centre dans la zone d'identité de la tête, à la place du nom
   d'une liste, et tient dans sa hauteur. Le cadre entier prend le focus. */
.recherche-champ {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--largeur-champ-recherche);
  height: var(--hauteur-champ-recherche);
  border: 1px solid var(--gris-texte);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--gris-fond);
}
.recherche-champ:focus-within { box-shadow: 0 0 0 2px var(--gris-filet); }

.recherche-boite {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-width: 0;
}
.recherche-loupe { display: inline-flex; color: var(--gris-texte-secondaire); }

.recherche-boite input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--police-texte);
  font-size: var(--taille-saisie-recherche);
  color: var(--gris-texte);
  padding: 0;
}

/* Le bouton du champ est le bouton plein du site, ROUGE (Ludovic, 23/09 —
   la planche B ; il était sombre depuis le 01/09, chercher n'étant pas une
   action au sens du socle). Collé au cadre : pas d'arrondi. */
.recherche-champ .bouton-plein {
  border-radius: 0;
  padding: 0 26px;
}

/* --- LES FILTRES DANS LE MANCHON (B, 23/09) ----------------------------------
   Le dépliant du tri (`.tri-manchon`, composants.css), un par filtre, à
   gauche ; l'ordre à droite. Un filtre au repos s'écrit en gris, comme une
   destination qu'on ne lit pas ; posé ou ouvert, il passe au noir, et posé il
   se souligne comme l'onglet qu'on lit. */
.manchon-plis {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  min-width: 0;
}
.manchon-plis > .tri-pli > .tri-resume { color: var(--gris-texte-secondaire); gap: 6px; }
.manchon-plis > .tri-pli > .tri-resume:hover,
.manchon-plis > .tri-pli[open] > .tri-resume { color: var(--gris-texte); }
.manchon-plis > .tri-pli-pose > .tri-resume {
  color: var(--gris-texte);
  padding-bottom: 3px;
  margin-bottom: -5px;
  border-bottom: 2px solid var(--filet-noir);
}
.manchon-plis > .tri-pli > .tri-resume::after { font-size: 13px; }
/* Le menu s'ouvre sous le filtre, aligné sur lui ; celui du tri, à droite,
   s'aligne sur le bord droit (composants.css). */
.manchon-plis .tri-choix {
  left: 0;
  right: auto;
  top: calc(100% + 12px);
  min-width: 240px;
  max-height: var(--hauteur-max-pli-filtre);
  overflow-y: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.tri-note {
  padding: 8px 13px;
  border-top: 1px solid var(--gris-filet);
  margin: 4px 0 0;
  white-space: nowrap;
}

/* --- CE QUE LA LISTE MONTRE, EN UNE LIGNE -------------------------------------
   Ce qui est cherché, combien, les filtres posés en puces effaçables, « Tout
   effacer ». La grille suit. */
.recherche-etat {
  display: flex;
  gap: 8px 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: var(--espace-etat-recherche);
}
.recherche-quoi {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-etat-recherche);
  letter-spacing: -.01em;
}
.recherche-nombre {
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--gris-texte-secondaire);
}

/* Les filtres posés, effaçables. La croix est DANS le jeton : le filtre et
   son retrait sont le même objet, on ne vise pas deux fois. */
.recherche-jeton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-weight: 500;
  border: 1px solid var(--gris-texte);
  border-radius: var(--rayon);
  padding: 4px 10px;
}
.recherche-jeton:hover { background: var(--gris-fond-clair); }
.jeton-axe { color: var(--gris-texte-secondaire); font-weight: 400; }
.jeton-croix { font-size: 15px; line-height: 1; color: var(--gris-texte-secondaire); }
.recherche-jeton:hover .jeton-croix { color: var(--gris-texte); }

.recherche-effacer {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  border-bottom: 1px solid var(--gris-filet);
}
.recherche-effacer:hover { color: var(--gris-texte); border-bottom-color: var(--gris-texte); }

/* --- Les recherches fréquentes : sous l'état, quand rien n'est cherché ------ */
.recherche-frequentes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--espace-etat-recherche) + 12px);
  margin-bottom: var(--espace-etat-recherche);
}
.recherche-mot {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon-pastille);
  padding: 6px 13px;
}
.recherche-mot:hover { border-color: var(--gris-texte); color: var(--gris-texte); }

/* --- Rien trouvé ------------------------------------------------------------ */
/* ⚠ Pas de marge en haut : la tête d'archive en pose déjà une
   (`--espace-bloc`), et les deux mises bout à bout laissaient un demi-écran
   blanc entre le message d'erreur et la phrase qui l'explique. */
.recherche-vide {
  padding-bottom: var(--espace-bloc);
  max-width: var(--largeur-lecture);
}
.recherche-vide-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-h3, 22px);
  margin-bottom: 20px;
}
.recherche-vide p + p { margin-top: 16px; }

/* =========================================================================
   LE FIL DES DESSINS — A, le dessin en tête (23/09) — `/format/dessin-de-presse/`

   Ce n'est pas une forme d'`archive.php` : un dessin par écran n'est plus
   une liste, c'est une page. Depuis le 23/09, c'est la bande d'un dossier,
   un DESSIN par bande : à gauche le jour, l'année, puis sous un filet clair
   qui · où ; à droite le titre et le dessin à sa taille de LECTURE (620).

   🔴 AUCUN FOND, AUCUN RAPPORT IMPOSÉ. La boîte suit le format réel de
   l'image : 191 dessins en portrait 4/5, mais 35 en paysage et 17 carrés,
   presque tous d'avant 2022. Un `aspect-ratio` fixe en recadrerait 58 sur
   249. `.dessin-image` (edition.css) porte déjà cette règle. Pas de filet
   autour (Ludovic, 23/09).
   ========================================================================= */

/* Le premier dessin ouvre sous le manchon, sans filet à lui (la règle des
   bandes, 23/09 au soir). */
.dessins-fil > .dessin-bande:first-child { border-top: 0; padding-top: 0; }

.dessin-identite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dessin-jour {
  font-family: var(--police-titre);
  font-size: var(--taille-jour-dessin);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gris-texte);
}
.dessin-an {
  margin-top: 4px;
  font-family: var(--police-meta);
  font-size: var(--taille-service-carte);
  color: var(--couleur-format-carte);
}

/* QUI · OÙ, sous un filet clair. La signature n'est pas un lien (02/09) :
   elle n'a ni soulignement ni survol. L'édition est le seul lien : le
   `lien-suite` du site. */
.dessin-registre {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--filet-clair);
  font-family: var(--police-meta);
  font-size: var(--text-sm);
}
.dessin-signature { font-weight: 500; color: var(--gris-texte); }
.dessin-rubrique { margin-top: 0; font-size: var(--text-sm); }

/* --- Le dessin --------------------------------------------------------------
   Le titre AU-DESSUS de l'image : c'est le seul texte du contenu, et sur un
   dessin de presse il fait partie de la lecture. */
.dessin-planche { margin-top: 0; }
.dessin-titre {
  max-width: var(--largeur-dessin-fil);
  font-size: var(--taille-titre-dessin);
  line-height: 1.2;
  text-wrap: pretty;
}
.fil-dessins .dessin-cliquable { display: block; margin-top: 18px; max-width: var(--largeur-dessin-fil); }

/* UN DESSIN SE VOIT EN ENTIER SUR UN ÉCRAN ORDINAIRE (Ludovic, 23/09 : « pas
   possible de tout voir sur un écran classique 13'' mac »). Un portrait 4/5
   à 620 fait 775 px de haut : sous l'en-tête, avec son titre, il débordait
   d'une fenêtre de 830. Sa HAUTEUR est donc bornée par ce qui reste de
   l'écran, et sa largeur suit — jamais recadré. Un paysage garde ses 620 ;
   un grand écran aussi. Le plancher évite un timbre-poste dans une fenêtre
   écrasée. */
.fil-dessins .dessin-image > img {
  width: auto;
  max-width: 100%;
  max-height: max(var(--hauteur-min-dessin-fil), calc(100svh - var(--hauteur-entete) - var(--reserve-dessin-fil)));
}


/* Le dessin n'a plus de fond nulle part depuis le 22/09 : l'exception que la
   recherche portait depuis le 16/09 est devenue la règle (composants.css). */


/* =========================================================================
   L'ARCHIVE D'UNE RUBRIQUE — « la une et le fil » (Ludovic, 16/09 ; écrite
   le 17/09, à la place des étagères de la direction C)

   La grammaire de R2 et de A, sans une copie : la grille 8/4
   (`--grille-deux-tiers`), le filet clair tracé DANS la gouttière, la carte
   « g » et sa variante en ligne, la barre, le lien, la ligne de liste, le
   cadre du dessin. Ce fichier ne porte que les calibres propres à la page.
   ========================================================================= */

/* LA TÊTE — le fil d'ariane, le nom de la rubrique avec sa pastille, le
   manchon. Pas de surtitre « Rubrique » : l'ariane le dit (17/09).

   🔴 C'EST LA TÊTE D'UN NUMÉRO (Ludovic, 22/09). `.tete-liste`
      (`composants.css`) porte l'air du haut, la zone d'identité à hauteur
      déclarée et la marge du manchon : le manchon tombe donc au MÊME PIXEL
      que la bande d'un numéro et que la barre des années. Cette page n'ajoute
      que sa marge du bas. */

/* Le nom d'une rubrique se compose comme tous les autres : la règle est dans
   `composants.css` (`.tete-liste-titre`), il n'y a ici que la pastille. */

/* LE CORPS — le fil à gauche, les formats courts à droite, un filet clair
   dans la gouttière. Le filet se trace en pseudo-élément : un `border-left`
   plus un `padding-left` redécaleraient la colonne (règle du dépôt). */
.rubrique-corps {
  display: grid;
  grid-template-columns: var(--grille-rubrique);
  column-gap: var(--gouttiere-rubrique);
  align-items: start;
}
.rubrique-corps > * { min-width: 0; }
.rubrique-corps.sans-colonne { grid-template-columns: minmax(0, 1fr); }

.rubrique-colonne {
  position: relative;
  align-self: stretch;
}
.rubrique-colonne::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gouttiere-rubrique) / -2);
  width: 1px;
  background: var(--filet-clair);
}

/* LA UNE — la carte « g » au calibre de toutes les unes de liste (« LA UNE
   D'UNE LISTE », en fin de fichier). Celle d'une rubrique est VERTICALE :
   la ligne de service suit l'image au lieu d'ouvrir une colonne, et le
   chapô, sous une image pleine largeur, se coupe à trois lignes. */
.rubrique-fil-colonne .carte-une-liste .carte-service { margin-top: 18px; }
.rubrique-fil-colonne .carte-une-liste .carte-extrait { -webkit-line-clamp: 3; line-clamp: 3; }

/* LE FIL — la carte en ligne, un filet clair au-dessus de chaque entrée.
   Le calibre se dit par les variables du composant, jamais en le redessinant. */
.rubrique-fil { margin-top: 36px; }
.rubrique-fil > .carte {
  --largeur-vignette-ligne: var(--largeur-vignette-fil-rubrique);
  --gouttiere-carte-ligne: 28px;
  padding: var(--espace-fil-rubrique) 0;
  border-top: 1px solid var(--filet-clair);
}
.carte-fil-rubrique .carte-titre { font-size: var(--taille-titre-fil-rubrique); }
.carte-fil-rubrique .carte-extrait { font-size: 15px; }

.rubrique-suite { margin-top: 32px; }

/* LA COLONNE — un bloc par format court, la barre partagée en tête. Après une
   barre, ce qui suit colle (une liste de lignes) ou prend 24 px (socle). */
.rubrique-bloc + .rubrique-bloc { margin-top: var(--espace-rubrique-colonne); }
.rubrique-bloc .titre-barre + .carte,
.rubrique-bloc .titre-barre + .rubrique-dessin { margin-top: var(--space-24); }

.rubrique-bloc .carte + .carte,
.rubrique-dessin + .rubrique-dessin { margin-top: 28px; }

/* LE DESSIN — le cadre partagé avec l'édition et l'accueil (`.cadre-dessin`),
   entier et jamais recadré : la boîte suit le format réel de l'image, elle ne
   la met pas au carré comme la planche le laissait croire (Ludovic, 17/09). */
.rubrique-dessin figcaption { margin-top: 12px; }
.rubrique-dessin-titre { font-size: var(--taille-titre-dessin-edition); }


/* =========================================================================
   LA UNE ET LA GRILLE (Ludovic, 22/09 au soir)

   Les articles et le courrier des lecteurs : le dernier contenu en grand, le
   reste en quatre colonnes. C'est le motif que les entretiens, les enquêtes
   et l'archive d'une rubrique avaient déjà — une page de liste ouvre sur un
   contenu, pas sur une grille de vignettes.

   RIEN N'EST REDESSINÉ : la une est LA CARTE « g », en ligne (`.carte-ligne`,
   la brique de la frise d'un dossier et du fil d'une rubrique) et au calibre
   de la une d'une rubrique (`.carte-une-liste`). Cette section ne pose que sa
   proportion — celle de la une du rayon des enquêtes, 7/5 — et son filet.
   ========================================================================= */
.carte-une-large {
  --largeur-vignette-ligne: minmax(0, 7fr);
  --gouttiere-carte-ligne: var(--gouttiere-trame);
  --lignes-chapo-ligne: var(--lignes-chapo-une-liste);
  grid-template-columns: var(--largeur-vignette-ligne) minmax(0, 5fr);
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--gris-texte);
}


/* 🔴 LE MANCHON SOUS LA UNE (23/09) — articles, courrier, enquêtes,
   entretiens. La une n'a plus son propre filet : c'est celui du manchon qui
   la ferme, et le double de dessous ouvre la liste. */
.une-nav-dessous { padding-bottom: 0; border-bottom: 0; margin-bottom: var(--espace-filet-noir); }
/* ⚗ 23/09 — 32 px AU-DESSUS, 32 DESSOUS : le manchon est centré entre la une
   et la liste, comme sous la bande des entretiens (il avait 40 au-dessus). */
.manchon-sous-une { margin-bottom: var(--espace-filet-noir); }
/* Le rayon ouvre ses étages par leur propre padding : collé au manchon. */
.manchon-sous-une + .rayon > .rayon-entree:first-child { padding-top: 0; }
/* Sans une (page filtrée, page suivante), le premier étage suit la tête : la
   marge de la tête fait l'écart, pas le padding de l'étage (23/09 au soir). */
.tete-liste ~ .rayon > .rayon-entree:first-child { padding-top: 0; }


/* =========================================================================
   LA UNE D'UNE LISTE — TITRE, CHAPÔ, LIGNE DE SERVICE, SIGNATURE (23/09)

   🔴 UNE SEULE ÉCRITURE POUR LES QUATRE UNES (Ludovic, 23/09 : « est-ce que
      tu peux contrôler que les titres et chapeau utilisent les mêmes CSS
      entre tous ces gabarits ? »). Ils ne les utilisaient pas : chaque une
      avait ses règles, et elles avaient dérivé — le chapô des entretiens en
      Simplon 16 sur quatre lignes quand les autres étaient en PT Serif 18 sur
      cinq, un soulignement au survol sur le seul titre des entretiens, la
      ligne de service décrochée de 12 px du haut de l'image, trois marges
      différentes avant la signature.

   Les articles, le courrier, les enquêtes et les entretiens lisent donc tous
   ce bloc ; la une d'une rubrique aussi, qui ne change que ce que sa forme
   verticale impose (plus haut). Le fond sombre des entretiens ne change que
   des COULEURS, jamais un calibre. Le titre ne se souligne pas au survol :
   aucun titre de carte du site ne le fait.
   ========================================================================= */
.carte-une-liste .carte-titre,
.rayon-tete-titre,
.une-video-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-titre-une-liste);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-top: 12px;
  text-wrap: pretty;
}

.carte-une-liste .carte-extrait,
.rayon-tete .rayon-chapo,
.une-video-chapo {
  font-family: var(--police-texte);
  font-size: var(--taille-texte-une-liste);
  line-height: 1.5;
  max-width: none;
  margin-top: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lignes-chapo-une-liste);
  line-clamp: var(--lignes-chapo-une-liste);
  overflow: hidden;
}
/* Sur fond clair ; sur la bande sombre, `.sur-sombre .carte-extrait` passe
   devant (sa spécificité est plus forte). */
.carte-une-liste .carte-extrait,
.rayon-tete .rayon-chapo,
.une-video-chapo { color: var(--couleur-texte-une); }

/* La ligne de service ouvre la colonne de texte, à hauteur du haut de
   l'image. */
.carte-une-liste .carte-service,
.rayon-tete-corps .carte-service,
.une-video-corps .carte-service {
  font-size: var(--taille-service-une);
  margin-top: 0;
}

/* La signature — 14 px sous le chapô. Celle du rayon est dans sa ligne à
   portrait (`.rayon-signature`), qui porte déjà la marge. */
.carte-une-liste .carte-auteur,
.une-video-corps .carte-auteur { margin-top: 14px; }
.carte-une-liste .carte-auteur,
.rayon-tete .carte-auteur,
.une-video-corps .carte-auteur { font-size: var(--taille-service-une); }

/* --- LES CHRONIQUES (B, la voix en tête ; C2, la page d'une voix — 23/09) ---
   Les bandes des dossiers, avec une PERSONNE dans la colonne : le portrait
   rond au-dessus du nom, sa fonction. */
.voix-personne {
  grid-area: nom;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.portrait-voix {
  width: var(--taille-portrait-voix);
  height: var(--taille-portrait-voix);
  flex: 0 0 var(--taille-portrait-voix);
  margin-bottom: 16px;
}
.portrait-voix::after { content: none; }
.voix-fonction {
  margin-top: 4px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--couleur-format-carte);
}

/* La page d'une voix : la bande de l'archive, déroulée. Elle ouvre sous le
   manchon, sans filet à elle. */
.voix-page { border-top: 0; padding-top: 0; }
.voix-page .portrait-voix {
  --taille-portrait-voix: var(--taille-portrait-voix-page);
  margin-bottom: 18px;
}
.voix-nom {
  font-family: var(--police-titre);
  font-size: var(--taille-nom-voix);
  font-weight: 700;
  text-transform: none;
  line-height: 1.15;
}
.voix-nom a:hover,
.voix .vitrine-titre a:hover { text-decoration: underline; }
.voix-presentation {
  margin-top: 16px;
  font-family: var(--police-meta);
  font-size: var(--taille-chapeau-vitrine);
  line-height: 1.5;
  color: var(--couleur-extrait-carte);
}
.voix-suite { margin-top: 32px; }