/* Entredonner — l'habillage du thème.
 *
 * `theme.json` porte ce qui est déclaratif : couleurs, familles, échelles. Il
 * ne sait pas dire « le lecteur devient une barre quand on l'a dépassé ». Or
 * la compilation aplatit les sections en blocs natifs sans mise en page —
 * c'est voulu, le client doit pouvoir éditer sans rien casser. Le dessin se
 * refait donc ici, en visant les classes que le compilateur pose : `sb-s-`
 * pour une section, `sb-c-` pour un composant, `sb-l-` pour une liste.
 *
 * AUCUNE VALEUR EN DUR : tout vient des présets de `theme.json`, que le pont
 * écrit depuis `design/source/colors_and_type.css`.
 *
 * Les `@font-face` sont ici et pas dans `theme.json` : la reprise de la
 * charte réécrit la section `settings` du thème, et des `fontFace` posés à la
 * main s'y perdraient à la prochaine synchronisation. Le site rendrait en
 * police de secours sans que rien ne le signale.
 *
 * Licences SIL OFL 1.1 dans `assets/fonts/`, à côté des fichiers.
 */

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/KulimPark-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/KulimPark-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/KulimPark-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/KulimPark-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/KulimPark-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kulim Park";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/KulimPark-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Lato-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Lato-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── le socle ──────────────────────────────────────────────────────────── */

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--turquoise-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: url("img/verrou-horizontal.svg") 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--turquoise-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(--end-plein);
  color: var(--end-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: url("img/marque-encre.svg") 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--ambre-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);
}

/* ══ LES APLATS DE MARQUE PORTENT DU BLANC ═══════════════════════════════
   Demande du 21.10.2026 : « sur ces fonds teal, le texte blanc sort mieux ».
   Il sort mieux, et il ne passait pas — du blanc sur le turquoise de marque
   #28A8BF mesure 2,82, très en dessous du seuil AA de 4,5. Le noir y était à
   7,02, ce qui explique qu'il ait été choisi.

   On ne renonce donc pas au blanc : on fonce l'aplat. `turquoise-texte`
   #126E80 EXISTE DÉJÀ dans la palette — c'est la variante que la marque
   utilise quand le turquoise doit porter du sens sur fond clair. Le blanc y
   mesure 5,89. Aucune couleur nouvelle n'entre dans la charte, et l'écart
   avec le turquoise vif reste lisible comme une nuance de la même famille.

   LE TURQUOISE VIF RESTE partout où rien ne s'écrit dessus : la barre de
   progression, les filets, les pastilles. Un aplat qui ne porte pas de texte
   n'a pas de contraste de texte à tenir. */
:root {
  --end-plein: var(--wp--preset--color--turquoise-texte);
  --end-plein-texte: #FFFFFF;
}

/* ══ LA CARTE DU LECTEUR A SES PROPRES JETONS ═════════════════════════════
   Elle était en `encre` avec du blanc écrit en dur. Un fond sombre posé en
   dur ne se renverse pas : ni pour passer la carte en clair, ni pour le mode
   sombre du système. Les sept valeurs ci-dessous sont le SEUL endroit qui
   décide de son habillage — tout le reste s'y réfère.

   Elles ne touchent pas aux presets `lecteur-*` de `theme.json`, qui servent
   AUSSI à l'exergue de « À propos » : les renverser là-bas rendrait une
   citation blanche sur blanc.

   LA CARTE EST CLAIRE, ET POURTANT ELLE N'EST PAS UNE FICHE DE LA LISTE.
   Trois choses l'en séparent, et il en faut trois : les fiches sont en
   `carte` pur sur `papier`, la carte du lecteur est très légèrement
   turquoisée ; elle porte un filet de 2 px quand les fiches n'en ont pas ;
   elle porte une ombre portée quand les fiches sont à plat. Une seule des
   trois ne suffisait pas — 5 % de turquoise seul ne se distingue pas du
   blanc à côté d'un fond `papier` bleuté. */
