/* ============================================================
   JOURNAL — gazette serrée
   Chargé uniquement par /fr/journal/ et les pages d'article.
   Les pages du site vendent, le Journal se lit : il se distingue
   par l'échelle et la mise en page, jamais par la police.
   Aucun élément du reste du site ici — ni bandeau, ni bouton
   plein, ni bloc de réassurance.
   Densité : aucun blanc décoratif. Le pas maximum est 40 px et
   il ne sert qu'avant l'encart final.
   ============================================================ */

.jn {
  /* Échelle d'espacement — quatre valeurs, pas une de plus. */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;              /* réservé à l'avant de l'encart final */

  --colonne: 680px;
  --j-ink: #33352e;          /* gris très foncé, jamais du noir pur */
  --j-gris: #6f7268;         /* légendes, surtitres, dates */
  --j-filet: #d8d4c9;        /* filets fins */
  --j-teinte: #f4f1ea;       /* fond de l'encart, à peine posé */

  color: var(--j-ink);
  font-family: var(--font-labeur);
  font-size: 16px;
  /* Un seul interligne pour tout le texte courant. Nommé, parce que la marge
     basse de l'image flottante s'y accroche : elle vaut exactement une ligne,
     et doit le rester si ce chiffre bouge. 16 × 1,55 = 24,8 px. */
  --jn-interligne: 1.55;
  line-height: var(--jn-interligne);
  text-align: left;          /* jamais justifié */
  hyphens: none;

  /* Dégagement de la barre de navigation, qui est en position fixe sur
     ~100 px et que ces pages ne passent sous aucun hero. Ce n'est pas du
     blanc décoratif : sans lui le titre passe sous la barre. */
  padding-top: 104px;
}

/* ---------- La colonne ---------- */
.jn__col {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* ---------- Texte courant ---------- */
.jn p {
  margin: 0 0 0.75em;
  /* Taille et interligne viennent de .jn par héritage : si on les repose ici,
     .jn p (0,1,1) l'emporte sur .jn__extrait ou .jn__r (0,1,0) et les écrase. */
}
.jn a { color: inherit; text-underline-offset: 3px; }

/* ---------- Titres ---------- */
.jn h1 {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 400;          /* graisse normale, aucune capitale */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 var(--s1);
  color: var(--j-ink);
}
.jn h2 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 400;          /* aucun titre en gras lourd */
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
  color: var(--j-ink);
}

/* ---------- Tête d'article ----------
   Surtitre + titre + auteur + image + légende tiennent dans 600 px. */
.jn__surtitre {
  font-family: var(--font-interface);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--j-gris);
  margin: 0 0 var(--s1);
}
.jn__auteur {
  font-size: 14px;
  font-style: italic;
  color: var(--j-gris);
  margin: 0 0 var(--s2);
}

/* ---------- Image principale ---------- */
.jn__hero {
  margin: 0 0 var(--s3);
  text-align: center;
}
/* Largeur 480 px, mais en portrait c'est la hauteur qui commande : width et
   height restent auto pour que le rapport soit tenu, et les deux max bornent. */
.jn__hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(480px, 100%);
  max-height: 430px;
  margin-inline: auto;
}

.jn figcaption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--j-gris);
  margin-top: var(--s1);
}

/* ---------- Le groupe d'images a été retiré ----------
   Le 23 septembre 2026 : un article a UNE image, sa principale, la même sur le
   mur du Journal et dans la page. Les règles `.jn__mos` qui vivaient ici
   n'accordaient que le composant `.mos` du site à la colonne du Journal ; le
   composant lui-même, dans css/pages.css, n'est pas touché et sert toujours
   ailleurs. Les fichiers des anciennes tuiles restent au dépôt. */

/* ---------- Vignettes secondaires, dans le texte ---------- */
.jn__vignette {
  float: right;
  width: 300px;
  margin: 0 0 var(--s3) var(--s3);
}
.jn__vignette img { display: block; width: 100%; height: auto; }

/* ---------- Lettrine ---------- */
.jn__chapeau::first-letter {
  float: left;
  font-family: var(--font-labeur);   /* même police que le corps */
  font-size: 3em;                    /* deux lignes de 16 px à 1,55 */
  line-height: 0.84;
  padding: 0.06em 0.08em 0 0;
  color: var(--j-ink);
}

