/* ═══════════════════════════════════════════════════════════════════════
   STREAMLOG : fiches série / saison / film / personne (v4, « brut »)

   Même parti pris que le thème Tavu (assets/css/tavu.css) :
     1. Blanc et noir. Le survol inverse, il ne colorise pas. Seul point de
        couleur : le voyant rouge « ça sort aujourd'hui ».
     2. Filets francs de 1 px, angles droits, ombre portée noire au survol
        des cartes.
     3. Inter seule, du 500 au 900 ; titres très gros, très gras, serrés,
        en capitales.
     4. Étiquettes petites, en capitales espacées. Pas de monospace.

   Structure :
     .stl-f
       .stl-f-hero        texte à gauche, image à droite (≥ 1024 px)
       .stl-f-bar         barre de repères en cases
       .stl-f-body
         .stl-f-main      sections numérotées (.stl-f-sec)
         .stl-f-rail      encadrés (où regarder, fiche, listes)

   Sommaire : 1. Socle · 2. Hero · 3. Barre · 4. Corps et sections ·
   5. Épisodes · 6. Personnes · 7. Encadrés · 8. Articles, spectateurs,
   liens · 9. Personne · 10. Boutons et formulaires · 11. Petits écrans
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SOCLE ──────────────────────────────────────────────────────────── */
.stl-f {
  --f-ink:   var(--ink, #0a0a0a);
  --f-paper: var(--paper, #fff);
  --f-tx:    var(--tx, #0a0a0a);
  --f-bg:    var(--bg, #fff);
  --f-mt:    var(--mt, #6b6b6b);
  --f-surf:  var(--surf, #f3f3f3);
  --f-red:   var(--wf-red, #d23c0f);
  --f-line:  1px solid var(--f-tx);
  --f-pad:   var(--pad, 40px);
  --f-max:   var(--wf-max-width, var(--max, 1320px));
  --f-bar:   48px;
  --f-font:  var(--sans, 'Inter', 'Helvetica Neue', Arial, sans-serif);

  font-family: var(--f-font);
  color: var(--f-tx);
  background: var(--f-bg);
  -webkit-font-smoothing: antialiased;
}
.stl-f *, .stl-f *::before, .stl-f *::after { box-sizing: border-box; }
.stl-f a { color: inherit; }
.stl-f :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.stl-f :where(ul, ol) { padding: 0; list-style: none; }
.stl-f img { display: block; max-width: 100%; }

/* Libellé en capitales espacées, réutilisé partout. */
.stl-f :is(.stl-f-tag, .stl-f-cell, .stl-f-key-label, .stl-f-where-label, .stl-f-sec-kicker,
           .stl-f-box-title, .stl-f-flag, .stl-f-btn, .stl-f-tab-name, .stl-f-crew dt, .stl-f-facts dt) {
  font-family: var(--f-font);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Voyant « aujourd'hui » : le seul rouge du site, comme dans la navbar. */
.stl-f-live {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--f-red);
  animation: stl-f-blink 1.6s steps(2, jump-none) infinite;
}
@keyframes stl-f-blink { 50% { opacity: .25; } }

/* ── 2. HERO ───────────────────────────────────────────────────────────── */
.stl-f-hero {
  display: grid;
  border-bottom: var(--f-line);
}
.stl-f-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding: clamp(28px, 4.5vw, 56px) var(--f-pad) clamp(24px, 3vw, 40px);
}

.stl-f-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.stl-f-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: var(--f-line);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.stl-f-tag.is-solid { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }
a.stl-f-tag { transition: background .12s, color .12s; }
a.stl-f-tag:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f-status.is-cancelled,
.stl-f-status.is-ended { color: var(--f-mt); border-color: currentColor; }

.stl-f-title {
  font-family: var(--heading, var(--f-font));
  font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--f-tx);
}
.stl-f-hero--m .stl-f-title { font-size: clamp(2.2rem, 1rem + 3.8vw, 4.6rem); }
.stl-f-hero--s .stl-f-title { font-size: clamp(1.9rem, 1rem + 2.8vw, 3.6rem); line-height: .92; }

.stl-f-orig {
  margin-top: -8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--f-mt);
}

.stl-f-lead {
  max-width: 56ch;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.45;
}

/* Repère clé : prochain épisode, date de sortie, naissance… */
.stl-f-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  max-width: 520px;
  border: var(--f-line);
  background: var(--f-bg);
  color: var(--f-tx);
  text-decoration: none;
  transition: background .12s, color .12s, box-shadow .15s, transform .15s;
}
.stl-f-key-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.stl-f-key-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px 14px;
  min-width: 0;
}
.stl-f-key-big {
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.stl-f-key-rel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stl-f-key-sub {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.stl-f-key-go {
  align-self: center;
  padding: 0 18px;
  font-size: 28px;
  font-weight: 900;
  transition: transform .2s;
}
a.stl-f-key:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--f-ink); }
a.stl-f-key:hover .stl-f-key-go { transform: translateX(4px); }

/* Où regarder, dans le hero : les logos, pas une liste. */
.stl-f-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stl-f-where-label { margin-right: 4px; font-size: 11px; font-weight: 800; color: var(--f-mt); }
.stl-f-where-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: var(--f-line);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.stl-f-where-item small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.stl-f-where-item:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f .stl-pf-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; overflow: hidden; border-radius: 0; }
.stl-f .stl-pf-badge img { width: 100%; height: 100%; object-fit: cover; }
.stl-f .stl-pf-initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--stl-pf, var(--f-ink)); color: var(--f-paper);
  font-size: 10px; font-weight: 900; letter-spacing: 0;
}

/* Progression du membre */
.stl-f-progress { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; }
.stl-f-progress-bar { flex: 1; height: 6px; background: var(--f-surf); box-shadow: inset 0 0 0 1px var(--f-tx); }
.stl-f-progress-bar i { display: block; height: 100%; background: var(--f-ink); transition: width .4s ease; }
.stl-f-progress-txt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.stl-f-progress-txt b { font-weight: 900; }

.stl-f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stl-f-actions-note { flex-basis: 100%; font-size: 13px; color: var(--f-mt); }

.stl-f-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.stl-f-genres a {
  display: block;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--f-tx) 30%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--f-tx);
  transition: background .12s, color .12s, border-color .12s;
}
.stl-f-genres a:hover { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }

