/*!
Theme Name: wireframe v1.7 tavu
Description: Thème de Tavu (tavu.jaimmme.com), catalogue séries et films adossé au plugin Streamlog. Base wireframe_template v1.7 nettoyée, habillée de la direction artistique Tavu : blanc, noir, filets francs, très gros titres.
Author: quentinrenaux.com
Author URI: https://quentinrenaux.com
Version: 1.7.1
Text Domain: qwt
*/

/* ═══════════════════════════════════════════════════════
   TABLE DES MATIÈRES
   1. TOKENS & VARIABLES
   2. RESET & BASE
   3. LAYOUT - WRAP / GRID
   4. GRILLE OVERLAY (admin)
   5. WIREFRAME DECORATORS
   6. NAVBAR
   7. COVER / HERO BLOCK
   8. MARQUEE BANDEAU
   9. SECTIONS GÉNÉRIQUES
   10. BOUTON WF
   13. FOOTER
   14. FLÈCHE DES CARTES (wf/cards)
   16. UTILITAIRES
   17. RESPONSIVE
   18. TYPOGRAPHIE DE CONTENU  ← paragraphes, citations, liens
   19. LISTES
   20. ARTICLE (single.php)    ← en-tête, colonne de lecture, liés
                                 + blocs Gutenberg encore scopés article
   21. COMMENTAIRES            ← liste + formulaire
   22. ACCUEIL STREAMING       ← page-accueil-streaming.php
   23. ARCHIVES                ← category / tag / archive / author / search
   24. BLOCS GUTENBERG PAR DÉFAUT ← core/*, scope .entry-content
                                    (pages + articles). C'est ICI qu'on
                                    ré-habille un bloc natif WordPress.
   25. PAGE 404                 ← 404.php, scope .wf-404
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   1. TOKENS & VARIABLES
═══════════════════════════════════════════════════════ */
:root {
  --bg:     #ffffff;
  --surf:   #f3f3f3;
  --bd:     #0a0a0a;
  --bds:    #0a0a0a;
  --tx:     #0a0a0a;
  --mt:     #6b6b6b;
  --acc:    #0a0a0a;
  --adk:    #0a0a0a;
  /* Tokens dérivés : recalculés par inc/theme-options.php (wf_design_tokens_css).
     Valeurs de repli ici pour un rendu correct même sans le <style> inline. */
  --ink:         #0a0a0a;   /* noir du thème, fixe : sert aux inversions */
  --paper:       #ffffff;   /* blanc du thème, fixe */
  --on-acc:      #ffffff;   /* texte lisible posé sur l'accent */
  --acc-on-dark: #ffffff;   /* accent lisible sur un fond sombre */
  --wf-section:  var(--wf-space-l, 80px); /* padding vertical natif des blocs */
  --wf-red: rgba(210, 60, 15, 1);
  --sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:   var(--sans);
  --heading: var(--sans);
  --r:      var(--wf-radius, 0px);

  /* Grille */
  --cols:   12;
  --gap:    20px;
  --pad:    40px;
  --max:    1320px;

  /* Navbar */
  --h-navbar: 60px;
}

@media (max-width: 900px)  { :root { --cols: 8;  --gap: 16px; --pad: 24px; } }
@media (max-width: 600px)  { :root { --cols: 4;  --gap: 12px; --pad: 16px; } }

/* ═══════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: var(--wf-base-font-size, 15px);
  line-height: 1.6;

  /* `clip` et NON `hidden`, la différence n'est pas cosmétique.
     Quand un seul axe vaut `hidden`, la spec force l'autre axe de
     `visible` à `auto` : <body> devient alors une zone de défilement.
     Or `position: sticky` s'accroche à la zone de défilement la plus
     proche. Les éléments collants du thème (bandeau défilant, navbar)
     se retrouvaient donc accrochés à un conteneur qui ne défile jamais
     ils ne collaient plus du tout.
     `clip` rogne pareil horizontalement mais ne crée aucune zone de
     défilement : l'axe vertical reste `visible` et sticky refonctionne. */
  overflow-x: clip;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Supprimer le noise overlay (spécifique ancien thème) */
.noise-overlay { display: none !important; }

/* ═══════════════════════════════════════════════════════
   3. LAYOUT - WRAP / GRID
═══════════════════════════════════════════════════════ */
.wrap,
.container {
  max-width: var(--wf-max-width, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

/* Colonnes nommées */
.c-hero-text  { grid-column: 1 / span 7; }
.c-hero-img   { grid-column: 8 / span 5; }
.c-sec-head   { grid-column: 1 / span 8; }
.c-sec-center { grid-column: 3 / span 8; text-align: center; }
.c-feat       { grid-column: span 4; }
.c-split-img  { grid-column: 1 / span 5; }
.c-split-cnt  { grid-column: 7 / span 6; }
.c-stat       { grid-column: span 3; }
.c-testi      { grid-column: span 4; }
.c-price      { grid-column: span 4; }
.c-cta        { grid-column: 3 / span 8; text-align: center; }
.c-fbrand     { grid-column: 1 / span 4; }
.c-fcol1      { grid-column: 6 / span 2; }
.c-fcol2      { grid-column: 8 / span 2; }
.c-fcol3      { grid-column: 10 / span 3; }

@media (max-width: 900px) {
  .c-hero-text  { grid-column: 1 / -1; }
  .c-hero-img   { grid-column: 1 / -1; order: -1; }
  .c-sec-head   { grid-column: 1 / -1; }
  .c-sec-center { grid-column: 1 / -1; }
  .c-feat       { grid-column: span 4; }
  .c-split-img  { grid-column: 1 / span 4; }
  .c-split-cnt  { grid-column: 5 / span 4; }
  .c-stat       { grid-column: span 4; }
  .c-testi      { grid-column: 1 / -1; }
  .c-price      { grid-column: 1 / -1; }
  .c-cta        { grid-column: 1 / -1; }
  .c-fbrand     { grid-column: 1 / -1; }
  .c-fcol1      { grid-column: 1 / span 4; }
  .c-fcol2      { grid-column: 5 / span 4; }
  .c-fcol3      { grid-column: 1 / span 4; }
}

@media (max-width: 600px) {
  .c-feat       { grid-column: 1 / -1; }
  .c-split-img  { grid-column: 1 / -1; }
  .c-split-cnt  { grid-column: 1 / -1; }
  .c-stat       { grid-column: span 2; }
  .c-testi      { grid-column: 1 / -1; }
  .c-price      { grid-column: 1 / -1; }
  .c-cta        { grid-column: 1 / -1; }
  .c-fbrand     { grid-column: 1 / -1; }
  .c-fcol1      { grid-column: 1 / span 2; }
  .c-fcol2      { grid-column: 3 / span 2; }
  .c-fcol3      { grid-column: 1 / -1; }
}

/* Padding helpers */
.pt64 { padding-top: 64px; }
.pb64 { padding-bottom: 64px; }
.py64 { padding-top: 64px; padding-bottom: 64px; }
.pb40 { padding-bottom: 40px; }

/* ═══════════════════════════════════════════════════════
   4. GRILLE OVERLAY (admin uniquement)
   Les règles de l'overlay vivent dans assets/css/wf-tools.css,
   partagées avec la bibliothèque de blocs. Voir inc/wf-page-panel.php.
═══════════════════════════════════════════════════════ */

/* Annotation de section */
.wf-sec {
  position: relative;
  border-top: var(--wf-border-width, 1px) solid var(--bd);
}


/* ═══════════════════════════════════════════════════════
   5. WIREFRAME DECORATORS
═══════════════════════════════════════════════════════ */

/* Label chip */
.wl {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--bg); padding: 4px 10px; border-radius: 2px;
}
.wl::before {
  content: ''; width: 6px; height: 6px;
  border: var(--wf-border-width, 1px) solid var(--bds); border-radius: 50%;
}

/* Badge de dimension */
.dim {
  font: 400 9px/1 var(--mono); color: rgba(210,60,15,.8);
  border: 1px solid rgba(210,60,15,.3);
  padding: 2px 6px; border-radius: 2px;
  background: rgba(210,60,15,.05);
  display: inline-block;
}

/* Annotation */
.ann {
  font: 400 10px/1 var(--mono); color: var(--mt);
  display: flex; align-items: center; gap: 5px;
}
.ann::before { content: ''; width: 12px; height: 1px; background: var(--bd); }

/* ── IMAGE PLACEHOLDER ── */
.wf-img {
  position: relative;
  background: var(--surf);
  border: var(--wf-border-width, 1px) solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}
.wf-img-ratio { padding-top: 62.5%; }
.wf-img svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.wf-img-lbl {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font: 400 10px/1 var(--mono); color: var(--mt);
  background: var(--surf); border: 1px solid var(--bd);
  padding: 2px 8px; border-radius: 2px;
  white-space: nowrap; z-index: 1;
}

/* Block label (apparaît en haut à gauche de chaque bloc) */
.wf-block-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mt); border: 1px solid var(--bd);
  background: var(--surf); padding: 3px 8px;
  border-radius: 0 0 var(--r) 0;
  position: absolute; top: 0; left: 0; z-index: 10;
}

/* ── Mixin badge sombre (réutilisé par les ::before de chaque bloc) ── */
/* usage : appliquer ces valeurs dans chaque block::before */
/* color: #ffffff; background: #0a0a0a; font: 500 9px/1 Inter; */
/* padding: 4px 10px; border-radius: 0 0 4px 0;                     */

/* Zone éditable - pointillés sur les textes modifiables.
   Conditionné à .wf-outline-on : ces repères sont un outil de relecture,
   pas une décoration. Affichés en permanence, ils se superposaient aux
   contours de l'outil « Contours des blocs » et donnaient l'impression
   d'un double encadrement. Le drawer les allume désormais avec le reste. */
.wf-outline-on .wf-editable {
  outline: var(--wf-border-width, 1px) dashed rgba(184, 176, 164, 0.5);
  outline-offset: 5px;
  border-radius: 2px;
  transition: outline-color .2s;
}
.wf-outline-on .wf-editable:hover {
  outline-color: rgba(90, 90, 90, 0.7);
}

/* ═══════════════════════════════════════════════════════
   6. NAVBAR
═══════════════════════════════════════════════════════ */
header.navbar {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: var(--wf-border-width, 1px) solid var(--bd);
  z-index: 200;
  height: var(--h-navbar);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}



/* Conteneur principal de l'en-tête */
.site-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0px;
}

.site-logo {
  max-width: 100px;
  max-height: 26px;
  object-fit: contain;
  width: auto;
  height: auto;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.site-title a {
    text-decoration: none;        
    color: inherit;             
}

.site-title a:hover {
    opacity: 0.8;                
}




.dot { display: none; }

header.navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Menu WordPress */
header.navbar .nav-links {
  display: flex;
  gap: 0;
}

header.navbar .nav-links ul,
header.navbar .nav-links .menu {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 0; padding: 0;
}

header.navbar .nav-links .menu-item a {
  font: 500 14px/1 var(--sans);
  color: var(--mt);
  padding: 4px 12px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  display: block;
}

header.navbar .nav-links .menu-item a:hover,
header.navbar .nav-links .menu-item.current-menu-item a {
  color: var(--tx);
  border-bottom-color: var(--acc);
}

/* Masquer le theme switcher (spécifique à l'ancien site) */
.theme-switcher { display: none !important; }

/* Hamburger mobile */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  border: var(--wf-border-width, 1px) solid var(--bd); border-radius: var(--r);
  background: transparent; cursor: pointer;
}
.burger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--tx); border-radius: 1px;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--h-navbar); left: 0; right: 0; bottom: 0;
  background: var(--bg); border-top: var(--wf-border-width, 1px) solid var(--bd);
  z-index: 199;
  padding: 20px var(--pad);
  overflow-y: auto;
}
.mobile-nav.active { display: block; }
.mobile-nav .menu-item a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  font: 500 15px/1 var(--sans); color: var(--mt);
  border-bottom: 1px solid var(--bd);
  transition: background .15s, color .15s;
}
.mobile-nav .menu-item a:hover { background: var(--surf); color: var(--tx); }

@media (max-width: 900px) {
  header.navbar .nav-links { display: none; }
  .burger { display: flex; }
}

/* ═══════════════════════════════════════════════════════
   7. COVER / HERO BLOCK
═══════════════════════════════════════════════════════ */
.wf-cover {

  min-height: 70vh;

  background: var(--surf);
}

/* Quand il y a un media réel, on laisse le media s'afficher */
.wf-cover-bg-wrap {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

/*.wf-cover-bg-wrap .bg-media {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(1);
}*/

/* Placeholder wireframe quand pas de media */
.wf-cover .wf-cover-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wf-cover .wf-cover-placeholder svg {
  width: 100%; height: 100%;
}

/* Overlay wireframe léger */
/*.wf-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.5);
  z-index: 2;
}*/

/* Contenu */
.wf-cover-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 60px var(--pad);
  width: 100%;
  max-width: var(--max);
}

.wf-cover-content h1 {
  font: 700 clamp(30px, 5vw, 60px)/1.1 var(--sans);
  letter-spacing: -.03em;
  color: var(--tx);
  margin-bottom: 16px;
}

.wf-cover-content .wf-subtitle {
  font: 400 16px/1.7 var(--sans);
  color: var(--mt);
  max-width: 560px;
  margin: 0 auto 20px;
}

.wf-sub-titles-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.wf-sub-item {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 6px 12px;
  border-radius: 2px;
  background: var(--bg);
}


/* L'étiquette « Block · Cover » qui vivait ici a été supprimée.
   Deux raisons, pas une :
     · elle s'affichait en permanence sur le site public, encadrée, alors
       que c'est un repère de construction ;
     · elle occupait .wf-cover::before, le pseudo-élément dont l'outil
       « Contours » a besoin pour poser son étiquette (data-wf-label).
       Les deux se disputaient donc le même emplacement.
   Le nom du bloc vient maintenant d'une source unique : wf_block_label()
   dans inc/wf-block-extras.php, rendu par assets/css/wf-tools.css et
   visible seulement quand on active l'outil. */

/* Bouton son */
.wf-sound-btn {
  position: absolute;
  bottom: 12px; left: var(--pad);
  z-index: 4;
  background: transparent;
  color: var(--bds);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 6px 14px;
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s;
}
.wf-sound-btn:hover { background: var(--surf); }
.wf-sound-btn.is-active { border-color: var(--bds); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   8. MARQUEE BANDEAU
═══════════════════════════════════════════════════════ */
/* ⚠️ RÈGLE MIROIR, à garder identique à blocks/wf-bandeau2/style.css.
   Les deux existent parce que le bandeau a deux origines : index.php écrit
   ce markup à la main, et le bloc wf/bandeau2 le génère. Les feuilles sont
   chargées dans des contextes différents (l'éditeur et le catalogue ne
   voient que celle du bloc), aucune ne peut donc disparaître.

   L'enveloppe ne se voit pas : c'est un rail de positionnement. Tout ce
   qui se voit, fond jaune, filets noirs, hauteur, vit sur
   .wf-marquee-inner.

   Ce qui a été retiré ici et pourquoi :
     · border-top / border-bottom : dessinés aux bords de la boîte
       rembourrée, donc 40px au-dessus et en dessous du bandeau. Deux
       traits perdus dans le vide, alors que le bandeau a déjà les siens.
     · padding: 40px 0 + margin: -40px 0 : le padding décalait le bandeau
       de 40px sous son point d'ancrage, une fois collé il flottait à
       100px du haut au lieu de se poser contre la navbar. La marge
       négative l'annulait dans le flux, donc aucun espace n'était même
       réservé.
     · overflow: clip → overflow-x: clip : sur les deux axes, il rognait
       le bandeau pivoté au survol (c'est ce que les 40px compensaient).
       Sur le seul axe X, il contient toujours les 100px de débordement
       latéral de .wf-marquee-inner, mais laisse la rotation respirer. */
.wf-marquee-outer.sticky-bandeau {
  position: sticky;
  top: var(--h-navbar, 60px);
  left: 0;
  z-index: 190;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: clip;
  pointer-events: none;
}

.wf-marquee-inner {
  background: var(--acc);
  display: flex;
  align-items: center;
  height: 44px;
  width: calc(100% + 100px);
  margin-left: -50px;
  overflow: clip;
  pointer-events: all;
  border-top: 2px solid var(--adk);
  border-bottom: 2px solid var(--adk);
  transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

.wf-marquee-outer.sticky-bandeau:hover .wf-marquee-inner {
  transform: rotate(-2deg) scale(1.02);
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  animation: scrollLinear 20s linear infinite;
}

@keyframes scrollLinear {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wf-marquee-outer .item {
  font: 700 1.4rem/1 var(--sans);
  text-transform: uppercase;
  color: var(--on-acc); /* le bandeau est un aplat d'accent : texte pris dans la même paire */
  padding: 0 15px;
  display: inline-block;
  letter-spacing: -.01em;
}

.wf-marquee-outer .sep {
  font-weight: 900;
  font-size: 1rem;
  color: var(--on-acc);
  opacity: .5;
}

.wf-marquee-outer .highlight {
  background: var(--on-acc);
  color: var(--acc);
  padding: 2px 15px;
  margin: 0 10px;
}

.wf-marquee-outer .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--on-acc);
}

/* ═══════════════════════════════════════════════════════
   9. SECTIONS GÉNÉRIQUES
═══════════════════════════════════════════════════════ */
.section-border-top {
  border-top: var(--wf-border-width, 1px) solid var(--bd);
  padding-top: 12px;
  margin-bottom: 8px;
}

.section-header {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--mt);
  margin-bottom: 6px;
}

.subtitle {
  font: 400 13px/1.6 var(--sans);
  color: var(--mt);
}

/* En-têtes de section */
.sec-hd { display: flex; flex-direction: column; gap: 10px; }
.sec-hd h2 {
  font: 700 clamp(22px,3vw,40px)/1.2 var(--sans);
  letter-spacing: -.025em; margin-top: 6px;
}
.sec-hd p { color: var(--mt); font-size: 15px; line-height: 1.7; }

/* Boutons génériques */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px;
  border: var(--wf-border-width, 1px) solid var(--bds); background: transparent; color: var(--tx);
  font: 500 14px/1 var(--sans); cursor: pointer; border-radius: var(--r);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surf); }
.btn-fill  { background: var(--tx); color: var(--bg); }
.btn-fill:hover { background: var(--bds); }
.btn-acc   { background: var(--acc); color: var(--on-acc); border-color: var(--acc); font-weight: 600; }
.btn-acc:hover { background: transparent; color: var(--tx); border-color: var(--tx); }
.btn-ghost { border-color: var(--bd); color: var(--mt); }
.btn-ghost:hover { border-color: var(--bds); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   10. BOUTON WF (partagé par wf/split et wf/cta)
═══════════════════════════════════════════════════════ */
.wf-btn,
.wf-btn-brutal {
  /* Bouton unique du thème. Les blocs le pilotent par variables :
       --btn-fg  couleur du texte et du cadre   (défaut : --tx)
       --btn-bg  fond au repos                  (défaut : transparent)
       --btn-hover-fg  texte au survol          (défaut : --bg)
     Au survol le bouton s'inverse : fond = --btn-fg. Aucune couleur
     n'est posée en style inline, sinon le survol ne peut plus gagner. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 26px;
  border: var(--wf-border-width, 1px) solid var(--btn-fg, var(--tx));
  border-radius: var(--r);
  background: var(--btn-bg, transparent);
  color: var(--btn-fg, var(--tx));
  font: 700 13px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wf-btn:hover,
.wf-btn-brutal:hover,
.wf-btn:focus-visible,
.wf-btn-brutal:focus-visible {
  background: var(--btn-fg, var(--tx));
  border-color: var(--btn-fg, var(--tx));
  color: var(--btn-hover-fg, var(--bg));
}
.wf-btn--solid {
  --btn-bg: var(--tx);
  color: var(--bg);
}
.wf-btn--solid:hover {
  background: transparent;
  color: var(--tx);
}

/* ═══════════════════════════════════════════════════════
   13. FOOTER
═══════════════════════════════════════════════════════ */
footer.footer-brut {
  border-top: var(--wf-border-width, 1px) solid var(--bd);
  padding: 48px 0 28px;
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.f-col h3 {
  font: 600 15px/1 var(--footer-sans, var(--sans));
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--tx);
}

.f-col h4 {
  font: 400 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mt);
  margin-bottom: 14px;
}

.f-col p {
  font: 400 var(--footer-body, 13px)/1.7 var(--footer-sans, var(--sans));
  color: var(--mt);
  max-width: 280px;
  margin-bottom: 16px;
}

/* Social links */
.social-footer {
  font: 400 11px/1 var(--mono);
  color: var(--mt);
  margin-top: 12px;
}

.social-footer .social-icons,
.social-footer .social-menu,
.social-footer ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 8px;
  padding: 0;
}

.social-footer a,
.social-footer .menu-item a {
  font: 400 10px/1 var(--mono);
  color: var(--footer-lnk, var(--mt));
  border: 1px solid var(--footer-lnk, var(--bd));
  border-radius: 20px;
  padding: 3px 9px;
  transition: border-color .15s, color .15s;
  display: block;
}
.social-footer a:hover,
.social-footer .menu-item a:hover { border-color: var(--footer-lnk, var(--bds)); color: var(--footer-lnk, var(--tx)); opacity: .8; }

/* Menu footer liens */
.links-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0; margin: 0;
}
.links-menu li a {
  font: 400 var(--footer-body, 13px)/1 var(--footer-sans, var(--sans));
  color: var(--footer-lnk, var(--mt));
  transition: color .15s;
}
.links-menu li a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }

/* Bloc d'aide admin (footer · uniquement visible aux admins connectés) */
.wf-admin-hint {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--footer-bd, var(--bd));
  border-radius: 4px;
  background: rgba(255, 255, 255, .04);
  font: 400 11px/1.5 var(--mono, monospace);
  color: var(--footer-mt, var(--mt));
  opacity: .85;
}
.wf-admin-hint strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  opacity: .8;
}
.wf-admin-hint a {
  color: var(--footer-lnk, var(--tx));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wf-admin-hint a:hover { opacity: .7; }

/* Colonne privatisation */
.f-col.privat p {
  font-size: var(--footer-body, 13px);
  font-family: var(--footer-sans, var(--sans));
  color: var(--mt);
  line-height: 1.6;
  max-width: 100%;
}

.btn-privat {
  display: inline-block;
  padding: 10px 18px;
  border: var(--wf-border-width, 1px) solid var(--footer-btn, var(--bds));
  color: var(--footer-btn, var(--tx));
  font: 500 var(--footer-body, 13px)/1 var(--footer-sans, var(--sans));
  border-radius: var(--r);
  transition: background .15s, opacity .15s;
  margin-top: 4px;
}
.btn-privat:hover { background: var(--surf); opacity: .8; }

/* Ligne copyright */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}

.footer-bottom span,
.footer-bottom .footer-credits span {
  font: 400 11px/1.6 var(--mono);
  color: var(--mt);
}

.footer-bottom a { color: var(--footer-lnk, var(--mt)); }
.footer-bottom a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   14. FLÈCHE DES CARTES (wf/cards)
═══════════════════════════════════════════════════════ */
.wf-card-arrow {
  font-size: 12px;
  color: var(--mt);
}

/* ═══════════════════════════════════════════════════════
   16. UTILITAIRES
═══════════════════════════════════════════════════════ */

/* Masquer éléments internes à l'ancien thème */
.sansplombtest { display: none !important; }

/* Styles login page */
.login #login {
  background: var(--bg);
}

/* Edit button (template part) */
.wf-edit-btn a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 var(--mono);
  color: var(--mt);
  border: 1px solid var(--bd);
  padding: 5px 10px;
  border-radius: var(--r);
  background: var(--bg);
  transition: border-color .15s, color .15s;
}
.wf-edit-btn a:hover { border-color: var(--bds); color: var(--tx); }

