/* ═══════════════════════════════════════════════════════════════════════════
   structure.css — LA GRAMMAIRE, ET RIEN DE LA MARQUE
   ═══════════════════════════════════════════════════════════════════════════

   Ce fichier est la part RÉUTILISABLE du thème : dispositions, composants,
   états, transitions, points de rupture. Il ne contient AUCUNE valeur
   littérale de charte — ni couleur, ni nom de police. Tout passe par les
   jetons que `peau.css` définit.

   C'est ce qui rend le thème rhabillable, et ce n'est pas une préférence :
   un site né de ce montage avec une autre marque ne doit garder aucune trace
   de celle-ci. Cinq couleurs écrites en dur suffisaient à ce qu'il en reste.

   ⚠️ LA RÈGLE EST TENUE PAR UNE PORTE, pas par la bonne volonté.
   `rail-design-tokens` compte les couleurs écrites hors d'une déclaration de
   jeton, et depuis le 22.10.2026 un site absent de sa ligne de base est jugé
   à ZÉRO. Ajouter un `#` ici fait rougir la porte.

   L'ORDRE DE CHARGEMENT COMPTE : `peau.css` passe AVANT, puisqu'il déclare ce
   que celui-ci consomme. `functions.php` l'exprime par une dépendance, et non
   par l'ordre d'écriture des appels — WordPress est seul juge de l'ordre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── les mesures de structure ──────────────────────────────────────────────
   Des LONGUEURS, pas des couleurs : elles appartiennent à la grammaire et
   non à la marque, donc elles vivent ici et non dans la peau.

   `--rena-rail` est la première colonne des pages de texte — celle qui porte
   le titre de section pendant que le texte court à sa droite. Elle était
   recopiée à la main partout où quelque chose devait s'y aligner, et elle a
   changé trois fois. Tout ce qui s'y aligne la LIT désormais. */
:root {
  --rena-rail: 13rem;
  /* La largeur d'une page de texte. Elle était écrite « 65rem » à deux
     endroits, dont l'exergue — c'est-à-dire la même duplication que le rail,
     au même endroit. */
  --rena-page: 65rem;
}

/* ── le socle ──────────────────────────────────────────────────────────── */

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-texte);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* ── l'en-tête, collant ────────────────────────────────────────────────── */

.sb-l-entete {
  background: var(--wp--preset--color--papier);
  padding-block: calc(var(--wp--custom--rythme) * 2.25);
}

.sb-l-entete.est-collant { position: sticky; inset-block-start: 0; z-index: 50; }

.sb-l-entete.a-defile {
  border-bottom: 1px solid var(--wp--preset--color--filet);
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06);
}

/* Le logo est posé par le THÈME, pas par la médiathèque : WordPress refuse le
   SVG, et un logo est de la marque, pas du contenu. */
.sb-c-marque::before {
  content: "";
  flex-shrink: 0;
  width: 175px;
  height: 34px;
  background: var(--rena-logo-verrou-horizontal) left center / contain no-repeat;
}



.sb-l-nav a { color: var(--wp--preset--color--encre); font-weight: 700; text-decoration: none; }
.sb-l-nav a:hover { color: var(--wp--preset--color--accent-texte); }

.sb-l-nav .sb-c-nav-accent a,
.sb-l-nav a.sb-c-nav-accent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: calc(var(--wp--custom--rythme) * 2.5);
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
}

/* ── la une, en deux colonnes ──────────────────────────────────────────── */

.sb-s-accueil-une,
.sb-s-apropos-tete,
.sb-s-episode-tete {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  column-gap: calc(var(--wp--custom--gouttiere) * 2);
  padding-block: calc(var(--wp--custom--rythme) * 8) calc(var(--wp--custom--rythme) * 6);
  overflow: hidden;
}

.sb-s-apropos-tete, .sb-s-episode-tete { align-items: start; }

.sb-s-accueil-une::before {
  content: "";
  position: absolute;
  inset-block-start: -22%;
  inset-inline-start: -14%;
  width: 46%; height: auto;
  aspect-ratio: 1;
  background: var(--rena-logo-encre) center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
}

.sb-s-accueil-une > *, .sb-s-apropos-tete > *, .sb-s-episode-tete > * { grid-column: 1; }
.sb-c-visuel, .sb-c-portrait, .sb-c-pochette-episode { grid-column: 2; grid-row: 1 / span 9; align-self: center; margin: 0; }

.sb-c-visuel img, .sb-c-pochette-episode img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--wp--custom--rayon) + 6px);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.14);
}

.sb-c-portrait img {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin-inline: auto; border-radius: 50%;
}

.sb-c-surtitre {
  font-size: var(--wp--preset--font-size--surtitre);
  font-weight: 700;
  letter-spacing: var(--wp--custom--interlettre-surtitre);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-2-texte);
  margin-block-end: calc(var(--wp--custom--rythme) * 2.25);
}

.sb-s-accueil-une .sb-c-titre { font-size: var(--wp--preset--font-size--affiche); margin-block: 0 calc(var(--wp--custom--rythme) * 3); }
.sb-s-apropos-tete .sb-c-titre, .sb-s-episode-tete .sb-c-titre { font-size: var(--wp--preset--font-size--titre-page); margin-block: 0 calc(var(--wp--custom--rythme) * 3); }
.sb-s-legal .sb-c-titre, .sb-s-cgu .sb-c-titre,
.sb-s-donnees-personnelles .sb-c-titre, .sb-s-cookies .sb-c-titre { font-size: var(--wp--preset--font-size--titre-page); margin-block-end: calc(var(--wp--custom--rythme) * 4); }

.sb-c-chapo {
  max-width: 54ch;
  margin-block-end: calc(var(--wp--custom--rythme) * 4.5);
  font-size: calc(var(--wp--preset--font-size--corps) + 3px);
  color: var(--wp--preset--color--encre-douce);
}

.sb-c-numero, .sb-c-date, .sb-c-invite, .sb-c-duree {
  display: inline-block;
  margin-block: 0 calc(var(--wp--custom--rythme) * 1);
  margin-inline-end: calc(var(--wp--custom--rythme) * 2.5);
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}



/* ── LE lecteur ────────────────────────────────────────────────────────── */

.sb-s-accueil-lecteur, .sb-s-episode-lecteur {
  display: flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 3.25);
  margin-block: calc(var(--wp--custom--rythme) * 2);
  padding: calc(var(--wp--custom--rythme) * 3.25);
  border-radius: calc(var(--wp--custom--rayon) + 6px);
  background: var(--rena-l-fond);
  color: var(--rena-l-texte);
  border: 2px solid var(--rena-l-filet);
  box-shadow: var(--rena-l-ombre);
  transition: padding 180ms ease, border-radius 180ms ease;
}

.sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact {
  position: fixed;
  inset-inline: max(16px, calc(50vw - 38rem + var(--wp--custom--marge)));
  inset-block-end: 16px;
  z-index: 40;
  gap: calc(var(--wp--custom--rythme) * 2);
  padding: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 2);
  border-radius: var(--wp--custom--rayon-rond);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.26);
}

.sb-c-pochette { flex-shrink: 0; width: 104px; margin: 0; }
.sb-c-pochette img {
  display: block; width: 104px; height: 104px; object-fit: cover;
  border-radius: calc(var(--wp--custom--rayon) - 2px);
}

.est-compact .sb-c-pochette, .est-compact .sb-c-pochette img { width: 44px; height: 44px; border-radius: 50%; }
.est-compact .sb-c-surtitre { display: none; }
.est-compact .sb-c-piste { margin: 0; font-size: var(--wp--preset--font-size--legende); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-compact .sb-c-jouer { width: 42px; height: 42px; }
.est-compact .sb-c-jouer svg { width: 18px; height: 18px; }

.sb-l-lecteur-corps { flex-grow: 1; min-width: 0; }

.sb-s-accueil-lecteur .sb-c-surtitre, .sb-s-episode-lecteur .sb-c-surtitre {
  color: var(--rena-l-accent);
  margin-block-end: calc(var(--wp--custom--rythme) * 0.875);
}

.sb-c-piste {
  margin-block: 0 calc(var(--wp--custom--rythme) * 2);
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--titre-fiche);
}

.sb-l-lecteur-piste { display: flex; align-items: center; gap: calc(var(--wp--custom--rythme) * 1.75); }

.sb-l-lecteur-piste .sb-c-duree, .sb-c-temps {
  margin: 0;
  font-size: var(--wp--preset--font-size--legende);
  font-variant-numeric: tabular-nums;
  color: var(--rena-l-douce);
}

.sb-c-barre { position: relative; flex-grow: 1; height: 5px; border-radius: 3px; background: var(--rena-l-rail); cursor: pointer; }
.sb-c-barre-remplie { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 3px; background: var(--wp--preset--color--accent); }

.sb-c-jouer {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 60px; height: 60px;
  border: none; border-radius: var(--wp--custom--rayon-rond);
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
  cursor: pointer;
}

/* ── une fiche d'épisode ───────────────────────────────────────────────── */

.sb-l-episodes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: calc(var(--wp--custom--rythme) * 2.75);
  align-items: center;
  margin-block-start: calc(var(--wp--custom--rythme) * 1.25);
  /* LA FICHE S'EST RESSERRÉE le 03.10.2026. Mesurée à 161 px, dont 39 pour
     la seule ligne de la pastille — un quart de la carte pour un mot. Le
     resserrement porte sur le rythme vertical, jamais sur les gouttières :
     une liste dense et illisible n'est pas un gain. */
  padding: calc(var(--wp--custom--rythme) * 1.75) calc(var(--wp--custom--rythme) * 3);
  border-radius: var(--wp--custom--rayon);
  background: var(--wp--preset--color--carte);
}

.sb-l-episodes .sb-c-invite {
  grid-column: 1; grid-row: 1 / span 4;
  width: 64px; height: 64px; margin: 0;
  border-radius: 50%; overflow: hidden;
}

.sb-l-episodes .sb-c-invite img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; display: block; }

.sb-l-episodes .sb-c-rubrique {
  grid-column: 2; grid-row: 1;
  margin: 0 0 calc(var(--wp--custom--rythme) * 0.375);
}

.sb-l-episodes .sb-c-rubrique::before {
  content: attr(data-rubrique);
}

.sb-l-episodes .sb-c-titre { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--wp--preset--font-size--titre-fiche); }
.sb-l-episodes .sb-c-pitch { grid-column: 2; grid-row: 3; margin-block-start: calc(var(--wp--custom--rythme) * 0.375); }
.sb-l-episodes .sb-c-fiche { grid-column: 2; grid-row: 4; margin-block-start: calc(var(--wp--custom--rythme) * 0.75); }
.sb-l-episodes .sb-c-duree { grid-column: 3; grid-row: 1 / span 4; margin: 0; }
.sb-l-episodes .sb-c-ecouter { grid-column: 4; grid-row: 1 / span 4; }

.sb-c-pitch {
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
  max-width: var(--wp--custom--colonne);
}

/* La pastille de rubrique. Texte ENCRE dessus, jamais du blanc : mesuré à 2,6
   sur le accent et 2,0 sur le doré, quand il en faut 4,5. */
.sb-l-episodes .sb-c-rubrique,
.sb-s-episode-tete .sb-c-rubrique {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--wp--custom--rayon-petit);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 700;
  color: var(--rena-plein-texte);
  background: var(--rena-plein);
  justify-self: start;
}

.sb-l-episodes .sb-c-rubrique {
  padding: 2px 9px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* 🔴 LE SECOND ACCENT NE PORTE PAS DE BLANC. Le passage des aplats au texte blanc,
   le 21.10.2026, a emporté cette pastille avec les autres : blanc sur accent-2
   mesure 2,12, contre 9,34 pour l'encre. L'accent-2 est une couleur CLAIRE —
   elle suit la règle inverse du accent, et il faut l'écrire ici, sans
   quoi la prochaine bascule globale la reprendra. */
/* ⚠️ ET `encre` NE SUFFIT PAS NON PLUS. En mode sombre, `encre` se renverse
   en une valeur presque blanche pendant que l'accent-2, lui, ne bouge pas : la
   pastille retombait à 1,81. Un aplat qui ne se renverse jamais prend un
   texte qui ne se renverse jamais, écrit en clair. */
.sb-c-rubrique.est-recit {
  background: var(--wp--preset--color--accent-2);
  color: var(--rena-sur-accent-2);
}
.sb-c-rubrique.est-analyse { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); }
/* La quatrième rubrique est cernée plutôt que pleine : la palette n'a pas
   de quatrième ton accessible, et un aplat de plus se lirait comme une
   couleur choisie au hasard. Texte encre, donc contraste tenu. */
.sb-c-rubrique.est-chronique {
  background: var(--wp--preset--color--carte);
  color: var(--wp--preset--color--encre);
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--filet);
}

.sb-s-episode-tete .sb-c-rubrique { margin-block-end: calc(var(--wp--custom--rythme) * 2); }

/* ══ LE BOUTON PLEIN SUIT `--rena-plein`, PAS LES PRESETS ════════════════
   `theme.json` le peint avec `accent-texte` + `sur-accent`. Les deux sont
   des presets, et `accent-texte` se renverse en sombre quand
   `sur-accent` reste blanc : « Tous les épisodes » mesurait 1,83.

   La paire `--rena-plein` / `--rena-plein-texte` se renverse ENSEMBLE — c'est
   sa raison d'être. Le front s'y raccroche ici.

   `theme.json` GARDE ses presets, et ce n'est pas un doublon : l'éditeur de
   blocs ne charge pas cette feuille, et un `var(--rena-plein)` écrit là-bas
   rendrait un bouton transparent dans l'écran d'édition. */
.wp-element-button,
.wp-block-button__link {
  background-color: var(--rena-plein);
  color: var(--rena-plein-texte);
}

.sb-c-fiche .wp-block-button__link, .sb-c-fiche a {
  padding: 0; border: 0; background: transparent;
  color: var(--wp--preset--color--accent-texte);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 700; text-decoration: none;
}

.sb-c-fiche .wp-block-button__link:hover { text-decoration: underline; background: transparent; }

.sb-c-ecouter .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; font-size: 0;
  border: 0;
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--rena-plein); color: var(--rena-plein-texte);
}

.sb-c-ecouter .wp-block-button__link::after {
  content: ""; width: 0; height: 0; border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
  margin-inline-start: 3px;
}

.sb-c-ecouter .wp-block-button__link:hover { background: var(--rena-plein-survol); }

/* ── les blocs de conversion ───────────────────────────────────────────── */

.sb-s-accueil-abonner, .sb-s-episode-abonner, .sb-s-apropos-appel {
  margin-block: calc(var(--wp--custom--rythme) * 5);
  padding: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 5);
  border-radius: calc(var(--wp--custom--rayon) + 6px);
  background: var(--wp--preset--color--carte);
}

.sb-s-apropos-appel { background: transparent; border: 1.5px solid var(--wp--preset--color--filet); }

.sb-s-accueil-abonner .sb-c-chapo, .sb-s-episode-abonner .sb-c-chapo, .sb-s-apropos-appel .sb-c-chapo {
  margin-block-end: calc(var(--wp--custom--rythme) * 3.5);
  font-size: var(--wp--preset--font-size--corps);
}

.sb-c-voir .wp-block-button__link {
  min-height: 44px;
  padding-inline: 0;
  background: transparent;
  color: var(--wp--preset--color--accent-texte);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.sb-c-appel .wp-block-button__link {
  min-height: 52px; padding-inline: calc(var(--wp--custom--rythme) * 3.5);
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
  border-radius: var(--wp--custom--rayon-rond); font-weight: 700;
}

.sb-c-appel .wp-block-button__link:hover { background: var(--rena-plein-survol); }

/* ── le contenu courant ────────────────────────────────────────────────── */

.sb-c-texte, .sb-c-mention { max-width: var(--wp--custom--colonne); }
.sb-c-mention { color: var(--wp--preset--color--encre-douce); }
.sb-l-liens > * { padding-block: calc(var(--wp--custom--rythme) * 1.5); border-bottom: 1px solid var(--wp--preset--color--filet); }

/* ── le pied ───────────────────────────────────────────────────────────── */

.sb-l-pied {
  margin-block-start: calc(var(--wp--custom--rythme) * 10);
  padding-block: calc(var(--wp--custom--rythme) * 5) calc(var(--wp--custom--rythme) * 12);
  border-top: 1px solid var(--wp--preset--color--filet);
  color: var(--wp--preset--color--encre-douce);
}

.sb-c-pied-marque::before {
  content: "";
  display: block;
  width: 110px; height: 76px;
  margin-block-end: calc(var(--wp--custom--rythme) * 1.5);
  background: var(--rena-logo-verrou-vertical) left center / contain no-repeat;
}

.sb-l-pied-liens a { color: var(--wp--preset--color--encre-douce); text-decoration: none; }
.sb-l-pied-liens a:hover { color: var(--wp--preset--color--encre); }

/* ── la modale d'abonnement ────────────────────────────────────────────── */

.sb-c-modale {
  width: min(32rem, calc(100vw - 32px));
  padding: 0; border: 0;
  border-radius: calc(var(--wp--custom--rayon) + 6px);
  background: var(--wp--preset--color--carte);
  color: var(--wp--preset--color--encre);
}

.sb-c-modale::backdrop { background: rgba(10, 10, 10, 0.55); }
.sb-c-modale__corps { position: relative; padding: calc(var(--wp--custom--rythme) * 5) calc(var(--wp--custom--rythme) * 4.5); }

.sb-c-modale__fermer {
  position: absolute;
  inset-block-start: calc(var(--wp--custom--rythme) * 2);
  inset-inline-end: calc(var(--wp--custom--rythme) * 2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--wp--preset--color--encre-douce); cursor: pointer;
}

.sb-c-modale__titre { margin-block: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 1); font-size: var(--wp--preset--font-size--titre-section); font-family: var(--wp--preset--font-family--titre); }
.sb-c-modale__chapo { margin-block: 0 calc(var(--wp--custom--rythme) * 3); color: var(--wp--preset--color--encre-douce); }
.sb-l-plateformes--modale { display: flex; flex-direction: column; gap: calc(var(--wp--custom--rythme) * 1.25); list-style: none; padding: 0; margin: 0; }

.sb-c-plateforme {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 60px;
  padding: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 2.5);
  border: 1.5px solid var(--wp--preset--color--encre);
  border-radius: var(--wp--custom--rayon);
  color: var(--wp--preset--color--encre); text-decoration: none;
}

.sb-c-plateforme:hover { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--papier); }
.sb-c-plateforme:hover .sb-c-plateforme__note { color: var(--wp--preset--color--papier); }
.sb-c-plateforme--nu { border-style: dashed; }
.sb-c-plateforme__nom { font-family: var(--wp--preset--font-family--titre); font-weight: 700; }
.sb-c-plateforme__note { font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--encre-douce); }

/* ── le téléphone ──────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--wp--custom--rythme) * 4);
  }
  .sb-c-visuel, .sb-c-portrait, .sb-c-pochette-episode { grid-column: 1; grid-row: auto; order: -1; }
  .sb-s-accueil-une::before { inset-inline-start: -200px; }

  .sb-s-accueil-lecteur, .sb-s-episode-lecteur { flex-wrap: wrap; }
  .sb-s-accueil-lecteur.est-compact, .sb-s-episode-lecteur.est-compact { inset-inline: 12px; inset-block-end: 12px; }

  .sb-l-episodes { grid-template-columns: auto minmax(0, 1fr); }
  .sb-l-episodes .sb-c-invite { grid-row: 1 / span 2; }
  .sb-l-episodes .sb-c-pitch, .sb-l-episodes .sb-c-fiche { grid-column: 1 / -1; grid-row: auto; }
  .sb-l-episodes .sb-c-duree { grid-column: 1; grid-row: auto; }
  .sb-l-episodes .sb-c-ecouter { grid-column: 2; grid-row: auto; justify-self: end; }
}

/* ── LE CENTRAGE QUI N'EN ÉTAIT PAS UN ─────────────────────────────────── */
/*
 * Mesuré le 03.10.2026 sur un iPhone : dans chaque fiche, le titre et le lien
 * apparaissaient centrés alors qu'aucune règle ne le demandait.
 *
 * La cause : WordPress pose `is-layout-constrained` sur chaque groupe, et sa
 * feuille donne `margin-inline: auto` à TOUS les enfants directs. Dans un
 * conteneur en flux normal, ça centre un bloc plus étroit que son parent —
 * c'est l'effet voulu. Dans une GRILLE, ça centre chaque élément dans sa
 * cellule, et la mise en page part de travers sans qu'aucune règle à nous
 * ne soit en cause.
 *
 * On rend donc leur alignement aux enfants des groupes qu'on passe en grille
 * ou en flex. `max-width: none` pour la même raison : la feuille de WordPress
 * borne les enfants à la largeur de contenu.
 */

.wp-block-group.sb-l-episodes > *,
.wp-block-group.sb-s-accueil-une > *,
.wp-block-group.sb-s-apropos-tete > *,
.wp-block-group.sb-s-episode-tete > *,
.wp-block-group.sb-s-accueil-lecteur > *,
.wp-block-group.sb-s-episode-lecteur > * {
  margin-inline: 0;
  max-width: none;
  justify-self: stretch;
}