/* Image */
.stl-f-hero-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-top: var(--f-line);
  background: var(--f-ink);
  aspect-ratio: 16 / 10;
}
.stl-f-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stl-f-hero-media.has-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%);
  pointer-events: none;
}
/* L'affiche se pose sur l'image de fond, en bas à gauche, comme une vignette. */
.stl-f-hero-media.has-backdrop .stl-f-poster {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  width: clamp(84px, 11vw, 150px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--f-paper);
  box-shadow: 6px 6px 0 var(--f-ink);
}
/* Affiche seule : centrée sur le panneau noir. */
.stl-f-hero-media.has-poster {
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 56px);
  aspect-ratio: auto;
}
.stl-f-hero-media.has-poster .stl-f-poster {
  width: auto;
  max-width: min(320px, 70%);
  max-height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--f-paper);
}
.stl-f-hero-media.is-portrait.has-poster .stl-f-poster { aspect-ratio: 3 / 4; }
/* Ni fond ni affiche : panneau typographique. */
.stl-f-hero-media.is-empty {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 3vw, 40px);
  color: var(--f-paper);
  aspect-ratio: 16 / 9;
}
.stl-f-media-word {
  font-size: clamp(3.4rem, 1rem + 9vw, 10rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--f-paper);
}
.stl-f-media-year {
  margin-top: 12px;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
}

@media (min-width: 1024px) {
  .stl-f-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: clamp(520px, calc(100svh - var(--h-navbar, 60px) - var(--wp-admin--admin-bar--height, 0px) - var(--f-bar)), 880px);
  }
  .stl-f-hero--l { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .stl-f-hero-text {
    justify-content: flex-end;
    padding: clamp(32px, 4vw, 64px) clamp(28px, 3vw, 56px) clamp(32px, 3.4vw, 56px) var(--f-pad);
    border-right: var(--f-line);
  }
  .stl-f-title { font-size: clamp(3rem, min(6vw, 11vh), 8rem); }
  .stl-f-hero--m .stl-f-title { font-size: clamp(2.5rem, min(4.5vw, 8.4vh), 6rem); }
  .stl-f-hero--s .stl-f-title { font-size: clamp(2rem, min(3.4vw, 6.4vh), 4.6rem); }
  .stl-f-hero-media { aspect-ratio: auto; border-top: 0; }
  .stl-f-hero-media.is-empty { aspect-ratio: auto; }
}

/* ── 3. BARRE DE REPÈRES ───────────────────────────────────────────────
   Les filets entre cases sont le fond noir vu à travers un gap de 1 px :
   ils suivent aussi les retours à la ligne sur mobile (même principe que
   la barre des articles). */
.stl-f-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--f-ink);
  border-bottom: var(--f-line);
}
.stl-f-cell,
.stl-f-fill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--f-bar);
  padding: 0 20px;
  background: var(--f-bg);
  color: var(--f-tx);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.stl-f-cell:first-child { padding-left: var(--f-pad); }
.stl-f-fill { flex: 1 1 0; padding: 0; }
a.stl-f-cell { transition: background .12s, color .12s; }
a.stl-f-cell:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f-cell.is-jump { background: var(--f-ink); color: var(--f-paper); font-weight: 800; padding-right: var(--f-pad); }
.stl-f-cell.is-jump:hover { background: var(--f-bg); color: var(--f-tx); }
.stl-f-cell.is-edit { color: var(--f-mt); }

/* ── 4. CORPS ET SECTIONS ─────────────────────────────────────────────── */
.stl-f-body {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  max-width: calc(var(--f-max) + var(--f-pad) * 2);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--f-pad) clamp(56px, 6vw, 96px);
}
@media (min-width: 1024px) {
  .stl-f-body { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .stl-f-rail {
    position: sticky;
    top: calc(var(--h-navbar, 60px) + var(--wp-admin--admin-bar--height, 0px) + 24px);
  }
}
.stl-f-main { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 88px); min-width: 0; }
.stl-f-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.stl-f-sec { min-width: 0; scroll-margin-top: calc(var(--h-navbar, 60px) + 16px); }
.stl-f-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  padding-top: 14px;
  border-top: 6px solid var(--f-ink);
}
.stl-f-sec-kicker {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 800;
}
.stl-f-sec-kicker span { font-variant-numeric: tabular-nums; }
.stl-f-sec-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--heading, var(--f-font));
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.stl-f-count {
  padding: 5px 8px;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: .36em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stl-f-more {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.stl-f-more:hover { background: var(--f-ink); color: var(--f-paper); }

.stl-f-prose {
  max-width: 68ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
}
.stl-f-prose > * { margin: 0 0 1em; }
.stl-f-prose > :last-child { margin-bottom: 0; }
.stl-f-prose :is(h2, h3, h4) {
  margin: 1.6em 0 .5em;
  font-size: 1.25em;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.stl-f-prose a { text-decoration: underline; text-underline-offset: .18em; }
.stl-f-prose a:hover { background: var(--f-ink); color: var(--f-paper); text-decoration: none; }
.stl-f-prose.is-clamped {
  max-height: 14em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.stl-f-prose-more { margin-top: 14px; }

.stl-f-empty {
  padding: 22px;
  border: 1px dashed var(--f-tx);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── 5. ÉPISODES ───────────────────────────────────────────────────────── */
.stl-f-eps { min-width: 0; }

/* Onglets de saisons : des cases collées, comme la navbar. */
.stl-f-tabs-wrap {
  position: relative;
  margin-bottom: 24px;
}
.stl-f-tabs {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  background: var(--f-ink);
  border: var(--f-line);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.stl-f-tabs::-webkit-scrollbar { display: none; }
.stl-f-tab {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 112px;
  padding: 12px 16px 14px;
  border: 0;
  background: var(--f-bg);
  color: var(--f-tx);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background .12s, color .12s;
}
.stl-f-tab-name { font-size: 13px; font-weight: 900; line-height: 1; }
.stl-f-tab-meta { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--f-mt); white-space: nowrap; }
.stl-f-tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; }
.stl-f-tab-bar i { display: block; height: 100%; background: currentColor; }
.stl-f-tab.is-airing .stl-f-tab-name::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  vertical-align: 2px;
  background: currentColor;
}
.stl-f-tab.is-done .stl-f-tab-name::after { content: ' ✓'; }
.stl-f-tab:hover { background: var(--f-surf); }
.stl-f-tab.is-active { background: var(--f-ink); color: var(--f-paper); }
.stl-f-tab.is-active .stl-f-tab-meta { color: color-mix(in srgb, var(--f-paper) 70%, transparent); }
.stl-f-tab--add { flex: 0 0 auto; justify-content: center; color: var(--f-mt); }
.stl-f-tab--add:disabled { opacity: .4; cursor: not-allowed; }

.stl-f-season[hidden] { display: none; }
.stl-f-season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 14px;
}
.stl-f-season-id { min-width: 0; }
.stl-f-season-title {
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.stl-f-season-title span { color: var(--f-mt); }
.stl-f-season-meta {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--f-mt);
}
.stl-f-season-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stl-f-season-count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; }
.stl-f-season-count b { font-weight: 900; }
.stl-f-season-bar { height: 4px; margin-bottom: -1px; background: var(--f-surf); }
.stl-f-season-bar i { display: block; height: 100%; background: var(--f-ink); transition: width .4s ease; }

/* Liste : une ligne par épisode, filets pleins. */
.stl-f-eplist { border-top: var(--f-line); }
.stl-f-ep {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 150px 104px;
  grid-template-areas: "num main when check";
  align-items: start;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: var(--f-line);
  scroll-margin-top: calc(var(--h-navbar, 60px) + 80px);
  transition: background .2s;
}
.stl-f-eps:not(:has(.stl-f-check)) .stl-f-ep { grid-template-columns: 78px minmax(0, 1fr) 150px; grid-template-areas: "num main when"; }

.stl-f-ep-num {
  grid-area: num;
  padding-top: 2px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.stl-f-ep-num:hover { text-decoration: underline; }
.stl-f-ep-main { grid-area: main; min-width: 0; }
.stl-f-ep-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.stl-f-ep-title em { font-style: normal; font-weight: 600; color: var(--f-mt); }
.stl-f-ep-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.stl-f-ep-flags:not(:empty) { margin-top: 7px; }
.stl-f-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: var(--f-line);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.stl-f-flag.is-solid,
.stl-f-flag.is-next { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }
.stl-f-flag .stl-f-live { width: 7px; height: 7px; }
.stl-f-ep-syn {
  margin-top: 7px;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--f-tx) 78%, transparent);
}
[data-mode="tabs"] .stl-f-ep-syn {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stl-f-ep-people { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--f-mt); }
.stl-f-ep-people span { display: block; }
.stl-f-ep-people a { color: var(--f-tx); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.stl-f-ep-people em { font-style: normal; }

.stl-f-ep-when {
  grid-area: when;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--f-mt);
  text-align: right;
}
.stl-f-ep-when time {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--f-tx);
  white-space: nowrap;
}
.stl-f-ep-dur { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Case « vu » : un carré suivi de son état en toutes lettres.
   Coché = plein noir, « Vu ». Visiteur : même case, en pointillés,
   qui mène à la connexion. */
.stl-f-check {
  grid-area: check;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  height: 40px;
  padding: 0 12px 0 8px;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-bg);
  color: var(--f-tx);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.stl-f-check-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: var(--f-line);
  background: var(--f-bg);
  color: transparent;
  transition: background .12s, color .12s;
}
.stl-f-check:hover .stl-f-check-box { color: var(--f-mt); }
.stl-f-check:focus-visible { outline: 2px solid var(--f-tx); outline-offset: 2px; }
.stl-f-check[aria-pressed="true"] { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }
.stl-f-check[aria-pressed="true"] .stl-f-check-box { background: var(--f-paper); border-color: var(--f-paper); color: var(--f-ink); }
.stl-f-check.is-busy { opacity: .5; pointer-events: none; }
.stl-f-check.is-locked { border-style: dashed; color: var(--f-mt); }
.stl-f-check.is-locked .stl-f-check-box { border-style: dashed; }
.stl-f-check.is-locked:hover { color: var(--f-tx); border-style: solid; }
.stl-f .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;
}