/* Pagination */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.pagination {
  list-style: none;
  display: flex;
  gap: 4px;
}
.pagination a,
.pagination .current {
  display: block;
  padding: 7px 12px;
  border: var(--wf-border-width, 1px) solid var(--bd);
  border-radius: var(--r);
  font: 400 13px/1 var(--sans);
  color: var(--mt);
  transition: border-color .15s, color .15s;
}
.pagination a:hover { border-color: var(--bds); color: var(--tx); }
.pagination .current { border-color: var(--bds); color: var(--tx); background: var(--surf); }

/* ═══════════════════════════════════════════════════════
   17. RESPONSIVE

   Le thème était pensé desktop d'abord : le mobile se contentait
   d'empiler les colonnes. Cette section reprend les points où
   l'empilement seul ne suffit pas, cibles tactiles trop petites,
   texte qui déborde, éléments collants qui mangent l'écran.

   Repères utilisés :
     ≤ 900px → tablette / grand mobile : la navigation bascule
     ≤ 768px → mobile : les grilles s'effondrent
     ≤ 600px → petit mobile : la typo et les chromes se resserrent
═══════════════════════════════════════════════════════ */

/* ── Confort tactile, tous mobiles ──────────────────────
   iOS zoome sur tout champ dont la police descend sous 16px, et
   recentre la page au blur : la saisie devient pénible. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px; }

  /* 44px : plancher recommandé pour une cible tactile. Les liens de
     menu, boutons et pastilles du thème descendaient à 28-32px. */
  .btn,
  .wf-btn-brutal,
  .mobile-nav .menu-item a,
  .pagination a,
  .pagination .current { min-height: 44px; }

  .btn,
  .wf-btn-brutal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Le survol ne veut rien dire au doigt : on neutralise les états
     qui restaient « collés » après un tap. */
  .wf-card:hover,
  .wf-feature-item:hover { background: transparent; }
}

@media (max-width: 900px) {
  /* Navbar : le titre du site poussait le burger hors du cadre
     quand le nom est long. */
  .site-title { font-size: 1.15rem; }
  .site-title a {
    display: block;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Le drawer prenait toute la hauteur sous une navbar en position
     sticky : sur un écran court, le dernier lien tombait sous le pli
     sans indice de défilement. */
  .mobile-nav {
    padding: 12px var(--pad) 40px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mobile-nav .menu-item a { font-size: 16px; padding: 15px 4px; }
  .mobile-nav .menu-item:last-child a { border-bottom: none; }
}

@media (max-width: 768px) {
  header.navbar { padding: 0 var(--pad); }

  /* Les helpers en dur cassaient le rythme fluide des blocs :
     64px de padding fixe à côté d'un bloc en clamp(). */
  .pt64 { padding-top:    var(--wf-space-m); }
  .pb64 { padding-bottom: var(--wf-space-m); }
  .py64 { padding-top:    var(--wf-space-m); padding-bottom: var(--wf-space-m); }
  .pb40 { padding-bottom: var(--wf-space-s); }

  /* Un tableau ne s'empile pas : on lui donne son propre défilement
     plutôt que de laisser la page entière partir en travers.
     Le défilement est porté par la <figure>, pas par la <table> :
     `display: block` sur une table casserait sa mise en page (et donc
     le cadre arrondi de la section 24). */
  .wp-block-table { overflow-x: auto; max-width: 100%; }

  /* Filet de sécurité : un tableau hors bloc Gutenberg (éditeur
     classique, contenu importé) n'a pas de <figure> pour l'envelopper. */
  .wf-article table:not(.wp-block-table table) { display: block; overflow-x: auto; max-width: 100%; }

  /* Idem pour le code et les mots longs (URL, noms de fichiers). */
  .wf-article pre { overflow-x: auto; }
  .wf-article p,
  .wf-article li,
  .wf-article h1, .wf-article h2, .wf-article h3 { overflow-wrap: break-word; }
}

@media (max-width: 600px) {
  /* La navbar mange 60px de haut sur un écran de 640px de haut. */
  :root { --h-navbar: 54px; }

  .site-logo { max-height: 22px; }

  /* Les pastilles mono passaient en dessous du seuil de lisibilité
     à force d'interlettrage : moins d'espacement, taille tenue. */
  .wl, .dim, .wf-img-lbl, .wf-block-label { letter-spacing: .06em; }
}




/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF - ÉCHELLE D'ESPACEMENT

   Source de vérité partagée avec :
     · inc/wf-block-extras.php        → wf_spacing_scale()  (libellés)
     · admin-editor.css               → mêmes variables     (éditeur)
     · assets/js/wf-block-controls.js → PAD_PX / MAR_PX     (panneau)

   Deux principes :

   1. FLUIDE. Chaque palier est un clamp() : la borne basse sert le
      mobile, la borne haute le desktop, et la pente en vw fait le
      trajet. Un bloc en padding L ne colle plus 120px de vide en haut
      d'un écran de 390px de large.

   2. COMPACT. L'ancienne échelle (40 / 80 / 120 / 180) empilait
      160px entre deux blocs consécutifs en réglage par défaut, et la
      page se lisait comme une suite de sections flottantes sans
      rythme. Les paliers desktop sont ramenés à 24 / 48 / 80 / 120 :
      le défaut « M » vaut désormais 48px, soit deux fois moins.

   Les deux variables --wf-pad-top / --wf-pad-bottom sont posées en
   même temps que le padding : elles servent à l'outil « Espacements »
   du drawer (assets/css/wf-tools.css) pour dessiner les bandes au bon
   endroit, sans mesure JS.
   ═══════════════════════════════════════════════════════ */
:root {
  --wf-space-s:  clamp(16px, 2.5vw,  24px);
  --wf-space-m:  clamp(28px, 4.5vw,  48px);
  --wf-space-l:  clamp(40px, 6.5vw,  80px);
  --wf-space-xl: clamp(56px, 9vw,   120px);

  /* Marges extérieures : volontairement plus serrées que les paddings.
     Une marge s'ajoute au padding des deux blocs qu'elle sépare ; à
     valeur égale, l'écart réel doublait. */
  --wf-gap-s:  clamp( 8px, 1.5vw, 12px);
  --wf-gap-m:  clamp(16px,   3vw, 24px);
  --wf-gap-l:  clamp(28px,   5vw, 48px);
  --wf-gap-xl: clamp(40px,   7vw, 80px);
}

/* Padding vertical des blocs, contrôlé via wfPadding (panneau ↕ Espacement).
   Ces classes ne sont posées QUE si l'auteur a choisi une valeur : « auto »
   n'en pose aucune et laisse le bloc appliquer son padding natif. Le
   !important est donc légitime, quand la classe est là, c'est une décision
   explicite qui doit battre la feuille de style du bloc, dont l'ordre de
   chargement n'est pas garanti. */
.wf-pad-0 {
  --wf-pad-top: 0px; --wf-pad-bottom: 0px;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.wf-pad-s {
  --wf-pad-top: var(--wf-space-s); --wf-pad-bottom: var(--wf-space-s);
  padding-top: var(--wf-space-s) !important; padding-bottom: var(--wf-space-s) !important;
}
.wf-pad-m {
  --wf-pad-top: var(--wf-space-m); --wf-pad-bottom: var(--wf-space-m);
  padding-top: var(--wf-space-m) !important; padding-bottom: var(--wf-space-m) !important;
}
.wf-pad-l {
  --wf-pad-top: var(--wf-space-l); --wf-pad-bottom: var(--wf-space-l);
  padding-top: var(--wf-space-l) !important; padding-bottom: var(--wf-space-l) !important;
}
.wf-pad-xl {
  --wf-pad-top: var(--wf-space-xl); --wf-pad-bottom: var(--wf-space-xl);
  padding-top: var(--wf-space-xl) !important; padding-bottom: var(--wf-space-xl) !important;
}

/* Marges extérieures des blocs, contrôlées via wfMarginTop / wfMarginBottom.
   Chaque classe expose aussi sa valeur en variable : l'outil « Espacements »
   du drawer s'en sert pour dessiner les bandes de marge À L'EXTÉRIEUR du
   bloc, là où le padding se dessine à l'intérieur. */
.wf-mt-s  { --wf-mt: var(--wf-gap-s);  margin-top: var(--wf-gap-s)  !important; }
.wf-mt-m  { --wf-mt: var(--wf-gap-m);  margin-top: var(--wf-gap-m)  !important; }
.wf-mt-l  { --wf-mt: var(--wf-gap-l);  margin-top: var(--wf-gap-l)  !important; }
.wf-mt-xl { --wf-mt: var(--wf-gap-xl); margin-top: var(--wf-gap-xl) !important; }

.wf-mb-s  { --wf-mb: var(--wf-gap-s);  margin-bottom: var(--wf-gap-s)  !important; }
.wf-mb-m  { --wf-mb: var(--wf-gap-m);  margin-bottom: var(--wf-gap-m)  !important; }
.wf-mb-l  { --wf-mb: var(--wf-gap-l);  margin-bottom: var(--wf-gap-l)  !important; }
.wf-mb-xl { --wf-mb: var(--wf-gap-xl); margin-bottom: var(--wf-gap-xl) !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF - séparateurs de blocs
   Contrôlés via wfDividerTop / wfDividerBottom
   ═══════════════════════════════════════════════════════ */
.wf-divider-top    { border-top:    var(--wf-border-width, 1px) solid var(--bd) !important; }
.wf-divider-bottom { border-bottom: var(--wf-border-width, 1px) solid var(--bd) !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF - arrondi des blocs
   Contrôlé via wfRadius dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-radius-s { border-radius:  4px !important; overflow: hidden !important; }
.wf-radius-m { border-radius:  8px !important; overflow: hidden !important; }
.wf-radius-l { border-radius: 16px !important; overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF - largeur max du contenu
   Contrôlé via wfMaxWidth dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-width-narrow > * { max-width: 760px  !important; margin-left: auto !important; margin-right: auto !important; }
.wf-width-full       { max-width: none   !important; padding-left: 0  !important; padding-right: 0 !important; }

/* ═══════════════════════════════════════════════════════
   UTILITAIRES WF - presets couleur de fond des blocs
   Contrôlés via wfBgColor dans le panneau 🎨 Apparence
   ═══════════════════════════════════════════════════════ */
.wf-bg-bg      { background-color: var(--bg)   !important; }
.wf-bg-surface { background-color: var(--surf) !important; }

/* Fond sombre et fond accent : on n'écrit pas « texte blanc » bloc par
   bloc, on REDÉFINIT les tokens pour tout ce qui est dedans. Chaque bloc
   continue d'utiliser var(--tx), var(--bd)… et devient lisible tout seul,
   boutons et cartes compris. --ink et --paper ne bougent jamais : ce sont
   eux qui rendent l'inversion possible sans référence circulaire. */
.wf-bg-dark,
.wf-inverse {
    --bg:   var(--ink);
    --tx:   var(--paper);
    --surf: color-mix(in srgb, var(--paper) 7%, var(--ink));
    --mt:   color-mix(in srgb, var(--paper) 62%, var(--ink));
    --bd:   color-mix(in srgb, var(--paper) 28%, var(--ink));
    --bds:  var(--paper);
    --acc:  var(--acc-on-dark);
    --on-acc: var(--ink);
    background-color: var(--ink) !important;
    color: var(--tx);
}
.wf-bg-accent {
    --bg:   var(--acc);
    --tx:   var(--on-acc);
    --mt:   color-mix(in srgb, var(--on-acc) 70%, var(--acc));
    --bd:   var(--on-acc);
    --bds:  var(--on-acc);
    --surf: color-mix(in srgb, var(--on-acc) 8%, var(--acc));
    background-color: var(--acc) !important;
    color: var(--tx);
}





/* --------- cartes génériques (.wf-card) ------------ */
.wf-card {
    border: var(--wf-border-width, 1px) solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    overflow: hidden;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wf-card:hover {
    background: var(--surf);
    border-color: var(--bds);
}
.wf-card .wf-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--bd);
}
.wf-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-card-title {
    font: 600 14px/1.3 var(--sans);
    color: var(--tx);
    margin: 0;
}
.wf-card-excerpt {
    font: 400 12px/1.5 var(--sans);
    color: var(--mt);
    margin: 0;
    flex: 1;
}
.wf-card .ann {
    font-size: 10px;
    margin: 4px 0;
}
.wf-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Style pour le Main Link Button dans les vignettes */
.wf-main-link-button {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
    font-weight: 600;
    border-radius: var(--r);
    padding: 10px;
    transition: all .2s;
}

/* ═══════════════════════════════════════════════════════════════
   18. TYPOGRAPHIE DE CONTENU
   Paragraphes, citations, emphases, liens, séparateurs.

   ── OÙ MODIFIER ──
   Tout se règle depuis le bloc « RÉGLAGES » ci-dessous : change une
   variable, l'effet se propage partout. Ne touche aux règles qui
   suivent que si tu veux changer la structure (ex. passer la barre
   de citation à droite plutôt qu'à gauche).

   ── PORTÉE ──
   Un seul sélecteur de scope, répété sur chaque règle :
     :where(.entry-content, [class*="wp-block-wf-"])
       .entry-content          → le contenu de page.php (the_content)
       [class*="wp-block-wf-"] → l'intérieur des blocs wf/*
   Le footer, les menus et la navbar ne sont donc jamais touchés.
   Pour couvrir un nouveau conteneur, ajoute sa classe dans les
   parenthèses du :where(), sur chaque règle.

   ── POURQUOI :where() ──
   :where() ne compte pas dans la spécificité. Ces règles pèsent donc
   le strict minimum et TOUTE règle de bloc existante les écrase
   automatiquement : .wf-card-text, .wf-feature-text, .wf-cta-subtitle,
   .wf-split-description, .wf-accordion-answer p… gardent leur mise en
   forme. Ce sont des valeurs par défaut, pas des règles autoritaires.
   Corollaire : pour surcharger un point précis, une simple classe
   suffit, inutile de sortir !important.

   ── NOTE : les titres ne sont pas ici ──
   h1-h6 restent gérés par le bloc wf/titre et par les règles
   contextuelles (.wf-cover-content h1 l.507, .sec-hd h2 l.676).
   Si tu veux une échelle de titres générique, ajoute-la ICI, en
   :where() elle aussi, pour ne pas les écraser.
════════════════════════════════════════════════════════════════ */

/* ── RÉGLAGES ── */
:root {
    /* Paragraphe */
    --wf-p-leading:       1.7;      /* interlignage */
    --wf-p-space:         1em;      /* espace sous chaque paragraphe */
    --wf-measure:         none;     /* largeur de lecture max, ex. 68ch */

    /* Citation */
    --wf-quote-size:      1.2em;    /* taille du texte cité */
    --wf-quote-space:     1.8em;    /* marge au-dessus / en dessous */
    --wf-quote-pad:       22px;     /* retrait depuis la barre */
    --wf-quote-bar:       2px;      /* épaisseur de la barre */
    --wf-quote-bar-color: var(--bd);
}

/* ───────────────────────────────────────────────
   Paragraphe
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) p {
    line-height: var(--wf-p-leading);
    margin: 0 0 var(--wf-p-space);
    max-width: var(--wf-measure);
}

/* Dernier paragraphe d'un conteneur : pas d'espace résiduel */
:where(.entry-content, [class*="wp-block-wf-"]) p:last-child {
    margin-bottom: 0;
}

/* ───────────────────────────────────────────────
   Emphases
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) strong {
    font-weight: 600;
    color: var(--tx);
}

:where(.entry-content, [class*="wp-block-wf-"]) em {
    font-style: italic;
}

/* Surlignage - reprend le jaune accent du wireframe */
:where(.entry-content, [class*="wp-block-wf-"]) mark {
    background: var(--acc);
    color: var(--on-acc);
    padding: .1em .3em;
    border-radius: 2px;
}

/* Code inline */
:where(.entry-content, [class*="wp-block-wf-"]) code {
    font: 400 .88em/1.4 var(--mono);
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 2px;
    padding: .12em .38em;
}

:where(.entry-content, [class*="wp-block-wf-"]) small {
    font-size: .82em;
    color: var(--mt);
}

/* ───────────────────────────────────────────────
   Lien dans le texte
   Les boutons (.btn) et les liens de menu/footer
   ne sont pas concernés.
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) a:not(.btn) {
    color: inherit;
    border-bottom: 1px solid var(--bd);
    transition: border-color .2s, color .2s;
}

:where(.entry-content, [class*="wp-block-wf-"]) a:not(.btn):hover {
    color: var(--wf-red);
    border-bottom-color: var(--wf-red);
}

/* ───────────────────────────────────────────────
   Citation - blockquote / core/quote
   Markup Gutenberg :
   <blockquote class="wp-block-quote"><p>…</p><cite>…</cite></blockquote>
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) blockquote {
    margin: var(--wf-quote-space) 0;
    padding: 2px 0 2px var(--wf-quote-pad);
    border-left: var(--wf-quote-bar) solid var(--wf-quote-bar-color);
    color: var(--tx);
}

:where(.entry-content, [class*="wp-block-wf-"]) blockquote p {
    font-size: var(--wf-quote-size);
    line-height: 1.45;
    margin-bottom: .5em;
    max-width: none;
}

:where(.entry-content, [class*="wp-block-wf-"]) blockquote p:last-of-type {
    margin-bottom: 0;
}

/* Attribution - en mono majuscules, comme les labels wireframe */
:where(.entry-content, [class*="wp-block-wf-"]) blockquote cite {
    display: block;
    margin-top: .9em;
    font: 400 11px/1.4 var(--mono);
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

:where(.entry-content, [class*="wp-block-wf-"]) blockquote cite::before {
    content: '- ';
}

/* Variante « Simple » de Gutenberg : sans barre */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-quote.is-style-plain {
    border-left: 0;
    padding-left: 0;
}

/* Variante « Grande » de Gutenberg */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-quote.is-style-large p {
    font-size: calc(var(--wf-quote-size) * 1.35);
    line-height: 1.35;
}

/* ───────────────────────────────────────────────
   Citation mise en avant - core/pullquote
   Centrée, encadrée haut et bas
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-pullquote {
    margin: calc(var(--wf-quote-space) * 1.4) 0;
    padding: 1.6em 0;
    border-top:    var(--wf-quote-bar) solid var(--wf-quote-bar-color);
    border-bottom: var(--wf-quote-bar) solid var(--wf-quote-bar-color);
    text-align: center;
}

:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-pullquote p {
    font-size: calc(var(--wf-quote-size) * 1.3);
    line-height: 1.35;
    max-width: none;
}

/* ───────────────────────────────────────────────
   Séparateur - hr / core/separator
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) hr {
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--bd);
}

/* Variante « Ligne large » de Gutenberg */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-separator.is-style-wide {
    border-top-width: 2px;
}

/* ───────────────────────────────────────────────
   Responsive - citations un peu plus compactes
─────────────────────────────────────────────── */
@media (max-width: 600px) {
    :root {
        --wf-quote-size:  1.1em;
        --wf-quote-space: 1.4em;
        --wf-quote-pad:   16px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   19. LISTES - blocs WF uniquement
   Sélecteur : [class*="wp-block-wf-"] cible tous les blocs wf/*
   sans toucher au footer, menus, ou autres zones du thème.
════════════════════════════════════════════════════════════════ */

[class*="wp-block-wf-"] ul,
[class*="wp-block-wf-"] ol {
    list-style: none;
    margin:  0 0 1em 0;
    padding: 0;
}

/* ── Liste non ordonnée ── */
[class*="wp-block-wf-"] ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: .45em;
    line-height: 1.6;
}

[class*="wp-block-wf-"] ul li::before {
    content: '';
    position: absolute;
    left:  1px;
    top:   .59em;           /* alignement vertical avec la première ligne */
    width:  6px;
    height: 6px;
    border-radius: 10px;     /* carré légèrement arrondi */
    background: currentColor; /* hérite de la couleur du li, quelle qu'elle soit */
}

/* ── Liste ordonnée - compteur ── */
[class*="wp-block-wf-"] ol {
    counter-reset: wf-list;
}

[class*="wp-block-wf-"] ol li {
    position: relative;
    padding-left: 2em;
    margin-bottom: .45em;
    line-height: 1.6;
    counter-increment: wf-list;
}

[class*="wp-block-wf-"] ol li::before {
    content: counter(wf-list);
    position: absolute;
    left: 0;
    top:  0;
    width:    1.4em;
    font: 600 .75em/1.8 var(--mono, monospace);
    letter-spacing: .02em;
    text-align: center;
    color:      currentColor; /* hérite de la couleur du li */
    background: transparent;
}

/* ── Listes imbriquées ── */
[class*="wp-block-wf-"] ul ul,
[class*="wp-block-wf-"] ol ul {
    margin-top: .35em;
    margin-bottom: 0;
}

[class*="wp-block-wf-"] ul ul li::before {
    width:  4px;
    height: 4px;
    background: var(--mt, #6b6b6b); /* puce secondaire plus discrète */
}


/* ═══════════════════════════════════════════════════════════════
   20. ARTICLE (single.php)
   En-tête, colonne de lecture, rythme vertical, tableaux, figures,
   pied d'article et articles liés.

   ── OÙ MODIFIER ──
   Tout se règle depuis le bloc « RÉGLAGES » ci-dessous. Change une
   variable, l'effet se propage sur toute la page article.

   ── PORTÉE ──
   Scope unique : .wf-article, posé par single.php sur <main>.
   Les pages (page.php), l'accueil, le footer et les blocs wf/* ne
   sont JAMAIS touchés par cette section.
   Le conteneur de contenu porte aussi .entry-content : l'article
   hérite donc gratuitement de la section 18 (paragraphes, citations,
   liens, emphases, séparateurs). Ici on ajoute seulement ce que la
   section 18 ne couvre pas : mise en page, titres, listes, tableaux,
   figures.

   ── CONTRAT DE LARGEUR ──
   Les enfants DIRECTS de .wf-article-content sont contraints :

     (défaut)      → --wf-art-measure   colonne de lecture, centrée
     .alignwide    → --wf-art-wide      images, tableaux, blocs larges
     .alignfull    → bord à bord        covers, bandeaux pleine largeur

   Ces deux classes sont posées par Gutenberg quand on choisit
   « Large » ou « Pleine largeur » dans la barre d'outils du bloc.
   Le conteneur n'a volontairement PAS de max-width : ce sont les
   enfants qui se contraignent, sinon .alignfull ne pourrait pas
   s'échapper.

   ── NOTE : le reset ──
   Le reset (l. 66) applique margin: 0 à tout. C'est pourquoi le
   rythme vertical est reconstruit ici à la main, via `> * + *`.
════════════════════════════════════════════════════════════════ */

/* ── RÉGLAGES ── */
.wf-article {
    /* Largeurs */
    --wf-art-measure:  680px;   /* colonne de lecture (~78 signes) */
    --wf-art-wide:    1080px;   /* blocs « Large » */

    /* Texte */
    --wf-art-size:      17px;   /* taille de base du corps d'article */

    /* Rythme vertical entre blocs */
    --wf-art-flow:      28px;   /* espace par défaut */
    --wf-art-flow-md:   44px;   /* avant un h3 */
    --wf-art-flow-lg:   68px;   /* avant un h2 (nouvelle section) */

    /* Respiration de la page */
    --wf-art-top:       72px;   /* au-dessus de l'en-tête */
    --wf-art-bottom:   120px;   /* sous le dernier bloc */
}

@media (max-width: 600px) {
    .wf-article {
        --wf-art-size:    16px;
        --wf-art-flow:    22px;
        --wf-art-flow-md: 34px;
        --wf-art-flow-lg: 48px;
        --wf-art-top:     40px;
        --wf-art-bottom:  72px;
    }
}

.wf-article {
    padding-bottom: var(--wf-art-bottom);
}

/* ───────────────────────────────────────────────
   En-tête d'article
─────────────────────────────────────────────── */
/* ── Mode TEXTE (pas d'image mise en avant) ──
   L'en-tête reste sur le fond kraft, dans la colonne de lecture. */
.wf-article-head--plain .wf-article-head-inner {
    max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
    margin: 0 auto;
    padding: var(--wf-art-top) var(--pad) 0;
}

/* Catégorie - chip mono, langage des labels wireframe */
.wf-article-cat {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--bds);
    border-radius: var(--r);
    font: 500 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx);
    transition: background .2s, color .2s;
}

.wf-article-cat:hover {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
}

.wf-article-title {
    margin-top: 26px;
    font-size: clamp(2rem, 1.25rem + 3.4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* Chapô - reprend l'extrait manuel de l'article */
.wf-article-lead {
    margin-top: 22px;
    font-size: 1.24rem;
    line-height: 1.5;
    color: var(--mt);
    text-wrap: pretty;
}

/* Ligne de méta - date · auteur · temps de lecture */
.wf-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    padding-top: 15px;
    border-top: 1px solid var(--bd);
    font: 400 11px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-article-meta-sep {
    opacity: .5;
}

/* ───────────────────────────────────────────────
   HERO SUPERPOSÉ (image mise en avant présente)

   Cover et titre ne forment qu'un bloc : l'image occupe
   toute la largeur sous la navbar, le titre est posé
   dessus, sous un voile dégradé qui garantit le contraste
   quelle que soit la photo.

   Hauteur bornée par clamp() : jamais moins de 400px
   (sinon le titre étouffe), jamais plus de 660px ni de
   62vh (sinon le hero mange tout l'écran).
─────────────────────────────────────────────── */
.wf-article-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(400px, 62vh, 660px);
    overflow: hidden;
    background: var(--adk);   /* repli tant que l'image charge */
}

.wf-article-hero-media {
    position: absolute;
    inset: 0;
}

.wf-article-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voile dégradé : dense en bas où vit le texte, transparent en haut
   pour ne pas écraser l'image. */
.wf-article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12, 10, 8, .90) 0%,
        rgba(12, 10, 8, .62) 34%,
        rgba(12, 10, 8, .20) 66%,
        rgba(12, 10, 8, .04) 100%
    );
}

/* Titre masqué : le hero se réduit à une image de tête. Moins haut,
   voile plus léger, il ne porte plus qu'une puce et une ligne de méta. */
.wf-article-hero--bare {
    min-height: clamp(280px, 42vh, 440px);
}

.wf-article-hero--bare::after {
    background: linear-gradient(
        to top,
        rgba(12, 10, 8, .78) 0%,
        rgba(12, 10, 8, .34) 42%,
        rgba(12, 10, 8, .02) 82%
    );
}

.wf-article-hero .wf-article-head-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--wf-art-wide) + var(--pad) * 2);
    margin: 0 auto;
    padding: 0 var(--pad) 52px;
    color: #fff;
}

/* ── Inversions clair-sur-sombre ── */
.wf-article-hero .wf-article-cat {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(0, 0, 0, .28);
    color: #fff;
}

.wf-article-hero .wf-article-cat:hover {
    background: var(--acc-on-dark);
    border-color: var(--acc-on-dark);
    color: var(--ink);
}

.wf-article-hero .wf-article-title {
    max-width: 880px;
    color: #fff;
    text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}

.wf-article-hero .wf-article-lead {
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
}

.wf-article-hero .wf-article-meta {
    margin-top: 28px;
    border-top-color: rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .78);
}

