/* --- La boîte d'une image ------------------------------------------------ */
.image {
  background: var(--gris-boite);
  border-radius: var(--rayon);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* La boîte n'est pas remplacée par l'image : elle l'ACCUEILLE. C'est elle qui
   tient le rapport de forme, donc la page ne saute pas pendant le chargement.
   Le mot « image » du fil de fer est parti le 30/09, avec sa bascule. */
.image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.r16-9 { aspect-ratio: 16 / 9; }
.r3-2  { aspect-ratio: 3 / 2; }  /* la vignette d'une carte (carte « g », 15/09) */
.r4-5  { aspect-ratio: 4 / 5; }

/* Portrait rond : la seule boîte grise qui ne prend pas toute la largeur.
   Son diamètre se règle sur --taille-portrait, et sur cette ligne seulement. */
.portrait {
  width: var(--taille-portrait);
  height: var(--taille-portrait);
  flex: 0 0 var(--taille-portrait);
  border-radius: 50%;
}

/* Surimpression durée sur les boîtes vidéo — et la SEULE chose qui se pose
   sur une image (vocabulaire des listes, 01/09). Chiffres à chasse fixe : une
   colonne de durées se lit alors comme une colonne, pas comme un texte. */
.duree {
  position: absolute;
  left: 8px; bottom: 8px;
  background: var(--gris-noir);
  color: var(--gris-clair-sur-sombre);
  font-size: var(--taille-meta);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: var(--rayon);
}

/* --- Puces (format / thème / accès) ------------------------------------- */
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* ⚠ Le texte n'était pas centré en hauteur (Ludovic, 14/09) : Simplon Norm
   porte son dessin haut dans sa boîte, et `line-height: 1` le colle au filet
   du haut. Un pixel de plus en haut qu'en bas le recentre. */
.puce {
  font-size: var(--taille-meta);
  line-height: 1;
  padding: 5px 7px 3px;
  border-radius: var(--rayon);
  white-space: nowrap;
}
.puce-format { background: var(--gris-fonce); color: var(--gris-clair-sur-sombre); }
.puce-theme  { background: var(--gris-fond-clair); color: var(--gris-texte-secondaire); border: 1px solid var(--gris-filet); }
.puce-acces  { background: var(--gris-fond); color: var(--gris-texte-secondaire); border: 1px dashed var(--gris-filet); }

/* ⚗ 09/09 — LES PUCES S'INVERSENT SUR FOND SOMBRE. Le socle le dit depuis le
   01/09 (« les deux filets s'inversent sur fond sombre ») ; c'est la page
   vidéo qui en a eu besoin la première. Ce qui NE change pas : le format
   reste plein, la rubrique un filet plein, l'accès un filet tireté — la
   distinction se lit des deux côtés, seules les valeurs basculent.
   Toute bande sombre porte la classe `.sur-sombre`. */
.sur-sombre .puce-format { background: var(--gris-clair-sur-sombre); color: var(--gris-noir); }
.sur-sombre .puce-theme  { background: transparent; color: var(--gris-clair-sur-sombre); border-color: var(--filet-sur-sombre); }
.sur-sombre .puce-acces  { background: transparent; color: var(--gris-clair-sur-sombre); border-color: var(--filet-sur-sombre); }

/* --- Meta et chapô ------------------------------------------------------ */
.meta { font-size: var(--taille-meta); color: var(--gris-texte-secondaire); margin-top: 6px; }
.chapo { font-size: var(--taille-texte); color: var(--gris-texte-secondaire); margin-top: 6px; }

/* --- LES BOUTONS — un seul jeu (R2 et A, 16/09) ------------------------------
   48 px de haut, 24 de côté, Simplon 15 px en médium, un filet de 1 px, pas
   d'arrondi. Le PLEIN est rouge : c'est un bouton d'ACTION — s'abonner,
   donner son avis, s'inscrire (socle, Cheminement #57). Le CONTOUR mène
   quelque part (« Toutes les enquêtes »). Le BLANC est le contour d'une bande
   sombre. La barre de navigation le raccourcit (entete.css). */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hauteur-bouton);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--police-meta);
  font-size: var(--taille-bouton);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--duree-survol), color var(--duree-survol), border-color var(--duree-survol);
}
.bouton-plein   { background: var(--accent); border-color: var(--accent); color: var(--c-blanc); }
.bouton-plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--c-blanc); }
.bouton-contour { background: transparent; border-color: var(--gris-texte); color: var(--gris-texte); }
.bouton-contour:hover { background: var(--gris-texte); color: var(--gris-fond); }
.bouton-blanc   { background: var(--c-blanc); border-color: var(--c-blanc); color: var(--gris-noir); }
.bouton-blanc:hover { background: #e4e2db; border-color: #e4e2db; color: var(--gris-noir); }
/* LE SOMBRE (29/09) : une seconde action posée à côté d'un plein — « Faire un
   don en CHF » · « en € ». Deux rouges côte à côte ne se distinguent plus. */
.bouton-sombre  { background: var(--gris-fonce); border-color: var(--gris-fonce); color: var(--c-blanc); }
.bouton-sombre:hover { background: var(--gris-noir); border-color: var(--gris-noir); color: var(--c-blanc); }
/* L'icône d'une carte bancaire, devant le libellé : un paiement par carte. En
   masque, elle prend la couleur du texte du bouton. */
.bouton-carte::before {
  content: "";
  width: 20px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 0h16a2 2 0 0 1 2 2v2H0V2a2 2 0 0 1 2-2zM0 7h20v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm3 4v2h4v-2zm6 0v2h3v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 0h16a2 2 0 0 1 2 2v2H0V2a2 2 0 0 1 2-2zM0 7h20v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm3 4v2h4v-2zm6 0v2h3v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* DES BOUTONS CÔTE À CÔTE, dans le texte d'une page : centrés, et empilés
   quand la ligne ne les tient plus. */
.boutons-rangee { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; }

/* --- LES TITRES DE BLOC — deux niveaux (R2 et A, 16/09) ----------------------
   LE TITRE : « NOS ENQUÊTES », « LES ÉDITIONS PRÉCÉDENTES » — Simplon 22 px
   en capitales, sur un filet de 3 px. LE LIBELLÉ : « BRÈVES », « VIDÉOS DE
   LA SEMAINE » — 12 px en capitales espacées ; posé sur un filet de 1 px,
   c'est LA BARRE. Les deux prennent un lien « Tous les … → » à droite.
   Un titre imbriqué (`<div class="titre-bloc"><h2>`) hérite, un titre porté
   par la balise elle-même (`<h2 class="titre-barre">`) aussi.
   ⚠ `.titre-section` (League Gothic, filet de 2 px) est l'ancien titre : il
     reste sur les pages qui ne sont pas encore reprises. */
.titre-bloc, .titre-barre, .libelle {
  font-family: var(--police-meta);
  font-weight: 700;
  text-transform: uppercase;
}
.titre-bloc, .titre-barre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.titre-bloc {
  font-size: var(--taille-titre-bloc);
  letter-spacing: .01em;
  line-height: 1.2;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--filet-noir);
}
.titre-barre, .libelle {
  font-size: var(--taille-libelle);
  letter-spacing: .16em;
  line-height: 1.3;
}
.titre-barre {
  padding-top: 12px;
  border-top: 1px solid var(--filet-noir);
}
.titre-bloc > h2, .titre-bloc > h3, .titre-barre > h2, .titre-barre > h3 { font: inherit; }
.titre-bloc a, .titre-barre a { color: inherit; }
/* Un compte à droite d'une barre : « LE PROGRAMME · 9 LEÇONS », « SOMMAIRE ·
   16 CHAPITRES » — la présentation d'une masterclass, un entretien (24/09). */
.titre-barre-compte { font-weight: 500; color: var(--gris-texte-secondaire); }
.titre-bloc .lien-suite, .titre-barre .lien-suite {
  margin-top: 0;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  flex: none;
}

.titre-section {
  font-size: var(--taille-titre-section);
  border-bottom: 2px solid var(--gris-texte);
  padding-bottom: 8px;
  margin-bottom: 22px;
}

/* --- LE LIEN « TOUTES LES … → » (R2 et A) ----------------------------------
   Simplon 14 px en médium, la flèche dans le texte, pas de filet ; il se
   souligne au survol. Sous 991 px il fait au moins 44 px de haut. */
.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--police-meta);
  font-size: var(--taille-lien-suite);
  font-weight: 500;
  color: var(--gris-texte);
  border: 0;
}
.lien-suite:hover { text-decoration: underline; text-underline-offset: 3px; }


