/* =========================================================================
   GABARIT DE DÉTAIL — detail.html
   Un seul gabarit pour tout le texte et la vidéo (journal v5.1). Deux états,
   pilotés par des classes posées sur <main class="detail"> :
   — .est-video   : le lecteur remplace l'image de tête ;
   — .est-reserve : le mur d'abonnement coupe le texte.
   ========================================================================= */

/* --- Les largeurs de la page de lecture ----------------------------------
   Le titre, le chapô et le média respirent sur une colonne large ; le texte
   courant se lit sur une colonne plus étroite (~75 signes par ligne). Les
   deux sont centrées : l'axe de lecture ne bouge pas.

   ⚗ 08/09 — LA COLONNE DE LECTURE N'EST PLUS CENTRÉE PAR UNE MARGE AUTO,
     elle est LA COLONNE DU MILIEU d'une grille à trois (voir plus bas). Ces
     règles ne portent donc plus que ce qui vit AU-DESSUS des rails : la tête
     et le chapô d'ouverture. */
.detail-ariane-ligne,
.detail-entete,
.detail-media {
  max-width: var(--largeur-entete-detail);
  margin-left: auto;
  margin-right: auto;
}

/* 🔴 LA TÊTE SANS MÉDIA : L'ARIANE À GAUCHE, LE TITRE SUR LA COLONNE DE TEXTE
   (Ludovic, 17/09). Elle tenait sur une bande de 800 px centrée, donc à
   320 px du bord — ni la marge de page, ni la colonne de lecture : un
   troisième axe sur une page qui n'a qu'une colonne. Deux corrections, dans
   cet ordre :

     1) LE FIL D'ARIANE VA À LA MARGE DE PAGE, x=104, comme sur un article et
        comme sur toutes les autres pages du site. C'est un élément de page,
        il ouvre la page.
     2) LE TITRE ET SA LIGNE DE SERVICE VONT SUR LA COLONNE DU MILIEU, juste
        au-dessus du texte qu'ils annoncent — « le titre est super large du
        coup, il devrait être aligné avec le corps du texte ». Pleine largeur,
        un titre de brève courait sur 1 232 px.

   La grille est CELLE DE LA LECTURE, `--colonnes-lecture` : le titre tombe
   donc exactement sur la verticale du texte, quelle que soit la largeur de la
   fenêtre — c'est la même mécanique que le chapô d'ouverture d'un article.

   Une brève y est toujours — elle ne porte jamais d'image (01/09) —, et avec
   elle tout contenu sans image de une.
   ⚠ La règle de base reste pour `page.php` (les pages du média), qui n'a ni
     média ni rails : là, la bande centrée EST la mise en page.
   ⚠ Sous 900 px les rails tombent et la grille se défait (responsive.css) :
     le titre reprend la pleine largeur, comme le texte. */
.detail.est-tete-pleine .detail-tete {
  display: grid;
  grid-template-columns: var(--colonnes-lecture);
  column-gap: var(--gouttiere-lecture);
}
.detail.est-tete-pleine .detail-ariane-ligne,
.detail.est-tete-pleine .detail-entete {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}
.detail.est-tete-pleine .detail-ariane-ligne { grid-column: 1 / -1; }
.detail.est-tete-pleine .detail-entete       { grid-column: 2; }
/* ⚗ Le chapô d'ouverture n'est pas centré par une marge auto non plus : il
   est posé sur LA MÊME grille que les trois colonnes, colonne du milieu, et
   tombe donc sur la verticale exacte du texte quelle que soit la largeur de
   la fenêtre — voir « Les trois colonnes » plus bas. */
.detail-ouverture {
  display: grid;
  grid-template-columns: var(--colonnes-lecture);
  column-gap: var(--gouttiere-lecture);
}
.detail-ouverture > .detail-chapo { grid-column: 2; min-width: 0; }

/* --- Fil d'ariane : Accueil, le format, la rubrique, puis où c'est paru ---- */
/* La LIGNE d'ariane porte deux choses : le chemin à gauche, et — sur un
   contenu fermé seulement — la puce « Réservé aux abonnés » poussée à droite.
   Le lecteur apprend le mur AVANT de commencer à lire, au lieu de le
   découvrir au milieu du texte. Ce que le chemin contient est dans
   antithese_etapes_ariane() ; ce fichier ne porte que sa forme.

   🔴 LES MÊMES VALEURS QUE `.archive-ariane` (Ludovic, 17/09) : 24 px sous la
      barre, 18 px avant ce qui suit, le même séparateur. Les deux fils
      d'ariane du site avaient dérivé sur trois valeurs — 20 px de marge basse
      au lieu de 18, et un « › » en gris de TEXTE au lieu du gris de FILET,
      donc plus sombre que celui des archives. On ne les voit jamais côte à
      côte, et c'est précisément pour ça qu'ils doivent être identiques : on
      passe de l'un à l'autre. */
.detail-ariane-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-24);
  margin-bottom: 18px;
}
.detail-ariane-ligne .puce-reserve { margin-left: auto; flex: none; }
.detail-ariane {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  min-width: 0;
}
.detail-ariane a { border-bottom: 1px solid var(--gris-filet); }
.detail-ariane .sep { margin: 0 7px; color: var(--gris-filet); }