/* ---------- Filet avant l'encart ---------- */
.jn__filet {
  width: 80px;
  height: 1px;
  border: 0;
  background: var(--j-filet);
  margin: var(--s4) auto;    /* le seul 40 px de la page */
  clear: both;
}

/* ---------- Encart final ---------- */
.jn__encart {
  background: var(--j-teinte);
  padding: var(--s2);
  margin: 0 0 var(--s3);
  font-size: 15px;
}
.jn__encart h2 { margin: 0 0 var(--s1); font-size: 20px; }
.jn__encart p { margin-bottom: var(--s2); }
.jn__bouton {
  display: inline-block;
  font-family: var(--font-interface);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--j-ink);
  border: 1px solid var(--j-ink);   /* contour, jamais de fond plein */
  background: none;
  padding: var(--s1) var(--s2);
  text-decoration: none;
}
.jn__bouton:hover { background: var(--j-ink); color: var(--j-teinte); }

/* ---------- FAQ ---------- */
.jn__faq { font-size: 15px; }
.jn__faq-titre {
  font-family: var(--font-interface);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--j-gris);
  font-weight: 400;
  margin: 0 0 var(--s2);
}
.jn__q {
  font-family: var(--font-labeur);
  font-size: 15px;
  font-weight: 600;
  margin: var(--s2) 0 var(--s1);
}
.jn__r { font-size: 15px; margin-bottom: var(--s2); }

/* ---------- Page Journal : liste éditoriale ---------- */
.jn__intro { font-size: 16px; font-style: italic; }

.jn__liste { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.jn__entree {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--j-filet);
}
.jn__entree:last-child { border-bottom: 0; }
.jn__entree--sansimage { grid-template-columns: 1fr; }
.jn__entree img { display: block; width: 100%; height: auto; }
.jn__entree h2 { font-size: 20px; margin: var(--s1) 0; }
.jn__entree a { text-decoration: none; }
.jn__entree a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.jn__extrait { font-size: 15px; margin: 0; }

/* ---------- Rythme vertical ---------- */
.jn__tete { padding-top: 0; }
.jn__corps { padding-bottom: var(--s3); }
.jn__faq { padding-bottom: var(--s3); }

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  .jn__entree { grid-template-columns: 1fr; gap: var(--s2); }
  /* Les vignettes reprennent la pleine colonne, hauteur plafonnée à 60 % de
     l'écran pour ne pas chasser le texte. */
  .jn__vignette {
    float: none;
    width: 100%;
    margin: var(--s3) 0;
    text-align: center;
  }
  .jn__vignette img {
    width: auto;
    max-width: 100%;
    max-height: 60vh;
    margin-inline: auto;
  }
  .jn__hero img { max-height: 60vh; }
}

/* ============================================================
   MUR DE BRIQUES — page Journal
   Une mosaïque, pas une une suivie d'une grille. Douze colonnes,
   des briques de quatre tailles, placement dense pour que le mur
   n'ait aucun trou. Chaque brique : une image, un voile, du texte
   dessus. Rien d'autre — ni carte, ni bord, ni ombre, ni bouton.
   Le voile est la seule intervention sur la photo.

   L'ARITHMÉTIQUE. Conteneur 1400 px, douze colonnes, gouttière
   16 px : (1400 − 11×16) / 12 = 102 px la colonne. Une brique de
   4 colonnes fait donc 4×102 + 3×16 = 456 px ; 6 colonnes, 692 px ;
   8 colonnes, 928 px. La plus large image servie fait 2 000 px :
   aucune n'est jamais agrandie.

   LA HAUTEUR, ET UN ÉCART ASSUMÉ. Les rangées font 180 px et la
   gouttière 16. Une brique de 2 rangées mesure donc 2×180 + 16 =
   376 px, et une de 4 rangées 4×180 + 3×16 = 768 px — non 360 et
   720, qui ne comptent pas les gouttières. Ce qui compte tient :
   **une brique de 4 rangées fait exactement deux briques de 2
   empilées**, 376 + 16 + 376 = 768. La portrait et la tête ont donc
   bien la même hauteur, et le mur s'aligne.
   ============================================================ */

