/* =========================================================================
   LA PAGE D'UNE ÉDITION — direction R2, « le journal » (Cheminement #45 et
   #51), écrite le 15/09. Elle remplace E.

   Fond blanc, carte « g », et des filets à la place des fonds : un double
   filet ouvre la semaine, un filet noir chaque bloc titré, un filet gris
   clair sépare deux cartes. Un filet vertical court sur toute la hauteur de
   sa rangée et s'arrête avant le filet horizontal suivant, sans le croiser.
   Il se trace en pseudo-élément dans la gouttière, jamais en border-left.

   Les valeurs sont dans variables.css (section « La page d'une édition ») ;
   la tablette et le téléphone sont dans responsive.css. Depuis le 16/09, ce
   qu'elle partage avec l'accueil — les titres de bloc, la rangée à filets, le
   cadre de la question, les boutons, le lien « Toutes les … », la ligne de
   liste — vit dans composants.css.
   ========================================================================= */

.page-edition { padding-bottom: var(--espace-bloc); }


/* --- 1. LA TÊTE ----------------------------------------------------------- */

/* `.tete-liste` (composants.css) porte l'air du haut, la zone d'identité et la
   marge du manchon. */
.edition-tete { text-align: center; }
/* LA BANDE D'UN NUMÉRO EST UN MANCHON (22/09) : le cadre, les filets, la
   typographie, le défilement, le fondu et son chevron viennent du composant
   (`composants.css`). Ce qui lui reste en propre est SA RÉPARTITION au
   bureau : trois cases — le numéro à gauche, la date au centre, les liens à
   droite. Les séparateurs qui ne servent qu'aux écrans étroits sont dans le
   HTML et se cachent ici.
   ⚠ Chaque case prend AU MOINS sa largeur : avec le numéro suivant, les liens
     passaient sur deux lignes entre 992 et 1 150 px (mesuré le 15/09). La
     date reste au centre tant que la place le permet. */
.edition-bande {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: var(--space-24);
  align-items: center;
}
.bande-numero { display: flex; align-items: center; gap: 14px; text-align: left; }
.bande-numero a:hover { text-decoration: underline; }
.bande-liens {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.bande-liens a:hover { text-decoration: underline; }
.bande-sep { color: var(--couleur-sep-carte); }
/* Les séparateurs qui ne servent qu'aux écrans étroits : le HTML les porte,
   le bureau les cache. Sans cette règle, ils comptent comme des cases de la
   grille et la bande se replie sur trois lignes (vu le 22/09). */
.bande-sep-etroite,
.bande-sep-telephone { display: none; }


/* --- 2. LA UNE ------------------------------------------------------------ */

.edition-une-bloc {
  display: grid;
  grid-template-columns: var(--grille-edition);
  column-gap: var(--gouttiere-edition);
  margin-top: var(--espace-edition-une);
}
.edition-une-bloc > * { min-width: 0; }
.edition-une-bloc.sans-a-cote { grid-template-columns: minmax(0, 1fr); }

.edition-une .carte-service { margin-top: 18px; font-size: var(--taille-service-une); }
.edition-une-titre {
  font-size: var(--taille-titre-une-edition);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-top: 12px;
  text-wrap: pretty;
}
/* Le texte long, sur deux colonnes séparées d'un filet clair. */
.edition-une-texte {
  columns: 2;
  column-gap: var(--space-32);
  column-rule: 1px solid var(--filet-edition);
  margin-top: 16px;
  font-family: var(--police-texte);
  font-size: var(--taille-texte-une-edition);
  line-height: 1.55;
  color: var(--couleur-texte-une);
}
.edition-une-texte p { orphans: 2; widows: 2; }
.edition-une-texte p + p { margin-top: 10px; }
.edition-une-suite {
  font-family: var(--police-meta);
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-texte);
  white-space: nowrap;
}
.edition-une-suite:hover { text-decoration: underline; }
.edition-une .carte-auteur { font-size: var(--taille-service-une); margin-top: 16px; }