/* --- Tête du contenu ----------------------------------------------------- */
.detail-titre {
  /* ⚗ 09/09 — plus de League Gothic en capitales sur le titre d'un contenu
     (Ludovic). Les trois variables sont dans variables.css, bloc « LES
     LISTES » : c'est là qu'on compare. */
  font-family: var(--police-titre-page);
  font-weight: var(--graisse-titre-page);
  text-transform: var(--casse-titre-page);
  font-size: var(--taille-titre-detail);
  line-height: 1.15;
  margin: 12px 0 16px;
}
.detail-meta {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.detail-meta a { border-bottom: 1px solid var(--gris-filet); }

/* Signature de tête : portrait rond + ligne de méta. Le portrait est plus
   petit que celui de la signature de fin (--taille-portrait-auteur) et ne
   porte pas le mot « image » — il serait illisible à ce diamètre. */
.detail-auteur {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.portrait-auteur {
  width: var(--taille-portrait-auteur);
  height: var(--taille-portrait-auteur);
  flex: 0 0 var(--taille-portrait-auteur);
}
.portrait-auteur::after { content: none; }

/* --- Tête « site actuel » : titre et image CÔTE À CÔTE -------------------
   L'héritage de mise en page de Bon pour la tête, reproduit pour
   comparaison — bascule « Tête » du panneau de démo. Le titre et ses
   métadonnées occupent la colonne de gauche, l'image la colonne de
   droite ; la tête prend alors toute la largeur du conteneur, et le
   corps de texte reste sur sa colonne de lecture centrée.
   On ne déplace rien dans le HTML : l'article passe en grille. */
.detail.est-tete-actuelle .detail-tete {
  display: grid;
  grid-template-columns: var(--grille-tete-detail);
  gap: 0 40px;
  align-items: start;
}
/* ⚠ Les marges auto de la version centrée doivent sauter ici : sur un
   élément de grille, margin auto le fait RÉTRÉCIR à son contenu au lieu
   de le laisser remplir sa colonne. */
.detail.est-tete-actuelle .detail-ariane-ligne,
.detail.est-tete-actuelle .detail-entete,
.detail.est-tete-actuelle .detail-media {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* ⚠ AUCUNE RANGÉE N'EST NUMÉROTÉE ICI, et c'est la règle à ne pas casser.
   Une rangée écrite en dur (`grid-row: 2`) suppose qu'un fil d'ariane occupe
   toujours la rangée 1. Le jour où un contenu n'a ni rubrique ni dossier, le
   fil d'ariane disparaît, la rangée 1 se libère — et le corps de l'article,
   lui, n'a pas de rangée assignée : il va la remplir. Le texte passe alors
   AU-DESSUS du titre et de l'image.
   En laissant la grille placer les blocs dans l'ordre du HTML, la tête tient
   avec ou sans fil d'ariane, avec ou sans média. */
.detail.est-tete-actuelle .detail-ariane-ligne { grid-column: 1 / -1; }
/* La colonne du titre s'étire sur la hauteur de la rangée, et la signature
   est POUSSÉE EN BAS (margin-top auto) : photo, auteur et méta tombent au
   niveau de la légende de l'image, au lieu de coller au titre. */
.detail.est-tete-actuelle .detail-entete {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.detail.est-tete-actuelle .detail-auteur { margin-top: auto; }
.detail.est-tete-actuelle .detail-media  { grid-column: 2; margin-top: 0; }
/* ⚗ Le corps, le partage et la signature ne sont plus DANS cette grille
   depuis le 08/09 : ils vivent sous la tête, dans la grille à trois colonnes.
   Il n'y a donc plus rien à fusionner ici. */

/* --- Bloc média conditionnel ---------------------------------------------
   Les deux variantes sont dans le HTML ; une seule se montre. Par défaut :
   l'image. En .est-video : le lecteur. */
.detail-media { margin-top: 28px; }
.detail-media figcaption { margin-top: 8px; }

.detail-media-video { display: none; }
.detail.est-video .detail-media-image { display: none; }
.detail.est-video .detail-media-video { display: block; }

/* Le lecteur est la même boîte grise, avec un bouton de lecture par-dessus.
   Le mot « image » n'a pas de sens ici : on le retire. */
.lecteur::after { content: none; }
.lecture {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gris-texte-secondaire);
  background: var(--gris-fond);
  color: var(--gris-texte-secondaire);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* Le lecteur réel : oEmbed rend un <iframe> aux dimensions du fournisseur.
   Le cadre lui impose le 16/9 de la boîte grise, pour que la page ne saute
   pas entre la maquette et le site. */
.lecteur-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gris-boite);
  border-radius: var(--rayon);
  overflow: hidden;
}
.lecteur-video iframe,
.lecteur-video video,
.lecteur-video > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* Un service qu'on ne sait pas embarquer. Le lien reste, mais il DIT qu'il
   sort du site : une flèche oblique, et la phrase en toutes lettres. Le
   défaut qu'on corrigeait, c'était justement de partir sans prévenir. */
.lecteur-ailleurs { display: block; position: relative; }
.lecteur-ailleurs .meta { display: block; margin-top: 10px; }

/* --- Corps de lecture ----------------------------------------------------
   ⚗ Il ne porte plus sa propre marge haute : c'est la grille des trois
   colonnes qui pose l'écart, une fois, pour les trois. */
.detail-corps {
  font-size: var(--taille-texte-lecture);
  line-height: var(--interligne-lecture);
  color: var(--couleur-lecture);
  min-width: 0;
}
/* Le chapô ouvre le corps : même colonne que le texte, en GRAS — c'est le
   code du site actuel, et il distingue le lede du courant mieux que le
   gris, qui le faisait passer pour du texte secondaire. */
.detail-chapo {
  font-size: var(--taille-chapo-lecture); /* 20 px, comme le corps (Ludovic, 08/09) — il n'emprunte plus la taille de l'édito */
  line-height: 1.55;
  font-weight: 700;
  margin-bottom: 26px;
}
/* ⚗ L'écoute a quitté le rail de droite le 30/09 : elle est un cadre
   au-dessus du texte (« L'ARTICLE, VERSION FINALE », en fin de fichier). */

.detail-texte > * + * { margin-top: var(--espace-paragraphes); }
/* Les intertitres. La maquette n'en montre qu'un niveau ; le corpus réel
   compose les siens en h4 aussi souvent qu'en h2 — quinze ans d'articles et
   plusieurs éditeurs. Ils reçoivent donc tous le même calibre : ce que le
   lecteur doit voir, c'est une coupure dans la lecture, pas une hiérarchie. */
.detail-texte h2,
.detail-texte h3,
.detail-texte h4 {
  font-size: var(--taille-intertitre);
  line-height: 1.3;
  margin-top: 36px;
}
.detail-texte blockquote {
  margin: 30px 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gris-texte);
  font-size: var(--taille-citation);
  line-height: 1.5;
  text-align: left;
}
.detail-texte blockquote > * + * { margin-top: 12px; }
/* L'EXERGUE ET LA CITATION DE L'ÉDITEUR DE BLOCS (`wp-block-pullquote`,
   `wp-block-quote`) : la feuille de WordPress les centre, entre de grandes
   marges, et le paragraphe vide qui les suit souvent creusait encore l'écart
   (vu le 28/09 sur l'article de Jacques Thomet). Ils prennent la forme de
   toutes les citations : à gauche, sous le filet vertical. */
.detail-texte .wp-block-pullquote,
.detail-texte .wp-block-quote {
  margin: 30px 0 0;
  padding: 0;
  border: 0;
  text-align: left;
  font-size: inherit;
  line-height: inherit;
}
.detail-texte .wp-block-pullquote { margin-top: 36px; }
.detail-texte .wp-block-pullquote + * { margin-top: 36px; }
.detail-texte .wp-block-pullquote blockquote { margin: 0; }
.detail-texte .wp-block-pullquote p { font-size: inherit; line-height: inherit; margin: 0; }
.detail-texte blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-style: normal;
  color: var(--gris-texte-secondaire);
}
/* Le paragraphe vide qu'un éditeur laisse autour d'un bloc. */
.detail-texte > p:empty { display: none; }

/* --- Ce que le faux-texte de la maquette ne montrait pas ------------------
   Le corps réel vient de l'éditeur : il porte des liens, des listes, des
   images légendées, parfois un tableau. Rien de tout cela n'apparaît dans
   detail.html — ces règles ne contredisent donc pas la maquette, elles
   couvrent ce qu'elle ne pouvait pas montrer. */
/* Un bouton posé dans le texte (les pages du parcours) garde son cadre : sans
   le `:not`, son bas prenait le trait gris d'un lien. */
