/* =========================================================================
   RESPONSIVE — sous 900px, les pages de lecture et les listes passent en une
   colonne. ⚠ L'accueil (A) et la page d'une édition (R2) ont leurs propres
   points d'arrêt, 991 et 767, à la fin de ce fichier.
   ========================================================================= */
@media (max-width: 900px) {
  :root {
    --taille-titre-bandeau: 48px; /* 3rem, le mobile du site en ligne */
    --taille-bouton-bandeau: 20px;
    --padding-bandeau: 40px;
    /* Le texte recouvre toute la largeur : le fondu monte du bas, et voile
       aussi le haut de l'image. */
    --fondu-bandeau: linear-gradient(0deg, var(--gris-noir) 30%, rgb(17 17 17 / .6) 100%);
    --taille-portrait: 64px;
    --espace-bloc: 40px;
    --padding-bande: 34px;
    --padding-encart: 22px;
    /* Gabarit de détail : les titres se réduisent, les colonnes centrées
       sont déjà fluides et n'ont rien à faire de plus. */
    --taille-titre-detail: 27px;
    --taille-intertitre: 19px;
    --taille-citation: 18px;
    --taille-texte-lecture: var(--text-md); /* 18 px : « corps sur mobile » (socle) */
    --taille-chapo-lecture: var(--text-md); /* le chapô suit le corps */
  }
  .grille-4 { grid-template-columns: 1fr; }

  /* Le rayon des enquêtes : la une s'empile (image, puis texte), et chaque
     étage passe sa vignette au-dessus du texte. */
  .rayon-tete, .rayon-entree { grid-template-columns: 1fr; gap: 16px; }
  .rayon-entree { padding: 26px 0; }
  :root {
    --taille-titre-archive: 27px;
    --taille-titre-rayon-tete: 26px; --taille-titre-rayon: 22px;
  }
  .archive-recherche form { flex-wrap: wrap; }

  /* Détail, tête « site actuel » : plus de place pour deux colonnes — la
     grille se défait et on retombe sur l'ordre de la maquette (titre
     d'abord), qui est le bon sur téléphone. */
  .detail.est-tete-actuelle .detail-tete { display: block; }
  .detail.est-tete-actuelle .detail-media { margin-top: 28px; }

  /* ---------------------------------------------------------------------
     LES DEUX RAILS DE LA PAGE DE LECTURE TOMBENT — c'est l'une des quatre
     questions mobiles que le socle laissait au gabarit (07/09), et elle se
     tranche ici : sous 900 px, un rail de 240 px à côté d'une colonne de
     300 n'est plus un rail, c'est une deuxième colonne de lecture.

     ORDRE RETENU (08/09, second passage — Ludovic) : LE SOMMAIRE AVANT LE
     TEXTE, MAIS REPLIÉ ; les outils en dernier. Le premier essai mettait
     le texte d'abord et tout le rail dessous : « le contenu des colonnes
     va tout en bas, c'est pas terrible pour de la navigation ». Un sommaire
     déplié avant le premier mot repousserait l'article d'un écran entier ;
     replié, il tient sur une ligne, « Dans cet article ⌄ », et s'ouvre au
     doigt. Choisir une entrée le referme : on arrive sur le chapitre, pas
     sur la liste. Le fil des brèves, lui, n'est pas une navigation dans la
     page : il reste sous le texte.
     Les deux rails redeviennent des blocs ordinaires : ni collants — rien
     ne doit occuper la hauteur d'un téléphone —, ni limités en hauteur.
     --------------------------------------------------------------------- */
  /* Le chapô perd sa colonne : sans rails, le corps prend toute la largeur,
     et un chapô resté en retrait décrochait de son propre texte — vu à
     880 px le 08/09. La grille de l'ouverture se défait comme l'autre. */
  .detail-ouverture { display: block; }
  /* Même raison pour la tête sans média (17/09) : sans rails, le titre d'une
     brève resté en retrait décrocherait de son propre texte. */
  .detail.est-tete-pleine .detail-tete { display: block; }
  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--gris-filet);
  }
  /* Le rail de droite se remet à l'horizontale : c'est une ligne d'actions
     en fin de lecture, comme avant le 08/09. */
  .rail-droite {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .detail-partage {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .partage-liens { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  /* L'ordre, quel que soit celui du HTML : sommaire replié, texte, fil des
     brèves (sur une brève), outils. */
  .rail-sommaire { order: 0; }
  .detail-corps  { order: 1; }
  .rail-fil      { order: 2; }
  .rail-droite   { order: 3; }
  /* 🔴 LE SOMMAIRE QUITTE LA MARGE (version finale, 30/09) : il entre dans
     le cadre de l'écoute, replié, ou devient un pli entre deux filets quand
     l'article n'a pas d'audio (`template-parts/ecoute.php`, detail.css). */
  .detail.est-article .rail-sommaire { display: none; }
  /* ⚠ `align-items: stretch` est INDISPENSABLE ici : la règle de base pose
     `start`, qui en colonne flex fait rétrécir chaque rail à la largeur de son
     contenu. Le fil tenait sur 366 px au milieu d'une page de 880 — vu à
     l'écran le 08/09. */
  .detail-lecture {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* Le filet de départ commun de la brève n'a plus de sens sur une colonne :
     il tracerait trois traits l'un sous l'autre. */
  .detail.est-breve .detail-lecture > * { border-top: 0; padding-top: 0; }
  .detail.est-breve .rail { border-top: 1px solid var(--gris-filet); padding-top: 18px; }

  /* Surcouche du format court : plus de place à côté du lecteur, les flèches
     passent PAR-DESSUS ses bords. Elles gardent une pastille sombre derrière
     elles, sans quoi un chevron blanc sur une image claire est illisible.
     Le balayage au doigt viendra après validation — deux mécanismes de
     navigation posés d'un coup, c'est deux mécanismes non testés. */
  .surcouche-scene { gap: 0; }
  .surcouche-fleche {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .55);
    border-radius: 50%;
    padding: 2px 10px 6px;
    font-size: 34px;
  }
  .surcouche-precedent { left: 4px; }
  .surcouche-suivant { right: 4px; }

  /* « Fermer ✕ » repasse AU-DESSUS du lecteur ici, et c'est le seul endroit
     où on l'empile. Sur téléphone la scène ne fait plus que la largeur de la
     vidéo : laissé calé sur son bord, le bouton se poserait sur les commandes
     de YouTube, qui occupent précisément ce coin. Un bouton qui recouvre un
     autre bouton est pire qu'un étage de plus. */
  .surcouche-scene { padding-top: 34px; }
  .surcouche-fermer { top: 0; right: 2px; }
}

/* La grille d'une archive : quatre cartes jusqu'à la tablette, deux ensuite,
   une sur un téléphone en portrait — aux points d'arrêt du socle (991 · 575).
   La page d'accueil garde sa règle à 900 : ses grilles vivent dans une trame
   qui bascule d'un coup, celle d'une archive occupe la page entière. */
@media (max-width: 991px) {
  .archive .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .archive .grille-4 { grid-template-columns: 1fr; }
}

/* LA TÊTE D'UNE ÉTAGÈRE (C) : le titre et son lien tiennent sur une ligne
   tant qu'il y a la place. En dessous, le lien passe à la ligne et le filet
   les tient tous les deux — un « Tous les articles de la rubrique → » qui ne
   se coupe pas déborde de l'écran d'un téléphone. */
/* =========================================================================
   L'ARCHIVE VIDÉO (E) — le comportement mobile, écrit avec le gabarit.

   Deux questions, et une seule réponse à chacune.

   LA GRILLE. Trois cartes en grand écran, deux à la tablette, une sur un
   téléphone en portrait — les mêmes points d'arrêt que la grille à quatre.
   Elle ne passe pas par « deux » à 991 px comme un simple découpage de
   trois : trois colonnes de 300 px sur une tablette donnent une vignette de
   la taille d'une puce, et la durée qu'elle porte ne se lit plus.

   LA UNE. Elle s'empile au même seuil que la scène de la page vidéo : la
   vignette pleine largeur d'abord — c'est ce qu'on vient voir —, le texte et
   le bouton dessous. Une vignette 16/9 à côté d'une colonne de 250 px n'est
   plus une une, c'est une carte avec du texte à droite.
   ========================================================================= */
@media (max-width: 991px) {
  .archive .grille-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .archive .grille-3 { grid-template-columns: 1fr; }
  /* La carte en ligne garde son image à gauche, plus petite. */
  :root { --largeur-vignette-ligne: 112px; }
}

@media (max-width: 900px) {
  .une-video { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Le titre de la une redescend avec celui de toutes les unes de liste,
     par son jeton (`--taille-titre-une-liste`, 34 · 27). */
}


/* =========================================================================
   LA RECHERCHE (B, 23/09) — ce qu'elle fait en descendant

   Le bureau seul est dessiné. D'ici là :

   LE CHAMP tient dans la zone d'identité, qui rapetisse (68 · 51 · 29). Au
   téléphone, 29 px ne font pas un champ qu'on vise au doigt : la recherche
   seule y garde une zone de 48 — son manchon tombe donc 19 px plus bas que
   celui des autres listes, à cette largeur-là.

   LES FILTRES passent à la ligne dans le manchon quand ils ne tiennent plus.
   Sous 767 px, leur menu prend la largeur du manchon : ancré à un filtre de
   fin de ligne, il sortirait de l'écran par la droite.
   ========================================================================= */
@media (max-width: 991px) {
  :root { --hauteur-champ-recherche: 48px; --taille-saisie-recherche: 19px; }
}

@media (max-width: 767px) {
  .manchon-a-plis { position: relative; }
  .manchon-plis .tri-pli { position: static; }
  .manchon-plis .tri-choix { left: 0; right: 0; min-width: 0; }
  .tri-note { white-space: normal; }
}

@media (max-width: 575px) {
  .recherche { --hauteur-identite-liste: 48px; }
  :root { --taille-saisie-recherche: 17px; }
  .recherche-boite { gap: 8px; padding: 0 12px; }
  .recherche-champ .bouton-plein { padding: 0 14px; }
}


/* =========================================================================
   LE FIL DES DESSINS — A, le dessin en tête, sous 992 (23/09)

   La bande passe l'identité AU-DESSUS du dessin (la règle des bandes) : le
   jour, l'année, le dessinateur, la rubrique et l'édition se couchent en UNE
   LIGNE de service au-dessus du titre — trois registres empilés sur une
   colonne pleine largeur prendraient un écran pour dire une date. L'édition
   part au bout de la ligne : c'est le seul lien, il reste où le doigt le
   cherche. Le dessin reste à sa taille de lecture, et sur un téléphone la
   taille de lecture EST la largeur de l'écran.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --taille-jour-dessin: 24px;
    --taille-titre-dessin: 24px;
  }
  .dessin-identite {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
  }
  .dessin-an { margin-top: 0; }
  .dessin-registre {
    display: contents;
  }
  /* Le lien garde ses 44 px pour le doigt, mais ne creuse pas la ligne :
     sans ces marges, le jour tombait 15 px trop bas sous le manchon. */
  .dessin-numero { margin-left: auto; margin-block: -10px; }
  .dessin-bande .bande-dossier-contenus { margin-top: 14px; }
}

@media (max-width: 767px) {
  :root {
    --taille-jour-dessin: 21px;
    --taille-titre-dessin: 21px;
  }
  .fil-dessins .dessin-cliquable { margin-top: 14px; }
}


/* =========================================================================
   LA PAGE D'UNE ÉDITION (R2, 15/09) — la tablette, puis le téléphone.

   LA TABLETTE (planche 768 px, vaut jusqu'à 991). La une en pleine largeur,
   son texte long toujours sur deux colonnes ; les deux articles d'à côté
   dessous, côte à côte ; la suite en rangées de deux, séparée d'eux par un
   filet GRIS, pas noir. Puis la question, le dessin à côté des brèves, les
   vidéos côte à côte, les réels qui défilent. Espacements : 48 entre deux
   blocs, 28 après un filet et autour d'un filet gris, 24 de part et d'autre
   d'un filet vertical.

   LE TÉLÉPHONE (planche 390 px, sous 768) — le MOBILE A, « l'ordre du
   bureau » (Ludovic, 15/09) : tout s'empile dans l'ordre du HTML, les cartes
   « g » en pleine largeur, séparées par des filets gris. La bande tient sur
   une ligne qui défile ; la une ne garde que son premier paragraphe, sans
   « Lire la suite ». Espacements : 40 entre deux blocs, 24 après un filet et
   autour d'un filet gris.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --taille-manchon: 11px;
    --taille-titre-une-edition: 40px;
    --taille-texte-une-edition: 18px;
    --taille-titre-a-cote: 20px;
    --lignes-chapo-a-cote: 3;
    --taille-titre-video-edition: 20px;
    --taille-titre-question: 28px;
    --taille-chapo-question: 17px;
    --gouttiere-edition: 48px;
    --gouttiere-grille-edition: 48px;
    --gouttiere-videos-edition: 48px;
    --espace-edition-bloc: 48px;
    --espace-edition-filet: 28px;
    --espace-edition-gris: 28px;
    --espace-edition-rubrique: 48px;
    --espace-edition-precedentes: 72px;
    --taille-titre-precedentes: 20px;
    --taille-titres-precedent: 18px;
  }

  /* La tête d'une liste se resserre — un numéro, l'archive des éditions,
     une rubrique : les trois jetons du contrat, et elles suivent toutes. */
  :root { --tete-liste-haut: 26px; --hauteur-identite-liste: 34px; --tete-liste-bas: 18px; }

  /* « n° · date » à gauche, les liens à droite ; chaque case garde la
     hauteur d'un doigt. */
  .edition-bande {
    display: flex;
    align-items: center;
    gap: 0 12px;
    padding: 0;
    letter-spacing: .12em;
  }
  .edition-bande > *,
  .bande-numero a,
  .bande-liens a { min-height: 44px; display: inline-flex; align-items: center; }
  .bande-numero { gap: 12px; }
  .bande-jour { display: none; } /* « 25 septembre 2026 », sans le jour (30/09) */
  .bande-liens a { gap: 6px; }
  .edition-bande > .bande-sep-telephone { display: none; }
  .bande-liens { margin-left: auto; gap: 12px; }

  /* 🔴 UNE ANCIENNE ÉDITION (Cc), EMPILÉE : la suite n'est plus une colonne
     à côté d'une autre, c'est la fin de la liste des articles. Le double
     filet qui ouvrait la zone et le filet vertical n'ont donc plus rien à
     séparer — ils tombent (Ludovic, 16/09 au soir), et la suite reprend le
     rythme ordinaire d'un numéro.
     ⚠ La largeur de vignette est posée sur `.liste-suite`, qui passe devant
       le `:root` du responsive — elle se redit donc ici. */
  .liste-suite { --largeur-vignette-ligne: 150px; --taille-titre-grille: 20px; }
  .edition-zone.edition-ancienne {
    border-top: 0;
    padding-top: 0;
    margin-top: var(--espace-edition-gris);
  }
  .edition-ancienne .liste-suite > .carte:first-child { border-top: 1px solid var(--filet-edition); }
  /* Le dessin retrouve son air : il collait à la dernière ligne de la suite,
     et sa colonne de tablette (dessin | brèves) n'a pas lieu d'être ici — il
     est seul. */
  .edition-ancienne .edition-droite {
    display: block;
    margin-top: var(--espace-edition-bloc);
  }

  /* La une en pleine largeur ; les deux d'à côté dessous, côte à côte. */
  .edition-une-bloc { grid-template-columns: minmax(0, 1fr); }
  .edition-une .carte-service { margin-top: 16px; }
  .edition-une-titre { margin-top: 10px; line-height: 1.08; }
  .edition-une-texte { column-gap: 28px; margin-top: 14px; }
  .edition-a-cote {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere-edition);
    margin-top: var(--espace-edition-gris);
    padding-top: var(--espace-edition-gris);
    border-top: 1px solid var(--filet-edition);
  }
  .edition-a-cote > * { min-width: 0; }
  .edition-a-cote::before { content: none; }
  .carte-a-cote + .carte-a-cote {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .carte-a-cote + .carte-a-cote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere-edition) / -2);
    width: 1px;
    background: var(--filet-edition);
  }

  /* La suite, séparée des deux d'à côté par un filet gris ; ses rangées de
     quatre passent à deux. */
  .edition-suite {
    margin-top: var(--espace-edition-gris);
    padding-top: var(--espace-edition-gris);
    border-top-color: var(--filet-edition);
  }
  .rangee-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rangee-4 > :nth-child(n)::before { content: none; }
  .rangee-4 > :nth-child(n)::after {
    content: none;
    left: calc(var(--gouttiere-grille-edition) / -2);
    right: calc(var(--gouttiere-grille-edition) / -2);
  }
  .rangee-4 > :not(:nth-child(2n + 1))::before { content: ""; }
  .rangee-4 > :nth-child(n + 3)::after         { content: ""; }
  .rangee-4 > :nth-child(2n + 1)::after        { left: 0; }
  .rangee-4 > :nth-child(2n)::after            { right: 0; }

  /* La semaine se défait : la question, puis le dessin à côté des brèves
     sous un filet noir, puis les vidéos, puis les réels. */
  .edition-zone { display: block; }
  .cadre-colonnes .cadre-texte { padding: 28px 28px 32px; }
  .cadre-colonnes .cadre-action { padding: 28px 20px; }
  .edition-droite {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere-edition);
    align-items: start;
  }
  .edition-droite > * { min-width: 0; }
  .edition-droite::before { content: none; }
  .edition-question ~ .edition-droite {
    margin-top: var(--espace-edition-bloc);
    padding-top: var(--espace-edition-filet);
    border-top: 1px solid var(--gris-texte);
  }
  .edition-droite ~ .edition-videos,
  .edition-droite ~ .edition-reels { margin-top: var(--espace-edition-bloc); }
  .edition-dessin-bloc + .edition-breves {
    position: relative;
    margin-top: 0;
    align-self: stretch;
  }
  .edition-dessin-bloc + .edition-breves::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere-edition) / -2);
    width: 1px;
    background: var(--filet-edition);
  }
  /* Le titre des brèves ouvre sa colonne : sans barre — le filet noir est
     déjà au-dessus de la rangée —, un filet clair dessous. Le titre du
     dessin, à côté de lui, se lit pareil. ⚠ Sur une ANCIENNE édition, il est
     seul et n'a pas de filet noir au-dessus de lui : il garde le sien. */
  .edition-rubrique-breves,
  .edition-zone:not(.edition-ancienne) .edition-rubrique-dessin {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--filet-edition);
  }
  .edition-breves .liste-lignes { margin-top: 0; }
  .edition-breves .lien-suite { min-height: 44px; margin-top: 0; }
}

