/*
  Feuille de styles du thème iWeek.
  Les valeurs proviennent des maquettes : un jeu de variables en tête de fichier,
  puis les composants dans l'ordre où on les rencontre sur une page.
*/

/* Source Sans 3 et JetBrains Mono, auto-hébergées (SIL OFL). latin-ext avant
   latin : le navigateur prend le premier unicode-range qui contient le glyphe. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  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: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  /*
    Le logo reste #F31E35 ; en interface ce rouge-là ne passe pas AA
    (4,16:1, texte blanc sur bouton comme lien sur papier). #d11e35
    tient 4,5:1 dans les deux sens, y compris sur le crème des cartes.
  */
  --accent: #d11e35;
  /*
    Dérivées de --accent via color-mix() plutôt que des hex figées : un
    changement de --accent (voir la demande qui a fait dériver ces trois
    teintes de l'ancien rouge) se répercute alors partout tout seul, boutons,
    dégradés et lueurs compris.
  */
  --accent-dark: color-mix(in srgb, var(--accent) 87%, black);
  --accent-darker: color-mix(in srgb, var(--accent) 73%, black);
  --accent-light: color-mix(in srgb, var(--accent) 75%, white);
  --surface: #f5f3f0;
  --surface-alt: #f0ece7;
  --surface-hover: #e8e4de;
  --line: #e0dcd6;
  --muted: #4a4a4a;
  /*
    #888880 sur blanc ne faisait que 3,6:1, sous le seuil AA du texte
    courant. #5f5f58 tient 4,5:1 sur le crème des cartes (#f0ece7) comme
    sur le blanc du pied de page.
  */
  --faint: #5f5f58;

  /*
    Source Sans 3 partout : alternative libre à Myriad Pro (police historique
    de la baseline du logo), reprise pour les titres comme pour le texte
    courant — Fraunces (titres) et Inter (texte courant), qu'elle remplace
    toutes les deux, n'étaient liées ni l'une ni l'autre à l'identité du logo.
    --serif-classic garde son nom (encore utilisé dans une quinzaine de
    règles) même si elle ne pointe plus vers une serif.
  */
  --serif-classic: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(48px, 7vw, 84px);
  --max: 1140px;
  --max-narrow: 900px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 1000px;

  --shadow-card: 0 14px 30px rgba(26, 26, 26, 0.08);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -2px 6px rgba(0, 0, 0, 0.16), 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  --shadow-accent-hover: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 6px rgba(0, 0, 0, 0.18), 0 14px 30px color-mix(in srgb, var(--accent) 42%, transparent);
  --shadow-dark: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 6px rgba(0, 0, 0, 0.34), 0 10px 24px rgba(26, 26, 26, 0.24);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /*
    Verre — les réglages du matériau, en un seul endroit.

    Trois ingrédients font la différence entre un rectangle translucide et une
    plaque de verre : la saturation, qui ravive les couleurs traversantes ; le
    reflet spéculaire, ce trait clair sur l'arête supérieure ; et l'ombre interne
    basse, qui donne son épaisseur à la matière.
  */
  --glass-blur: 20px;
  --glass-saturate: 180%;
  --glass-tint: rgba(255, 255, 255, 0.55);
  --glass-tint-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.65);
  --glass-shade: rgba(26, 26, 26, 0.06);

  /* Sur fond sombre, le verre s'éclaire au lieu de s'assombrir. */
  --glass-tint-dark: rgba(255, 255, 255, 0.1);
  --glass-edge-dark: rgba(255, 255, 255, 0.24);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Verre ------------------------------------------------------------------- */

/*
  Une plaque de verre. À poser sur un élément qui a réellement quelque chose
  derrière lui : sans fond à traverser, l'effet se réduit à un aplat terne.

  Le reflet vient d'un pseudo-élément plutôt que d'un dégradé de fond, pour
  rester au-dessus du contenu translucide sans le teinter.
*/
.glass {
  position: relative;
  background: var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(255, 255, 255, 0.35),
    0 10px 30px var(--glass-shade);
  isolation: isolate;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: var(--glass-tint);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
}

/* Le reflet spéculaire : un trait de lumière qui court sur l'arête haute. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.9) 78%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Le fondu bas donne son épaisseur à la plaque. */
.glass::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
  z-index: 0;
}

.glass--dark {
  --glass-tint: var(--glass-tint-dark);
  --glass-edge: var(--glass-edge-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 3px rgba(255, 255, 255, 0.1),
    0 18px 40px rgba(0, 0, 0, 0.28);
}
.glass--dark::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0.55) 75%, transparent); }
.glass--dark::after { background: linear-gradient(to top, rgba(255, 255, 255, 0.07), transparent); }

/*
  Halo d'ambiance : une pochette floutée et débordante, posée derrière le verre
  pour lui donner de la couleur à réfracter. Sans elle, le verre sur fond blanc
  ne renvoie que du blanc.
*/
.ambient {
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  filter: blur(64px) saturate(150%);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 50%;
}
.ambient img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/*
  Certains systèmes demandent explicitement moins de transparence — un réglage
  d'accessibilité, pas une préférence esthétique. On rend alors les surfaces
  opaques plutôt que d'imposer un décor que la personne a choisi d'éteindre.
*/
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass--dark { background: rgba(26, 26, 26, 0.92); }
  .glass::before, .glass::after { display: none; }
  .ambient { display: none; }
}

/* Éléments transverses ---------------------------------------------------- */

.meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--accent);
  margin: 22px 0;
}