.detail-texte a:not(.bouton) { border-bottom: 1px solid var(--gris-texte-secondaire); }
/* UN LIEN N'A QU'UN TRAIT, LE SIEN. Le fonds porte des soulignements saisis
   à la main sur des liens : seize balises <u> autour ou dedans (36 contenus
   en portent 74, mesuré le 09/09), et un `style="text-decoration:
   underline"` collé dans un lien (un contenu, la séance M. de Lorgeril —
   trois soulignements empilés sur deux mots). Le lien portait deux ou trois
   traits. Un style en ligne ne se bat qu'avec `!important` ; c'est le seul
   du thème, et il ne vise que l'intérieur d'un lien. Le <u> posé seul, sans
   lien, reste ce que l'auteur a voulu. */
.detail-texte a,
.detail-texte a * { text-decoration: none !important; }
.detail-texte u:has(a) { text-decoration: none; }
.detail-texte ul,
.detail-texte ol { margin: 0; padding-left: 24px; }
.detail-texte li + li { margin-top: 8px; }

/* --- La FAQ : une question par dépliant (14/09) ------------------------------
   Posés par outils/23 depuis les accordéons de Bricks : 17 questions en
   quatre thèmes, toutes fermées — dépliées, elles saturaient la page. Un
   `<details>` natif : sans script il s'ouvre, au clavier il se parcourt. Les
   questions d'un thème s'empilent entre deux filets, comme les numéros de
   l'archive des éditions ; le « + » et le « − » vivent dans la même colonne,
   à droite (socle), dessinés ici pour que le contenu reste du texte. */
/* LES THÈMES SONT DES BARRES (29/09) — *« tout est au même niveau : gras et
   taille de police »* (Ludovic). Un thème en intertitre (PT Serif gras, 22)
   et une question (PT Serif gras, 20) ne se distinguaient pas. Le thème prend
   les valeurs de la barre (`.titre-barre`, composants.css : Simplon en
   capitales espacées sur un filet noir), recopiées ici parce que le texte
   d'une page ne porte pas de classe ; la question reste en serif. Et sous un
   filet noir, la première question n'a pas de filet clair, comme partout. */
.detail-texte h2:has(+ .faq-question) {
  margin-top: var(--espace-bloc);
  padding-top: 12px;
  border-top: 1px solid var(--filet-noir);
  font-family: var(--police-meta);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.detail-texte > h2:first-child:has(+ .faq-question) { margin-top: 0; }
.detail-texte .faq-question { border-top: 1px solid var(--gris-filet); }
.detail-texte h2 + .faq-question { border-top: 0; }
.detail-texte .faq-question + .faq-question { margin-top: 0; }
.detail-texte .faq-question:not(:has(+ .faq-question)) { border-bottom: 1px solid var(--gris-filet); }
.detail-texte .faq-question[open] { padding-bottom: 22px; }
/* Une ancre du support (29/09) : la question tombe sous l'en-tête ENTIER.
   Au premier chargement, Chromium le garde entier (93 px), Safari en
   retire la rangée 1 : réglé sur la rangée 2 seule, la question passait sous
   la rangée 1 dans Chromium. */
.faq-question[id] { scroll-margin-top: calc(var(--hauteur-entete) + var(--espace-filet-noir)); }

.faq-question summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largeur-pli);
  gap: var(--gouttiere-trame);
  align-items: center;
  padding: 16px 0;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq-question summary::-webkit-details-marker { display: none; }
.faq-question summary::after {
  content: "";
  width: 14px;
  height: 14px;
  justify-self: end;
  background:
    linear-gradient(var(--gris-texte-secondaire), var(--gris-texte-secondaire)) center / 14px 2px no-repeat,
    linear-gradient(var(--gris-texte-secondaire), var(--gris-texte-secondaire)) center / 2px 14px no-repeat;
}
.faq-question[open] summary::after { background-size: 14px 2px, 0 0; }
.faq-question summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-question summary:focus-visible { outline: 2px solid var(--gris-texte); outline-offset: 4px; }
.faq-question > :not(summary) + * { margin-top: var(--espace-paragraphes); }

.detail-texte figure { margin-left: 0; margin-right: 0; margin-bottom: 0; }
/* UNE IMAGE DU CORPS RESPIRE AU-DESSUS (Ludovic, 28/09) : collée au
   paragraphe qui la précède, elle se lisait comme sa suite. Toutes les
   formes du fonds : le bloc image, la légende classique, l'image seule dans
   un paragraphe. */
.detail-texte > * + :is(figure, .wp-block-image, .wp-caption, p:has(> img:only-child), p:has(> a:only-child > img)) {
  margin-top: 40px;
}
.detail-texte figcaption {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  margin-top: 8px;
}
.detail-texte img { border-radius: var(--rayon); }
/* Un tableau ou un bloc de code plus large que la colonne défile chez lui,
   il n'élargit pas la page. */
.detail-texte table,
.detail-texte pre { display: block; max-width: 100%; overflow-x: auto; }
.detail-texte hr {
  border: 0;
  border-top: 1px solid var(--gris-filet);
  margin: 30px 0 0;
}

/* =========================================================================
   LES TROIS COLONNES — la direction E, retenue le 01/09
   ⚗ Écrit le 08/09, avec le premier gabarit à rails.

   240 / 672 / 240 sur les 1232 px utiles du conteneur. Les 80 px qui restent
   font deux gouttières de 40, posées en `gap`.

   ⚠ CONFRONTATION AU SOCLE — ET LE SOCLE AVAIT RAISON. Il annonçait 672 ;
     la première écriture de ce fichier a tenu 680 en croyant la valeur
     « mesurée sur la production ». Elle ne l'était pas : la production fait
     672 (inspecteur, Ludovic, 08/09). La colonne repasse à 672, les
     gouttières à 40, la largeur max de 1280 px tient telle quelle.

   ⚠ UNE SEULE TRAME, ET CELLE-CI N'EN EST PAS UNE DEUXIÈME. --grille-page
     règle les blocs de la page d'accueil ; celle-ci règle une page de
     lecture, qui n'a aucune colonne à aligner avec eux. Les deux ne se
     rencontrent jamais sur une même page.
   ========================================================================= */
/* ⚗ 08/09, second passage — LA GRILLE RESPIRE ENTRE 900 ET 1280 PX. Trois
   colonnes en pixels FIXES débordaient à droite dès que la fenêtre passait
   sous ~1230 px : le rail droit sortait de l'écran (vu par Ludovic, 08/09).
   Chaque colonne a désormais un plancher et un plafond : à 1232 px utiles,
   c'est exactement 240 / 672 / 240 ; en dessous, les trois se resserrent
   ensemble, et le texte garde au moins 480 px — 45 signes, la limite basse
   de la lecture. À 852 px utiles (fenêtre de 900), tout est au plancher ;
   sous 900, les rails tombent (responsive.css).
   La gouttière est un `gap` explicite et non un `space-between` : avec des
   colonnes élastiques, space-between n'aurait plus rien à répartir. */