/* --- LE MANCHON — la bande d'une tête de page -------------------------------
   Née le 16/09 au soir sur la page d'un numéro (« ÉDITION N° 278 · VENDREDI
   14 AOÛT 2026 · ← N° 277 · TOUTES LES ÉDITIONS ») et sur l'archive des
   éditions, où elle porte les années ; l'archive d'une rubrique y pose ses
   formats depuis le 17/09.

   🔴 LES TROIS BANDES SONT LE MÊME OBJET DEPUIS LE 22/09 (Ludovic : « peut-
      être que c'est un composant commun »). Elles n'en étaient qu'à moitié :
      même filet simple au-dessus et même filet double en dessous, mais la
      bande d'un numéro s'écrivait en Simplon 500 et le manchon en 700, l'une
      respirait de 10 px et l'autre de 8, et **seule la bande d'un numéro
      disait qu'il y avait une suite à droite**. Tout cela vit ici maintenant,
      et les trois pages le prennent.

   La grammaire : Simplon **500** à 12 px, capitales, interlettrage .14em,
   10 px de padding — celle de la bande d'un numéro, qui est l'aînée.

   🔴 LA BARRE DÉFILE À L'HORIZONTALE, et ce qui ne défile pas reste à côté
      d'elle sur la même ligne — le tri de l'archive des éditions. Le manchon
      garde donc la même hauteur partout, le tri est toujours visible et à
      portée de pouce, et un libellé ne se coupe jamais en deux (sans quoi
      Géopolitique écrivait « COURRIER / DES / LECTEURS » sur trois lignes).

   🔴 ET LE FONDU DIT QU'IL Y A UNE SUITE, avec son chevron, DÈS QUE LA BARRE
      DÉBORDE — à n'importe quelle largeur, et plus seulement sur un
      téléphone. C'est `js/manchon.js` qui pose `manchon-deborde` : la
      question n'est pas la largeur de l'écran, c'est la longueur de la
      barre. Une bande qui tient n'a pas de fondu. */
.manchon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--padding-manchon) 0;
  border-top: 1px solid var(--filet-noir);
  border-bottom: 3px double var(--filet-noir);
  font-family: var(--police-meta);
  font-size: var(--taille-manchon);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* La zone qui défile porte le fondu : à droite de la BARRE, pas du manchon —
   sur l'archive des éditions, le tri est après elle et le fondu ne doit pas
   le couvrir. */