/* Mode d'emploi au-dessus de la liste : visiteur, ou membre qui n'a encore rien coché. */
.stl-f-eps-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px dashed var(--f-tx);
  font-size: 13.5px;
  line-height: 1.45;
}
.stl-f-eps-hint p { flex: 1; min-width: 0; }
.stl-f-eps-hint b { font-weight: 800; }
.stl-f-eps-hint .stl-f-btn { flex: none; }
.stl-f-eps-hint-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px dashed var(--f-tx);
}
.stl-f-eps-hint-box.is-on { border: 0; background: var(--f-ink); color: var(--f-paper); }

/* États */
.stl-f-ep.is-seen :is(.stl-f-ep-title, .stl-f-ep-num, .stl-f-ep-when time) { color: var(--f-mt); }
/* Vu : gris et coche noire suffisent ; le titre barré alourdissait une
   saison déjà bien avancée. */
.stl-f-ep.is-upcoming .stl-f-ep-when time { color: var(--f-tx); }
.stl-f-ep.is-upcoming .stl-f-ep-when span:not(.stl-f-ep-dur) { color: var(--f-tx); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.stl-f-ep.is-upcoming .stl-f-check:not([aria-pressed="true"]) { border-style: dashed; color: var(--f-mt); }
.stl-f-ep.is-next { box-shadow: inset 6px 0 0 var(--f-ink); padding-left: 18px; margin-left: -18px; }
.stl-f-ep.is-today .stl-f-ep-when time { color: var(--f-red); }
.stl-f-ep.is-target,
.stl-f-ep:target { background: var(--f-surf); box-shadow: inset 6px 0 0 var(--f-ink); padding-left: 18px; margin-left: -18px; }

/* Confirmation « marquer aussi les précédents » */
.stl-f-confirm {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--f-ink);
  color: var(--f-paper);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--f-ink) 25%, transparent);
}
.stl-f-confirm[hidden] { display: none; }
.stl-f-confirm-text { font-size: 15px; font-weight: 700; }
.stl-f-confirm-btns { display: flex; gap: 8px; }
.stl-f-confirm .stl-f-btn { border-color: var(--f-paper); color: var(--f-paper); background: transparent; }
.stl-f-confirm .stl-f-btn.is-solid { background: var(--f-paper); color: var(--f-ink); }
.stl-f-confirm .stl-f-btn[hidden] { display: none; }
.stl-f-confirm-btns { align-items: center; }
/* « Annuler » : présent mais discret, un simple lien souligné. */
.stl-f-confirm-cancel {
  padding: 8px 4px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--f-paper) 65%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.stl-f-confirm-cancel:hover { color: var(--f-paper); }

.stl-f-admin { margin-top: 16px; }

/* ── 6. PERSONNES ─────────────────────────────────────────────────────── */
.stl-f-crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-bottom: 28px;
  background: var(--f-ink);
  border: var(--f-line);
}
.stl-f-crew > div { padding: 12px 14px; background: var(--f-bg); }
.stl-f-crew dt { font-size: 10.5px; font-weight: 800; color: var(--f-mt); margin-bottom: 6px; }
.stl-f-crew dd { font-size: 15px; font-weight: 800; line-height: 1.3; }
.stl-f-crew a { text-decoration: none; border-bottom: 1px solid currentColor; }
.stl-f-crew a:hover { background: var(--f-ink); color: var(--f-paper); }

.stl-f-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--gap, 20px);
}
.stl-f-person {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--f-line);
  background: var(--f-bg);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.stl-f-person:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--f-ink); }