.rainbow {
  height: 4px;
  background: linear-gradient(90deg, #6fbe44, #f9d923, #f5821f, #e4292b, #b24a9c, #3670b4);
}

/*
  Les boutons gardent un fond plein : ce sont des zones d'action, elles doivent
  se lire d'un coup d'œil sur n'importe quel fond. Ce qui les rapproche du verre,
  c'est le traitement de la lumière — arête haute claire, creux en bas — déjà
  présent dans les ombres de la maquette, et un léger soulèvement au survol.
*/
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/*
  Quasi opaque (97 %/88 % plutôt que 94 %/82 %) et moins saturé dans son
  verre (130 % plutôt que 180 %) : moins de fond clair remonte à travers le
  dégradé, pour un rouge plus proche de celui du logo que la version
  d'origine, plus rose. Le --accent d'interface est un cran plus sombre
  que le #F31E35 du logo, pour tenir le contraste AA.
*/
.btn--accent {
  --glass-saturate: 130%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 97%, transparent), color-mix(in srgb, var(--accent-dark) 88%, transparent));
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-dark) 96%, transparent), color-mix(in srgb, var(--accent-darker) 88%, transparent));
  color: #fff;
  box-shadow: var(--shadow-accent-hover);
}
.btn--accent:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28); }

.btn--dark {
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.94), rgba(10, 10, 10, 0.86));
  color: #fff;
  box-shadow: var(--shadow-dark);
}
.btn--dark:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(52, 52, 52, 0.96), rgba(10, 10, 10, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 0, 0, 0.36), 0 14px 30px rgba(26, 26, 26, 0.3);
}

.btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(233, 238, 243, 0.38));
  color: var(--ink);
  border: 1px solid rgba(20, 20, 30, 0.16);
  box-shadow: 0 16px 32px rgba(20, 20, 30, 0.18), 0 4px 10px rgba(20, 20, 30, 0.12);
}
.btn--ghost:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 244, 248, 0.55));
  color: var(--accent);
  box-shadow: 0 18px 36px rgba(20, 20, 30, 0.2), 0 4px 10px rgba(20, 20, 30, 0.14);
}

/*
  Recette « verre liquide » partagée par tous les boutons du site — clairs
  (.btn--ghost, .link-pills) comme colorés (.btn--accent, .btn--dark), même
  traitement partout, jamais de cas particulier. .filters__item et
  .pagination__item n'ont plus besoin d'y figurer : ce sont des .btn comme
  les autres (voir plus bas), ils héritent donc déjà de cette recette.
  - ::before porte le flou ET la légère distorsion (filtre SVG défini dans
    base.twig), en retrait (z-index -1) pour ne pas déformer le texte ;
  - ::after porte le reflet, en deux coins opposés plutôt qu'un simple
    trait, pour suggérer une épaisseur plutôt qu'une arête plate.
*/
.btn--ghost::before,
.btn--accent::before,
.btn--dark::before,
.link-pills a::before,
.subscribe-tab button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  filter: url(#glass-distortion);
}
.btn--ghost::after,
.btn--accent::after,
.btn--dark::after,
.link-pills a::after,
.subscribe-tab button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 2px 2px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 2px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  .btn--accent { background: var(--accent); }
  .btn--dark { background: var(--ink); }
  .subscribe-tab button { background: var(--accent); }
  .btn--ghost,
  .link-pills a {
    background: rgba(255, 255, 255, 0.96);
  }
  .btn--ghost::before,
  .btn--accent::before,
  .btn--dark::before,
  .link-pills a::before,
  .subscribe-tab button::before { display: none; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font: 600 12px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow .icon { transition: transform 0.25s ease; }

.empty { color: var(--faint); }

/*
  Durée d'un épisode. L'horloge est un pictogramme en pixels : sa netteté tient
  à shape-rendering="crispEdges" dans le SVG, pas au CSS.
*/
.duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}
.duration__icon { flex: none; }

.prose { max-width: 70ch; line-height: 1.75; color: var(--muted); }
.prose h2, .prose h3 { font-family: var(--serif-classic); font-weight: 400; color: var(--ink); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); margin: 24px 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Fiche technique (page À propos) : labels en petites majuscules façon .meta, plutôt que l'indentation par défaut d'un <dl>. */
.prose dl.fact-sheet { margin: 24px 0 0; }
.prose dl.fact-sheet dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 20px 0 4px;
}
.prose dl.fact-sheet dt:first-child { margin-top: 0; }
.prose dl.fact-sheet dd { margin: 0; }

.single-post__cover {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.single-post__cover img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* En-tête ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 26px rgba(26, 26, 26, 0.06);
}