@media (max-width: 767px) {
  :root {
    --taille-titre-une-edition: 30px;
    --taille-titre-a-cote: 21px;
    --taille-titre-video-edition: 21px;
    --taille-titre-question: 26px;
    --largeur-reel-edition: 140px;
    --espace-edition-bloc: 40px;
    --espace-edition-filet: 24px;
    --espace-edition-gris: 24px;
    --espace-edition-rubrique: 40px;
    --espace-edition-precedentes: 56px;
    --taille-titre-precedentes: 18px;
    --taille-titres-precedent: 17px;
  }

  /* LA BANDE SUR UNE LIGNE QUI DÉFILE. Le défilement, le fondu et le chevron
     sont ceux du manchon (`composants.css`) depuis le 22/09 ; il ne reste ici
     que ce qui lui est propre : ses trois cases se remettent à la file. */
  :root { --tete-liste-haut: 20px; --hauteur-identite-liste: 24px; --tete-liste-bas: 16px; }
  .edition-bande {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-24);
  }
  .edition-bande > * { flex: none; }
  .edition-bande > .bande-sep-telephone { display: inline-flex; }
  .bande-liens { margin-left: 0; }


  .liste-suite { --largeur-vignette-ligne: 112px; --taille-titre-grille: 18px; }
  /* ⚠ Le courrier d'une RANGÉE tire son fond jusqu'aux filets par des marges
     négatives ; dans la liste d'une ancienne édition il n'y a pas de rangée,
     et ces marges mangeaient l'air sous la dernière ligne — 16 px au lieu de
     40 avant le dessin. */
  .liste-suite > .carte-courrier-des-lecteurs { margin-block: 0; padding: 18px; margin-inline: -18px; }

  /* La une : le premier paragraphe, en pleine largeur, sans « Lire la
     suite ». */
  .edition-une-texte { columns: auto; }
  .edition-une-texte p + p,
  .edition-une-suite { display: none; }

  /* Tout s'empile, séparé par des filets gris. */
  .edition-a-cote { display: block; }
  .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);
  }
  .carte-a-cote + .carte-a-cote::before { content: none; }

  .rangee-4,
  .rangee-2 { grid-template-columns: minmax(0, 1fr); }
  .rangee > :nth-child(n)::before { content: none; }
  .rangee > :nth-child(n)::after  { content: none; left: 0; right: 0; }
  .rangee > :nth-child(n + 2)::after { content: ""; }

  /* La question : l'action passe sous le texte. Vaut pour tout cadre en
     colonnes — la newsletter de l'accueil aussi. */
  .cadre-colonnes { grid-template-columns: minmax(0, 1fr); }
  .cadre-colonnes .cadre-texte { padding: 24px 20px; }
  .cadre-colonnes .cadre-action {
    gap: 12px;
    padding: 20px;
    border-left: 0;
    border-top: 1px solid var(--filet-clair);
  }

  /* Le dessin, puis les brèves sous leur barre.
     ⚠ ET LA COLONNE N'OUVRE PLUS SUR SON PROPRE FILET. Elle en portait un,
       noir, du temps où le dessin n'avait pas de barre : depuis qu'il en a
       une — et qu'ici elle reprend la barre ordinaire, filet noir compris —,
       les deux se suivaient à 24 px d'écart (Ludovic, 16/09 au soir). À la
       tablette il reste : là, les deux titres n'ont pas de filet à eux, et
       c'est lui qui ouvre la rangée. */
  .edition-droite { display: block; }
  .edition-question ~ .edition-droite { padding-top: 0; border-top: 0; }
  .edition-dessin-bloc + .edition-breves { margin-top: var(--espace-edition-rubrique); }
  .edition-dessin-bloc + .edition-breves::before { content: none; }
  /* ⚠ LES DEUX BARRES REPRENNENT LA BARRE ORDINAIRE. Le réglage de la
     tablette — filet noir enlevé, filet gris dessous — n'a de sens que
     lorsqu'elles sont CÔTE À CÔTE sous le filet noir de leur rangée. Empilées,
     elles ouvrent chacune leur bloc. Le dessin restait au réglage tablette et
     traînait donc un filet gris sous son titre, que l'ancienne édition
     n'avait pas (Ludovic, 16/09 au soir). */
  .edition-rubrique-breves,
  .edition-zone:not(.edition-ancienne) .edition-rubrique-dessin {
    border-top: 1px solid var(--gris-texte);
    padding-top: 12px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .edition-breves .liste-lignes { margin-top: 2px; }

  /* Une seule vidéo s'empile comme les autres cartes. */
  .carte-ligne.carte-video-seule { display: block; }
  .carte-video-seule .carte-service { margin-top: 14px; }

  /* Les réels défilent jusqu'au bord de l'écran. */
  .reels-edition { gap: 14px; margin-right: -24px; padding-right: 24px; }
  .edition-porte { display: flex; justify-content: center; margin-top: var(--space-24); }
}