/* Le hero est collé sous la navbar : le contenu n'a plus besoin
   du grand écart réservé à l'en-tête texte. */
.wf-article--hero .wf-article-content {
    margin-top: 56px;
}

/* Titre ET cover masqués : l'article démarre sur son contenu,
   qui récupère la respiration du haut de page. */
.wf-article--no-head .wf-article-content {
    margin-top: var(--wf-art-top);
}

/* ───────────────────────────────────────────────
   Corps de l'article - contrat de largeur
─────────────────────────────────────────────── */
/* Le conteneur reprend EXACTEMENT la géométrie de .container
   (max-width --max + padding --pad, l. 96). Ce n'est pas cosmétique :
   les blocs wf/* de section embarquent leur propre compensation pleine
   largeur, calculée pour ce parent précis,

     margin-left: calc(-1 * (max(0px, (100vw - --max) / 2) + --pad))

   (voir blocks/wf-container/style.css). Dans un conteneur sans
   max-width, ce calcul dérape et décale les blocs vers la gauche.
   On leur rend le contexte attendu plutôt que de lutter contre eux. */
.wf-article-content {
    max-width: var(--wf-max-width, var(--max));
    margin-top: 64px;
    margin-inline: auto;
    padding: 0 var(--pad);
    font-size: var(--wf-art-size);
}

/* ── BLOCS DE SECTION wf/* ──
   Sections autonomes : padding vertical propre, conteneur interne
   1240px, parfois compensation pleine largeur. On les EXCLUT de la
   colonne de lecture et on ne touche NI à leur largeur NI à leurs
   marges, leur feuille de style fait déjà le travail.

   wf-titre n'y figure pas volontairement : c'est un bloc de texte
   (aucun padding, simple margin-bottom), il reste dans la colonne.

   Cette liste est reprise à l'identique dans la règle de rythme
   vertical plus bas : garder les deux synchronisées. */

/* Par défaut : colonne de lecture centrée */
.wf-article-content > *:not(
    .wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
    .wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
    .wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
) {
    max-width: var(--wf-art-measure);
    margin-inline: auto;
}

/* « Large » depuis l'éditeur */
.wf-article-content > .alignwide {
    max-width: var(--wf-art-wide);
}

/* « Pleine largeur » : même formule de compensation que les blocs
   wf/*, puisque le conteneur a désormais un max-width. */
.wf-article-content > .alignfull {
    width: 100vw;
    max-width: none;
    margin-inline: calc(-1 * (max(0px, (100vw - var(--wf-max-width, var(--max))) / 2) + var(--pad)));
}

/* Un groupe pleine largeur s'étend bord à bord, mais son CONTENU
   reste dans la grille, sinon le texte traverse tout l'écran.
   En :where() pour que tout réglage d'espacement fait dans l'éditeur
   (padding du bloc, largeur d'un enfant) reprenne la main. */
:where(.wf-article-content > .alignfull.wp-block-group) {
    padding-inline: var(--pad);
}

:where(.wf-article-content > .alignfull.wp-block-group > *) {
    max-width: var(--wf-art-wide);
    margin-inline: auto;
}

/* Rythme vertical (le reset a mis toutes les marges à 0) */
.wf-article-content > * + * {
    margin-top: var(--wf-art-flow);
}

/* Les blocs de section portent déjà leur propre padding vertical : y
   ajouter le flux créerait un double espace. Liste identique à celle de
   la colonne de lecture ci-dessus.

   wf-bandeau2 y figure : c'est un bandeau collant pleine largeur, il se
   pose contre la navbar et n'a pas à recevoir la respiration du flux de
   lecture. (Il en avait été sorti pour protéger un `margin: -40px 0` qui
   n'existe plus, le couple padding/marge négative a été supprimé.)

   :where() plutôt qu'un sélecteur nu : à spécificité nulle, un bloc qui
   déclare ses propres marges reprend toujours la main sans !important. */
:where(
  .wf-article-content > * + :is(
      .wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
      .wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
      .wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
  ),
  .wf-article-content > :is(
      .wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
      .wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
      .wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
  ) + *
) {
    margin-top: 0;
}

.wf-article-content > * + :is(h2, .wp-block-heading.h2) {
    margin-top: var(--wf-art-flow-lg);
}

.wf-article-content > * + :is(h3, h4, h5, h6) {
    margin-top: var(--wf-art-flow-md);
}

/* Les blocs larges et pleine largeur respirent davantage */
.wf-article-content > * + :is(.alignwide, .alignfull) {
    margin-top: calc(var(--wf-art-flow) * 1.6);
}

.wf-article-content > :is(.alignwide, .alignfull) + * {
    margin-top: calc(var(--wf-art-flow) * 1.6);
}

/* ───────────────────────────────────────────────
   Échelle de titres - scope article uniquement
   (la section 18 laisse volontairement h1-h6 de côté)
─────────────────────────────────────────────── */
.wf-article-content :is(h2, h3, h4, h5, h6) {
    font-weight: 600;
    letter-spacing: -.015em;
    text-wrap: balance;
}

/* h2 = nouvelle section. Le filet reprend le langage de .wf-sec. */
.wf-article-content h2 {
    padding-top: 22px;
    border-top: 1px solid var(--bd);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
    line-height: 1.15;
}

.wf-article-content h3 {
    font-size: clamp(1.18rem, 1.05rem + .55vw, 1.38rem);
    line-height: 1.25;
}

.wf-article-content h4 {
    font-size: 1.06rem;
    line-height: 1.3;
}

.wf-article-content :is(h5, h6) {
    font: 500 11px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
}

/* Un titre suivi immédiatement de son texte reste soudé */
.wf-article-content > :is(h2, h3, h4, h5, h6) + * {
    margin-top: .7em;
}

/* ───────────────────────────────────────────────
   Listes
   La section 19 ne couvre que les blocs wf/*, pas
   le contenu d'article. Même dessin de puces.
─────────────────────────────────────────────── */
.wf-article-content :is(ul, ol) {
    padding-left: 0;
    list-style: none;
}

.wf-article-content ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: .5em;
    line-height: var(--wf-p-leading);
}

.wf-article-content ul li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    background: currentColor;
}

.wf-article-content ol {
    counter-reset: wf-art-list;
}

.wf-article-content ol li {
    position: relative;
    padding-left: 2.2em;
    margin-bottom: .5em;
    line-height: var(--wf-p-leading);
    counter-increment: wf-art-list;
}

.wf-article-content ol li::before {
    content: counter(wf-art-list) '.';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.6em;
    font: 500 .8em/2 var(--mono);
    letter-spacing: .02em;
    color: var(--mt);
}

.wf-article-content li:last-child {
    margin-bottom: 0;
}

.wf-article-content :is(ul, ol) :is(ul, ol) {
    margin-top: .4em;
    margin-bottom: 0;
}

.wf-article-content :is(ul, ol) ul li::before {
    width: 4px;
    height: 4px;
    background: var(--mt);
}

/* ───────────────────────────────────────────────
   Tableaux - core/table
   ⚠️ DÉMÉNAGÉ → section 24 « BLOCS GUTENBERG PAR DÉFAUT ».
   Le tableau était habillé ici, donc réservé à l'article. Les
   pages (page.php) n'en profitaient pas alors que le bloc est le
   même. Les règles vivent désormais sous .entry-content, une
   classe que portent AUSSI BIEN page.php que single.php.
─────────────────────────────────────────────── */

/* ───────────────────────────────────────────────
   Images & figures - core/image, core/gallery, core/embed
─────────────────────────────────────────────── */
.wf-article-content :is(img, video, iframe) {
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
}

.wf-article-content figcaption {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bd);
    font: 400 11px/1.5 var(--mono);
    letter-spacing: .04em;
    color: var(--mt);
}

/* Une figure pleine largeur colle ses légendes à la grille de lecture */
.wf-article-content > .alignfull figcaption {
    max-width: var(--wf-art-measure);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* Bloc code */
.wf-article-content .wp-block-code {
    padding: 18px 20px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow-x: auto;
}

.wf-article-content .wp-block-code code {
    padding: 0;
    background: none;
    border: 0;
    font-size: .86em;
    line-height: 1.6;
}

/* ───────────────────────────────────────────────
   Pied d'article - étiquettes & retour catégorie
─────────────────────────────────────────────── */
/* Le filet est tracé par ::before, en retrait du padding, pour
   s'aligner exactement sur la colonne de texte. Posé sur la boîte,
   un border-top déborderait de var(--pad) de chaque côté. */
.wf-article-foot {
    position: relative;
    max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
    margin: 72px auto 0;
    padding: 30px var(--pad) 0;
}

.wf-article-foot::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    border-top: var(--wf-border-width, 1px) solid var(--bds);
}

.wf-article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wf-article-tags-label {
    margin-right: 4px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-tag-chip {
    padding: 5px 10px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx);
    transition: background .2s, border-color .2s;
}

.wf-tag-chip:hover {
    background: var(--surf);
    border-color: var(--bds);
}

.wf-article-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    font: 400 11px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
    transition: color .2s;
}

.wf-article-back:hover {
    color: var(--tx);
}

.wf-article-back-arrow {
    display: inline-block;
    transition: transform .2s;
}

.wf-article-back:hover .wf-article-back-arrow {
    transform: translateX(-4px);
}

/* ───────────────────────────────────────────────
   Articles liés
─────────────────────────────────────────────── */
.wf-article-related {
    position: relative;
    max-width: calc(var(--wf-art-wide) + var(--pad) * 2);
    margin: 100px auto 0;
    padding: 30px var(--pad) 0;
}

.wf-article-related::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    border-top: var(--wf-border-width, 1px) solid var(--bds);
}

.wf-related-title {
    font: 500 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-top: 28px;
}

.wf-related-card {
    display: block;
}

.wf-related-thumb {
    aspect-ratio: 3 / 2;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
}

.wf-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.wf-related-card:hover .wf-related-thumb img {
    transform: scale(1.03);
}

.wf-related-cat {
    display: block;
    margin-top: 14px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-related-name {
    margin-top: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    transition: color .2s;
}

.wf-related-card:hover .wf-related-name {
    color: var(--wf-red);
}

.wf-related-date {
    display: block;
    margin-top: 8px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

/* ───────────────────────────────────────────────
   Commentaires
─────────────────────────────────────────────── */
.wf-article-comments {
    position: relative;
    max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
    margin: 90px auto 0;
    padding: 30px var(--pad) 0;
}

.wf-article-comments::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    border-top: 1px solid var(--bd);
}

/* ───────────────────────────────────────────────
   Responsive
─────────────────────────────────────────────── */
@media (max-width: 860px) {
    .wf-related-grid { grid-template-columns: repeat(2, 1fr); }
    .wf-related-grid > :nth-child(3) { display: none; }
}

@media (max-width: 560px) {
    .wf-related-grid { grid-template-columns: 1fr; }
    .wf-related-grid > :nth-child(3) { display: block; }

    .wf-article-lead { font-size: 1.05rem; line-height: 1.55; }
    .wf-article-content { margin-top: 40px; }

    /* Hero plus court sur mobile : l'image reste lisible sans
       repousser le premier paragraphe hors de l'écran.
       svh et non vh : sans ça, la hauteur se calcule sur un viewport
       barre d'URL rétractée, et le hero se met à sauter au scroll. */
    .wf-article-hero { min-height: clamp(300px, 58svh, 440px); }
    .wf-article-hero .wf-article-head-inner { padding-bottom: 28px; }
    .wf-article--hero .wf-article-content { margin-top: 36px; }

    /* Le chapô posé sur la photo est le premier à devenir illisible :
       on renforce le voile sous lui et on limite la mesure, sinon il
       s'étale sur six lignes au ras du bas de l'image. */
    .wf-article-hero::after {
        background: linear-gradient(
            to top,
            rgba(12, 10, 8, .94) 0%,
            rgba(12, 10, 8, .80) 40%,
            rgba(12, 10, 8, .38) 72%,
            rgba(12, 10, 8, .08) 100%
        );
    }
    .wf-article-hero .wf-article-lead {
        margin-top: 14px;
        color: rgba(255, 255, 255, .88);
    }

    /* La ligne de méta tenait sur trois lignes à cause des séparateurs. */
    .wf-article-title  { margin-top: 18px; }
    .wf-article-meta   { margin-top: 20px; gap: 6px; font-size: 10px; }
    .wf-article-meta-sep { opacity: .35; }
}

/* ───────────────────────────────────────────────
   Blocs Gutenberg par défaut
   Les blocs core n'utilisent aucun style du thème :
   WordPress leur applique son propre theme.json (boutons
   gris anthracite, etc.). On les raccroche ici aux tokens
   du wireframe.
─────────────────────────────────────────────── */

/* ── Boutons - core/button ──
   Le noir par défaut vient de :root :where(.wp-element-button)
   généré par WordPress. On reprend le dessin de .btn (l. 616).

   Spécificité : sélecteur à 2 classes, il passe devant le style
   core. Les :not() laissent la main dès que tu choisis une
   couleur dans l'éditeur (WP ajoute alors has-background /
   has-text-color) : ton réglage gagne toujours.

   `.stlh-content` accompagne `.wf-article` : l'accueil streaming
   pose ses blocs Gutenberg dans ce conteneur-là, jamais dans un
   article. Sans lui, un bouton posé sur l'accueil retombait sur
   le gris anthracite de WordPress. */
.wf-article .wp-block-buttons,
.stlh-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wf-article .wp-block-button__link,
.stlh-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border: var(--wf-border-width, 1px) solid var(--bds);
    border-radius: var(--r);
    font: 500 14px/1 var(--sans);
    transition: background .15s, border-color .15s, color .15s;
}

/* Remplissage par défaut : encre du thème, texte papier */
.wf-article .wp-block-button__link:not(.has-background),
.stlh-content .wp-block-button__link:not(.has-background) {
    background: var(--tx);
}

.wf-article .wp-block-button__link:not(.has-text-color),
.stlh-content .wp-block-button__link:not(.has-text-color) {
    color: var(--bg);
}

.wf-article .wp-block-button__link:not(.has-background):hover,
.stlh-content .wp-block-button__link:not(.has-background):hover {
    background: var(--bds);
    border-color: var(--bds);
}

/* Variante « Contour » de Gutenberg */
.wf-article .is-style-outline .wp-block-button__link:not(.has-background),
.stlh-content .is-style-outline .wp-block-button__link:not(.has-background) {
    background: transparent;
}

.wf-article .is-style-outline .wp-block-button__link:not(.has-text-color),
.stlh-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
    color: var(--tx);
}

.wf-article .is-style-outline .wp-block-button__link:not(.has-background):hover,
.stlh-content .is-style-outline .wp-block-button__link:not(.has-background):hover {
    background: var(--surf);
}

/* Un bouton ne doit pas hériter du soulignement des liens (section 18) */
.wf-article .wp-block-button__link,
.stlh-content .wp-block-button__link {
    border-bottom-width: 1.5px;
}

/* ── Lettrine - core/paragraph « Lettrine » ──
   Le défaut de WordPress est font-size:8.4em / font-weight:100.
   Sur une grotesque, une lettre étroite (I, l, T) devient un trait
   vertical fin qu'on confond avec un filet de citation. On repasse
   sur une lettrine typographique : plus petite, pleine, calée sur
   les trois premières lignes.

   Le sélecteur reprend la forme du core (:not(:focus)) pour passer
   devant lui dans la cascade. */
.wf-article-content .has-drop-cap:not(:focus):first-letter {
    float: left;
    margin: .02em .1em 0 0;
    font-size: 3.5em;
    font-weight: 600;
    line-height: .82;
    color: var(--tx);
}

/* Le pseudo-élément que le core utilise pour corriger l'alignement */
.wf-article-content .has-drop-cap:not(:focus)::after {
    content: none;
}

/* ── Espaceur - core/spacer ──
   Le bloc porte déjà sa hauteur : la marge de flux ferait double. */
.wf-article-content > .wp-block-spacer,
.wf-article-content > .wp-block-spacer + * {
    margin-top: 0;
}

/* ── Séparateur - core/separator ──
   On rend au bloc les marges prévues par la section 18, que le
   flux générique écrasait. */
.wf-article-content > :is(hr, .wp-block-separator),
.wf-article-content > :is(hr, .wp-block-separator) + * {
    margin-top: 2em;
}

/* ── Média & texte - core/media-text ── */
.wf-article-content .wp-block-media-text {
    gap: 0;
}

.wf-article-content .wp-block-media-text__media img {
    border-radius: var(--r);
}

.wf-article-content .wp-block-media-text__content {
    padding: 0 0 0 32px;
}

.wf-article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding: 0 32px 0 0;
}

@media (max-width: 600px) {
    .wf-article-content .wp-block-media-text__content,
    .wf-article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        padding: 22px 0 0;
    }
}

/* ── Colonnes - core/columns ── */
.wf-article-content .wp-block-columns {
    gap: var(--gap);
}

/* ── Cover - core/cover ── */
.wf-article-content .wp-block-cover {
    border-radius: var(--r);
    overflow: hidden;
}

/* ── Galerie - core/gallery ── */
.wf-article-content .wp-block-gallery {
    gap: var(--gap);
}

/* ── Embeds - core/embed ── */
.wf-article-content .wp-block-embed__wrapper {
    position: relative;
}

.wf-article-content .wp-block-embed iframe {
    width: 100%;
    border-radius: var(--r);
}

/* ── Placeholder d'article lié sans image ──
   Reprend la convention .wf-img (l. 209) : fond papier,
   croix diagonale, étiquette mono. */
.wf-related-ph {
    position: absolute;
    inset: 0;
    background: var(--surf);
}

.wf-related-ph svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wf-related-ph line {
    stroke: var(--bd);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wf-related-ph-lbl {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 2px;
    font: 400 9.5px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
    white-space: nowrap;
}

/* .wf-related-thumb doit devenir le repère du placeholder absolu */
.wf-related-thumb {
    position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   21. COMMENTAIRES
   Liste des commentaires et formulaire de réponse.

   ── PORTÉE ──
   Scope .wf-article, comme la section 20 : les pages ne sont pas
   touchées. Le markup vient du walker par défaut de WordPress
   (comments.php), d'où les noms de classes en anglais, qu'il ne
   faut PAS renommer, ils sont imposés par le core.

   ── OÙ MODIFIER ──
   Les champs de formulaire partagent le bloc « CHAMPS » ci-dessous.
════════════════════════════════════════════════════════════════ */

/* ── RÉGLAGES ── */
.wf-article {
    --wf-field-bg:     var(--surf);
    --wf-field-bd:     var(--bd);
    --wf-field-bd-on:  var(--bds);
    --wf-field-pad:    12px 14px;
    --wf-field-radius: var(--r);
}

/* ───────────────────────────────────────────────
   Titres de section
─────────────────────────────────────────────── */
.wf-article-comments #comments-title,
.wf-article-comments .comment-reply-title {
    font: 500 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-article-comments #comments-title span {
    color: var(--tx);
}

/* Lien « Annuler la réponse » */
.wf-article-comments #cancel-comment-reply-link {
    margin-left: 10px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wf-red);
}

/* ───────────────────────────────────────────────
   Liste des commentaires
─────────────────────────────────────────────── */
.wf-article-comments .commentlist {
    margin-top: 26px;
    padding: 0;
    list-style: none;
}

.wf-article-comments .commentlist li.comment {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--bd);
    list-style: none;
}

.wf-article-comments .commentlist > li.comment:last-child {
    margin-bottom: 0;
}

/* Réponses imbriquées - décalage + filet vertical */
.wf-article-comments .commentlist .children {
    margin: 24px 0 0 0;
    padding-left: 22px;
    border-left: 2px solid var(--bd);
    list-style: none;
}

.wf-article-comments .commentlist .children li.comment:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* En-tête d'un commentaire */
.wf-article-comments .comment-author {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wf-article-comments .comment-author .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--bd);
}

.wf-article-comments .comment-author .fn {
    font-size: .95rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -.01em;
}

.wf-article-comments .comment-author .says {
    display: none;   /* « dit : », bruit hérité du core */
}