:root {
  /* La recette est `color-mix(turquoise 5%, carte)`. Elle est écrite en
     clair parce que les sondes de contraste ne savent pas la résoudre :
     elles remontent alors au fond du parent et rendent 1,05 là où le rendu
     mesure 18,90 au pixel. Un faux échec coûte aussi cher qu'un vrai
     manquement — il use la confiance dans le tableau. */
  --end-l-fond: #F4FBFC;
  --end-l-texte: var(--wp--preset--color--encre);
  --end-l-douce: var(--wp--preset--color--encre-douce);
  /* `turquoise-texte` et non `turquoise` : sur un fond clair, le turquoise
     de marque tombe à 2,6 de contraste. Mesuré, et c'est la même correction
     que celle déjà faite sur la pastille de rubrique. */
  --end-l-accent: var(--wp--preset--color--turquoise-texte);
  --end-l-rail: var(--wp--preset--color--filet);
  --end-l-filet: color-mix(in srgb, var(--wp--preset--color--turquoise) 38%, transparent);
  --end-l-ombre: 0 10px 30px color-mix(in srgb, var(--wp--preset--color--encre) 13%, transparent);
}

/* ── 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(--end-l-fond);
  color: var(--end-l-texte);
  border: 2px solid var(--end-l-filet);
  box-shadow: var(--end-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(--end-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(--end-l-douce);
}

.sb-c-barre { position: relative; flex-grow: 1; height: 5px; border-radius: 3px; background: var(--end-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--turquoise); }

.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(--end-plein);
  color: var(--end-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 turquoise 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(--end-plein-texte);
  background: var(--end-plein);
  justify-self: start;
}

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

/* 🔴 L'AMBRE 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 ambre
   mesure 2,12, contre 9,34 pour l'encre. L'ambre est une couleur CLAIRE —
   elle suit la règle inverse du turquoise, et il faut l'écrire ici, sans
   quoi la prochaine bascule globale la reprendra. */
.sb-c-rubrique.est-recit {
  background: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--encre);
}
.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); }

.sb-c-fiche .wp-block-button__link, .sb-c-fiche a {
  padding: 0; border: 0; background: transparent;
  color: var(--wp--preset--color--turquoise-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: 1.5px solid var(--wp--preset--color--encre);
  border-radius: var(--wp--custom--rayon-rond);
  background: transparent; color: var(--wp--preset--color--encre);
}

.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(--wp--preset--color--encre); color: var(--wp--preset--color--papier); }

/* ── 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--turquoise-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(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  border-radius: var(--wp--custom--rayon-rond); font-weight: 700;
}

/* ── 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: url("img/verrou-vertical.svg") 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(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  font-weight: 700;
}

.sb-c-abonner .wp-block-button__link:hover { background: var(--end-plein); color: var(--end-plein-texte); }

/* 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-entredonner.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: #FFFFFF;
  cursor: pointer;
}

.sb-c-saut:hover:not(:disabled) { background: #22262A; }
.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: #FFFFFF;
  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: url("img/verrou-horizontal.svg") 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);
}

.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);
}

.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--wp--preset--color--encre);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sb-l-nav .sb-c-onglet .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--turquoise-texte);
}

/* La seule action de l'en-tête porte la seule pastille. */
.sb-l-nav .sb-c-onglet--accent .wp-block-navigation-item__content {
  padding-inline: calc(var(--wp--custom--rythme) * 2.25);
  border-radius: var(--wp--custom--rayon-rond);
  background: var(--end-plein);
  color: var(--end-plein-texte);
}

.sb-l-nav .sb-c-onglet--accent .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
}

/* 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: url("img/marque.svg");
  }
  .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 { font-size: 13px; min-height: 36px; }
  .sb-l-nav .sb-c-onglet--accent .wp-block-navigation-item__content { padding-inline: calc(var(--wp--custom--rythme) * 1.75); }
}

/*
 * 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 { font-size: 12px; }
}

.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.
 */