/* =========================================================================
   LA PAGE D'ACCUEIL (A, 15/09 ; écrite le 16/09) — la tablette, puis le
   téléphone. Les planches : « A · Tablette 768 » et « A · Mobile 390 ».

   LA TABLETTE (768 px, vaut jusqu'à 991). Le même ordre que le bureau, la
   question passée SOUS les deux d'à côté (Ludovic, 15/09). La une en pleine
   largeur ; les deux d'à côté côte à côte ; la question en colonnes, comme
   sur une édition ; les brèves et le dessin côte à côte. Enquêtes : la tête
   en grand, les trois suivantes en liste à vignette ; chroniques et dossiers
   côte à côte. Entretiens : deux seulement, côte à côte. Réels : une barre,
   l'étagère file vers le bord droit. Masterclass : la même affiche, avec un
   fondu à gauche pour lire le texte. Espacements 48 · 28 · 24.

   LE TÉLÉPHONE (390 px, sous 768). Tout s'empile : la une en grand, PUIS LES
   DEUX D'À CÔTÉ EN CARTES EN LIGNE (16/09), LES BRÈVES, LA QUESTION (30/09),
   le dessin entier ; les enquêtes suivantes en liste à vignette sans chapô ; les
   entretiens et les réels défilent, calés sur la marge gauche ; la newsletter
   s'empile ; LA MASTERCLASS EST UNE AFFICHE, tout son texte posé sur la photo
   et sans chapô (16/09). Tout ce qui se touche fait au moins 44 px, les
   boutons prennent toute la largeur. Espacements 40 · 24.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --espace-bloc: 40px;
    --espace-section: 48px;
    --espace-filet-noir: 28px;
    --espace-filet-clair: 28px;
    --gouttiere-colonnes: 48px;
    --gouttiere-rangee: 48px;
    --taille-titre-vedette: 36px;
    --taille-titre-une: 20px;
    --lignes-chapo-lateral: 3;
    --taille-titre-enquete: 34px;
    --taille-chapo-enquete: 18px;
    --taille-titre-abonnement: 26px;
    --taille-titre-entretien-accueil: 20px;
    --taille-titre-newsletter: 28px;
    --taille-titre-masterclass: 78px;
    --hauteur-masterclass: 620px;
    --largeur-texte-masterclass: 350px;
    --largeur-reel: 150px;
  }

  /* Le haut de page : une colonne, et deux rangées à deux colonnes. */
  .grille-une { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .grille-une > * { grid-column: auto; grid-row: auto; }
  .colonne-vedette    { order: 1; }
  .colonne-secondaire { order: 2; }
  .colonne-question   { order: 3; margin-top: 32px; }
  .colonne-breves     { order: 4; }
  .haut-accueil { margin-top: 28px; }
  /* Le lien d'une barre garde ses 44 px pour le doigt sans grandir la barre :
     « Brèves » et « Édition Bon pour la tête », côte à côte, restent
     alignées. */
  .haut-accueil .titre-barre .lien-suite { margin-block: -13px; }
  /* Cinq brèves à côté du dessin (planche du 30/09). */
  .breves-accueil .ligne:nth-child(n + 4) { display: list-item; }
  .colonne-secondaire,
  .colonne-breves {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere-colonnes);
    margin-top: var(--espace-filet-clair);
    padding-top: var(--espace-filet-clair);
    border-top: 1px solid var(--filet-clair);
  }
  .colonne-secondaire::before,
  .colonne-breves::after { content: none; }
  .colonne-secondaire .carte + .carte,
  .edition-semaine { border-top: 0; padding-top: 0; margin-top: 0; position: relative; }
  .colonne-secondaire .carte + .carte::before,
  .edition-semaine::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere-colonnes) / -2);
    width: 1px;
    background: var(--filet-clair);
  }
  /* La question passe en colonnes, comme sur une édition. */
  .colonne-question .cadre-empile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .colonne-question .cadre-empile .cadre-texte { padding: 32px 36px 36px; }
  .colonne-question .cadre-empile .cadre-action {
    padding: 32px 28px;
    gap: 14px;
    background: var(--fond-action);
    border-left: 1px solid var(--filet-clair);
  }
  .colonne-question .question-titre { font-size: var(--taille-titre-question); line-height: 1.14; margin-top: 14px; }
  .colonne-question .question-chapo { font-size: var(--taille-chapo-question); margin-top: 10px; }

  /* Les enquêtes : la tête, les trois suivantes en liste à vignette, puis
     les chroniques et les dossiers côte à côte. */
  .enquetes-cadre { grid-template-columns: minmax(0, 1fr); }
  .colonne-enquetes, .colonne-chroniques { grid-column: auto; }
  .colonne-chroniques::before { content: none; }
  .carte-enquete-tete { padding-bottom: 0; margin-bottom: 28px; border-bottom: 0; }
  .enquetes-suite { display: block; }
  .enquetes-suite > .carte {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 20px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--filet-clair);
  }
  .enquetes-suite > .carte:first-child { border-top: 1px solid var(--filet-clair); }
  .enquetes-suite > .carte::before,
  .enquetes-suite > .carte::after { content: none; }
  .enquetes-suite > .carte > a:first-child { grid-column: 1; grid-row: 1 / -1; }
  .enquetes-suite > .carte > :not(a:first-child) { grid-column: 2; }
  .enquetes-suite .carte-service { margin-top: 0; }
  .enquetes-suite .carte-titre { font-size: 21px; line-height: 1.2; margin-top: 8px; }
  .enquetes-suite .carte-extrait { -webkit-line-clamp: 2; line-clamp: 2; }
  .enquetes-suite .carte-auteur { margin-top: 6px; }
  .colonne-chroniques {
    margin-top: var(--espace-section);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere-colonnes);
  }
  .chroniques-liste .carte-ligne { --largeur-vignette-ligne: 120px; }
  .bloc-dossiers { margin-top: 0; position: relative; }
  .bloc-dossiers::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere-colonnes) / -2);
    width: 1px;
    background: var(--filet-clair);
  }

  /* L'abonnement se resserre. */
  .encart-papier { padding: 32px 36px; }
  .bandeau-abonnement { gap: 32px; }
  .abonnement-accroche { font-size: 17px; }
  .abonnement-actions { gap: 10px; }
  .abonnement-actions .bouton { width: 180px; }

  /* Les entretiens : deux, côte à côte, à la même taille (Ludovic, 15/09). */
  .entretiens-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entretiens-accueil > :nth-child(n + 3) { display: none; }
  .entretiens-accueil > :nth-child(n)::before,
  .entretiens-accueil > :nth-child(n)::after { content: none; }
  .entretiens-accueil > :nth-child(2)::before { content: ""; }
  .carte-entretien-accueil .carte-extrait { -webkit-line-clamp: 3; line-clamp: 3; }

  /* Les réels : la barre et son lien, sans les flèches ; l'étagère jusqu'au
     bord. */
  .bloc-reels { margin-top: 40px; }
  .reels-sep,
  .reels-fleches { display: none; }
  .bloc-reels .etagere-reels {
    margin-top: 20px;
    gap: 14px;
    margin-right: -24px;
    padding-right: 24px;
  }
  .titre-reel { font-size: 14px; }

  /* La newsletter se resserre. */
  .newsletter-cadre { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .newsletter-texte { padding: 32px; }
  .newsletter-accroche p { font-size: 17px; }
  .newsletter-accroche p + p { font-size: 14px; }
  .newsletter-form { padding: 28px 24px; }

  /* La masterclass : un fondu à gauche garde le texte lisible. */
  .bandeau-masterclass::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    z-index: 0;
    background: linear-gradient(90deg, rgba(20, 21, 20, .82) 0%, rgba(20, 21, 20, .6) 48%, rgba(20, 21, 20, 0));
  }
  .masterclass-fond img { object-position: 78% 30%; }
  .masterclass-texte { position: relative; z-index: 1; }
  .masterclass-accroche { font-size: 16px; line-height: 1.5; margin-top: 16px; }
  .masterclass-intervenants { font-size: 13px; margin-top: 14px; }
  .masterclass-actions { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 22px; }

  /* Tout ce qui se touche fait au moins 44 px. */
  .lien-suite { min-height: 44px; }
}