.manchon-defile {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.manchon-barre {
  display: flex;
  align-items: center;
  /* `column-gap` et non `gap` : la bande d'un numéro est une GRILLE au bureau,
     et un `row-gap` hérité l'écarterait si elle venait à se replier. */
  column-gap: var(--space-24);
  overflow-x: auto;
  /* ⚠ LA BARRE NE DÉFILE QUE DE CÔTÉ (Ludovic, 23/09). Le soulignement de
     l'onglet allumé pend de 5 px sous elle : une boîte qui défile en largeur
     défile alors aussi en hauteur, et la molette ou le pavé y faisaient
     glisser les onglets vers le haut. La barre prend ces 5 px dans son
     padding, les rend par sa marge — la bande garde sa hauteur —, et ne
     défile plus verticalement. */
  overflow-y: hidden;
  padding-bottom: 5px;
  margin-bottom: -5px;
  white-space: nowrap;
  scrollbar-width: none;
}
.manchon-barre::-webkit-scrollbar { display: none; }
/* Un peu d'air au bout, pour que la dernière destination ne colle pas au
   bord ; sous le fondu, il lui faut de quoi en sortir entièrement. */
.manchon-barre::after { content: ""; flex: 0 0 4px; }
.manchon-deborde .manchon-barre::after { flex-basis: 64px; }

/* 🔴 LE CHEVRON EST UN BOUTON, PAS UN DÉCOR (Ludovic, 16/09 au soir). Posé en
   `pointer-events: none`, il laissait le clic passer au travers et atteindre
   le lien qui était dessous : on croyait faire défiler, on changeait de page.
   Il fait défiler des deux tiers de la largeur visible — un écran entier
   ferait perdre le fil, un pas trop court obligerait à insister — et
   s'efface, clic compris, une fois la barre au bout. */
.manchon-fondu {
  display: none;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 72px;
  padding-right: 4px;
  border: 0;
  cursor: pointer;
  color: inherit;
  /* ⚠ LE FONDU SE DÉGRADE VERS LE FOND DE SA BANDE, pas vers le blanc de la
     page : sur l'archive des entretiens, le manchon est sur fond sombre
     (22/09 au soir). Deux jetons et non un `transparent` : sur WebKit, un
     dégradé vers `transparent` passe par du noir transparent et laisse une
     frange grise. */
  background: linear-gradient(to right, var(--fond-manchon-nul), var(--fond-manchon) 55%);
  font-family: var(--police-meta);
  font-size: 22px;
  line-height: 1;
  transition: opacity var(--duree-survol);
}
.manchon-deborde .manchon-fondu { display: flex; }
/* Au bout, il s'efface ET cesse de prendre les clics : sans quoi un bouton à
   opacité zéro continuerait de couvrir la dernière destination. */
.manchon-au-bout .manchon-fondu:not(.manchon-fondu-debut) { opacity: 0; pointer-events: none; }

/* LE CHEVRON DU RETOUR (Ludovic, 24/09) : le même bouton, retourné — à
   gauche, le fondu vers la droite. Il n'apparaît qu'une fois la barre
   défilée, et s'efface revenu au début. */
.manchon-fondu-debut {
  right: auto;
  left: 0;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 4px;
  background: linear-gradient(to left, var(--fond-manchon-nul), var(--fond-manchon) 55%);
}
.manchon-au-debut .manchon-fondu-debut { opacity: 0; pointer-events: none; }

.manchon-onglet {
  flex: none;
  white-space: nowrap;
  color: var(--gris-texte-secondaire);
  /* ⚠ PAS DE GRAISSE EN PLUS : une destination s'écrit comme le reste du
     manchon, en 500 (Ludovic, 22/09 — « la même typographie, graisse et
     alignement »). Celle qu'on lit se distingue par sa couleur et son
     soulignement, pas par son poids : elles étaient en 700, et la barre des
     années pesait plus lourd que la bande d'un numéro juste à côté.
     Le soulignement de la destination courante PEND dans le padding du
     manchon : il ne fait pas grandir la bande, qui garde la hauteur de celle
     d'un numéro. */
  padding-bottom: 3px;
  margin-bottom: -5px;
  border-bottom: 2px solid transparent;
}
.manchon-onglet:hover { color: var(--gris-texte); }
.manchon-onglet[aria-current="page"] { color: var(--gris-texte); border-bottom-color: var(--filet-noir); }

/* Le tri, à droite du manchon : le dépliant des entretiens, sans son cadre —
   dans le manchon, un bouton encadré ferait une seconde boîte.
   `.archive-tri` pose une marge haute pour l'archive des entretiens, où le
   tri est sous le titre ; dans le manchon il n'en veut pas. */
.archive-tri.tri-manchon { margin-top: 0; flex: none; }
.tri-manchon > .tri-pli > .tri-resume {
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.tri-manchon .tri-choix { left: auto; right: 0; text-transform: none; letter-spacing: 0; }

/* ⚠ UN MANCHON SANS RIEN DEDANS N'EST PAS UNE BANDE VIDE, C'EST UN FILET
   (22/09 au soir). Les chroniques et l'archive des dossiers n'ont pas de
   sous-navigation : leur tête s'arrête sur le trait, à la place où les autres
   ouvrent leur bande. Une boîte de 20 px sans contenu se lirait comme un
   défaut de mise en page. */
/* ⚗ 23/09 — ET C'EST UN FILET SIMPLE (Ludovic : « Dossier et Chronique c'est
   pas une double ligne, mais une ligne simple ! »). Le double dit « une bande
   se ferme ici » ; sans bande, il n'y a rien à fermer. */
.manchon-nu { padding: 0; border-top: 0; border-bottom: 1px solid var(--filet-noir); }
.manchon-nu.manchon-sombre { border-bottom-color: var(--filet-sur-sombre-fort); }

/* --- LES ONGLETS — le manchon qui bascule deux parties de la page (24/09) ---
   Une page à rail (`.grille-rail`) montre son rail sous 992 px derrière des
   onglets : la leçon d'une masterclass (« Description » · « Leçons »), un
   entretien (« Description » · « Sommaire »). Ce ne sont pas des adresses mais
   des boutons, dans le manchon, à sa typographie.
   Le balisage : `data-onglets` sur ce qui contient tout, `.manchon-onglets`
   et ses boutons `data-onglet="x"`, les parties `data-panneau="x"`.
   `js/onglets.js` pose `onglets-actifs` sur le conteneur et `onglet-eteint`
   sur la partie qu'on ne lit pas. Sans script, rien ne se cache : les
   parties s'empilent, et le manchon ne se montre pas. Au-dessus de 992 px,
   rien ne change : le rail est à côté. */
.manchon-onglets { display: none; }
.manchon-onglets .manchon-barre { column-gap: 28px; }
.manchon-onglets .manchon-onglet {
  min-height: 28px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.manchon-onglets .manchon-onglet[aria-pressed="true"] { color: var(--gris-texte); border-bottom-color: var(--filet-noir); }
@media (max-width: 991px) {
  .onglets-actifs .manchon-onglets { display: flex; margin-top: 32px; }
  .onglets-actifs .onglet-eteint { display: none; }
}
@media (max-width: 767px) {
  .onglets-actifs .manchon-onglets { margin-top: 28px; }
}

/* --- LE CHEVRON D'UN DÉPLIANT — bas fermé ; la page le retourne ouvert -------
   Les modules d'une masterclass, le sommaire replié d'un entretien (24/09). */
.pli-chevron {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--gris-texte-secondaire);
  border-bottom: 1.5px solid var(--gris-texte-secondaire);
  transform: translateY(-2px) rotate(45deg);
}

/* --- UNE VIDÉO ET SON RAIL — huit colonnes, quatre (24/09) ------------------
   La vidéo et son texte à gauche, le rail à droite, alignés en haut : la
   leçon et la présentation d'une masterclass (le programme), la page d'un
   entretien (le sommaire). Sous 992 px, une seule colonne — le rail passe
   sous la vidéo, derrière les onglets quand la page en a. */
.grille-rail {
  display: grid;
  grid-template-columns: var(--grille-deux-tiers);
  column-gap: var(--gouttiere-rail);
  align-items: start;
}
.grille-rail > * { min-width: 0; }
@media (max-width: 991px) {
  .grille-rail { grid-template-columns: minmax(0, 1fr); }
}


/* --- LA TÊTE SUR FOND SOMBRE (Ludovic, 22/09 au soir) ----------------------
   L'archive des entretiens. Sur ce site, le fond sombre veut dire vidéo
   (socle) : une page qui n'a que des vidéos l'annonce dès son titre, et la
   bande porte toute la tête — ariane, nom, manchon — avant le dernier
   entretien en grand.

   🔴 RIEN N'EST REDESSINÉ, SEULES LES COULEURS CHANGENT, et elles changent
      ici, dans le composant. Une page qui redessinerait sa tête pour la
      passer en sombre aurait cessé d'appeler la brique.
   ------------------------------------------------------------------------ */
.sur-sombre .tete-liste-titre { color: var(--gris-fond); }

.ariane-sombre { color: var(--gris-meta-sur-sombre); }
.ariane-sombre a { color: var(--gris-clair-sur-sombre); }
.ariane-sombre .sep { color: var(--filet-sur-sombre); }

.manchon-sombre {
  --fond-manchon: var(--gris-fonce);
  --fond-manchon-nul: rgb(43 43 43 / 0);
  border-top-color: var(--filet-sur-sombre-fort);
  border-bottom-color: var(--filet-sur-sombre-fort);
  color: var(--gris-meta-sur-sombre);
}
.manchon-sombre .manchon-onglet { color: var(--gris-meta-sur-sombre); }
.manchon-sombre .manchon-onglet:hover { color: var(--gris-fond); }
.manchon-sombre .manchon-onglet[aria-current="page"] {
  color: var(--gris-fond);
  border-bottom-color: var(--gris-fond);
}
.manchon-sombre .tri-resume { color: var(--gris-clair-sur-sombre); }

/* =========================================================================
   GRILLE DE CARTES (les entretiens)
   ========================================================================= */
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px var(--espace-interne); }

/* ⚗ 09/09 — TROIS COLONNES, pour l'archive vidéo, et c'est une divergence
   voulue avec les autres listes. Ce qu'on parcourt là-bas est la VIGNETTE :
   elle porte une durée à lire, et un 16/9 sur un quart de page la réduit à
   une miniature. La planche E la dessine en trois (01/09). */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px var(--espace-interne); }

/* --- LA CARTE — la carte « g » (Ludovic, 15/09) ----------------------------
   L'image en 3:2 · la ligne de service · le titre · le chapô · les noms. Les
   valeurs sont dans variables.css, les polices sont les nôtres. */