.sb-c-chapo, .sb-c-pitch, .sb-c-texte, .sb-c-mention { max-width: var(--wp--custom--colonne); }

/* ── LE LECTEUR COMPACT : une barre, pas une carte ─────────────────────── */
/*
 * Il doit tenir sur UNE ligne, quelle que soit la largeur. Sans `nowrap`, la
 * règle `flex-wrap: wrap` du téléphone s'applique aussi à lui et le bouton
 * de lecture passe en dessous : la barre occupait la moitié de l'écran.
 */

.sb-s-accueil-lecteur.est-compact,
.sb-s-episode-lecteur.est-compact {
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.5);
  padding: 10px 10px 10px 14px;
  min-height: 0;
}

.est-compact .sb-l-lecteur-corps { min-width: 0; }

.est-compact .sb-c-piste {
  margin: 0 0 4px;
  font-size: var(--wp--preset--font-size--legende);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.est-compact .sb-l-lecteur-piste { gap: calc(var(--wp--custom--rythme)); }
.est-compact .sb-c-temps, .est-compact .sb-l-lecteur-piste .sb-c-duree { font-size: 12px; }
.est-compact .sb-c-barre { height: 3px; }

/* La barre fixe recouvre la fin de la page : on lui fait sa place. */
body.a-lecteur-compact { padding-block-end: 96px; }

@media (prefers-reduced-motion: reduce) {
  .sb-s-accueil-lecteur, .sb-s-episode-lecteur { transition: none; }
}

/* ── LE TÉLÉPHONE, REPRIS ──────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete {
    padding-block: calc(var(--wp--custom--rythme) * 3) calc(var(--wp--custom--rythme) * 4);
  }

  /* Le symbole en filigrane déborde et brouille la pochette : on le coupe. */
  .sb-s-accueil-une::before { display: none; }

  .sb-s-accueil-une .sb-c-titre { font-size: clamp(32px, 9vw, 44px); }

  /* La fiche : la photo tient deux rangs, le reste suit en pleine largeur. */
  .sb-l-episodes {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--rythme) * 1.75);
    row-gap: 2px;
    padding: calc(var(--wp--custom--rythme) * 2);
    align-items: start;
  }

  .sb-l-episodes .sb-c-invite,
  .sb-l-episodes .sb-c-invite img { width: 56px; height: 56px; }
  .sb-l-episodes .sb-c-invite { grid-column: 1; grid-row: 1 / span 2; }
  .sb-l-episodes .sb-c-rubrique { grid-column: 2; grid-row: 1; justify-self: start; }
  .sb-l-episodes .sb-c-titre { grid-column: 2; grid-row: 2; }
  .sb-l-episodes .sb-c-pitch { grid-column: 1 / -1; grid-row: 3; margin-block-start: calc(var(--wp--custom--rythme) * 1.5); }
  .sb-l-episodes .sb-c-fiche { grid-column: 1 / -1; grid-row: 4; }
  .sb-l-episodes .sb-c-duree {
    grid-column: 1; grid-row: 5;
    align-self: center;
    margin-block-start: calc(var(--wp--custom--rythme) * 1.5);
  }
  .sb-l-episodes .sb-c-ecouter {
    grid-column: 2; grid-row: 5;
    justify-self: end;
    margin-block-start: calc(var(--wp--custom--rythme) * 1.5);
  }

  /* Une fiche sans invité : la colonne de la photo disparaît. */
  .sb-l-episodes:not(:has(.sb-c-invite)) { grid-template-columns: minmax(0, 1fr); }
  .sb-l-episodes:not(:has(.sb-c-invite)) > * { grid-column: 1; }

  .sb-s-accueil-abonner, .sb-s-episode-abonner, .sb-s-apropos-appel {
    padding: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 2.5);
  }

  .sb-c-pochette, .sb-c-pochette img { width: 72px; height: 72px; }
  .est-compact .sb-c-pochette, .est-compact .sb-c-pochette img { width: 40px; height: 40px; }
  .sb-c-jouer { width: 52px; height: 52px; }
  .est-compact .sb-c-jouer { width: 40px; height: 40px; }
  .est-compact .sb-c-jouer svg { width: 16px; height: 16px; }

  .sb-l-pied { padding-block-end: calc(var(--wp--custom--rythme) * 14); }
}

@media (max-width: 30rem) {
  .sb-s-accueil-lecteur, .sb-s-episode-lecteur {
    gap: calc(var(--wp--custom--rythme) * 2);
    padding: calc(var(--wp--custom--rythme) * 2);
  }
  .est-compact .sb-c-temps { display: none; }
  .est-compact .sb-l-lecteur-piste .sb-c-duree { display: none; }
}

/* ── L'EN-TÊTE RÉTRÉCIT QUAND ON DÉFILE ────────────────────────────────── */

.sb-l-entete {
  transition: padding 160ms ease;
}

.sb-l-entete .sb-c-marque::before { transition: width 160ms ease, height 160ms ease; }

.sb-l-entete.a-defile {
  padding-block: calc(var(--wp--custom--rythme) * 1.25);
}

.sb-l-entete.a-defile .sb-c-marque::before { width: 140px; height: 27px; }

@media (prefers-reduced-motion: reduce) {
  .sb-l-entete, .sb-l-entete .sb-c-marque::before { transition: none; }
}

/* ── LE LECTEUR EN GRAND, SUR TÉLÉPHONE ────────────────────────────────── */
/*
 * En colonne, il faisait 400 px de haut : pochette, textes, puis le bouton
 * centré tout en bas. Deux rangs valent mieux — la pochette et le bouton
 * encadrent le titre, la barre passe dessous sur toute la largeur.
 */

@media (max-width: 60rem) {
  .sb-s-accueil-lecteur, .sb-s-episode-lecteur {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: calc(var(--wp--custom--rythme) * 2);
    row-gap: calc(var(--wp--custom--rythme) * 1.5);
    align-items: center;
  }

  .sb-s-accueil-lecteur .sb-c-pochette,
  .sb-s-episode-lecteur .sb-c-pochette { grid-column: 1; grid-row: 1 / span 2; }

  .sb-l-lecteur-corps { grid-column: 2 / -1; grid-row: 1; }
  .sb-l-lecteur-piste { grid-column: 1 / -1; grid-row: 3; }
  .sb-c-jouer { grid-column: 3; grid-row: 2; }

  .sb-s-accueil-lecteur .sb-c-surtitre,
  .sb-s-episode-lecteur .sb-c-surtitre {
    grid-column: 2 / -1; grid-row: 1;
    font-size: 11px;
    margin-block-end: 4px;
  }

  .sb-c-piste { grid-column: 2 / -1; grid-row: 2; margin-block-end: 0; font-size: var(--wp--preset--font-size--corps); }

  /* La forme compacte reprend la main : une seule ligne. */
  .sb-s-accueil-lecteur.est-compact,
  .sb-s-episode-lecteur.est-compact {
    display: flex;
  }
}

/* ── L'INTERLIGNE DES TITRES, POSÉ ICI ─────────────────────────────────── */
/*
 * `theme.json` le déclare dans `elements.h1`, et WordPress ne l'applique pas
 * à un titre qui porte une classe. Mesuré le 03.10.2026 : le titre de la une
 * s'affichait avec l'interligne du corps — deux lignes séparées par un vide
 * de la hauteur d'une troisième.
 */

.sb-c-titre, .sb-c-piste, .sb-c-modale__titre {
  line-height: var(--wp--custom--interligne-titre);
  letter-spacing: var(--wp--custom--interlettre-titre);
}

.sb-c-pitch, .sb-c-chapo, .sb-c-mention, .sb-c-texte { line-height: var(--wp--custom--interligne); }

/* ── LES COMMANDES S'ALIGNENT À GAUCHE ─────────────────────────────────── */
/*
 * `wp:buttons` se rend en flex et centre son contenu par défaut. Un appel à
 * l'action qui flotte au milieu d'une colonne de texte alignée à gauche ne
 * se lit pas comme la suite de la phrase.
 */

.sb-c-abonner, .sb-c-appel, .sb-c-voir, .sb-c-fiche, .sb-c-ecouter,
.sb-l-plateformes {
  justify-content: flex-start;
}

.sb-c-abonner .wp-block-button__link {
  min-height: 52px;
  padding-inline: calc(var(--wp--custom--rythme) * 3.5);
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
  font-weight: 700;
}

.sb-c-abonner .wp-block-button__link:hover { background: var(--rena-plein-survol); }

/* La une : les deux commandes sur une ligne, le lien à côté du bouton. */
.sb-s-accueil-une .sb-c-abonner { margin-block-start: calc(var(--wp--custom--rythme) * 1); }
.sb-s-accueil-une .sb-c-voir { margin-block-start: calc(var(--wp--custom--rythme) * 2); }

/* ── LE FILIGRANE, PLUS DISCRET ────────────────────────────────────────── */
/*
 * À 5 % et posé derrière le titre, les deux arcs se lisaient comme des taches
 * grises. Il descend sous le texte et perd encore un peu d'encre.
 */

.sb-s-accueil-une::before {
  inset-block-start: auto;
  inset-block-end: -28%;
  inset-inline-start: -10%;
  width: 38%;
  opacity: 0.035;
}

@media (max-width: 60rem) { .sb-s-accueil-une::before { display: none; } }

/* ── LES ENFANTS DE LA UNE OCCUPENT LEUR COLONNE ───────────────────────── */
/*
 * Mesuré : le surtitre, le bouton et le lien se rétrécissaient à la largeur
 * de leur texte et se centraient dans la cellule, alors que `justify-self`
 * calculait bien `stretch` et que les marges étaient nulles. Le titre et le
 * paragraphe, eux, remplissaient la colonne.
 *
 * On ne cherche plus d'où vient le rétrécissement : on donne la largeur.
 * `width: 100%` sur un élément de grille est sans effet de bord ici — la
 * colonne est déjà bornée par `minmax(0, …fr)`.
 */



/* Le filigrane n'était plus qu'une tache grise. Il part. */
.sb-s-accueil-une::before { content: none; }

/* Le témoin du lecteur : une hauteur, sinon la bascule ne se déclenche pas. */
.end-l-lecteur-ancre { height: 1px; }

/* ── UNE FICHE SANS INVITÉ ─────────────────────────────────────────────── */
/*
 * Deux épisodes sur six sont des solos : pas d'invité, donc pas de photo.
 * La colonne de gauche disparaît — mais si on se contente de la retirer, la
 * durée et le bouton retombent dans la même cellule et se superposent.
 * Mesuré le 03.10.2026 : « 12:18 » s'affichait derrière le bouton de lecture.
 * Il faut donc REPLACER chaque enfant, pas seulement enlever une colonne.
 */


.sb-l-episodes:not(:has(.sb-c-invite)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique,
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre,
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch,
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche { grid-column: 1 / -1; }

.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique { grid-row: 1; }
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre    { grid-row: 2; }
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch    { grid-row: 3; }
.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche    { grid-row: 4; }

.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-duree {
  grid-column: 1; grid-row: 5; justify-self: start; align-self: center;
}

.sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-ecouter {
  grid-column: 2; grid-row: 5; justify-self: end;
}

/* Sur grand écran, la fiche sans invité garde une seule ligne. */
@media (min-width: 60.01rem) {
  .sb-l-episodes:not(:has(.sb-c-invite)) {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-rubrique,
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-titre,
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-pitch,
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-fiche { grid-column: 1; }
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-duree {
    grid-column: 2; grid-row: 1 / span 4; align-self: center;
  }
  .sb-l-episodes:not(:has(.sb-c-invite)) .sb-c-ecouter {
    grid-column: 3; grid-row: 1 / span 4; align-self: center;
  }
}

/*
/*
/* ── POURQUOI IL N'Y A PLUS DE RUSTINE D'ALIGNEMENT ICI ───────────────── */
/*
 * Pendant une heure, le 03.10.2026, cette feuille a porté des `width: 100%`
 * et des marges forcées pour empêcher chaque élément de se centrer dans sa
 * cellule de grille. Aucune ne traitait la cause.
 *
 * La cause : les groupes compilés portaient `"layout":{"type":"constrained"}`,
 * et WordPress en tire `margin-left: auto !important` sur tous leurs enfants.
 * Dans une grille, ces marges absorbent l'espace libre et centrent tout —
 * et `!important` les rend imbattables depuis une feuille.
 *
 * `tools/composer-renaissance69.py` retire maintenant la contrainte des seules
 * sections qu'on dessine en grille. Les autres la gardent : c'est elle qui
 * tient la mesure de lecture.
 *
 * Si l'alignement repart de travers un jour, c'est là qu'il faut regarder,
 * pas ici.
 */

.sb-s-accueil-une::before { content: none; }

/* ── L'ALIGNEMENT, LÀ OÙ IL EST VOULU ──────────────────────────────────── */
/*
 * Par défaut, un élément de grille s'ÉTIRE dans sa cellule : c'est ce qu'il
 * faut pour un titre ou un paragraphe. `justify-self: start` le ferait au
 * contraire se rétrécir à son contenu — utile pour une pastille, néfaste
 * pour du texte. On ne le pose donc que sur ce qui est un objet.
 */

.sb-l-episodes > .sb-c-rubrique { justify-self: start; }
.sb-l-episodes > .sb-c-duree    { justify-self: start; }
.sb-l-episodes > .sb-c-ecouter  { justify-self: end; }
.sb-s-episode-tete > .sb-c-rubrique { justify-self: start; }

@media (max-width: 60rem) {
  .sb-l-episodes > .sb-c-duree { justify-self: start; }
  .sb-l-episodes > .sb-c-ecouter { justify-self: end; }
}

/* ── LES PLATEFORMES, AVEC LEURS VRAIES COULEURS ───────────────────────── */
/*
 * Les marques gardent leur couleur — c'est à ça qu'on les reconnaît d'un
 * coup d'œil, et c'est ce que demandent leurs chartes respectives. Le reste
 * de la ligne, lui, reste au dessin de la maison.
 *
 * ⚠️ Ces pictogrammes sont des REDESSINS simplifiés. Avant la mise en ligne,
 * chaque plateforme fournit ses propres fichiers de badge et impose des
 * règles d'usage — c'est là qu'il faudra les prendre.
 */

.sb-c-plateforme {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 2);
  min-height: 64px;
}

.sb-c-plateforme__icone { display: inline-flex; flex-shrink: 0; }
.sb-c-plateforme__icone svg { display: block; border-radius: 6px; }
.sb-c-plateforme__texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* ── LA BARRE : TROIS COMMANDES, ET LE TITRE EN BULLE ──────────────────── */
/*
 * En barre, le titre complet ne tient pas et le tronquer n'apprend rien. Il
 * passe en bulle, au survol et au focus clavier — et au doigt, en touchant
 * la pochette. Les trois commandes prennent la place : précédent, lecture,
 * suivant.
 */

.sb-c-saut {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--encre);
  cursor: pointer;
}

.sb-c-saut:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wp--preset--color--encre) 10%, transparent);
}
.sb-c-saut:disabled { opacity: 0.3; cursor: default; }

.est-compact .sb-c-saut { display: inline-flex; }
.est-compact .sb-c-piste { display: none; }

.sb-c-bulle {
  display: none;
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  max-width: min(22rem, 80vw);
  padding: 8px 12px;
  border-radius: var(--wp--custom--rayon-petit);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  font-size: var(--wp--preset--font-size--legende);
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.3);
  pointer-events: none;
}

.est-compact { position: fixed; }
.est-compact:hover .sb-c-bulle,
.est-compact:focus-within .sb-c-bulle,
.est-compact.montre-bulle .sb-c-bulle { display: block; }

/* En grand, le titre est écrit : la bulle n'a rien à dire. */
.sb-s-accueil-lecteur:not(.est-compact) .sb-c-bulle,
.sb-s-episode-lecteur:not(.est-compact) .sb-c-bulle { display: none; }

/* ── LE PIED, RANGÉ ────────────────────────────────────────────────────── */

.sb-l-pied-rang { gap: calc(var(--wp--custom--rythme) * 5); align-items: flex-start; }
.sb-l-pied-mot { max-width: 34ch; }

.sb-c-pied-marque::before {
  content: "";
  display: block;
  width: 150px; height: 42px;
  margin-block-end: calc(var(--wp--custom--rythme) * 2);
  background: var(--rena-logo-verrou-horizontal) left center / contain no-repeat;
}

.sb-c-pied-marque { margin-block-end: calc(var(--wp--custom--rythme) * 2); }
.sb-c-pied-legal { color: var(--wp--preset--color--encre-douce); opacity: 0.8; }

.sb-l-pied-liens .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--wp--custom--rythme) * 1.25);
}

/* ── MOINS D'AIR ───────────────────────────────────────────────────────── */
/*
 * Mesuré sur téléphone : entre un titre et son paragraphe, l'écart atteignait
 * 60 px — l'écart de bloc de WordPress (24) s'ajoutait aux marges propres de
 * chaque élément. L'écart global descend à 14 px, et les sections reprennent
 * la main sur leur rythme.
 */

.sb-s-accueil-une, .sb-s-apropos-tete, .sb-s-episode-tete {
  padding-block: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 4);
}

.sb-s-apropos-texte, .sb-s-apropos-pour-qui,
.sb-s-episode-notes, .sb-s-accueil-episodes {
  padding-block: calc(var(--wp--custom--rythme) * 3);
}

.sb-c-surtitre { margin-block-end: calc(var(--wp--custom--rythme) * 1.5); }
.sb-s-accueil-une .sb-c-titre { margin-block: 0 calc(var(--wp--custom--rythme) * 2); }
.sb-c-chapo { margin-block-end: calc(var(--wp--custom--rythme) * 3); }
.sb-c-texte p { margin-block: calc(var(--wp--custom--rythme) * 1.75); }

/* Les méta d'un épisode tiennent sur une ligne. */
.sb-c-meta {
  margin-block: calc(var(--wp--custom--rythme) * 1) calc(var(--wp--custom--rythme) * 2);
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

/* ── LE NOM CACHÉ À L'ŒIL, PAS AU LECTEUR D'ÉCRAN ──────────────────────── */
/*
 * Le verrou du pied est une image de fond : elle ne porte aucun texte pour
 * une synthèse vocale. Le nom existe donc en clair dans le document, et
 * seule la vue le cache.
 */

.sb-c-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sb-c-pied-marque { position: relative; display: block; }
.sb-c-pied-marque::before { width: 190px; height: 38px; }

/* ── L'EN-TÊTE : UNE LIGNE, UN SEUL BOUTON ─────────────────────────────── */
/*
 * Trois pastilles bordées pesaient autant que le logo et passaient à la
 * ligne sur un téléphone — l'en-tête faisait 124 px de haut. Deux liens de
 * texte et UNE pastille suffisent : seul « s'abonner » est une action, le
 * reste est de la navigation. Tout tient sur une ligne, partout.
 */

.sb-l-entete { padding-block: calc(var(--wp--custom--rythme) * 2); }

.sb-l-entete-rang {
  flex-wrap: nowrap;
  gap: calc(var(--wp--custom--rythme) * 2);
}

/* La rangée est en `space-between` et porte TROIS enfants, donc la navigation
   se retrouvait suspendue au milieu — à 708 px sur une rangée de 112 à 1328.
   Une marge automatique avale tout l'espace libre avant que
   `justify-content` ne s'applique : la marque reste à gauche, les trois ronds
   viennent se ranger contre l'interrupteur de thème, séparés du seul `gap`.
   Demande du 22.10.2026.

   La marge est logique (`inline-start`), pas `left` : le jour où une version
   arabe arrive, le bloc bascule tout seul.

   ⚠️ LE SÉLECTEUR DOIT ÊTRE DESCENDANT, UNE SEULE CLASSE NE SUFFIT PAS.
   WordPress sert `.is-layout-flex > :is(*, div) { margin: 0 }`, et ce
   `:is(*, div)` n'est pas une maladresse : `:is()` prend la spécificité de
   son argument le plus fort, donc le `div` lui en donne (0,1,1) là où une
   classe seule plafonne à (0,1,0). `.sb-l-nav { margin-inline-start: auto }`
   perdait en silence — la règle était bien dans la feuille, la marge
   calculée valait 0. Mesuré par `CSS.getMatchedStylesForNode`, parce que la
   géométrie seule disait « rien n'a bougé » sans dire pourquoi. */
.sb-l-entete-rang > .sb-l-nav { margin-inline-start: auto; }

.sb-c-marque::before { width: 168px; height: 33px; }

.sb-l-nav .wp-block-navigation__container {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--wp--custom--rythme) * 2.5);
}