@media (max-width: 767px) {
  :root {
    --espace-bloc: 28px;
    --espace-section: 40px;
    --espace-filet-clair: 24px;
    --taille-titre-vedette: 28px;
    --taille-chapo-vedette: 17px;
    --taille-titre-une: 21px;
    --taille-titre-enquete: 26px;
    --taille-titre-abonnement: 24px;
    --taille-titre-entretien-accueil: 19px;
    --taille-titre-newsletter: 26px;
    --taille-titre-masterclass: 66px;
    --largeur-reel: 140px;
  }

  /* Le haut de page : tout s'empile. LES DEUX D'À CÔTÉ SONT EN LIGNE — la
     carte `carte-ligne-tel` de composants.css, chapô compris. Cette feuille
     ne pose ici que les filets qui les séparent ; leur disposition est celle
     du composant, partagée avec les articles 2 à 7 d'une édition.
     ⚠ Les enquêtes, elles, NE CHANGENT PAS (Ludovic, 16/09) : leur liste
       reste celle qu'elles ont depuis la tablette.

     🔴 LE FILET EST SUR LA CARTE, PLUS SUR LA COLONNE (Ludovic, 16/09 : « une
        double ligne »). À la tablette, la colonne porte son propre filet et
        son padding, et ses cartes n'en ont pas ; empilées, les deux jeux se
        superposaient — deux traits au-dessus de la première carte, et la
        deuxième collée à son filet, son image posée dessus. Ici, la colonne
        ne porte plus rien : chaque carte porte le sien, et son air.
     ⚠ Le second sélecteur ne double pas le premier par erreur : il lui donne
       le poids qu'il faut pour passer devant la règle de la tablette, qui
       vise `.carte + .carte`. */
  .colonne-secondaire {
    display: block;
    padding-top: 0;
    border-top: 0;
  }
  .colonne-secondaire .carte + .carte::before { content: none; }
  .colonne-secondaire > .carte,
  .colonne-secondaire > .carte + .carte {
    border-top: 1px solid var(--filet-clair);
    border-bottom: 0;
    padding-block: 20px;
    margin-top: 0;
  }
  .colonne-secondaire > .carte:last-child { border-bottom: 1px solid var(--filet-clair); }
  .haut-accueil { margin-top: 24px; }
  .breves-accueil .ligne:nth-child(n + 4) { display: none; }
  .colonne-question { margin-top: 32px; }
  .colonne-question .cadre-empile { display: block; }
  .colonne-question .cadre-empile .cadre-texte { padding: 24px 26px 0; }
  .colonne-question .cadre-empile .cadre-action {
    padding: 18px 26px 26px;
    gap: 10px;
    background: transparent;
    border-left: 0;
    border-top: 0;
  }
  .colonne-question .question-titre { font-size: var(--taille-titre-question-empilee); line-height: 1.18; margin-top: 12px; }
  .colonne-question .question-chapo { font-size: 16px; margin-top: 8px; }
  /* LES BRÈVES AVANT LA QUESTION, LE DESSIN APRÈS (Ludovic, 30/09) : la
     colonne des brèves se dissout, et ses deux groupes deviennent des cases
     de la grille, que l'ordre range de part et d'autre de la question. */
  .colonne-breves { display: contents; }
  .breves-fil { order: 3; margin-top: 40px; }
  .colonne-question { order: 4; }
  .edition-semaine { order: 5; margin-top: 40px; }
  .edition-semaine::before { content: none; }
  .edition-semaine .cadre-dessin { margin-top: 16px; }
  .edition-semaine .lien-suite { margin-top: 4px; }

  /* Les enquêtes : la tête au calibre d'une carte, les suivantes sans chapô. */
  .carte-enquete-tete { margin-top: 24px; margin-bottom: 24px; }
  .carte-enquete-tete .carte-service { margin-top: 14px; font-size: var(--taille-service-carte); }
  .carte-enquete-tete .carte-titre { line-height: 1.1; letter-spacing: -.01em; margin-top: 10px; }
  .carte-enquete-tete .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;
  }
  .carte-enquete-tete .carte-auteur { font-size: var(--taille-auteur-carte); margin-top: 10px; }
  .enquetes-suite > .carte { grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .enquetes-suite .carte-titre { font-size: 17px; }
  .enquetes-suite .carte-extrait { display: none; }
  .colonne-chroniques { display: block; margin-top: 40px; }
  .chroniques-liste .carte-ligne { --largeur-vignette-ligne: 116px; column-gap: 14px; }
  .bloc-dossiers { margin-top: 40px; }
  .bloc-dossiers::before { content: none; }

  /* L'abonnement s'empile, le bouton prend toute la largeur. */
  .encart-papier { padding: 28px 20px; }
  .bandeau-abonnement { display: block; }
  .abonnement-accroche { font-size: 16px; }
  .abonnement-actions { margin-top: 20px; gap: 0; }
  .abonnement-actions .bouton { width: 100%; }
  .abonnement-don { display: inline-flex; align-items: center; min-height: 44px; }
  /* Des boutons côte à côte dans une page (le don) : empilés, toute la largeur. */
  .boutons-rangee .bouton { width: 100%; }

  /* Les entretiens défilent, calés sur la marge gauche (l'idée du mobile B
     de l'édition, reprise ici — Ludovic, 15/09). */
  .entretiens-accueil {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-top: 24px;
    margin-right: -24px;
    padding-right: 24px;
  }
  .entretiens-accueil::-webkit-scrollbar { display: none; }
  .entretiens-accueil > * { flex: 0 0 292px; scroll-snap-align: start; display: block; }
  .entretiens-accueil > :nth-child(n)::before,
  .entretiens-accueil > :nth-child(n)::after { content: none; }

  /* Les réels : la barre et son lien, puis l'étagère. */
  .bloc-reels { margin-top: 32px; }
  .bloc-reels .etagere-reels { margin-top: 16px; }

  /* La newsletter s'empile. */
  .bloc-newsletter { margin-bottom: 0; }
  .newsletter-cadre { display: block; }
  .newsletter-texte { padding: 24px 20px; }
  .newsletter-titre { margin-top: 10px; }
  .newsletter-form { border-left: 0; border-top: 1px solid var(--filet-clair); padding: 20px 20px 24px; }

  /* LA MASTERCLASS : UNE AFFICHE, LE TEXTE SUR LA PHOTO (Ludovic, 16/09).
     Le téléphone posait la photo, puis le titre sur son fondu, puis le texte
     sur une bande noire : deux blocs empilés au lieu d'une affiche, et la
     photo coupée sous les intervenantes. Ici, la photo tient toute la case et
     le texte se pose dessus, centré. ⚠ PAS DE CHAPÔ : sur une image, il ne se
     lit pas, et il n'a plus rien à expliquer que le titre ne dise.

     TROIS RANGÉES, et c'est ce qui met LE LIBELLÉ EN HAUT (Ludovic, 16/09),
     comme sur l'affiche du site : le libellé en haut, le titre calé en bas de
     la rangée élastique du milieu, le reste dessous. Pour qu'ils deviennent
     chacun une case de cette grille, les deux boîtes qui les portent se
     dissolvent (`display: contents`) — elles ne portent donc plus la marge du
     conteneur, et chaque case pose la sienne. */
  .bandeau-masterclass {
    margin-top: var(--espace-section);
    background: var(--c-noir);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    text-align: center;
  }
  .bandeau-masterclass::before { content: none; }
  .masterclass-fond {
    position: relative;
    inset: auto;
    z-index: auto;
    grid-column: 1;
    grid-row: 1 / -1;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .masterclass-fond img { object-position: 78% 18%; }
  /* Le fondu ne décore pas : il fait le contraste sous le texte. */
  .masterclass-fond::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(180deg, rgba(20, 21, 20, 0) 0%, rgba(20, 21, 20, .72) 46%, rgba(20, 21, 20, .95) 100%);
  }
  .masterclass-texte,
  .masterclass-tete { display: contents; }
  .masterclass-surtitre,
  .masterclass-titre,
  .masterclass-corps {
    grid-column: 1;
    position: relative;
    z-index: 1;
    max-width: none;
    padding-inline: 24px;   /* la marge du conteneur, qui ne les porte plus */
  }
  .masterclass-surtitre {
    grid-row: 1;
    font-size: 11px;
    color: var(--c-blanc);
    margin: 0;
    padding-top: 26px;
    text-shadow: 0 1px 12px rgba(20, 21, 20, .7);
  }
  .masterclass-titre { grid-row: 2; align-self: end; margin-top: 0; }
  .masterclass-corps { grid-row: 3; padding-bottom: 28px; }
  .masterclass-accroche { display: none; }
  .masterclass-intervenants { margin-top: 14px; }
  .masterclass-actions { margin-top: 20px; align-items: stretch; gap: 6px; }
  .masterclass-actions .bouton { width: 100%; }
  .masterclass-actions .lien-suite { justify-content: center; }
  /* Avec une image verticale propre au téléphone : l'affiche du site, à son
     format, et le même texte au pied. */
  .masterclass-verticale .masterclass-fond { aspect-ratio: 9 / 16; }
}