.carte-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  margin-top: 14px;
  font-family: var(--police-meta);
  font-size: var(--taille-service-carte);
  line-height: 1.3;
  color: var(--gris-texte);
}
.service-rubrique { display: inline-flex; align-items: center; gap: 7px; }
.service-format   { color: var(--couleur-format-carte); }
.service-sep      { color: var(--couleur-sep-carte); }
.service-acces    { display: inline-flex; align-items: center; gap: 4px; }
.service-acces svg { width: var(--taille-cadenas); height: var(--taille-cadenas); }
.service-libre    { color: var(--couleur-libre); font-weight: 500; }
.service-reserve  { color: var(--couleur-format-carte); }
a.service-rubrique:hover,
a.service-format:hover { text-decoration: underline; }

/* La pastille de rubrique : une couleur par rubrique, toutes de même clarté.
   Une rubrique sans couleur déclarée garde le gris des boîtes. */
.pastille {
  flex: none;
  width: var(--taille-pastille);
  height: var(--taille-pastille);
  border-radius: 50%;
  background: var(--rubrique-defaut);
}
.pastille-geopolitique            { background: var(--rubrique-geopolitique); }
.pastille-economie                { background: var(--rubrique-economie); }
.pastille-culture                 { background: var(--rubrique-culture); }
.pastille-philosophie             { background: var(--rubrique-philosophie); }
.pastille-histoire                { background: var(--rubrique-histoire); }
.pastille-sante                   { background: var(--rubrique-sante); }
.pastille-sciences-et-technologies { background: var(--rubrique-sciences); }
.pastille-societe                 { background: var(--rubrique-societe); }

.carte-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-titre-grille);
  line-height: var(--interligne-titre-grille);
  margin-top: 10px;
  /* `pretty` et non `balance` (Ludovic, 15/09) : `balance` égalise les
     lignes et laisse un grand blanc à droite de la première ; `pretty`
     remplit la ligne et n'évite que le mot seul sur la dernière. */
  text-wrap: pretty;
}
.carte-extrait {
  font-family: var(--police-meta);
  font-size: var(--taille-extrait-carte);
  line-height: var(--interligne-extrait-carte);
  color: var(--couleur-extrait-carte);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lignes-chapo-liste);
  line-clamp: var(--lignes-chapo-liste);
  overflow: hidden;
}
.carte-auteur {
  font-family: var(--police-meta);
  font-size: var(--taille-auteur-carte);
  font-weight: 500;
  color: var(--couleur-auteur-carte);
  margin-top: 10px;
}
.carte-auteur .service-sep { margin: 0 3px; font-weight: 400; }
.carte-date { font-weight: 400; color: var(--couleur-format-carte); }

/* La brève n'a pas d'image : un filet noir tient la carte. */
.carte-breve { border-top: 1px solid var(--gris-texte); }

/* 🔴 LE DESSIN SE MONTRE ENTIER, SUR RIEN (Ludovic, 22/09 : « enlève le fond
   sur les dessins de presse »). Il était posé sur un crème (#f4f1ea) censé
   dire qu'on regarde un dessin et non une photo, et rattraper un trait sur du
   blanc ; à l'écran, il se voyait surtout en bandes colorées sur les côtés,
   au milieu de cartes blanches. La recherche s'en était déjà défaite le
   16/09 — c'était la seule, et c'est ce qui rendait la règle bancale. Jamais
   recadré, en revanche : ça, c'est la règle du dessin.

   ⚠ ET LA BOÎTE GRISE DU FIL DE FER SE RETIRE AVEC LUI. Le crème la
     couvrait ; retiré seul, c'est elle qui se voyait — en bandes grises sur
     les côtés d'un dessin qui ne remplit pas sa case (Ludovic, 22/09). Elle
     ne s'efface QUE lorsqu'il y a une image ; un dessin sans image n'est
     pas servi (antithese_dessins_sans_image). */
.carte-dessin-de-presse .image > img { object-fit: contain; }
.carte-dessin-de-presse .image:has(img),
.dessin-image:has(img) { background: none; }

/* 🔴 UN DESSIN PREND TOUTE LA HAUTEUR QUE SA RANGÉE LUI LAISSE (Ludovic,
   16/09). Il n'a ni chapô ni presque de titre : dans une grille, sa case se
   terminait bien avant celles d'à côté, et son image — posée `contain` sur
   son fond — restait petite entre deux bandes. La carte devient une pile dont
   l'image est l'élément élastique : elle garde son 3:2 au minimum, puis
   grandit de tout ce qui reste. Le dessin est plus grand, et sa signature
   descend à la hauteur de celles de ses voisines.
   ⚠ Sans effet hors d'une rangée qui étire ses cases, et écarté quand la
     carte est déjà en ligne — là, l'image est à gauche, pas au-dessus. */
.carte-dessin-de-presse:not(.carte-ligne, .carte-ligne-tel) { display: flex; flex-direction: column; }
.carte-dessin-de-presse:not(.carte-ligne, .carte-ligne-tel) > a:first-child {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.carte-dessin-de-presse:not(.carte-ligne, .carte-ligne-tel) > a:first-child > .image { flex: 1 1 auto; }

/* Une vidéo dans une liste mêlée : sa vignette 16/9 tient entière dans la
   boîte de la liste, entre deux bandes sombres — jamais recadrée (15/09). */
.image-bandes { background: var(--fond-video-carte); }
.image-bandes > img { object-fit: contain; }

/* Sur une bande sombre (les entretiens de l'accueil, les vidéos d'une
   édition, la une de l'archive des entretiens) : les mêmes distinctions, les
   valeurs basculent. */
.bandeau-entretiens .carte-service,
.bandeau-entretiens .carte-auteur,
.sur-sombre .carte-service,
.sur-sombre .carte-auteur           { color: var(--gris-clair-sur-sombre); }
.bandeau-entretiens .service-format,
.bandeau-entretiens .service-reserve,
.bandeau-entretiens .carte-extrait,
.bandeau-entretiens .carte-date,
.sur-sombre .service-format,
.sur-sombre .service-reserve,
.sur-sombre .carte-extrait,
.sur-sombre .carte-date             { color: var(--gris-meta-sur-sombre); }
.bandeau-entretiens .service-sep,
.sur-sombre .service-sep            { color: var(--filet-sur-sombre); }
.bandeau-entretiens .service-libre,
.sur-sombre .service-libre          { color: var(--couleur-libre-sur-sombre); }
.bandeau-entretiens .carte-breve    { border-top-color: var(--gris-clair-sur-sombre); }

/* LA CARTE EN LIGNE — l'image à gauche, le texte à droite (la frise d'un
   dossier, 15/09). Les mêmes éléments dans le même ordre, seule la
   disposition change. La dernière rangée prend le reste : une image plus
   haute que le texte n'écarte pas les lignes entre elles. */
.carte-ligne {
  display: grid;
  grid-template-columns: var(--largeur-vignette-ligne) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--gouttiere-carte-ligne);
  align-items: start;
}
.carte-ligne > a:first-child { grid-column: 1; grid-row: 1 / -1; }
.carte-ligne > :not(a:first-child) { grid-column: 2; }
.carte-ligne .carte-service { margin-top: 0; }
.carte-ligne .carte-extrait {
  -webkit-line-clamp: var(--lignes-chapo-ligne);
  line-clamp: var(--lignes-chapo-ligne);
}