/* Les deux articles d'à côté : un filet vertical sur la hauteur de la rangée,
   un filet gris entre les deux. */
.edition-a-cote { position: relative; }
.edition-a-cote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gouttiere-edition) / -2);
  width: 1px;
  background: var(--filet-edition);
}
.carte-a-cote .carte-titre { font-size: var(--taille-titre-a-cote); }
.carte-a-cote .carte-extrait {
  -webkit-line-clamp: var(--lignes-chapo-a-cote);
  line-clamp: var(--lignes-chapo-a-cote);
}
.carte-a-cote + .carte-a-cote {
  margin-top: var(--espace-edition-gris);
  padding-top: var(--espace-edition-gris);
  border-top: 1px solid var(--filet-edition);
}


/* --- 3. LA SUITE ---------------------------------------------------------- */

.edition-suite {
  margin-top: var(--espace-edition-bloc);
  padding-top: var(--espace-edition-filet);
  border-top: 1px solid var(--gris-texte);
}

/* LA RANGÉE À FILETS (`.rangee`) est partagée depuis le 16/09 : composants.css. */

/* LE COURRIER DES LECTEURS est une carte comme les autres : son format le
   distingue, et son texte est posé sur fond papier, l'image au-dessus. */
.page-edition .carte-courrier-des-lecteurs {
  background: var(--fond-courrier-edition);
  padding-bottom: 16px;
}
.page-edition .carte-courrier-des-lecteurs > :not(a:first-child) { padding-inline: 16px; }
/* AU TÉLÉPHONE, le courrier passe en ligne comme les six autres, et son fond
   papier prend TOUTE sa case — d'un filet de la rangée à l'autre (Ludovic,
   16/09). Les marges négatives vont chercher la moitié de gouttière que la
   rangée laisse de chaque côté : sans elles, le fond s'arrêterait avant les
   filets et l'encart paraîtrait flotter.

   ⚠ ET LE FILET DU DESSUS SE RATTRAPE. Il est tracé par la carte elle-même
     (`.rangee > *::after`), à une demi-gouttière au-dessus d'elle : la marge
     négative le remontait d'autant, ce qui le collait au texte de l'article
     précédent et laissait une bande blanche entre lui et le fond papier. Il
     revient donc au bord du fond, c'est-à-dire là où il était.

   ⚠ AUCUNE MARGE INTÉRIEURE (Ludovic, 16/09) : le fond court sur toute la
     largeur, et l'image du courrier reste alignée sur celles des six autres
     cartes. Un encart qui décalerait ses images casserait la colonne. */
@media (max-width: 767px) {
  .page-edition .carte-courrier-des-lecteurs {
    margin-block: calc(-1 * var(--espace-filet-clair));
    padding: var(--espace-filet-clair) 0;
  }
  .page-edition .carte-courrier-des-lecteurs::after { top: -1px; }
  .page-edition .carte-courrier-des-lecteurs > :not(a:first-child) { padding-inline: 0; }
}


/* --- 4. LA SEMAINE ---------------------------------------------------------
   Deux tiers / un tiers. La colonne de droite (le dessin, les brèves) court
   sur toutes les rangées de la colonne de gauche ; la dernière rangée prend
   le reste, pour qu'une colonne de droite plus haute ne creuse pas d'écart
   entre la question et les vidéos. */

.edition-zone {
  display: grid;
  grid-template-columns: var(--grille-edition);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--gouttiere-edition);
  align-items: start;
  margin-top: var(--espace-edition-bloc);
  padding-top: var(--espace-edition-filet);
  border-top: 3px double var(--gris-texte);
}
.edition-zone > * { min-width: 0; }
.edition-zone > .edition-question { grid-column: 1; grid-row: 1; }
.edition-zone > .edition-videos   { grid-column: 1; grid-row: 2; }
.edition-zone > .edition-reels    { grid-column: 1; grid-row: 3; }
.edition-zone > .edition-droite {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  position: relative;
}
.edition-droite::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gouttiere-edition) / -2);
  width: 1px;
  background: var(--filet-edition);
}
.edition-question ~ .edition-videos,
.edition-question ~ .edition-reels { margin-top: var(--espace-edition-bloc); }
.edition-videos ~ .edition-reels   { margin-top: var(--espace-edition-rubrique); }