/* =========================================================================
   L'ARCHIVE DES ÉDITIONS — C2 aux deux autres largeurs (16/09).

   LA TABLETTE (768, vaut jusqu'à 991). La colonne d'identité passe AU-DESSUS
   de la ligne, le « + » reste à droite ; le sommaire garde ses DEUX colonnes
   et prend toute la largeur ; « Ouvrir l'édition » et PDF · ePub se posent
   sur une ligne sous le numéro, une fois déplié. La barre des années tient
   sans défiler. Espacements : 28 autour d'un filet quand la ligne est
   ouverte, 24 quand elle est fermée.

   LE TÉLÉPHONE (390, sous 768). Même empilement, sommaire sur UNE SEULE
   colonne : à 350 px de large, deux colonnes donnent des titres de cinq
   lignes. La barre des années défile à l'horizontale sur une ligne calée sur
   la marge gauche, exactement comme la bande d'un numéro, et le tri passe
   dessous. « Ouvrir l'édition » devient un bouton pleine largeur en bas de la
   ligne ouverte, PDF · ePub centré dessous. Le « + » et le « − » font 44 px.
   Replié, le résumé est coupé à trois lignes.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --taille-numero-edition: 28px;
    --taille-resume-edition: 19px;
    --taille-titre-sommaire: 18px;
    --gouttiere-sommaire: 28px;
    --largeur-pli: 44px;
  }

  /* LE MANCHON PARTAGÉ (`composants.css`) — l'archive des éditions, l'archive
     d'une rubrique. La bande d'un numéro fait 48 px de haut ici : ses cases
     font 44, le manchon n'a plus de padding et les siennes non plus. */
  .manchon { padding: 0; }
  .tri-manchon > .tri-pli > .tri-resume { min-height: 44px; }

  /* Les cases du manchon font 44 px : c'est ce qui porte la bande d'un numéro
     à 48 px de haut ici. Le défilement, lui, est le comportement de base du
     composant — il ne se déclenche pas à une largeur, il est toujours là. */
  /* 49 = les 44 px du doigt + les 5 px que la barre prend dans son padding
     pour le soulignement, et rend par sa marge (composants.css, 23/09). */
  .manchon-barre { gap: 20px; min-height: 49px; }
  .manchon-onglet { display: inline-flex; align-items: center; min-height: 44px; }

  /* LA LIGNE D'UNE ÉDITION : l'identité passe AU-DESSUS des titres, le signe
     garde le coin haut droit — c'est lui qu'on lit, et il doit rester à la
     hauteur du numéro. Il vit dans le dépliant, qui est en dessous : il s'y
     accroche donc à la ligne entière, qui est son repère (`position:
     relative` sur `.ligne-edition`). */
  .ligne-edition {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 24px 0;
  }
  .ligne-edition-identite {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 22px;
    row-gap: 12px;
    padding-right: calc(var(--largeur-pli) + 16px);
  }
  .ligne-edition-numero { flex: 0 0 100%; }
  .ligne-edition-ouvrir { min-height: 44px; display: inline-flex; align-items: center; margin-top: 0; }
  .ligne-edition-fichiers { margin-top: 0; }
  /* ⚠ `top: 0` et non la valeur du padding : dans une grille, la boîte de
     référence d'un élément absolu commence au CONTENU, pas au bord. Le signe
     se pose donc sur la première ligne du numéro, quelle que soit la
     respiration de la ligne. */
  .pli-icone { position: absolute; top: 0; right: 0; }
  .ligne-edition-sommaire { margin-top: 0; }
  .ligne-edition-sommaire > li { padding: 14px 0; }
}