.stl-f-person-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-bottom: var(--f-line);
  background: var(--f-surf);
}
.stl-f-person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1); transition: filter .2s; }
.stl-f-person:hover .stl-f-person-photo img { filter: none; }
.stl-f-person-initials { font-size: 34px; font-weight: 900; letter-spacing: -.04em; color: var(--f-mt); }
.stl-f-person-name {
  padding: 10px 12px 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.stl-f-person-role { padding: 4px 12px 0; font-size: 13px; line-height: 1.3; color: var(--f-mt); }
.stl-f-person > :last-child { padding-bottom: 12px; }

/* ── 7. ENCADRÉS DE LA COLONNE ────────────────────────────────────────── */
.stl-f-box { border: var(--f-line); background: var(--f-bg); }
.stl-f-box-title {
  padding: 9px 14px;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.stl-f-facts dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  border-top: var(--f-line);
}
.stl-f-facts dl > div:first-child { border-top: 0; }
.stl-f-facts dt { flex: none; font-size: 10.5px; font-weight: 800; color: var(--f-mt); }
.stl-f-facts dd { font-size: 14px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.stl-f-facts dd a { text-decoration: none; border-bottom: 1px solid currentColor; }
.stl-f-facts dd a:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f-out { display: flex; flex-wrap: wrap; gap: 1px; background: var(--f-ink); border-top: var(--f-line); }
.stl-f-out li { flex: 1 1 auto; }
.stl-f-out a {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  background: var(--f-bg);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.stl-f-out a:hover { background: var(--f-ink); color: var(--f-paper); }

/* Où regarder (encadré complet) : on garde le balisage existant. */
.stl-f .stl-wtw .stl-wtw-group { padding: 12px 14px; border-top: var(--f-line); }
.stl-f .stl-wtw .stl-wtw-group:first-of-type { border-top: 0; }
.stl-f .stl-wtw-access { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--f-mt); }
.stl-f .stl-wtw-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.stl-f .stl-wtw-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stl-f .stl-wtw-name { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; text-decoration: none; }
.stl-f .stl-wtw-name:hover span { background: var(--f-ink); color: var(--f-paper); }
.stl-f .stl-wtw-go {
  margin-left: auto;
  padding: 6px 9px;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.stl-f .stl-wtw-go:hover { background: var(--f-bg); color: var(--f-tx); }
.stl-f .stl-wtw-until { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--f-mt); }
.stl-f .stl-wtw-credit { margin: 0; padding: 10px 14px; border-top: var(--f-line); font-size: 11.5px; color: var(--f-mt); }

.stl-f-lists ul li + li { border-top: var(--f-line); }
.stl-f-lists a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.stl-f-lists a:hover { background: var(--f-ink); color: var(--f-paper); }

.stl-f-sparse { border-style: dashed; }
.stl-f-sparse .stl-f-box-title { background: var(--f-bg); color: var(--f-tx); border-bottom: 1px dashed var(--f-tx); }
.stl-f-sparse > p:not(.stl-f-box-title) { padding: 12px 14px 4px; font-size: 14px; font-weight: 600; }
.stl-f-sparse ul { padding: 0 14px 12px 30px; list-style: square; font-size: 14px; line-height: 1.6; }
.stl-f-sparse .stl-f-btn { margin: 0 14px 14px; }

/* ── 8. ARTICLES, SPECTATEURS, SAGA, LIENS, SUGGESTIONS ────────────────── */
.stl-f-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap, 20px);
}
.stl-f-article {
  display: flex;
  flex-direction: column;
  border: var(--f-line);
  background: var(--f-bg);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.stl-f-article:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--f-ink); }
.stl-f-article-thumb { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: var(--f-line); background: var(--f-surf); }
.stl-f-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stl-f-article-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; }
.stl-f-article-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-mt); }
.stl-f-article-meta b { margin-right: 8px; font-weight: 800; color: var(--f-tx); }
.stl-f-article-title { font-size: 17px; font-weight: 900; line-height: 1.1; letter-spacing: -.025em; }
.stl-f-article-excerpt { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--f-tx) 78%, transparent); }
@media (min-width: 760px) {
  .stl-f-article.is-first { grid-column: span 2; }
  .stl-f-article.is-first .stl-f-article-title { font-size: clamp(20px, 2vw, 28px); text-transform: uppercase; letter-spacing: -.035em; }
}

.stl-f-watchers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--f-ink);
  border: var(--f-line);
}
.stl-f-watcher {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "av name" "av meta" "bar bar";
  align-items: center;
  column-gap: 12px;
  height: 100%;
  padding: 12px 14px;
  background: var(--f-bg);
  text-decoration: none;
}
.stl-f-watcher:hover { background: var(--f-surf); }
.stl-f-watcher img { grid-area: av; width: 44px; height: 44px; border: var(--f-line); border-radius: 0; }
.stl-f-watcher-name { grid-area: name; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.stl-f-watcher-meta { grid-area: meta; font-size: 12px; font-weight: 600; color: var(--f-mt); }
.stl-f-watcher-meta .is-off { opacity: .25; }
.stl-f-watcher-bar { grid-area: bar; height: 3px; margin-top: 10px; background: var(--f-surf); }
.stl-f-watcher-bar i { display: block; height: 100%; background: var(--f-ink); }

/* Saga (balisage de parts/linked-blocks.php) */
.stl-f .stl-mini-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(130px, 150px);
  gap: var(--gap, 20px);
  overflow-x: auto;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  scrollbar-width: thin;
}
.stl-f .stl-mini-card a { display: block; text-decoration: none; }
.stl-f .stl-mini-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-surf);
}
.stl-f .stl-mini-poster img { width: 100%; height: 100%; object-fit: cover; }
.stl-f .stl-mini-pos {
  position: absolute;
  top: 0; left: 0;
  padding: 7px 9px;
  border-radius: 0;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: 13px;
  font-weight: 900;
}
.stl-f .stl-mini-card.is-current .stl-mini-poster { box-shadow: 6px 6px 0 var(--f-ink); outline: 3px solid var(--f-ink); outline-offset: -3px; }
.stl-f .stl-mini-title { display: block; margin-top: 10px; font-size: 14px; font-weight: 900; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.stl-f .stl-mini-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--f-mt); }
.stl-f .stl-saga-nav {
  display: flex;
  justify-content: space-between;
  gap: 1px;
  margin-top: 16px;
  background: var(--f-ink);
  border: var(--f-line);
}
.stl-f .stl-saga-nav > * { flex: 1; padding: 14px 16px; background: var(--f-bg); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.stl-f .stl-saga-nav a:last-child { text-align: right; }
.stl-f .stl-saga-nav a:hover { background: var(--f-ink); color: var(--f-paper); }

/* Relations */
.stl-f .stl-relations { display: grid; gap: 1px; margin: 0; background: var(--f-ink); border: var(--f-line); }
.stl-f .stl-relation-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 16px; background: var(--f-bg); }
.stl-f .stl-relation-row dt { margin: 0; padding-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--f-mt); }
.stl-f .stl-relation-row dd { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.stl-f .stl-relation-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-bg);
  text-decoration: none;
}
.stl-f .stl-relation-item:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f .stl-relation-item img { width: 32px; height: 48px; object-fit: cover; border-radius: 0; }
.stl-f .stl-relation-item strong { display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.stl-f .stl-relation-item small { display: block; font-size: 11.5px; opacity: .7; }

/* Suggestions : cartes du catalogue, redessinées en brut. */
.stl-f .stl-tiles--rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 180px);
  grid-template-columns: none;
  gap: var(--gap, 20px);
  overflow-x: auto;
  padding: 0 0 12px;
  scrollbar-width: thin;
}
.stl-f .stl-tile-frame { border: var(--f-line); border-radius: 0; box-shadow: none; transition: transform .15s, box-shadow .15s; }
.stl-f .stl-tile-frame:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--f-ink); }
.stl-f .stl-tile-img { border-radius: 0; }
.stl-f .stl-tile-title { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 14px; line-height: 1.15; text-decoration: none; border: 0; }
.stl-f .stl-tile-title:hover { color: inherit; background: var(--f-ink); color: var(--f-paper); }