.jn {
  /* LA RANGEE — 138 px, et non les 180 px d'abord prevus. Ce n'est pas un
     arrondi : a 180 px la brique de tete mesure 768 px de haut et, posee a
     168 px du haut de page, elle depasse deja l'ecran de 1440 x 900 a elle
     seule. Releve du 21 septembre 2026 : DEUX briques entamees, aucune
     entiere, la ou la commande en demande quatre.

     A 138 px, la tete fait 600 px et la deuxieme rangee commence a 768 px :
     cinq briques entamees a 1440 x 900 (deux entieres), et les cinq ENTIERES
     a 1920 x 1080. Les rapports y gagnent aussi — la tete tombe a 1,55 et la
     portrait a 0,76, c'est-a-dire tout pres du 3:2 et du 4:5 que le
     generateur sert : les images n'y sont presque plus recadrees.
     Une seule valeur a changer ici pour revenir en arriere. */
  --jn-rangee: 138px;
}

.jn__mur {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--jn-rangee);
  grid-auto-flow: dense;        /* aucun trou : une petite brique comble */
  gap: 16px;
  /* 1400 px de GRILLE, et la marge de respiration EN PLUS : avec
     `max-width: 1400px` et un padding, les 48 px de marge se prenaient sur
     la grille et la colonne tombait a 98 px au lieu de 102. Mesure du
     21 septembre 2026 : briques de 440 px la ou l'arithmetique en promet 456.

     Et la marge laterale vaut 16 px, la valeur meme de la gouttiere : a 24 px
     le conteneur demandait 1448 px, un ecran de 1440 n'en donnait que 1392, et
     les briques retombaient a 453. A 16, le total fait 1432 : la grille vaut
     exactement 1400 px des 1432, 1440 compris. */
  max-width: calc(1400px + 2 * var(--s2));
  margin: var(--s2) auto 0;
  padding-inline: var(--s2);
}

/* ---------- Une brique ---------- */
.jn__brique {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--nuit);      /* le temps que l'image arrive */
}
.jn__brique img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `--pos` est posé par le générateur, depuis `image_principale_3x2_ancrage`
     de l'article. Le pavé de tête coule un master portrait dans une boîte
     paysage : centré à 50 %, un master dont le sujet est en bas ne montrait
     que le décor. Sans la variable, rien ne change — les six articles posés
     avant le 26 septembre 2026 gardent leur cadrage au centre. */
  object-position: 50% var(--pos, 50%);
}
/* Le voile part du bas et s'arrête à mi-hauteur : le haut de la photo
   reste intact, et le titre garde son contraste. Mesuré à 70 % sur les
   grandes briques, dont le bas est souvent clair. */