.sb-l-nav .current-menu-item > .wp-block-navigation-item__content,
.sb-l-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--turquoise-texte);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* La pastille ne prend pas de trait : elle est déjà pleine. */
.sb-l-nav .sb-c-onglet--accent .wp-block-navigation-item__content[aria-current="page"],
.sb-l-nav .sb-c-onglet--accent.current-menu-item > .wp-block-navigation-item__content {
  text-decoration: none;
  color: var(--end-plein-texte);
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--encre);
}

.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: url("img/marque.svg");
}

.sb-c-marque .wp-block-site-title {
  display: block;
  margin: 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. */
  .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;
  }

  .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; }

  .sb-s-apropos-tete > .sb-c-chapo {
    grid-column: 2; grid-row: 2;
    margin-block: calc(var(--wp--custom--rythme) * 1.75) 0;
    font-size: var(--wp--preset--font-size--titre-fiche);
    color: var(--wp--preset--color--encre-douce);
  }

  /* 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 2;
    align-self: start;
    justify-self: start;
    width: 11rem;
    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--turquoise-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. Le fond encre et le texte papier
   se distinguent aussi en niveaux de gris, donc pour qui ne voit pas le
   turquoise. */
.sb-c-filtre.est-actif {
  border-color: var(--wp--preset--color--encre);
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
}

.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 turquoise 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--turquoise-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: 65rem;
    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;
  }

  .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, 13rem) minmax(0, 1fr);
  }

  /* 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(--wp--preset--color--encre);
}

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

.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(--wp--preset--color--lecteur-texte);
}

/* Le point ambre, la mécanique héritée de Réalisons : 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(--wp--preset--color--ambre);
}

/* 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--turquoise); }
.sb-l-publics[data-rang="2"] { border-top-color: var(--wp--preset--color--ambre); }
.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) {
  .sb-s-apropos-exergue { max-width: 65rem; 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
   turquoise de la fiche et le filet turquoise 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(--end-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(--end-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;
}

.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(--end-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 turquoise 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 turquoise sur fond
   turquoise, donc un rectangle vide. Mesuré à l'écran. */
.sb-c-lecteur-description a:not(.sb-c-lecteur-fiche) {
  color: var(--end-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(--end-plein);
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--legende);
  font-weight: 700;
  color: var(--end-plein-texte);
  text-decoration: none;
}

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

.sb-c-lecteur-fiche:hover,
.sb-c-lecteur-fiche:focus-visible { background: #3FC0D6; }

@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(--end-plein);
  color: var(--end-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 Réalisons, 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--turquoise);
  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--turquoise-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
   Réalisons : 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-realisons {
  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-realisons:hover,
.sb-c-pied-realisons:focus-visible { opacity: 1; }

.sb-c-pied-realisons__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);
}

.sb-c-pied-realisons 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-realisons { 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 ambre 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);
  }
}

/* ══ LE MODE SOMBRE ══════════════════════════════════════════════════════
   Il suit le réglage du système, ET il se force depuis l'en-tête.

   TROIS ÉTATS, PAS DEUX. `data-theme` absent = on suit le système ;
   `="dark"` et `="light"` = la personne a tranché pour ce navigateur. Le
   troisième état est le plus important : sans lui, un site qui a un bouton
   oublie le réglage système dès le premier clic, et ne sait plus y revenir.

   POURQUOI LES VALEURS SONT DANS `--end-d-*` ET NON DANS LES BLOCS. Il faut
   deux sélecteurs — une requête média et un attribut — et CSS ne sait pas
   les grouper. Écrire les couleurs deux fois, c'est se garantir qu'un jour
   l'une des deux copies ne sera pas mise à jour. Ici les blocs de bascule ne
   font que RÉAFFECTER ; la couleur, elle, n'est écrite qu'une fois.

   `color-scheme` n'est pas décoratif : sans lui, les ascenseurs, les champs
   et le lecteur audio de secours restent clairs au milieu d'une page sombre,
   et la recherche rend du texte noir sur noir.

   LES CONTRASTES SONT MESURÉS, pas estimés — encre sur papier 16,09 · encre
   sur carte 14,37 · encre-douce sur carte 8,14 · turquoise-texte sur carte
   9,19 · turquoise sur carte 5,95 · encre sur le fond du lecteur 12,36 ·
   encre-douce sur le fond du lecteur 7,00 · noir sur turquoise 7,02. Le
   seuil AA est à 4,5. */