/* L'arête de l'en-tête s'allume au milieu, là où le regard se pose. */
.site-header::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.95) 70%, transparent);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 700 26px/1 var(--sans);
  letter-spacing: -0.2px;
}
.site-brand a { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
/* La tagline suit le nom de plus près que l'écart image/texte : un espace de mot, pas deux blocs distincts. */
.site-brand__name { font-weight: 700; }
.site-brand__tagline { font-weight: 300; margin-left: -4px; }
.site-brand a:hover { color: inherit; }
.site-brand img { border-radius: var(--radius); flex: none; }
.site-header .site-brand {
  min-width: 0;
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.1;
}

.header-left { display: flex; align-items: center; gap: 18px; min-width: 0; }

.header-listen { display: flex; align-items: center; gap: 8px; flex: none; }
.header-listen a {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease;
}
.header-listen a:hover { color: var(--accent); background: var(--surface-hover); }

/* Logo officiel Apple Podcasts : blanc au repos, couleur au survol — deux images superposées, l'une s'efface. */
.header-listen__icon { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: opacity 0.2s ease; }
.header-listen__icon--hover { opacity: 0; }
.header-listen__apple:hover .header-listen__icon--default { opacity: 0; }
.header-listen__apple:hover .header-listen__icon--hover { opacity: 1; }

/* Étiquette au survol, pour les deux icônes : le nom de la plateforme, pas seulement son pictogramme. */
.header-listen__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.header-listen a:hover .header-listen__label { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .header-listen { display: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);
  font-size: 16px;
}
.site-nav a { padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a.is-current { border-bottom-color: var(--accent); color: var(--accent); }
.site-nav a.btn { padding: 11px 20px; border-bottom: 0; }
.site-nav a.btn.is-current { color: #fff; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); }

/* Accueil ----------------------------------------------------------------- */

/*
  Le halo colore toute la largeur de la section, pas seulement la carte
  centrée : sans ça, sur un écran large, la carte laisse une bande blanche
  brute de chaque côté. Le contenu (pochette, titre, lecteur), lui, reste
  dans .hero__row, à la largeur habituelle du site.
*/
.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero .ambient {
  inset: -20% 0;
  opacity: 0.6;
  /* Étirée sur toute la largeur de la section, la forme ronde de base
     dessinerait une ellipse aplatie : le fondu du masque suffit ici. */
  border-radius: 0;
  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 75%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 75%);
}
.hero .ambient img { border-radius: 0; }

/*
  Dérive lente du halo : la marge de -20% sur .hero .ambient (-40% -20% sur
  celui du cartouche épisode, encore plus large) et le flou de 64px absorbent
  le mouvement, aucun bord dur ne peut apparaître. Le zoom reste borné à >= 1
  pour la même raison. L'amplitude (translate + rotate + zoom, pas juste un
  zoom seul) est volontairement plus marquée que l'oeil ne le suggère au
  premier coup d'oeil : sous un flou de 64px, un simple zoom/rotation de
  faible ampleur devient quasi invisible, en particulier sur le cartouche
  épisode où l'image est rognée serré dans une bande basse.
*/
@media (prefers-reduced-motion: no-preference) {
  .hero .ambient img,
  .episode__player .ambient img { animation: ambient-drift 20s ease-in-out infinite; }
}

@keyframes ambient-drift {
  0%, 100% { transform: scale(1.05) rotate(0deg) translate(0, 0); }
  33% { transform: scale(1.22) rotate(5deg) translate(-4%, 3%); }
  66% { transform: scale(1.16) rotate(-5deg) translate(4%, -3%); }
}

.hero__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px) var(--gutter);
}

.hero__row--textonly { grid-template-columns: minmax(0, 1fr); }
.hero__cover img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

.hero__title {
  font: 400 clamp(36px, 5.2vw, 64px)/1.05 var(--serif-classic);
  letter-spacing: -0.72px;
  margin: 0 0 18px;
}
.hero__title a { color: inherit; }

.hero__excerpt { font-size: 17px; color: var(--muted); margin: 0 0 28px; max-width: 52ch; }
.hero__more { margin: 22px 0 0; }

/*
  Bloc de présentation : un média en fond, adouci par un flou et un voile sombre
  pour que le texte reste lisible.

  La maquette prévoyait une image fixe, qu'un flou marqué et un voile très opaque
  pouvaient réduire à une texture. Une vidéo demande l'inverse : si on ne perçoit
  pas le mouvement, autant ne pas la charger. D'où un flou et un voile allégés —
  les trois réglages sont ici, à ajuster ensemble.
*/
/* Bandeau des actus, entre le dernier épisode et le bloc de présentation :
   la plus récente en titre pleine largeur, les suivantes en fil discret. */
.news-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.news-strip__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
}
.news-strip__inner--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 0;
}
.news-strip__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  flex: none;
}
.news-strip__featured {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px var(--gutter) 4px;
}
.news-strip__featured-title {
  font: 400 clamp(19px, 2.6vw, 26px)/1.3 var(--serif-classic);
  color: var(--ink);
}
.news-strip__featured:hover .news-strip__featured-title { color: var(--accent); }
.news-strip__inner--list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 0;
}
.news-strip__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.news-strip__list::-webkit-scrollbar { display: none; }
.news-strip__list li { flex: none; white-space: nowrap; }
.news-strip__list a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.news-strip__list a:hover { color: var(--accent); border-color: var(--accent); }
.news-strip__more { flex: none; }

/* Auteur d'un article (intervenant, pas le compte WordPress), avec avatar. */
.byline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.byline__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }

/* Le bloc suit l'épisode du jour sans interstice : la bande claire qui les
   séparait n'apportait rien et coupait la page en deux. */
.band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;

  --band-media-opacity: 0.55;
  --band-media-blur: 2px;
  --band-veil-start: 0.93;
  --band-veil-mid: 0.66;
}

.band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--band-media-opacity);
  filter: blur(var(--band-media-blur));
  transform: scale(1.06);
  pointer-events: none;
}

.band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(26, 26, 26, var(--band-veil-start)),
    rgba(26, 26, 26, var(--band-veil-mid)) 55%,
    color-mix(in srgb, var(--accent) 42%, transparent)
  );
}

/*
  Le texte se détache du fond quoi qu'il s'y passe : l'ombre portée ne se voit
  pas sur une zone sombre, et sauve la lisibilité sur une image claire.
*/
.band__intro,
.band .stats__value,
.band .stats__label {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.band__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.band__intro { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 40px); }

.band__intro-row { display: flex; align-items: center; gap: 22px; }
.band__intro-body { min-width: 0; }
.band__logo { flex: none; width: 96px; height: 96px; border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.band__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 14px;
}

.band__text {
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  text-wrap: pretty;
}

.band__text a { text-decoration: underline; text-underline-offset: 3px; }