/* ── 9. PERSONNE ──────────────────────────────────────────────────────── */
.stl-f-credits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--gap, 20px);
}
.stl-f-credit {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--f-line);
  background: var(--f-bg);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.stl-f-credit:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--f-ink); }
.stl-f-credit-poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-bottom: var(--f-line); background: var(--f-surf); }
.stl-f-credit-poster img { width: 100%; height: 100%; object-fit: cover; }
.stl-f-credit-year {
  position: absolute;
  top: 0; left: 0;
  padding: 6px 8px;
  background: var(--f-ink);
  color: var(--f-paper);
  font-size: 12px;
  font-weight: 900;
}
.stl-f-credit-noimg { display: grid; place-items: center; height: 100%; padding: 12px; font-size: 18px; font-weight: 900; line-height: 1; text-transform: uppercase; text-align: center; color: var(--f-mt); }
.stl-f-credit-title { padding: 10px 12px 0; font-size: 14px; font-weight: 900; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.stl-f-credit-role { padding: 4px 12px 12px; font-size: 13px; line-height: 1.3; color: var(--f-mt); }
.stl-f-credit-role b { font-weight: 800; color: var(--f-tx); }

.stl-f-epcredits { border-top: var(--f-line); }
.stl-f-epcredits > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: var(--f-line); }
.stl-f-epcredits-series { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; text-decoration: none; }
.stl-f-epcredits-series:hover { background: var(--f-ink); color: var(--f-paper); }
.stl-f-epcredits ul li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; font-size: 14px; }
.stl-f-epcredits ul a { font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.stl-f-epcredits ul span { color: var(--f-mt); }

.stl-f-subnav { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 20px; background: var(--f-ink); border: var(--f-line); }
.stl-f-subnav a { flex: 1 1 auto; padding: 12px 16px; background: var(--f-bg); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; }
.stl-f-subnav a:hover { background: var(--f-ink); color: var(--f-paper); }

/* ── 10. BOUTONS ET FORMULAIRES ───────────────────────────────────────── */
.stl-f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-bg);
  color: var(--f-tx);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.stl-f-btn:hover,
.stl-f-btn.is-on { background: var(--f-ink); color: var(--f-paper); }
.stl-f-btn.is-solid { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }
.stl-f-btn.is-solid:hover { background: var(--f-bg); color: var(--f-tx); }
.stl-f-btn.is-big { min-height: 52px; padding: 0 22px; font-size: 12.5px; }
.stl-f-btn.is-ghost { border-color: transparent; border-bottom-color: currentColor; min-height: 32px; padding: 0 2px; }
.stl-f-btn.is-ghost:hover { border-color: var(--f-ink); padding: 0 10px; }
.stl-f-btn.is-static { cursor: default; background: var(--f-surf); }
.stl-f-btn.is-static:hover { background: var(--f-surf); color: var(--f-tx); }
.stl-f-btn:disabled { opacity: .4; cursor: not-allowed; }
.stl-f-btn.is-busy { opacity: .55; pointer-events: none; }

.stl-f-rating { display: flex; align-items: center; gap: 2px; }
.stl-f-rating-label { margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.stl-f-star {
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-bg);
  color: var(--f-tx);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.stl-f-star + .stl-f-star { margin-left: -1px; }
.stl-f-star.is-on { background: var(--f-ink); color: var(--f-paper); }

.stl-f-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 0 20px;
  padding: 16px;
  border: 1px dashed var(--f-tx);
  background: var(--f-surf);
}
.stl-f-form[hidden] { display: none; }
.stl-f-form label { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.stl-f-form label.is-wide { flex: 1 1 200px; }
.stl-f-form input {
  min-height: 40px;
  padding: 0 10px;
  border: var(--f-line);
  border-radius: 0;
  background: var(--f-bg);
  color: var(--f-tx);
  font: 600 15px/1 var(--f-font);
  letter-spacing: 0;
  text-transform: none;
}
.stl-f-form input[type="number"] { width: 96px; }
.stl-f-form input:focus { outline: none; box-shadow: 4px 4px 0 var(--f-ink); }

/* ── 11. PETITS ÉCRANS ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Dans la colonne unique : la fiche technique passe après le contenu,
     « où regarder » est déjà dans le hero. */
  .stl-f-rail { order: 2; }
}