/* LA MÊME CARTE, AU TÉLÉPHONE SEULEMENT (`.carte-ligne-tel`, Ludovic 16/09).
   Empilée, une carte prend toute la largeur de l'écran et pèse autant que la
   une : c'est vrai des deux contenus d'à côté de l'accueil comme des articles
   2 à 7 d'une édition. Au téléphone, ils passent donc en ligne — l'image à
   gauche, le titre, la ligne de service, le chapô et les noms à droite — et
   la une reste seule en grand. Au-dessus de 768 px, la classe ne fait rien.
   ⚠ CES DEUX BLOCS DISENT LA MÊME CHOSE : ce qui change dans l'un change
     dans l'autre. */
@media (max-width: 767px) {
  .carte-ligne-tel {
    display: grid;
    grid-template-columns: var(--largeur-vignette-ligne-tel) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--gouttiere-carte-ligne);
    align-items: start;
  }
  .carte-ligne-tel > a:first-child { grid-column: 1; grid-row: 1 / -1; }
  .carte-ligne-tel > :not(a:first-child) { grid-column: 2; }
  .carte-ligne-tel .carte-service { margin-top: 0; }
  .carte-ligne-tel .carte-titre { font-size: var(--taille-titre-ligne-tel); line-height: 1.22; margin-top: 8px; }
  .carte-ligne-tel .carte-extrait {
    font-size: var(--taille-chapo-ligne-tel);
    -webkit-line-clamp: var(--lignes-chapo-ligne);
    line-clamp: var(--lignes-chapo-ligne);
  }
  .carte-ligne-tel .carte-auteur { margin-top: 6px; }
}

/* --- LA LIGNE DE LISTE — un titre, parfois son âge, un filet clair entre
   deux (A, 15-16/09) ---------------------------------------------------------
   Les brèves de l'accueil et d'une édition, les chroniques et les dossiers de
   l'accueil. Jamais d'image. Le titre du bloc et « Tous les … → » restent à
   l'appelant. `.liste-lignes-filet` : un filet aussi avant la première ligne
   (sous une signature, pas sous une barre). S'appelait `.breve` le 15/09. */
.liste-lignes { list-style: none; margin: 2px 0 0; padding: 0; }
.ligne { padding: 16px 0; }
.ligne + .ligne,
.liste-lignes-filet > .ligne:first-child { border-top: 1px solid var(--filet-clair); }
.ligne-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-ligne);
  font-weight: 700;
  line-height: 1.32;
  text-wrap: pretty;
}
.ligne-meta {
  font-family: var(--police-meta);
  font-size: var(--taille-service-carte);
  color: var(--couleur-format-carte);
  margin-top: 6px;
}
.ligne-chronique .ligne-titre { font-size: var(--taille-ligne-chronique); line-height: 1.3; }
/* Le dossier : le nom seul (30/09 : le compte est parti). */
.liste-dossiers .ligne { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--filet-clair); }
.ligne-dossier > a { display: block; }
.ligne-dossier .ligne-titre { font-size: var(--taille-ligne-dossier); }

/* --- LA RANGÉE À FILETS (R2, 15/09 ; partagée le 16/09) ----------------------
   Une grille, et chaque case dessine ses filets : ::before le vertical, à sa
   gauche, sur sa hauteur ; ::after l'horizontal, au milieu de l'écart avec la
   rangée du dessus, sur sa largeur et la moitié des gouttières. La même
   rangée passe de 4 à 2 colonnes, puis à 1 (responsive.css). La suite et les
   vidéos d'une édition, les enquêtes et les entretiens de l'accueil. */
.rangee {
  display: grid;
  column-gap: var(--gouttiere-rangee);
  row-gap: calc(2 * var(--espace-filet-clair) + 1px);
}
.rangee-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rangee-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rangee-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rangee > * { position: relative; min-width: 0; }
.rangee > *::before,
.rangee > *::after {
  position: absolute;
  background: var(--filet-clair);
}
.rangee > *::before {
  top: 0;
  bottom: 0;
  width: 1px;
  left: calc(var(--gouttiere-rangee) / -2);
}
.rangee > *::after {
  height: 1px;
  top: calc(-1px - var(--espace-filet-clair));
  left: calc(var(--gouttiere-rangee) / -2);
  right: calc(var(--gouttiere-rangee) / -2);
}
.rangee-4 > :not(:nth-child(4n + 1))::before { content: ""; }
.rangee-4 > :nth-child(n + 5)::after         { content: ""; }
.rangee-4 > :nth-child(4n + 1)::after        { left: 0; }
.rangee-4 > :nth-child(4n)::after            { right: 0; }
.rangee-3 > :not(:nth-child(3n + 1))::before { content: ""; }
.rangee-3 > :nth-child(n + 4)::after         { content: ""; }
.rangee-3 > :nth-child(3n + 1)::after        { left: 0; }
.rangee-3 > :nth-child(3n)::after            { right: 0; }
.rangee-2 > :not(:nth-child(2n + 1))::before { content: ""; }
.rangee-2 > :nth-child(n + 3)::after         { content: ""; }
.rangee-2 > :nth-child(2n + 1)::after        { left: 0; }
.rangee-2 > :nth-child(2n)::after            { right: 0; }

/* --- LE CADRE — le média demande quelque chose au lecteur (R2 et A) ----------
   Un filet noir de 1 px, sans fond ; la case de l'ACTION, sur fond
   `--fond-action`, derrière un filet clair. En colonnes (la question d'une
   édition, la newsletter) ou empilé (la question de l'accueil ; tout cadre
   au téléphone). ⚠ `.mur-encart`, le mur d'un article, est l'ancien cadre
   gris : il attend la reprise de la page de lecture. */
.cadre { border: 1px solid var(--filet-noir); }
.cadre-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cadre-colonnes > * { min-width: 0; }
.cadre-texte { padding: 32px 36px 36px; }
.cadre-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  background: var(--fond-action);
  border-left: 1px solid var(--filet-clair);
}
.cadre-empile .cadre-texte  { padding: 24px 26px 0; }
.cadre-empile .cadre-action { padding: 18px 26px 26px; gap: 10px; background: transparent; border-left: 0; }

/* LA QUESTION — dans son cadre : le libellé et son icône, la question, son
   chapô ; l'action : « Donner mon avis », et « Réservé aux abonnés » dessous
   (template-parts/question.php). */
.question-surtitre { display: flex; align-items: center; gap: 10px; }
.question-surtitre svg { flex: none; }
.question-titre {
  font-size: var(--taille-titre-question);
  line-height: 1.14;
  margin-top: 14px;
  text-wrap: balance;
}
.question-chapo {
  font-family: var(--police-texte);
  font-size: var(--taille-chapo-question);
  line-height: 1.5;
  color: var(--couleur-extrait-carte);
  margin-top: 10px;
}
.question-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--police-meta);
  font-size: 13px;
  color: var(--couleur-extrait-carte);
}
.cadre-empile .question-titre { font-size: var(--taille-titre-question-empilee); line-height: 1.18; margin-top: 12px; }
.cadre-empile .question-chapo { font-size: 16px; margin-top: 8px; }