.rainbow--short {
  display: block;
  width: 132px;
  height: 5px;
  border-radius: var(--radius-pill);
  margin: 26px 0 0;
}

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}
/*
  Les seules plaques posées sur une image en mouvement : c'est ici que le verre
  se voit vraiment travailler.
*/
.stats li {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 3px rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s var(--ease), background 0.3s ease, box-shadow 0.3s ease;
}
.stats li::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
}
.stats li:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 22px 50px rgba(0, 0, 0, 0.28);
}
.stats__value { display: block; font: 400 46px/1 var(--serif-classic); }
.stats__label { display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin-top: 10px; }

/* Hors du bloc sombre, les mêmes compteurs reprennent les couleurs du site. */
.stats--cards li {
  background: var(--surface);
  border-color: var(--line);
  padding: clamp(22px, 3vw, 32px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.stats--cards .stats__value { color: var(--accent); }
.stats--cards .stats__label { color: var(--muted); }

/* Sections et grilles ------------------------------------------------------ */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
/* Fond léger et coins arrondis : pour distinguer un bloc du reste de la page (archives OUATCH TV sur /iweek-la-semaine-apple/, par ex.). */
.section--framed {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 40px);
}

/* .filters porte sa propre largeur/marge pour flotter seul sur la page (voir
   plus bas) : à l'intérieur d'un .section--framed déjà centré et padded, ces
   règles feraient double emploi et décaleraient les boutons vers la droite. */
.section--framed .filters {
  max-width: none;
  margin: 24px 0 0;
  padding: 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.section__title { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--serif-classic); letter-spacing: -0.4px; margin: 0; }
.section__lead { color: var(--muted); max-width: 60ch; margin: 0 0 28px; }

/* Le fond traverse la page, le contenu reste dans la gouttière commune. */
.subscribe { background: var(--surface); border-top: 1px solid var(--line); }
.subscribe__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.subscribe .section__title { margin-bottom: 14px; }

.section--cta { text-align: center; }
.section--cta .section__lead { margin-inline: auto; }

/* Formulaire de contact des pages Présentation et Équipe. */
.contact-form {
  display: grid;
  gap: 16px;
  max-width: 480px;
  margin: 24px auto 0;
  text-align: left;
}
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__field { display: grid; gap: 6px; }
.contact-form__field span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-form__field input,
.contact-form__field textarea {
  font: 400 15px/1.4 var(--sans);
  color: var(--ink);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.contact-form .btn { justify-self: center; margin-top: 4px; }
.contact-form__notice { font-size: 14px; margin: 4px 0 0; }
.contact-form__notice--ok { color: #1a7a3c; }
.contact-form__notice--error { color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

.platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.platforms .icon--platform { color: var(--faint); transition: color 0.25s ease; }
.platforms a:hover .icon--platform { color: var(--accent); }

/* Carte d'épisode ---------------------------------------------------------- */

.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card:hover .ambient { opacity: 0.55; }

/* Le halo se loge sous le texte, pas sous la pochette qui le couvrirait. */
.card .ambient {
  inset: 40% -25% -25%;
  opacity: 0.34;
  filter: blur(38px) saturate(160%);
  transition: opacity 0.3s ease;
}

.card__cover { position: relative; z-index: 0; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Cartes des archives OUATCH TV : miniatures Dailymotion, en 16/9. */
.card--wide .card__cover { aspect-ratio: 16 / 9; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 24px);
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.card__title { font: 400 22px/1.22 var(--serif-classic); margin: 0; }

/*
  Tout le bloc mène à sa cible : le lien du titre s'étire sur .card (pas
  seulement .card__body) via un ::after invisible, pochette comprise. Le
  bouton « Écouter », le badge vidéo et les avatars restent cliquables
  individuellement par-dessus grâce à leur propre position/z-index.
*/
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__excerpt { font-size: 14px; color: var(--muted); margin: 0; }
.card__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.card__footer .meta { margin: 0; }
.card__actions { display: flex; align-items: center; gap: 10px; }
.card__video-badge { display: inline-flex; color: var(--faint); }

/* Rangée d'avatars empilés, au pied de la carte : qui est dans l'épisode,
   d'un coup d'œil. */
.avatars { position: relative; z-index: 1; display: flex; list-style: none; padding: 0; margin: 12px 0 0; min-height: 32px; }
.avatars li { margin-left: -6px; }
.avatars li:first-child { margin-left: 0; }
.avatars__item {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: var(--surface-hover);
  color: var(--faint);
  font: 500 10px/1 var(--sans);
  text-transform: uppercase;
  transition: transform 0.2s var(--ease);
}
.avatars__item:hover {
  transform: translateY(-4px) scale(1.6);
  z-index: 2;
  position: relative;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}
.avatars__item img { width: 100%; height: 100%; object-fit: cover; }

/* Archive ------------------------------------------------------------------ */

.page-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter) 0;
}
.page-head__title { font: 400 clamp(38px, 6vw, 72px)/1.05 var(--serif-classic); letter-spacing: -0.72px; margin: 0; }
.page-head__lead { font-size: 17px; color: var(--muted); max-width: 60ch; }

/* Page 404 : les trois chiffres, chacun porté par une silhouette Apple. */
.error-404 { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 2vw, 24px); margin-bottom: clamp(24px, 4vw, 40px); }
.error-404__digit { position: relative; display: grid; place-items: center; }
.error-404__num {
  font: 700 clamp(96px, 18vw, 220px)/1 var(--sans);
  color: var(--surface-hover);
  letter-spacing: -0.05em;
}
.error-404__glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ink); }
.error-404__legend {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--faint);
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .error-404__digit:hover .error-404__glyph { transform: translate(-50%, -50%) scale(1.06); transition: transform 0.3s var(--ease); }
}
@media (max-width: 640px) {
  /*
    Les silhouettes se resserrent bien à cette largeur, mais leur légende
    (jusqu'à trois mots, ex. « Souris iMac G3 ») a besoin de nettement plus
    de place que l'icône elle-même pour ne pas mordre sur ses voisines.
  */
  .error-404 { gap: clamp(28px, 8vw, 40px); margin-bottom: clamp(40px, 10vw, 56px); }
  .error-404__glyph { width: 52px !important; height: auto !important; }
  .error-404__legend { white-space: normal; width: 80px; text-align: center; line-height: 1.3; }
}