@media (max-width: 767px) {
  :root {
    --taille-numero-edition: 26px;
    --taille-resume-edition: 18px;
    --colonnes-sommaire: 1;
    --gouttiere-sommaire: 0px;
  }

  .ligne-edition { padding: 20px 0; gap: 12px; }
  .ligne-edition-resume { line-height: 1.45; }

  /* Sur une seule colonne, la première ligne de la grille est la PREMIÈRE
     entrée : la deuxième reprend son filet. */
  .ligne-edition-sommaire > li:nth-child(2) { border-top: 1px solid var(--filet-clair); padding-top: 14px; }
}


/* =========================================================================
   L'ARCHIVE D'UNE RUBRIQUE — la une et le fil (écrite le 17/09)

   LA TABLETTE (768, jusqu'à 991). La une passe en pleine largeur ; le fil
   garde la carte en ligne, vignette ramenée à 180. Les formats courts
   DESCENDENT SOUS LE FIL, sur deux colonnes séparées d'un filet clair qui
   court sur toute la hauteur de la rangée — c'est ce qui équilibre les deux
   colonnes quand la rubrique en porte trois ou quatre.

   LE TÉLÉPHONE (390, sous 768). Tout s'empile dans l'ordre du bureau : la
   une, le fil, puis les formats courts, l'un sous l'autre. Le fil passe en
   entrées à vignette de 120 et PERD SON CHAPÔ — dix chapôs à la file ne se
   lisent pas sur 350 px. « Charger la suite » prend toute la largeur.

   Le manchon, lui, n'est pas traité ici : c'est le composant partagé de
   l'archive des éditions, et il défile déjà, le tri calé à droite.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --taille-titre-liste: 40px;
    --taille-pastille-rubrique: 18px;
    --taille-titre-une-liste: 34px;
    --taille-texte-une-liste: 17px;
    --taille-titre-fil-rubrique: 21px;
    --largeur-vignette-fil-rubrique: 180px;
    --espace-fil-rubrique: 22px;
    --espace-rubrique-colonne: 48px;
  }

  .titre-a-pastille { gap: 14px; }
  .rubrique-manchon { margin-top: var(--space-24); }

  /* Une seule colonne : le fil, puis les formats courts dessous. */
  .rubrique-corps { grid-template-columns: minmax(0, 1fr); }

  /* Le filet de la gouttière n'a plus de gouttière où se tracer ; il passe
     ENTRE LES DEUX COLONNES de la rangée, en un seul trait continu qui court
     du haut au bas de la zone — les blocs, eux, ne portent rien. */
  .rubrique-colonne {
    columns: 2;
    column-gap: var(--gouttiere-colonnes);
    column-rule: 1px solid var(--filet-clair);
    margin-top: var(--espace-bloc);
  }
  .rubrique-colonne::before { content: none; }
  /* ⚠ DEUX COLONNES DE TEXTE, PAS UNE GRILLE. En grille, la rangée prend la
     hauteur du bloc le plus haut : les dessins creusaient un trou de 600 px
     sous les chroniques (mesuré le 17/09, à 768). En colonnes, les blocs se
     tassent et le navigateur équilibre les deux hauteurs — c'est ce que la
     planche appelle « les dessins à droite, c'est ce qui équilibre ». Un bloc
     ne se coupe jamais en deux. */
  .rubrique-bloc { break-inside: avoid; }
  .rubrique-bloc + .rubrique-bloc { margin-top: var(--espace-rubrique-colonne); }

  .rubrique-fil { margin-top: 28px; }
  .rubrique-fil > .carte { --gouttiere-carte-ligne: 22px; }
}