.wf-article-comments .comment-meta {
    margin-top: 8px;
    font: 400 10px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-article-comments .comment-meta a {
    color: inherit;
    border-bottom: 0;
}

.wf-article-comments .comment-body > p {
    margin: 12px 0 0;
    line-height: var(--wf-p-leading);
}

.wf-article-comments .comment-awaiting-moderation {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 9px;
    background: var(--acc);
    border-radius: 2px;
    font: 400 10px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-acc);
}

/* Lien « Répondre » */
.wf-article-comments .reply {
    margin-top: 14px;
}

.wf-article-comments .comment-reply-link {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
    transition: background .2s, border-color .2s, color .2s;
}

.wf-article-comments .comment-reply-link:hover {
    background: var(--surf);
    border-color: var(--bds);
    color: var(--tx);
}

/* Navigation entre pages de commentaires */
.wf-article-comments :is(#comment-nav-above, #comment-nav-below) {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0;
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-article-comments .assistive-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wf-article-comments .nocomments {
    margin-top: 18px;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

/* ───────────────────────────────────────────────
   Formulaire
─────────────────────────────────────────────── */
.wf-article-comments .comment-respond {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--bd);
}

.wf-article-comments .commentlist + .comment-respond {
    margin-top: 40px;
}

.wf-article-comments .comment-form {
    margin-top: 22px;
}

/* Notes d'intro (« Connecté en tant que… », champs requis) */
.wf-article-comments :is(.comment-notes, .logged-in-as, .comment-form-cookies-consent label) {
    font: 400 11px/1.6 var(--mono);
    letter-spacing: .04em;
    color: var(--mt);
}

.wf-article-comments .comment-form > p {
    margin: 0 0 16px;
}

.wf-article-comments .comment-form label {
    display: block;
    margin-bottom: 7px;
    font: 500 10px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-article-comments .required {
    color: var(--wf-red);
}

/* ── CHAMPS ── */
.wf-article-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    width: 100%;
    padding: var(--wf-field-pad);
    background: var(--wf-field-bg);
    border: var(--wf-border-width, 1px) solid var(--wf-field-bd);
    border-radius: var(--wf-field-radius);
    color: var(--tx);
    font: 400 15px/1.5 var(--sans);
    transition: border-color .2s, background .2s;
}

.wf-article-comments :is(input, textarea)::placeholder {
    color: var(--mt);
    opacity: .8;
}

.wf-article-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
    outline: none;
    background: var(--bg);
    border-color: var(--wf-field-bd-on);
}

.wf-article-comments textarea {
    min-height: 150px;
    resize: vertical;
}

/* Auteur / e-mail / site sur une même ligne en grand écran */
@media (min-width: 700px) {
    .wf-article-comments .comment-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 var(--gap);
    }

    .wf-article-comments :is(.comment-notes, .comment-form-comment,
                             .comment-form-cookies-consent, .form-submit) {
        grid-column: 1 / -1;
    }
}

/* Case à cocher RGPD */
.wf-article-comments .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wf-article-comments .comment-form-cookies-consent input {
    margin-top: 3px;
    accent-color: var(--tx);
    flex-shrink: 0;
}

.wf-article-comments .comment-form-cookies-consent label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: .04em;
}

/* Bouton d'envoi - reprend .btn-fill */
.wf-article-comments .form-submit {
    margin-bottom: 0;
}

.wf-article-comments input[type="submit"] {
    padding: 12px 26px;
    background: var(--tx);
    border: var(--wf-border-width, 1px) solid var(--tx);
    border-radius: var(--r);
    color: var(--bg);
    font: 500 12px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.wf-article-comments input[type="submit"]:hover {
    background: var(--bds);
    border-color: var(--bds);
}


/* ═══════════════════════════════════════════════════════════════
   22. ACCUEIL STREAMING
   Mise en forme de page-accueil-streaming.php.

   ── PORTÉE ──
   Tous les sélecteurs sont préfixés .stlh- et vivent sous
   .stlh-home. Aucune autre page du site ne peut être touchée.

   ── LE HERO ──
   Le planning du jour y tient la place centrale (22.3 bis) : c'est
   la réponse à « qu'est-ce que je viens faire ici ». En fond, un
   mur d'affiches presque éteint, et un faisceau de projecteur
   qui le rallume là où passe le curseur. Deux techniques
   superposées, dans cet ordre de préférence :
     · backdrop-filter + mask  → le faisceau réveille vraiment
       les couleurs des affiches (navigateurs récents) ;
     · dégradé radial en mix-blend-mode: screen → une nappe de
       lumière chaude, partout ailleurs.
   Sans JavaScript, le faisceau balaie le mur tout seul.
   La position vient de --stlh-bx / --stlh-by (script.js).

   ── STRUCTURE ──
   22.1 Ossature & titres de section
   22.2 Hero, décors (mur, faisceau, grain, vignettage)
   22.3 Hero, contenu (titre, recherche, liens)
   22.3 bis Hero, planning (bande en boucle, autocollants des jours)
   22.4 Compteur et reprendre (bandes de fin de page)
   22.5 Contenu éditable (Gutenberg)
   22.6 Le journal (manchette, cartes, « Aussi », rubriques en pied)
   22.6 bis À enchaîner (bande noire pleine largeur, onglets)
   22.6 ter Page « À enchaîner » (grille complète)
   22.7 Nouveau au catalogue (fiche + planche contact)
   22.8 Où regarder, Explorer, compte
   22.9 Responsive & accessibilité
════════════════════════════════════════════════════════════════ */

/* Position du faisceau. Déclarées via @property pour être
   interpolables : c'est ce qui rend le balayage automatique fluide
   quand aucune souris ne pilote le hero. */
@property --stlh-bx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --stlh-by { syntax: '<percentage>'; inherits: true; initial-value: 44%; }

/* ───────────────────────────────────────────────
   22.1 · Ossature & titres de section
─────────────────────────────────────────────── */
.stlh-home {
    /* Réglages locaux : un seul endroit pour respirer plus ou moins. */
    --stlh-gap:     20px;
    --stlh-section: 84px;
    --stlh-ink:     #ffffff;   /* encre du hero, sur fond sombre */
    --stlh-dark:    #0a0a0a;
    --stlh-beam-r:  clamp(200px, 26vw, 380px);
}

/* Même gouttière que .container, sans en dépendre : les blocs de
   section du contenu doivent pouvoir en sortir. */
.stlh-wrap {
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* Chaque section s'ouvre sur un filet épais et un numéro : on lit la
   page comme un sommaire imprimé, 01, 02, 03, et on sait toujours où on
   en est. Le filet est le seul trait gras du site, il ne sert qu'à ça. */
.stlh-section {
    padding: var(--stlh-section) 0;
}

.stlh-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px 24px;
    margin-bottom: 36px;
    padding-top: 14px;
    border-top: 6px solid var(--tx);
}

.stlh-section-num {
    grid-column: 1 / -1;
    margin: 0;
    font: 700 12px/1 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx);
}

.stlh-section-num span { color: var(--mt); margin: 0 .25em; }

.stlh-section-title {
    grid-column: 1;
    margin: 0;
    font-size: var(--tavu-xl, clamp(2.25rem, 1.2rem + 4.2vw, 5rem));
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: var(--tx);
}

/* Pastille d'actualité posée à côté du titre (« +12 cette semaine »). */
.stlh-section-stamp {
    grid-column: 1;
    justify-self: start;
    padding: 6px 10px;
    background: var(--tx);
    color: var(--bg);
    font: 800 12px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Lien de section : un vrai bouton, carré, qui s'inverse au survol. */
.stlh-section-link {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border: 1px solid var(--tx);
    font: 700 12px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.stlh-section-link:hover {
    background: var(--tx);
    color: var(--bg);
}

/* Placeholder partagé : reprend la convention .wf-img
   (croix diagonale sur fond papier). */
.stlh-ph {
    position: absolute;
    inset: 0;
    background: var(--surf);
}

.stlh-ph svg { width: 100%; height: 100%; display: block; }

.stlh-ph line {
    stroke: var(--bd);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Libellé réservé aux lecteurs d'écran (absent du reste du thème). */
.stlh-home .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────────
   22.2 · Hero, décors
─────────────────────────────────────────────── */
.stlh-hero {
    position: relative;
    isolation: isolate;          /* les blend-modes restent dans le hero */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(92vh, 860px);
    padding: clamp(48px, 8vh, 96px) 0 clamp(48px, 7vh, 84px);
    background: var(--stlh-dark);
    color: var(--stlh-ink);
}

/* ── Le calque de décor ──
   C'est lui qui rogne, pas le hero : le menu de la recherche
   instantanée doit pouvoir sortir par le bas sans être coupé. */
.stlh-hero-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Le mur d'affiches ──
   Légèrement penché et débordant : on ne doit jamais voir un bord. */
.stlh-hero-wall {
    position: absolute;
    inset: -12% -8%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 1.2vw, 18px);
    opacity: .2;
    filter: saturate(.7) contrast(1.05);
    transform: rotate(-5deg) scale(1.15);
    pointer-events: none;
}

.stlh-wall-row {
    display: flex;
    gap: clamp(10px, 1.2vw, 18px);
    width: max-content;
    animation: stlh-drift 110s linear infinite;
}

/* Une rangée sur deux part dans l'autre sens, à une autre vitesse :
   le mur ne se lit jamais comme une seule bande qui glisse. */
.stlh-wall-row--1 {
    animation-duration: 150s;
    animation-direction: reverse;
}

.stlh-wall-img {
    flex: none;
    width: clamp(104px, 12vw, 178px);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--r);
    display: block;
}

/* Chaque affiche du mur apparaît en fondu à son arrivée (.is-loaded,
   script en tête du hero), au lieu de surgir. Sans script, rien de
   caché. */
.stlh-hero.is-fading .stlh-wall-img {
    opacity: 0;
    transition: opacity .9s ease;
}

.stlh-hero.is-fading .stlh-wall-img.is-loaded { opacity: 1; }

/* La rangée est écrite deux fois : à -50% elle recommence à
   l'identique, la boucle est invisible. */
/* ── Entrée en scène de la bande ──
   Démarre dès la première image : .is-enhanced est posé par le petit
   script en tête de la bande, avant la peinture (voir
   template-parts/home-schedule.php). Légère et courte, et seulement sur
   le premier écran (les deux premiers jours) : l'autocollant se pose,
   le filet se trace de gauche à droite, les cartes montent l'une après
   l'autre (--stlh-i, posé dans le HTML). Les propriétés animées
   (opacity, translate, scale) ne touchent pas la mise en page : rien ne
   bouge autour, et l'inclinaison des autocollants (transform) est
   préservée. */
.stlh-today.is-enhanced .stlh-day:nth-child(-n+2) .stlh-tag {
    animation: stlh-tag-in .5s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--stlh-d, 0) * 180ms);
}

.stlh-today.is-enhanced .stlh-day:nth-child(-n+2) .stlh-day-cards::before {
    transform-origin: left;
    animation: stlh-rail-in .7s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(80ms + var(--stlh-d, 0) * 180ms);
}

.stlh-today.is-enhanced .stlh-day:nth-child(-n+2) .stlh-day-cards::after {
    animation: stlh-fade .3s ease both;
    animation-delay: calc(600ms + var(--stlh-d, 0) * 180ms);
}

.stlh-today.is-enhanced .stlh-day:nth-child(-n+2) .stlh-card {
    animation: stlh-card-in .55s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(140ms + var(--stlh-i, 0) * 45ms);
}

.stlh-today.is-enhanced .stlh-today-arrow--next {
    animation: stlh-fade .4s ease .35s both;
}

@keyframes stlh-tag-in {
    from { opacity: 0; translate: 0 -10px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes stlh-rail-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes stlh-card-in {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes stlh-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Les affiches se posent en fondu une fois chargées, sur leur tuile
   sombre qui tient déjà leur place exacte (aspect-ratio) : rien ne
   saute. .is-loaded est posé à la réception de l'image (script en tête
   de bande, puis script.js pour les copies de la boucle). */
.stlh-today.is-enhanced .stlh-card-poster img {
    opacity: 0;
    transition: opacity .5s ease;
}

.stlh-today.is-enhanced .stlh-card-poster img.is-loaded { opacity: 1; }

@keyframes stlh-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Le faisceau ──
   Nappe de lumière chaude, partout. */
.stlh-hero-beam {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(
        circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .13) 42%,
        rgba(255, 255, 255, 0)  72%
    );
    /* Balayage d'attente : coupé dès que la souris prend la main. */
    animation: stlh-sweep 16s ease-in-out infinite alternate;
}

.stlh-hero.is-live .stlh-hero-beam { animation: none; }

@keyframes stlh-sweep {
    from { --stlh-bx: 24%; --stlh-by: 56%; }
    to   { --stlh-bx: 76%; --stlh-by: 36%; }
}

/* Version augmentée : le faisceau ravive réellement les couleurs du
   mur au lieu de simplement l'éclairer. */
@supports (backdrop-filter: brightness(2)) or (-webkit-backdrop-filter: brightness(2)) {
    .stlh-hero-beam {
        /* Le filtre suffit à rallumer le mur : garder « screen » par-dessus
           doublerait l'éclairage et cramerait le centre du faisceau. */
        mix-blend-mode: normal;
        -webkit-backdrop-filter: brightness(3.2) saturate(1.5) contrast(1.06);
        backdrop-filter: brightness(3.2) saturate(1.5) contrast(1.06);
        -webkit-mask-image: radial-gradient(
            circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
            #000 0%, rgba(0, 0, 0, .78) 44%, transparent 74%
        );
        mask-image: radial-gradient(
            circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
            #000 0%, rgba(0, 0, 0, .78) 44%, transparent 74%
        );
    }
}

/* ── Grain argentique ──
   feTurbulence en data-URI : aucune requête, aucune image à charger.
   Le décalage par paliers imite le défilement d'une pellicule. */
.stlh-hero-grain {
    position: absolute;
    inset: -60%;
    z-index: 2;
    pointer-events: none;
    opacity: .2;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    animation: stlh-grain 620ms steps(1, end) infinite;
}

@keyframes stlh-grain {
    0%   { transform: translate3d(0, 0, 0); }
    12%  { transform: translate3d(-3%, -5%, 0); }
    25%  { transform: translate3d(-8%, 3%, 0); }
    37%  { transform: translate3d(4%, -6%, 0); }
    50%  { transform: translate3d(-2%, 7%, 0); }
    62%  { transform: translate3d(6%, 2%, 0); }
    75%  { transform: translate3d(-6%, -3%, 0); }
    87%  { transform: translate3d(2%, 5%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ── Vignettage + fondus haut et bas ──
   Le bas se fond vers le papier du site : la rupture sombre/clair ne
   doit pas se lire comme une bordure. */
.stlh-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 92% 78% at 50% 46%, transparent 38%, rgba(0, 0, 0, .78) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .1) 26%, rgba(0, 0, 0, .1) 58%, rgba(0, 0, 0, .92) 100%);
}

/* ───────────────────────────────────────────────
   22.3 · Hero, contenu
─────────────────────────────────────────────── */
/* Au-dessus du bandeau (z-index 4) : sans quoi celui-ci passerait
   par-dessus le menu de résultats de la recherche. */
.stlh-hero-inner {
    position: relative;
    z-index: 5;
    width: 100%;
}

.stlh-hero-title {
    position: relative;
    margin: 0;
    /* Plus sobre qu'avant : le titre annonce, c'est le planning
       juste dessous qui fait le spectacle. */
    max-width: 20ch;
    font: 700 clamp(32px, 5.2vw, 68px)/.95 var(--sans);
    letter-spacing: -.04em;
    text-transform: uppercase;
    color: var(--stlh-ink);
}

/* Aberration chromatique au survol : un défaut de projection,
   pas une animation permanente. */
.stlh-hero-title::before,
.stlh-hero-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity .18s;
}

.stlh-hero-title::before { color: #ff3b1f; transform: translate(-3px, 2px); }
.stlh-hero-title::after  { color: #2ee6d6; transform: translate(3px, -2px); }

.stlh-hero-title:hover::before { opacity: .72; }
.stlh-hero-title:hover::after  { opacity: .55; }

.stlh-hero-lede {
    margin: 16px 0 0;
    max-width: 62ch;
    font: 300 clamp(15px, 1.5vw, 19px)/1.55 var(--sans);
    color: rgba(255, 255, 255, .76);
}

/* ── Recherche ──
   Le conteneur porte la largeur et sert de repère au panneau de
   résultats, qui se pose juste en dessous du champ. */
.stlh-search-wrap {
    position: relative;
    z-index: 5;
    flex: 1 1 420px;
    max-width: 540px;
    margin: 0;
}

.stlh-search {
    display: flex;
    border: var(--wf-border-width, 1px) solid rgba(255, 255, 255, .3);
    border-radius: var(--r);
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.stlh-search:focus-within {
    border-color: var(--acc-on-dark);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

.stlh-search-input {
    flex: 1;
    min-width: 0;
    padding: 15px 17px;
    border: 0;
    background: transparent;
    font: 400 14px/1.2 var(--sans);
    color: var(--stlh-ink);
}

.stlh-search-input:focus { outline: none; }

.stlh-search-input::placeholder { color: rgba(255, 255, 255, .45); }

.stlh-search-btn {
    padding: 15px 24px;
    border: 0;
    background: var(--acc-on-dark);
    color: var(--ink);
    font: 500 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}

.stlh-search-btn:hover { background: var(--stlh-ink); }

/* ── Résultats instantanés ──
   Panneau posé sous le champ, alimenté par script.js
   (initStreamingSearch → action AJAX stl_search du plugin). */
.stlh-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    max-height: min(58vh, 420px);
    overflow-y: auto;
    padding: 6px;
    border: var(--wf-border-width, 1px) solid rgba(255, 255, 255, .28);
    border-radius: var(--r);
    background: rgba(14, 12, 10, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

.stlh-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--r);
    color: var(--stlh-ink);
    text-decoration: none;
    transition: background .12s;
}

/* Une seule classe pour le survol et la navigation au clavier :
   la ligne visée se signale de la même façon dans les deux cas. */
.stlh-result:hover,
.stlh-result.is-active {
    background: rgba(255, 255, 255, .12);
}

.stlh-result-thumb {
    flex: none;
    width: 34px;
    height: 50px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
    object-fit: cover;
    display: block;
}

.stlh-result-body { min-width: 0; }

.stlh-result-title {
    display: block;
    font: 500 13.5px/1.3 var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stlh-result-meta {
    display: block;
    margin-top: 3px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Dernière ligne : « voir tous les résultats », vers le catalogue. */
.stlh-result--all {
    justify-content: center;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0 0 var(--r) var(--r);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-on-dark);
}

@media (max-width: 600px) {
    .stlh-result { padding: 7px 8px; }
    .stlh-result-thumb { width: 30px; height: 44px; }
}

.stlh-search-empty {
    padding: 16px 12px;
    margin: 0;
    font: 300 13.5px/1.5 var(--sans);
    color: rgba(255, 255, 255, .6);
    text-align: center;
}

/* ── Pied du hero : recherche + liens secondaires ──
   Sous le planning, sur une seule ligne quand la place le permet. */
.stlh-hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: 26px;
}

.stlh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}

.stlh-hero-link {
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    font: 500 11px/1 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

.stlh-hero-link:hover {
    color: var(--acc-on-dark);
    border-color: var(--acc-on-dark);
}

/* ── Boutons ── */

.stlh-btn {
    display: inline-block;
    padding: 13px 26px;
    border: var(--wf-border-width, 1px) solid rgba(255, 255, 255, .38);
    border-radius: var(--r);
    background: transparent;
    color: var(--stlh-ink);
    font: 500 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.stlh-btn:hover {
    background: var(--stlh-ink);
    border-color: var(--stlh-ink);
    color: var(--stlh-dark);
}

.stlh-btn--solid {
    background: var(--stlh-ink);
    border-color: var(--stlh-ink);
    color: var(--stlh-dark);
}

.stlh-btn--solid:hover {
    background: var(--acc-on-dark);
    border-color: var(--acc-on-dark);
    color: var(--ink);
}

/* ───────────────────────────────────────────────
   22.3 bis · Hero, planning
   template-parts/home-schedule.php + script.js (initHomeSchedule).

   Une bande d'affiches pleine largeur : elle part de la marge de la
   page et déborde à droite de l'écran, pour qu'on devine la suite.
   Chaque jour est un groupe : un filet court au-dessus de ses cartes,
   sa date y est collée comme un autocollant (position: sticky), qui
   reste accroché au bord gauche tant que le jour défile.

   Le jour actif (celui dont l'autocollant est accroché) s'allume :
   autocollant et filet. Les affiches, elles, restent toutes en pleine
   lumière : c'est ce qu'on vient voir. L'autocollant est aussi un bouton : un clic,
   la bande file au jour suivant. Et la bande boucle (script.js).
─────────────────────────────────────────────── */
.stlh-today {
    /* Gouttière de la page : là où s'aligne le titre du hero, et où
       s'accrochent les autocollants. Calculée sans %, pour valoir la
       même chose partout (marge, défilement, position collante). */
    --stlh-bleed: calc(max(0px, (100vw - var(--wf-max-width, var(--max))) / 2) + var(--pad));
    --stlh-card-w: clamp(140px, 12vw, 184px);
    --stlh-card-gap: 14px;
    --stlh-day-gap: 44px;
    --stlh-arrows-w: max(120px, calc(var(--stlh-bleed) + 50px)); /* voile sous la flèche droite */

    position: relative;
    margin-top: clamp(26px, 4.2vh, 44px);
}

/* Une nappe sombre, pleine largeur, sous la bande : les affiches se
   détachent du mur du fond sans l'effacer. */
.stlh-today::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 10px;
    bottom: -24px;
    left: calc(-1 * var(--stlh-bleed));
    width: 100vw;
    background: linear-gradient(180deg, transparent, rgba(6, 6, 6, .78) 22%, rgba(6, 6, 6, .78) 82%, transparent);
    pointer-events: none;
}

/* Voyant « en direct » de l'autocollant d'aujourd'hui. */
@keyframes stlh-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(210, 60, 15, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(210, 60, 15, 0); }
    100% { box-shadow: 0 0 0 0 rgba(210, 60, 15, 0); }
}

/* ── Flèches ──
   Sur la ligne des dates, à hauteur des autocollants : la gauche dans la
   marge, la droite au bord de l'écran, sur les affiches qui débordent.
   Elles restent en place pendant le défilement (elles vivent dans le
   cadre, pas dans la bande). La gauche est éteinte tant qu'il n'y a rien
   à gauche (.is-off, script.js) : elle apparaît dès qu'on a bougé. */
.stlh-today-arrow {
    --stlh-arrow: 46px;
    position: absolute;
    z-index: 6;
    /* Milieu d'un autocollant : marge haute de la liste (14px) plus une
       demi-hauteur d'autocollant (~24px). */
    top: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stlh-arrow);
    height: var(--stlh-arrow);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(10, 10, 10, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--stlh-ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s, border-color .2s, color .2s, opacity .3s, visibility .3s, transform .3s cubic-bezier(.2, .7, .2, 1);
}

/* Sans JavaScript, elles ne feraient rien : on ne les montre pas. */
.stlh-today:not(.is-enhanced) .stlh-today-arrow { display: none; }

/* Centrées dans la gouttière. */
.stlh-today-arrow--prev { left:  calc(var(--stlh-bleed) / 2 - var(--stlh-arrow) / 2); }
.stlh-today-arrow--next { right: max(10px, calc(var(--stlh-bleed) / 2 - var(--stlh-arrow) / 2)); }

/* Gouttière trop étroite pour loger la flèche gauche sans couvrir
   l'autocollant accroché : les deux flèches se rangent côte à côte à
   droite, toujours sur la ligne des dates. */
@media (max-width: 1379px) {
    .stlh-today { --stlh-arrows-w: 200px; }
    .stlh-today-arrow--prev {
        left: auto;
        right: calc(max(10px, var(--stlh-bleed) / 2 - var(--stlh-arrow) / 2) + var(--stlh-arrow) + 8px);
    }
}

.stlh-today-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

.stlh-today-arrow:hover {
    background: var(--acc-on-dark);
    border-color: var(--acc-on-dark);
    color: var(--ink);
    transform: translateY(-50%) scale(1.06);
}

.stlh-today-arrow--prev:hover svg { transform: translateX(-2px); }
.stlh-today-arrow--next:hover svg { transform: translateX(2px); }
.stlh-today-arrow:active { transform: translateY(-50%) scale(.92); }

.stlh-today-arrow:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 3px;
}

.stlh-today-arrow.is-off {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-8px) scale(.85);
}