.detail {
  --gouttiere-lecture: 40px;
  --colonnes-lecture:
    minmax(150px, var(--largeur-rail))
    minmax(480px, var(--largeur-lecture))
    minmax(150px, var(--largeur-rail));
}
.detail-lecture {
  display: grid;
  grid-template-columns: var(--colonnes-lecture);
  column-gap: var(--gouttiere-lecture);
  align-items: start;
  margin-top: 40px;
}

/* Un article sans intertitres n'a pas de rail de gauche — 32 % du fonds. La
   colonne de lecture ne se recentre pas pour autant : elle reste sur son axe,
   sinon deux articles voisins n'auraient pas la même verticale. */
.detail.sans-rail-gauche .detail-corps { grid-column: 2; }

/* Le chapô d'ouverture, hors des rails — sur un ARTICLE seulement.
   Sur une brève il est dans la colonne du milieu et ce bloc n'existe pas. */
.detail-ouverture { margin-top: 36px; }
.detail-ouverture .detail-chapo { margin-bottom: 0; }

/* --- Les rails -----------------------------------------------------------
   Collants : la colonne de lecture défile, eux restent. `top` se cale sous
   l'en-tête, qui est fixe — sans quoi le haut du sommaire passerait dessous.
   `max-height` + `overflow` : un sommaire de douze entrées ne doit pas
   dépasser l'écran, il défile chez lui. */
.rail {
  position: sticky;
  top: calc(var(--hauteur-entete) + 20px);
  max-height: calc(100vh - var(--hauteur-entete) - 40px);
  overflow-y: auto;
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  line-height: 1.45;
}
.rail-gauche { grid-column: 1; }
.rail-droite {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.rail-note { line-height: 1.45; }
/* `.fil-toutes` est partie le 17/09 avec le fil du rail : « Toutes les
   brèves → » est un `lien-suite`, qui se souligne au survol et ne porte pas
   de filet. */
.rail-commentaires a { border-bottom: 1px solid var(--gris-filet); }

/* --- Le sommaire, dans la marge -----------------------------------------
   🔴 VERSION FINALE (30/09) : « Dans cet article » en capitales grises, les
   entrées contre un filet clair ; celle qu'on lit se marque d'un filet noir
   et du demi-gras. Rien ne se déplace au survol : le public vise déjà
   difficilement (règle du socle).
   Ces règles valent pour la liste partout (`template-parts/sommaire-article`) ;
   le cadre de l'écoute, le pli et la barre la redisposent chez eux, en fin
   de fichier. */
.sommaire-titre {
  margin: 0;
  font-family: var(--police-meta);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--lecture-gris);
}
.sommaire-liste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-left: 1px solid var(--filet-clair);
}
.sommaire-entree {
  margin: 0 0 0 -1px;
  border-left: 2px solid transparent;
}
.sommaire-entree::before { content: none; }
.sommaire-entree a,
.sommaire-entree.est-verrouillee {
  display: block;
  padding: 6px 0 6px 14px;
  font-family: var(--police-meta);
  font-size: 13px;
  line-height: 1.45;
  color: var(--lecture-gris);
}
.sommaire-entree a:hover { color: var(--gris-texte); }
.sommaire-entree.est-courante { border-left-color: var(--gris-texte); }
.sommaire-entree.est-courante a { color: var(--gris-texte); font-weight: 500; }
.sommaire-ici { display: none; font-style: normal; }
/* Un chapitre verrouillé se MONTRE — c'est l'argument d'abonnement de la
   planche B · réservé. Il n'est pas un lien : il ne mène nulle part. */
.sommaire-entree.est-verrouillee {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--gris-boite);
}
.sommaire-entree.est-verrouillee .icone { flex: none; position: relative; top: 1px; }
.sommaire-compte { margin-top: 14px; }

/* La progression. Sans JavaScript la barre reste à zéro et la ligne dessous
   annonce le temps de lecture — ce qui est vrai, et ne ment pas sur l'état. */
.progression {
  margin-top: 18px;
  height: 3px;
  background: var(--filet-clair);
  overflow: hidden;
}
.progression-part {
  width: 0;
  height: 100%;
  background: var(--gris-texte);
}
.progression-reste { margin-top: 8px; font-size: 12px; }

/* --- Le fil des brèves, dans le rail de gauche d'une brève ---------------
   ⚗ 17/09 — IL N'A PLUS DE STYLES À LUI. Le rail rend le même objet que le
   bloc « Brèves » de l'accueil, et il l'écrit maintenant avec les mêmes
   briques : `titre-barre` pour le libellé, `liste-lignes` pour les titres
   datés, `lien-suite` pour « Toutes les brèves → ». Les quatre règles qui
   vivaient ici — `.fil-titre`, `.fil-ligne`, `.fil-heure`, `.fil-toutes` —
   redisaient, en moins bien, ce que composants.css dit déjà.
   ⚠ Une seule valeur reste en propre : dans un rail de 240 px, le titre de
     liste descend d'un cran. Le composant ne prévoit pas cette taille-là. */
.fil-breves .ligne-titre { font-size: var(--taille-ligne-rail); }

/* --- LA BRÈVE : ce que le format change, et rien de plus ------------------
   « E adaptée » (Ludovic, 01/09). Trois écarts, tous ici.

   1) LES TROIS COLONNES DÉMARRENT ENSEMBLE, AU FILET. Sans image au-dessus,
      un rail qui commencerait au milieu laisserait un blanc bizarre. Sur un
      article la divergence est INVERSE et elle est voulue : les rails
      commencent après le chapô. Les deux motifs sont au socle. */
.detail.est-breve .detail-lecture > * {
  border-top: 1px solid var(--gris-filet);
  padding-top: 26px;
}
.detail.est-breve .detail-lecture { margin-top: 0; }

/*  2) La ligne de service remplace la signature à portrait : « la rédaction »
      n'a ni visage ni fiche. Elle porte l'heure, pas seulement la date. */
.detail-service {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin-top: 18px;
  padding-bottom: 22px;
}
.detail-service .sep { color: var(--gris-filet); }

/*  3) Pas de pied de lecture : le texte finit la brève (Ludovic, 29/09).
      ⚗ 17/09 — `.detail-puces` est partie avec les puces qu'elle tenait ;
        le 29/09, la ligne « Une brève de la rédaction » et son filet. */