/* ══ LES TROIS ONGLETS SONT DES RONDS, COMME L'INTERRUPTEUR DE THÈME ══════
   Demande du 21.10.2026. Trois mots côte à côte prenaient 175 px de la barre
   et obligeaient à deux paliers de rétrécissement de police ; trois ronds de
   40 px en prennent 136, quel que soit l'écran, et rien ne rapetisse.

   LE NOM N'EST PAS SUPPRIMÉ, IL EST DÉPLACÉ. C'est le `__label` lui-même qui
   devient l'infobulle — pas une chaîne recopiée dans le CSS, qu'un client ne
   pourrait plus corriger, et pas un `aria-label` qui doublerait le texte.
   Le mot reste donc le nom accessible du lien, et il reste éditable.

   ⚠️ `opacity` SEULE, JAMAIS `visibility: hidden` NI `display: none`. Les
   deux autres sortent l'élément de l'arbre d'accessibilité : le lien
   n'aurait alors plus aucun nom, et trois ronds muets se suivraient dans un
   lecteur d'écran. Une transparence, elle, ne retire rien à personne.

   L'INFOBULLE S'ANCRE SUR L'ONGLET, ET C'EST WORDPRESS QUI LE DÉCIDE.
   Le `__content` garde `position: static`, mais le `<li>` au-dessus porte
   `position: relative` — c'est le bloc de navigation du cœur qui le pose
   sur `.wp-block-navigation-item`. Le bloc contenant de l'infobulle est
   donc l'onglet, pas la rangée, et chaque nom tombe sous son propre rond.

   Un commentaire antérieur affirmait l'inverse — « ancrée sur la rangée » —
   et il était faux : vérifié le 22.10.2026 en remontant la chaîne des
   ancêtres positionnés. Ne remets pas `.sb-c-onglet` en `static` en croyant
   que ça ne change rien : les trois noms iraient se superposer au bord
   droit de la barre.

   Ça tient parce que les ronds sont maintenant à droite et que l'infobulle
   s'étend vers la gauche : les quinze positions — trois onglets × 320, 360,
   390, 430 et 1440 px — sont entièrement dans l'écran, mesurées au survol. */

.sb-l-nav { position: relative; }

.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon-rond);
  color: var(--wp--preset--color--encre-douce);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* L'icône est un MASQUE, pas une image : elle prend `currentColor` et suit
   donc le survol, l'état courant et le mode sombre sans qu'on redessine un
   seul fichier. */
.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--rena-onglet-icone) center / contain no-repeat;
  mask: var(--rena-onglet-icone) center / contain no-repeat;
}

/* Chaque onglet porte son dessin dans un jeton, et le `::before` s'en sert
   comme masque : la couleur vient donc du `currentColor` du lien, et les deux
   thèmes se renversent sans qu'aucun fichier ne soit dupliqué.

   ÉPISODES N'EST PAS UN MICRO. Il l'a été jusqu'au 22.10.2026, et c'était un
   contresens : le micro est l'outil de celui qui enregistre, alors que
   l'onglet mène à ce qu'on écoute. Une onde sonore dit l'audio sans désigner
   d'appareil, donc sans se tromper de personne. Le triangle de lecture a été
   écarté pour la même raison inverse — il promet de lancer un son, quand le
   lien ouvre une liste.

   À PROPOS EST UN « i » CERCLÉ, pas une silhouette. La silhouette désignait
   une personne ; la page parle du projet autant que de qui le porte.

   Le dessin ne porte aucun texte : le nom reste dans le `__label`, éditable
   dans l'administration. Une icône ne doit jamais être le seul endroit où un
   mot existe. */

.sb-l-nav .sb-c-onglet--accueil { --rena-onglet-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.2l9 7.4'/%3E%3Cpath d='M5.4 9.4V20.4h13.2V9.4'/%3E%3Cpath d='M9.8 20.4v-5.6h4.4v5.6'/%3E%3C/svg%3E"); }
.sb-l-nav .sb-c-onglet--episodes { --rena-onglet-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.2v3.6M8 6.8v10.4M12 4.2v15.6M16 6.8v10.4M20.4 10.2v3.6'/%3E%3C/svg%3E"); }
.sb-l-nav .sb-c-onglet--apropos { --rena-onglet-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5'/%3E%3Ccircle cx='12' cy='7.9' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content:hover,
.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--accent-texte);
  border-color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

/* ── le nom, sous la barre ─────────────────────────────────────────────── */
.sb-l-nav .sb-c-onglet .wp-block-navigation-item__label {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  padding: 4px 10px;
  border-radius: var(--wp--custom--rayon-petit);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  font-family: var(--wp--preset--font-family--titre);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.sb-l-nav .sb-c-onglet:hover .wp-block-navigation-item__label,
.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__content,
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__label { transition: none; }
}

/* Sous 26 rem, le verrou cède la place au seul symbole. */
@media (max-width: 34rem) {
  .sb-c-marque::before {
    width: 30px; height: 30px;
    background-image: var(--rena-logo);
  }
  .sb-l-nav .wp-block-navigation__container { gap: calc(var(--wp--custom--rythme) * 1.75); }
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__content { width: 36px; height: 36px; }
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__content::before { width: 18px; height: 18px; }
}

/*
 * Un QUATRIÈME palier, sous 22 rem. Les paliers s'arrêtaient à 34 rem, et à
 * 320 px la rangée d'en-tête réclamait 328 : huit pixels de trop, et les huit
 * pages défilaient latéralement. Mesuré : la navigation partait à x=154 pour
 * 175 px de large, dont 28 de gouttières entre trois onglets.
 */
@media (max-width: 22rem) {
  .sb-l-entete-rang { gap: var(--wp--custom--rythme); }
  .sb-l-nav .wp-block-navigation__container { gap: var(--wp--custom--rythme); }
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__content { width: 34px; height: 34px; }
  .sb-l-nav .sb-c-onglet .wp-block-navigation-item__content::before { width: 17px; height: 17px; }
}

.sb-l-entete.a-defile { padding-block: calc(var(--wp--custom--rythme) * 1.25); }
.sb-l-entete.a-defile .sb-c-marque::before { width: 134px; height: 26px; }

@media (max-width: 34rem) {
  .sb-l-entete.a-defile .sb-c-marque::before { width: 26px; height: 26px; }
}

/* Le lecteur en grand, sur téléphone : le bouton se range à côté du texte
   au lieu de prendre un rang pour lui seul — le bloc perdait 60 px de haut. */
@media (max-width: 60rem) {
  .sb-s-accueil-lecteur .sb-c-jouer,
  .sb-s-episode-lecteur .sb-c-jouer { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .sb-s-accueil-lecteur .sb-c-pochette,
  .sb-s-episode-lecteur .sb-c-pochette { grid-row: 1 / span 2; align-self: center; }
  .sb-l-lecteur-corps { grid-column: 2; grid-row: 1 / span 2; }
  .sb-l-lecteur-piste { grid-column: 1 / -1; grid-row: 3; }
}

/* ── LE MENU COLLE, SANS ATTENDRE LE SCRIPT ────────────────────────────── */
/*
 * `position: sticky` était posé par la classe `est-collant`, ajoutée en
 * JavaScript. Rien ne justifiait d'attendre : coller est un comportement de
 * mise en page, pas de script. Le script ne garde que le filet au défilement.
 */



/* ── LES LIGNES DE LA MODALE S'ALIGNENT À GAUCHE ───────────────────────── */
/*
 * Un reste de la première version, où la ligne était une colonne :
 * `justify-content: center` y centrait verticalement. En rangée, il centrait
 * l'icône et le texte au milieu de la ligne.
 */

.sb-c-plateforme {
  justify-content: flex-start;
  gap: calc(var(--wp--custom--rythme) * 2);
  padding: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 2);
  min-height: 60px;
}

.sb-c-plateforme__texte { align-items: flex-start; text-align: start; }
.sb-c-plateforme__nom { font-size: var(--wp--preset--font-size--corps); }

.sb-c-modale__corps { padding: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 3); }
.sb-c-modale__titre { margin-block: calc(var(--wp--custom--rythme) * 1) calc(var(--wp--custom--rythme) * 0.75); }
.sb-c-modale__chapo { margin-block-end: calc(var(--wp--custom--rythme) * 2.5); }
.sb-l-plateformes--modale { gap: calc(var(--wp--custom--rythme)); }

.sb-c-modale__fermer {
  inset-block-start: calc(var(--wp--custom--rythme) * 1.5);
  inset-inline-end: calc(var(--wp--custom--rythme) * 1.5);
  border: 1.5px solid var(--wp--preset--color--filet);
}

/* ── LA BULLE, RECENTRÉE SUR LA BARRE ──────────────────────────────────── */

.sb-c-bulle {
  inset-inline: calc(var(--wp--custom--rythme) * 2);
  transform: none;
  max-width: none;
}

/* ── LE TEXTE COURANT EST JUSTIFIÉ ─────────────────────────────────────── */
/*
 * Avec césure automatique, sans quoi le français justifié creuse des rivières
 * de blanc entre les mots — c'est la langue qui a les mots les plus longs des
 * trois que ce site pourrait parler. `text-wrap: pretty` évite en plus de
 * laisser un mot seul sur la dernière ligne, là où le navigateur le sait.
 *
 * Seul le texte COURANT est justifié. Les titres, les légendes et tout ce qui
 * tient sur deux lignes restent au fer à gauche : justifier trois mots ne
 * fait qu'écarter trois mots.
 */

.sb-c-texte,
.sb-c-texte p,
.sb-c-chapo {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

.sb-c-pitch, .sb-c-mention { text-wrap: pretty; }

@media (max-width: 30rem) {
  /* Sous 30 rem, une ligne porte trop peu de mots pour que la justification
     reste propre : on revient au fer à gauche. */
  .sb-c-texte, .sb-c-texte p, .sb-c-chapo { text-align: start; }
}

/* ── LA PAGE OÙ L'ON EST SE VOIT DANS LE MENU ──────────────────────────── */
/*
 * WordPress pose `current-menu-item` au rendu. La navigation sans
 * rechargement, elle, pose `aria-current="page"` — qui est de toute façon ce
 * qu'une synthèse vocale annonce. Les deux mènent au même dessin : un trait
 * sous l'onglet, et l'encre pleine au lieu du gris.
 */

/* La page courante : le rond se remplit. Le soulignement qui marquait le
   mot n'a plus de mot à souligner, et un rond plein se repère d'un coup
   d'œil dans une rangée de ronds vides. */
.sb-l-nav .current-menu-item > .wp-block-navigation-item__content,
.sb-l-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--rena-plein-texte);
  background: var(--rena-plein);
  border-color: var(--rena-plein);
  text-decoration: none;
}

.sb-l-nav .current-menu-item > .wp-block-navigation-item__content:hover,
.sb-l-nav .wp-block-navigation-item__content[aria-current="page"]:hover {
  color: var(--rena-plein-texte);
  background: var(--rena-plein);
  border-color: var(--rena-plein);
}

.sb-l-pied-liens .current-menu-item > .wp-block-navigation-item__content,
.sb-l-pied-liens .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--encre);
  font-weight: 700;
}

/* ── LE MENU COLLE — SUR LE BON ÉLÉMENT ────────────────────────────────── */
/*
 * `position: sticky` était posé sur `.sb-l-entete`, qui vit à l'intérieur du
 * `<header class="wp-block-template-part">`. Or un élément collant ne sort
 * jamais de son bloc conteneur, et ce `<header>` ne fait que la hauteur de
 * la barre : il n'y avait littéralement aucune place où coller.
 *
 * Mesuré le 03.10.2026 : parent de 72 px, page de 2637 px.
 */

header.wp-block-template-part {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--wp--preset--color--papier);
}

/* ── LE MOT EST ÉCRIT, PAS DESSINÉ ─────────────────────────────────────── */
/*
 * Le verrou en image de fond rendait le mot à 33 px de haut : lisible à la
 * loupe, pas à l'écran. Le symbole reste une image, le mot redevient du
 * TEXTE — il se met à l'échelle, il se sélectionne, et il se lit.
 */

.sb-c-marque::before {
  width: 30px;
  height: 30px;
  background-image: var(--rena-logo);
}

.sb-c-marque .wp-block-site-title {
  display: block;
  margin: 0;
}

/* ══ TOUTE LA MARQUE MÈNE À L'ACCUEIL, SYMBOLE COMPRIS ═══════════════════
   Demande du 21.10.2026. Le symbole est un `::before` posé sur le GROUPE ;
   le lien, lui, ne porte que le mot. Cliquer sur le symbole ne faisait donc
   rien, ce que personne ne devine — un logo en haut à gauche est un lien
   depuis trente ans.

   Le lien s'ÉTIRE sur le groupe plutôt que de déménager le symbole dans le
   `<a>`. Déménager aurait cassé le palier de 21 rem, où c'est le titre de
   site qu'on masque : le symbole serait parti avec lui.

   UN SEUL LIEN, PAS DEUX. Ajouter un second lien vers l'accueil aurait donné
   deux entrées identiques à la suite dans la liste des liens d'un lecteur
   d'écran. */
.sb-c-marque { position: relative; }

.sb-c-marque .wp-block-site-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sb-c-marque .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 700;
  font-size: calc(var(--wp--preset--font-size--titre-fiche) + 4px);
  letter-spacing: var(--wp--custom--interlettre-titre);
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}

.sb-l-entete.a-defile .sb-c-marque::before { width: 26px; height: 26px; }
.sb-l-entete.a-defile .sb-c-marque .wp-block-site-title a { font-size: var(--wp--preset--font-size--titre-fiche); }

@media (max-width: 30rem) {
  .sb-c-marque .wp-block-site-title a { font-size: var(--wp--preset--font-size--titre-fiche); }
}

/* ── LE PIED PORTE LE VERROU, LUI ──────────────────────────────────────── */
.sb-c-pied-marque::before { width: 210px; height: 41px; }

/* ── UNE GRILLE ÉDITORIALE POUR LES PAGES DE TEXTE ─────────────────────── */
/*
 * Sur grand écran, le titre d'une section se posait au milieu de la page et
 * son texte plus loin encore : la mesure de lecture était bien tenue, mais
 * elle flottait. Le titre prend maintenant la colonne de gauche, le texte la
 * colonne de lecture, et les deux s'alignent sur la même grille que le reste.
 */

@media (min-width: 60.01rem) {
  .sb-s-apropos-texte,
  .sb-s-apropos-pour-qui,
  .sb-s-episode-notes {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 40rem) minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
  }

  .sb-s-apropos-texte > .sb-c-titre,
  .sb-s-apropos-pour-qui > .sb-c-titre,
  .sb-s-episode-notes > .sb-c-titre,
  .sb-s-episode-notes > .sb-c-titre-liens { grid-column: 1; }

  .sb-s-apropos-texte > .sb-c-texte,
  .sb-s-apropos-pour-qui > .sb-c-texte,
  .sb-s-episode-notes > .sb-c-texte,
  .sb-s-episode-notes > .sb-l-liens { grid-column: 2; }

  .sb-s-episode-notes > .sb-c-titre-liens { grid-row: 2; margin-block-start: calc(var(--wp--custom--rythme) * 4); }
  .sb-s-episode-notes > .sb-l-liens { grid-row: 2; margin-block-start: calc(var(--wp--custom--rythme) * 4); }
}


/* ── LE HAUT DE PAGE SE SÉPARE DE LA LISTE ─────────────────────────────────
   Il manquait une frontière : le lecteur et la première fiche se touchaient,
   et l'œil lisait une seule coulée. Un filet pleine largeur plutôt qu'un
   titre plus gros — la séparation est structurelle, pas typographique, et
   elle doit se sentir sans se voir.

   Le filet s'efface vers ses extrémités : une ligne franche d'un bord à
   l'autre aurait coupé la page en deux au lieu de l'articuler. */
.sb-s-accueil-episodes {
  margin-block-start: calc(var(--wp--custom--rythme) * 7);
  padding-block-start: calc(var(--wp--custom--rythme) * 6);
  position: relative;
}

.sb-s-accueil-episodes::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--wp--preset--color--filet) 18%,
    var(--wp--preset--color--filet) 82%,
    transparent
  );
}

/* Sur la page qui ne porte QUE la liste, il n'y a rien à séparer. */
.sb-s-accueil-episodes:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}

.sb-s-accueil-episodes:first-child::before { content: none; }

/* ── LE FIL D'ARIANE ───────────────────────────────────────────────────────
   Une fiche d'épisode était une impasse : le menu ramène à l'accueil, jamais
   à la liste d'où l'on vient. */
/* LE COMPILATEUR REND UN BOUTON, PAS UN LIEN — c'est sa règle, et elle est
   bonne : un `<a>` isolé dans une section devient un `wp:button` pour que le
   client puisse l'éditer. Un fil d'Ariane ne doit pourtant pas peser comme un
   appel à l'action : on lui retire son fond, son contour et son remplissage,
   et on ne garde que le lien. */
.sb-s-episode-fil {
  margin-block-end: calc(var(--wp--custom--rythme) * 2);
  font-size: var(--wp--preset--font-size--legende);
}

.sb-s-episode-fil .sb-c-retour .wp-block-button__link,
.sb-l-fil .sb-c-retour {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 0.75);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 400;
  color: var(--wp--preset--color--encre-douce);
  text-decoration: none;
}

/* La flèche est décorative et tenue hors du texte : un lecteur d'écran
   annonce « Tous les épisodes », pas « flèche gauche ». */
.sb-s-episode-fil .sb-c-retour .wp-block-button__link::before,
.sb-l-fil .sb-c-retour::before {
  content: "\2190";
  font-size: 1.1em;
  line-height: 1;
}

.sb-s-episode-fil .sb-c-retour .wp-block-button__link:hover,
.sb-s-episode-fil .sb-c-retour .wp-block-button__link:focus-visible,
.sb-l-fil .sb-c-retour:hover,
.sb-l-fil .sb-c-retour:focus-visible {
  color: var(--wp--preset--color--encre);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PAGE « À PROPOS » TIENT SUR UNE SEULE GRILLE
   ───────────────────────────────────────────────────────────────────────────
   Elle n'en avait aucune, et ça se mesurait. Relevé le 03.10.2026 sur un
   écran de 1440 px :

     · le chapeau finissait à y=307, la section à y=506 — DEUX CENTS PIXELS
       de vide sous le texte, parce que le portrait était centré et plus haut
       que ce qu'il accompagnait ;
     · le titre commençait à x=112, le corps du texte à x=400. Deux
       alignements sur la même page, à 288 px l'un de l'autre ;
     · le premier bloc de texte n'avait pas d'intertitre là où « Pour qui »
       en avait un : la colonne de gauche était vide, et le texte semblait
       poussé au milieu de nulle part.

   La réponse n'est pas de déplacer des marges une à une. C'est UNE grille,
   la même du haut en bas : un rail d'intertitres, une colonne de lecture, et
   le portrait dans la troisième. Tout s'aligne alors sur deux verticales, et
   il n'y a plus de trou parce que plus rien n'est centré sur rien.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 60.01rem) {

  .sb-s-apropos-tete,
  .sb-s-apropos-texte,
  .sb-s-apropos-pour-qui,
  .sb-s-apropos-appel {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 38rem) minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
  }

  /* ── le haut de page ──────────────────────────────────────────────────── */

  /* LE HAUT DE PAGE, TROISIÈME VERSION — et les deux premières étaient
     fausses pour la même raison : le portrait vivait dans une colonne à lui,
     à l'autre bout de la page.

     Mesuré sur 1440 px : la colonne de lecture s'arrêtait à x=1032, le
     portrait commençait à x=1088 et finissait à 1328. Un rond de 240 px
     isolé contre le bord droit, et une bande vide entre les deux. Rien dans
     la mise en page ne les reliait.

     Le portrait est maintenant COLLÉ à la colonne de lecture, aligné sur le
     haut du titre, et plus petit. La hauteur du bloc est celle de son texte,
     pas celle d'une image. */
  /* ⚠️ TROIS RANGÉES DÉCLARÉES, PAS DEUX. Le bloc en a quatre enfants :
     surtitre, titre, chapeau ET la ligne de mention. La quatrième tombait
     dans une rangée IMPLICITE, que le portrait ne couvrait pas — il
     s'arrêtait à 312 px quand le texte descendait à 355. Mesuré le
     21.10.2026 sur 1440 px.

     `grid-row: 1 / -1` ne règle pas ça : la ligne `-1` est la dernière
     ligne EXPLICITE, donc une rangée implicite reste dehors. Il faut les
     déclarer. */
  .sb-s-apropos-tete {
    padding-block: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 2);
    grid-template-columns: minmax(0, 14rem) minmax(0, 34rem) auto minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }

  .sb-s-apropos-tete > .sb-c-surtitre {
    grid-column: 1; grid-row: 1;
    margin: 0;
    padding-block-start: calc(var(--wp--custom--rythme) * 1.5);
  }

  .sb-s-apropos-tete > .sb-c-titre { grid-column: 2; grid-row: 1; margin-block: 0; }

  /* Le rythme du haut de page est le SEUL à être serré : c'est le prix pour
     que la colonne de texte tienne dans la hauteur du rond. 71 + 12 + 29 +
     12 + 23 = 147 px pour un portrait de 192 — il reste de quoi encaisser
     une troisième ligne de titre sans dépasser. */
  .sb-s-apropos-tete > .sb-c-chapo {
    grid-column: 2; grid-row: 2;
    margin-block: calc(var(--wp--custom--rythme) * 1.5) 0;
    font-size: var(--wp--preset--font-size--titre-fiche);
    color: var(--wp--preset--color--encre-douce);
  }

  .sb-s-apropos-tete > .sb-c-meta {
    grid-column: 2; grid-row: 3;
    margin-block: calc(var(--wp--custom--rythme) * 1.5) 0;
  }

  /* Colonne 3 : juste après le texte, pas au bord. Les deux rangées, pour que
     le rond s'étende sur le titre ET le chapeau sans allonger ni l'un ni
     l'autre. */
  .sb-s-apropos-tete > .sb-c-portrait {
    grid-column: 3; grid-row: 1 / span 3;
    align-self: start;
    justify-self: start;
    width: 12rem;
    margin: 0;
  }

  /* ── les sections de texte ────────────────────────────────────────────── */

  .sb-s-apropos-texte,
  .sb-s-apropos-pour-qui {
    padding-block: calc(var(--wp--custom--rythme) * 4);
  }

  .sb-s-apropos-texte > .sb-c-titre,
  .sb-s-apropos-pour-qui > .sb-c-titre {
    grid-column: 1; grid-row: 1;
    margin: 0;
    padding-block-start: calc(var(--wp--custom--rythme) * 0.5);
    font-size: var(--wp--preset--font-size--titre-fiche);
  }

  .sb-s-apropos-texte > .sb-c-texte,
  .sb-s-apropos-pour-qui > .sb-c-texte {
    grid-column: 2; grid-row: 1;
    max-width: none;
  }

  /* Un filet entre les sections, repris de celui qui sépare le haut de
     l'accueil de sa liste : la page a maintenant un rythme, et il se voit
     sans qu'on ait à le lire. */
  .sb-s-apropos-pour-qui { position: relative; }

  .sb-s-apropos-pour-qui::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0 25%;
    height: 1px;
    background: var(--wp--preset--color--filet);
  }

  /* ── l'appel, sur les deux mêmes colonnes ─────────────────────────────── */

  /* L'encadré héritait du centrage des deux autres appels. Sur cette
     page-ci il doit suivre la même grille que tout le reste, sinon il
     redevient le bloc flottant qu'on cherchait à faire disparaître. */
  .sb-s-apropos-appel,
  .sb-s-apropos-appel > * { text-align: start; }

  .sb-s-apropos-appel > .sb-c-surtitre {
    grid-column: 1; grid-row: 1;
    margin: 0;
    padding-block-start: calc(var(--wp--custom--rythme) * 0.5);
  }

  .sb-s-apropos-appel > .sb-c-titre { grid-column: 2; grid-row: 1; margin-block: 0; }
  .sb-s-apropos-appel > .sb-c-chapo {
    grid-column: 2; grid-row: 2;
    margin-block: calc(var(--wp--custom--rythme) * 1.5) 0;
    max-width: none;
  }
  .sb-s-apropos-appel > .sb-c-appel {
    grid-column: 2; grid-row: 3;
    margin-block-start: calc(var(--wp--custom--rythme) * 2.5);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE DE RECHERCHE, ET LES QUATRE PAGES LÉGALES
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-l-chercher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.5);
  margin-block: calc(var(--wp--custom--rythme) * 2) calc(var(--wp--custom--rythme) * 3);
}