/* Fiche d'une personne ------------------------------------------------------ */

.person-head {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 48px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter) 0;
}

.person-head__portrait-wrap { position: relative; isolation: isolate; flex: none; }
.person-head__portrait-wrap .ambient { inset: -30%; opacity: 0.5; }

.person-head__portrait {
  display: block;
  width: clamp(140px, 20vw, 220px);
  height: clamp(140px, 20vw, 220px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.person-head__body { min-width: 0; }

.person-head__name {
  font: 400 clamp(32px, 5vw, 56px)/1.05 var(--serif-classic);
  letter-spacing: -0.6px;
  margin: 6px 0 0;
}

.person-head__role {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 12px 0 0;
}

/* Rangée de pastilles verre pour un groupe de liens externes : liens d'une
   bio, réseaux sociaux… Repris à l'identique partout où ce motif apparaît. */
.link-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 22px 0 0;
}
.link-pills a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(233, 238, 243, 0.38));
  border: 1px solid rgba(20, 20, 30, 0.16);
  border-radius: var(--radius-pill);
  box-shadow: 0 16px 32px rgba(20, 20, 30, 0.18), 0 4px 10px rgba(20, 20, 30, 0.12);
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.link-pills a:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 244, 248, 0.55));
  color: var(--accent);
  box-shadow: 0 18px 36px rgba(20, 20, 30, 0.2), 0 4px 10px rgba(20, 20, 30, 0.14);
}
.link-pills .icon { color: var(--accent); }

/* La bio suit la tête de fiche sans le vide habituel entre deux .section. */
.person-head + .section { padding-top: clamp(20px, 3vw, 32px); }

@media (max-width: 640px) {
  .person-head { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Recherche ---------------------------------------------------------------- */

.episodes-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; max-width: 640px; }

.episodes-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 240px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.episodes-search__field:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.episodes-search__field .icon { color: var(--faint); flex: none; }

.episodes-search input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  background: none;
  border: 0;
  font: 400 15px/1 var(--sans);
  color: var(--ink);
}
.episodes-search input:focus { outline: none; }
.episodes-search input::placeholder { color: var(--faint); }
/* Chrome ajoute sa propre croix, qui ferait doublon avec la nôtre. */
.episodes-search input::-webkit-search-cancel-button { display: none; }

.episodes-search__clear {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.episodes-search__clear:hover { background: var(--accent); color: #fff; }

/*
  Verre amplifié : la même matière que .glass, teintée d'accent et plus
  marquée — pour une action qui doit se voir depuis loin, sans détonner sous
  la forme d'un habillage d'une autre époque.
*/
.btn--glass {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--accent-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 2px rgba(255, 255, 255, 0.3),
    0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn--glass:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-dark);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(255, 255, 255, 0.35),
    0 14px 30px color-mix(in srgb, var(--accent) 26%, transparent);
}

.empty-state { display: grid; gap: 18px; justify-items: start; }

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

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--max);
  margin: 32px auto 0;
  padding: 0 var(--gutter);
}
/*
  .filters__item et .pagination__item ne portent plus leur propre apparence :
  ce sont des .btn (.btn--ghost au repos, .btn--accent / .btn--dark pour
  l'état courant) — même bouton arrondi et liquid glass que partout ailleurs
  sur le site (voir .player__switch), plutôt qu'un habillage dupliqué.
*/
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.pagination__item { min-width: 40px; text-align: center; }

.pagination__item--gap { color: var(--faint); }

/* Fiche d'épisode ---------------------------------------------------------- */

.breadcrumb {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--faint); }