/* --- « À lire aussi » : la tête porte parfois un lien de rubrique --------- */
.detail-aussi-tete {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.detail-aussi-tete .titre-section { margin-bottom: 0; }
.detail-aussi-tete .lien-suite { margin-left: auto; }
.detail-aussi .grille-4 { margin-top: 18px; }

/* --- Mur d'abonnement ----------------------------------------------------
   Trois règles quand le contenu est réservé :
   1) le texte visible finit en fondu — même principe que l'édito de la
      home : le texte continue, on le montre ;
   2) le mur s'affiche — cadre gris des encarts de la home : ce cadre veut
      dire « le média demande quelque chose » ;
   3) la suite du texte disparaît (sur le vrai site, elle n'est simplement
      pas servie au navigateur). */
.mur { display: none; margin-top: 8px; }

.detail.est-reserve .mur { display: block; }
.detail.est-reserve .detail-texte-suite { display: none; }
.detail.est-reserve .detail-texte-avant {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu-mur)), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu-mur)), transparent 100%);
}

.mur-titre { font-size: var(--taille-titre-abonnement); line-height: 1.2; }
.mur-texte {
  font-size: var(--taille-texte);
  color: var(--gris-texte-secondaire);
  margin-top: 10px;
  max-width: 480px;
}
.mur-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.mur-connexion {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  border-bottom: 1px solid var(--gris-filet);
}

/* La reproduction sombre du mur du site actuel a été SUPPRIMÉE le 18/08 :
   la version épurée est actée (journal v5.5). */

/* --- Les sujets (post_tag), en bas du texte (28/09) -----------------------
   Une ligne : le libellé, puis les sujets séparés d'un point. Ils étaient
   au-dessus du titre depuis le 20/08. */
.detail-sujets {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
}
.detail-sujets-libelle {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
}
.detail-sujets a { color: var(--gris-texte); border-bottom: 1px solid var(--gris-filet); }
.detail-sujets a:hover { border-bottom-color: var(--gris-texte); }
.detail-sujets-point { color: var(--gris-texte-secondaire); }

/* --- Les commentaires -----------------------------------------------------
   Le thème pose le cadre et la titraille ; wpDiscuz rend le fil dedans. Le
   fond gris est celui de la capture du 20/08, repris tel quel : c'est ce que
   le lecteur connaît déjà du site en ligne.
   ⚠ Le style de ce que rend wpDiscuz n'est PAS traité ici — c'est la passe
     sur les rendus tiers, au registre du projet 3. */
.detail-commentaires {
  background: var(--gris-fond-clair);
  padding-top: var(--padding-bande);
  padding-bottom: var(--padding-bande);
}
.commentaires-cadre {
  max-width: var(--largeur-lecture);
  margin-left: auto;
  margin-right: auto;
}
.commentaires-charte {
  margin-top: 16px;
  color: var(--gris-texte-secondaire);
}
.commentaires-charte a { border-bottom: 1px solid var(--gris-filet); }

/* L'emplacement dessiné dans la maquette statique, qui n'a pas d'extension
   pour le remplir. Il n'existe QUE là : sur le site, wpDiscuz occupe la
   place. Une fausse discussion dessinée à la main ne dirait rien de ce que
   l'extension rend vraiment. */
.commentaires-emplacement {
  margin-top: 26px;
  padding: 60px 20px;
  border: 1px dashed var(--gris-filet);
  border-radius: var(--rayon);
  text-align: center;
  background: #fff;
}
.etiquette {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  background: var(--gris-fond-clair);
  border: 1px solid var(--gris-filet);
  padding: 5px 9px;
  border-radius: var(--rayon);
}

/* --- Aimer + partage ----------------------------------------------------- */
/* ⚗ 08/09 — LE PARTAGE A QUITTÉ LA FIN DE L'ARTICLE POUR LE RAIL DE DROITE.
   C'est ce que rend la direction B, reprise par E : « elle rend au partage la
   place verticale qu'il occupe sur le site en ligne, sans le poser dans le
   texte ». Il s'empile donc, et ne se remet à l'horizontale que sous 900 px,
   quand le rail cesse d'être un rail. */
.detail-partage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.partage-liens {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.detail-partage a { border-bottom: 1px solid var(--gris-filet); }

/* Le cœur reste gris : l'accent rouge est réservé aux boutons qui engagent.
   L'état « aimé » se dit par le trait et le cœur plein, pas par la couleur. */
.bouton-aimer {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--gris-fond);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  color: var(--gris-texte-secondaire);
}
.bouton-aimer.est-aime {
  border-color: var(--gris-texte);
  color: var(--gris-texte);
}

/* --- Signature du contributeur ------------------------------------------- */
.detail-signature {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--gris-texte); /* un filet noir : le texte est fini (28/09) */
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.signature-texte { min-width: 0; }
.signature-nom { font-weight: 700; font-size: var(--taille-titre-carte); }
.signature-bio {
  font-size: var(--taille-texte);
  color: var(--gris-texte-secondaire);
  margin-top: 6px;
}
.detail-signature .lien-suite { margin-top: 12px; }

/* =========================================================================
   PANNEAU DE DÉMONSTRATION — n'existe pas sur le site réel.
   Sous l'en-tête (z-index 50) et le burger (100) : il ne doit jamais
   passer devant la navigation.
   ========================================================================= */