.sb-l-chercher .sb-c-champ { flex: 1 1 18rem; min-width: 0; }

.sb-l-chercher input[type="search"] {
  width: 100%;
  padding: calc(var(--wp--custom--rythme) * 1.25) calc(var(--wp--custom--rythme) * 2);
  border: 1.5px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--wp--preset--color--carte);
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--corps);
  color: var(--wp--preset--color--encre);
}

.sb-l-chercher input[type="search"]::placeholder { color: var(--wp--preset--color--encre-douce); }

.sb-l-chercher input[type="search"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-texte);
  outline-offset: 2px;
  border-color: transparent;
}

.sb-l-filtres { display: flex; flex-wrap: wrap; gap: calc(var(--wp--custom--rythme)); }

.sb-c-filtre {
  padding: calc(var(--wp--custom--rythme) * 0.875) calc(var(--wp--custom--rythme) * 1.75);
  border: 1.5px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon-rond);
  background: transparent;
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 600;
  color: var(--wp--preset--color--encre-douce);
  cursor: pointer;
}

.sb-c-filtre:hover { border-color: var(--wp--preset--color--encre-douce); color: var(--wp--preset--color--encre); }

/* L'ÉTAT ACTIF NE TIENT PAS QU'À LA COULEUR, et il n'y tient pas davantage
   depuis qu'il a quitté l'encre pour l'aplat de la maison, le 23.10.2026 :
   c'est l'ÉCART DE CLARTÉ qui porte l'information, pas la teinte. La peau
   doit tenir deux mesures — le texte de l'aplat sur l'aplat, et l'aplat sur
   le papier — sans quoi la pastille active cesse de se distinguer en niveaux
   de gris, donc pour qui ne voit pas l'accent. */
.sb-c-filtre.est-actif {
  border-color: var(--rena-plein);
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
}

.sb-c-filtre--ordre { margin-inline-start: auto; }

.sb-c-bilan {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

.sb-c-bilan:empty { display: none; }

/* Une fiche masquée par un filtre : `hidden` suffit, encore faut-il que la
   grille ne la réaffiche pas. `display: grid` sur `.sb-l-episodes` écrase
   `hidden`, qui ne vaut que `display: none` par défaut. */
.sb-l-episodes[hidden] { display: none; }

/*
 * LES MARGES AUTOMATIQUES DE WORDPRESS, SUR LES QUATRE PAGES LÉGALES
 * ───────────────────────────────────────────────────────────────────────────
 * `!important` n'est pas une facilité ici, c'est la seule issue : la feuille
 * de WordPress écrit `margin-left: auto !important` sur les enfants de TOUT
 * groupe `is-layout-constrained`, et le compilateur pose cette classe. Sans
 * la contrer, chaque enfant est centré dans sa cellule, et un intertitre se
 * dessine à la largeur de son texte — mesuré à 119 px pour « Article 1 ·
 * Accès » dans une colonne de 784.
 *
 * La règle vaut à TOUTES les largeurs, pas seulement en grille : entre 640 et
 * 960 px, les intertitres tombaient à x=45 et leurs paragraphes à x=130, parce
 * que seuls les seconds portent une mesure de lecture. Quatre-vingt-cinq pixels
 * de décalage entre un titre et le texte qu'il annonce.
 */
.wp-block-group.sb-s-legal > *,
.wp-block-group.sb-s-cgu > *,
.wp-block-group.sb-s-donnees-personnelles > *,
.wp-block-group.sb-s-cookies > * { margin-inline: 0 !important; }

@media (min-width: 60.01rem) {
  /* Les pages légales suivent le même rail que « À propos » : un texte de
     loi qui flotte au milieu d'une page sans repère se lit deux fois moins
     bien, et on vient de le corriger ailleurs. */
  .sb-s-legal,
  .sb-s-cgu,
  .sb-s-donnees-personnelles,
  .sb-s-cookies {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 38rem) minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
    padding-block: calc(var(--wp--custom--rythme) * 7) calc(var(--wp--custom--rythme) * 5);
  }

  /*
   * Le compilateur NUMÉROTE une classe dès qu'un même nom revient dans la
   * page : `sb-c-titre-1`, `sb-c-texte-2`, jusqu'à `-17` sur les CGU. Viser
   * `> .sb-c-titre` et `> .sb-c-texte` ne plaçait donc que le `h1`, et les
   * vingt autres enfants tombaient en placement automatique — articles et
   * textes dans des colonnes différentes, le corps à 208 px de large dans
   * 1040 px disponibles. Quatre pages illisibles au-dessus de 960 px.
   *
   * On place donc TOUS les enfants, comme la une le fait déjà
   * (`.sb-s-accueil-une > *`), et on ne remonte dans le rail que les trois
   * éléments d'en-tête, qui eux portent un nom unique. Une règle écrite
   * sur un nom numéroté se périmerait à la prochaine compilation.
   *
   * `.wp-block-group` en tête : la feuille de WordPress centre et borne les
   * enfants d'un groupe `is-layout-constrained`, et il faut la battre.
   */
  .wp-block-group.sb-s-legal > *,
  .wp-block-group.sb-s-cgu > *,
  .wp-block-group.sb-s-donnees-personnelles > *,
  .wp-block-group.sb-s-cookies > * {
    grid-column: 2;
    max-width: none;
    justify-self: stretch;
  }

  .wp-block-group.sb-s-legal > .sb-c-surtitre,
  .wp-block-group.sb-s-cgu > .sb-c-surtitre,
  .wp-block-group.sb-s-donnees-personnelles > .sb-c-surtitre,
  .wp-block-group.sb-s-cookies > .sb-c-surtitre {
    grid-column: 1; grid-row: 1;
  }

  .wp-block-group.sb-s-legal > .sb-c-titre,
  .wp-block-group.sb-s-cgu > .sb-c-titre,
  .wp-block-group.sb-s-donnees-personnelles > .sb-c-titre,
  .wp-block-group.sb-s-cookies > .sb-c-titre {
    grid-column: 1; grid-row: 2;
    margin-block: 0;
    font-size: var(--wp--preset--font-size--titre-section);
  }

  .wp-block-group.sb-s-legal > .sb-c-maj,
  .wp-block-group.sb-s-cgu > .sb-c-maj,
  .wp-block-group.sb-s-donnees-personnelles > .sb-c-maj,
  .wp-block-group.sb-s-cookies > .sb-c-maj {
    grid-column: 1; grid-row: 3;
    margin-block-start: calc(var(--wp--custom--rythme) * 1.5);
  }
}

/* Les intertitres d'une page légale. Ils structurent un texte long, et sans
   eux les quatre pages redeviennent le pavé qu'on vient de découper.
   Le compilateur les pose en enfants DIRECTS de la section, pas dans un
   `.sb-c-texte` : `.sb-c-texte h2` ne les atteignait pas. Le sélecteur par
   préfixe prend la série numérotée sans l'énumérer. */
.sb-c-texte h2,
.sb-s-legal > [class*="sb-c-titre-"],
.sb-s-cgu > [class*="sb-c-titre-"],
.sb-s-donnees-personnelles > [class*="sb-c-titre-"],
.sb-s-cookies > [class*="sb-c-titre-"] {
  margin-block: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 1.5);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-fiche);
  font-weight: 700;
  letter-spacing: var(--wp--custom--interlettre-titre);
}

.sb-c-texte h2:first-child { margin-block-start: 0; }

/* Même raison : la mesure de lecture doit valoir aussi pour les paragraphes
   numérotés, sinon le téléphone et la tablette les rendent pleine largeur. */
.sb-s-legal > [class*="sb-c-texte"],
.sb-s-cgu > [class*="sb-c-texte"],
.sb-s-donnees-personnelles > [class*="sb-c-texte"],
.sb-s-cookies > [class*="sb-c-texte"] { max-width: var(--wp--custom--colonne); }

/* ═══════════════════════════════════════════════════════════════════════════
   LES PLATEFORMES, DANS LA PAGE
   ───────────────────────────────────────────────────────────────────────────
   Deux formes du même bloc, et la différence n'est pas décorative :

     · `--rangee`, au-dessus de la ligne de flottaison, pour reconnaître un
       logo et cliquer. Pas de sous-titre : il n'y a rien à expliquer là ;
     · la forme pleine, en bas de page, où il reste de la place pour dire à
       quoi sert chaque plateforme.

   Les logos gardent LEURS couleurs. Un Spotify repeint en accent n'est
   plus reconnu, et c'est la reconnaissance qui fait le clic.
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-l-plateformes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--wp--custom--gouttiere);
  margin: calc(var(--wp--custom--rythme) * 3) 0 0;
  padding: 0;
  list-style: none;
}

.sb-c-plateforme {
  display: flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.5);
  padding: calc(var(--wp--custom--rythme) * 1.75) calc(var(--wp--custom--rythme) * 2);
  border: 1.5px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon);
  background: var(--wp--preset--color--carte);
  text-decoration: none;
  color: var(--wp--preset--color--encre);
}

.sb-c-plateforme:hover,
.sb-c-plateforme:focus-visible {
  border-color: var(--wp--preset--color--encre);
  transform: translateY(-1px);
}

.sb-c-plateforme__icone { display: flex; flex: 0 0 auto; }
.sb-c-plateforme__texte { display: flex; flex-direction: column; min-width: 0; }

.sb-c-plateforme__nom {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--corps);
  font-weight: 700;
}

.sb-c-plateforme__note {
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

/* ── la rangée du haut de page ───────────────────────────────────────────── */

.sb-l-plateformes--rangee {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--wp--custom--rythme) * 1.25);
  margin-block-start: calc(var(--wp--custom--rythme) * 3);
}

/* PAS DE PASTILLE RONDE. Avec un rayon complet, une boîte de 56 px de haut
   devient un ovale : les demi-cercles mangent 56 px de largeur de chaque
   côté, et le logo flotte au milieu d'un vide qu'on prend pour une erreur
   de centrage. Un rayon court garde la forme d'un bouton. */
.sb-l-plateformes--rangee .sb-c-plateforme {
  gap: calc(var(--wp--custom--rythme));
  padding: calc(var(--wp--custom--rythme) * 1.125) calc(var(--wp--custom--rythme) * 1.75);
  border-radius: 10px;
}

/* La note disparaît, pas le nom : une rangée d'icônes sans texte oblige à
   deviner, et deviner coûte plus cher qu'un mot. */
.sb-l-plateformes--rangee .sb-c-plateforme__note { display: none; }

.sb-l-plateformes--rangee .sb-c-plateforme__nom {
  font-size: var(--wp--preset--font-size--legende);
}

/* La section d'abonnement reçoit le focus au clavier sans halo disgracieux :
   elle n'est focalisable que parce qu'on l'y amène. */
#abonner:focus { outline: none; }
#abonner:focus-visible { outline: 2px solid var(--wp--preset--color--accent-texte); outline-offset: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   UNE PAGE DE TEXTE NE S'ÉTALE PAS SUR TOUTE LA LARGEUR
   ───────────────────────────────────────────────────────────────────────────
   Le rail et la colonne de lecture font ensemble 1030 px. Sur un écran de
   1440, la section en faisait 1216 : trois cents pixels abandonnés à droite
   de CHAQUE bloc, qu'aucun contenu ne venait jamais remplir.

   Ce n'est pas un défaut de la grille, c'est un défaut du contenant. On le
   réduit à ce que le contenu occupe vraiment, et on le centre : le vide
   repart alors équitablement des deux côtés, où il devient une marge au lieu
   d'un trou.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 60.01rem) {
  .sb-s-apropos-tete,
  .sb-s-apropos-texte,
  .sb-s-apropos-pour-qui,
  .sb-s-apropos-appel,
  .sb-s-legal,
  .sb-s-cgu,
  .sb-s-donnees-personnelles,
  .sb-s-cookies {
    max-width: var(--rena-page);
    margin-inline: auto;
  }

  /* Plus de quatrième colonne : il n'y a rien à y mettre. */
  .sb-s-apropos-tete {
    grid-template-columns: minmax(0, 13rem) minmax(0, 34rem) auto;
  }

  /* ⚠️ LE RAIL EST UN JETON, ET IL N'A QU'UN SEUL ENDROIT.
     Cette grille a été redéclarée six fois depuis le 21.10 — 15rem, puis
     14rem, puis 13rem — et tout ce qui recopiait sa valeur à la main est
     resté sur une ancienne. L'exergue calculait encore sur 15rem le
     23.10 : il démarrait 56 px à gauche du paragraphe qu'il annonce.
     Ce qui a besoin de la largeur du rail la LIT ici.

     ⚠️ LA DEUXIÈME COLONNE EST BORNÉE, et ce n'est pas un détail de goût.
     Elle valait `1fr` : à 1440 px le paragraphe faisait 784 px, soit près de
     95 signes par ligne, là où la maison en vise 65. Justifié par-dessus,
     avec césure automatique, ça coupait « pi-vots » et « Entredon-ner » au
     milieu d'une page de présentation. `--wp--custom--colonne` est la mesure
     de lecture du site — 40 rem — et elle existait déjà : la grille la
     contournait avec un `max-width: none`. */
  .sb-s-apropos-texte,
  .sb-s-apropos-pour-qui,
  .sb-s-apropos-appel,
  .sb-s-legal,
  .sb-s-cgu,
  .sb-s-donnees-personnelles,
  .sb-s-cookies {
    grid-template-columns: minmax(0, var(--rena-rail)) minmax(0, var(--wp--custom--colonne));
  }

  /* L'encadré d'appel garde sa marge propre : collé au bord, sa bordure
     toucherait le texte des sections au-dessus. */
  .sb-s-apropos-appel { padding-inline: calc(var(--wp--custom--rythme) * 4); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LES CINQ PLATEFORMES TIENNENT SUR UNE LIGNE
   ───────────────────────────────────────────────────────────────────────────
   Au premier essai, la rangée vivait dans la colonne de texte du haut de
   page — 613 px pour cinq pastilles qui en demandent neuf cents. Le flux RSS
   partait seul à la ligne, et une pastille orpheline se lit comme un oubli.

   La rangée sort donc de la colonne et prend TOUTE la largeur du haut de
   page, sous le texte et l'image. Il y a la place, et le geste y gagne :
   cinq choix alignés se comparent d'un regard.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 60.01rem) {
  .sb-s-accueil-une > .sb-l-plateformes--rangee,
  .sb-s-episode-tete > .sb-l-plateformes--rangee {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    margin-block-start: calc(var(--wp--custom--rythme) * 3.5);
  }

  /* Cinq colonnes égales en bas de page : `auto-fit` en posait quatre puis
     une, et la cinquième restait seule sur sa ligne. */
  .sb-s-accueil-abonner .sb-l-plateformes,
  .sb-s-episode-abonner .sb-l-plateformes,
  .sb-s-apropos-appel .sb-l-plateformes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--wp--custom--rythme) * 1.25);
    padding: calc(var(--wp--custom--rythme) * 2);
  }
}

/* LA RANGÉE PREND MOINS DE HAUTEUR. Elle en faisait 60 px par pastille pour
   un mot et un logo de 22 px : le reste était du remplissage. */
.sb-l-plateformes--rangee .sb-c-plateforme {
  gap: calc(var(--wp--custom--rythme) * 0.875);
  padding: calc(var(--wp--custom--rythme) * 0.875) calc(var(--wp--custom--rythme) * 1.5);
  white-space: nowrap;
}

.sb-l-plateformes--rangee .sb-c-plateforme__icone svg { width: 20px; height: 20px; }

/* « Newsletter LinkedIn » est le seul libellé long, et c'est lui qui décidait
   de la largeur de toute la rangée. Sur la rangée, il se dit en un mot. */
.sb-l-plateformes--rangee .sb-c-plateforme__nom { font-size: 13px; }

/* Les cinq cartes font la même hauteur. Sans ça, « Pour toute autre
   application » passe sur deux lignes et sa carte dépasse les quatre autres
   — on lit un défaut d'alignement là où il n'y a qu'un libellé plus long. */
/* La hauteur égale ne vaut QUE pour les cartes du bas. Posée sur toutes les
   listes, elle étirait aussi les pastilles de la rangée sur la plus haute —
   celle dont la note est la plus longue — et les cinq faisaient 100 px pour
   un logo de 20. */
.sb-l-plateformes:not(.sb-l-plateformes--rangee) .sb-c-plateforme { height: 100%; }

/* Le chapeau de la section d'abonnement s'alignait sur le centre pendant que
   son titre partait à gauche : reste du centrage hérité des autres appels. */
.sb-s-accueil-abonner > *,
.sb-s-episode-abonner > * { text-align: start; }