@media (max-width: 767px) {
  :root {
    --taille-titre-liste: 30px;
    --taille-pastille-rubrique: 15px;
    --taille-titre-une-liste: 27px;
    --taille-texte-une-liste: 16px;
    --taille-titre-fil-rubrique: 17px;
    --largeur-vignette-fil-rubrique: 120px;
    --espace-fil-rubrique: 18px;
    --espace-rubrique-colonne: 40px;
  }

  .titre-a-pastille { gap: 11px; }

  /* Les formats courts s'empilent : deux colonnes de 160 px ne montrent ni un
     dessin ni un titre. Le filet tombe avec la seconde colonne. */
  .rubrique-colonne { columns: 1; column-rule: 0; }

  /* LE FIL PERD SON CHAPÔ (planche « Rubrique · mobile 390 ») : c'est le parti
     de l'édition mobile B — sur 350 px, dix chapôs à la file ne se lisent pas,
     et la signature tient sur deux lignes voulues plutôt qu'un retour subi. */
  .rubrique-fil > .carte { --gouttiere-carte-ligne: 14px; }
  .carte-fil-rubrique .carte-extrait { display: none; }
  .carte-fil-rubrique .carte-titre { margin-top: 6px; }

  /* Tout ce qui se touche fait au moins 44 px, et le bouton prend la largeur. */
  .rubrique-suite { margin-top: var(--space-24); }
  .rubrique-suite .bouton { width: 100%; }
}


/* =========================================================================
   LA UNE ET LA GRILLE (22/09 au soir) — les articles, le courrier

   Au bureau, la une est en ligne : la vignette sur 7, le texte sur 5. Sous
   768, elle s'empile — une vignette sur la moitié de 350 px n'est plus une
   image, et le titre d'une une ne se lit pas sur deux mots par ligne.
   ========================================================================= */
@media (max-width: 991px) {
  .carte-une-large { --gouttiere-carte-ligne: 28px; }
}

@media (max-width: 767px) {
  .carte-une-large {
    display: flex;
    flex-direction: column;
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  .carte-une-large .carte-service { margin-top: 14px; }
}


/* =========================================================================
   LA BANDE D'UN DOSSIER — l'archive (A) et la page d'un dossier (D1)

   LA TABLETTE (sous 992). L'identité passe AU-DESSUS des lignes : sur 720
   px, 300 pour le nom en laissaient 380 aux lignes. Sur l'archive, le nom et
   « Tout le dossier → » partagent une ligne, le chapeau court dessous sur
   560 px. Les lignes gardent 160 px de vignette, la gouttière passe à 20.

   LE TÉLÉPHONE (sous 768). Tout s'empile : « Tout le dossier → » passe SOUS
   le chapeau. Les lignes prennent les valeurs du fil d'une rubrique — 120 et
   14 — et, comme lui, perdent leur chapô.
   ========================================================================= */
@media (max-width: 991px) {
  :root {
    --taille-nom-vitrine: 26px;
    --lignes-chapeau-vitrine: 3;
    --largeur-chapeau-vitrine: 560px;
    --espace-bande-dossier: 28px;
    --gouttiere-ligne-dossier: 20px;
    --taille-nom-dossier: 32px;
    --taille-chapeau-dossier: 20px;
    --taille-etape-dossier: 21px;
    --taille-nom-voix: 30px;
    --taille-portrait-voix: 72px;
    --taille-portrait-voix-page: 96px;
  }
  .bandes-larges {
    --vignette-ligne-dossier: 160px;
    --gouttiere-ligne-dossier: 20px;
    --espace-ligne-dossier: 18px;
    --taille-titre-ligne-dossier: 18px;
  }
  .bande-dossier {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identite" "contenus";
  }
  .bande-dossier-identite::after { content: none; }
  .bande-dossier-contenus { margin-top: 10px; }
  .vitrine .bande-dossier-identite {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom suite" "chapeau chapeau";
    align-items: baseline;
    column-gap: 20px;
  }
  .vitrine-chapeau { margin-top: 10px; }
  /* Tout ce qui se touche fait au moins 44 px. */
  .vitrine-suite { margin-top: 0; min-height: 44px; }
  .dossier-intro { padding-bottom: var(--espace-bloc); }
  .dossier-intro .bande-dossier-contenus { margin-top: 16px; }

  /* LE FIL DES BRÈVES : l'identité du jour tient sur une ligne au-dessus de
     ses brèves — l'âge, le nom. Le premier jour tombe à l'espace d'après un
     filet noir, comme le premier dossier (archive.css). La première brève suit
     le nom du jour sans filet, à l'écart d'une ligne. */
  :root {
    --taille-nom-jour: 24px;
    --taille-titre-breve: 20px;
  }
  .jour-breves-identite {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
  }
  .age-jour { margin-bottom: 0; align-self: center; }
  .jour-breves .bande-dossier-contenus { margin-top: 0; }
  .jour-breves .ligne-breve:first-child { padding-top: 12px; }
}

@media (max-width: 767px) {
  :root {
    --taille-nom-vitrine: 22px;
    --taille-chapeau-vitrine: 14px;
    --espace-bande-dossier: 24px;
    --vignette-ligne-dossier: 120px;
    --gouttiere-ligne-dossier: 14px;
    --espace-ligne-dossier: 16px;
    --taille-nom-dossier: 28px;
    --taille-chapeau-dossier: 18px;
    --taille-etape-dossier: 19px;
    --taille-nom-voix: 26px;
    --taille-portrait-voix: 64px;
    --taille-portrait-voix-page: 80px;
  }
  .bandes-larges {
    --vignette-ligne-dossier: 120px;
    --gouttiere-ligne-dossier: 14px;
    --espace-ligne-dossier: 16px;
    --taille-titre-ligne-dossier: 17px;
  }
  .bandes-larges .carte-bande .carte-extrait { display: none; }
  .vitrine .bande-dossier-identite {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nom" "chapeau" "suite";
  }
  :root {
    --taille-nom-jour: 21px;
    --taille-titre-breve: 18px;
    --taille-chapo-breve: 14px;
  }
}

/* --- L'archive des éditions (A2, 23/09) -------------------------------------
   La bande s'empile comme celle d'un dossier. À la tablette, l'identité tient
   sur UNE ligne au-dessus du numéro : le numéro, la date, « Ouvrir
   l'édition », PDF · ePub (Ludovic, 24/09). Au téléphone, elle passe sur
   deux — le numéro et la date, puis « Ouvrir l'édition » et les fichiers —,
   et la suite sur une colonne. */
@media (max-width: 991px) {
  :root { --taille-numero-bande-edition: 36px; }
  .bande-edition-identite {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
  }
  .bande-edition-date,
  .bande-edition-ouvrir,
  .bande-edition-fichiers { margin-top: 0; }
  .bande-edition-ouvrir { margin-left: 8px; }
}
@media (max-width: 767px) {
  :root { --taille-numero-bande-edition: 30px; }
  .bande-edition-identite {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bande-edition-ouvrir,
  .bande-edition-fichiers a { display: inline-flex; align-items: center; min-height: 44px; }
  .bande-edition-ouvrir { margin: 4px 0 0; }
  .bande-edition-suite > li { padding: 16px 0; }
  .bande-edition-suite > li:nth-child(2) { border-top: 1px solid var(--filet-clair); }
}

/* --- Le profil d'une signature (B2, 23/09) ---------------------------------
   Le bureau seul est dessiné. D'ici là, la fiche garde sa photo à gauche,
   plus petite ; la légende et les liens passent à la ligne d'eux-mêmes. */
@media (max-width: 991px) {
  :root { --taille-portrait-profil: 96px; }
}
@media (max-width: 767px) {
  :root { --taille-portrait-profil: 72px; }
}

/* --- La page Équipe (B2, 23/09) ---------------------------------------------
   Le bureau seul est dessiné. D'ici là : la bande du comité s'empile comme
   celle des dossiers ; trois colonnes, puis deux, et des visages plus petits. */
@media (max-width: 991px) {
  :root { --taille-portrait-membre: 96px; --taille-portrait-visage: 88px; }
  .equipe-personnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipe-comite .bande-dossier-contenus { margin-top: 24px; }
}
@media (max-width: 575px) {
  :root { --taille-portrait-membre: 80px; --taille-portrait-visage: 72px; --taille-nom-equipe: 17px; }
  .equipe-personnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--espace-interne); }
}