.demo {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  background: var(--gris-fond);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  padding: 12px 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.demo-titre {
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.demo-ligne { display: flex; align-items: center; gap: 6px; }
.demo-ligne + .demo-ligne { margin-top: 6px; }
.demo-ligne span { width: 44px; }
.demo-bouton {
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
  background: var(--gris-fond);
  border: 1px solid var(--gris-filet);
  border-radius: var(--rayon);
  color: var(--gris-texte-secondaire);
}
.demo-bouton.est-choisi {
  background: var(--gris-fonce);
  border-color: var(--gris-fonce);
  color: var(--gris-clair-sur-sombre);
}


/* --- Le débat (08/09) ------------------------------------------------------
   Le corps se ferme sur l'appel à répondre : un bouton, une ligne de règle. */
.detail-debat-appel {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--gris-filet);
  display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start;
}


/* =========================================================================
   LA PAGE D'UN ENTRETIEN — planche A, « le sommaire à côté » (24/09).

   En blanc, comme toutes les pages : le fil d'ariane, le titre, la ligne de
   service ; puis LA GRILLE D'UNE VIDÉO ET SON RAIL (`.grille-rail`,
   composants.css) — celle de la leçon d'une masterclass : le lecteur, le
   texte et le partage sur huit colonnes, le sommaire chapitré sur quatre.
   Sous 992 px le sommaire passe sous la vidéo, derrière les onglets
   (`.manchon-onglets`) ; au téléphone, la vidéo va aux bords.

   Elle remplace la bande sombre de la direction B (09/09) : le fond sombre
   n'est plus la règle des vidéos (23/09). Ce que B avait établi tient : le
   chapitrage est la navigation de la vidéo, à côté d'elle, et il ne fait pas
   sortir du site.
   ========================================================================= */

/* La bande sombre de B n'a plus de page à elle ; sa classe sert encore
   l'archive des entretiens en sombre, gardée éteinte (archive.php). */
.video-bande {
  background: var(--gris-fonce);
  color: var(--gris-clair-sur-sombre);
  padding: var(--padding-bande) 0;
}

/* --- La tête : l'ariane, le titre, « Avec … · date · durée » -------------
   L'ariane est celle des listes (`.archive-ariane`, 24 px sous la barre) ;
   le titre court sur la largeur du lecteur, pas sur les 1 232 px. */
.video-titre {
  max-width: calc((100% - var(--gouttiere-rail)) * 2 / 3);
  margin: 10px 0 12px;
  text-wrap: balance;
}
.video-service { font-size: var(--text-sm); }
.video-service a { color: var(--gris-texte); font-weight: 500; }
.video-service .sep { margin: 0 6px; color: var(--gris-filet); }
.video-duree { font-variant-numeric: tabular-nums; }

.video-grille { margin-top: 28px; }

/* --- Le lecteur ----------------------------------------------------------
   Le cadre 16/9 du lecteur d'un article (`.lecteur-video`), sur le gris
   d'une vidéo. */
.video-lecteur.lecteur-video { background: var(--gris-fonce); }
/* ⚠ UNE LARGEUR ÉCRITE : un élément à rapport fixe ne s'étire pas seul dans
   une grille — il s'y pose au début, à la largeur de son contenu, et le
   cadre du lecteur n'en a pas (l'iframe est en absolu). Sous 992 px, où la
   colonne de gauche s'ouvre et le lecteur devient un élément de la grille,
   il tombait à 0 × 0. */
.video-lecteur { width: 100%; box-sizing: border-box; }

/* Le verrou : le lecteur est REMPLACÉ, pas masqué — l'adresse de la vidéo
   n'est pas dans la page. Le bloc garde le 16/9 pour que la page ne saute
   pas entre un contenu ouvert et un contenu fermé. */
.video-verrou {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* un minimum : si le texte déborde, la boîte grandit */
  background: var(--gris-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* La vignette, aux bords, assombrie : le texte se lit dessus. */
.video-verrou-fond {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--gris-noir);
}
.video-verrou-fond::after { content: none; }
.video-verrou-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .66);
}
.video-verrou-texte {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 34em;
  padding: var(--space-24);
}
.video-verrou-titre {
  color: var(--gris-fond);
  font-size: var(--taille-titre-video);
  font-weight: 700;
  margin: 0;
}
.video-verrou-phrase {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gris-clair-sur-sombre);
}
.video-verrou .bouton { margin-top: var(--space-12); }
.video-verrou-connexion { margin: 0; color: var(--gris-clair-sur-sombre); }
.video-verrou-connexion a { color: var(--gris-fond); border-bottom: 1px solid currentColor; }
.video-cadenas { color: var(--gris-clair-sur-sombre); }

/* --- Le texte, puis le partage, sur la colonne de lecture ----------------
   Le corps d'un article (`.detail-corps`, `.detail-texte`), à sa largeur. */
.video-texte {
  margin-top: 36px;
  max-width: var(--largeur-lecture);
}
/* LE RAIL : le sommaire, puis AIMER, PARTAGER, DESCENDRE AU FIL (la brique
   `template-parts/partage.php`), en colonne, comme au rail d'un article
   (28/09). Sous 992 px, le partage redescend sous le texte, en ligne
   (responsive.css). */
.video-rail {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* SANS SOMMAIRE, le partage descend au niveau du texte (Ludovic, 28/09) :
   la colonne principale s'ouvre, le lecteur prend la première rangée, le
   texte et le rail la seconde. Au-dessus de 992 px seulement : dessous, le
   rail s'ouvre de toute façon (responsive.css). */
@media (min-width: 992px) {
  .video-grille.sans-sommaire .video-principal { display: contents; }
  .video-grille.sans-sommaire .video-principal > * { grid-column: 1; }
  .video-grille.sans-sommaire .video-rail { grid-column: 2; grid-row: 2; margin-top: 36px; }
}

/* --- Le sommaire chapitré, au rail ----------------------------------------
   Sous sa barre (« SOMMAIRE · 16 CHAPITRES »), une ligne par chapitre : le
   temps en chiffres alignés, le titre. C'est de la NAVIGATION : la police
   des méta, comme le programme d'une masterclass. */
.video-chapitres-cadre { margin-top: 6px; }
.video-chapitres {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--police-meta);
}
/* Sous le filet noir de la barre, la première ligne n'a pas le sien. */
.video-chapitre + .video-chapitre { border-top: 1px solid var(--filet-clair); }
.video-chapitre a {
  display: grid;
  grid-template-columns: var(--largeur-tc-video) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
}
.video-tc {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  font-variant-numeric: tabular-nums;
}
.video-chapitre-titre {
  font-size: var(--taille-chapitre-video);
  line-height: 1.35;
  color: var(--gris-texte);
}
.video-chapitre a:hover .video-chapitre-titre { text-decoration: underline; text-underline-offset: 3px; }
/* Le chapitre DEMANDÉ — pas un suivi de la lecture : la position réelle du
   lecteur demanderait l'API tierce, qui n'est pas chargée (detail.js). */
.video-chapitre.est-courant .video-tc { color: var(--gris-texte); font-weight: 700; }
.video-chapitre.est-courant .video-chapitre-titre { font-weight: 700; }

/* REPLIÉ À LA HAUTEUR DU LECTEUR, quand il la dépasse — c'est detail.js qui
   le replie, et « Les N chapitres » qui le déplie. Le fondu dit qu'il y a
   une suite. Sans script, tout se lit. */
.video-sommaire.est-replie .video-chapitres-cadre {
  position: relative;
  max-height: var(--hauteur-chapitres-video);
  overflow: hidden;
}
.video-sommaire.est-replie .video-chapitres-cadre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(rgb(255 255 255 / 0), var(--c-blanc));
  pointer-events: none;
}
.video-chapitres-tout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gris-texte);
  cursor: pointer;
}
.video-chapitres-tout[hidden] { display: none; }
.video-chapitres-tout[aria-expanded="true"] .pli-chevron { transform: translateY(2px) rotate(-135deg); border-color: var(--gris-texte); }

/* --- Le fil et « À voir aussi », en blanc sous leur barre -------------------
   L'article garde le fond gris et son titre de section jusqu'à sa reprise. */
.commentaires-en-blanc { background: none; padding-top: 0; padding-bottom: 0; }
.est-page-video .detail-aussi .grille-4 { margin-top: 20px; }

/* =========================================================================
   L'ARTICLE, VERSION FINALE — planches « Article · version finale »
   (Ludovic, 30/09 ; canevas « Design Antithèse 2 », page « Article » ;
   recopiées dans outils/design-article/planches/).

   Rien sur les côtés du texte : les outils sous la signature, l'écoute en
   cadre au-dessus du texte, le sommaire dans la marge, en haut. Passé les
   premières lignes, la marge s'efface et une barre prend le relais sous
   l'en-tête. Sous 900 px, le sommaire entre dans le cadre de l'écoute.
   `.est-article` : ni une brève, ni la page d'un entretien.
   ========================================================================= */