/* Le libellé d'une rubrique de la semaine, sous sa barre (`.titre-barre`,
   composants.css) : 24 px avant ce qui suit — sauf les brèves, qui collent. */
.edition-videos .titre-barre,
.edition-reels .titre-barre { margin-bottom: var(--space-24); }

/* LA QUESTION est le cadre partagé (`template-parts/question.php`, composants.css). */

/* LES VIDÉOS — la carte « g » en 16:9. */
.edition-videos .rangee { --gouttiere-rangee: var(--gouttiere-videos-edition); }
.edition-videos .carte-titre { font-size: var(--taille-titre-video-edition); }
/* Une seule vidéo : l'image à gauche, le texte à droite — la carte en ligne,
   à un autre calibre. */
.carte-ligne.carte-video-seule {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 28px;
}
.carte-video-seule .carte-titre { font-size: var(--taille-titre-video-seule); line-height: 1.15; }
.carte-video-seule .carte-extrait {
  font-size: 15px;
  line-height: 1.5;
  -webkit-line-clamp: var(--lignes-chapo-video-seule);
  line-clamp: var(--lignes-chapo-video-seule);
}

/* LE RÉEL EN BREF — l'étagère de l'accueil, sur fond blanc et au calibre
   d'une colonne : cinq réels tiennent, les autres défilent. */