/* Au doigt, on glisse : les flèches cèdent la place. */
@media (hover: none) and (pointer: coarse) {
    .stlh-today-arrow { display: none !important; }
}

/* ── La bande ──
   Pleine largeur : elle sort de la colonne du hero des deux côtés.
   Le contenu démarre sur la gouttière (padding de la liste) et les
   cartes s'aimantent sur elle (scroll-padding). À gauche, ce qui sort
   s'estompe ; à droite, les affiches débordent franchement de l'écran. */
/* ── Fluidité ──
   Rien de ce qui est posé sur la bande ne doit se redessiner quand elle
   défile : pas de mask, pas de filter sur les cartes. Le fondu de
   gauche est un calque fixe (ci-dessous), l'assombrissement des jours
   inactifs un voile dont seule l'opacité change. */
.stlh-reel-frame {
    position: relative;
    width: 100vw;
    margin-left: calc(-1 * var(--stlh-bleed));
}

/* Fondu du bord gauche : ce qui sort de la gouttière s'efface. */
.stlh-reel-frame::before {
    content: '';
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    width: max(0px, calc(var(--stlh-bleed) - 6px));
    background: linear-gradient(90deg, #060606 10%, rgba(6, 6, 6, .72) 55%, rgba(6, 6, 6, 0));
    pointer-events: none;
}

/* Bord droit, deux voiles en un calque fixe :
   · sur la ligne des dates (en haut), un voile dense sous les flèches :
     les autocollants qui arrivent s'y effacent au lieu de s'y cogner ;
   · sur les affiches, un voile léger : elles débordent toujours, on
     devine la suite. */
.stlh-reel-frame::after {
    content: '';
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--stlh-arrows-w);
    background:
        linear-gradient(270deg, #060606 45%, rgba(6, 6, 6, 0)) top right / 100% 78px no-repeat,
        linear-gradient(270deg, rgba(6, 6, 6, .6), rgba(6, 6, 6, 0) 70%);
    pointer-events: none;
}

.stlh-reel {
    position: relative;          /* repère des offsetLeft (script.js) */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: var(--stlh-bleed);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* L'aimantation seulement au doigt : au trackpad et à la souris, elle
   faisait sauter la bande en fin de geste. */
@media (hover: none) and (pointer: coarse) {
    .stlh-reel { scroll-snap-type: x proximity; }
}

.stlh-reel::-webkit-scrollbar { display: none; }

.stlh-reel:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: -2px;
}

.stlh-today.is-enhanced .stlh-reel { cursor: grab; }

.stlh-reel.is-gliding,
.stlh-reel.is-dragging { scroll-snap-type: none; }

.stlh-reel.is-dragging { cursor: grabbing; user-select: none; }
.stlh-reel.is-dragging a { pointer-events: none; }

.stlh-reel-days {
    display: flex;
    align-items: flex-start;
    width: max-content;
    margin: 0;
    /* Haut : place pour l'inclinaison des autocollants et le
       soulèvement des cartes au survol. */
    padding: 14px 0 10px var(--stlh-bleed);
    list-style: none;
}

/* ── Un jour ── */
.stlh-day {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-right: var(--stlh-day-gap);
}

/* ── L'autocollant ──
   Collé sur le filet du jour, légèrement de travers. Accroché au bord
   gauche tant que son jour défile. */
.stlh-tag {
    position: sticky;
    left: var(--stlh-bleed);
    z-index: 3;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 -22px;
    padding: 9px 10px 9px 13px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    background: #1b1b1b;
    color: var(--stlh-ink);
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
    transform: rotate(-1.8deg);
    transform-origin: 20% 50%;
    transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2, .7, .2, 1);
}

.stlh-day:nth-child(even) .stlh-tag { transform: rotate(1.4deg); }

.stlh-tag-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stlh-tag-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 800 15px/1 var(--sans);
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.stlh-tag-meta {
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .66;
}

.stlh-tag-sep { margin: 0 3px; }

/* ── L'avance rapide ──
   Une pastille ⏩ au bout de l'autocollant. Discrète sur les jours qui
   attendent à droite, franche sur l'autocollant accroché : c'est lui
   qu'on touche pour passer au jour suivant. Au survol, les chevrons
   filent vers la droite. */
.stlh-tag-ff {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: background .3s, color .3s;
}

.stlh-tag-ff svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

/* Seul l'autocollant accroché promet l'avance rapide franchement. */
.stlh-day:not(.is-active) .stlh-tag-ff { opacity: .45; transition: opacity .3s, background .3s, color .3s; }
.stlh-day:not(.is-active) .stlh-tag:hover .stlh-tag-ff { opacity: 1; }

.stlh-tag:hover .stlh-tag-ff svg { transform: translateX(3px); }
.stlh-tag:hover .stlh-tag-ff--loop svg { transform: rotate(-60deg); }

.stlh-day.is-active .stlh-tag-ff {
    background: var(--ink);
    color: var(--acc-on-dark);
}

/* Sans script, l'autocollant n'est qu'une ancre : pas de promesse
   d'avance rapide. */
.stlh-today:not(.is-enhanced) .stlh-tag-ff { display: none; }

.stlh-tag:hover { border-color: rgba(255, 255, 255, .5); }

.stlh-tag:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 4px;
}

/* Le clic : l'autocollant s'enfonce d'un cran. */
.stlh-tag:active { transform: rotate(-1.8deg) scale(.97); }
.stlh-day:nth-child(even) .stlh-tag:active { transform: rotate(1.4deg) scale(.97); }
.stlh-day.is-active .stlh-tag:active { transform: rotate(-1.8deg) scale(.99); }
.stlh-day.is-active:nth-child(even) .stlh-tag:active { transform: rotate(1.4deg) scale(.99); }

/* Aujourd'hui : le voyant rouge, comme dans l'en-tête. */
.stlh-day.is-today .stlh-tag-name::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-red);
    animation: stlh-pulse 2.2s ease-out infinite;
}

/* Jour actif : l'autocollant s'allume. */
.stlh-day.is-active .stlh-tag {
    border-color: transparent;
    background: var(--acc-on-dark);
    color: var(--ink);
    box-shadow:
        0 0 0 1px var(--acc-on-dark),
        0 0 34px 2px color-mix(in srgb, var(--acc-on-dark) 40%, transparent),
        0 12px 26px rgba(0, 0, 0, .5);
    transform: rotate(-1.8deg) scale(1.05);
}

.stlh-day.is-active:nth-child(even) .stlh-tag { transform: rotate(1.4deg) scale(1.05); }

.stlh-day.is-active .stlh-tag-meta { opacity: .75; }

/* ── Le filet du jour et ses cartes ──
   Le filet court au-dessus de toutes les cartes du jour, pas une de
   plus : c'est lui qui dit « ces affiches-là sortent ce jour-là ». */
.stlh-day-cards {
    position: relative;
    display: flex;
    gap: var(--stlh-card-gap);
    margin: 0;
    padding: 40px 0 0;
    list-style: none;
}

.stlh-day-cards::before,
.stlh-day-cards::after {
    content: '';
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, .2);
    transition: background .35s, box-shadow .35s;
}

.stlh-day-cards::before { left: 0; right: 0; height: 2px; border-radius: 2px; }
.stlh-day-cards::after  { right: 0; top: -4px; width: 2px; height: 10px; border-radius: 1px; }

.stlh-day.is-active .stlh-day-cards::before,
.stlh-day.is-active .stlh-day-cards::after {
    background: var(--acc-on-dark);
    box-shadow: 0 0 14px color-mix(in srgb, var(--acc-on-dark) 70%, transparent);
}

/* ── Une carte ── */
.stlh-card {
    flex: none;
    width: var(--stlh-card-w);
    margin: 0;
    scroll-snap-align: start;
}

.stlh-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.stlh-card-link:focus-visible,
.stlh-more:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 3px;
}

.stlh-card-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r);
    background: #161616;         /* opaque : le mur ne transparaît pas */
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
    transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}

.stlh-card-link:hover .stlh-card-poster {
    border-color: rgba(255, 255, 255, .75);
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(0, 0, 0, .55);
}

/* L'affiche se pose par-dessus la carte-titre. */
.stlh-card-poster img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stlh-card-poster img.is-broken { display: none; }

/* ── La carte-titre ──
   Sous chaque affiche. Un dégradé gris façon Netflix, un reflet en haut,
   et le titre composé en grand : pendant le chargement elle tient la
   place (on lit déjà le titre), sans image ou si le lien est mort,
   c'est une vraie vignette, pas un trou. */
.stlh-card-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 34px 14px 44px;     /* haut : la plateforme ; bas : les pastilles */
    background:
        radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, .13), transparent 65%),
        linear-gradient(165deg, #2c2c2c 0%, #1a1a1a 50%, #0c0c0c 100%);
}

.stlh-card-fallback::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--acc-on-dark);
    opacity: .7;
}

/* Deux pastilles empilées (nouvelle saison + finale) : on remonte le
   titre d'autant. */
.stlh-card-poster:has(.stlh-flag + .stlh-flag) .stlh-card-fallback { padding-bottom: 66px; }

.stlh-card-fallback-title {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 800 clamp(15px, 1.35vw, 20px)/1.02 var(--sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, .88);
}

/* Pendant le chargement : un reflet qui passe sur la carte-titre, léger
   et lent. Il s'arrête dès que l'affiche est là (ou qu'elle a échoué).
   Animé en transform : rien à redessiner. */
.stlh-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .08) 50%, transparent 75%);
    transform: translateX(-100%);
    pointer-events: none;
}

.stlh-today.is-enhanced .stlh-card-poster:has(> img:not(.is-loaded):not(.is-broken))::before {
    display: block;
    animation: stlh-shimmer 1.6s ease-in-out infinite;
}

@keyframes stlh-shimmer {
    to { transform: translateX(100%); }
}

/* La série suivie par le visiteur se repère avant même d'être lue. */
.stlh-card.is-followed .stlh-card-poster {
    border-color: var(--acc-on-dark);
    box-shadow: 0 0 0 1px var(--acc-on-dark), 0 14px 30px rgba(0, 0, 0, .45);
}

.stlh-card-network {
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
    padding: 4px 7px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .78);
    font: 500 9px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stlh-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stlh-card-flags {
    position: absolute;
    z-index: 3;
    left: 7px;
    right: 7px;
    bottom: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stlh-flag {
    padding: 4px 7px;
    border-radius: 2px;
    font: 600 9px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stlh-flag--new      { background: var(--acc-on-dark); color: var(--ink); }
.stlh-flag--finale   { background: var(--wf-red); color: #fff; }
.stlh-flag--movie    { background: var(--stlh-ink); color: var(--stlh-dark); }
.stlh-flag--followed { background: rgba(0, 0, 0, .78); color: var(--acc-on-dark); box-shadow: inset 0 0 0 1px var(--acc-on-dark); }

.stlh-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 500 14px/1.25 var(--sans);
    color: var(--stlh-ink);
}

.stlh-card-code {
    display: block;
    margin-top: 5px;
    font: 400 10px/1.4 var(--mono);
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
}

.stlh-card-detail {
    display: block;
    color: var(--acc-on-dark);
}

/* Titre de l'épisode, sur une ligne : « S02E05 · Le retour ». */
.stlh-card-ep {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    font: 400 12px/1.35 var(--sans);
    letter-spacing: 0;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Aujourd'hui vide : une tuile au format affiche, qui pousse à droite. */
.stlh-note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 2 / 3;
    margin: 0;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: var(--r);
}

.stlh-note-text {
    font: 300 15px/1.45 var(--sans);
    color: rgba(255, 255, 255, .78);
}

.stlh-note-next {
    font: 500 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-on-dark);
}

.stlh-note-arrow {
    display: inline-block;
    margin-left: 4px;
    animation: stlh-nudge 1.8s ease-in-out infinite;
}

@keyframes stlh-nudge {
    0%, 100% { transform: none; }
    50%      { transform: translateX(5px); }
}

/* Tuile « + N au calendrier » : même gabarit qu'une affiche. */
.stlh-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 2 / 3;
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: var(--r);
    color: rgba(255, 255, 255, .75);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.stlh-more:hover {
    border-color: var(--acc-on-dark);
    color: var(--acc-on-dark);
    background: rgba(255, 255, 255, .04);
}

.stlh-more-num { font: 700 clamp(26px, 2.6vw, 36px)/1 var(--sans); }

.stlh-more-lbl {
    font: 400 9.5px/1.3 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── L'étape « La suite » ──
   Entre le dernier jour et le retour à aujourd'hui. Même gabarit qu'un
   jour : un autocollant en pointillés, un filet en pointillés, une
   carte au format affiche. On lit la boucle comme la suite de la bande. */
.stlh-day--loop .stlh-tag {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .35);
    background: #111;
}


.stlh-day--loop .stlh-day-cards::before {
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, .25);
    background: none;
}

.stlh-day--loop .stlh-day-cards::after { display: none; }

.stlh-day--loop.is-active .stlh-day-cards::before {
    border-top-color: var(--acc-on-dark);
    background: none;
    box-shadow: none;
}

/* La carte du calendrier : deux cartes de large, la hauteur d'une
   affiche. */
.stlh-card--cal { width: calc(var(--stlh-card-w) * 2 + var(--stlh-card-gap)); }

.stlh-cal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(var(--stlh-card-w) * 1.5);
    padding: 24px;
    border: 1px solid var(--acc-on-dark);
    border-radius: var(--r);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .12), transparent 60%),
        #111;
    color: var(--stlh-ink);
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
    transition: background .2s, color .2s, transform .25s cubic-bezier(.2, .7, .2, 1);
}

.stlh-cal:hover {
    background: var(--acc-on-dark);
    color: var(--ink);
    transform: translateY(-4px);
}

.stlh-cal:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 3px;
}

.stlh-cal-kicker {
    margin-bottom: auto;
    font: 400 9.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
}

.stlh-cal-title {
    font: 800 clamp(26px, 2.6vw, 36px)/.95 var(--sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.stlh-cal-desc {
    max-width: 26ch;
    font: 300 13.5px/1.45 var(--sans);
    opacity: .72;
}

.stlh-cal-arrow {
    font: 400 24px/1 var(--sans);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

.stlh-cal:hover .stlh-cal-arrow { transform: translateX(6px); }

/* ── La fiche épisode ──
   Une <dialog> native (focus, Échap, lecteurs d'écran : le navigateur
   s'en charge). Grand écran : une fenêtre au centre, affiche à gauche.
   Mobile : une feuille qui monte du bas de l'écran. Même matière que
   le hero : fond noir, filets clairs, accent pour l'action principale. */
.stlh-sheet {
    margin: auto;                /* le reset du thème annule le centrage natif */
    width: min(760px, calc(100vw - 32px));
    max-height: min(86vh, 720px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: calc(var(--r) + 6px);
    background: #0d0d0d;
    color: var(--stlh-ink);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
    overflow: hidden;
}

.stlh-sheet::backdrop {
    background: rgba(0, 0, 0, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.stlh-sheet[open] { animation: stlh-sheet-in .38s cubic-bezier(.2, .8, .2, 1); }
.stlh-sheet[open]::backdrop { animation: stlh-fade-in .3s ease; }

@keyframes stlh-sheet-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes stlh-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@keyframes stlh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.stlh-sheet-inner {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    max-height: inherit;
}

.stlh-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: var(--stlh-ink);
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

.stlh-sheet-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.stlh-sheet-close:hover { background: var(--acc-on-dark); color: var(--ink); transform: rotate(90deg); }

.stlh-sheet-close:focus-visible,
.stlh-sheet-btn:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 3px;
}

.stlh-sheet-poster {
    position: relative;
    background: #161616;
}

.stlh-sheet-inner:not(.has-poster) { grid-template-columns: 1fr; }
.stlh-sheet-inner:not(.has-poster) .stlh-sheet-poster { display: none; }
.stlh-sheet-inner:not(.has-poster) .stlh-sheet-body { padding-left: 30px; }

.stlh-sheet-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'affiche se fond dans le panneau de texte. */
.stlh-sheet-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, #0d0d0d);
}

.stlh-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 30px 30px 26px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.stlh-sheet-when {
    margin: 0;
    padding-right: 44px;
    font: 500 10.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.stlh-sheet-title {
    margin: -4px 0 0;
    padding-right: 44px;
    font: 800 clamp(24px, 3vw, 34px)/1 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--stlh-ink);
}

.stlh-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
}

.stlh-sheet-code {
    font: 600 12px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--acc-on-dark);
}

.stlh-sheet-flags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Les épisodes du jour : un seul, il prend la place (titre + synopsis) ;
   plusieurs, une liste numérotée qui défile si elle est longue. */
.stlh-sheet-episodes {
    display: flex;
    flex-direction: column;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.stlh-sheet-ep {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 3px 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.stlh-sheet-ep-num {
    grid-row: span 3;
    font: 700 20px/1 var(--sans);
    color: rgba(255, 255, 255, .35);
    font-variant-numeric: tabular-nums;
}

.stlh-sheet-ep-title {
    font: 600 15px/1.3 var(--sans);
    color: var(--stlh-ink);
}

.stlh-sheet-ep-info {
    font: 400 10px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.stlh-sheet-ep-syn {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
    font: 300 13.5px/1.55 var(--sans);
    color: rgba(255, 255, 255, .72);
}

/* Un épisode seul : plus d'air, le synopsis en entier. */
.stlh-sheet-episodes.is-single .stlh-sheet-ep { border-bottom: 0; }
.stlh-sheet-episodes.is-single .stlh-sheet-ep-num { color: var(--acc-on-dark); font-size: 26px; }
.stlh-sheet-episodes.is-single .stlh-sheet-ep-title { font-size: 18px; }
.stlh-sheet-episodes.is-single .stlh-sheet-ep-syn { -webkit-line-clamp: 8; font-size: 14.5px; }

.stlh-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}

.stlh-sheet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--r);
    font: 600 11px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stlh-ink);
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.stlh-sheet-btn:hover { border-color: var(--stlh-ink); background: rgba(255, 255, 255, .08); }

.stlh-sheet-btn--primary {
    border-color: var(--acc-on-dark);
    background: var(--acc-on-dark);
    color: var(--ink);
}

.stlh-sheet-btn--primary:hover { background: transparent; color: var(--acc-on-dark); }

/* La page derrière ne défile pas pendant que la fiche est ouverte. */
html.stlh-sheet-lock { overflow: hidden; }

/* ── Défilement de la fiche ──
   La zone de texte avait bien overflow-y: auto, mais sa rangée de grille
   grandissait avec le contenu : tout débordait sous le cadre (overflow:
   hidden) et rien ne défilait. On borne donc la zone de texte elle-même,
   à la hauteur de la fenêtre. dvh suit la barre d'adresse mobile qui
   apparaît et disparaît ; vh sert de repli. */
.stlh-sheet { max-height: min(86dvh, 720px); }

.stlh-sheet-body {
    max-height: min(86vh, 720px);
    max-height: min(86dvh, 720px);
    -webkit-overflow-scrolling: touch;
}

/* Les boutons restent à portée pendant qu'on lit : ils collent au bas
   de la zone qui défile, sur un fond qui masque le texte dessous. */
.stlh-sheet-actions {
    position: sticky;
    bottom: -26px;
    z-index: 1;
    margin-bottom: -26px;
    padding: 14px 0 26px;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0), #0d0d0d 22px);
}

.stlh-sheet [hidden] { display: none !important; }

/* Code vide (un film n'en a pas) : pas de case fantôme avant les étiquettes. */
.stlh-sheet-code:empty { display: none; }

/* ── Fiche film ── */
.stlh-sheet-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stlh-sheet-facts li {
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    font: 700 10.5px/1.2 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stlh-sheet-synopsis {
    margin: 0;
    font: 400 14.5px/1.6 var(--sans);
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 600px) {
    /* En bas d'écran : l'affiche en bandeau (150px) + la zone qui défile. */
    .stlh-sheet { max-height: 88dvh; }
    .stlh-sheet-body {
        max-height: calc(88vh - 150px);
        max-height: calc(88dvh - 150px);
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
    .stlh-sheet-inner:not(.has-poster) .stlh-sheet-body { max-height: 88dvh; }
    .stlh-sheet-actions { bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    /* Cible tactile de 44px pour fermer. */
    .stlh-sheet-close { width: 44px; height: 44px; }
}

/* ───────────────────────────────────────────────
   22.4 · Reprendre (membres) et compteur
   Deux bandes, pas deux sections : elles n'ont pas de titre de
   section, pas de numéro, et tiennent sur une ligne.
─────────────────────────────────────────────── */

/* ── Reprendre : la bande fine du membre connecté ── */
.stlh-resume {
    border-bottom: 1px solid var(--bd);
    background: var(--surf);
}

.stlh-resume-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.stlh-resume-title {
    flex: 0 0 auto;
    margin: 0;
    font: 900 13px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx);
}

.stlh-resume-list {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.stlh-resume-list::-webkit-scrollbar { display: none; }

.stlh-resume-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 230px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--bd);
    background: var(--bg);
    color: var(--tx);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.stlh-resume-item:hover { background: var(--tx); color: var(--bg); }

.stlh-resume-thumb {
    flex: 0 0 34px;
    height: 50px;
    background: var(--surf);
    overflow: hidden;
}

.stlh-resume-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stlh-resume-body { display: grid; gap: 5px; min-width: 0; }

.stlh-resume-name {
    font: 700 13px/1.15 var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stlh-resume-bar { display: block; height: 4px; background: var(--surf); border: 1px solid currentColor; }
.stlh-resume-bar > span { display: block; height: 100%; background: currentColor; }

.stlh-resume-meta { font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

.stlh-resume-all {
    flex: 0 0 auto;
    font: 700 11px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx);
}

/* ── Compteur : quatre chiffres, quatre cases ── */
.stlh-count {
    border-top: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
}

.stlh-count-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--bd);
}

.stlh-count-grid > li { border-right: 1px solid var(--bd); }

.stlh-count-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    padding: 26px 22px 22px;
    color: var(--tx);
    text-decoration: none;
    transition: background .12s, color .12s;
}

a.stlh-count-cell:hover { background: var(--tx); color: var(--bg); }

.stlh-count-n {
    font: 900 clamp(46px, 5.6vw, 84px)/.82 var(--sans);
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
}

.stlh-count-l {
    max-width: 18ch;
    font: 700 12px/1.3 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ───────────────────────────────────────────────
   22.5 · Contenu éditable
   La section n'est pas bornée : les blocs de section wf/* portent
   déjà leur padding et leur max-width interne, ils doivent pouvoir
   occuper toute la largeur.

   Seuls les blocs sans gouttière à eux, texte courant, listes,
   médias, timeline Streamlog, sont ramenés dans la colonne de
   lecture. Une liste blanche plutôt qu'une exclusion : un bloc
   inconnu passe en pleine largeur, ce qu'on attend d'un bloc de
   section.
─────────────────────────────────────────────── */
.stlh-content {
    padding: var(--stlh-section) 0;
    border-top: 1px solid var(--bd);
}

.stlh-content > p,
.stlh-content > h1,
.stlh-content > h2,
.stlh-content > h3,
.stlh-content > h4,
.stlh-content > h5,
.stlh-content > h6,
.stlh-content > ul,
.stlh-content > ol,
.stlh-content > dl,
.stlh-content > pre,
.stlh-content > table,
.stlh-content > figure,
.stlh-content > blockquote,
.stlh-content > hr,
.stlh-content > .wp-block-buttons,
.stlh-content > .wp-block-columns,
.stlh-content > .wp-block-embed,
.stlh-content > .stl-timeline {
    max-width: var(--wf-max-width, var(--max));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

/* Les alignements Gutenberg gardent le dernier mot. */
.stlh-content > .alignwide {
    max-width: calc(var(--wf-max-width, var(--max)) + 200px);
    margin-left: auto;
    margin-right: auto;
}

.stlh-content > .alignfull {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ───────────────────────────────────────────────
   22.6 · Le journal
   Les articles d'abord. Rangée 1 : manchette (2/3) et deux articles
   illustrés empilés (1/3). Rangée 2 : trois cartes et une colonne
   « Aussi » en texte seul. Filets de 1px partagés, aucune ombre :
   la hiérarchie tient à la taille des images et des titres.
   Les rubriques ferment le bloc, en petit.
─────────────────────────────────────────────── */
.stlh-journal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    border: 1px solid var(--bd);
}

.stlh-post {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--tx);
    text-decoration: none;
    background: var(--bg);
    transition: background .12s, color .12s;
}

.stlh-post-thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--surf);
    border-bottom: 1px solid var(--bd);
    overflow: hidden;
}