.sb-s-accueil-abonner .sb-c-chapo,
.sb-s-episode-abonner .sb-c-chapo { margin-inline: 0; max-width: 44rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA FICHE D'ÉPISODE, SUR LA MÊME GRILLE QUE LE RESTE
   ───────────────────────────────────────────────────────────────────────────
   Elle avait le même défaut que « À propos », en pire parce que la pochette
   est large. Mesuré sur 1440 px :

     · la section allait de 112 à 1328, la pochette de 773 à 1328 — 555 px
       d'image collée au bord droit, et une bande vide entre elle et le titre ;
     · le titre commençait à x=112 et les notes à x=400 : deux alignements ;
     · les notes s'arrêtaient à 1040, laissant 288 px à droite.

   Un rail d'intertitres, une colonne de lecture, la pochette juste après —
   et le bloc ramené à sa largeur utile puis centré.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 60.01rem) {
  .sb-s-episode-fil,
  .sb-s-episode-tete,
  .sb-s-episode-notes,
  .sb-s-episode-abonner {
    max-width: 72rem;
    margin-inline: auto;
  }

  .sb-s-episode-tete {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 30rem) auto;
    grid-template-rows: auto auto auto;
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
    padding-block: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 3);
  }

  /* La pastille de rubrique rejoint le rail : c'est une étiquette, et sa
     place est celle qu'occupent « L'épisode » et « Site et réseaux » plus
     bas. La colonne de gauche cesse d'être vide. */
  .sb-s-episode-tete > .sb-c-rubrique {
    grid-column: 1; grid-row: 1;
    margin-block: calc(var(--wp--custom--rythme) * 0.5) 0;
  }

  .sb-s-episode-tete > .sb-c-titre {
    grid-column: 2; grid-row: 1;
    margin-block: 0;
  }

  .sb-s-episode-tete > .sb-c-meta {
    grid-column: 2; grid-row: 2;
    margin-block: calc(var(--wp--custom--rythme) * 1.5) 0;
  }

  /* La pochette, juste après le texte et bornée. Elle s'étend sur les trois
     rangées pour que sa hauteur ne pousse ni le titre ni les méta. */
  .sb-s-episode-tete > .sb-c-pochette-episode {
    grid-column: 3; grid-row: 1 / -1;
    align-self: start;
    justify-self: start;
    width: min(100%, 24rem);
    margin: 0;
  }

  .sb-s-episode-notes {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
    row-gap: calc(var(--wp--custom--rythme) * 4);
  }

  .sb-s-episode-notes > .sb-c-titre {
    grid-column: 1;
    margin-block: 0;
    padding-block-start: calc(var(--wp--custom--rythme) * 0.5);
    font-size: var(--wp--preset--font-size--titre-fiche);
  }

  .sb-s-episode-notes > .sb-c-texte,
  .sb-s-episode-notes > .sb-c-liens,
  .sb-s-episode-notes > .wp-block-buttons {
    grid-column: 2;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   « À PROPOS » N'EST PLUS DEUX PAVÉS GRIS
   ───────────────────────────────────────────────────────────────────────────
   La mise en page était juste et la page restait morte : rien que du texte
   de la même couleur, du même poids, sur toute la hauteur. Deux choses y
   remédient, et aucune n'ajoute un mot au contenu.

   L'EXERGUE reprend le geste le plus fort du site — la carte encre du
   lecteur — pour la phrase qui dit pourquoi le podcast existe. C'est le seul
   endroit de la page où les couleurs de la marque sont à pleine intensité ;
   ailleurs elles échouent au contraste (2,1 et 1,62 sur fond clair).

   LES TROIS PUBLICS étaient un paragraphe de six lignes qui nommait trois
   personnes. Trois fiches se parcourent du regard ; un paragraphe se saute.
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-s-apropos-exergue {
  margin-block: calc(var(--wp--custom--rythme) * 5);
  padding: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 5);
  border-radius: calc(var(--wp--custom--rayon) + 6px);
  background: var(--rena-exergue-fond);
}

.sb-s-apropos-exergue .sb-c-surtitre {
  margin-block: 0 calc(var(--wp--custom--rythme) * 2);
  color: var(--rena-exergue-accent);
}

.sb-s-apropos-exergue .sb-c-citation {
  margin: 0;
  max-width: 34rem;
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-section);
  font-weight: 600;
  line-height: var(--wp--custom--interligne-titre);
  letter-spacing: var(--wp--custom--interlettre-titre);
  color: var(--rena-exergue-texte);
}

/* Le point accent-2, la mécanique héritée de __MARQUE_MERE__ : la phrase se termine
   sur la couleur de la marque, pas sur un point noir. */
.sb-s-apropos-exergue .sb-c-citation::after {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-inline-start: 0.18em;
  border-radius: 50%;
  background: var(--rena-exergue-accent);
}

/* Les trois fiches sont posées côte à côte par la SECTION : chaque
   `sb-l-publics` est une fiche, pas leur conteneur. */
.sb-s-apropos-pour-qui { row-gap: var(--wp--custom--gouttiere); }

.sb-l-publics {
  padding: calc(var(--wp--custom--rythme) * 2.5);
  border-radius: var(--wp--custom--rayon);
  background: var(--wp--preset--color--carte);
}

.sb-l-publics .sb-c-quoi {
  margin-block: 0 calc(var(--wp--custom--rythme) * 1);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-fiche);
  font-weight: 700;
  letter-spacing: var(--wp--custom--interlettre-titre);
}

/* Chaque fiche porte une pastille de couleur : trois publics, les trois
   couleurs des rubriques. C'est le seul rappel chromatique de la page. */
.sb-l-publics { border-top: 3px solid var(--wp--preset--color--filet); }
.sb-l-publics[data-rang="1"] { border-top-color: var(--wp--preset--color--accent); }
.sb-l-publics[data-rang="2"] { border-top-color: var(--wp--preset--color--accent-2); }
.sb-l-publics[data-rang="3"] { border-top-color: var(--wp--preset--color--encre); }

.sb-l-publics .sb-c-texte {
  margin: 0;
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

@media (min-width: 60.01rem) {
  /* L'exergue tient EXACTEMENT la colonne de lecture — mêmes deux bords.
     Il faisait 784 px quand le paragraphe est passé à 640 : la correction
     d'un défaut en avait créé un autre, dans l'autre sens.

     Les trois valeurs sont les jetons de la grille, et rien d'autre : le
     rail, la gouttière doublée, la mesure de lecture. La marge de gauche
     recentre la boîte comme le ferait `margin-inline: auto`, mais sans
     perdre la main dessus — `auto` recentrerait sur la largeur bornée, et
     le bloc décrocherait de 40 px vers la gauche. */
  .sb-s-apropos-exergue { max-width: var(--rena-page); margin-inline: auto; }
  /* Les trois fiches prennent la colonne de lecture ET ce qui reste : à
     trois de front, un rail de 13 rem les étranglerait. */
  .sb-s-apropos-pour-qui {
    grid-template-columns: minmax(0, 13rem) repeat(3, minmax(0, 1fr));
    column-gap: var(--wp--custom--gouttiere);
  }
  .sb-s-apropos-pour-qui > .sb-c-titre { grid-column: 1; }
  .sb-s-apropos-pour-qui > .sb-l-publics { grid-column: auto; }
}


/* ── LE HAUT DE « À PROPOS » A LA MÊME ANATOMIE QU'UNE FICHE ──────────────
   Étiquette, titre, et une ligne de repères. C'est ce qui lui manquait : le
   titre et sa phrase flottaient sans rien pour les ancrer, et la hauteur du
   portrait creusait le reste. La ligne de repères remplit cette hauteur avec
   quelque chose à lire, au lieu de la laisser vide. */
@media (min-width: 60.01rem) {
  .sb-s-apropos-tete { grid-template-rows: auto auto auto; }

  .sb-s-apropos-tete > .sb-c-meta {
    grid-column: 2; grid-row: 3;
    margin-block: calc(var(--wp--custom--rythme) * 2.5) 0;
  }

  /* LES TROIS FICHES FONT LA MÊME HAUTEUR. `align-items: start`, posé pour
     que les intertitres du rail ne s'étirent pas, les faisait aussi se
     rétracter sur leur texte — trois hauteurs pour trois fiches côte à
     côte. Elles reprennent leur alignement ; le rail garde le sien. */
  .sb-s-apropos-pour-qui { align-items: stretch; }
  .sb-s-apropos-pour-qui > .sb-c-titre { align-self: start; }
}

.sb-s-apropos-tete .sb-c-meta {
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}


/* ── LA RANGÉE DE PLATEFORMES, RESSERRÉE ──────────────────────────────────
   Chaque pastille était une boîte plus haute que large pour un logo de
   20 px et un mot : le remplissage vertical faisait le double du texte, et
   le creux à gauche n'était pas celui de droite parce que l'icône et le mot
   n'avaient pas le même espacement.

   Un seul remplissage, le même des quatre côtés horizontalement, et une
   hauteur dictée par le contenu. */
.sb-l-plateformes--rangee .sb-c-plateforme {
  gap: calc(var(--wp--custom--rythme) * 1.125);
  padding-block: calc(var(--wp--custom--rythme) * 1.125);
  padding-inline: calc(var(--wp--custom--rythme) * 1.75);
  border-radius: 10px;
  line-height: 1;
}

/* L'icône et le mot sur la même ligne de base optique : le `flex` les
   centrait sur leur boîte, pas sur leur encre. */
.sb-l-plateformes--rangee .sb-c-plateforme__icone {
  align-items: center;
  line-height: 0;
}

.sb-l-plateformes--rangee .sb-c-plateforme__texte { justify-content: center; }


/* La note ne s'affiche pas dans la rangée : elle y est redite plus bas, et
   c'est elle qui donnait aux pastilles une seconde ligne invisible. */
.sb-l-plateformes--rangee .sb-c-plateforme__note { display: none !important; }

/* La rangée est un élément de la GRILLE du haut de page : sans `align-self`,
   elle s'étire sur toute la hauteur de sa rangée de grille, et ses pastilles
   avec elle. Mesuré : 80 px de haut pour 38 px de contenu. */
.sb-s-accueil-une > .sb-l-plateformes--rangee,
.sb-s-episode-tete > .sb-l-plateformes--rangee {
  align-self: start;
  align-items: center;
}

/* 🔴 DEUX RÈGLES PLUS ANCIENNES POSAIENT `min-height: 60px` — un reste de la
   boîte de dialogue, où chaque plateforme était une ligne cliquable au
   doigt. La rangée en héritait, et toutes les mesures de remplissage que je
   réglais au-dessus ne pouvaient rien : la hauteur était imposée en dur,
   plus bas dans la feuille, par une règle écrite pour autre chose.
   Une hauteur minimale reste utile au doigt — 44 px suffisent, c'est la
   cible tactile recommandée, et le contenu décide du reste. */
.sb-l-plateformes--rangee .sb-c-plateforme {
  min-height: 0;
  box-sizing: border-box;
}

@media (pointer: coarse) {
  .sb-l-plateformes--rangee .sb-c-plateforme { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE EST RANGÉ
   ───────────────────────────────────────────────────────────────────────────
   Il alignait sept liens dans une seule colonne, sans titre : « Épisodes »
   et « Cookies » y avaient le même poids. Trois groupes maintenant — la
   marque, le podcast, le légal — et les plateformes rappelées en bas, parce
   qu'un pied de page est le dernier endroit où l'on peut encore convertir.
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-c-pied-titre {
  margin-block: 0 calc(var(--wp--custom--rythme) * 1.5);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--surtitre);
  font-weight: 700;
  letter-spacing: var(--wp--custom--interlettre-surtitre);
  text-transform: uppercase;
  color: var(--wp--preset--color--encre);
}

.sb-l-pied-plateformes {
  margin-block-start: calc(var(--wp--custom--rythme) * 5);
  padding-block-start: calc(var(--wp--custom--rythme) * 4);
  border-top: 1px solid var(--wp--preset--color--filet);
}

.sb-l-pied-plateformes .sb-l-plateformes {
  margin-block-start: calc(var(--wp--custom--rythme) * 2);
}

.sb-c-pied-legal {
  margin-block-start: calc(var(--wp--custom--rythme) * 4);
  color: var(--wp--preset--color--encre-douce);
}

@media (min-width: 48rem) {
  .sb-l-pied-rang {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--wp--custom--gouttiere) * 2);
    align-items: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES CARTES DE PLATEFORME NE SONT PLUS CREUSES
   ───────────────────────────────────────────────────────────────────────────
   Elles portaient un logo de 22 px, deux lignes de texte, puis un tiers de
   vide : toutes étirées à la hauteur de la plus haute, contenu tassé en haut.
   Une carte à moitié vide se lit comme une carte inachevée.

   Trois gestes : le logo passe dans une pastille teintée qui lui donne du
   poids, le contenu se répartit du haut au bas plutôt que de s'empiler, et
   une flèche en bas à droite dit ce que la carte fait — on sort du site.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 60.01rem) {
  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    position: relative;
    justify-content: space-between;
    gap: calc(var(--wp--custom--rythme) * 2);
    padding: calc(var(--wp--custom--rythme) * 2.5);
    min-height: 0;
  }
}

/* La pastille du logo. Le fond reprend la couleur de la marque en très
   dilué : elle ancre le logo sans entrer en concurrence avec lui. */
.sb-s-accueil-abonner .sb-c-plateforme__icone,
.sb-s-episode-abonner .sb-c-plateforme__icone {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wp--preset--color--papier) 72%, white);
}

.sb-s-accueil-abonner .sb-c-plateforme__icone svg,
.sb-s-episode-abonner .sb-c-plateforme__icone svg { width: 26px; height: 26px; }

.sb-s-accueil-abonner .sb-c-plateforme__nom,
.sb-s-episode-abonner .sb-c-plateforme__nom {
  display: block;
  margin-block-end: calc(var(--wp--custom--rythme) * 0.5);
}

/* La flèche de sortie. `aria-hidden` par construction — c'est un pseudo —
   et le lien dit déjà où il mène. */
.sb-s-accueil-abonner .sb-c-plateforme::after,
.sb-s-episode-abonner .sb-c-plateforme::after {
  content: "\2197";
  position: absolute;
  inset-block-end: calc(var(--wp--custom--rythme) * 2);
  inset-inline-end: calc(var(--wp--custom--rythme) * 2);
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--filet);
}

.sb-s-accueil-abonner .sb-c-plateforme:hover::after,
.sb-s-episode-abonner .sb-c-plateforme:hover::after {
  color: var(--wp--preset--color--encre);
}

/* Le chapeau de la section suivait encore un centrage hérité : il commençait
   300 px à droite de son propre titre. */
.sb-s-accueil-abonner > .sb-c-chapo,
.sb-s-episode-abonner > .sb-c-chapo {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* Les cartes étaient trop hautes pour ce qu'elles portent : l'écart entre le
   logo et le texte se lisait comme un trou. On le borne. */
@media (min-width: 60.01rem) {
  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    gap: calc(var(--wp--custom--rythme) * 1.5);
    padding: calc(var(--wp--custom--rythme) * 2.25);
  }
  .sb-s-accueil-abonner .sb-c-plateforme__icone,
  .sb-s-episode-abonner .sb-c-plateforme__icone { width: 42px; height: 42px; }
  .sb-s-accueil-abonner .sb-c-plateforme__icone svg,
  .sb-s-episode-abonner .sb-c-plateforme__icone svg { width: 24px; height: 24px; }
}

/* ── LA BARRE DE LECTURE NE BARRE PLUS L'ÉCRAN ────────────────────────────
   Elle s'étirait sur toute la largeur utile — plus de mille pixels pour un
   titre, un temps et trois boutons. Une barre pleine largeur se lit comme un
   bandeau système : elle coupe la page en deux et on ne sait plus si elle
   appartient au site ou au navigateur.

   Bornée et posée à droite, elle redevient ce qu'elle est : un objet qui
   flotte au-dessus du contenu, qu'on peut ignorer. À gauche sur mobile elle
   resterait pleine largeur — il n'y a pas la place de faire autrement. */
@media (min-width: 60.01rem) {
  .sb-s-accueil-lecteur.est-compact,
  .sb-s-episode-lecteur.est-compact {
    inset-inline: auto 24px;
    width: min(42rem, calc(100vw - 48px));
    inset-block-end: 24px;
  }
}

/* ── L'EN-TÊTE PASSAIT SOUS LA BARRE D'ADMINISTRATION ─────────────────────
   `inset-block-start: 0` colle au haut de la FENÊTRE, pas au haut de la zone
   que WordPress laisse libre. Connecté, l'administrateur voyait donc son
   menu disparaître derrière la barre noire — et c'est le seul visiteur qui
   travaille sur le site, donc le seul à qui ça arrive tout le temps.

   WordPress pose `admin-bar` sur le `<body>` et la hauteur de sa barre change
   à 782 px. Les deux valeurs sont les siennes, pas les nôtres. */
body.admin-bar header.wp-block-template-part { inset-block-start: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar header.wp-block-template-part { inset-block-start: 46px; }
}

/* La transition accompagne le changement de hauteur au lieu de le subir.
   Elle ne cause pas le clignotement — c'est la boucle de seuil qui le
   causait — mais elle rend la réduction lisible. */
header.wp-block-template-part,
.sb-l-entete { transition: padding-block 160ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part, .sb-l-entete { transition: none; }
}




/* ── LA DESCRIPTION DE L'ÉPISODE EN COURS ─────────────────────────────────
   Elle est posée dans chaque fiche et cachée par défaut. Seule la fiche
   marquée par le lecteur la montre, et elle est OUVERTE : on ne demande pas
   à quelqu'un de cliquer pour lire ce qu'il écoute déjà.

   Un dépliant sur chaque fiche — la première version — mettait six fois la
   même invitation dans une liste, et aucune ne disait ce qui joue. */
.sb-c-description { display: none; }

/* ── LA FICHE EN COURS RESTE DANS LA LISTE, ET SE SIGNALE ─────────────────
   Elle en disparaissait. C'était une erreur, et c'est l'usage qui le dit :
   aucun lecteur de podcast ne retire l'épisode qu'on écoute de sa liste.

   Trois raisons, et la première suffit :
     · la liste SAUTE au moment où on lance un épisode, et on perd l'endroit
       où on était en train de lire ;
     · on ne voit plus où l'on se trouve dans la série ;
     · à la fin de l'épisode, le suivant n'est pas là où on l'avait laissé.

   Ce qui faisait doublon n'était pas la fiche — c'était sa DESCRIPTION,
   affichée en entier aux deux endroits. Elle ne vit plus que dans la carte
   noire. La fiche, elle, reste et se marque. */
/* ⚠️ REVIREMENT DU 21.10.2026, et il annule le commentaire ci-dessus.
   La fiche en cours NE RESTE PLUS dans la liste : elle en sort, et son
   contenu vit dans la carte du lecteur, au-dessus.

   Pourquoi revenir là-dessus. La marquer sur place laissait le même épisode
   à deux endroits de l'écran, avec deux habillages concurrents — le filet
   accent de la fiche et le filet accent de la carte — pour une seule
   chose écoutée. Lequel des deux est « l'épisode en cours » ne se lisait
   plus.

   ELLE NE DISPARAÎT PAS, ELLE PART. L'écart entre les deux est tout le
   sujet : un élément qui s'efface d'un coup donne l'impression d'avoir été
   supprimé, et le suivant saute sous le curseur. Ici la fiche se replie en
   glissant VERS LE HAUT — vers la carte, qui est au-dessus — et celle qu'on
   quitte refait le chemin inverse. Le même jeu de propriétés sert dans les
   deux sens : il n'y a qu'une transition, et retirer la classe la joue à
   l'envers.

   `max-block-size` et non `height`: une hauteur ne s'anime pas vers `auto`.
   60 rem est un plafond large — la plus haute fiche mesure 13 rem — et il
   n'est jamais atteint, donc il ne coupe rien. Il rend la vitesse du repli
   légèrement non linéaire ; la courbe le compense, et l'œil ne le voit pas.

   `allow-discrete` fait basculer `visibility` à la FIN du repli et au DÉBUT
   du dépliage. Sans lui — navigateur plus ancien — la fiche disparaît du
   lecteur d'écran immédiatement et l'animation de taille reste : c'est une
   dégradation, pas une panne. */
.sb-l-episodes {
  max-block-size: 60rem;
  overflow: clip;
  transition:
    max-block-size 420ms cubic-bezier(0.33, 0, 0.2, 1),
    margin-block 420ms cubic-bezier(0.33, 0, 0.2, 1),
    padding-block 420ms cubic-bezier(0.33, 0, 0.2, 1),
    border-width 420ms cubic-bezier(0.33, 0, 0.2, 1),
    opacity 240ms ease,
    translate 420ms cubic-bezier(0.33, 0, 0.2, 1),
    scale 420ms cubic-bezier(0.33, 0, 0.2, 1),
    visibility 420ms;
  transition-behavior: allow-discrete;
}

.sb-l-episodes.est-joue {
  max-block-size: 0;
  margin-block: 0;
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  translate: 0 -16px;
  scale: 0.97;
  visibility: hidden;
  pointer-events: none;
}

/* Le tri ne s'anime pas pour qui a demandé qu'on arrête de bouger. La fiche
   sort quand même — c'est le comportement, pas l'ornement. */
@media (prefers-reduced-motion: reduce) {
  .sb-l-episodes { transition: none; }
}

.sb-c-description p {
  margin-block: calc(var(--wp--custom--rythme) * 1.25);
  font-size: var(--wp--preset--font-size--legende);
  line-height: var(--wp--custom--interligne);
  color: var(--wp--preset--color--encre-douce);
}

.sb-c-description p:first-child { margin-block-start: 0; }

/* ── LA DESCRIPTION, DANS LA CARTE DU LECTEUR ─────────────────────────────
   C'est le seul endroit où elle a sa place : là où est l'épisode qu'on
   écoute. Sur fond encre, les couleurs de la marque sont à pleine
   intensité — et le texte y est à 11,0 de contraste, mesuré. */
.sb-c-lecteur-description {
  flex-basis: 100%;
  margin-block-start: calc(var(--wp--custom--rythme) * 2.5);
  padding-block-start: calc(var(--wp--custom--rythme) * 2.5);
  border-top: 1px solid var(--rena-l-rail);
}