:root {
  --end-d-papier: #0E1216;
  --end-d-carte: #181E24;
  --end-d-encre: #E8EEF4;
  --end-d-encre-douce: #AAB6C2;
  --end-d-filet: #2E3740;
  /* Les deux couleurs de marque ne bougent pas : elles SONT la marque, et
     elles tiennent AA sur le fond sombre. Ce sont leurs variantes « texte »
     qui se renversent — en clair elles s'assombrissaient pour passer sur du
     blanc, ici elles s'éclaircissent pour la raison symétrique. */
  --end-d-turquoise-texte: #5CCFE3;
  --end-d-ambre-texte: #F2B860;
  --end-d-lecteur-fond: #1A2C34;  /* color-mix(turquoise 10%, carte), écrit en clair */
  --end-d-lecteur-filet: color-mix(in srgb, var(--wp--preset--color--turquoise) 50%, transparent);
  --end-d-lecteur-ombre: 0 14px 38px color-mix(in srgb, #000000 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wp--preset--color--papier: var(--end-d-papier);
    --wp--preset--color--carte: var(--end-d-carte);
    --wp--preset--color--encre: var(--end-d-encre);
    --wp--preset--color--encre-douce: var(--end-d-encre-douce);
    --wp--preset--color--filet: var(--end-d-filet);
    --wp--preset--color--turquoise-texte: var(--end-d-turquoise-texte);
    --wp--preset--color--ambre-texte: var(--end-d-ambre-texte);
    --end-l-fond: var(--end-d-lecteur-fond);
    --end-l-accent: var(--end-d-turquoise-texte);
    --end-l-filet: var(--end-d-lecteur-filet);
    --end-l-ombre: var(--end-d-lecteur-ombre);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wp--preset--color--papier: var(--end-d-papier);
  --wp--preset--color--carte: var(--end-d-carte);
  --wp--preset--color--encre: var(--end-d-encre);
  --wp--preset--color--encre-douce: var(--end-d-encre-douce);
  --wp--preset--color--filet: var(--end-d-filet);
  --wp--preset--color--turquoise-texte: var(--end-d-turquoise-texte);
  --wp--preset--color--ambre-texte: var(--end-d-ambre-texte);
  --end-l-fond: var(--end-d-lecteur-fond);
  --end-l-accent: var(--end-d-turquoise-texte);
  --end-l-filet: var(--end-d-lecteur-filet);
  --end-l-ombre: var(--end-d-lecteur-ombre);
}

/* 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 {
  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--turquoise-texte);
  border-color: var(--wp--preset--color--turquoise);
  background: color-mix(in srgb, var(--wp--preset--color--turquoise) 10%, transparent);
}

/* 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: url("img/marque.svg");
  }
  .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. */
  .sb-c-marque .wp-block-site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    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.
     `15rem` est la première colonne et `40rem` la deuxième, telles que
     `.sb-s-apropos-texte` les déclare plus haut ; si cette grille change,
     ces deux valeurs changent avec.

     ⚠️ J'AI ESSAYÉ MIEUX, ET C'ÉTAIT PIRE. Déclarer la vraie grille sur
     l'exergue et poser son fond en pseudo-élément aurait rendu
     l'alignement exact au lieu de calculé. Le fond ne couvrait plus qu'une
     rangée : `grid-row: 1 / -1` ne s'étend pas sur les rangées IMPLICITES,
     et les deux enfants en créent. La piste est bonne, elle demande des
     rangées nommées — elle est notée, pas abandonnée. */
  .sb-s-apropos-exergue {
    margin-inline-start: calc(15rem + var(--wp--custom--gouttiere) * 2);
    max-inline-size: 40rem;
  }
}

/* ══ 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); }
}