.jn__brique-voile {
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,0));
  pointer-events: none;
  transition: opacity 600ms ease;
}
.jn__brique-texte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s2);
  color: #fff;
}
.jn__brique-rubrique {
  display: block;
  font-family: var(--font-interface);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  margin-bottom: 6px;
}
.jn .jn__brique-titre {
  font-family: var(--font-editorial);
  font-weight: 400;
  color: #fff;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}
.jn__brique-chapo {
  display: block;
  margin-top: var(--s1);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  max-width: 46ch;
}

/* ---------- Les quatre formats ---------- */
.jn__brique--tete     { grid-column: span 8; grid-row: span 4; }
.jn__brique--portrait { grid-column: span 4; grid-row: span 4; }
.jn__brique--large    { grid-column: span 6; grid-row: span 2; }
.jn__brique--normale  { grid-column: span 4; grid-row: span 2; }

/* Le titre suit la taille de la brique, pas l'inverse. */
/* La tête porte la vidéo : son fond bouge d'une image à l'autre, et un voile
   calibré sur la photo fixe ne garantit rien de ce qu'on verra en mouvement.
   Relevé du 21 septembre 2026 : sur l'image seule, la rubrique tombait à 4,45
   — sous les 4,5 qu'exige AA pour du texte de 11 px. Le voile part donc de plus
   haut et monte de deux crans : à 84 %, une flamme qui passe à 5,5 s de la
   boucle ramenait encore la rubrique à 4,48. Mesuré sur huit images de la
   boucle, pas sur la seule photo. */
.jn__brique--tete .jn__brique-voile {
  inset: 35% 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
}

.jn .jn__brique--tete     .jn__brique-titre { font-size: 40px; }
.jn .jn__brique--portrait .jn__brique-titre { font-size: 26px; }
.jn .jn__brique--large    .jn__brique-titre { font-size: 26px; }
.jn .jn__brique--normale  .jn__brique-titre { font-size: 20px; }

/* ---------- Survol : l'image seule respire ----------
   3 % en 600 ms, et le voile s'éclaircit d'un cran. Rien d'autre ne
   bouge : ni le texte, ni la brique, ni ses voisines. */
.jn__brique img { transition: transform 600ms ease; }
.jn__brique:hover img,
.jn__brique:focus-visible img { transform: scale(1.03); }
.jn__brique:hover .jn__brique-voile,
.jn__brique:focus-visible .jn__brique-voile { opacity: .82; }

/* ---------- Arrivée : un fondu décalé, une seule fois ----------
   60 ms par brique, 400 ms chacune. `animation` et non un observateur
   de défilement : elle se joue au chargement et ne rejoue jamais.
   L'indice vient du générateur, en variable d'inclusion. */
@keyframes jn-brique-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.jn__brique {
  opacity: 0;
  animation: jn-brique-arrive 400ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* ---------- En-tête de la page Journal ---------- */
.jn__entete {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  height: 40px;
  /* Meme largeur et meme marge que le mur : sinon le titre ne s'aligne plus
     sur le bord gauche de la premiere brique. */
  max-width: calc(1400px + 2 * var(--s2));
  margin-inline: auto;
  padding-inline: var(--s2);
}
.jn__entete h1 {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
}
.jn__entete p {
  font-size: 16px;
  font-style: italic;
  color: var(--j-gris);
  margin: 0;
}

/* ---------- Mouvement réduit : ni fondu, ni agrandissement ---------- */
@media (prefers-reduced-motion: reduce) {
  .jn__brique { opacity: 1; animation: none; }
  .jn__brique img { transition: none; }
  .jn__brique:hover img,
  .jn__brique:focus-visible img { transform: none; }
  /* Le voile aussi : sans cette ligne il sautait à 0,82 d'un coup au survol.
     Sans transition ce n'est plus du mouvement, mais c'est un changement, et
     la commande en demandait zéro — relevé du 21 septembre 2026 sur un banc
     où la condition du média était forcée. */
  .jn__brique-voile,
  .jn__brique:hover .jn__brique-voile,
  .jn__brique:focus-visible .jn__brique-voile { transition: none; opacity: 1; }
}

/* ---------- Mobile : une colonne, deux rapports alternés ----------
   Le mur n'a plus de sens sur 390 px. Les briques se suivent, et
   l'alternance 4:5 / 3:2 garde le rythme sans grille. */
@media (max-width: 700px) {
  .jn__mur {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 12px;
    padding-inline: var(--s2);
  }
  .jn__brique--tete,
  .jn__brique--portrait,
  .jn__brique--large,
  .jn__brique--normale { grid-column: auto; grid-row: auto; }
  .jn__brique { aspect-ratio: 4 / 5; }
  .jn__brique:nth-child(even) { aspect-ratio: 3 / 2; }
  .jn .jn__brique--tete .jn__brique-titre { font-size: 30px; }
  .jn .jn__brique-titre { font-size: 22px; }
  .jn__brique-chapo { font-size: 14px; }
  .jn__entete { height: auto; flex-direction: column; gap: var(--s1); padding-block: var(--s2); }
}

/* ============================================================
   PAGE D'ARTICLE — mise en page presse
   La page Journal garde ses couvertures ; ici, la tête est dans
   la colonne et l'image principale flotte à gauche du texte.
   ============================================================ */

.jn .jn__titre {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 var(--s2);
  color: var(--j-ink);
}
.jn__chapo { font-size: 18px; font-style: italic; line-height: 1.5; margin: 0 0 var(--s2); }
.jn__auteur { font-size: 14px; font-style: italic; color: var(--j-gris); margin: 0 0 var(--s3); }

/* 300 px et non 380 : relevé du 19 septembre, l'image à 380 ne laissait que
   268 px de texte à côté d'elle — 34 signes par ligne, justifiés, avec des
   coupures à répétition. À 300 px la ligne remonte à 348 px, soit environ
   45 signes : une colonne de journal, qui supporte la justification. */
.jn__flottante {
  float: left;
  width: 300px;
  /* AUCUNE MARGE BASSE, et c'est le seul réglage qui borne l'écart.
     L'écart entre le bas de la légende et la première ligne qui reprend sous
     l'image vaut cette marge PLUS un reste de grille : le texte se pose sur
     les lignes du paragraphe, et la première qui échappe au flottant tombe où
     elle tombe, de 0 à un interligne plus bas. Ce reste n'est pas réglable —
     il dépend de la longueur du texte. À 16 px de marge, l'écart allait donc
     de 20 à 37 px sur les six articles, au-dessus de l'interligne trois fois
     sur six. À zéro, il vaut le reste seul : toujours sous un interligne, par
     construction et non par chance. */
  margin: 0 32px 0 0;
}
.jn__flottante img { display: block; width: 100%; height: auto; }
.jn__flottante figcaption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--j-gris);
  margin-top: var(--s1);
  /* Aucune marge basse propre : la légende ferme le flottant, et tout blanc
     qu'elle ajouterait s'ajouterait à celui de l'image, sans qu'on sache
     lequel des deux on règle. La séparation est portée par le seul
     `margin-bottom` de la figure, ci-dessus. */
  margin-bottom: 0;
}