/* --- La leçon d'une masterclass (A v2, 24/09) --------------------------------
   Sous 992 px, une seule colonne : la vidéo, puis deux onglets — la
   description, le programme. Le rail perd sa tête (la masterclass est dans
   l'ariane) et ne colle plus. Sans script, les onglets restent cachés et le
   texte puis le programme s'empilent. Au téléphone, la vidéo va aux bords. */
@media (max-width: 991px) {
  :root { --taille-titre-lecon: 32px; }
  /* La grille s'empile et les onglets se montrent : `.grille-rail` et
     `.manchon-onglets`, composants.css. */
  .lecon-rail,
  body:has(.entete.escamote) .lecon-rail { position: static; max-height: none; overflow: visible; }
  .onglets-actifs .lecon-rail-tete { display: none; }
  .onglets-actifs .lecon-modules,
  .onglets-actifs .lecon-lignes-seules { margin-top: 8px; }
  /* Sous le double filet du manchon, la première ligne n'a pas le sien. */
  .onglets-actifs .lecon-lignes-seules > .lecon-ligne:first-child,
  .onglets-actifs .lecon-module:first-child { border-top: 0; }
  .onglets-actifs .lecon-texte { margin-top: 24px; }
  .lecon-page:not(.onglets-actifs) .lecon-rail { margin-top: var(--espace-bloc); }
  .lecon-texte { max-width: none; }
}
@media (max-width: 767px) {
  :root {
    --taille-titre-lecon: 26px;
    --largeur-fleche-lecon: 36px;
    --hauteur-fleche-lecon: 52px;
  }
  .lecon-titre { margin-top: 6px; }
  .lecon-lecteur { margin: 20px -24px 0; }  /* aux bords : le padding de `.conteneur` (trame.css) */
  .lecon-bulle { display: none !important; }
  .lecon-verrou-texte { padding: 0 48px; gap: 10px; }
  .lecon-verrou-titre { font-size: 17px; }
  .lecon-verrou-texte > svg { display: none; }
}

/* --- La présentation d'une masterclass (C, 24/09) ------------------------
   Le bureau seul est dessiné. D'ici là : le rail passe sous le texte, et
   « Commencer » sous la vidéo. */
@media (max-width: 991px) {
  .presentation-commencer-tel { display: block; margin-top: 20px; border-top: 0; padding-top: 0; }
  .presentation-commencer-tel .bouton { width: auto; }
  .presentation-rail .presentation-commencer { display: none; }
  .presentation-rail { margin-top: var(--espace-bloc); }
  .presentation-programme-titre { margin-top: 0; }
}
@media (max-width: 767px) {
  .presentation-grille .lecon-lecteur { margin: 0 -24px; }
  .presentation-commencer-tel .bouton { width: 100%; }
}

/* --- La page d'un entretien (planche A, 24/09) -------------------------------
   Sous 992 px, une seule colonne (`.grille-rail`) : la vidéo, les deux
   onglets — « Description » et « Sommaire · N chapitres » (`.manchon-onglets`)
   —, la partie choisie, puis le partage. Le sommaire s'y lit en entier, sans
   sa barre : l'onglet la remplace. Sans script, pas d'onglets : le texte,
   le sommaire et le partage s'empilent.
   ⚠ La colonne de gauche s'ouvre (`display: contents`) pour que le sommaire,
     qui est au rail, vienne se placer AVANT le partage, qui est à gauche : un
     seul balisage, deux ordres. Au téléphone, la vidéo va aux bords, comme
     celle d'une leçon. */
@media (max-width: 991px) {
  .video-titre { max-width: none; }
  .video-principal,
  .video-rail { display: contents; }
  .video-grille > *,
  .video-principal > *,
  .video-rail > * { order: 2; }
  .video-lecteur { order: 0; }
  .video-grille .manchon-onglets { order: 1; }
  .video-partage { order: 3; }
  /* Le partage, sous le texte : une ligne entre filets, le lien vers le fil
     poussé à droite. */
  .video-partage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--filet-clair);
  }
  .video-partage .detail-partage,
  .video-partage .partage-liens { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .video-partage .rail-commentaires { margin: 0 0 0 auto; }
  .video-partage .rail-commentaires a { color: var(--gris-texte); font-weight: 500; }
  .video-texte,
  .video-partage { max-width: none; }
  .onglets-actifs .video-texte { margin-top: 24px; }
  .onglets-actifs .video-sommaire { margin-top: 8px; }
  .onglets-actifs .video-sommaire-titre { display: none; }
  .video-grille:not(.onglets-actifs) .video-sommaire { margin-top: var(--espace-bloc); }
  /* Entier, jamais replié : c'est un onglet à lui seul. */
  .video-sommaire.est-replie .video-chapitres-cadre { max-height: none; overflow: visible; }
  .video-sommaire.est-replie .video-chapitres-cadre::after,
  .video-chapitres-tout { display: none; }
  .video-chapitres-cadre { margin-top: 0; }
  .video-chapitre a { padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  /* « À voir aussi » : deux vidéos par ligne à la tablette — L'IMAGE, LE
     TITRE ET DEUX LIGNES DU CHAPÔ, comme les cartes d'une édition ; ni ligne
     de service ni noms (Ludovic, 30/09 : « réduire la taille des cartes »). */
  .est-page-video .detail-aussi .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est-page-video .detail-aussi .carte-service,
  .est-page-video .detail-aussi .carte-auteur { display: none; }
  .est-page-video .detail-aussi .carte-titre { margin-top: 12px; font-size: 18px; line-height: 1.25; }
  .est-page-video .detail-aussi .carte-extrait { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (max-width: 767px) {
  .video-grille { margin-top: 20px; }
  /* Aux bords : le padding de `.conteneur` (trame.css), de part et d'autre —
     la largeur est écrite (detail.css), elle s'élargit donc d'autant. */
  .video-lecteur { width: calc(100% + 48px); margin: 0 -24px; }
  .video-verrou-titre { font-size: 17px; }
  .video-cadenas,
  .video-verrou-phrase { display: none; }
  /* « À voir aussi », en lignes (`.carte-ligne-tel`), chacune sur son filet
     clair — sauf la première, sous le filet noir de la barre. */
  .est-page-video .detail-aussi .grille-4 { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .est-page-video .detail-aussi .carte { padding: 16px 0; }
  .est-page-video .detail-aussi .carte + .carte { border-top: 1px solid var(--filet-clair); }
  /* Au téléphone, L'IMAGE ET LE TITRE SEULS (Ludovic, 30/09). */
  .est-page-video .detail-aussi .carte-extrait { display: none; }
  .est-page-video .detail-aussi .carte-titre { margin-top: 0; font-size: 17px; line-height: 1.25; }
}

/* ---------------------------------------------------------------------------
   LE PIED DE PAGE (planche 2 sombre, 29/09 au soir). La planche ne dessine
   que le bureau. Sous 992 px, l'identité passe au-dessus et les colonnes
   vont par deux, sous un filet qui prend la place du filet vertical ; au
   téléphone, la ligne légale s'empile.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .pied-tete { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pied-identite { max-width: 520px; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-top: 32px; border-top: 1px solid var(--filet-sur-sombre); }
  .pied-grille::before { content: none; }
}

@media (max-width: 767px) {
  .pied { padding-bottom: 28px; }
  .pied-tete { padding-top: 28px; }
  .pied-bas { flex-direction: column; align-items: flex-start; margin-top: 32px; }
}