.sb-c-lecteur-description p {
  margin-block: calc(var(--wp--custom--rythme) * 1.5);
  /* PLEINE LARGEUR. Une colonne de 54 rem laissait un quart de la carte
     vide à droite, sans rien pour l'occuper : ici le texte est seul, et la
     carte lui appartient. */
  max-width: none;
  font-size: var(--wp--preset--font-size--legende);
  line-height: var(--wp--custom--interligne);
  /* Justifié des deux bords, comme le reste des textes longs du site. La
     césure est indispensable avec : sans elle, le justifié creuse des
     rivières blanches entre les mots. */
  text-align: justify;
  hyphens: auto;
  color: var(--rena-l-douce);
}

.sb-c-lecteur-description p:first-child { margin-block-start: 0; }
.sb-c-lecteur-description p:last-child { margin-block-end: 0; }

/* La carte compacte n'a pas la place : la description s'y efface. */
.est-compact .sb-c-lecteur-description { display: none; }

/* ── LE CHAPEAU DE LA PAGE D'ÉCOUTE ───────────────────────────────────────
   Il partait dans la colonne de lecture pendant que son titre restait à
   gauche : deux alignements pour deux lignes qui se suivent. */
@media (min-width: 60.01rem) {
  /* PAS DE CENTRAGE ICI. La liste et le lecteur occupent toute la largeur
     utile ; une tête centrée dans un bloc plus étroit commençait 272 px à
     leur droite, et la page partait de deux endroits à la fois. */
  .sb-s-episodes-tete {
    padding-block: calc(var(--wp--custom--rythme) * 6) calc(var(--wp--custom--rythme) * 2);
  }
  .sb-s-episodes-tete > * { margin-inline: 0 auto; max-width: 42rem; }
}

/* ── LA CARTE DU LECTEUR PASSE EN DEUX RANGS QUAND ELLE PORTE UN TEXTE ────
   Sans retour à la ligne, la description se rangeait À CÔTÉ des commandes :
   la pochette, le titre et le bouton se tassaient sur un tiers de la carte,
   centrés verticalement sur une hauteur de six paragraphes.

   Un seul rang quand il n'y a rien à lire, deux dès qu'il y a une
   description — et c'est la description elle-même qui le décide, par sa
   largeur pleine. */
.sb-s-accueil-lecteur,
.sb-s-episode-lecteur {
  flex-wrap: wrap;
  align-items: center;
}

/* ⚠️ `hidden` NE GAGNE PAS CONTRE `display: flex`. L'attribut du navigateur
   vaut `display: none` dans sa feuille par défaut, et toute déclaration
   d'auteur l'emporte dessus — y compris celle juste au-dessus.

   Depuis le 23.10.2026 le script pose une carte VIDE ET MASQUÉE sur les six
   pages qui n'en offrent pas, pour que le lecteur existe partout. Sans cette
   règle, cette carte s'afficherait vide en bas de chaque page juridique. */
.sb-s-accueil-lecteur[hidden],
.sb-s-episode-lecteur[hidden] { display: none; }

.sb-c-lecteur-description {
  width: 100%;
  flex: 0 0 100%;
}

/* Les commandes retrouvent leur rang : elles s'alignent en haut de la carte
   plutôt qu'au milieu d'un bloc de texte. */
.sb-s-accueil-lecteur:has(.sb-c-lecteur-description:not([hidden])) > :not(.sb-c-lecteur-description),
.sb-s-episode-lecteur:has(.sb-c-lecteur-description:not([hidden])) > :not(.sb-c-lecteur-description) {
  align-self: center;
}


/* ── LA DESCRIPTION SE REPLIE DANS LA CARTE ───────────────────────────────
   Déployée d'office, elle faisait du lecteur un pavé de six paragraphes
   avant qu'on ait lancé quoi que ce soit. Elle se déplie à la demande, et
   se referme quand on change d'épisode : la laisser ouverte déplacerait la
   page sous l'œil. */
.sb-c-lecteur-description__bouton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 0.75);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 600;
  color: var(--rena-l-accent);
  cursor: pointer;
  list-style: none;
}

.sb-c-lecteur-description__bouton::-webkit-details-marker { display: none; }

.sb-c-lecteur-description__bouton::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 140ms ease-out;
}

.sb-c-lecteur-description[open] .sb-c-lecteur-description__bouton::before {
  transform: rotate(90deg);
}

.sb-c-lecteur-description .est-deplie,
.sb-c-lecteur-description[open] .est-replie { display: none; }
.sb-c-lecteur-description[open] .est-deplie { display: inline; }

.sb-c-lecteur-description__corps {
  margin-block-start: calc(var(--wp--custom--rythme) * 2);
}

/* Les adresses de la description sont devenues des liens : sur fond encre,
   le accent est à 7,6 de contraste — mesuré — là où il échoue sur clair. */
/* `:not()` est indispensable ici : sans lui, la règle colorait AUSSI le
   bouton vers la fiche, qui est un `<a>` — texte accent sur fond
   accent, donc un rectangle vide. Mesuré à l'écran. */
.sb-c-lecteur-description a:not(.sb-c-lecteur-fiche) {
  color: var(--rena-l-accent);
  text-underline-offset: 3px;
}

/* Le bouton vers la fiche de l'épisode. Il n'apparaît que si la fiche
   existe : tous les épisodes n'en ont pas encore une. */
.sb-c-lecteur-fiche {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme));
  margin-block-start: calc(var(--wp--custom--rythme) * 2.5);
  padding: calc(var(--wp--custom--rythme) * 1.25) calc(var(--wp--custom--rythme) * 2.25);
  border-radius: 10px;
  background: var(--rena-plein);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 700;
  color: var(--rena-plein-texte);
  text-decoration: none;
}

.sb-c-lecteur-fiche::after { content: "\2192"; }

.sb-c-lecteur-fiche:hover,
.sb-c-lecteur-fiche:focus-visible { background: var(--rena-plein-survol); }

@media (prefers-reduced-motion: reduce) {
  .sb-c-lecteur-description__bouton::before { transition: none; }
}

/* ── LA DESCRIPTION DANS LA GRILLE DU TÉLÉPHONE ───────────────────────────
   Sous 60 rem, la carte du lecteur n'est PAS en flex : c'est une grille à
   trois colonnes, posée bien avant que la description existe. Mes règles
   `flex: 0 0 100%` n'y pouvaient rien — mesuré : 127 px de large au lieu de
   toute la carte, et le texte comprimé dans une colonne.

   Elle prend donc un rang à elle, sur toute la largeur. */
@media (max-width: 60rem) {
  .sb-s-accueil-lecteur .sb-c-lecteur-description,
  .sb-s-episode-lecteur .sb-c-lecteur-description {
    grid-column: 1 / -1;
    grid-row: auto;
    width: auto;
  }

  /* Le texte justifié devient illisible sur 320 px : trois mots par ligne
     et des blancs qui mangent la moitié de la largeur. */
  .sb-c-lecteur-description p { text-align: start; }

  /* Et le titre passait sous le bouton de lecture : la colonne du texte
     doit pouvoir se réduire, donc `minmax(0, 1fr)` et pas `1fr`. */
  .sb-l-lecteur-corps { min-width: 0; }
  .sb-c-piste { overflow-wrap: anywhere; }
}

/* ── LES CARTES DE PLATEFORME SUR TÉLÉPHONE ───────────────────────────────
   Elles gardaient le remplissage du bureau et la hauteur minimale héritée
   de l'ancienne boîte de dialogue : cinq blocs de 130 px pour un logo et
   deux lignes, soit un écran entier pour cinq liens.

   Une ligne par plateforme, serrée, le logo à gauche et le texte contre lui. */
@media (max-width: 60rem) {
  .sb-s-accueil-abonner .sb-l-plateformes,
  .sb-s-episode-abonner .sb-l-plateformes {
    grid-template-columns: 1fr;
    gap: calc(var(--wp--custom--rythme) * 1.25);
  }

  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--wp--custom--rythme) * 1.75);
    padding: calc(var(--wp--custom--rythme) * 1.5);
    min-height: 0;
    height: auto;
  }

  .sb-s-accueil-abonner .sb-c-plateforme__icone,
  .sb-s-episode-abonner .sb-c-plateforme__icone { width: 40px; height: 40px; }

  .sb-s-accueil-abonner .sb-c-plateforme__nom,
  .sb-s-episode-abonner .sb-c-plateforme__nom { margin-block-end: 2px; }

  /* La flèche de sortie n'a pas sa place sur une ligne serrée : elle
     chevauchait le texte dans le coin. */
  .sb-s-accueil-abonner .sb-c-plateforme::after,
  .sb-s-episode-abonner .sb-c-plateforme::after { content: none; }
}

@media (max-width: 60rem) {
  /* Les deux lignes d'une carte étaient espacées comme deux paragraphes :
     101 px pour un nom et quatre mots. */
  .sb-s-accueil-abonner .sb-c-plateforme__texte,
  .sb-s-episode-abonner .sb-c-plateforme__texte { gap: 0; }

  .sb-s-accueil-abonner .sb-c-plateforme__nom,
  .sb-s-episode-abonner .sb-c-plateforme__nom {
    margin-block-end: 0;
    line-height: 1.3;
  }

  .sb-s-accueil-abonner .sb-c-plateforme__note,
  .sb-s-episode-abonner .sb-c-plateforme__note { line-height: 1.35; }

  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    padding: calc(var(--wp--custom--rythme) * 1.25) calc(var(--wp--custom--rythme) * 1.5);
  }

  /* ── LA BARRE COMPACTE DIT CE QU'ELLE JOUE ─────────────────────────────
     Elle montrait une pochette, une barre de progression et trois boutons —
     et pas le titre. Sur un téléphone, c'est la seule chose qu'on veut
     lire : on sait déjà qu'on écoute quelque chose, on veut savoir QUOI.
     La progression cède la place ; elle reste dans la grande carte. */
  .est-compact .sb-l-lecteur-piste { display: none; }

  .est-compact .sb-c-piste {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: var(--wp--preset--font-size--legende);
    line-height: 1.3;
    /* Deux lignes au plus, puis les points de suspension : un titre long ne
       doit pas pousser la barre sur trois rangs. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .est-compact .sb-l-lecteur-corps {
    display: contents;
  }
}

/* 🔴 LES CARTES SE CHEVAUCHAIENT DE 12 PX, elles ne se touchaient pas.
   Mesuré : écart réel −12 px entre deux cartes voisines, pour un `gap`
   déclaré à 10. La cause : `height: 100%` sur une boîte en `content-box`.
   La hauteur demandée est celle du RANG, le remplissage s'ajoute par-dessus,
   et chaque carte déborde sur la suivante. `border-box` règle les deux. */
.sb-c-plateforme { box-sizing: border-box; }

/* ── LES SOUS-TITRES DISPARAISSENT ────────────────────────────────────────
   « Le plus simple, partout », « iPhone, iPad, Mac » : personne ne choisit
   sa plateforme d'écoute en lisant une ligne d'explication. Le logo et le
   nom suffisent, et la carte reprend une hauteur de bouton. */
.sb-c-plateforme__note { display: none; }

@media (max-width: 60rem) {
  .sb-s-accueil-abonner .sb-l-plateformes,
  .sb-s-episode-abonner .sb-l-plateformes {
    gap: calc(var(--wp--custom--rythme) * 1.5);
  }
  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme { height: auto; }
}

/* Sans sous-titre, une carte de 122 px pour un logo et un mot est un vide
   qu'on remarque. Elle reprend la hauteur de ce qu'elle porte. */
@media (min-width: 60.01rem) {
  .sb-s-accueil-abonner .sb-c-plateforme,
  .sb-s-episode-abonner .sb-c-plateforme {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--wp--custom--rythme) * 1.5);
    padding: calc(var(--wp--custom--rythme) * 1.75);
  }

  /* La flèche de sortie retrouve sa place à droite, sur la même ligne. */
  .sb-s-accueil-abonner .sb-c-plateforme::after,
  .sb-s-episode-abonner .sb-c-plateforme::after {
    position: static;
    margin-inline-start: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE DU BAS EST UN SECOND OBJET
   ───────────────────────────────────────────────────────────────────────────
   Elle ne remplace plus la grande carte : celle-ci reste dans le flux et
   défile comme le reste. Deux corrections fausses ont précédé celle-ci —
   la carte passée en `fixed` clignotait, et réserver sa hauteur laissait un
   trou de 239 px au milieu de la page. Les deux venaient de vouloir qu'un
   seul élément soit à deux endroits.
   ═══════════════════════════════════════════════════════════════════════════ */

.sb-c-barre-fixe {
  position: fixed;
  inset-inline: auto 24px;
  inset-block-end: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.5);
  width: min(34rem, calc(100vw - 48px));
  padding: calc(var(--wp--custom--rythme) * 1.25) calc(var(--wp--custom--rythme) * 2);
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--lecteur-texte);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.26);
}

.sb-c-barre-fixe[hidden] { display: none; }

.sb-c-barre-fixe__pochette {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.sb-c-barre-fixe__titre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  line-height: 1.3;
  /* Deux lignes au plus : un titre long ne doit pas étirer la barre. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sb-c-barre-fixe__saut,
.sb-c-barre-fixe__jouer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--wp--preset--color--lecteur-texte);
  cursor: pointer;
}

.sb-c-barre-fixe__saut { width: 36px; height: 36px; color: var(--wp--preset--color--lecteur-douce); }
.sb-c-barre-fixe__saut:disabled { opacity: 0.35; cursor: default; }

.sb-c-barre-fixe__jouer {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rena-plein);
  color: var(--rena-plein-texte);
}

/* La barre recouvre la fin de la page : on lui laisse la place. */
body.a-lecteur-compact { padding-block-end: 96px; }

@media (max-width: 60rem) {
  .sb-c-barre-fixe {
    inset-inline: 12px;
    inset-block-end: 12px;
    width: auto;
    gap: calc(var(--wp--custom--rythme) * 1.25);
    padding: calc(var(--wp--custom--rythme)) calc(var(--wp--custom--rythme) * 1.5);
  }
}

/* ── « À PROPOS » SUR TÉLÉPHONE ───────────────────────────────────────────
   Le portrait prenait toute la largeur — un rond de 390 px qui occupait un
   écran à lui seul avant qu'on ait lu une ligne — et les blocs du haut
   étaient espacés comme des sections alors qu'ils forment un seul bloc. */
@media (max-width: 60rem) {
  .sb-s-apropos-tete > .sb-c-portrait {
    width: 8.5rem;
    margin-block-end: calc(var(--wp--custom--rythme) * 2.5);
    order: -1;
  }

  .sb-s-apropos-tete { padding-block: calc(var(--wp--custom--rythme) * 4) calc(var(--wp--custom--rythme) * 2); }
  .sb-s-apropos-tete > .sb-c-surtitre { margin-block: 0 calc(var(--wp--custom--rythme) * 1.25); }
  .sb-s-apropos-tete > .sb-c-titre { margin-block: 0; }
  .sb-s-apropos-tete > .sb-c-chapo { margin-block: calc(var(--wp--custom--rythme) * 1.5) 0; }
  .sb-s-apropos-tete > .sb-c-meta { margin-block: calc(var(--wp--custom--rythme) * 1.75) 0; }

  .sb-s-apropos-exergue {
    margin-block: calc(var(--wp--custom--rythme) * 3);
    padding: calc(var(--wp--custom--rythme) * 3);
  }

  .sb-s-apropos-texte, .sb-s-apropos-pour-qui {
    padding-block: calc(var(--wp--custom--rythme) * 2.5);
  }

  .sb-s-apropos-texte > .sb-c-titre,
  .sb-s-apropos-pour-qui > .sb-c-titre {
    margin-block: 0 calc(var(--wp--custom--rythme) * 1.5);
  }
}

/* ── « PARLER DE VOTRE PROJET » DANS LE PIED ──────────────────────────────
   Les gens viennent pour le podcast. Certains repartent avec une question
   sur leur propre projet, et ce lien est le seul endroit du site où ils
   peuvent la poser. Il est posé dans le pied sans crier : une ligne sous la
   signature, pas une bannière.

   Il part vers __MARQUE_MERE__, qui est le service — le podcast, lui, ne vend
   rien, et c'est écrit noir sur blanc sur la page À propos. */
.sb-c-pied-projet {
  margin-block-start: calc(var(--wp--custom--rythme) * 2);
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

.sb-c-pied-projet a {
  color: var(--wp--preset--color--encre);
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sb-c-pied-projet a:hover,
.sb-c-pied-projet a:focus-visible { color: var(--wp--preset--color--accent-texte); }

/* Sur téléphone, l'espacement de bloc de WordPress — 32 px — séparait le
   surtitre, le titre, le chapeau et les repères comme s'ils étaient quatre
   sections. Ils forment un seul bloc. */
@media (max-width: 60rem) {
  .sb-s-apropos-tete,
  .sb-s-episode-tete,
  .sb-s-episodes-tete { row-gap: calc(var(--wp--custom--rythme) * 0.5); }
}

/* ── « UN PODCAST DE RÉALISONS », DANS LE PIED ────────────────────────────
   La filiation était écrite en toutes lettres dans la ligne de copyright,
   au même poids que l'année : personne ne la lisait. Elle devient une
   signature — le mot, puis la marque — discrète mais reconnaissable, et
   cliquable vers le service.

   Le logo est posé dans le thème, à côté des polices, et pas appelé chez
   __MARQUE_MERE__ : un site ne va rien chercher chez un autre. */
.sb-l-pied-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme) * 3);
  margin-block-start: calc(var(--wp--custom--rythme) * 4);
  padding-block-start: calc(var(--wp--custom--rythme) * 3);
  border-top: 1px solid var(--wp--preset--color--filet);
}

.sb-c-pied-__MARQUE_MERE_SLUG__ {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1.25);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 140ms ease-out;
}

.sb-c-pied-__MARQUE_MERE_SLUG__:hover,
.sb-c-pied-__MARQUE_MERE_SLUG__:focus-visible { opacity: 1; }

/* ⚠️ `align-items: center` CENTRE LES BOÎTES, PAS L'ENCRE, et le premier
   site né de ce modèle l'a montré : les deux boîtes avaient le même centre
   à 0,01 px près, et le mot paraissait monté quand même. La boîte du mot
   est une boîte de LIGNE — 21 px de haut pour des capitales qui n'en
   occupent que 9,5, le reste étant le talon de jambages qu'aucune de ces
   lettres n'a. Celle du logo est une image dont l'encre remplit le cadre,
   mais dont la MASSE se concentre là où le logotype a ses pleins.

   ⚠️ LA VALEUR CI-DESSOUS DÉPEND DU LOGO, et elle se REMESURE pour chaque
   marque : elle vaut l'écart entre les deux centres de MASSE, relevé
   colonne par colonne sur une capture du seul verrou, FOND PLAT ET OPACITÉ
   FORCÉE À 1 — sans quoi le dégradé du pied se compte comme de l'encre et
   la valeur dérive d'un demi-pixel. Le logo sert de témoin : sa mesure doit
   être IDENTIQUE avant et après, puisque rien ne le touche ; c'est ce
   témoin qui dit si l'instrument dérive. Relevé d'origine : 1,51 px pour un
   mot de 13 px, d'où les 0,116 em. Un logo dont la masse tombe ailleurs
   donnera autre chose, et 0 em est une réponse possible. */
.sb-c-pied-__MARQUE_MERE_SLUG____mot {
  font-size: var(--wp--preset--font-size--surtitre);
  letter-spacing: var(--wp--custom--interlettre-surtitre);
  text-transform: uppercase;
  color: var(--wp--preset--color--encre-douce);
  transform: translateY(0.116em);
}

.sb-c-pied-__MARQUE_MERE_SLUG__ img { display: block; width: 116px; height: auto; }

.sb-l-pied-signature .sb-c-pied-legal {
  margin: 0;
  margin-inline-start: auto;
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}

@media (prefers-reduced-motion: reduce) {
  .sb-c-pied-__MARQUE_MERE_SLUG__ { transition: none; }
}

/* ── LE MOT DE MARQUE GRANDIT ─────────────────────────────────────────────
   22 px sur grand écran et 14 sur téléphone : le nom de la marque pesait
   moins que les trois onglets à côté de lui. Il passe à 26 et 17, et le
   symbole suit — leurs tailles sont liées, sinon le point accent-2 devient une
   poussière à côté du mot.

   L'état réduit garde l'écart : un en-tête qui rétrécit doit rester
   reconnaissable, pas redevenir celui d'avant. */
.sb-c-marque::before { width: 34px; height: 34px; }

.sb-c-marque .wp-block-site-title a {
  font-size: calc(var(--wp--preset--font-size--titre-fiche) + 8px);
}

.sb-l-entete.a-defile .sb-c-marque::before { width: 29px; height: 29px; }

.sb-l-entete.a-defile .sb-c-marque .wp-block-site-title a {
  font-size: calc(var(--wp--preset--font-size--titre-fiche) + 3px);
}