/* ---------- Les titres ne dégagent PAS sous l'image ----------
   Essayé le 23 septembre 2026, puis écarté. `clear: left` sur les <h2> faisait
   passer chaque titre sous la photo, et l'écart devenait constant — mais tout
   le texte qui suit un titre passait dessous avec lui. Relevé sur les six :
   99 à 149 px de texte le long d'une image haute de 227 à 491 px, soit 103 à
   392 px de colonne vide à droite de la photo. Un trou, sur quatre articles
   sur six.

   Arbitrage de Fabien : le titre reste à côté de la photo, et le texte
   continue de l'épouser. Aucun titre n'est d'ailleurs jamais coupé en deux —
   vérifié de 900 à 1920 px, ils tiennent tous entièrement à côté de l'image. */

/* La colonne s'élargit à 760 px pour laisser respirer le texte à côté de
   l'image ; les paragraphes qui reviennent sous elle restent à 680 px. */
.jn__corps { max-width: 760px; }
.jn__corps > p,
.jn__corps > h2,
.jn__corps > .jn__puces { max-width: 680px; }

/* Liste à puces du corps — posée le 26 septembre 2026 avec le premier article
   qui en emploie une. Elle suit la mesure des paragraphes, jamais celle de la
   colonne large : une liste ne longe pas l'image. Le retrait porte la puce hors
   du fer à gauche, pour que le texte des items reste aligné sur le reste. */
.jn__corps > .jn__puces {
  margin: var(--s3) 0 0;
  padding-left: 1.1em;
  list-style: none;
}
.jn__corps > .jn__puces > li {
  position: relative;
  margin-top: 0.55em;
  text-wrap: pretty;
}
.jn__corps > .jn__puces > li::before {
  content: "—";
  position: absolute;
  left: -1.1em;
  color: var(--laiton-texte);
}

/* Les blocs qui LONGENT l'image sortent de la mesure de lecture : leur ligne
   passe à 428 px au lieu de 348. Ceux qui reviennent sous elle gardent 680 px,
   sans quoi la ligne serait trop longue pour être lue d'un trait.

   Le compte. `.jn__col` pose 24 px de retrait de chaque côté : la colonne fait
   760 px de boîte mais 712 px de contenu. Un simple `max-width: 760px` serait
   donc plafonné à 712, et la ligne à 380. Les 428 px demandés s'obtiennent en
   laissant le bloc déborder de 48 px dans le retrait droit — le fer à gauche
   reste aligné sur le reste du texte, seul le bord droit avance. C'est le geste
   de presse qu'on cherchait, et il ne déplace rien d'autre sur la page.

   Le générateur pose `jn__large` : CSS ne sait pas désigner un élément par sa
   position vis-à-vis d'un flottant. Spécificité (0,2,0) contre (0,1,1).

   Sous 1000 px, on n'y touche pas : le débordement irait chercher le bord de
   la fenêtre au lieu d'une marge. */
@media (min-width: 1000px) {
  .jn__corps > .jn__large { max-width: 760px; margin-right: -48px; }
}

/* ---------- Justification ----------
   Le corps seulement : ni chapô, ni titres, ni légendes, ni FAQ. La coupure
   demande `lang="fr"` sur <html>, qui y est. En dessous de 700 px la ligne
   devient trop courte pour être justifiée sans trous : retour à gauche. */