/* --- Les outils, sous la signature : J'aime · Partager · les commentaires - */
.outils-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--filet-clair);
}
.outil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--police-meta);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--gris-texte);
}
.outil .icone { flex: none; }
.outil-n { color: var(--gris-texte-secondaire); font-weight: 400; }
.outil-n-seul { display: none; }
/* Aimé : le cœur se remplit. Il reste gris-noir — le rouge est aux actions. */
.outil[data-aimer][aria-pressed="true"] .icone-aimer { fill: currentColor; }
.outil[aria-expanded="true"] .icone-chevron { transform: rotate(180deg); }

/* Partager : un menu sous le bouton. */
.partager { position: relative; display: inline-flex; }
.partager-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  z-index: 30;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--c-blanc);
  border: 1px solid var(--filet-clair);
  box-shadow: 0 10px 28px rgba(17, 17, 17, .12);
}
.partager-menu[hidden] { display: none; }
.partager-menu li { margin: 0; }
.partager-menu li::before { content: none; }
.partager-menu a {
  display: block;
  padding: 9px 16px;
  font-family: var(--police-meta);
  font-size: 15px;
  line-height: 1.35;
  color: var(--gris-texte);
}
.partager-menu a:hover { background: var(--lecture-surligne); }

/* --- Le sommaire dans la marge : en haut, il s'efface sous la barre ------- */
.detail.est-article .rail-sommaire {
  position: static;
  max-height: none;
  overflow: visible;
  transition: opacity .2s ease;
}
.detail.est-article.barre-visible .rail-sommaire { opacity: 0; pointer-events: none; }

/* Les ancres d'un chapitre tombent sous l'en-tête ET la barre. */
.detail.est-article .detail-texte [id] {
  scroll-margin-top: calc(var(--hauteur-entete) + var(--hauteur-barre-lecture) + 16px);
}

/* --- L'écoute : un cadre noir au-dessus du texte ------------------------- */
.ecoute {
  margin-bottom: 44px;
  border: 1px solid var(--gris-texte);
  font-family: var(--police-meta);
  color: var(--gris-texte);
}
.ecoute-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 16px 0 12px;
}
.ecoute-ferme { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.ecoute-texte strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.ecoute-texte p,
.ecoute-texte-sous { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--gris-texte-secondaire); }
/* Au premier clic, le cadre devient le lecteur. */
/* (La règle du lecteur vient plus bas et le montre : celle-ci doit peser plus.) */
.ecoute .ecoute-lecteur { display: none; }
.ecoute.est-ouverte .ecoute-ferme { display: none; }
.ecoute.est-ouverte .ecoute-lecteur { display: flex; flex: 1 1 auto; }
/* Fermé par le mur : le cadenas à la place du bouton. Le cadre entier ouvre
   la bulle « Réservé aux abonnés » (30/09), et se marque tant qu'elle est
   ouverte. */
.ecoute-cadenas { background: var(--paiement-pastille); color: var(--gris-texte); }
.ecoute-muree .ecoute-ferme { cursor: pointer; }
.ecoute-muree:has(.reserve-actif) { box-shadow: inset 0 0 0 1px var(--gris-texte); }

/* Le sommaire du cadre et le pli : en tablette et au téléphone seulement. */
.ecoute-sommaire,
.ecoute-liste,
.sommaire-plie { display: none; }

/* --- Le lecteur audio, dessiné ------------------------------------------- */
.lecteur-audio {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 64px;
  font-family: var(--police-meta);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lecteur-audio-jouer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gris-texte);
  color: var(--c-blanc);
  cursor: pointer;
}
.lecteur-audio-jouer .icone-lire { margin-left: 2px; }
.lecteur-audio-jouer .icone-pause { display: none; }
.audio-en-lecture .lecteur-audio-jouer .icone-lire { display: none; }
.audio-en-lecture .lecteur-audio-jouer .icone-pause { display: block; }
.ecoute-cadenas .icone-lire,
.ecoute-cadenas .icone-pause { display: none; }
.lecteur-audio-temps { flex: none; color: var(--lecture-gris); }
/* La piste : 3 px à l'œil, 20 px sous le doigt. */
.lecteur-audio-piste {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 20px;
  cursor: pointer;
  touch-action: none;
}
.lecteur-audio-piste::before,
.lecteur-audio-piste i {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
}
.lecteur-audio-piste::before { right: 0; background: var(--filet-clair); }
.lecteur-audio-piste i { width: 0; background: var(--gris-texte); }
.lecteur-audio-piste b {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--gris-texte);
}
.lecteur-audio-piste:focus-visible { outline: 2px solid var(--gris-texte); outline-offset: 2px; }
.lecteur-audio-vitesse {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--gris-filet);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-texte);
}

/* --- La barre qui prend le relais, sous l'en-tête ------------------------
   Elle suit l'en-tête qui s'escamote, comme le rail d'une leçon : sous les
   deux rangées quand on remonte, sous la seconde quand on descend. */
.barre-lecture {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--hauteur-entete);
  z-index: 45;
  background: var(--c-blanc);
  border-bottom: 1px solid var(--filet-clair);
  box-shadow: 0 6px 16px rgba(17, 17, 17, .06);
  font-family: var(--police-meta);
  color: var(--gris-texte);
  transition: top .25s ease;
}
.barre-lecture[hidden] { display: none; }
body.entete-escamote .barre-lecture { top: var(--hauteur-rangee-2); }
body.admin-bar .barre-lecture { top: calc(var(--hauteur-barre-admin) + var(--hauteur-entete)); }
body.admin-bar.entete-escamote .barre-lecture { top: var(--hauteur-rangee-2); }

.barre-lecture-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--hauteur-barre-lecture);
}
.barre-lecture-titre {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.barre-lecture-titre strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--police-titre);
  font-size: 17px;
  font-weight: 700;
}
.barre-lecture-chapitre {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--gris-texte-secondaire);
}
.barre-lecture-temps,
.barre-lecture-jouer { display: none; }
.barre-lecture-outils { flex: none; display: flex; align-items: center; gap: 18px; }
.barre-lecture-lecteur { width: 330px; min-height: 44px; gap: 10px; }
.barre-lecture-lecteur .lecteur-audio-jouer { width: 32px; height: 32px; }
.barre-lecture-jauge {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: var(--gris-texte);
}

/* Le sommaire de la barre : un panneau sous son bouton, numéroté, l'entrée
   qu'on lit surlignée, « Vous êtes ici ». */