.stlh-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.stlh-post:hover .stlh-post-thumb img { transform: scale(1.03); }

.stlh-post-body { padding: 16px 18px 20px; }

.stlh-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 10px;
    font: 600 10.5px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

/* La rubrique reste une information, pas un bouton. */
.stlh-post-cat { color: var(--tx); }
.stlh-post-read::before { content: '/ '; }

.stlh-post-title {
    margin: 0;
    font: 800 clamp(16px, 1.35vw, 19px)/1.18 var(--sans);
    letter-spacing: -.02em;
    color: inherit;
    overflow-wrap: anywhere;
}

.stlh-post:hover .stlh-post-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ── Manchette ── */
.stlh-post--lead { border-right: 1px solid var(--bd); }
.stlh-post--lead .stlh-post-thumb { aspect-ratio: 16 / 9; }
.stlh-post--lead .stlh-post-body { padding: 24px 28px 30px; }

.stlh-post--lead .stlh-post-meta { font-size: 11.5px; margin-bottom: 14px; }

.stlh-post--lead .stlh-post-title {
    font-size: clamp(28px, 3.3vw, 50px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
    hyphens: auto;
}

.stlh-post-excerpt {
    max-width: 62ch;
    margin: 16px 0 0;
    font: 400 16px/1.55 var(--sans);
    color: var(--tx);
}

/* ── Deux articles empilés à côté ── */
.stlh-journal-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.stlh-journal-side > .stlh-post + .stlh-post { border-top: 1px solid var(--bd); }
.stlh-post--side .stlh-post-thumb { aspect-ratio: 16 / 9; flex: 0 0 auto; }
.stlh-post--side .stlh-post-title { font-size: clamp(17px, 1.5vw, 21px); }

/* ── Rangée 2 : trois cartes + « Aussi » ── */
.stlh-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--bd);
    border-top: 0;
}

.stlh-posts-grid > * + * { border-left: 1px solid var(--bd); }

.stlh-also { padding: 18px 18px 20px; background: var(--surf); }

.stlh-also-lbl {
    margin: 0 0 6px;
    font: 900 13px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stlh-also-list { margin: 0; padding: 0; list-style: none; }

.stlh-also-list a {
    display: grid;
    gap: 5px;
    padding: 12px 0;
    border-top: 1px solid var(--bd);
    color: var(--tx);
    text-decoration: none;
}

.stlh-also-list li:first-child a { border-top: 0; }

.stlh-also-list time {
    font: 600 10.5px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

.stlh-also-list span { font: 700 14.5px/1.25 var(--sans); letter-spacing: -.01em; }
.stlh-also-list a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Pied : rubriques et archives, en petit ── */
.stlh-journal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 18px;
}

.stlh-rubriques {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    font: 600 11.5px/1.2 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stlh-rubriques-lbl { color: var(--mt); }

.stlh-rubriques a {
    color: var(--tx);
    text-decoration: none;
}

.stlh-rubriques a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stlh-rubriques sup { margin-left: 2px; font-size: 9px; color: var(--mt); }

.stlh-journal-foot .stlh-section-link { padding: 10px 14px; font-size: 11px; }

@media (max-width: 1100px) {
    .stlh-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stlh-also { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--bd); }
    .stlh-also-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
    .stlh-also-list li:first-child a,
    .stlh-also-list a { border-top: 0; }
}

@media (max-width: 900px) {
    .stlh-journal { grid-template-columns: minmax(0, 1fr); }
    .stlh-post--lead { border-right: 0; border-bottom: 1px solid var(--bd); }
    .stlh-journal-side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stlh-journal-side > .stlh-post + .stlh-post { border-top: 0; border-left: 1px solid var(--bd); }
}

@media (max-width: 600px) {
    .stlh-post--lead .stlh-post-body { padding: 18px 16px 22px; }

    /* Sous le pouce, tout ce qui suit la manchette passe en liste :
       vignette carrée à gauche, titre à droite. */
    .stlh-journal-side { grid-template-columns: minmax(0, 1fr); }
    .stlh-journal-side > .stlh-post + .stlh-post { border-left: 0; border-top: 1px solid var(--bd); }
    .stlh-posts-grid { grid-template-columns: minmax(0, 1fr); }
    .stlh-posts-grid > * + * { border-left: 0; border-top: 1px solid var(--bd); }

    .stlh-post--side,
    .stlh-post--card { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
    .stlh-post--side .stlh-post-thumb,
    .stlh-post--card .stlh-post-thumb { aspect-ratio: 1; border-bottom: 0; border-right: 1px solid var(--bd); }
    .stlh-post--side .stlh-post-body,
    .stlh-post--card .stlh-post-body { padding: 12px 14px; }
    .stlh-post--side .stlh-post-title,
    .stlh-post--card .stlh-post-title { font-size: 14.5px; }

    .stlh-also-list { grid-template-columns: minmax(0, 1fr); }
    .stlh-also-list a { border-top: 1px solid var(--bd); }
    .stlh-also-list li:first-child a { border-top: 0; }
}

/* ───────────────────────────────────────────────
   22.6 bis · À enchaîner
   Bande noire bord à bord : .stlh-binge n'est dans aucun conteneur,
   seul son .stlh-wrap intérieur est borné. En fond, l'affiche de la
   carte survolée, floutée et assombrie (script.js, initHomeBinge).
   Les cartes sont de grandes affiches : c'est l'image qui vend la
   saison, le texte ne fait que confirmer.
─────────────────────────────────────────────── */
.stlh-binge {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: var(--stlh-section) 0;
    background: var(--ink, #0a0a0a);
    color: var(--paper, #fff);
    overflow: hidden;
}

.stlh-binge-bg {
    position: absolute;
    inset: -40px;
    z-index: -1;
    pointer-events: none;
}

.stlh-binge-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(38px) saturate(1.3);
    opacity: .38;
    transform: scale(1.1);
    transition: opacity .35s ease;
}

.stlh-binge-bg-img.is-swapping { opacity: 0; }

/* Voile : garde le texte lisible quelle que soit l'affiche. */
.stlh-binge-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .6) 55%, rgba(10, 10, 10, .85) 100%);
}

.stlh-binge-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px 32px;
    margin-bottom: 34px;
    padding-top: 14px;
    border-top: 6px solid var(--paper, #fff);
}