.jn__corps > p:not(.jn__chapo):not(.jn__auteur):not(.jn__surtitre):not(.jn__q):not(.jn__r) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
}
/* Le repli doit REPRENDRE la chaîne de `:not()` ci-dessus. Chaque `:not()`
   compte pour une classe : la règle de justification pèse (0,6,1) quand
   `.jn__corps > p` ne pèse que (0,1,1). Écrit court, le repli perdait, et le
   corps restait justifié sur téléphone — relevé à 390 px le 19 septembre,
   alors qu'il était en ligne depuis la mise en page presse. */
@media (max-width: 700px) {
  .jn__corps > p:not(.jn__chapo):not(.jn__auteur):not(.jn__surtitre):not(.jn__q):not(.jn__r) {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* ---------- Vidéo de couverture de la une ----------
   Une seule page peut en porter une : la une du Journal. La vidéo se pose
   PAR-DESSUS l'image de couverture, qui reste dessous et sert de repli.
   L'ordre du DOM suffit à l'empiler correctement — image, vidéo, voile,
   texte — sans z-index.

   Elle ne s'affiche ni sur téléphone, ni si le visiteur a demandé moins
   d'animations : dans les deux cas l'image seule reste, et le poster de la
   vidéo n'est même pas téléchargé puisque l'élément n'est pas affiché.
   Muette et sans dialogue par construction : la piste son est retirée à
   l'encodage, il n'y a rien à couper. */
.jn__couv-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le seuil est à 1000 px, et le script de la page d'index emploie EXACTEMENT
   le même : au-dessous, l'élément est masqué ET vide, il ne coûte rien. */
@media (min-width: 800px) and (prefers-reduced-motion: no-preference) {
  .jn__couv-video { display: block; }
}

/* ---------- « À lire aussi » ----------
   Posé en fin de texte, avant l'encart. Deux lignes par article : le titre,
   puis la rubrique. Pas de vignette — le bloc relie, il ne rivalise pas avec
   la page d'index. Il reste dans la mesure de lecture de 680 px. */
.jn__aussi {
  max-width: 680px;
  /* `--s3` et non `--s4`. L'en-tête de cette feuille pose la règle : « le pas
     maximum est 40 px et il ne sert qu'avant l'encart final » — et `--s4`
     porte le même rappel, « réservé à l'avant de l'encart final ». Ce bloc-ci
     le prenait quand même, ce qui faisait 43 px de blanc mesurés entre la
     dernière ligne du texte et le filet, avant les 24 px de retrait intérieur.
     Le seul 40 px de la page reste celui de `.jn__filet`. */
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid rgba(58, 74, 56, .18);
}
.jn .jn__aussi h2 {
  font-family: var(--font-interface);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--j-gris);
  margin: 0 0 var(--s2);
}
.jn__aussi ul { list-style: none; margin: 0; padding: 0; }
.jn__aussi li + li { margin-top: var(--s2); }
.jn__aussi a { display: block; text-decoration: none; color: inherit; }
.jn__aussi-titre {
  display: block;
  font-family: var(--font-editorial);
  font-size: 20px;
  line-height: 1.25;
  color: var(--j-ink);
  text-wrap: balance;
}
.jn__aussi a:hover .jn__aussi-titre,
.jn__aussi a:focus-visible .jn__aussi-titre {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jn__aussi-rubrique {
  display: block;
  margin-top: 4px;
  font-family: var(--font-interface);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--j-gris);
}

/* ---------- Lettrine ----------
   Trois lignes. `initial-letter` d'abord, repli en float là où elle manque. */
.jn__chapeau::first-letter {
  font-family: var(--font-editorial);
  color: var(--j-ink);
  -webkit-initial-letter: 3;
  initial-letter: 3;
  margin-right: 8px;
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
  .jn__chapeau::first-letter {
    float: left;
    font-size: 3.1em;
    line-height: 0.82;
    padding-top: 0.06em;
    margin-right: 8px;
  }
}

@media (max-width: 680px) {
  .jn .jn__titre { font-size: 30px; }
  .jn__flottante { float: none; width: 100%; margin: 0 0 var(--s3); }
  .jn__corps, .jn__corps > p, .jn__corps > h2 { max-width: none; }
  .jn__chapeau::first-letter { -webkit-initial-letter: 2; initial-letter: 2; }
  @supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
    .jn__chapeau::first-letter { font-size: 2.1em; line-height: 0.86; }
  }
}