/* --- LE DESSIN ENCADRÉ — entier, dans un filet clair (R2 et A) ---------------
   Le dessin d'une édition, l'édition de la semaine sur l'accueil. La boîte
   `.dessin-image` suit le format réel de l'image (edition.css). */
.cadre-dessin { display: block; border: 1px solid var(--filet-clair); }
.cadre-dessin .dessin-image { border-radius: 0; }

/* --- L'ENCART SUR PAPIER (A) — l'abonnement -------------------------------- */
.encart-papier { background: var(--fond-papier); padding: 40px 48px; }

.centre { text-align: center; }


/* =========================================================================
   LES REELS — étagère horizontale défilante (et non un carrousel automatique)
   Le conteneur défile nativement : doigt, molette, trackpad, barre d'espace.
   Les deux flèches ne sont qu'un raccourci posé par-dessus ce défilement.
   ========================================================================= */
/* v8 — l'accroche « Les formats courts, à la verticale » a été retirée :
   le titre de section la dit déjà, la répéter ne servait à rien. */
.reels-cadre { position: relative; }

.etagere-reels {
  display: flex;
  gap: var(--espace-interne);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;  /* inertie tactile iOS */
  scrollbar-width: none;              /* Firefox : barre masquée */
  -ms-overflow-style: none;           /* anciens Edge */
  padding-bottom: 2px;
}
.etagere-reels::-webkit-scrollbar { display: none; } /* WebKit : barre masquée */

.carte-reel {
  flex: 0 0 var(--largeur-reel);
  scroll-snap-align: start;
}
.r9-16 { aspect-ratio: 9 / 16; }
.carte-reel .image { background: var(--gris-noir); }
/* Le titre d'un réel : PT Serif, quatre lignes au plus (A). Une édition le
   ramène à 14 px et trois lignes (edition.css). */
.titre-reel {
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* =========================================================================
   LA SURCOUCHE DE LECTURE D'UN FORMAT COURT

   Un `dialog` natif : le fond, le piège à focus, Échap et le retour du focus
   sont fournis par le navigateur. Il est VIDE au repos — l'iframe est posée
   au clic et retirée à la fermeture, c'est ce qui arrête la lecture.
   ========================================================================= */

.surcouche-reel {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

/* Le fond est FLOUTÉ et pas seulement assombri. Assombrir laisse lire la page
   derrière, donc laisse le regard y retourner ; flouter la met hors d'atteinte
   sans la faire disparaître, et on garde le sentiment d'être resté sur place. */
.surcouche-reel::backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Sans `backdrop-filter`, on retombe sur un fond simplement plus opaque —
   le contraste est tenu dans les deux cas. */
@supports not (backdrop-filter: blur(2px)) {
  .surcouche-reel::backdrop { background: rgba(0, 0, 0, .88); }
}

.surcouche-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-interne);
  position: relative;
}

.surcouche-fleche {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 40px;
  line-height: 1;
  padding: 8px 12px;
  color: var(--gris-clair-sur-sombre);
  transition: opacity .15s;
}
.surcouche-fleche:hover { opacity: .7; }

/* Éteinte plutôt que retirée : une flèche qui disparaît fait sauter la
   composition d'un cran à chaque extrémité. */
.surcouche-fleche[disabled] {
  opacity: .22;
  cursor: default;
}

/* LE TITRE EST LE LIEN vers la page du format court, et la flèche est ce qui
   le dit : sans elle, un titre sous une vidéo ressemble à une légende. */
.surcouche-titre {
  margin-top: 14px;
  text-align: center;
  font-size: var(--taille-meta);
  color: var(--gris-clair-sur-sombre);
  /* Le titre ne dépasse jamais la largeur du lecteur : au-delà, la ligne
     s'étirerait sur toute la fenêtre et ne se rattacherait plus à la vidéo. */
  max-width: min(92vw, calc(78vh * 9 / 16), 506px);
  margin-left: auto;
  margin-right: auto;
}

.surcouche-lien {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 2px;
  transition: border-color .15s;
}
.surcouche-lien:hover,
.surcouche-lien:focus-visible { border-bottom-color: currentColor; }

/* La flèche est collée au titre par une espace insécable de mise en page :
   elle ne doit jamais se retrouver seule sur la ligne suivante. */
.surcouche-fleche-lien {
  display: inline-block;
  margin-left: .4em;
  transition: transform .15s;
}
.surcouche-lien:hover .surcouche-fleche-lien,
.surcouche-lien:focus-visible .surcouche-fleche-lien { transform: translateX(3px); }

/* « Fermer ✕ » est calé sur le HAUT DU LECTEUR, dans la scène, et non dans
   une barre au-dessus : une barre empile deux étages et repousse la vidéo
   vers le bas. Le mot reste avec la croix — une croix seule se devine, elle
   ne se lit pas, et le public d'Antithèse n'a pas à deviner. */
.surcouche-fermer {
  position: absolute;
  /* ⚠ EN NÉGATIF, ET C'EST LE RÉGLAGE À COMPRENDRE. Posé à 0/0, le bouton
     touchait le coin du lecteur : il se lisait comme une commande DE la
     vidéo, et venait se poser sur celles de YouTube, qui occupent ce coin.
     Le décalage l'écarte en diagonale sans l'EMPILER au-dessus — il reste au
     niveau du haut de la vidéo, ce qui était la demande d'origine.
     `overflow: visible` sur le dialog est ce qui autorise ce débordement. */
  top: -8px;
  right: -22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--taille-meta);
  line-height: 1;
  padding: 4px 2px;
  color: var(--gris-clair-sur-sombre);
  transition: opacity .15s;
}
.surcouche-fermer:hover { opacity: .7; }
.surcouche-fermer span { font-size: 22px; line-height: 1; }

/* Le cadre tient le rapport 9/16, et c'est la LARGEUR qui est pilotée — pas
   la hauteur. Fixer la hauteur puis borner la largeur donne deux contraintes
   qui se contredisent sur mobile : à 375 px de large, 78vh de haut réclame
   356 px alors que 92vw n'en autorise que 345, et le rapport de forme casse.
   En calculant la largeur à partir de la hauteur disponible, une seule règle
   décide, et le cadre ne déborde jamais d'aucun côté. */
.surcouche-cadre {
  aspect-ratio: 9 / 16;
  width: min(92vw, calc(78vh * 9 / 16), 506px);
  background: #000;
  border-radius: var(--rayon);
  overflow: hidden;
}
.surcouche-cadre iframe { width: 100%; height: 100%; display: block; border: 0; }


/* Les deux flèches de l'étagère : deux carrés au filet, à droite de la barre
   du réel en bref, après le lien (30/09 ; dans la colonne du titre avant).
   Elles s'éteignent au bout de l'étagère. La tablette et le téléphone les
   cachent : l'étagère défile au doigt.

   ⚠ CARRÉES, ET PAS RONDES (Ludovic, 16/09). Elles étaient les deux seuls
     ronds du site : partout ailleurs — les boutons, les cadres, les images,
     les filets — le dessin est à angle droit, et deux pastilles rondes au
     milieu de ça se lisaient comme un emprunt. Le filet et le survol ne
     changent pas ; seul l'angle. Le portrait d'un chroniqueur reste rond :
     c'est un visage, pas une commande. */