.stlh-binge .stlh-section-num { color: var(--paper, #fff); }
.stlh-binge .stlh-section-num span { color: rgba(255, 255, 255, .5); }

.stlh-binge .stlh-binge-title {
    grid-column: 1;
    max-width: 14ch;
    font-size: clamp(2.6rem, 1.2rem + 5.2vw, 6.4rem);
    line-height: .86;
    color: var(--paper, #fff);
}

.stlh-binge-lede {
    grid-column: 1;
    max-width: 52ch;
    margin: 0;
    font: 500 clamp(15px, 1.25vw, 18px)/1.5 var(--sans);
    color: rgba(255, 255, 255, .82);
}

/* Onglets : deux grosses cases, l'active est pleine. */
.stlh-binge-tabs {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    display: flex;
    border: 1px solid var(--paper, #fff);
}

.stlh-binge-tabs[hidden] { display: none; }

.stlh-binge-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--paper, #fff);
    font: 800 13px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.stlh-binge-tab + .stlh-binge-tab { border-left: 1px solid var(--paper, #fff); }
.stlh-binge-tab:hover { background: rgba(255, 255, 255, .12); }

.stlh-binge-tab[aria-selected="true"] {
    background: var(--paper, #fff);
    color: var(--ink, #0a0a0a);
}

.stlh-binge-tab-n { font-weight: 500; opacity: .6; }

/* Sans JavaScript, les deux rangées se suivent, chacune titrée. */
.stlh-binge-panel + .stlh-binge-panel { margin-top: 40px; }
.stlh-binge-panel-lbl {
    margin: 0 0 12px;
    font: 800 12px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.stlh-binge.is-enhanced .stlh-binge-panel-lbl { display: none; }
.stlh-binge.is-enhanced .stlh-binge-panel + .stlh-binge-panel { margin-top: 0; }
.stlh-binge-panel[hidden] { display: none; }

/* Rangée de grandes affiches, qui défile au doigt ou au trackpad. */
.stlh-binge-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(170px, 17vw, 240px);
    gap: 18px;
    margin: 0;
    padding: 0 0 16px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .5) transparent;
    /* La rangée file jusqu'au bord droit de l'écran : l'affiche coupée
       dit qu'il y en a d'autres, sans flèche ni légende. */
    margin-right: min(0px, calc(50% - 50vw));
    padding-right: var(--pad);
}

.stlh-binge-row > li { scroll-snap-align: start; }
.stlh-binge-row > li[hidden] { display: none; } /* saisons en réserve, déroulées par « Tout afficher » */

.stlh-bcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--paper, #fff);
    text-decoration: none;
}

.stlh-bcard-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(255, 255, 255, .35);
    background: #1a1a1a;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s, box-shadow .2s;
}

.stlh-bcard-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stlh-bcard:hover .stlh-bcard-poster,
.stlh-bcard:focus-visible .stlh-bcard-poster {
    transform: translate(-4px, -4px);
    border-color: var(--paper, #fff);
    box-shadow: 8px 8px 0 var(--paper, #fff);
}

.stlh-bcard-season {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 9px;
    background: var(--paper, #fff);
    color: var(--ink, #0a0a0a);
    font: 900 18px/1 var(--sans);
    letter-spacing: -.03em;
}

.stlh-bcard-stamp {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    background: var(--wf-red, #d23c0f);
    color: #fff;
    font: 800 10.5px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stlh-bcard-body {
    display: grid;
    gap: 6px;
    padding-top: 12px;
}

.stlh-bcard-title {
    font: 900 16px/1.1 var(--sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.stlh-bcard:hover .stlh-bcard-title { text-decoration: underline; text-underline-offset: 3px; }

.stlh-bcard-meta,
.stlh-bcard-date {
    font: 700 11px/1.2 var(--sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.stlh-bcard-date { color: var(--paper, #fff); }

.stlh-bcard-progress {
    display: block;
    height: 6px;
    border: 1px solid var(--paper, #fff);
}

.stlh-bcard-progress > span {
    display: block;
    height: 100%;
    background: var(--paper, #fff);
}

.stlh-binge .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .stlh-binge-head { grid-template-columns: minmax(0, 1fr); }
    .stlh-binge-tabs { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (max-width: 600px) {
    .stlh-binge-row { grid-auto-columns: 58vw; gap: 12px; }
    .stlh-binge-tab { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .stlh-bcard-poster,
    .stlh-binge-bg-img { transition: none; }
    .stlh-bcard:hover .stlh-bcard-poster { transform: none; }
}

/* Dernière carte de la rangée : « +24 autres saisons, tout voir ».
   Même format qu'une affiche, en creux : on la lit comme la suite
   de la rangée, pas comme un bouton posé à côté. */
.stlh-bmore {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    aspect-ratio: 2 / 3;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .55);
    color: var(--paper, #fff);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

/* La même carte en bouton (pas de page complète : elle déroule la suite
   sur place). On efface l'habillage natif du bouton, rien d'autre. */
button.stlh-bmore {
    width: 100%;
    margin: 0;
    background: transparent;
    border-radius: 0;
    font: inherit;
    text-align: left;
    align-items: flex-start;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}

.stlh-bmore-n {
    font: 900 clamp(2.6rem, 1.6rem + 2.4vw, 4rem)/.85 var(--sans);
    letter-spacing: -.05em;
}

.stlh-bmore-lbl {
    font: 800 13px/1.2 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stlh-bmore-cta {
    margin-top: 6px;
    font: 700 11px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.stlh-bmore:hover,
.stlh-bmore:focus-visible {
    border-style: solid;
    border-color: var(--paper, #fff);
    background: var(--paper, #fff);
    color: var(--ink, #0a0a0a);
}

.stlh-bmore:hover .stlh-bmore-cta,
.stlh-bmore:focus-visible .stlh-bmore-cta { color: var(--ink, #0a0a0a); }

/* ───────────────────────────────────────────────
   22.6 ter · Page « À enchaîner » (page-a-enchainer.php)
   La bande noire de l'accueil, dépliée sur toute la page : mêmes
   cartes, en grille plutôt qu'en rangée. Le fond flou reste fixe
   pendant le défilement ; clip-path l'empêche de déborder sur
   l'en-tête et le pied de page.
─────────────────────────────────────────────── */
.stlh-binge-full {
    min-height: 70vh;
    clip-path: inset(0);
}

.stlh-binge-full .stlh-binge-bg { position: fixed; }

.stlh-binge-full .stlh-section-num a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sommaire : les onglets de l'accueil, devenus des ancres. */
.stlh-binge-jump {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    display: flex;
    border: 1px solid var(--paper, #fff);
}

.stlh-binge-jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 18px;
    color: var(--paper, #fff);
    font: 800 13px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.stlh-binge-jump a + a { border-left: 1px solid var(--paper, #fff); }

.stlh-binge-jump a:hover,
.stlh-binge-jump a:focus-visible {
    background: var(--paper, #fff);
    color: var(--ink, #0a0a0a);
}

.stlh-binge-group {
    margin-top: 64px;
    scroll-margin-top: 90px;
}

.stlh-binge-group-head {
    display: grid;
    gap: 10px;
    margin-bottom: 28px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .45);
}

.stlh-binge-group-lbl {
    margin: 0;
    font: 800 12px/1 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stlh-binge-group-lbl span { margin-left: .6em; color: rgba(255, 255, 255, .6); }

.stlh-binge-group-title {
    margin: 0;
    font: 900 clamp(1.8rem, 1.1rem + 2.4vw, 3.2rem)/.9 var(--sans);
    letter-spacing: -.04em;
    text-transform: uppercase;
    color: var(--paper, #fff);
}

.stlh-binge-group-lede {
    max-width: 60ch;
    margin: 0;
    font: 500 15px/1.5 var(--sans);
    color: rgba(255, 255, 255, .78);
}

.stlh-binge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 210px), 1fr));
    gap: 36px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stlh-binge-empty {
    max-width: 52ch;
    margin: 40px 0 0;
    font: 500 17px/1.5 var(--sans);
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 900px) {
    .stlh-binge-jump { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (max-width: 600px) {
    .stlh-binge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .stlh-binge-jump a { padding: 12px 14px; }
    .stlh-bmore { padding: 14px; }
}

/* ───────────────────────────────────────────────
   22.7 · Nouveau au catalogue
   Le dernier ajout en fiche (affiche, faits, accroche), les huit
   suivants en planche contact 4 × 2. Une fiche sans affiche montre
   son titre en capitales blanches sur encre : c'est plus lisible
   qu'une croix, et la planche garde son rythme.
─────────────────────────────────────────────── */
.stlh-new {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    border: 1px solid var(--bd);
}

/* ── La fiche en tête ── */
.stlh-new-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-right: 1px solid var(--bd);
    background: var(--tx);
    color: var(--bg);
    text-decoration: none;
}

.stlh-new-poster {
    position: relative;
    min-height: 360px;
    border-right: 1px solid var(--bd);
    overflow: hidden;
}

.stlh-new-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.stlh-new-lead:hover .stlh-new-poster img { transform: scale(1.04); }

.stlh-new-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
}

.stlh-new-kicker {
    align-self: start;
    padding: 6px 9px;
    background: var(--bg);
    color: var(--tx);
    font: 800 11px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stlh-new-title {
    font: 900 clamp(28px, 2.8vw, 44px)/.92 var(--sans);
    letter-spacing: -.05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.stlh-new-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stlh-new-facts > span {
    padding: 5px 8px;
    border: 1px solid currentColor;
    font: 700 11px/1 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stlh-new-lede {
    font: 400 15px/1.5 var(--sans);
    opacity: .85;
}

.stlh-new-cta {
    margin-top: auto;
    padding-top: 10px;
    font: 800 12px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stlh-new-lead:hover .stlh-new-cta { text-decoration: underline; text-underline-offset: 4px; }

/* ── La planche contact ── */
.stlh-contact {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Filets partagés : chaque case trace sa droite et son bas, la
   bordure du conteneur ferme le reste. */
.stlh-contact > li {
    border-right: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
}

.stlh-contact > li:nth-child(4n)        { border-right: 0; }
.stlh-contact > li:nth-last-child(-n+4) { border-bottom: 0; }

.stlh-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 10px 14px;
    color: var(--tx);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.stlh-tile:hover { background: var(--tx); color: var(--bg); }

.stlh-tile-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    margin-bottom: 10px;
    background: var(--surf);
    overflow: hidden;
}

.stlh-tile-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stlh-tile-noposter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    background: var(--ink, #0a0a0a);
    color: var(--paper, #fff);
    font: 900 clamp(15px, 1.4vw, 21px)/.95 var(--sans);
    letter-spacing: -.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.stlh-tile:hover .stlh-tile-noposter { outline: 1px solid var(--bg); outline-offset: -1px; }

.stlh-tile-num {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 7px;
    background: var(--bg);
    color: var(--tx);
    font: 900 12px/1 var(--sans);
    font-variant-numeric: tabular-nums;
}

.stlh-tile-type {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    background: var(--tx);
    color: var(--bg);
    font: 700 9.5px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stlh-tile-title {
    font: 800 13.5px/1.2 var(--sans);
    letter-spacing: -.01em;
}

.stlh-tile-meta {
    margin-top: 5px;
    font: 600 10px/1.2 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

/* ───────────────────────────────────────────────
   22.8 · Où regarder et Explorer
─────────────────────────────────────────────── */

/* ── Plateformes : une grille de cases, pas de cartes ── */
.stlh-where-layout.has-leaving {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--bd);
}

.stlh-pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bd);
    border-left: 1px solid var(--bd);
}

.stlh-pf-grid > li {
    border-right: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
}

/* Avec la colonne « part bientôt », c'est le cadre qui ferme. */
.has-leaving .stlh-pf-grid { border: 0; }

.stlh-pf {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    height: 100%;
    padding: 18px 40px 18px 16px;
    color: var(--tx);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.stlh-pf:hover { background: var(--tx); color: var(--bg); }

/* Pastille du plugin (logo ou initiales), redessinée carrée. */
.stlh-pf .stl-pf-badge {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bd);
    background: var(--bg);
    overflow: hidden;
}

.stlh-pf .stl-pf-badge img { width: 100%; height: 100%; object-fit: contain; }

.stlh-pf .stl-pf-initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--stl-pf, var(--tx));
    color: #fff;
    font: 900 15px/1 var(--sans);
    letter-spacing: -.02em;
}

.stlh-pf-name {
    font: 800 16px/1.1 var(--sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.stlh-pf-vol {
    font: 600 11px/1.2 var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
}

.stlh-pf-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font: 800 18px/1 var(--sans);
    transition: transform .12s;
}

.stlh-pf:hover .stlh-pf-arrow { transform: translate(4px, -50%); }

/* ── Part bientôt ── */
.stlh-leaving {
    padding: 20px;
    border-left: 1px solid var(--bd);
    background: var(--surf);
}

.stlh-leaving-title {
    margin: 0;
    font: 900 20px/1 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.stlh-leaving-sub {
    margin: 6px 0 14px;
    font: 500 12.5px/1.4 var(--sans);
    color: var(--mt);
}

.stlh-leaving-list { margin: 0; padding: 0; list-style: none; }

.stlh-leaving-list a {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 10px 0;
    border-top: 1px solid var(--bd);
    color: var(--tx);
    text-decoration: none;
}

.stlh-leaving-list time {
    grid-row: 1 / span 2;
    font: 900 13px/1.1 var(--sans);
    text-transform: uppercase;
}

.stlh-leaving-name { font: 700 14px/1.2 var(--sans); }
.stlh-leaving-list a:hover .stlh-leaving-name { text-decoration: underline; }
.stlh-leaving-pf { font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mt); }

/* ── Explorer : un index imprimé ── */
.stlh-explore-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.stlh-explore-layout.is-single { grid-template-columns: minmax(0, 1fr); }

/* Les genres coulent comme un texte : de gros mots en capitales, le
   volume en exposant. Le plus fourni vient en premier. */
.stlh-gx-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stlh-gx-list > li:not(:last-child)::after {
    content: '/';
    margin: 0 .22em 0 .12em;
    font: 300 clamp(26px, 3.3vw, 50px)/1.05 var(--sans);
    color: var(--mt);
}

.stlh-gx {
    font: 900 clamp(26px, 3.3vw, 50px)/1.05 var(--sans);
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: var(--tx);
    text-decoration: none;
}

.stlh-gx:hover { background: var(--tx); color: var(--bg); }

.stlh-gx-n {
    margin-left: .12em;
    font: 700 13px/1 var(--sans);
    letter-spacing: 0;
    vertical-align: super;
    color: var(--mt);
}

.stlh-gx:hover .stlh-gx-n { color: var(--bg); }

.stlh-countries-title {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 6px solid var(--tx);
    font: 900 20px/1 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.stlh-countries-list { margin: 0; padding: 0; list-style: none; }

.stlh-countries-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--bd);
    color: var(--tx);
    text-decoration: none;
    font: 700 14px/1.2 var(--sans);
}

.stlh-countries-list a:hover { background: var(--tx); color: var(--bg); }

.stlh-country-n { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .6; }

/* ── Compte : une ligne pour les visiteurs ── */
.stlh-join {
    border-top: 1px solid var(--bd);
    background: var(--tx);
    color: var(--bg);
}

.stlh-join-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.stlh-join-lbl {
    margin: 0;
    font: 900 18px/1 var(--sans);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.stlh-join-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 500 14px/1.3 var(--sans);
}

.stlh-join-list li::before { content: '✓ '; font-weight: 900; }

.stlh-join-btn {
    margin-left: auto;
    padding: 12px 18px;
    border: 1px solid var(--bg);
    font: 800 12px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bg);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.stlh-join-btn:hover { background: var(--bg); color: var(--tx); }

/* ── Points de rupture des sections ci-dessus ── */
@media (max-width: 1100px) {
    .stlh-new { grid-template-columns: minmax(0, 1fr); }
    .stlh-new-lead { border-right: 0; border-bottom: 1px solid var(--bd); }
    .stlh-explore-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .stlh-where-layout.has-leaving { grid-template-columns: minmax(0, 1fr); }
    .stlh-leaving { border-left: 0; border-top: 1px solid var(--bd); }
}

@media (max-width: 600px) {
    .stlh-section-head { grid-template-columns: 1fr; }
    .stlh-section-link { grid-column: 1; grid-row: auto; justify-self: start; }

    .stlh-resume-title { display: none; }
    .stlh-resume-all   { display: none; }
    .stlh-resume-item  { width: 200px; }

    .stlh-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stlh-count-grid > li:nth-child(n+3) { border-top: 1px solid var(--bd); }
    .stlh-count-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stlh-count-cell { padding: 18px 14px 16px; }

    .stlh-new-poster { min-height: 240px; }
    .stlh-new-body { padding: 18px 16px; gap: 10px; }
    .stlh-new-title { font-size: 24px; }
    .stlh-new-lede { display: none; }

    .stlh-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stlh-contact > li:nth-child(4n)        { border-right: 1px solid var(--bd); }
    .stlh-contact > li:nth-child(2n)        { border-right: 0; }
    .stlh-contact > li:nth-last-child(-n+4) { border-bottom: 1px solid var(--bd); }
    .stlh-contact > li:nth-last-child(-n+2) { border-bottom: 0; }

    .stlh-pf-grid { grid-template-columns: 1fr; }

    .stlh-join-btn { margin-left: 0; }
}

/* ───────────────────────────────────────────────
   22.9 · Responsive & accessibilité
─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .stlh-home { --stlh-section: 62px; }

    .stlh-hero { min-height: auto; }

}

@media (max-width: 600px) {
    .stlh-home { --stlh-section: 46px; --stlh-gap: 14px; }

    .stlh-search     { flex-direction: column; }
    .stlh-search-btn { padding: 14px; }
    .stlh-search-wrap { flex-basis: 100%; }

    /* Planning au doigt : l'en-tête passe sur deux lignes (la réglette
       prend toute la largeur et glisse), les flèches cèdent la place au
       geste. Deux cartes et demie visibles, la troisième déborde. */
    .stlh-today       { --stlh-card-w: min(40vw, 158px); --stlh-card-gap: 10px; --stlh-day-gap: 30px; }
    .stlh-today-arrow { display: none !important; }
    .stlh-today       { --stlh-arrows-w: 40px; }
    .stlh-card--cal   { width: min(72vw, 300px); }
    .stlh-tag         { padding: 8px 11px 8px 10px; }
    .stlh-tag-name    { font-size: 13px; }
    .stlh-tag-meta    { font-size: 8.5px; }
    .stlh-card-title  { font-size: 13px; }
    .stlh-card-network { font-size: 8px; padding: 3px 5px; }
    .stlh-flag          { font-size: 8px; padding: 3px 5px; }

    /* La fiche épisode monte du bas, pleine largeur, affiche en bandeau. */
    .stlh-sheet {
        width: 100vw;
        max-width: 100vw;
        max-height: 88vh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }
    .stlh-sheet[open] { animation-name: stlh-sheet-up; }
    .stlh-sheet-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .stlh-sheet-poster { height: 150px; }
    .stlh-sheet-poster img { object-position: center 25%; }
    .stlh-sheet-poster::after { background: linear-gradient(180deg, transparent 30%, #0d0d0d); }
    .stlh-sheet-body { padding: 0 18px 22px; }
    .stlh-sheet-inner:not(.has-poster) .stlh-sheet-body { padding: 56px 18px 22px; }
    .stlh-sheet-btn { flex: 1 1 auto; justify-content: center; }
}

/* Mouvement réduit : on garde le décor, on enlève tout ce qui bouge.
   Le mur reste lisible, le faisceau se fige au centre. */
@media (prefers-reduced-motion: reduce) {
    .stlh-wall-row,
    .stlh-hero-beam,
    .stlh-hero-grain {
        animation: none !important;
    }

    .stlh-post:hover .stlh-post-thumb img,
    .stlh-new-lead:hover .stlh-new-poster img,
    .stlh-card-link:hover .stlh-card-poster {
        transform: none;
    }

    .stlh-cal:hover,
    .stlh-cal:hover .stlh-cal-arrow,
    .stlh-tag:hover .stlh-tag-ff svg { transform: none; }

    .stlh-day.is-today .stlh-tag-name::before,
    .stlh-note-arrow,
    .stlh-today.is-enhanced .stlh-card,
    .stlh-today.is-enhanced .stlh-tag,
    .stlh-today.is-enhanced .stlh-day-cards::before,
    .stlh-today.is-enhanced .stlh-day-cards::after,
    .stlh-today.is-enhanced .stlh-today-arrow--next { animation: none; }

    .stlh-today.is-enhanced .stlh-card-poster img,
    .stlh-hero.is-fading .stlh-wall-img { transition: none; }

    .stlh-today.is-enhanced .stlh-card-poster:has(> img:not(.is-loaded):not(.is-broken))::before { animation: none; }

    .stlh-tag,
    .stlh-card { transition: none; }

    .stlh-sheet[open],
    .stlh-sheet[open]::backdrop { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   23. ARCHIVES
   Mise en forme de category.php, tag.php, archive.php, author.php
   et search.php, tous rendus par template-parts/archive-shell.php.

   ── PORTÉE ──
   Tous les sélecteurs sont préfixés .wfa- et vivent sous .wf-archive.
   Aucune autre page du site ne peut être touchée.

   ── LE PARTI PRIS ──
   Une archive n'est pas une liste, c'est un carrefour. La page est
   donc bâtie en quatre temps qui répondent chacun à une question :
     · l'en-tête     → où suis-je, et qu'est-ce qu'il y a ici ?
     · la barre      → où puis-je aller sans revenir en arrière ?
     · la grille     → par quoi commencer ? (une vedette, puis le reste)
     · le pied       → et après la dernière page ?

   ── STRUCTURE ──
   23.1 Ossature & titres de section
   23.2 En-tête (fil d'Ariane, titre, compteurs)
   23.3 Barre des rubriques + recherche
   23.4 Chips (rubriques, sujets)
   23.5 Grille & cartes
   23.6 Pagination
   23.7 Sujets & autres rubriques
   23.8 Archive vide
   23.9 Responsive & accessibilité
════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   23.1 · Ossature & titres de section
─────────────────────────────────────────────── */
.wf-archive {
    /* Réglages locaux : un seul endroit pour respirer plus ou moins. */
    --wfa-gap:     20px;
    --wfa-section: 74px;
}

/* Même gouttière que .container, sans en dépendre. */
.wfa-wrap {
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
    padding: 0 var(--pad);
}

.wfa-section {
    padding: var(--wfa-section) 0;
    border-top: 1px solid var(--bd);
}

.wfa-section-head { margin-bottom: 30px; }

.wfa-section-num {
    margin: 0 0 6px;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-section-title {
    margin: 0;
    font: 600 clamp(21px, 2.8vw, 32px)/1.05 var(--sans);
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--tx);
}

/* Libellé réservé aux lecteurs d'écran : la règle du thème est scopée
   sur .stlh-home, on la redéclare pour les archives. */
.wf-archive .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────────
   23.2 · En-tête
─────────────────────────────────────────────── */
.wfa-head {
    padding: clamp(30px, 5vw, 58px) 0 clamp(24px, 3.5vw, 40px);
    background: var(--surf);
    border-bottom: 1px solid var(--bd);
}

.wfa-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
    font: 400 10.5px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-crumbs a {
    color: var(--mt);
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

.wfa-crumbs a:hover {
    color: var(--tx);
    border-bottom-color: var(--bd);
}

.wfa-crumbs-sep  { color: var(--bd); }
.wfa-crumbs-here { color: var(--tx); }

.wfa-kicker {
    margin: 0 0 10px;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-title {
    margin: 0;
    font: 600 clamp(31px, 6vw, 64px)/1 var(--sans);
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--tx);
    /* Un titre de recherche ou de série peut être long et sans espace. */
    overflow-wrap: anywhere;
}

.wfa-desc {
    max-width: 60ch;
    margin-top: 16px;
}

.wfa-desc p {
    margin: 0 0 8px;
    font: 300 clamp(14.5px, 1.5vw, 17px)/1.6 var(--sans);
    color: var(--bds);
}

.wfa-desc p:last-child { margin-bottom: 0; }

/* Compteurs : le volume de la liste, avant de la parcourir. */
.wfa-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--bd);
    list-style: none;
}

.wfa-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wfa-stat-num {
    font: 500 clamp(18px, 2.2vw, 25px)/1 var(--sans);
    letter-spacing: -.02em;
    color: var(--tx);
}

.wfa-stat-lbl {
    font: 400 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

/* Sous-rubriques */
.wfa-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.wfa-children-lbl {
    margin-right: 4px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

/* ───────────────────────────────────────────────
   23.3 · Barre des rubriques + recherche
   Collante sous la navbar : changer de rubrique reste à un clic,
   même au milieu d'une longue liste.
─────────────────────────────────────────────── */
.wfa-bar {
    position: sticky;
    top: var(--h-navbar, 60px);
    z-index: 90;
    background: var(--bg);
    border-bottom: 1px solid var(--bd);
}

.wfa-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.wfa-taxo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    /* Beaucoup de rubriques : on défile latéralement plutôt que de
       casser la barre sur deux lignes et de doubler sa hauteur. */
    overflow-x: auto;
    scrollbar-width: none;
}

.wfa-taxo::-webkit-scrollbar { display: none; }
.wfa-taxo li { flex: 0 0 auto; }

.wfa-search {
    display: flex;
    flex: 0 0 auto;
    border: 1px solid var(--bd);
    border-radius: 100px;
    background: var(--bg);
    overflow: hidden;
    transition: border-color .15s;
}

.wfa-search:focus-within { border-color: var(--tx); }

.wfa-search-input {
    width: 165px;
    padding: 8px 15px;
    border: 0;
    background: transparent;
    font: 400 12.5px/1.2 var(--sans);
    color: var(--tx);
}

.wfa-search-input:focus     { outline: none; }
.wfa-search-input::placeholder { color: var(--mt); }

.wfa-search-btn {
    padding: 0 15px;
    border: 0;
    border-left: 1px solid var(--bd);
    background: var(--surf);
    font: 500 12px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.wfa-search-btn:hover {
    background: var(--tx);
    color: var(--bg);
}

/* ───────────────────────────────────────────────
   23.4 · Chips, rubriques, sous-rubriques, sujets
─────────────────────────────────────────────── */
.wfa-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--bd);
    border-radius: 100px;
    font: 400 12.5px/1 var(--sans);
    color: var(--bds);
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.wfa-chip:hover {
    background: var(--surf);
    border-color: var(--bds);
    color: var(--tx);
}

.wfa-chip.is-active {
    background: var(--tx);
    border-color: var(--tx);
    color: var(--bg);
}

.wfa-chip-num {
    font: 400 10px/1 var(--mono);
    color: var(--mt);
}

.wfa-chip:hover .wfa-chip-num     { color: var(--bds); }
.wfa-chip.is-active .wfa-chip-num { color: rgba(255, 255, 255, .6); }

/* ───────────────────────────────────────────────
   23.5 · Grille & cartes
─────────────────────────────────────────────── */
.wfa-list { padding: var(--wfa-section) 0; }

.wfa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wfa-gap);
}

.wfa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    overflow: hidden;
    transition: border-color .15s, transform .18s;
}

.wfa-card:hover {
    border-color: var(--tx);
    transform: translateY(-3px);
}

.wfa-card-thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--surf);
    border-bottom: 1px solid var(--bd);
    overflow: hidden;
}

.wfa-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.wfa-card:hover .wfa-card-thumb img { transform: scale(1.04); }

/* Article sans image : placeholder wireframe (convention .wf-img). */
.wfa-ph {
    position: absolute;
    inset: 0;
    background: var(--surf);
}

.wfa-ph svg { width: 100%; height: 100%; display: block; }

.wfa-ph line {
    stroke: var(--bd);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wfa-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

.wfa-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 11px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-card-cat {
    padding: 4px 8px;
    border: 1px solid var(--bd);
    border-radius: 2px;
    color: var(--bds);
    transition: background .15s, color .15s, border-color .15s;
}

.wfa-card-cat:hover {
    background: var(--tx);
    border-color: var(--tx);
    color: var(--bg);
}

.wfa-card-read::before {
    content: '· ';
    color: var(--bd);
}

.wfa-card-title {
    margin: 0;
    font: 500 clamp(15px, 1.5vw, 18px)/1.25 var(--sans);
    letter-spacing: -.01em;
    color: var(--tx);
}

.wfa-card-title a { color: inherit; }

/* La carte entière est cliquable sans envelopper son contenu dans un
   lien : le pseudo-élément du titre s'étire par-dessus. Les rubriques
   et les sujets repassent au-dessus (z-index) pour rester atteignables.
   Voir l'en-tête de template-parts/archive-card.php. */
.wfa-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.wfa-card-excerpt {
    margin: 12px 0 0;
    font: 300 14px/1.6 var(--sans);
    color: var(--bds);
}

.wfa-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bd);
}

.wfa-card-tag {
    position: relative;
    z-index: 1;
    padding: 4px 9px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font: 400 10px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
    transition: background .15s, color .15s, border-color .15s;
}

.wfa-card-tag:hover {
    background: var(--surf);
    border-color: var(--bds);
    color: var(--tx);
}

/* Les rubriques doivent aussi rester cliquables sous le lien étiré. */
.wfa-card-cat { position: relative; z-index: 1; }

/* Le bloc d'étiquettes est poussé en bas : les cartes d'une même rangée
   alignent leurs pieds, quelle que soit la longueur du titre. */
.wfa-card-tags { margin-top: auto; }

.wfa-card-cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 20px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--bd);
    font: 500 11px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx);
}

/* Vedette : pleine largeur, image et texte côte à côte. */
.wfa-card--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

.wfa-card--lead .wfa-card-thumb {
    aspect-ratio: auto;
    min-height: 340px;
    border-bottom: 0;
    border-right: 1px solid var(--bd);
}

.wfa-card--lead .wfa-card-body {
    padding: 34px;
    justify-content: center;
}

.wfa-card--lead .wfa-card-title {
    font-size: clamp(22px, 2.8vw, 34px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.wfa-card--lead .wfa-card-excerpt {
    margin-top: 16px;
    font-size: 15.5px;
}

.wfa-card--lead .wfa-card-tags { margin-top: 22px; }

/* ───────────────────────────────────────────────
   23.6 · Pagination
─────────────────────────────────────────────── */
.wfa-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--bd);
}

.wfa-pagination-count {
    margin: 0;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.wfa-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    font: 400 12.5px/1 var(--mono);
    color: var(--bds);
    transition: background .15s, color .15s, border-color .15s;
}

.wfa-pagination .page-numbers:hover {
    border-color: var(--tx);
    color: var(--tx);
}

.wfa-pagination .page-numbers.current {
    background: var(--tx);
    border-color: var(--tx);
    color: var(--bg);
}

.wfa-pagination .page-numbers.dots {
    border-color: transparent;
    color: var(--mt);
}

/* ───────────────────────────────────────────────
   23.7 · Sujets & autres rubriques
─────────────────────────────────────────────── */
.wfa-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wfa-others { background: var(--surf); }

.wfa-others-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wfa-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wfa-other { margin: 0; }

.wfa-other-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 22px 22px 52px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    text-decoration: none;
    transition: border-color .15s, transform .18s;
}

.wfa-other-link:hover {
    border-color: var(--tx);
    transform: translateY(-3px);
}

.wfa-other-count {
    font: 400 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-other-name {
    font: 600 17px/1.2 var(--sans);
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--tx);
}

.wfa-other-desc {
    font: 300 13.5px/1.55 var(--sans);
    color: var(--bds);
}

.wfa-other-latest {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--bd);
    font: 300 12.5px/1.45 var(--sans);
    color: var(--bds);
}

.wfa-other-latest-lbl {
    display: block;
    margin-bottom: 3px;
    font: 400 9.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-other-arrow {
    position: absolute;
    left: 22px;
    bottom: 20px;
    font-size: 17px;
    color: var(--mt);
    transition: transform .15s, color .15s;
}

.wfa-other-link:hover .wfa-other-arrow {
    transform: translateX(5px);
    color: var(--tx);
}

/* ───────────────────────────────────────────────
   23.8 · Archive vide
─────────────────────────────────────────────── */
.wfa-empty {
    max-width: 660px;
    padding: clamp(26px, 4vw, 40px);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--surf);
}

.wfa-empty-num {
    margin: 0 0 8px;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .18em;
    color: var(--mt);
}

.wfa-empty-title {
    margin: 0;
    font: 600 clamp(20px, 2.6vw, 28px)/1.1 var(--sans);
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: var(--tx);
}

.wfa-empty-text {
    margin: 12px 0 0;
    font: 300 15px/1.6 var(--sans);
    color: var(--bds);
}

.wfa-empty-search {
    display: flex;
    margin-top: 22px;
    border: 1px solid var(--bd);
    border-radius: 100px;
    background: var(--bg);
    overflow: hidden;
    transition: border-color .15s;
}

.wfa-empty-search:focus-within { border-color: var(--tx); }
.wfa-empty-search .wfa-search-input { flex: 1; width: auto; }

.wfa-empty-last {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--bd);
}

.wfa-empty-last-lbl {
    display: block;
    margin-bottom: 12px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-empty-last ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wfa-empty-last li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bd);
}

.wfa-empty-last li:last-child { border-bottom: 0; }

.wfa-empty-last a {
    font: 400 14px/1.4 var(--sans);
    color: var(--tx);
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}

.wfa-empty-last a:hover { border-bottom-color: var(--tx); }

.wfa-empty-last-date {
    margin-left: auto;
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

.wfa-empty-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font: 500 11px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
    transition: color .15s;
}

.wfa-empty-back:hover { color: var(--tx); }

/* ───────────────────────────────────────────────
   23.9 · Responsive & accessibilité
─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .wfa-grid        { grid-template-columns: repeat(2, 1fr); }
    .wfa-others-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .wf-archive { --wfa-section: 54px; }

    .wfa-card--lead { grid-template-columns: 1fr; }
    .wfa-card--lead .wfa-card-thumb {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--bd);
    }
    .wfa-card--lead .wfa-card-body { padding: 24px; }
}

@media (max-width: 600px) {
    .wf-archive { --wfa-section: 42px; --wfa-gap: 14px; }

    .wfa-grid        { grid-template-columns: 1fr; }
    .wfa-others-grid { grid-template-columns: 1fr; }

    /* La recherche passe sous les rubriques : à 4 colonnes de grille,
       la garder sur la même ligne réduirait les chips à trois lettres. */
    .wfa-bar-inner { flex-wrap: wrap; }
    .wfa-taxo      { order: 1; width: 100%; }
    .wfa-search    { order: 2; width: 100%; }
    .wfa-search-input { flex: 1; width: auto; }

    .wfa-stats { gap: 14px 26px; }

    .wfa-pagination-list { margin-left: 0; }
}

/* Mouvement réduit : la page garde ses cadres, plus rien ne se déplace. */
@media (prefers-reduced-motion: reduce) {
    .wfa-card:hover,
    .wfa-other-link:hover { transform: none; }

    .wfa-card:hover .wfa-card-thumb img { transform: none; }

    .wfa-other-link:hover .wfa-other-arrow { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   24. BLOCS GUTENBERG PAR DÉFAUT (core/*)

   ── À QUOI SERT CETTE SECTION ──
   C'est LE dossier des blocs natifs de WordPress qu'on ré-habille :
   core/table pour l'instant, puis tout ce qui viendra (core/details,
   core/list, core/preformatted…). Un bloc core = un sous-titre ici.
   Ne pas confondre avec les blocs maison wf/* : eux ont leur propre
   feuille dans blocks/wf-<nom>/style.css.

   ── PORTÉE ──
   Scope unique : .entry-content
     page.php            → <div class="page-content entry-content …">
     page-superlarge.php → idem
     single.php          → <div class="wf-article-content entry-content">
   Une seule écriture couvre donc les pages ET les articles. Le footer,
   la navbar et l'accueil ne sont jamais touchés.

   ── AVANT D'AJOUTER UN BLOC ICI ──
   Vérifie qu'il n'est pas déjà traité ailleurs, l'historique du thème
   a éparpillé quelques règles :
     · citations, séparateurs, pullquote  → section 18
     · listes (dans les blocs wf/*)       → section 19
     · figures, code, boutons, colonnes,
       media-text                         → section 20 (scope .wf-article)
   L'objectif est de les rapatrier ici au fur et à mesure, pas de
   dupliquer.

   ── SPÉCIFICITÉ ──
   Les règles pèsent (0,2,x) : un simple `.ma-classe` ne les écrase pas,
   mais les classes de couleur de Gutenberg (has-background,
   has-text-color, is-style-*) sont explicitement respectées ci-dessous.
════════════════════════════════════════════════════════════════ */


/* ── RÉGLAGES ── */
:root {
    --wf-tbl-pad-x:   16px;    /* respiration horizontale d'une cellule */
    --wf-tbl-pad-y:   13px;    /* respiration verticale */
    --wf-tbl-size:    .95em;   /* corps du tableau, relatif au contexte */
    --wf-tbl-min:     420px;   /* en dessous, on défile plutôt qu'on écrase */

    /* Épaisseur de TOUS les filets du tableau : cadre, lignes, colonnes.
       Un seul réglage, volontairement, c'est ce qui garantit qu'aucun
       trait n'en paraît deux. Pas branché sur --wf-border-width (1.5px
       par défaut) : à cette épaisseur, un quadrillage complet s'empâte. */
    --wf-tbl-line:    1px;

    /* Remplissages. Toujours en color-mix vers `transparent`, jamais en
       couleur opaque : c'est la convention du thème (.wf-card,
       .wf-card-image) et c'est ce qui permet aux blocs posés sur un fond
       coloré de laisser transparaître ce fond. */
    --wf-tbl-head-fill:  color-mix(in srgb, var(--surf) 60%, transparent);
    --wf-tbl-key-fill:   color-mix(in srgb, var(--surf) 30%, transparent);
    --wf-tbl-zebra-fill: color-mix(in srgb, var(--surf) 35%, transparent);
    --wf-tbl-hover-fill: color-mix(in srgb, var(--surf) 70%, transparent);
}

/* ───────────────────────────────────────────────
   core/table

   Markup produit par Gutenberg :
     <figure class="wp-block-table">
       <table>…</table>
       <figcaption>…</figcaption>
     </figure>

   ── PARTI PRIS ──
   Un quadrillage complet, en traits pleins, tous à la MÊME épaisseur,
   celle de --wf-tbl-line. Pas de hiérarchie de filets, pas de tireté :
   c'est l'uniformité qui fait lire « grille de maquette ».

     cadre, lignes, colonnes → trait plein, var(--wf-tbl-line), --bd
     remplissages            → color-mix vers transparent, jamais d'opaque
                               (convention .wf-card / .wf-card-image : un
                               bloc posé sur un fond coloré doit le
                               laisser passer)
     intitulés               → mono, capitales, .1em, --mt (cf. .wl, .ann)

   ── ⚠️ COMMENT ON ÉVITE LES DOUBLES TRAITS ──
   `border-collapse: collapse` fusionnerait les bordures voisines tout
   seul, MAIS il fait ignorer border-radius aux navigateurs. Comme on
   tient aux angles, on est en `separate`, et là, rien ne fusionne :
   deux cellules voisines qui dessinent chacune leur bord donnent deux
   traits de 1px collés, soit 2px à l'écran.

   D'où la règle, à respecter pour toute règle ajoutée ici :

     UN FILET = UN SEUL PROPRIÉTAIRE

     · une cellule ne dessine QUE son bord DROIT et son bord BAS ;
       jamais gauche, jamais haut, ils appartiennent au voisin ;
     · les cellules de la dernière colonne / dernière ligne rendent le
       leur : sur le pourtour, c'est le cadre de la <table> qui dessine.

   Corollaire : ne JAMAIS écrire `border: … ` en raccourci sur une
   cellule. Le raccourci repose les quatre côtés et casse le contrat.

   ── ⚠️ LE RESET EST OBLIGATOIRE ──
   WordPress habille core/table par défaut, et pas discrètement :

     .wp-block-table thead     { border-bottom: 3px solid }
     .wp-block-table tfoot     { border-top:    3px solid }
     .wp-block-table td, th    { border: 1px solid }

   Sans couleur déclarée, ces filets tombent sur `currentColor`, donc en
   couleur de texte : un gros trait noir sous l'en-tête et un quadrillage
   noir complet. Et comme core écrit `border` en RACCOURCI, surcharger
   seulement border-bottom laisse les trois autres côtés en place, d'où
   des traits parasites qu'on prend pour des ombres.
   → Le bloc « Reset » ci-dessous remet les quatre côtés à zéro AVANT
     qu'on repose nos propres filets. Ne le supprime pas.

   ── RÉPARTITION DES RÔLES ──
     <figure> → le défilement horizontal + l'étiquette de bloc
     <table>  → le cadre et les filets
   Dans l'autre sens, la légende se retrouverait enfermée dans le cadre
   et défilerait avec le tableau.
─────────────────────────────────────────────── */
.entry-content .wp-block-table {
    position: relative;   /* ancre l'étiquette de bloc */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table {
    width: 100%;
    min-width: var(--wf-tbl-min);
    background: transparent;
    /* Le cadre : c'est LUI qui dessine tout le pourtour. Les cellules de
       bord ne dessinent rien de ce côté-là (voir l'encadré ci-dessus). */
    border: var(--wf-tbl-line) solid var(--bd);
    border-radius: var(--r, 0px);
    /* `separate` et non `collapse` : avec collapse, les navigateurs
       ignorent border-radius. border-spacing: 0 recolle les cellules,
       le rendu est celui de collapse, la fusion des bordures en moins,
       d'où le contrat « un filet, un propriétaire ». */
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--wf-tbl-size);
}

/* Les angles se posent sur les cellules de coin : le cadre suit même si
   --wf-radius est monté depuis le panneau de réglages.

   Le ciblage passe par les sections (thead / tbody / tfoot) et non par un
   simple `tr:first-child` : `:last-child` se compte À L'INTÉRIEUR de la
   section, donc l'unique ligne d'un <thead> est à la fois la première ET
   la dernière. Elle héritait des angles du BAS et sa bande teintée se
   retrouvait arrondie en plein milieu du tableau.
     · en haut  → le <thead>, ou le <tbody> s'il n'y a pas de <thead>
     · en bas   → le <tfoot>, ou le <tbody> s'il n'y a pas de <tfoot> */
.entry-content .wp-block-table :is(thead, tbody:first-child) tr:first-child :is(th, td):first-child { border-top-left-radius:     var(--r, 0px); }
.entry-content .wp-block-table :is(thead, tbody:first-child) tr:first-child :is(th, td):last-child  { border-top-right-radius:    var(--r, 0px); }
.entry-content .wp-block-table :is(tfoot, tbody:last-child)  tr:last-child  :is(th, td):first-child { border-bottom-left-radius:  var(--r, 0px); }
.entry-content .wp-block-table :is(tfoot, tbody:last-child)  tr:last-child  :is(th, td):last-child  { border-bottom-right-radius: var(--r, 0px); }

/* ── Reset des filets de core ── ⚠️ NE PAS SUPPRIMER
   core écrit `border: 1px solid` (raccourci, quatre côtés, currentColor)
   sur chaque cellule, plus un 3px sur <thead> et <tfoot>. On remet tout
   à zéro d'un coup : ensuite, chaque filet visible dans cette feuille est
   un filet qu'on a VOULU. Cf. l'encadré en tête de section. */
.entry-content .wp-block-table :is(thead, tfoot, tr, th, td) {
    border: 0;
}

/* ── Quadrillage ──
   Droite + bas uniquement : c'est tout le contrat. Le bord gauche d'une
   cellule est le bord droit de sa voisine, son bord haut est le bord bas
   de celle du dessus. Les redessiner, c'est doubler le trait. */
.entry-content .wp-block-table :is(th, td) {
    padding: var(--wf-tbl-pad-y) var(--wf-tbl-pad-x);
    border-right:  var(--wf-tbl-line) solid var(--bd);
    border-bottom: var(--wf-tbl-line) solid var(--bd);
    vertical-align: top;
    transition: background .2s;
}

/* Dernière colonne : le cadre dessine ce bord. */
.entry-content .wp-block-table :is(th, td):last-child {
    border-right: 0;
}

/* ── En-tête de colonnes ──
   Traité comme une étiquette wireframe (.wl / .wf-block-label) : mono,
   capitales, --mt. Le fond teinté suffit à le détacher, inutile
   d'appuyer le filet en plus. */
.entry-content .wp-block-table thead th {
    background: var(--wf-tbl-head-fill);
    border-bottom: var(--wf-tbl-line) solid var(--bd);
    font: 400 10px/1.6 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mt);
    white-space: nowrap;   /* un intitulé de colonne ne se coupe pas */
}

/* ── Corps ── */
.entry-content .wp-block-table td {
    line-height: var(--wf-p-leading, 1.7);
    color: var(--tx);
}

/* Cellule d'en-tête de ligne (<th scope="row">). C'est du contenu, pas
   une étiquette : on annule le traitement mono/capitales et on la teinte
   légèrement pour qu'elle se lise comme une colonne-clé. */
.entry-content .wp-block-table tbody th {
    background: var(--wf-tbl-key-fill);
    border-bottom: var(--wf-tbl-line) solid var(--bd);
    font: 500 1em/var(--wf-p-leading, 1.7) var(--sans);
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    color: var(--tx);
}

/* ── Pied ── */
.entry-content .wp-block-table tfoot :is(th, td) {
    background: var(--wf-tbl-head-fill);
    font-weight: 500;
}

/* Le filet qui sépare le corps du pied appartient au pied, la dernière
   ligne du <tbody> a rendu le sien plus bas. Restreint à la PREMIÈRE
   ligne du <tfoot> : sur un pied de deux lignes, l'appliquer à toutes
   doublerait le trait avec le border-bottom de la ligne précédente. */
.entry-content .wp-block-table tfoot tr:first-child :is(th, td) {
    border-top: var(--wf-tbl-line) solid var(--bd);
}

/* ── Filet de fin ──
   La dernière ligne du corps (et du pied) rend son filet : le cadre, ou
   le filet haut du <tfoot>, prend le relais.
   Placé APRÈS `tbody th` et `tfoot` volontairement, ces deux règles
   reposent un border-bottom et l'emporteraient à égalité de spécificité
   si ce bloc venait avant. Le `:is(tbody, tfoot)` lui donne un poids
   strictement supérieur, l'ordre n'est donc plus le seul garde-fou.
   Le <thead> est exclu : c'est lui qui porte la césure du tableau. */
.entry-content .wp-block-table :is(tbody, tfoot) tr:last-child :is(th, td) {
    border-bottom: 0;
}

/* ── Survol ──
   Même valeur que a.wf-card:hover, pour que le geste soit le même
   partout dans le thème. Conditionné à (hover: hover) : au tactile,
   l'état resterait collé après le tap. */
@media (hover: hover) {
    .entry-content .wp-block-table tbody tr:hover :is(th, td) {
        background: var(--wf-tbl-hover-fill);
    }
}

/* ── Variante « Rayures » de Gutenberg ──
   Core la peint en gris fixe (#f0f0f0), on la repasse dans les tokens
   pour qu'elle suive les modes sombre et accent. Les filets entre lignes
   sautent : la rayure les rend redondants. */
.entry-content .wp-block-table.is-style-stripes {
    border-bottom: 0;   /* core en pose un sur la <figure> */
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) :is(th, td) {
    background: var(--wf-tbl-zebra-fill);
}

.entry-content .wp-block-table.is-style-stripes tbody :is(th, td) {
    border-bottom: 0;
}

/* Core passe les filets en `transparent` pour cette variante. Notre règle
   de base est à égalité de spécificité avec la sienne : l'ordre de
   chargement des feuilles trancherait, ce qui est trop fragile. On
   reprend la main explicitement, un cran au-dessus. */
.entry-content .wp-block-table.is-style-stripes :is(th, td) {
    border-color: var(--bd);
}

/* ── Couleurs choisies dans l'éditeur ──
   Elles gardent le dernier mot. Gutenberg pose has-background sur la
   <figure> : les remplissages ci-dessus la masqueraient. */
.entry-content .wp-block-table.has-background :is(thead th, tbody th, tfoot th, tfoot td),
.entry-content .wp-block-table.has-background tbody tr:nth-child(odd) :is(th, td) {
    background: transparent;
}

/* ── Légende ──
   Rendue comme une annotation .ann : le tiret de 12px qui l'introduit est
   le marqueur d'annotation du thème. */
.entry-content .wp-block-table figcaption {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;   /* annule le filet générique des figures, § 20 */
    font: 400 10px/1.5 var(--mono);
    letter-spacing: .06em;
    text-align: left;
    color: var(--mt);
}

.entry-content .wp-block-table figcaption::before {
    content: '';
    flex: 0 0 12px;
    height: 1px;
    /* baseline + un décalage : le tiret se cale sur la ligne de texte
       plutôt que sur le haut de la boîte. */
    transform: translateY(-3px);
    background: var(--bd);
}

/* ── Étiquette de bloc ──
   Convention du thème : chaque bloc s'annonce par un badge en coin haut
   gauche, allumé par l'outil « Contours des blocs » du drawer et éteint
   par body.wf-clean (cf. inc/theme-options.php).
   La <figure> reçoit une gouttière haute pour que le badge se pose
   AU-DESSUS du cadre : posé dessus, il masquerait le premier intitulé
   de colonne. */
.wf-outline-on .entry-content .wp-block-table {
    padding-top: 22px;
}

.wf-outline-on .entry-content .wp-block-table::before {
    content: 'Block · Tableau';
    position: absolute;
    top: 0;
    left: 0;
    font: 400 9px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
    background: var(--surf);
    border: 1px solid var(--bd);
    padding: 3px 8px;
    border-radius: 0 0 var(--r, 0px) 0;
}

body.wf-clean .wp-block-table::before { display: none !important; }

@media (max-width: 600px) {
    :root {
        --wf-tbl-pad-x: 12px;
        --wf-tbl-pad-y: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   25. PAGE 404

   ── À QUOI SERT CETTE SECTION ──
   L'habillage de 404.php, et rien d'autre. Tous les sélecteurs sont
   préfixés .wf404- et vivent sous .wf-404 : aucune règle d'ici ne
   peut déborder sur une autre page.

   ── LE PRINCIPE ──
   Même grammaire que les archives (section 23) : sur-titre en mono,
   titre capitales serrées, blocs cadrés sur --surf, puces arrondies.
   Une 404 doit ressembler au site, pas à une page système.

   ── OÙ MODIFIER ──
   Contenu et données : 404.php et inc/wf-404.php.
═══════════════════════════════════════════════════════════════ */
.wf-404 {
    /* Réglage local : un seul endroit pour respirer plus ou moins. */
    --wf404-section: 64px;
}

.wf404-wrap {
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* Libellé réservé aux lecteurs d'écran : la règle du thème est scopée
   sur .stlh-home, on la redéclare ici (cf. § 23.1). */
.wf-404 .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────────
   25.1 · En-tête, le message et la recherche
─────────────────────────────────────────────── */
.wf404-head {
    padding: clamp(36px, 6vw, 72px) 0 clamp(30px, 4vw, 52px);
    background: var(--surf);
    border-bottom: 1px solid var(--bd);
}

.wf404-head-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
}

.wf404-said {
    min-width: 0;
    max-width: 620px;
}

.wf404-kicker {
    margin: 0 0 10px;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf404-title {
    margin: 0;
    font: 600 clamp(26px, 4.2vw, 44px)/1.05 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--tx);
}

.wf404-text {
    margin: 14px 0 0;
    font: 300 15.5px/1.6 var(--sans);
    color: var(--bds);
}

/* Message rédigé dans l'éditeur (page « erreur404 ») : on ne lui impose
   qu'une chose, ne pas décoller du sur-titre ni de la recherche. */
.wf404-custom > :first-child { margin-top: 0; }
.wf404-custom > :last-child  { margin-bottom: 0; }

/* ── Adresse demandée ──
   Affichée telle quelle : le visiteur y voit son lien tronqué, l'éditeur
   y reconnaît l'ancienne adresse à rediriger. */
.wf404-url {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 22px 0 0;
}

.wf404-url-lbl {
    font: 400 9.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf404-url-val {
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--bg);
    font: 400 12px/1.4 var(--mono);
    color: var(--bds);
    /* Une adresse sans espace ne se coupe nulle part : sans ceci, elle
       pousse la colonne et fait défiler la page horizontalement. */
    overflow-wrap: anywhere;
}

/* ── Recherche ── */
.wf404-search {
    display: flex;
    max-width: 460px;
    margin-top: 24px;
    border: 1px solid var(--bd);
    border-radius: 100px;
    background: var(--bg);
    overflow: hidden;
    transition: border-color .15s;
}

.wf404-search:focus-within { border-color: var(--tx); }

.wf404-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 18px;
    border: 0;
    background: transparent;
    font: 400 13.5px/1.2 var(--sans);
    color: var(--tx);
}

.wf404-search-input:focus         { outline: none; }
.wf404-search-input::placeholder  { color: var(--mt); }

.wf404-search-btn {
    padding: 0 18px;
    border: 0;
    border-left: 1px solid var(--bd);
    background: var(--surf);
    font: 500 11.5px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.wf404-search-btn:hover {
    background: var(--tx);
    color: var(--bg);
}

/* ── Le code en grand ──
   Contour seul : rempli, il pèserait plus lourd que le titre et
   volerait la hiérarchie de l'en-tête. */
.wf404-code {
    margin: 0;
    font: 700 clamp(96px, 15vw, 210px)/.82 var(--sans);
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--bd);
    user-select: none;
}

/* Sans text-stroke, `color: transparent` effacerait le nombre. */
@supports not (-webkit-text-stroke: 1px currentColor) {
    .wf404-code { color: var(--bd); }
}

/* ───────────────────────────────────────────────
   25.2 · Rebonds, suggestions, destinations, derniers articles
─────────────────────────────────────────────── */
.wf404-body { padding: var(--wf404-section) 0 0; }

.wf404-cols {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(20px, 3vw, 34px);
    align-items: start;
}

.wf404-block {
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    background: var(--surf);
}

/* Un seul bloc (aucune suggestion trouvée) : il prend la largeur au lieu
   de rester dans sa colonne, sinon la moitié droite reste vide. */
.wf404-block:only-child {
    grid-column: 1 / -1;
    max-width: 760px;
}

.wf404-lbl {
    margin: 0 0 14px;
    font: 400 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mt);
}

/* ── Suggestions ── */
.wf404-sugg {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf404-sugg li + li { border-top: 1px solid var(--bd); }

.wf404-sugg-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 14px;
    padding: 12px 0;
}

.wf404-sugg-title {
    grid-column: 1;
    font: 500 15px/1.35 var(--sans);
    color: var(--tx);
    border-bottom: 1px solid transparent;
    justify-self: start;
    transition: border-color .15s;
}

.wf404-sugg-meta {
    grid-column: 1;
    font: 400 10px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf404-sugg-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 16px;
    color: var(--mt);
    transition: transform .15s, color .15s;
}

.wf404-sugg-link:hover .wf404-sugg-title { border-bottom-color: var(--tx); }

.wf404-sugg-link:hover .wf404-sugg-arrow {
    transform: translateX(5px);
    color: var(--tx);
}

.wf404-more {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bd);
    font: 400 12.5px/1.4 var(--sans);
    color: var(--bds);
    transition: color .15s;
}

.wf404-more:hover { color: var(--tx); }

/* ── Destinations ── */
.wf404-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wf404-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid var(--bd);
    border-radius: 100px;
    background: var(--bg);
    font: 400 12.5px/1 var(--sans);
    color: var(--bds);
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

.wf404-chip:hover {
    background: var(--tx);
    border-color: var(--tx);
    color: var(--bg);
}

/* ── Derniers articles ── */
.wf404-last {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--bd);
}

.wf404-last ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf404-last li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bd);
}

.wf404-last li:last-child { border-bottom: 0; }

.wf404-last a {
    font: 400 14px/1.4 var(--sans);
    color: var(--tx);
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}

.wf404-last a:hover { border-bottom-color: var(--tx); }

.wf404-last-date {
    margin-left: auto;
    font: 400 10px/1 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mt);
}

/* ── Retour à l'accueil ──
   La marge haute est portée par le lien et non par la section des
   rebonds : quand celle-ci n'a rien à montrer et disparaît, l'espace
   sous l'en-tête reste le même. */
.wf404-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(28px, 4vw, 40px);
    margin-bottom: var(--wf404-section);
    font: 500 11px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mt);
    transition: color .15s;
}

.wf404-back:hover { color: var(--tx); }

/* ───────────────────────────────────────────────
   25.3 · Responsive & accessibilité
─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .wf-404 { --wf404-section: 46px; }

    .wf404-head-inner { grid-template-columns: 1fr; }

    /* Le nombre passe au-dessus du message : à la suite du formulaire de
       recherche, il ferait un pied de page orphelin. */
    .wf404-code {
        order: -1;
        font-size: clamp(76px, 22vw, 140px);
    }

    .wf404-cols { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .wf-404 { --wf404-section: 38px; }

    .wf404-search { max-width: none; }
}

/* Mouvement réduit : la page garde ses cadres, plus rien ne se déplace. */
@media (prefers-reduced-motion: reduce) {
    .wf404-sugg-link:hover .wf404-sugg-arrow { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   FICHE ÉPISODE : PASSER D'UNE SORTIE À L'AUTRE (septembre 2026)
   ─────────────────────────────────────────────────────────────────
   Au doigt, on glisse la fiche à gauche ou à droite (script.js). À
   l'ordinateur : une pastille « ‹ 3 / 24 › » en haut à gauche, deux
   grandes flèches de part et d'autre de la fenêtre, les touches ← →
   et le glissé horizontal du trackpad.
═══════════════════════════════════════════════════════════════════ */

/* Le navigateur garde le défilement vertical du texte ; le glissé
   horizontal revient au script. */
.stlh-sheet-inner,
.stlh-sheet-poster,
.stlh-sheet-body { touch-action: pan-y; }

/* La pastille : précédente, position, suivante. */
.stlh-sheet-nav {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 3px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--stlh-ink);
}

.stlh-sheet-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, color .2s, opacity .2s;
}

.stlh-sheet-step svg,
.stlh-sheet-side svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stlh-sheet-step:hover:not(:disabled) { background: var(--acc-on-dark); color: var(--ink); }
.stlh-sheet-step:disabled,
.stlh-sheet-side:disabled { opacity: .28; cursor: default; }

.stlh-sheet-step:focus-visible,
.stlh-sheet-side:focus-visible {
    outline: 2px solid var(--acc-on-dark);
    outline-offset: 2px;
}

.stlh-sheet-count {
    min-width: 46px;
    font: 600 11px/1 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    text-align: center;
}

/* Fiche sans affiche : le texte descend sous la pastille. */
.stlh-sheet.has-nav .stlh-sheet-inner:not(.has-poster) .stlh-sheet-body { padding-top: 64px; }

/* Les grandes flèches de côté : grand écran, à la souris seulement. */
.stlh-sheet-side { display: none; }

@media (min-width: 900px) and (hover: hover) {
    .stlh-sheet.has-nav .stlh-sheet-side {
        position: fixed;
        top: 50%;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-top: -26px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        background: rgba(13, 13, 13, .8);
        color: var(--stlh-ink);
        cursor: pointer;
        transition: background .2s, color .2s, border-color .2s, transform .2s, opacity .2s;
        animation: stlh-fade-in .25s ease .3s both;
    }
    .stlh-sheet-side svg { width: 20px; height: 20px; }
    .stlh-sheet-side--prev { left: max(16px, calc(50vw - 380px - 76px)); }
    .stlh-sheet-side--next { right: max(16px, calc(50vw - 380px - 76px)); }
    .stlh-sheet-side:hover:not(:disabled) { background: var(--acc-on-dark); border-color: var(--acc-on-dark); color: var(--ink); }
    .stlh-sheet-side--prev:hover:not(:disabled) { transform: translateX(-3px); }
    .stlh-sheet-side--next:hover:not(:disabled) { transform: translateX(3px); }
}

@media (max-width: 600px) {
    /* Cibles tactiles de 44px. */
    .stlh-sheet-nav  { height: 44px; padding: 0 2px; }
    .stlh-sheet-step { width: 40px; height: 40px; }
    .stlh-sheet-count { min-width: 40px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE : TROIS VIGNETTES ET DEMIE PAR RANGÉE (septembre 2026)
   ─────────────────────────────────────────────────────────────────
   Comme les rangées Netflix : trois affiches entières, la quatrième
   coupée à moitié pour dire qu'il y a une suite. La largeur se calcule
   sur l'écran (100vw), moins la gouttière de gauche et trois espaces.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ── Hero : la bande des sorties ── */
    .stlh-today {
        --stlh-card-gap: 8px;
        --stlh-card-w: calc((100vw - var(--stlh-bleed) - 3 * var(--stlh-card-gap)) / 3.5);
        --stlh-day-gap: 22px;
    }
    .stlh-card-poster   { margin-bottom: 7px; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
    .stlh-card-title    { font-size: 11.5px; line-height: 1.2; }
    .stlh-card-code     { margin-top: 3px; font-size: 8.5px; letter-spacing: .05em; }
    .stlh-card-ep       { font-size: 10px; }
    .stlh-card-network,
    .stlh-flag          { font-size: 7px; padding: 2px 4px; letter-spacing: .04em; }
    .stlh-card-fallback { gap: 6px; padding: 22px 7px 26px; }
    .stlh-card-fallback-title { font-size: 11px; }
    .stlh-note          { padding: 10px; }
    .stlh-note-text     { font-size: 11px; }
    .stlh-note-next     { font-size: 8.5px; }
    .stlh-more-num      { font-size: 20px; }
    .stlh-more-lbl      { font-size: 8px; }

    /* ── « À enchaîner » : la rangée de grandes affiches ── */
    .stlh-binge-row {
        grid-auto-columns: calc((100vw - var(--pad) - 3 * 8px) / 3.5);
        gap: 8px;
    }
    .stlh-bcard-season  { padding: 4px 5px; font-size: 12px; }
    .stlh-bcard-stamp   { padding: 3px 4px; font-size: 7px; letter-spacing: .06em; }
    .stlh-bcard-body    { gap: 4px; padding-top: 7px; }
    .stlh-bcard-title   { font-size: 11px; }
    .stlh-bcard-meta,
    .stlh-bcard-date    { font-size: 8.5px; letter-spacing: .04em; }
    .stlh-bcard-progress { height: 4px; }
    .stlh-bmore         { padding: 10px; }
    .stlh-bmore-n       { font-size: 1.7rem; }
    .stlh-bmore-lbl     { font-size: 10px; }
    .stlh-bmore-cta     { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .stlh-sheet-side { animation: none !important; transition: none; }
}