/*
  Barre de bascule rapide des intervenants (voir GuestToggle côté PHP) :
  un bordé pointillé plutôt que le style habituel du site, pour qu'elle se
  lise d'emblée comme un outil d'édition et non un élément pour les
  visiteurs — cohérent avec le fait qu'elle n'est jamais rendue pour eux.
*/
.guest-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: var(--max);
  margin: 20px auto 0;
  padding: 14px var(--gutter);
  border-top: 1px dashed var(--accent);
  border-bottom: 1px dashed var(--accent);
}
.guest-toggle__label {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.guest-toggle__list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.guest-toggle__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.guest-toggle__item:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.guest-toggle__item input { accent-color: var(--accent); }
.guest-toggle__new {
  flex: none;
  font: 500 12px/1 var(--sans);
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}
.guest-toggle__new:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.guest-toggle__status { flex: none; font-size: 12px; color: var(--muted); min-width: 60px; }
.guest-toggle__status[data-state="error"] { color: var(--accent); }

.episode { max-width: var(--max-narrow); margin: 0 auto; padding: clamp(24px, 4vw, 40px) var(--gutter); }
/* Le fil d'Ariane a son propre padding (voir .breadcrumb) : cette marge s'y ajoute, plutôt que d'y toucher — elle est partagée par tout le site. */
.episode__title { font: 400 clamp(30px, 4.4vw, 48px)/1.08 var(--serif-classic); letter-spacing: -0.5px; margin: clamp(12px, 2.4vw, 28px) 0 16px; }

.episode__intro { display: flex; align-items: center; gap: 14px; }
.episode__lead { font-size: 17px; color: var(--muted); margin: 0; }

/* Vignette de date façon icône de calendrier iOS : le mois sur bandeau
   coloré, le quantième en grand au milieu, l'année en petit en bas. */
.date-icon {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 44px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.date-icon__month {
  background: var(--accent);
  color: #fff;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 0;
}
.date-icon__day {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font: 500 18px/1 var(--sans);
}
.date-icon__year {
  background: var(--paper);
  color: var(--faint);
  font: 500 8px/1 var(--sans);
  letter-spacing: 0.3px;
  text-align: center;
  padding: 0 0 4px;
}

.episode__player {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  margin: 32px 0;
  overflow: hidden;
}
.episode__player .ambient { inset: -40% -20%; opacity: 0.55; }
.episode__cover { position: relative; z-index: 1; border-radius: var(--radius); flex: none; box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18); }
/* min-width:0 : sans lui, un enfant flex ne rétrécit jamais sous la largeur
   intrinsèque de son contenu (ici les commandes du lecteur), et déborde. */
.episode__player .player { position: relative; z-index: 1; flex: 1; min-width: 0; }

.episode__section { margin: 44px 0; }
.episode__section h2 { font: 400 26px/1.2 var(--serif-classic); margin: 0 0 18px; }

/* Sur l'émission OUATCH TV, .episode__section est niché dans .section (voir
   single-ouatch_episode.twig) plutôt que dans .episode : .section porte déjà
   le padding vertical, la marge de .episode__section ferait double emploi. */
.section > .episode__section { margin: 0; }
/* Le lecteur porte déjà sa propre marge (32px) : la section « Au sommaire » qui le suit n'a pas besoin d'en ajouter autant par-dessus. */
.episode__player + .episode__section { margin-top: 12px; }

/* Sur la fiche d'un épisode, la section du lecteur n'a pas besoin du plein
   vide vertical de .section, ni avant (sous le titre) ni après (avant le
   résumé ou les intervenants). */
.section--ouatch-player { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(20px, 3vw, 32px); }

/*
  Lecteur des archives OUATCH TV : une affiche avec bouton de lecture, l'iframe
  Dailymotion n'est écrite qu'au clic (voir initOuatchPlayer dans app.js).
*/
.ouatch-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ouatch-player__poster { width: 100%; height: 100%; object-fit: cover; }
.ouatch-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ouatch-player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(26, 26, 26, 0.25);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s ease;
}
.ouatch-player__play::before {
  content: '';
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ouatch-player__play .icon { position: relative; margin-left: 4px; }
.ouatch-player__play:hover { background: rgba(26, 26, 26, 0.4); }
.ouatch-player__out { margin-top: 16px; }

.episode__lead-in {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 26px;
  text-wrap: pretty;
}

/* Intervenants : des vignettes carrées et centrées, comme la maquette. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.person { display: flex; }
.person__link {
  flex: 1;
  background: rgba(245, 243, 240, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 24px 18px;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
.person__link:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-card); color: inherit; }
.person__link img,
.person__initials {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
/* Sans portrait, les initiales tiennent la place plutôt qu'un trou. */
.person__initials {
  background: var(--surface-hover);
  color: var(--faint);
  font: 400 30px/1 var(--serif-classic);
  text-transform: uppercase;
}
.person__name { font-size: 16px; font-weight: 500; margin: 0; }
.person__role { font-size: 13px; line-height: 1.5; color: var(--faint); margin: 6px 0 0; }

/* L'animateur se repère d'un coup d'œil en tête de liste. */
.person__role--host {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Un invité n'est pas de la maison : sa vignette le dit sans le reléguer. */
.person__link--guest { background: rgba(255, 255, 255, 0.55); border-style: dashed; }

.chapters, .segments { list-style: none; padding: 0; margin: 0; }
.chapters { border-top: 1px solid var(--line); margin-top: 20px; }
.chapters li { border-bottom: 1px solid var(--line); }
.chapters__seek {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: baseline;
  width: 100%;
  padding: 16px 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.25s ease, padding 0.2s ease;
}
.chapters__seek:hover { background: var(--surface); padding-left: 16px; }
.chapters__time { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.chapters__title { font-size: 16px; }

.links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.links li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.6; }
.links .icon { color: var(--accent); margin-top: 5px; }
.links a { border-bottom: 1px solid transparent; }
.links a:hover { border-bottom-color: var(--accent); }

.transcript__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.transcript__body {
  max-height: 320px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s var(--ease);
}
.transcript__body::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}
.transcript.is-open .transcript__body { max-height: none; }
.transcript.is-open .transcript__body::after { display: none; }

.transcript__line { display: grid; grid-template-columns: 84px 1fr; gap: 18px; font-size: 16px; line-height: 1.75; color: var(--muted); margin: 20px 0 0; }
.transcript__time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  background: none;
  border: 0;
  padding: 4px 0 0;
  text-align: left;
  cursor: pointer;
}
.transcript__time:hover { color: var(--accent); }
.transcript__text strong { color: var(--ink); font-weight: 500; }

.share { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.share p { margin: 0; color: var(--muted); }
.share ul { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; }
.share a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.share a:hover { border-color: var(--accent); }

/* Lecteur ------------------------------------------------------------------ */

/*
  Retournement audio ↔ vidéo, sur toute la largeur de la page.

  Le conteneur n'a volontairement pas de largeur maximale : c'est la face audio
  qui porte la sienne. La face vidéo occupe ainsi tout l'espace disponible sans
  recourir à un dépassement en 100vw, qui ferait apparaître une barre de
  défilement horizontale de la largeur de la barre verticale.
*/
.stage { position: relative; }
.stage__inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* Sur la home, le bloc du dernier épisode reste une carte : la face vidéo ne
   doit pas déborder de son gabarit habituel. */
.stage--card { max-width: var(--max); margin: 0 auto; }

.flip { perspective: 2200px; }

.flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.85s var(--ease);
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }

.flip__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip.is-flipped .flip__face--audio { pointer-events: none; }

/*
  Le retournement de 180° reflète la face : ce qui débordait à gauche déborde
  alors à droite, et fait apparaître une barre de défilement horizontale. La face
  couvrant déjà toute la largeur, la découper ici ne coupe rien de visible.
*/
.flip__face--audio { overflow: hidden; }

/*
  Même verre que les cartes d'épisode, sur fond sombre : assez opaque pour
  rester lisible quelle que soit la pochette qui se floute derrière, assez
  translucide pour laisser deviner sa couleur plutôt que de la couper au noir.
*/
.flip__face--video {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(16px, 3vw, 32px) var(--gutter);
  --glass-tint: rgba(20, 19, 22, 0.6);
  --glass-edge: rgba(255, 255, 255, 0.16);
}

/*
  La vidéo occupe la largeur, sans jamais dépasser la hauteur de la fenêtre :
  passé ce point, il faudrait faire défiler pour voir le bas de l'image.
*/
.flip__frame {
  position: relative;
  width: min(100%, var(--max-narrow), calc(76vh * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.flip__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.flip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: min(100%, var(--max-narrow), calc(76vh * 16 / 9));
  margin: 0 auto;
}
.flip__caption {
  font: 400 clamp(17px, 2vw, 22px)/1.3 var(--serif-classic);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.flip__bar .btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.flip__bar .btn--ghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* Sans vidéo à montrer, la machinerie 3D n'a pas lieu d'être. */
.flip--none { perspective: none; }
.flip--none .flip__inner { transform-style: flat; }

/* La colonne unique doit pouvoir descendre sous le contenu (minmax(0, 1fr)) :
   sans ça, les commandes et la progression gardent leur largeur intrinsèque
   et débordent du lecteur sur un écran étroit. */
.player { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.player__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* min(…, 100%) : garde un plancher confortable sur grand écran sans forcer le
   lecteur à déborder quand le conteneur est plus étroit que 220px. */
.player__bar { min-width: min(220px, 100%); }
/*
  La piste visuelle reste un filet de 6 px ; la zone cliquable fait 24 px
  de haut (seuil WCAG 2.2 des cibles tactiles, celui que Lighthouse mesure).
*/
.player__progress {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  overflow: visible;
}
.player__progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(26, 26, 26, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 2px rgba(26, 26, 26, 0.14);
}
.player__progress span {
  position: relative;
  display: block;
  height: 6px;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: width 0.3s linear;
}
.player__times { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* Équipe, présentation, Patreon -------------------------------------------- */

.grid--people { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.member__link { display: block; }
.member__link:hover .member__portrait img { transform: scale(1.04); }
.member__link:hover .member__name { color: var(--accent); }

.member__portrait { aspect-ratio: 1; background: var(--surface); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.member__portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease); }
.member__name { font: 400 25px/1.2 var(--serif-classic); margin: 0; }
.member__role { font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin: 6px 0 10px; }

.segments li { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.segments__time { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.segments__title { font-weight: 600; margin: 0; }
.segments__text { color: var(--muted); font-size: 14px; margin: 4px 0 0; }

/*
  Patchwork de pochettes : un tirage aléatoire (voir templates/presentation.php),
  posé en photos éparpillées qui se chevauchent, plutôt qu'en grille — marges
  négatives pour le chevauchement, rotations et tailles fixes qui se répètent
  tous les 6 éléments pour éviter l'alignement trop sage.
*/
.section--patchwork { padding-top: clamp(10px, 2vw, 20px); padding-bottom: clamp(10px, 2vw, 20px); }

.patchwork {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 6px 30px;
}
.patchwork__item {
  width: 120px;
  height: 120px;
  padding: 6px;
  margin: -18px -26px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease);
}
.patchwork__item a { display: block; width: 100%; height: 100%; }
.patchwork__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.patchwork__item:nth-child(6n+1) { transform: rotate(-6deg) translateY(6px); }
.patchwork__item:nth-child(6n+2) { transform: rotate(4deg) translateY(-10px); width: 148px; height: 148px; }
.patchwork__item:nth-child(6n+3) { transform: rotate(-3deg) translateY(-4px); }
.patchwork__item:nth-child(6n+4) { transform: rotate(7deg) translateY(8px); width: 96px; height: 96px; }
.patchwork__item:nth-child(6n+5) { transform: rotate(-8deg) translateY(2px); width: 132px; height: 132px; }
.patchwork__item:nth-child(6n+6) { transform: rotate(5deg) translateY(-8px); }
.patchwork__item:hover { transform: scale(1.06) rotate(0deg); position: relative; z-index: 2; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(245, 243, 240, 0.7);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: clamp(22px, 3vw, 32px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-card); }

.tier--featured {
  background: rgba(26, 26, 26, 0.92);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 20px 44px rgba(26, 26, 26, 0.26);
}
.tier--featured:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 26px 56px rgba(26, 26, 26, 0.32); }
.tier--featured .tier__benefits li { border-color: rgba(255, 255, 255, 0.24); }
.tier__name { font: 400 26px/1.2 var(--serif-classic); margin: 0; }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.tier__price span { font: 400 46px/1 var(--serif-classic); }
.tier__price small { font-size: 13px; color: inherit; opacity: 0.65; }
.tier__benefits { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.tier__benefits li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tier .btn { margin-top: auto; justify-content: center; }

.faq__item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item[open] summary { color: var(--accent); }

/* Panneau d'abonnement et rail social -------------------------------------- */

/*
  Pend du bord gauche du bandeau, comme un onglet de classeur — pas à
  mi-hauteur d'écran, où elle passait inaperçue derrière le reste du
  contenu. La position exacte (top) suit la hauteur du header : sticky,
  donc toujours visible au même endroit une fois la page chargée.
*/
.subscribe-tab { position: fixed; left: 24px; top: 71px; z-index: 25; }
.subscribe-tab button {
  --glass-saturate: 130%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 97%, transparent), color-mix(in srgb, var(--accent-dark) 88%, transparent));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent);
  font: 500 12px/1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  cursor: pointer;
  overflow: hidden;
  transition: padding 0.3s var(--ease), background 0.3s ease, box-shadow 0.3s ease;
}
.subscribe-tab button:hover {
  padding-bottom: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-dark) 96%, transparent), color-mix(in srgb, var(--accent-darker) 88%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 36px color-mix(in srgb, var(--accent) 42%, transparent);
}

.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(26, 26, 26, 0.32);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(420px, 100%);
  padding: clamp(28px, 4vw, 52px);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);

  /*
    Un panneau se lit : son verre est plus dense que celui des éléments
    décoratifs, et son flou plus large pour effacer le texte qu'il recouvre.
  */
  --glass-tint: rgba(255, 255, 255, 0.82);
  --glass-blur: 34px;
  border: 0;
  border-left: 1px solid var(--glass-edge);
  box-shadow: -24px 0 60px rgba(26, 26, 26, 0.16);
}