.fleche-reel {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--gris-texte);
  border: 1px solid rgba(26, 26, 26, .3);
  border-radius: 0;
  cursor: pointer;
}
.fleche-reel:hover { border-color: var(--gris-texte); }
.fleche-reel:disabled { color: var(--couleur-sep-carte); border-color: var(--filet-clair); cursor: default; }


/* LE MUR D'UN ARTICLE — l'ancien cadre gris du fil de fer (detail.css). Il
   attend la reprise de la page de lecture pour devenir un `.cadre`. */
.mur-encart {
  background: var(--gris-fond-clair);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  padding: var(--padding-encart);
}


/* --- LA TÊTE D'UNE LISTE — l'identité entre l'ariane et le manchon ----------
   Le titre d'un numéro, celui de l'archive des éditions (16/09 au soir) et,
   depuis le 22/09, LE NOM D'UNE RUBRIQUE. Les trois pages ont la même tête, et
   c'est ce qui rend le passage de l'une à l'autre sans secousse.

   🔴 LA ZONE D'IDENTITÉ A UNE HAUTEUR DÉCLARÉE (`--hauteur-identite-liste`),
      et c'est elle qui fait tomber le manchon au même pixel partout. Ce qui
      s'y met s'y centre : le logotype la prend en hauteur et en déduit sa
      largeur (il faisait l'inverse jusqu'au 22/09, et la hauteur suivait) ;
      le nom d'une rubrique s'y centre aussi, et déborde un peu de sa boîte —
      l'air au-dessus et en dessous est là pour ça.
   ⚠ Sans cette zone, un nom de rubrique de 84 px poussait le manchon 16 px
     plus bas qu'un logo de 68 px : les deux pages ne se répondaient plus
     (mesuré le 22/09). */
.tete-liste {
  padding-top: var(--tete-liste-haut);
  /* La marge du bas était écrite deux fois, sur `.editions-tete` et sur
     `.rubrique-tete` (22/09 au matin). À huit pages, elle appartient à la
     brique. */
  margin-bottom: var(--espace-filet-noir);
}

.tete-liste-identite {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hauteur-identite-liste);
}

.tete-liste .manchon { margin-top: var(--tete-liste-bas); }

/* FERRÉ À GAUCHE SOUS 992 px (Ludovic, 30/09) : le nom ou le logotype
   s'aligne sur le manchon, la une et les cartes, qui partent tous du bord
   gauche. Centré au bureau. */
@media (max-width: 991px) {
  .tete-liste-identite,
  .tete-liste-titre { justify-content: flex-start; }
}

/* LE NOM DE LA PAGE — il se centre dans la zone d'identité comme le logotype
   d'un numéro, et déborde un peu de sa boîte : l'air au-dessus et en dessous
   est là pour ça. Le nom d'une rubrique (22/09), puis celui d'un format
   (22/09 au soir) : « Entretiens », « Enquêtes », « Courrier des lecteurs ».

   ⚠ IL SE COMPOSE PLUS PETIT QUAND IL EST LONG, et ne sort jamais de l'écran.
     La brique passe son nombre de signes (`--signes-titre`) ; la largeur
     disponible est celle du conteneur (1280 au plus, moins ses deux paddings
     de 24), moins ce que la pastille réserve. Le 0.55em est la largeur
     moyenne mesurée d'un signe de PT Serif 700 sur les huit rubriques
     (22/09) : « Géopolitique » y tient 0,548, « Sciences et technologies »
     0,487 — on prend la plus large, donc on ne déborde jamais.
     `min()` ne fait rien tant qu'il y a la place. */
.tete-liste-titre {
  --reserve-titre: 0px;
  /* ⚠ LA FAMILLE ET LA FORCE SONT ÉCRITES ICI, et le titre ne porte plus
     `.archive-titre` (22/09 au soir). Les deux classes ont la même
     spécificité, et `composants.css` se charge AVANT `archive.css` : le
     38 px d'un titre d'archive passait devant les 84 px de celui-ci, et le
     nom du format se composait deux fois trop petit. */
  font-family: var(--police-titre-page);
  font-weight: var(--graisse-titre-page);
  text-transform: var(--casse-titre-page);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  font-size: min(
    var(--taille-titre-liste),
    calc((min(100vw, var(--largeur-conteneur)) - 48px - var(--reserve-titre)) / (var(--signes-titre, 12) * 0.55))
  );
}

/* La pastille d'une rubrique est celle de la carte, à la taille de la page :
   `.pastille` lit `--taille-pastille`, on la redéfinit, on n'en dessine pas
   une seconde. Ce qu'elle occupe — elle et sa gouttière — sort de la largeur
   disponible pour le nom. */
.titre-a-pastille {
  --taille-pastille: var(--taille-pastille-rubrique);
  --reserve-titre: calc(var(--taille-pastille-rubrique) + 20px);
}

/* Le logotype du thème (le fichier fait 379 × 37) ; il s'écrivait en PT Serif
   jusqu'au 16/09. Le `h1` n'est plus qu'une boîte. */
.logo-bplt {
  font-size: 0;      /* pas d'espace fantôme sous l'image */
  line-height: 0;
}
.logo-bplt img {
  display: block;
  height: var(--hauteur-identite-liste);
  width: auto;
  max-width: 100%;
}


/* --- LA LIGNE D'UNE ÉDITION (16/09 au soir) --------------------------------
   La même à deux endroits : l'archive des éditions et « Les éditions
   précédentes » au bas d'un numéro. À gauche l'identité — numéro, date
   courte, « Ouvrir l'édition », PDF · ePub —, à droite les titres du numéro
   enchaînés, coupés à trois lignes, et le « + » qui déplie le sommaire.

   ⚠ SEULS LES TITRES, LE SIGNE ET LE SOMMAIRE SONT DANS LE DÉPLIANT. La
     colonne d'identité est à côté, donc lisible ligne fermée : c'est ce que
     Ludovic a gardé du bloc « éditions précédentes ». Un lien dans un
     `<summary>` serait un lien dans un bouton.
   ------------------------------------------------------------------------ */
.liste-editions { border-top: 1px solid var(--filet-clair); }
/* Sur l'archive, la liste suit le manchon : pas de filet clair sous le double
   noir, et la première ligne tombe à l'espace de la tête (23/09 au soir). */
.tete-liste ~ .liste-editions { border-top: 0; }
.tete-liste ~ .liste-editions > .ligne-edition:first-child { padding-top: 0; }

.ligne-edition {
  position: relative;   /* le signe s'y accroche sous 992 px */
  display: grid;
  grid-template-columns: var(--largeur-numero-edition) minmax(0, 1fr);
  gap: var(--gouttiere-sommaire);
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--filet-clair);
}

.ligne-edition-identite { display: flex; flex-direction: column; align-items: flex-start; }
.ligne-edition-numero { display: flex; align-items: baseline; gap: 12px; }
.numero-edition {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-numero-edition);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* « ven. 11 septembre » : WordPress rend « Ven. » en tête de phrase, la
   planche l'écrit en bas de casse — c'est une mention, pas un début. */