.barre-lecture-sommaire { position: relative; }
.barre-lecture-panneau {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  z-index: 5;
  width: 400px;
  max-height: calc(100vh - var(--hauteur-entete) - var(--hauteur-barre-lecture) - 40px);
  overflow-y: auto;
  padding: 8px 0;
  background: var(--c-blanc);
  border: 1px solid var(--filet-clair);
  box-shadow: 0 10px 28px rgba(17, 17, 17, .12);
  white-space: normal;
}
.barre-lecture-panneau[hidden] { display: none; }
.barre-lecture-panneau-titre {
  margin: 0;
  padding: 8px 18px 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
}
.barre-lecture-panneau-article { display: none; }
.barre-lecture-panneau .sommaire-liste { margin: 0; border: 0; }
.barre-lecture-panneau .sommaire-entree { margin: 0; border: 0; }
.barre-lecture-panneau .sommaire-entree a,
.barre-lecture-panneau .sommaire-entree.est-verrouillee {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--couleur-lecture);
}
.barre-lecture-panneau .sommaire-entree.est-verrouillee { grid-template-columns: 26px auto minmax(0, 1fr); color: var(--gris-boite); }
.sommaire-rang { padding-top: 1px; font-size: 13px; color: var(--lecture-indice); font-variant-numeric: tabular-nums; }
.barre-lecture-panneau .sommaire-entree.est-courante a { background: var(--lecture-surligne); color: var(--gris-texte); font-weight: 500; }
.barre-lecture-panneau .sommaire-entree.est-courante .sommaire-rang { color: var(--gris-texte); }
.barre-lecture-panneau .sommaire-entree.est-courante .sommaire-ici {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--gris-texte-secondaire);
}
.barre-lecture-voile { display: none; }

/* --- TABLETTE ET TÉLÉPHONE : le sommaire entre dans le cadre de l'écoute -- */
@media (max-width: 900px) {
  .ecoute { margin-bottom: 40px; }
  .ecoute-haut { padding: 0 16px 0 12px; }
  .ecoute-ferme { padding: 0; }
  .ecoute-sommaire {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--police-meta);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris-texte-secondaire);
  }
  .ecoute-sommaire[aria-expanded="true"] .icone-chevron { transform: rotate(180deg); }
  .ecoute-liste:not([hidden]) {
    display: block;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--filet-clair);
  }

  /* Sans audio, le sommaire est un pli à lui seul, entre deux filets. */
  .sommaire-plie {
    display: block;
    margin: 0 0 28px;
    padding: 12px 0;
    border-top: 1px solid var(--gris-filet);
    border-bottom: 1px solid var(--gris-filet);
  }
  .sommaire-plie summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    list-style: none;
    cursor: pointer;
    font-family: var(--police-meta);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris-texte-secondaire);
  }
  .sommaire-plie summary::-webkit-details-marker { display: none; }
  .sommaire-plie[open] summary { margin-bottom: 10px; }
  .sommaire-plie[open] summary .icone-chevron { transform: rotate(180deg); }

  /* La liste, dans le cadre comme dans le pli : chaque entrée sur son filet. */
  .ecoute-liste .sommaire-liste,
  .sommaire-plie .sommaire-liste { margin: 0; border: 0; }
  .ecoute-liste .sommaire-entree,
  .sommaire-plie .sommaire-entree { margin: 0; border-left: 2px solid var(--gris-filet); }
  .ecoute-liste .sommaire-entree a,
  .sommaire-plie .sommaire-entree a,
  .ecoute-liste .sommaire-entree.est-verrouillee,
  .sommaire-plie .sommaire-entree.est-verrouillee {
    padding: 7px 0 7px 12px;
    font-size: 14px;
    color: var(--gris-texte-secondaire);
  }
  .ecoute-liste .sommaire-entree.est-courante,
  .sommaire-plie .sommaire-entree.est-courante { border-left-color: var(--gris-texte); }

  /* La barre de tablette : le titre seul, le lecteur sans la vitesse. */
  .barre-lecture-chapitre { display: none; }
  .barre-lecture-titre strong { font-size: 15px; }
  .barre-lecture-lecteur { width: 220px; }
  .barre-lecture-lecteur .lecteur-audio-vitesse { display: none; }
  .barre-lecture-outils { gap: 14px; }
}

@media (max-width: 767px) {
  .ecoute { margin-bottom: 36px; }
  /* Le cadre en deux rangs : l'écoute, puis « Sommaire » sur toute la
     largeur, sous un filet. */
  .ecoute-haut { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .ecoute-ferme,
  .ecoute.est-ouverte .ecoute-lecteur { padding: 0 16px 0 12px; }
  .ecoute-sommaire {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-top: 1px solid var(--filet-clair);
  }

  /* Les commentaires : l'icône et le nombre. */
  .outils-article { gap: 0 14px; }
  .outil-commentaires .outil-libelle { display: none; }
  .outil-n-seul { display: inline; }

  /* La barre du téléphone : lire, le chapitre et le temps, le sommaire et
     le partage en icônes. Sans audio : le titre, et le chapitre dessous. */
  .barre-lecture-ligne { gap: 12px; height: 56px; }
  .barre-lecture-jouer { display: inline-flex; width: 36px; height: 36px; }
  .barre-lecture-titre { display: block; flex: 1 1 auto; }
  .barre-lecture-titre > * { display: block; overflow: hidden; text-overflow: ellipsis; }
  .barre-lecture-titre strong { font-family: var(--police-meta); font-size: 14px; font-weight: 500; }
  .barre-lecture-chapitre { display: block; font-size: 12px; }
  .avec-audio .barre-lecture-titre:has(.barre-lecture-chapitre:not(:empty)) strong { display: none; }
  .avec-audio .barre-lecture-chapitre { font-size: 14px; font-weight: 500; color: var(--gris-texte); }
  .avec-audio .barre-lecture-temps { display: block; font-size: 12px; color: var(--gris-texte-secondaire); font-variant-numeric: tabular-nums; }
  .barre-lecture-lecteur,
  .barre-lecture-aimer,
  .barre-lecture-sommaire .outil-libelle,
  .barre-lecture-sommaire .icone-chevron { display: none; }
  .barre-lecture-outils { gap: 0; }
  .barre-lecture-outils .outil { justify-content: center; width: 40px; min-height: 44px; }
  .barre-lecture-sommaire .outil[aria-expanded="true"] { background: var(--paiement-pastille); }
  .barre-lecture-outils .partager-menu { left: auto; right: 0; }

  /* Le sommaire en feuille, sous la barre, sur toute la largeur. */
  .barre-lecture-sommaire { position: static; }
  .barre-lecture-panneau {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: 70vh;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--filet-clair);
    box-shadow: 0 14px 30px rgba(17, 17, 17, .14);
  }
  .barre-lecture-panneau-titre { padding: 16px 24px 6px; }
  .barre-lecture-panneau-article { display: inline; letter-spacing: 0; text-transform: none; }
  .barre-lecture-panneau .sommaire-entree a,
  .barre-lecture-panneau .sommaire-entree.est-verrouillee {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 13px 24px;
    font-size: 16px;
    border-top: 1px solid var(--paiement-pastille);
  }
  .barre-lecture-voile:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(17, 17, 17, .25);
  }
}

@media (min-width: 768px) {
  .barre-lecture-outils .partager-menu { left: auto; right: 0; }
}