/* Le reflet longe l'arête gauche, celle que le panneau présente en arrivant. */
.panel::before {
  inset: 0 auto 0 0;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 18%, rgba(255, 255, 255, 0.95) 82%, transparent);
}
.panel::after { display: none; }
.panel.is-open { transform: none; }
.panel__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }
.panel__title { font: 400 30px/1.1 var(--serif-classic); margin: 0 0 28px; }
.panel__label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin: 28px 0 12px; }
.panel__list { list-style: none; padding: 0; margin: 0; }
.panel__list li { border-bottom: 1px solid var(--line); }
.panel__list a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.panel__list-label { display: inline-flex; align-items: center; gap: 10px; }
.panel__socials { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; }
.panel__socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.panel__text { font-size: 14px; color: var(--muted); margin-top: 28px; }

.social-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 12px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  color: #fff;

  /*
    Teinte mesurée, pas choisie à l'œil : à 0,55 le libellé « Suivez-nous »
    tombait à 3,9 sur fond clair, sous le seuil AA de 4,5. À 0,68 il atteint 6,0.
  */
  --glass-tint: rgba(26, 26, 26, 0.68);
  --glass-blur: 22px;
}
.social-rail::before {
  inset: 0 auto 0 0;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
.social-rail__label { writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; opacity: 0.92; }
.social-rail ul { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; }
.social-rail a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.social-rail a:hover { color: var(--accent); }

/* Pied de page ------------------------------------------------------------- */

.site-footer { margin-top: clamp(52px, 7vw, 88px); border-top: 1px solid var(--line); }

/*
  Après un bloc à fond plein, l'écart laisserait une bande claire pour rien.
  Le pied de page étant frère de <main> et non du bloc, la parenté se lit sur le
  conteneur. Les navigateurs sans :has() gardent l'espacement, sans dommage.
*/
main:has(> .subscribe:last-child) + .site-footer,
main:has(> .band:last-child) + .site-footer { margin-top: 0; border-top: 0; }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
}
/* Dans le pied de page, la mention est une ligne de service : pas un titre. */
.site-footer .site-brand { gap: 12px; font: 400 14px/1.5 var(--sans); letter-spacing: 0; color: var(--faint); }
.site-footer .site-brand img { border-radius: 7px; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/*
  Sur sa propre ligne plutôt que dans le flex de .site-footer__inner : logo,
  nav et mention réunis dépassent déjà les 1140px de .site-footer__inner à
  cette largeur de conteneur, quelle que soit la largeur de la fenêtre — les
  faire cohabiter sur une même ligne les fait retomber à la ligne en
  permanence. Alignée à droite pour rester sous la nav plutôt que centrée.
*/
.site-footer__credit {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  text-align: right;
  font: 400 12px/1.5 var(--sans);
  color: var(--faint);
}
.site-footer__credit a { color: inherit; text-decoration: underline; }
.site-footer__credit a:hover { color: var(--accent); }

/* Adaptations -------------------------------------------------------------- */

@media (max-width: 1360px) {
  .social-rail { display: none; }
}

/*
  En dessous de 640px, la languette accrochée au bandeau mordrait sur le
  contenu : on retombe sur une barre pleine largeur au pied de l'écran,
  plus proche des conventions mobiles.
*/
@media (max-width: 640px) {
  .subscribe-tab { left: 0; top: auto; bottom: 0; }
  .subscribe-tab button { border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 12px 18px; }
}

@media (max-width: 900px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__cover { max-width: 320px; }
}

@media (max-width: 860px) {
  .burger { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 18px 40px rgba(26, 26, 26, 0.14);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 15px 0; border-bottom: 1px solid rgba(224, 220, 214, 0.7); }
  .site-nav a:last-child { border-bottom: 0; margin-top: 12px; justify-content: center; }

  .transcript__line, .chapters__seek { grid-template-columns: 1fr; gap: 4px; }
  .transcript__text { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .card:hover { transform: none; }

  /* La vidéo de fond est mise en pause par le script ; l'affiche prend le relais. */
  .band__media { filter: blur(6px); }
}