.date-edition {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  text-transform: lowercase;
  white-space: nowrap;
}
.ligne-edition-ouvrir {
  font-family: var(--police-meta);
  font-size: var(--taille-lien-suite);
  font-weight: 600;
  margin-top: 16px;
}
.ligne-edition-ouvrir:hover { text-decoration: underline; text-underline-offset: 3px; }
/* PDF · ePub NE SE MONTRENT QU'UNE FOIS LA LIGNE DÉPLIÉE (Ludovic, 16/09 au
   soir) : ce sont des pièces jointes, pas une identité. « Ouvrir l'édition »,
   lui, reste lisible ligne fermée. Le `:has()` va chercher l'état du
   dépliant, qui est le FRÈRE de la colonne d'identité et non son parent —
   c'est le prix de la structure, et il est modeste. */
.ligne-edition-fichiers { display: none; }
.ligne-edition:has(.ligne-edition-pli[open]) .ligne-edition-fichiers {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.ligne-edition-fichiers a { border-bottom: 1px solid var(--filet-clair); padding-bottom: 1px; }

/* Le dépliant : les titres et le signe sur une rangée, le sommaire dessous. */
.ligne-edition-sommet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largeur-pli);
  gap: var(--gouttiere-sommaire);
  align-items: start;
  cursor: pointer;
  list-style: none;
}
.ligne-edition-sommet::-webkit-details-marker { display: none; }
.ligne-edition-sommet:hover .ligne-edition-resume { text-decoration: underline; text-underline-offset: 3px; }
.ligne-edition-sommet:focus-visible { outline: 2px solid var(--gris-texte); outline-offset: 4px; }

/* TOUS LES TITRES, COUPÉS À TROIS LIGNES (Ludovic, 16/09 au soir) : c'est la
   mise en page qui coupe, et le navigateur pose lui-même le « … ». Un numéro
   dont les titres tiennent en deux lignes n'en porte donc pas. */
.ligne-edition-resume {
  font-family: var(--police-titre);
  font-size: var(--taille-resume-edition);
  line-height: 1.5;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lignes-resume-edition);
  line-clamp: var(--lignes-resume-edition);
  overflow: hidden;
}
.ligne-edition-pli[open] .ligne-edition-resume { display: none; }

/* Le « + » puis le « − » : deux traits, le vertical disparaît à l'ouverture.
   ⚠ SA COLONNE EST ÉCRITE, elle ne se déduit pas : déplié, le résumé passe
     en `display: none` et sort de la grille ; le signe, placé tout seul,
     retomberait dans la première colonne.
   ⚠ SA BOÎTE A LA HAUTEUR DU NUMÉRO, pas la largeur de sa colonne : carrée,
     elle posait le trait 5 px sous le milieu du numéro — invisible sur le
     « + », qui a de la matière en hauteur, criant sur le « − », qui est un
     trait seul. Ce n'est pas une cible tactile : tout le résumé est cliquable. */
.pli-icone {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: var(--largeur-pli);
  height: var(--taille-numero-edition);
  justify-self: end;
  color: var(--gris-texte-secondaire);
}
.pli-icone::before,
.pli-icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  width: 22px; height: 1.4px;
  margin: -0.7px 0 0 -11px;
}
.pli-icone::after { width: 1.4px; height: 22px; margin: -11px 0 0 -0.7px; }
.ligne-edition-pli[open] .pli-icone::after { display: none; }

/* LE SOMMAIRE — la carte « g » dépouillée, sur deux colonnes : pastille,
   rubrique · format · accès, titre en sérif, les noms. Sans image et sans
   chapô (C2) : dans une liste de sommaires, l'image n'apprend rien et casse
   le rythme. Un filet clair entre deux lignes, et PAS de filet au-dessus de
   la première ligne de la grille — donc au-dessus des deux premières cases,
   qui la composent. */
.ligne-edition-sommaire {
  display: grid;
  grid-template-columns: repeat(var(--colonnes-sommaire), minmax(0, 1fr));
  column-gap: var(--gouttiere-sommaire);
  list-style: none;
  margin: 16px 0 6px;
  padding: 0;
}
.ligne-edition-sommaire > li { padding: 16px 0; border-top: 1px solid var(--filet-clair); }
.ligne-edition-sommaire > li:nth-child(-n + 2) { border-top: 0; padding-top: 0; }

.carte-sommaire .carte-service { margin-top: 0; font-size: var(--taille-meta); }
.carte-sommaire .carte-titre {
  font-size: var(--taille-titre-sommaire);
  line-height: 1.26;
  margin-top: 7px;
}
.carte-sommaire .carte-auteur { margin-top: 8px; }


/* --- RÉSERVÉ AUX ABONNÉS : LA BULLE (planches A, 30/09) ---------------------
   Ce qui s'ouvre au clic sur le PDF ou l'ePub d'un numéro, ou sur l'écoute
   d'un article fermé, pour qui n'est pas abonné. Au-dessus du téléphone,
   une bulle de 400 px accrochée sous ce qu'on a cliqué, une pointe vers lui,
   la page lisible autour — `js/reserve.js` la place. Au téléphone, une
   feuille qui monte du bas de l'écran, la page voilée derrière. Une seule par
   page (`template-parts/reserve.php`), remplie par la porte cliquée. */
.reserve {
  position: absolute;
  z-index: 60;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 26px 30px 28px;
  background: var(--c-blanc);
  color: var(--gris-texte);
  border: 1px solid var(--filet-noir);
  box-shadow: 0 18px 40px rgba(17, 17, 17, .16);
  font-family: var(--police-meta);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
.reserve[hidden],
.reserve-voile[hidden] { display: none; }
.reserve:focus { outline: none; }
.reserve-pointe {
  position: absolute;
  top: -8px;
  left: var(--pointe, 28px);
  width: 14px;
  height: 14px;
  background: var(--c-blanc);
  border-top: 1px solid var(--filet-noir);
  border-left: 1px solid var(--filet-noir);
  transform: rotate(45deg);
}
.reserve-poignee { display: none; }
.reserve-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gris-texte);
  cursor: pointer;
}
.reserve-lib {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reserve-lib svg { flex: none; }
.reserve-titre {
  margin-top: 12px;
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.reserve-texte {
  margin-top: 10px;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--couleur-texte-une);
}
.reserve-actions { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.reserve-connexion { font-size: 14px; color: var(--couleur-extrait-carte); }
.reserve-connexion span {
  color: var(--gris-texte);
  text-decoration: underline;
  text-decoration-color: var(--couleur-sep-carte);
  text-underline-offset: 3px;
}
/* Ce qu'on a cliqué reste marqué tant que la bulle est ouverte. */
a.reserve-actif:not(.ecoute-ferme) { border-bottom: 2px solid var(--filet-noir); }

@media (max-width: 767px) {
  .reserve-voile {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(17, 17, 17, .55);
  }
  .reserve {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
    padding: 12px 24px 24px;
    border: 0;
    border-top: 1px solid var(--filet-noir);
    box-shadow: 0 -12px 32px rgba(17, 17, 17, .18);
  }
  .reserve-pointe { display: none; }
  .reserve-poignee {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 18px;
    background: #cfcfcf;
    border-radius: 2px;
  }
  .reserve-fermer { top: 8px; right: 8px; width: 44px; height: 44px; }
  .reserve-titre { font-size: 24px; line-height: 1.18; }
  .reserve-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .reserve-connexion { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px; }
}