@media (max-width: 760px) {
  .stl-f { --f-bar: 42px; }
  .stl-f-hero-text { gap: 16px; padding-top: 24px; }
  .stl-f-key { max-width: none; }
  .stl-f-actions { width: 100%; }
  .stl-f-actions .stl-f-btn.is-big { flex: 1 1 100%; }
  .stl-f-actions .stl-f-btn:not(.is-big) { flex: 1 1 auto; min-height: 46px; }
  /* Affiche seule : un bandeau bas, pas un écran entier avant les épisodes. */
  .stl-f-hero-media.has-poster { padding: 18px; }
  .stl-f-hero-media.has-poster .stl-f-poster { width: auto; max-width: 60%; height: 190px; }
  .stl-f-hero-media.is-empty { aspect-ratio: 16 / 7; }

  .stl-f-cell { flex: 1 1 auto; justify-content: center; padding: 0 12px; font-size: 10.5px; }
  .stl-f-cell:first-child { padding-left: 12px; }
  .stl-f-fill { display: none; }
  .stl-f-cell.is-jump { flex-basis: 100%; padding-right: 12px; }

  .stl-f-sec-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }

  .stl-f-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--f-bg));
    pointer-events: none;
  }
  .stl-f-tab { min-width: 104px; padding: 11px 12px 13px; }

  .stl-f-season-tools { width: 100%; }
  .stl-f-season-tools .stl-f-season-mark { flex: 1; min-height: 44px; }

  /* Épisode en carte compacte :
       S01E03  Titre de l'épisode                [✓]
               12 août 2026 · il y a 2 mois · 52 min   */
  .stl-f-ep,
  .stl-f-eps:not(:has(.stl-f-check)) .stl-f-ep {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas:
      "num main check"
      "num when when";
    gap: 6px 12px;
    padding: 14px 0;
  }
  .stl-f-ep-num { font-size: 12.5px; }
  .stl-f-ep-title { font-size: 16px; }
  .stl-f-ep-when {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    text-align: left;
  }
  .stl-f-ep-when time { font-size: 13px; }
  .stl-f-ep-syn { font-size: 13.5px; }
  .stl-f-check { min-width: 0; height: 44px; padding: 0 10px 0 8px; align-self: start; }
  .stl-f-eps-hint { flex-wrap: wrap; }
  .stl-f-eps-hint .stl-f-btn { width: 100%; min-height: 44px; justify-content: center; }
  .stl-f-ep.is-next,
  .stl-f-ep.is-target,
  .stl-f-ep:target { padding-left: 12px; margin-left: -12px; box-shadow: inset 4px 0 0 var(--f-ink); }
  .stl-f-confirm { bottom: 8px; }
  .stl-f-confirm-btns { width: 100%; flex-wrap: wrap; }
  .stl-f-confirm-btns .stl-f-btn { flex: 1; min-height: 46px; }
  .stl-f-confirm-cancel { flex-basis: 100%; min-height: 40px; }

  .stl-f-people { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
  .stl-f-person-name { font-size: 12.5px; padding: 8px 9px 0; }
  .stl-f-person-role { font-size: 12px; padding: 3px 9px 0; }
  .stl-f-person > :last-child { padding-bottom: 10px; }
  .stl-f-credits { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }

  .stl-f .stl-relation-row { grid-template-columns: 1fr; gap: 10px; }
  .stl-f-epcredits > li { grid-template-columns: 1fr; gap: 6px; }
  .stl-f .stl-tiles--rail,
  .stl-f .stl-mini-rail {
    grid-auto-columns: min(42%, 170px);
    margin-inline: calc(var(--f-pad) * -1);
    padding-inline: var(--f-pad);
    scroll-padding-inline: var(--f-pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .stl-f .stl-tiles--rail > *,
  .stl-f .stl-mini-rail > * { scroll-snap-align: start; }
  .stl-f-article:hover,
  .stl-f-person:hover,
  .stl-f-credit:hover,
  a.stl-f-key:hover { transform: none; box-shadow: none; }
  .stl-f-form input { font-size: 16px; } /* pas de zoom iOS */
}

@media (prefers-reduced-motion: reduce) {
  .stl-f-live { animation: none; }
  .stl-f :is(.stl-f-person, .stl-f-article, .stl-f-credit, .stl-f-key, .stl-tile-frame):hover { transform: none; }
}


/* ── 12. ACTIONS DU MEMBRE : VU, MA LISTE, NOTE (septembre 2026) ─────────
   Avant, « Marquer vu » et « Vu ✓ » étaient tous deux noirs, et le survol
   inversait les couleurs : on ne savait plus si c'était fait. Désormais :
     · à faire  → bouton blanc, filet noir, icône au trait ;
     · fait     → bouton noir plein, icône pleine (coche, marque-page) ;
     · survol   → un gris léger, jamais l'inversion : il ne ment pas sur
                  l'état.
   Chaque geste rebondit (is-pop) et un message confirme en bas d'écran,
   avec « Annuler » (.stl-ntf, fiche.js). */
.stl-f-toggle .stl-f-state { display: inline-flex; align-items: center; gap: 9px; }
.stl-f-toggle[aria-pressed="true"] .stl-f-state.is-off,
.stl-f-toggle:not([aria-pressed="true"]) .stl-f-state.is-on { display: none; }
.stl-f-ico { flex: none; }

.stl-f-toggle,
.stl-f-toggle.is-solid { background: var(--f-bg); border-color: var(--f-tx); color: var(--f-tx); }
.stl-f-toggle:hover { background: var(--f-surf); color: var(--f-tx); }
.stl-f-toggle.is-on { background: var(--f-ink); border-color: var(--f-ink); color: var(--f-paper); }
.stl-f-toggle.is-on:hover { background: #2b2b2b; color: var(--f-paper); }
.stl-f-toggle.is-busy { opacity: 1; cursor: progress; }

.is-pop { animation: stl-pop .45s cubic-bezier(.2, .9, .3, 1.35); }
.is-pop.is-on .stl-f-state.is-on .stl-f-ico { animation: stl-tick .4s ease-out both; }
@keyframes stl-pop {
  0%   { transform: none; }
  30%  { transform: scale(.94); }
  65%  { transform: scale(1.04); }
  100% { transform: none; }
}
@keyframes stl-tick {
  from { transform: scale(.3) rotate(-20deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* La note : toujours visible (noter marque le film vu), avec son mot. */
.stl-f-rating { flex-wrap: wrap; gap: 0; }
.stl-f-stars { display: inline-flex; }
.stl-f-star { transition: background .12s, color .12s, transform .15s; }
.stl-f-rating-word {
  margin-left: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--f-mt);
}
.stl-f-rating.has-rating .stl-f-rating-word { color: var(--f-tx); font-weight: 800; }

/* Survol à la souris : les étoiles se remplissent jusqu'au curseur. */
@media (hover: hover) {
  .stl-f-stars:hover .stl-f-star { background: var(--f-bg); color: var(--f-tx); }
  .stl-f-stars .stl-f-star:hover,
  .stl-f-stars .stl-f-star:has(~ .stl-f-star:hover) { background: var(--f-ink); color: var(--f-paper); }
}

/* Juste après « Marquer vu » : les étoiles s'allument une à une, une
   fois, pour inviter à noter. */
.stl-f-rating.is-invite .stl-f-star { animation: stl-invite 1.3s ease both; }
.stl-f-rating.is-invite .stl-f-star:nth-child(2) { animation-delay: .08s; }
.stl-f-rating.is-invite .stl-f-star:nth-child(3) { animation-delay: .16s; }
.stl-f-rating.is-invite .stl-f-star:nth-child(4) { animation-delay: .24s; }
.stl-f-rating.is-invite .stl-f-star:nth-child(5) { animation-delay: .32s; }
@keyframes stl-invite {
  0%, 100% { background: var(--f-bg); color: var(--f-tx); transform: none; }
  35%      { background: var(--f-ink); color: var(--f-paper); transform: translateY(-4px); }
}

@media (max-width: 760px) {
  /* Vu et Ma liste côte à côte, la note dessous sur toute la largeur. */
  .stl-f-actions .stl-f-toggle.is-big { flex: 1 1 calc(50% - 4px); padding: 0 12px; }
  .stl-f-rating { flex: 1 1 100%; padding-top: 6px; }
  .stl-f-rating-label { flex-basis: 100%; margin: 0 0 8px; }
  .stl-f-star { width: 46px; height: 46px; font-size: 19px; }
  .stl-f-rating-word { flex-basis: 100%; margin: 8px 0 0; }
}

/* ── Les notifications ──
   Brutes et compactes : papier blanc, filet noir de 1 px, angles droits,
   petite ombre franche. Une colonne d'icône à gauche (noire quand c'est
   fait, blanche quand c'est défait, rouge en cas d'erreur), le texte, puis
   les actions en liens soulignés, sans gros boutons. Elles descendent sous
   le menu et s'empilent (la plus récente en haut). Le filet du bas se vide
   pendant le temps d'affichage ; au survol il s'arrête.
   Préfixe .stl-ntf : .stl-toast est déjà pris par les listes et les badges. */
.stl-ntfs {
  position: fixed;
  top: 70px;                   /* recalé sous le menu par fiche.js */
  right: var(--pad, 40px);
  z-index: 150;                /* sous le menu (200) : elles glissent dessous */
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}

.stl-ntf {
  --t-ink: var(--ink, #0a0a0a);
  --t-paper: var(--paper, #fff);
  --t-mt: var(--mt, #6b6b6b);
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--t-ink);
  background: var(--t-paper);
  color: var(--t-ink);
  box-shadow: 3px 3px 0 var(--t-ink);
  font-family: var(--sans, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  animation: stl-ntf-in .28s cubic-bezier(.2, .8, .2, 1) both;
  transition: height .22s ease, opacity .18s ease, transform .22s ease, margin .22s ease, border-width .22s;
}
@keyframes stl-ntf-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.stl-ntf.is-out {
  height: 0 !important;
  margin-top: -8px;            /* rattrape l'espace entre deux notifications */
  border-width: 0;
  opacity: 0;
  transform: translateX(24px);
  box-shadow: none;
}

/* Colonne d'icône, sur toute la hauteur. */
.stl-ntf-ico {
  display: grid;
  place-items: start center;
  padding-top: 10px;
  background: var(--t-ink);
  color: var(--t-paper);
}
.stl-ntf-ico svg { display: block; animation: stl-tick .35s .1s ease-out both; }
.stl-ntf.is-off .stl-ntf-ico { background: var(--t-paper); color: var(--t-ink); border-right: 1px solid var(--t-ink); }
.stl-ntf.is-err .stl-ntf-ico { background: var(--wf-red, #d23c0f); color: #fff; }

.stl-ntf-body { min-width: 0; display: grid; gap: 3px; padding: 9px 4px 10px 12px; }
.stl-ntf-title { font-size: 13.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.stl-ntf-sub { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--t-mt); }

/* Actions : de simples liens soulignés, alignés sous le texte. */
.stl-ntf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 5px; }
.stl-ntf-btn,
.stl-ntf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--t-ink);
  font: 800 10.5px/1.2 var(--sans, 'Inter', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.stl-ntf-link { text-decoration: none; }
.stl-ntf-link span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stl-ntf-btn:hover,
.stl-ntf-btn:focus-visible,
.stl-ntf-link:hover span:first-child { text-decoration-thickness: 2px; outline: none; }
.stl-ntf-link span[aria-hidden] { transition: transform .15s; }
.stl-ntf-link:hover span[aria-hidden] { transform: translateX(3px); }

/* La croix : discrète, elle se précise au survol. */
.stl-ntf-close {
  align-self: start;
  width: 30px;
  height: 30px;
  margin: 3px 3px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t-ink);
  opacity: .35;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .12s;
}
.stl-ntf-close:hover,
.stl-ntf-close:focus-visible { opacity: 1; outline: none; }

/* Le temps qui reste : un filet noir qui se vide, sous toute la largeur. */
.stl-ntf-timer {
  grid-column: 1 / -1;
  display: block;
  height: 2px;
  background: var(--surf, #f3f3f3);
}
.stl-ntf-timer i {
  display: block;
  height: 100%;
  background: var(--t-ink);
  transform-origin: left;
  animation: stl-ntf-time linear forwards;
}
.stl-ntf.is-err .stl-ntf-timer i { background: var(--wf-red, #d23c0f); }
.stl-ntf:hover .stl-ntf-timer i,
.stl-ntf:focus-within .stl-ntf-timer i { animation-play-state: paused; }
@keyframes stl-ntf-time {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 600px) {
  .stl-ntfs { left: 12px; right: 12px; width: auto; }
  .stl-ntf-btn,
  .stl-ntf-link { min-height: 32px; }
  .stl-ntf-close { width: 38px; height: 38px; margin: 0; }

  /* Sur un téléphone, seule la plus récente se montre en entier : les
     précédentes se replient sur leur titre, pour ne pas couvrir la page. */
  .stl-ntf + .stl-ntf .stl-ntf-sub,
  .stl-ntf + .stl-ntf .stl-ntf-acts { display: none; }
  .stl-ntf + .stl-ntf .stl-ntf-body { padding-top: 7px; padding-bottom: 7px; }
  .stl-ntf + .stl-ntf .stl-ntf-ico { padding-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-pop, .is-pop .stl-f-ico, .stl-f-rating.is-invite .stl-f-star, .stl-ntf, .stl-ntf-ico svg { animation: none; }
  .stl-ntf { transition: opacity .15s; }
}

/* ── 13. CE QUE LE CLIC VA FAIRE (septembre 2026) ──────────────────────
   La case « vu » d'un épisode porte quatre libellés empilés dans la même
   cellule (la largeur ne saute pas) : l'état (« Pas vu » / « Vu ») et,
   au survol, l'état d'après (« Vu ») ou le geste inverse (« Retirer »).
   L'aperçu reste reconnaissable : gris clair et coche grise, jamais le
   noir plein de l'état coché.
   Une bulle, au survol ou au clavier, dit l'action en toutes lettres
   (data-tip-off / data-tip-on, choisie selon aria-pressed). Juste après
   un clic, .is-fresh (fiche.js) coupe l'aperçu jusqu'à ce que la souris
   sorte du bouton. */
/* button seulement : le lien du visiteur garde son « Vu ? » et son texte
   pour lecteur d'écran, qu'il ne faut pas masquer. */
button.stl-f-check .stl-f-check-txt { display: grid; }
button.stl-f-check .stl-f-check-txt > span { grid-area: 1 / 1; visibility: hidden; }
.stl-f-check:not([aria-pressed="true"]) .stl-f-check-txt .is-off,
.stl-f-check[aria-pressed="true"] .stl-f-check-txt .is-on { visibility: visible; }

@media (hover: hover) {
  button.stl-f-check:hover:not(.is-fresh) .stl-f-check-txt > span { visibility: hidden; }
  .stl-f-check:hover:not(.is-fresh):not([aria-pressed="true"]) .stl-f-check-txt .is-to-on,
  .stl-f-check:hover:not(.is-fresh)[aria-pressed="true"] .stl-f-check-txt .is-to-off { visibility: visible; }

  /* Pas vu → aperçu de « Vu » */
  .stl-f-check:hover:not(.is-fresh):not(.is-locked):not([aria-pressed="true"]) {
    background: var(--f-surf);
    border-style: solid;
    color: var(--f-tx);
  }
  .stl-f-check.is-fresh:hover .stl-f-check-box { color: transparent; }
  .stl-f-check[aria-pressed="true"].is-fresh:hover .stl-f-check-box { color: var(--f-ink); }
  /* Vu → aperçu de « Retirer » : on reste noir, la coche s'efface. */
  .stl-f-check:hover:not(.is-fresh)[aria-pressed="true"] { background: #2b2b2b; }
  .stl-f-check:hover:not(.is-fresh)[aria-pressed="true"] .stl-f-check-box { color: color-mix(in srgb, var(--f-ink) 25%, transparent); }

  /* La bulle */
  .stl-f-check[data-tip-off],
  .stl-f-toggle[data-tip-off] { position: relative; }
  .stl-f-check[data-tip-off]::after,
  .stl-f-toggle[data-tip-off]::after {
    content: attr(data-tip-off);
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 8px);
    right: -1px;
    padding: 7px 10px;
    background: var(--f-ink);
    color: var(--f-paper);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--f-ink) 20%, transparent);
    font: 700 12px/1.2 var(--f-font);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s, transform .12s;
    pointer-events: none;
  }
  /* Les boutons du hero sont à gauche : la bulle part de leur bord gauche. */
  .stl-f-toggle[data-tip-off]::after { right: auto; left: -1px; }
  .stl-f-check[aria-pressed="true"][data-tip-on]::after,
  .stl-f-toggle[aria-pressed="true"][data-tip-on]::after { content: attr(data-tip-on); }
  .stl-f-check:hover:not(.is-fresh):not(.is-busy)::after,
  .stl-f-toggle:hover:not(.is-fresh):not(.is-busy)::after {
    opacity: 1;
    transform: none;
    transition-delay: .3s;
  }
}
.stl-f-check:focus-visible::after,
.stl-f-toggle:focus-visible::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stl-f-check::after, .stl-f-toggle::after { transition: none; transform: none; }
}

/* ── 14. REPÈRES DE LA LISTE D'ÉPISODES (septembre 2026) ────────────────
   · la case de l'épisode « à voir ensuite » porte une ombre franche :
     c'est le prochain clic le plus probable (ce n'est pas le noir plein
     de l'état coché) ;
   · aperçu (.is-preview) des épisodes qu'un clic va aussi cocher ;
   · temps restant (.stl-f-left, fiche.js) ;
   · glisser vers la droite sur mobile (.is-swiping) ;
   · barre « à voir ensuite » collée en bas du téléphone (.stl-f-dock). */
.stl-f-ep.is-next button.stl-f-check:not([aria-pressed="true"]) {
  box-shadow: 4px 4px 0 var(--f-ink);
  font-weight: 900;
}
@media (hover: hover) {
  .stl-f-ep.is-next button.stl-f-check:not([aria-pressed="true"])[data-tip-off]::after {
    content: attr(data-tip-off) " · touche V";
  }
}

.stl-f-ep.is-preview { background: color-mix(in srgb, var(--f-surf) 70%, transparent); }
.stl-f-ep.is-preview .stl-f-check:not([aria-pressed="true"]) { background: var(--f-surf); border-style: solid; color: var(--f-tx); }
.stl-f-ep.is-preview .stl-f-check:not([aria-pressed="true"]) .stl-f-check-box { color: var(--f-mt); }

.stl-f-left { font-weight: 600; color: var(--f-mt); }
.stl-f-progress-txt:has(.stl-f-left) { white-space: normal; }

.stl-f-only-touch { display: none; }
@media (hover: none) {
  .stl-f-only-touch { display: inline; }
  .stl-f-only-mouse { display: none; }
}

/* Glisser : la ligne suit le doigt, une bande noire se découvre dessous. */
.stl-f-ep { position: relative; }
.stl-f-ep::before {
  content: attr(data-swipe);
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  width: var(--swipe, 0px);
  padding-left: 14px;
  overflow: hidden;
  background: var(--f-surf);
  color: var(--f-mt);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.stl-f-ep:not(.is-swiping):not(.is-swipe-back)::before { content: none; }
.stl-f-ep.is-armed::before { background: var(--f-ink); color: var(--f-paper); }
.stl-f-ep.is-swiping > * { transform: translateX(var(--swipe, 0px)); }
.stl-f-ep.is-swipe-back > *,
.stl-f-ep.is-swipe-back::before { transition: transform .2s ease, width .2s ease; }

/* La barre du bas (téléphone seulement). */
.stl-f-dock { display: none; }
/* Écrans tactiles (tablettes comprises) : le geste horizontal revient au
   script, le vertical et le zoom restent au navigateur. */
@media (hover: none) {
  .stl-f-eps:has(button.stl-f-check) .stl-f-ep { touch-action: pan-y pinch-zoom; }
}
@media (max-width: 760px) {
  .stl-f-dock {
    position: fixed;
    z-index: 140;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: stretch;
    border: var(--f-line);
    background: var(--f-bg);
    box-shadow: 4px 4px 0 var(--f-ink);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform .22s ease, visibility 0s .22s;
  }
  .stl-f-dock.is-shown { transform: none; visibility: visible; transition: transform .22s ease; }
  .stl-f:has(.stl-f-confirm:not([hidden])) .stl-f-dock { transform: translateY(calc(100% + 24px)); visibility: hidden; }
  .stl-f-dock-go {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 9px 12px;
    text-decoration: none;
  }
  .stl-f-dock-kick { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--f-mt); }
  .stl-f-dock-go b { overflow: hidden; font-size: 14px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .stl-f-dock-seen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 18px;
    border: 0;
    border-left: var(--f-line);
    border-radius: 0;
    background: var(--f-ink);
    color: var(--f-paper);
    font: 900 12px/1 var(--f-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stl-f-dock, .stl-f-dock.is-shown { transition: none; }
  .stl-f-ep.is-swipe-back > *, .stl-f-ep.is-swipe-back::before { transition: none; }
}


/* Chapô tronqué du hero : un lien vers la section complète (#histoire,
   #biographie). Le texte reste lisible comme un paragraphe ; seul
   « Lire la suite » se souligne, et le survol souligne tout. */
.stl-f-lead.is-link a { color: inherit; text-decoration: none; }
.stl-f-lead.is-link a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.stl-f-lead-more {
  white-space: nowrap; font-size: .72em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.stl-f-lead.is-link a:hover .stl-f-lead-more { border-bottom-width: 2px; }
html:has(.stl-f-hero) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.stl-f-hero) { scroll-behavior: auto; } }

/* ── « Dans nos articles » : le lien entre la fiche et le journal ─────── */
/* Une phrase qui dit de quoi il s'agit, avant les cartes. */
.stl-f-about {
  max-width: 62ch;
  margin: -6px 0 22px !important;
  padding: 12px 16px;
  border-left: 6px solid var(--f-ink);
  background: var(--f-surf);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
}
.stl-f-about b { font-weight: 900; }

/* Bas de carte : les autres fiches citées, puis « Lire l'article ». */
.stl-f-article-body { flex: 1; }
.stl-f-article-also {
  display: block;
  padding-top: 9px;
  border-top: 1px dashed color-mix(in srgb, var(--f-tx) 35%, transparent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.stl-f-article-also-lbl {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-mt);
}
.stl-f-article-go {
  margin-top: auto;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stl-f-article-go span { display: inline-block; transition: transform .15s; }
.stl-f-article:hover .stl-f-article-go span { transform: translateX(3px); }

/* Case « 3 articles ↓ » dans la barre de repères. */
.stl-f-cell.is-articles { font-weight: 800; }