.reels-edition {
  --largeur-reel: var(--largeur-reel-edition);
  gap: 16px;
  align-items: flex-start;
}
.reels-edition .titre-reel {
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.duree-reel { left: 6px; bottom: 6px; padding: 3px 6px; }

/* LE DESSIN — entier, dans un filet clair. */
.edition-dessin { margin: 0; }
.edition-dessin .carte-titre { font-size: var(--taille-titre-dessin-edition); }

/* LES BRÈVES — la ligne de liste de l'accueil (composants.css, `.ligne`),
   sous sa barre. Ludovic, 15/09 : ni numéro ni rubrique — la planche R2 les
   numérotait et disait leur rubrique. */
.edition-dessin-bloc + .edition-breves { margin-top: var(--espace-edition-rubrique); }
.edition-breves .lien-suite { margin-top: 6px; }


/* --- 4 bis. UNE ANCIENNE ÉDITION — la direction Cc (16/09 au soir) ---------
   La même grille que la semaine, ce qu'elle porte en moins : à gauche la
   suite du numéro EN LIGNES, à droite le dessin sous sa barre. Une ancienne
   édition porte plus d'articles qu'une récente (médiane 11 avant le
   11/07/2025, contre 7 ou 8 depuis la fusion) : en rangées de quatre, la
   dernière était incomplète 237 fois sur 278. En lignes, il n'y a pas de
   rangée à finir. */
.edition-zone.edition-ancienne { grid-template-rows: 1fr; }
.edition-zone > .edition-suite-lignes { grid-column: 1; grid-row: 1 / -1; }
.edition-ancienne.sans-dessin { grid-template-columns: minmax(0, 1fr); }

/* La carte en ligne, au calibre de la planche : la page le dit par des
   variables, elle ne redessine pas le composant (règle du 16/09). */
.liste-suite {
  --largeur-vignette-ligne: 180px;
  --gouttiere-carte-ligne: var(--space-24);
  --taille-titre-grille: 22px;
  --taille-extrait-carte: 14px;
}
/* ⚠ Posée sur le conteneur, la largeur de vignette PASSE DEVANT le `:root`
   du responsive : les deux autres largeurs la redisent, dans responsive.css. */
.liste-suite > .carte { padding: 18px 0; }
.liste-suite > .carte + .carte { border-top: 1px solid var(--filet-edition); }

/* Le courrier des lecteurs garde son fond papier, qui prend ici TOUTE la
   ligne — d'un filet à l'autre, sans marge intérieure, pour que son image
   reste alignée sur celles des autres entrées (même règle qu'au téléphone). */
.liste-suite > .carte-courrier-des-lecteurs { padding: 18px; margin-inline: -18px; }
.page-edition .liste-suite > .carte-courrier-des-lecteurs > :not(a:first-child) { padding-inline: 0; }

/* La barre du dessin vit maintenant dans sa brique, et vaut donc aussi pour
   un numéro complet (16/09 au soir). */
.edition-rubrique-dessin { margin-bottom: var(--space-16); }


/* --- 5. LES ÉDITIONS PRÉCÉDENTES ------------------------------------------ */

.numeros-precedents { margin-top: var(--espace-edition-precedentes); }
.titre-bloc.numeros-precedents-titre { font-size: var(--taille-titre-precedentes); }
/* La liste est la brique partagée (`liste-editions`, composants.css). Ici
   elle n'a pas besoin de son filet du haut : le titre de bloc en pose déjà un,
   de 3 px, et deux filets à la suite font une bavure. */
.numeros-precedents .liste-editions { margin-top: 18px; border-top: 0; }

/* « Toutes les éditions » est un bouton contour (composants.css). */
.numeros-precedents .edition-porte { margin-top: var(--space-32); }


/* =========================================================================
   PARTAGÉ AVEC D'AUTRES PAGES — écrit ici avec la page d'une édition E, et
   repris depuis par d'autres. Ne pas retirer avec la page.
   ========================================================================= */

/* Le dessin à son format réel — le fil des dessins et le dessin d'une
   édition. La boîte suit le FORMAT RÉEL de l'image et non un rapport imposé :
   191 dessins sur 249 sont en 4/5, mais 35 sont en paysage (mesuré le
   02/09). Sans image, la boîte grise reprend le 4/5. */
.dessin-image { aspect-ratio: 4 / 5; }
.dessin-image:has(img) { aspect-ratio: auto; }
.dessin-image > img { height: auto; object-fit: contain; }
.dessin-cliquable { display: block; cursor: zoom-in; }

/* « ⤢ Agrandir » : un repère, pas un bouton (le fil des dessins). */
.loupe {
  position: absolute;
  right: 8px; bottom: 8px;
  background: var(--gris-noir);
  color: var(--gris-clair-sur-sombre);
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  padding: 3px 8px;
  border-radius: var(--rayon);
}

/* Les actions d'un débat — la question du débat sur l'accueil (home.css,
   `.debat-une`). */
.debat-actions {
  display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap;
  margin-top: 18px;
}
.debat-actions .lien-suite { margin-top: 0; }

/* LA SURCOUCHE DU DESSIN — le `dialog` reprend celui du réel en bref
   (composants.css) : même fond flouté, même « Fermer ✕ », même titre-lien
   sous l'image. Seul le cadre change : il suit le format du dessin, borné
   par la fenêtre. */
.surcouche-dessin {
  border: 0; padding: 0;
  background: transparent;
  max-width: 100%; max-height: 100%;
  overflow: visible;
}
.surcouche-dessin::backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(2px)) {
  .surcouche-dessin::backdrop { background: rgba(0, 0, 0, .88); }
}
.surcouche-dessin-cadre {
  max-width: 92vw;
  max-height: 84vh;
  background: #000;
  border-radius: var(--rayon);
  overflow: hidden;
}
.surcouche-dessin-cadre img {
  display: block;
  max-width: 92vw;
  max-height: 84vh;
  width: auto; height: auto;
}
.surcouche-dessin .surcouche-titre { max-width: 92vw; }