@media (max-width: 30rem) {
  .sb-c-marque::before { width: 28px; height: 28px; }
  .sb-c-marque .wp-block-site-title a {
    font-size: calc(var(--wp--preset--font-size--titre-fiche) + 1px);
  }

  /* L'ÉTAT RÉDUIT DOIT L'ÊTRE AUSSI ICI. Sans cette ligne, la règle générale
     de `a-defile` — plus large que celle-ci — reprenait la main au
     défilement : mesuré, 17,3 px réduit contre 15,3 px au repos. Un en-tête
     qui GRANDIT quand on descend est une erreur qu'on ne voit qu'en
     mesurant les deux états. */
  .sb-l-entete.a-defile .sb-c-marque::before { width: 24px; height: 24px; }
  .sb-l-entete.a-defile .sb-c-marque .wp-block-site-title a {
    font-size: var(--wp--preset--font-size--titre-fiche);
  }
}




/* Ce qui ne se règle pas par une variable : trois corrections, et elles
   valent pour les deux chemins d'entrée dans le sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sb-c-pochette img,
  :root:not([data-theme="light"]) .sb-c-invite img,
  :root:not([data-theme="light"]) .sb-c-visuel img { filter: brightness(0.92); }
  :root:not([data-theme="light"]) .sb-c-barre-fixe {
    background: var(--wp--preset--color--carte);
    border: 1px solid var(--wp--preset--color--filet);
  }
}

/* Les pochettes et les portraits sortent d'un studio éclairé : sur une page
   sombre ils deviennent les seuls objets lumineux de l'écran et tirent l'œil
   avant le texte. Un voile très léger les ramène dans le plan, et il se lève
   au survol. */
:root[data-theme="dark"] .sb-c-pochette img,
:root[data-theme="dark"] .sb-c-invite img,
:root[data-theme="dark"] .sb-c-visuel img { filter: brightness(0.92); }

.sb-c-pochette img, .sb-c-invite img, .sb-c-visuel img { transition: filter 200ms ease; }
.sb-c-pochette img:hover, .sb-c-invite img:hover, .sb-c-visuel img:hover { filter: none; }

/* La barre fixe était sombre sur un site clair : c'était son contraste. Dans
   le sombre elle disparaîtrait dans le fond, donc elle s'éclaircit d'un cran
   et prend le filet. */
:root[data-theme="dark"] .sb-c-barre-fixe {
  background: var(--wp--preset--color--carte);
  border: 1px solid var(--wp--preset--color--filet);
}

/* ══ L'INTERRUPTEUR CLAIR / SOMBRE ═══════════════════════════════════════
   Un rond de 40 px dans l'en-tête, du diamètre d'une cible tactile moins
   les 4 px que la règle tolère sur une commande secondaire. Il ne porte ni
   texte ni libellé visible : son `aria-label` dit l'ACTION — « Passer en
   mode sombre » — et change avec l'état, ce qu'un `aria-pressed` sur une
   icône seule ne dirait pas aussi clairement.

   IL N'EXISTE QUE SI LE SCRIPT TOURNE. Le gabarit le pose `hidden` ; c'est
   le script qui le révèle. Un bouton de thème sans JavaScript est un bouton
   qui ne fait rien. */
.sb-c-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon-rond);
  background: transparent;
  color: var(--wp--preset--color--encre-douce);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.sb-c-theme[hidden] { display: none; }
.sb-c-theme svg { width: 18px; height: 18px; }

.sb-c-theme:hover,
.sb-c-theme:focus-visible {
  color: var(--wp--preset--color--accent-texte);
  border-color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

/* ── le nom, sous la barre, exactement comme les trois onglets ───────────
   Le libellé n'est plus un `aria-label` : c'est un MOT, posé dans le
   gabarit, qui sert à la fois d'infobulle au survol et de nom accessible du
   bouton. Les trois ronds voisins fonctionnent déjà ainsi — un bouton
   d'en-tête qui se comporte autrement que ses voisins se remarque, et il
   était le seul des quatre à ne rien dire au survol.

   ⚠️ `opacity` SEULE, jamais `visibility: hidden` ni `display: none`. Les
   deux sortiraient le mot de l'arbre d'accessibilité, et le bouton
   n'aurait alors plus aucun nom du tout — pire que l'`aria-label` qu'il
   remplace. La raison est écrite en entier à la navigation.

   L'ANCRE EST LE BOUTON, pas la rangée : `position: relative` ci-dessus.
   Sans elle, le mot irait se coller au bord droit de l'en-tête, loin du
   rond qui l'appelle. */
.sb-c-theme__nom {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  padding: 4px 10px;
  border-radius: var(--wp--custom--rayon-petit);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  font-family: var(--wp--preset--font-family--titre);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.sb-c-theme:hover .sb-c-theme__nom,
.sb-c-theme:focus-visible .sb-c-theme__nom { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sb-c-theme__nom { transition: none; }
}

/* Une seule des deux icônes est rendue : celle de la destination, pas celle
   de l'état. On montre le soleil quand un clic ramènerait au clair. */
.sb-c-theme .sb-c-theme__soleil { display: none; }
:root[data-theme="dark"] .sb-c-theme .sb-c-theme__soleil { display: block; }
:root[data-theme="dark"] .sb-c-theme .sb-c-theme__lune { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sb-c-theme .sb-c-theme__soleil { display: block; }
  :root:not([data-theme="light"]) .sb-c-theme .sb-c-theme__lune { display: none; }
}

/* Sous 22 rem, l'en-tête tient déjà à peine : le rond rétrécit avec le reste. */
@media (max-width: 22rem) {
  .sb-c-theme { width: 34px; height: 34px; }
  .sb-c-theme svg { width: 16px; height: 16px; }
}

/* ══ LES DEUX PAGES JURIDIQUES SONT JUSTIFIÉES ═══════════════════════════
   Demande du 21.10.2026, et elle ne vaut que pour ces deux-là : les mentions
   légales et la politique de données sont les seuls textes du site qu'on lit
   en bloc, d'une traite, sans images pour relancer l'œil. Un drapeau à
   droite y laisse une dentelle qui fait perdre la ligne.

   `hyphens: auto` n'est PAS une option ici. Sans césure, le justifié creuse
   des rivières blanches entre les mots dès que la colonne se rétrécit — et
   elle se rétrécit, sur un téléphone à 320 px. La langue est déclarée par
   `<html lang="fr-FR">`, donc le navigateur coupe selon les règles
   françaises ; sans cette déclaration, la césure n'aurait pas lieu.

   Les listes et les titres restent au drapeau : un titre justifié sur deux
   lignes s'étire jusqu'à la rupture, et une puce justifiée se lit comme une
   phrase coupée. */
.sb-s-legal .sb-c-chapo,
.sb-s-legal p[class*="sb-c-texte"],
.sb-s-donnees-personnelles .sb-c-chapo,
.sb-s-donnees-personnelles p[class*="sb-c-texte"] {
  text-align: justify;
  hyphens: auto;
}

/* ══ L'EN-TÊTE AVEC L'INTERRUPTEUR, SUR TÉLÉPHONE ════════════════════════
   🔴 L'interrupteur de thème a fait déborder l'en-tête de 19 à 25 px entre
   320 et 375 px — mesuré le 21.10.2026, après l'avoir posé. Il ne s'agit
   pas d'un défaut du bouton : l'en-tête tenait déjà au ras, et un quatrième
   palier avait été écrit en août pour récupérer 8 px. Quarante pixels de
   plus ne rentraient nulle part.

   On les reprend là où ils ne coûtent rien à la lecture : le rond passe à
   30 px (au-dessus des 24 px où une cible devient difficile), les écarts
   entre onglets se resserrent, et la gouttière de l'en-tête — et d'elle
   seule — descend à 12 px. Le corps de la page garde sa marge. */
@media (max-width: 26rem) {
  .sb-l-entete > .wp-block-group,
  .sb-l-entete { padding-inline: 12px; }
  .sb-l-entete-rang { gap: 10px; }
  .sb-l-nav .wp-block-navigation__container { gap: 7px !important; }
  .sb-c-theme { width: 30px; height: 30px; }
  .sb-c-theme svg { width: 15px; height: 15px; }
}

/* ══ SOUS 21 rem, LA MARQUE SE RÉDUIT AU MONOGRAMME ══════════════════════
   À 320 px, le logo horizontal prend 175 des 320 px disponibles — plus de
   la moitié de la barre pour un mot déjà écrit dans l'onglet du navigateur
   et dans le titre de la page. Les trois onglets et l'interrupteur se
   partagent le reste, et il manquait 23 px.

   Le monogramme seul les rend d'un coup. Ce n'est pas un repli : c'est la
   forme que la marque prend quand la place manque, et elle existe déjà dans
   le dossier de marque — c'est la même que le favicon.

   `aria-label` n'est pas nécessaire : le `<h1>`/`<p>` du titre de site reste
   dans le document, c'est son IMAGE de fond qui change. Rien ne disparaît
   pour un lecteur d'écran. */
@media (max-width: 21rem) {
  .sb-c-marque::before {
    width: 30px;
    height: 30px;
    background-image: var(--rena-logo);
  }
  .sb-l-entete.a-defile .sb-c-marque::before { width: 26px; height: 26px; }

  /* Le mot part de l'écran, PAS du document. Le monogramme le remplace à
     l'œil ; le titre de site reste lisible par un lecteur d'écran, qui ne
     voit pas l'image de fond. C'est le masquage accessible de la maison,
     et non `display: none`, qui l'aurait emporté pour tout le monde. */
  /* ⚠️ NI `position: absolute`, NI `clip-path`. Le lien de la marque est
     étiré par un `::after` en `position: absolute; inset: 0`, dont le bloc
     conteneur est `.sb-c-marque`.

     · POSITIONNER le titre ferait de LUI ce bloc conteneur, et la zone
       cliquable tomberait à 1 px ;
     · `clip-path` ne change pas le bloc conteneur, mais il DÉCOUPE tout le
       sous-arbre, `::after` compris — même punition, autre cause. Mesuré :
       à 320 px, `elementFromPoint` au centre du symbole rendait le `<div>`
       du groupe et aucun lien.

     Reste le masquage d'avant `clip-path` : 1 px de côté et débordement
     caché. Le texte demeure dans le document et dans l'arbre
     d'accessibilité — c'est tout ce qu'on lui demande. */
  .sb-c-marque .wp-block-site-title {
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
  }
}

/* ══ LE HAUT DE « À PROPOS » : LE TEXTE NE DÉPASSE PLUS LE PORTRAIT ══════
   Demande du 21.10.2026. Le bloc de texte descendait une quarantaine de
   pixels sous le bas du portrait, et le déséquilibre se voyait d'autant
   plus que le portrait est un cercle : son bas est un point, pas une ligne.

   Deux leviers, pris ensemble parce qu'aucun des deux ne suffisait : le
   portrait gagne 40 px de diamètre (il avait de la place dans sa colonne,
   il était simplement plafonné à 340), et les trois respirations du texte
   se resserrent d'un cran. Aucun texte n'est tronqué ni masqué — rien ne
   disparaît, la colonne se referme. */
@media (min-width: 60.01rem) {
  .sb-s-apropos-tete .sb-c-portrait img { max-width: 380px; }
  .sb-s-apropos-tete .sb-c-surtitre { margin-block-end: calc(var(--wp--custom--rythme) * 1.5); }
  .sb-s-apropos-tete .sb-c-titre { margin-block-end: calc(var(--wp--custom--rythme) * 2); }
  .sb-s-apropos-tete .sb-c-chapo { margin-block-end: calc(var(--wp--custom--rythme) * 2.5); }
  .sb-s-apropos-tete .sb-c-meta { margin-block-end: 0; }
}

/* ══ L'EXERGUE REJOINT LA COLONNE DE LECTURE ═════════════════════════════
   Demande du 21.10.2026 : le bloc noir prenait toute la largeur alors que
   tout ce qui le suit — « Qui parle », « Pour qui » — vit dans une grille à
   trois colonnes dont la DEUXIÈME porte le texte. L'exergue démarrait donc
   250 px à gauche du paragraphe qu'il annonce, et la page avait deux
   alignements au lieu d'un.

   ⚠️ LES DEUX VALEURS SUIVENT LA GRILLE, elles ne sont pas décoratives :
   `15rem` est la première colonne et `40rem` la deuxième, telles que
   `.sb-s-apropos-texte` les déclare quelques règles plus haut. Si cette
   grille change, celles-ci changent avec, sans quoi l'exergue décrochera
   en silence. Un `subgrid` l'aurait fait tout seul, mais il demande que le
   fond noir soit porté par un enfant, et le fond est sur la section. */
@media (min-width: 60.01rem) {
  /* LE BLOC REJOINT LA COLONNE DE LECTURE, PAR UNE BORDURE TRANSPARENTE.
     C'est la troisième tentative, et c'est la première qui ne recopie rien.

     Ce qui a été essayé avant : un `margin-inline-start` calculé à la main —
     il a décroché dès que la grille a changé de valeur, exactement comme son
     propre commentaire l'annonçait ; puis une vraie grille avec le fond en
     pseudo-élément — le fond ne couvrait plus qu'une rangée, parce que
     `grid-row: 1 / -1` ne s'étend pas sur les rangées IMPLICITES et que les
     deux enfants en créent.

     Une bordure transparente de la largeur du rail, plus `background-clip:
     padding-box`, donne un retrait que le fond ne peint pas. La section
     garde sa boîte — même largeur, même centrage que ses voisines — et le
     noir commence exactement où commence le paragraphe. Le jour où le rail
     change, il ne change qu'à un endroit.

     LES DEUX BORDS SONT DES BORDURES, et c'est une contrainte de WordPress
     autant qu'un choix. Borner la boîte et la replacer à la marge aurait
     été plus direct — mais la feuille de disposition du cœur impose
     `margin-left: auto !important` à tout enfant d'un conteneur contraint.
     Une marge calculée ne peut pas gagner, et lui répondre par un second
     `!important` est une dette qu'on paie plus tard.

     La boîte garde donc sa largeur de page, le cœur la centre comme il
     l'entend, et deux bordures transparentes ramènent le FOND exactement
     sur la colonne de lecture. Les quatre valeurs sont des jetons : le
     rail, la gouttière doublée, la mesure de lecture, la largeur de page.
     Aucun nombre écrit à la main. */
  .sb-s-apropos-exergue {
    box-sizing: border-box;
    border-inline-start: calc(var(--rena-rail) + var(--wp--custom--gouttiere) * 2) solid transparent;
    border-inline-end: calc(var(--rena-page) - var(--rena-rail) - var(--wp--custom--gouttiere) * 2 - var(--wp--custom--colonne)) solid transparent;
    background-clip: padding-box;
  }
}

/* ══ LE TÉLÉPHONE, RESSERRÉ ══════════════════════════════════════════════
   Demande du 21.10.2026 : « moins d'espacement tout en étant aéré
   modérément ». Mesuré sur la capture — entre le chapô de la une et la
   première plateforme, il y avait près de 200 px de vide, et le titre
   flottait à 180 px de son propre chapô. Sur un écran de 390 px de large,
   chaque vide de cette taille coûte un demi-écran de défilement pour rien.

   LE PRINCIPE, et il n'est pas « tout réduire » : on ne touche qu'aux
   écarts ENTRE blocs, jamais à l'interligne ni au rythme interne d'un
   paragraphe. Un texte tassé se lit mal ; une page tassée se lit vite. Les
   écarts passent d'environ 3 à 6 unités de rythme à 1,5 à 3 — ils restent
   donc des écarts, et la hiérarchie tient : le vide avant un titre reste
   plus grand que celui qui le suit.

   `48rem` et non `60rem` : au-delà, la une est en deux colonnes et ces
   vides portent la mise en page. C'est en UNE colonne qu'ils s'additionnent
   les uns derrière les autres. */
@media (max-width: 48rem) {
  .sb-s-accueil-une,
  .sb-s-apropos-tete,
  .sb-s-episode-tete {
    padding-block: calc(var(--wp--custom--rythme) * 2) calc(var(--wp--custom--rythme) * 2.5);
    row-gap: calc(var(--wp--custom--rythme) * 2);
  }

  .sb-s-accueil-une .sb-c-surtitre,
  .sb-s-apropos-tete .sb-c-surtitre { margin-block: calc(var(--wp--custom--rythme) * 1.5) calc(var(--wp--custom--rythme)); }

  .sb-s-accueil-une .sb-c-titre,
  .sb-s-apropos-tete .sb-c-titre { margin-block: 0 calc(var(--wp--custom--rythme) * 1.5); }

  .sb-c-chapo { margin-block-end: calc(var(--wp--custom--rythme) * 2); }

  /* La grille des plateformes : une colonne pleine en dessous de 15 rem de
     piste, donc deux par rang dès qu'il y a la place. L'écart au-dessus
     passe de 24 à 12 px. */
  .sb-l-plateformes { margin-block-start: calc(var(--wp--custom--rythme) * 1.5); }
  .sb-l-plateformes--rangee { gap: calc(var(--wp--custom--rythme)); }

  /* Le visuel de la une : il arrive au-dessus du texte en une colonne, et
     il n'a pas besoin de deux respirations pleines pour s'en détacher. */
  .sb-c-visuel, .sb-c-pochette-episode, .sb-c-portrait {
    margin-block-end: calc(var(--wp--custom--rythme) * 1.5);
  }

  /* La carte du lecteur, et les sections qui suivent. */
  .sb-s-accueil-lecteur, .sb-s-episode-lecteur {
    margin-block: calc(var(--wp--custom--rythme) * 2);
  }

  .sb-s-apropos-texte, .sb-s-apropos-pour-qui,
  .sb-s-episode-notes, .sb-s-accueil-episodes,
  .sb-s-accueil-abonner, .sb-s-episode-abonner, .sb-s-apropos-appel {
    padding-block: calc(var(--wp--custom--rythme) * 2);
  }

  .sb-s-apropos-exergue { margin-block: calc(var(--wp--custom--rythme) * 2.5); }

  /* Entre deux fiches d'épisode, 12 px suffisent : chaque fiche porte déjà
     son propre fond, c'est lui qui les sépare. */
  .sb-l-episodes { margin-block-end: calc(var(--wp--custom--rythme) * 1.5); }
}

/* ⚠️ CE SEUIL MESURE L'ÉCRAN, PAS LA COLONNE — et c'est la colonne qui
   décide. Les trois fiches « Pour qui » font 190 px de large sur un écran
   de 1440 : la règle ci-dessus ne les voit pas, et leur texte justifié
   écarte les mots jusqu'à la rivière blanche. Mesuré le 23.10.2026.

   Elles reviennent donc au fer à gauche quelle que soit la largeur de
   l'écran. Le vrai correctif est une requête de conteneur sur la mesure
   réelle de chaque colonne ; il vaut pour tout le site et il est noté
   dans CE-QUE-LE-PROCESSUS-APPREND.md. */
.sb-l-publics .sb-c-texte,
.sb-l-publics .sb-c-texte p,
.sb-l-publics p {
  text-align: start;
  hyphens: manual;
}

/* ══ LA VITESSE DE LECTURE ═══════════════════════════════════════════════
   Un cran, pas un curseur. Le bouton porte sa valeur en toutes lettres —
   « 1× », « 1,25× » — parce qu'une icône de vitesse ne dit jamais laquelle
   est active, et que c'est la seule chose qu'on veut savoir.

   IL RESTE DISCRET TANT QU'IL EST À 1×. La vitesse neutre est l'état de la
   quasi-totalité des écoutes : la montrer comme un réglage actif ferait
   croire qu'on a touché à quelque chose. Dès qu'elle change, la pastille
   prend l'aplat — on la retrouve du coin de l'œil, et on sait pourquoi la
   voix va vite. */
.sb-c-vitesse,
.sb-c-barre-fixe__vitesse {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 32px;
  padding-inline: 10px;
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: var(--wp--custom--rayon-rond);
  background: transparent;
  color: var(--wp--preset--color--encre-douce);
  font-family: var(--wp--preset--font-family--titre);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.sb-c-vitesse:hover, .sb-c-vitesse:focus-visible,
.sb-c-barre-fixe__vitesse:hover, .sb-c-barre-fixe__vitesse:focus-visible {
  color: var(--wp--preset--color--accent-texte);
  border-color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

.sb-c-vitesse.est-modifiee,
.sb-c-barre-fixe__vitesse.est-modifiee {
  background: var(--rena-plein);
  border-color: var(--rena-plein);
  color: var(--rena-plein-texte);
}

/* Dans la barre du bas, le fond est l'encre : le contour neutre y
   disparaîtrait, et le texte doux n'y aurait pas son contraste. */
.sb-c-barre-fixe__vitesse {
  border-color: color-mix(in srgb, var(--wp--preset--color--lecteur-texte) 35%, transparent);
  color: var(--wp--preset--color--lecteur-texte);
}

/* Sous 60 rem, la barre du bas tient à peine : la vitesse s'efface, elle
   reste réglable depuis la grande carte. */
@media (max-width: 60rem) {
  .sb-c-barre-fixe__vitesse { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-c-vitesse, .sb-c-barre-fixe__vitesse { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RENAISSANCE 69 — CE QUE LE SITE CHANGE À LA MISE EN PAGE DU MODÈLE
   Demandes de Yan du 25.10.2026, captures à l'appui. Tout est ici, à la fin,
   pour se lire d'un bloc et se retirer d'un bloc : rien au-dessus n'a été
   réécrit. Aucune couleur écrite en dur — seulement des noms de jetons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LE BLASON SEUL DANS L'EN-TÊTE ─────────────────────────────────────
   « Agrandir le blason, on n'arrive pas à lire ; enlever "Renaissance 69",
   c'est dans le titre et dans le blason. » Le nom quitte l'écran, PAS le
   document : même masquage que le palier de 21 rem plus haut — 1 px et
   débordement caché, sans `position` ni `clip-path`, pour que le `::after`
   étiré du lien couvre encore tout le groupe et que le blason reste cliquable.
   64 px au repos : le lettrage se lit ; la spec en demande 80, l'en-tête n'en
   a pas la hauteur. */
.sb-c-marque::before { width: 64px; height: 64px; }
.sb-l-entete.a-defile .sb-c-marque::before { width: 46px; height: 46px; }
.sb-c-marque .wp-block-site-title {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}
@media (max-width: 34rem) {
  .sb-c-marque::before { width: 52px; height: 52px; }
  .sb-l-entete.a-defile .sb-c-marque::before { width: 40px; height: 40px; }
}

/* ── 2 · LE DUO DÉTOURÉ N'A PAS DE CADRE ───────────────────────────────────
   L'ombre et l'arrondi du visuel dessinaient un rectangle autour d'une photo
   transparente : un « décrochement » entre le détourage et la page. */
.sb-s-accueil-une .sb-c-visuel img {
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* ── 3 · UNE SEULE COLONNE DE LECTURE ──────────────────────────────────────
   « Ne pas créer deux colonnes de texte sur une seule colonne. » Le rail de
   gauche du modèle (intertitre à gauche, texte à droite) sort de la page
   d'épisode, d'« À propos » et des pages légales. Il posait aussi TOUS les
   paragraphes d'une section dans la même case de grille (`grid-row: 1`) :
   à partir de deux paragraphes, ils s'imprimaient les uns sur les autres.
   Un bloc simple ne peut pas faire ça. La colonne est un peu plus étroite
   que la page, comme demandé. */
@media (min-width: 60.01rem) {
  .wp-block-group.sb-s-episode-notes,
  .wp-block-group.sb-s-apropos-tete,
  .wp-block-group.sb-s-apropos-exergue,
  .wp-block-group.sb-s-apropos-texte,
  .wp-block-group.sb-s-apropos-appel,
  .wp-block-group.sb-s-legal,
  .wp-block-group.sb-s-cgu,
  .wp-block-group.sb-s-donnees-personnelles,
  .wp-block-group.sb-s-cookies {
    display: block;
    max-width: 46rem;
  }
  .wp-block-group.sb-s-legal,
  .wp-block-group.sb-s-cgu,
  .wp-block-group.sb-s-donnees-personnelles,
  .wp-block-group.sb-s-cookies { max-width: 42rem; }
}
.sb-s-episode-notes > *,
.sb-s-apropos-tete > *,
.sb-s-apropos-texte > *,
.sb-s-apropos-appel > *,
.sb-s-legal > *, .sb-s-cgu > *, .sb-s-donnees-personnelles > *, .sb-s-cookies > * {
  max-width: none;
}
.sb-s-apropos-tete > .sb-c-portrait { width: 14rem; margin-block: calc(var(--wp--custom--rythme) * 3) 0; }
.sb-s-apropos-texte > .sb-c-titre,
.sb-s-apropos-pour-qui > .sb-c-titre,
.sb-s-apropos-appel > .sb-c-surtitre { margin-block-end: calc(var(--wp--custom--rythme) * 2); }
.sb-s-apropos-texte > .sb-c-texte + .sb-c-texte,
.sb-s-episode-notes .sb-c-texte p + p { margin-block-start: calc(var(--wp--custom--rythme) * 2); }

/* ── 4 · LES DEUX BIOGRAPHIES, À 50 % CHACUNE ──────────────────────────────
   « Les textes sont sur des colonnes trop étroites. » Deux fiches côte à
   côte sur une largeur un peu plus grande que la colonne de lecture, et
   leurs paragraphes séparés : ils étaient collés, faute de marge. */
@media (min-width: 60.01rem) {
  .wp-block-group.sb-s-apropos-pour-qui {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--wp--custom--gouttiere) * 1.5);
    max-width: 62rem;
  }
  .wp-block-group.sb-s-apropos-pour-qui > .sb-c-titre { grid-column: 1 / -1; grid-row: auto; }
  .wp-block-group.sb-s-apropos-pour-qui > .sb-l-publics { grid-column: auto; grid-row: auto; }
  .sb-s-apropos-pour-qui::before { inset-inline: 0; }
}
.sb-l-publics .sb-c-texte { font-size: var(--wp--preset--font-size--corps); }
.sb-l-publics .sb-c-texte + .sb-c-texte { margin-block-start: calc(var(--wp--custom--rythme) * 1.5); }
.sb-l-publics .sb-c-portrait { margin: 0 0 calc(var(--wp--custom--rythme) * 2); }
.sb-l-publics .sb-c-portrait img { max-width: 14rem; }

/* ── 5 · « ÉCOUTER LE DERNIER ÉPISODE » MONTRE CE QU'IL FAIT ───────────────
   Repris d'entredonner (25.10.2026) avec le script qui va avec : un
   triangle dessiné en bordures, échangé contre deux barres quand le dernier
   épisode joue. Le script ne pose que `est-en-lecture`. */
.sb-s-accueil-une .sb-c-abonner .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--wp--custom--rythme) * 1.25);
}
.sb-s-accueil-une .sb-c-abonner .wp-block-button__link::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.sb-s-accueil-une .sb-c-abonner .wp-block-button__link.est-en-lecture::before {
  width: 3px;
  height: 13px;
  border: 0;
  background: currentColor;
  box-shadow: 6px 0 0 currentColor;
  margin-inline-end: 6px;
}

/* ── 6 · L'EXERGUE PREND TOUTE LA COLONNE ──────────────────────────────────
   Le modèle la ramenait sur son rail par deux bordures transparentes ; le
   rail parti, elles la réduisaient au tiers de la colonne. */
@media (min-width: 60.01rem) {
  .wp-block-group.sb-s-apropos-exergue { border-inline: 0; }
}

/* ── 7 · LE BLASON, ENCORE PLUS GRAND ──────────────────────────────────────
   « Il n'est pas encore lisible ; ça fera un grand menu, mais il rétrécit. »
   96 px au repos — au-delà des 80 px de la spec, le lettrage se lit —, et la
   barre se resserre au défilement. */
.sb-c-marque::before { width: 96px; height: 96px; }
.sb-l-entete.a-defile .sb-c-marque::before { width: 52px; height: 52px; }
@media (max-width: 34rem) {
  .sb-c-marque::before { width: 72px; height: 72px; }
  .sb-l-entete.a-defile .sb-c-marque::before { width: 44px; height: 44px; }
}

/* ── 8 · LES ÉPISODES DE L'ACCUEIL EN CARTES ───────────────────────────────
   Repris d'entredonner (24.10.2026), sans la bannière : la pochette est la
   même pour tous les épisodes. Défilement natif, et rien ne défile quand les
   cartes tiennent. Le script ne pose `a-carrousel` que s'il a posé le
   conteneur : sans lui, la liste reste une pile. */
.sb-l-carrousel {
  display: flex;
  gap: var(--wp--custom--gouttiere);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: calc(var(--wp--custom--rythme));
  scrollbar-width: thin;
}
.sb-s-accueil-episodes.a-carrousel .sb-l-episodes {
  flex: 0 0 clamp(260px, calc((100% - var(--wp--custom--gouttiere) * 2) / 3), 420px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--wp--custom--rythme) * 0.5);
  padding: calc(var(--wp--custom--rythme) * 2.5) calc(var(--wp--custom--rythme) * 2) calc(var(--wp--custom--rythme) * 2);
}
.sb-s-accueil-episodes.a-carrousel .sb-l-episodes > * { grid-column: auto; grid-row: auto; margin: 0; }
.sb-s-accueil-episodes.a-carrousel .sb-c-invite { display: none; }
.sb-s-accueil-episodes.a-carrousel .sb-c-rubrique { align-self: start; }
.sb-s-accueil-episodes.a-carrousel .sb-c-titre { margin-block: calc(var(--wp--custom--rythme) * 0.75) 0; }
.sb-s-accueil-episodes.a-carrousel .sb-c-pitch { max-width: none; }
.sb-s-accueil-episodes.a-carrousel .sb-c-fiche {
  margin-block-start: auto;
  padding-block-start: calc(var(--wp--custom--rythme) * 1.5);
}
.sb-s-accueil-episodes.a-carrousel .sb-c-duree {
  position: absolute;
  inset-inline-end: calc(var(--wp--custom--rythme) * 2 + 56px);
  inset-block-end: calc(var(--wp--custom--rythme) * 2.25);
}
.sb-s-accueil-episodes.a-carrousel .sb-c-ecouter {
  position: absolute;
  inset-inline-end: calc(var(--wp--custom--rythme) * 2);
  inset-block-end: calc(var(--wp--custom--rythme) * 1.5);
}
/* Une fiche masquée garde sa LARGEUR dans une rangée : l'épisode en cours,
   déjà dans la carte du lecteur, sort donc par `display`. */
.sb-s-accueil-episodes.a-carrousel .sb-l-episodes.est-joue { display: none; }
@media (max-width: 60rem) {
  .sb-s-accueil-episodes.a-carrousel .sb-l-episodes { flex: 0 0 min(82%, 320px); }
}

/* ── 9 · LE HAUT DE « À PROPOS » OCCUPE SA LARGEUR ─────────────────────────
   « Trop d'espace à droite. » Le texte à gauche, la photo du duo à droite et
   en grand, sur toute la hauteur du bloc — au lieu d'un médaillon sous le
   texte et d'une moitié de page vide. */
@media (min-width: 60.01rem) {
  .wp-block-group.sb-s-apropos-tete {
    display: grid;
    max-width: 62rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-rows: auto auto auto 1fr;
    column-gap: calc(var(--wp--custom--gouttiere) * 2.5);
    align-items: start;
  }
  .wp-block-group.sb-s-apropos-tete > * { grid-column: 1; grid-row: auto; }
  .wp-block-group.sb-s-apropos-tete > .sb-c-portrait {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    margin: 0;
  }
  .wp-block-group.sb-s-apropos-tete > .sb-c-portrait img { max-width: none; width: 100%; }
}

/* ── 10 · LES TEXTES DE LA PAGE « À PROPOS » SONT JUSTIFIÉS ─────────────────
   Demande de Yan. La césure évite les rivières que la justification creuse
   dans une colonne étroite — c'est elle qui rend la justification lisible. */
.sb-s-apropos-texte .sb-c-texte,
.sb-l-publics .sb-c-texte {
  text-align: justify;
  hyphens: auto;
}

/* ── 11 · « À PROPOS » SUR UNE SEULE LARGEUR ───────────────────────────────
   Le haut de page élargi (section 9) ne s'alignait plus sur la colonne d'en
   dessous : 128 px d'écart entre les deux bords gauches. Toute la page prend
   la même largeur, un peu plus que la colonne de lecture — la justification
   tient la ligne longue —, et la photo garde sa colonne à droite du haut. */
@media (min-width: 60.01rem) {
  .wp-block-group.sb-s-apropos-tete,
  .wp-block-group.sb-s-apropos-exergue,
  .wp-block-group.sb-s-apropos-texte,
  .wp-block-group.sb-s-apropos-appel { max-width: 52rem; }
  .wp-block-group.sb-s-apropos-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
}

/* ── 12 · DEUX RANGÉES DE FILTRES : LA SAISON, PUIS LE THÈME ───────────────
   Le flux n'étiquette pas ses épisodes : les thèmes sont du site (relevé du
   25.10.2026). La rangée des thèmes passe à la ligne sous celle des saisons,
   pour qu'on lise deux questions, et non une seule longue liste. */
.sb-l-filtres--theme { flex-basis: 100%; }

/* ── 13 · LES CARTES DE L'ACCUEIL SE DÉTACHENT DU FOND ─────────────────────
   « En sombre, c'est un peu difficile. » Le noir chaud de la carte (#14100C)
   sur le noir de la page (#0A0A0A) ne se voit presque pas. Un filet tout
   autour, et le liseré orange en tête — le même que celui des biographies :
   la carte se délimite dans les deux thèmes, et la rangée se lit comme trois. */
.sb-s-accueil-episodes.a-carrousel .sb-l-episodes {
  border: 1px solid var(--wp--preset--color--filet);
  border-top: 3px solid var(--wp--preset--color--accent);
}

/* ── 14 · LES FICHES DE LA LISTE SE SÉPARENT AUSSI ─────────────────────────
   Même demande que pour les cartes de l'accueil, sur la page « Épisodes » :
   un filet autour et le liseré orange en tête de chaque fiche. */
.sb-l-episodes {
  border: 1px solid var(--wp--preset--color--filet);
  border-top: 3px solid var(--wp--preset--color--accent);
}

/* ── 15 · LE NUMÉRO, LE COMPTEUR, ET UN TRI QUI NE RESSEMBLE PAS À UN FILTRE ─
   Le numéro précède le titre, en orange et en chiffres d'interface : c'est
   lui qu'on cite (« l'épisode 12 »). Le compteur passe en légende, sous les
   filtres. Et le tri n'est PAS un filtre : il ne retire rien, il range. Il
   quitte donc la forme de pastille pour celle d'une commande de texte,
   poussée au bout de la rangée, précédée de « Trier » et de sa flèche. */
.sb-c-numero {
  margin-inline-end: 0.45em;
  color: var(--wp--preset--color--accent-texte);
  font-variant-numeric: tabular-nums;
}
.sb-c-bilan {
  margin: 0;
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}
.sb-l-filtres .sb-c-filtre--ordre {
  margin-inline-start: auto;
  padding-inline: calc(var(--wp--custom--rythme) * 0.5);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--encre);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 0.3em;
}
.sb-l-filtres .sb-c-filtre--ordre::before {
  content: "Trier\00a0·\00a0";  /* insécables : un `inline-block` mange l'espace de fin */
  color: var(--wp--preset--color--encre-douce);
  text-decoration: none;
  display: inline-block;
}
.sb-l-filtres .sb-c-filtre--ordre::after {
  content: " ↓";
  display: inline-block;
  margin-inline-start: 0.3em;
  color: var(--wp--preset--color--accent-texte);
}
.sb-l-filtres .sb-c-filtre--ordre[data-ordre="ancien"]::after { content: " ↑"; }
.sb-l-filtres .sb-c-filtre--ordre:hover { background: transparent; color: var(--wp--preset--color--accent-texte); }

/* ── 16 · LE CHAMP SE RESSERRE, LE TRI PREND SA DISTANCE ───────────────────
   « Le tri est trop proche de Saison 2. » Le champ de recherche cède de la
   largeur, et la rangée des saisons s'étire pour que la marge automatique du
   tri le pousse au bout : deux familles de commandes, deux places. */
.sb-l-chercher .sb-c-champ { flex: 0 1 24rem; }
.sb-l-filtres--saison { flex: 1 1 auto; }
.sb-l-filtres--saison .sb-c-filtre--ordre { margin-inline-start: auto; padding-inline-start: calc(var(--wp--custom--gouttiere) * 1.5); }

/* ── 17 · LES MOTS-CLÉS SUR LA FICHE D'UN ÉPISODE ──────────────────────────
   Sous les notes, en légende : des étiquettes, pas des boutons. */
.sb-c-mots {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--wp--custom--rythme) * 0.75);
  margin-block-start: calc(var(--wp--custom--rythme) * 3);
  font-size: var(--wp--preset--font-size--legende);
  color: var(--wp--preset--color--encre-douce);
}
.sb-c-mots .wp-block-post-terms__prefix {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 700;
  letter-spacing: var(--wp--custom--interlettre-surtitre);
  text-transform: uppercase;
}
.sb-c-mots a {
  padding: 2px calc(var(--wp--custom--rythme) * 1);
  border: 1px solid var(--wp--preset--color--filet);
  color: var(--wp--preset--color--encre-douce);
  text-decoration: none;
}

/* ── 18 · LA POCHETTE DU LECTEUR, EN GRAND ─────────────────────────────────
   Demande de Yan. À 104 px, le blason et « La route de votre transformation »
   ne se lisaient pas sur la pochette. 168 px sur grand écran, 104 sur
   téléphone ; le lecteur réduit au défilement garde sa vignette ronde. */
.sb-s-accueil-lecteur:not(.est-compact) .sb-c-pochette,
.sb-s-episode-lecteur:not(.est-compact) .sb-c-pochette,
.sb-s-accueil-lecteur:not(.est-compact) .sb-c-pochette img,
.sb-s-episode-lecteur:not(.est-compact) .sb-c-pochette img { width: 168px; height: 168px; }
@media (max-width: 60rem) {
  .sb-s-accueil-lecteur:not(.est-compact) .sb-c-pochette,
  .sb-s-episode-lecteur:not(.est-compact) .sb-c-pochette,
  .sb-s-accueil-lecteur:not(.est-compact) .sb-c-pochette img,
  .sb-s-episode-lecteur:not(.est-compact) .sb-c-pochette img { width: 104px; height: 104px; }
}

/* ── 19 · LA PAGE D'UN ÉPISODE SUR UNE SEULE COLONNE ───────────────────────
   « Réduire la largeur, pour une colonne plus structurée. » Trois largeurs
   se succédaient : un haut de page en trois colonnes (étiquette à gauche,
   titre au milieu, pochette au bord), un lecteur pleine largeur, puis un
   texte étroit. Tout s'aligne maintenant sur la même colonne de 52 rem —
   celle d'« À propos » : l'étiquette au-dessus du titre, la pochette à droite
   du texte, le lecteur et les notes dessous, bords alignés. */
@media (min-width: 60.01rem) {
  .single-episode .wp-block-group.sb-s-episode-tete,
  .single-episode .wp-block-group.sb-s-episode-lecteur,
  .single-episode .wp-block-group.sb-s-episode-notes,
  .single-episode .wp-block-group.sb-s-episode-abonner { max-width: 52rem; margin-inline: auto !important; }

  .single-episode .wp-block-group.sb-s-episode-tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    grid-template-rows: auto auto 1fr;
    column-gap: calc(var(--wp--custom--gouttiere) * 2);
    row-gap: 0;
    align-items: start;
  }
  .single-episode .sb-s-episode-tete > .sb-c-rubrique { grid-column: 1; grid-row: 1; margin-block: 0 calc(var(--wp--custom--rythme) * 1.5); }
  .single-episode .sb-s-episode-tete > .sb-c-titre { grid-column: 1; grid-row: 2; margin-block: 0; }
  .single-episode .sb-s-episode-tete > .sb-c-meta { grid-column: 1; grid-row: 3; }
  .single-episode .sb-s-episode-tete > .sb-c-pochette-episode { grid-column: 2; grid-row: 1 / -1; width: 100%; margin: 0; }
}

/* ── 20 · LA BARRE DU BAS : UNE PISTE, ET UN BORD QUI SE VOIT ──────────────
   La piste se place sous le titre : on avance ou recule sans remonter à la
   carte. Sa zone de prise fait 16 px de haut pour un trait de 4 : un doigt
   doit pouvoir la saisir. Et le bord passe à l'orange — en sombre, le noir
   chaud de la barre sur le noir de la page ne disait pas qu'il y avait un
   lecteur. */
.sb-c-barre-fixe__texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--wp--custom--rythme) * 0.5);
}
.sb-c-barre-fixe__piste {
  position: relative;
  height: 16px;
  cursor: pointer;
  touch-action: none;
}
.sb-c-barre-fixe__piste::before,
.sb-c-barre-fixe__remplie {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 6px;
  height: 4px;
  border-radius: 2px;
}
.sb-c-barre-fixe__piste::before { inset-inline-end: 0; background: var(--wp--preset--color--lecteur-piste); }
.sb-c-barre-fixe__remplie { width: 0; background: var(--wp--preset--color--accent); }
.sb-c-barre-fixe__piste:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.sb-c-barre-fixe,
:root[data-theme="dark"] .sb-c-barre-fixe { border: 1px solid var(--wp--preset--color--accent); }

/* ── 21 · LE TEMPS ÉCOULÉ ET LA DURÉE, DE PART ET D'AUTRE DE LA PISTE ──────── */
.sb-c-barre-fixe__ligne {
  display: flex;
  align-items: center;
  gap: calc(var(--wp--custom--rythme) * 1);
}
.sb-c-barre-fixe__ligne .sb-c-barre-fixe__piste { flex: 1 1 auto; min-width: 3rem; }
.sb-c-barre-fixe__temps {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--lecteur-douce);
}