/* ═══════════════════════════════════════════════════════════════
   stl/timeline, rendu front (chargé aussi dans l'éditeur)

   Les tokens --stl-* sont définis dans blocks/_shared/blocks.css et
   reprennent ceux du thème quand il les fournit.

   Trois mises en page :
     .stl-timeline--agenda   rail chronologique + entrées
     .stl-timeline--cards    grille de cartes
     .stl-timeline--table    tableau linéaire

   Agenda et grille ne partagent pas leur balisage, render.php a un rendu
   d'entrée par mode, mais ils portent la même distinction, celle qui fait
   tout le propos du bloc : ce qui commence n'est pas ce qui continue.

     --event    film, début de saison, finale, saison lâchée d'un bloc
                agenda : carte, affiche à gauche
                grille : carte de deux colonnes, affiche à gauche

     --routine  un épisode d'une série déjà lancée
                agenda : ligne, pictogramme d'écran, pas d'affiche
                grille : carte d'une colonne, pictogramme, pas d'affiche

   Même vocabulaire, deux grammaires. Le rail décline la distinction en
   hauteur de ligne, la grille en surface de carte.

   STYLE BRUT : comme les fiches. Filets noirs d'un pixel, angles droits,
   capitales grasses pour les repères, titres très gras et serrés, ombre
   portée franche au survol. Aucun dégradé, aucun arrondi, aucun gris de
   fond : le noir et le blanc suffisent.
═══════════════════════════════════════════════════════════════ */

.stl-timeline {
    font-family: var(--stl-sans);

    /* L'encre vient du contexte : sur la page, celle du thème ; dans un
       conteneur sombre, celle que le conteneur a posée. Toute la palette
       du bloc en dérive (voir _shared/blocks.css). */
    color: inherit;
}

/* ───────────────────────────────────────────────
   Neutralisation des listes d'article

   Le thème décore tout <li> placé dans un article : puce, retrait de
   2.2em, et surtout un compteur (`content: counter(wf-art-list)`) qui
   se moque de savoir ce qu'il numérote. Nos jours ET nos entrées
   étant des <li>, la numérotation courait sur les deux niveaux à la
   fois, d'où les « 1. » plaqués sur une date puis sur trois cartes.

   La liste reste une liste (l'ordre chronologique a du sens pour un
   lecteur d'écran) ; seule sa décoration saute. Les sélecteurs portent
   deux classes parce que ceux du thème en portent une plus deux
   éléments : à poids égal, l'ordre de chargement des feuilles
   déciderait, et il n'est pas garanti.
─────────────────────────────────────────────── */
.stl-timeline .stl-timeline__groups,
.stl-timeline .stl-timeline__groups :is(ul, ol) {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.stl-timeline .stl-timeline__groups li {
    padding-left: 0;
    margin-bottom: 0;
    counter-increment: none;
}

.stl-timeline .stl-timeline__groups li::before {
    content: none;
}

/* ── En-tête du bloc ── */
.stl-timeline__heading {
    margin: 0 0 8px;
    padding-top: 14px;
    border-top: 6px solid currentColor;
    font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.stl-timeline__range {
    margin: 0 0 26px;
    font: 800 .72rem/1.5 var(--stl-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--stl-mt);
}

/* ═══════════════════════════════════════════════
   AGENDA, rail chronologique

   La colonne de dates est fixe à gauche, sur ordinateur comme sur
   mobile, reliée d'un jour à l'autre par un filet vertical. Un jour
   qui porte plusieurs sorties garde sa date sous les yeux : elle se
   colle en haut de l'écran le temps qu'on parcoure ses entrées.
═══════════════════════════════════════════════ */
.stl-timeline--agenda {
    --stl-rail: 58px;   /* largeur de la colonne de dates          */
    --stl-gutter: 26px; /* espace entre la colonne et les entrées  */
    --stl-dot: 9px;     /* pastille du jour, posée sur le filet    */

    /* Hauteur à laquelle vit la pastille, mesurée depuis le haut du
       groupe : le milieu optique du quantième. Tout ce qui doit s'aligner
       dessus, le départ du filet, l'étiquette « aujourd'hui », part de
       cette valeur plutôt que de la recopier. */
    --stl-dot-y: 13px;

    /* Sous la barre de navigation du thème quand elle existe. Une page
       qui empile d'autres éléments collants (bandeau défilant) peut
       redéfinir cette variable sur le bloc. */
    --stl-sticky-top: calc(var(--h-navbar, 0px) + 16px);
}

.stl-timeline--agenda .stl-timeline__group {
    position: relative;
    display: grid;
    grid-template-columns: var(--stl-rail) 1fr;
    column-gap: var(--stl-gutter);
    padding: 0 0 26px;
}

.stl-timeline--agenda .stl-timeline__group:last-child {
    padding-bottom: 4px;
}

/* Le filet qui relie les jours. Il court d'un bord à l'autre du groupe :
   les groupes étant jointifs, la ligne est continue. */
.stl-timeline--agenda .stl-timeline__group::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--stl-rail) + var(--stl-gutter) / 2);
    z-index: 0;
    width: 1px;
    background: currentColor;
}

/* Premier jour : le filet démarre à la pastille, pas au-dessus. */
.stl-timeline--agenda .stl-timeline__group:first-child::after {
    top: var(--stl-dot-y);
}

/* Dernier jour : le filet s'arrête net sous la dernière sortie, sans fondu. */
.stl-timeline--agenda .stl-timeline__group:last-child::after {
    bottom: 4px;
}

/* ── La date ── */
.stl-timeline__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.stl-timeline--agenda.stl-timeline--group-day .stl-timeline__date {
    position: sticky;
    top: var(--stl-sticky-top);
    z-index: 1;
    align-self: start;
    align-items: flex-end;
    text-align: right;
}

/* La colonne de droite : une seule case de grille, quoi qu'elle contienne.

   La date portait `grid-row: 1 / -1` pour laisser passer le repère du jour
   au-dessus des sorties. C'était sans effet : hors grille explicite, `-1`
   désigne la dernière ligne de la grille EXPLICITE, donc la ligne 1, et la
   déclaration se réduisait à une seule rangée. La date partageait donc sa
   rangée avec le repère et lui imposait ses 56px de haut : la première
   carte du jour marqué tombait cinquante pixels plus bas que celles de
   tous les autres jours. Un conteneur unique supprime la question. */
.stl-timeline__col {
    min-width: 0;
}

/* La pastille du jour, centrée sur le filet. Elle suit la date quand
   celle-ci se colle : le repère descend le long du rail à mesure qu'on
   parcourt les sorties de la journée.

   Elle portait un anneau de la couleur du papier pour découper le
   filet. Un anneau suppose de connaître le fond, ce qui est faux dès
   qu'on pose le bloc dans un conteneur coloré : la pastille est
   simplement opaque et passe par-dessus. */
.stl-timeline--agenda.stl-timeline--group-day .stl-timeline__date::after {
    content: '';
    position: absolute;
    top: calc(var(--stl-dot-y) - var(--stl-dot) / 2);
    left: 100%;
    margin-left: calc(var(--stl-gutter) / 2 - var(--stl-dot) / 2 + .5px);
    width: var(--stl-dot);
    height: var(--stl-dot);
    border-radius: 0;
    background: currentColor;
}

.stl-timeline__daynum {
    font: 900 1.9rem/1 var(--stl-mono);
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}

.stl-timeline__daymon {
    margin-top: 4px;
    font: 800 .66rem/1.4 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.stl-timeline__dayname {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--stl-mt);
}

.stl-timeline__grouplabel {
    font: 900 1rem/1.2 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Groupé par semaine ou par série : l'étiquette est une phrase, pas un
   quantième. Elle prend toute la largeur, en titre de section, et le
   rail n'a plus lieu d'être. */
.stl-timeline--agenda:not(.stl-timeline--group-day) .stl-timeline__group {
    display: block;
    padding: 0 0 24px;
}

.stl-timeline--agenda:not(.stl-timeline--group-day) .stl-timeline__group::after {
    display: none;
}

.stl-timeline--agenda:not(.stl-timeline--group-day) .stl-timeline__date {
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 2px solid currentColor;
}

/* ───────────────────────────────────────────────
   Repère du jour

   Rendu seulement quand la date du jour tombe dans la plage affichée :
   sur un mois passé ou à venir, rien de tout ceci n'existe dans le HTML.
   Deux formes pour un même objet, une pastille accent sur le rail, une
   étiquette qui ouvre la colonne de droite, selon que le jour porte des
   sorties ou qu'il soit vide.
─────────────────────────────────────────────── */
.stl-timeline__nowline {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    font: 800 .64rem/1 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Aplat et texte sont pris ENSEMBLE dans le thème (--acc et --on-acc), et
   lus ici, sur l'élément : dans un conteneur sombre le thème retourne la
   paire, et l'étiquette reste lisible. Un texte foncé écrit en dur sur
   l'accent donnait du noir sur noir depuis que l'accent du thème est noir. */
.stl-timeline__nowline > span {
    flex: none;
    padding: 6px 9px;
    background: var(--acc, #0a0a0a);
    color: var(--on-acc, #ffffff);
    border-radius: 0;
}

/* Le milieu de l'étiquette tombe sur la pastille du jour.

   Une case de grille s'étire sur toute la hauteur de sa rangée : le
   repère se retrouvait centré sur une rangée haute de 48px, soit une
   quinzaine de pixels sous la pastille, et le décalage se voyait
   d'autant plus que le filet le prolonge à l'horizontale. On ne devine
   pas la hauteur de l'étiquette : on lui donne une boîte de deux fois
   l'axe de la pastille et son contenu s'y centre tout seul. */
.stl-timeline--agenda .stl-timeline__nowline {
    align-self: start;
    height: calc(var(--stl-dot-y) * 2);
}

/* Jour qui porte des sorties : l'étiquette coiffe la pile. L'air qu'elle
   laisse sous elle vaut celui qui sépare deux entrées, pour que le repère
   s'inscrive dans le rythme du jour au lieu de l'écarter. La boîte de
   centrage étant plus haute que l'étiquette, la marge est réduite
   d'autant. */
.stl-timeline--agenda .is-today .stl-timeline__nowline {
    margin-bottom: 6px;
}

/* Le filet qui prolonge l'étiquette : un trait plein, d'un bord à l'autre. */
.stl-timeline__nowline::after {
    content: '';
    flex: 1;
    height: 2px;
    background: currentColor;
}

/* Jour sans sortie : le repère est tout le contenu du groupe. */
.stl-timeline__group--now {
    padding-bottom: 18px;
}

.stl-timeline--agenda.stl-timeline--group-day :is(.stl-timeline__group--now, .is-today) .stl-timeline__date::after {
    background: currentColor;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Jours révolus : la date s'estompe, les sorties gardent leur poids. Le
   contraste se lit d'un coup d'œil sans rien effacer. */
.stl-timeline__group.is-past .stl-timeline__daynum {
    color: var(--stl-mt);
}

/* Jour révolu : la pastille se vide. Le fond vient du thème (--bg), lu ici
   pour suivre un conteneur sombre. */
.stl-timeline--agenda.stl-timeline--group-day .is-past .stl-timeline__date::after {
    background: var(--bg, #ffffff);
    border: 1px solid currentColor;
    box-sizing: border-box;
}

.stl-timeline__group.is-past .stl-timeline__daymon {
    color: var(--stl-mt);
}

/* ───────────────────────────────────────────────
   Les entrées d'un jour
─────────────────────────────────────────────── */
.stl-timeline__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stl-timeline .stl-timeline__items .stl-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.stl-timeline .stl-timeline__items .stl-timeline__item + .stl-timeline__item {
    margin-top: 12px;
}

/* Les lignes d'épisodes se suivent en pile serrée : elles forment un
   ensemble, pas une succession d'objets isolés. */
.stl-timeline .stl-timeline__items .stl-timeline__item--routine + .stl-timeline__item--routine {
    margin-top: -1px; /* les cadres se confondent : une seule pile */
}

.stl-timeline__item.is-draft { opacity: .65; }

/* ── Temps fort : la carte ──────────────────────
   Film, début de saison, finale, saison lâchée d'un bloc. Cadre noir d'un
   pixel, angles droits, et une ombre portée franche au survol : la carte
   se soulève, comme celles des fiches. */
.stl-timeline--agenda .stl-timeline__items .stl-timeline__item--event {
    padding: 12px 14px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    transition: transform .15s, box-shadow .15s;
}

.stl-timeline--agenda .stl-timeline__items .stl-timeline__item--event:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 currentColor;
}

.stl-timeline--agenda .stl-timeline__item--event .stl-timeline__title {
    font-size: 1.15rem;
}

/* ── Épisode courant : la ligne ─────────────────
   Une ligne fine, sans affiche, pictogramme d'écran à gauche. Les lignes
   d'un même jour s'empilent en un seul tableau. Au survol, la ligne
   s'inverse : encre et papier viennent du thème (--tx et --bg), pris
   ensemble pour rester lisibles quel que soit le fond. */
.stl-timeline .stl-timeline__items .stl-timeline__item--routine {
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 10px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    transition: background .12s, color .12s;
}

.stl-timeline .stl-timeline__items .stl-timeline__item--routine:hover {
    background: var(--tx, #0a0a0a);
    color: var(--bg, #ffffff);
}

.stl-timeline__epicon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: inherit;
}

.stl-timeline__item--routine:hover .stl-timeline__epicon {
    color: inherit;
}

/* La ligne garde l'encre pleine et n'atténue que ses feuilles : c'est
   ce qui permet au nom de la série d'être le point fort de la ligne.
   Atténuer le conteneur rendrait l'encre pleine irrécupérable pour ses
   enfants, `currentColor` y valant déjà le gris. */
.stl-timeline__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: .86rem;
    line-height: 1.45;
}

.stl-timeline__lineseries {
    font-weight: 800;
}

.stl-timeline__linetitle {
    color: var(--stl-mt);
}

.stl-timeline__linetitle::before {
    content: "·";
    margin-right: 7px;
    color: var(--stl-bd);
}

/* La plateforme ferme la ligne, alignée d'une entrée à l'autre. */
.stl-timeline__line .stl-timeline__network {
    margin-left: auto;
    padding-left: 10px;
}

/* Plateforme et durée : des mentions de second plan, où qu'elles
   soient posées. */
.stl-timeline__network,
.stl-timeline__duration {
    font: 700 .68rem/1.5 var(--stl-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stl-mt);
}

/* ── Épisodes nommés d'une sortie groupée ── */
.stl-timeline__eplist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px 18px;
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
    font-size: .78rem;
    line-height: 1.6;
}

.stl-timeline__eplist > span {
    display: flex;
    min-width: 0;
}

.stl-timeline__eplist a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--stl-mt);
}

/* Retour à l'encre pleine, celle que le conteneur a conservée. */
.stl-timeline__eplist a:hover { color: inherit; }

/* ── Affiche ── */
.stl-timeline__poster {
    flex: none;
    display: block;
    width: 62px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--stl-surf);
    border: 1px solid currentColor;
    border-radius: 0;
    border-bottom-width: 1px; /* neutralise le soulignement de lien du thème */
}

.stl-timeline__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stl-timeline__poster-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: 900 1.3rem/1 var(--stl-mono);
    color: var(--stl-mt);
}

/* Fiche sans affiche : la vignette se signale comme un trou à combler
   au lieu d'imposer un aplat plein format. En grille, où la vignette
   fait toute la largeur de la carte, le format 2/3 donnait 300px de
   gris pour une seule initiale. */
.stl-timeline__poster:has(.stl-timeline__poster-fallback) {
    background: color-mix(in srgb, var(--stl-surf) 45%, transparent);
    border-style: dashed;
}

.stl-timeline__body {
    min-width: 0;
    flex: 1;
}

.stl-timeline__parent {
    margin: 0 0 3px;
    font: 800 .7rem/1.4 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .09em;
}

.stl-timeline__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.stl-timeline__code {
    display: inline-block;
    margin-right: .45em;
    font: 700 .8em/1 var(--stl-mono);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--stl-mt);
}

.stl-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 9px 0 0;
    font-size: .78rem;
}

/* Les liens de la timeline ne prennent pas le soulignement du thème :
   le titre suffit à signaler qu'on peut cliquer, et un bloc entier de
   titres soulignés se lit comme un pavé de liens.

   `:not(.btn)` n'est pas décoratif. Le thème souligne le contenu avec
   `:where(.entry-content, [class*="wp-block-wf-"]) a:not(.btn)`, dont
   :where() annule le poids : il ne reste qu'un élément et une classe,
   exactement le poids de `.stl-timeline a`. À égalité, c'est l'ordre de
   chargement des feuilles qui tranche, et il ne nous est pas favorable.
   Reprendre le `:not()` nous fait passer devant sans !important. */
.stl-timeline a:not(.btn) {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

/* Le thème inverse ses liens d'article au survol (aplat d'encre). Dans une
   carte, cet aplat posé sur un seul mot faisait une tache : le survol est
   porté par la carte entière, le lien se contente d'un soulignement. */
.stl-timeline a:not(.btn):hover,
.stl-timeline a:not(.btn):focus-visible {
    background: none;
    color: inherit;
}

.stl-timeline__title a:hover,
.stl-timeline__parent a:hover,
.stl-timeline__lineseries:hover,
.stl-timeline__linetitle:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Écran tactile : pas de survol, donc pas de carte qui reste soulevée
   après un appui. */
@media (hover: none) {
    .stl-timeline .stl-timeline__items .stl-timeline__item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ═══════════════════════════════════════════════
   CARTES, deux cartes, un même damier

   Ce mode a connu deux erreurs opposées, et la solution est entre les
   deux.

   D'abord la hiérarchie de l'agenda reconduite telle quelle : tuile pour
   un temps fort, LIGNE pleine largeur (grid-column: 1 / -1) pour un
   épisode courant. Une ligne n'est pas une carte : elle traversait la
   grille, cassait les rangées, et un jour sans temps fort n'avait plus
   aucune tuile. Puis une forme unique pour tout le monde : les rangées
   étaient enfin propres, mais une nouvelle saison se lisait exactement
   comme le quatrième épisode d'une série en cours. Or c'est là toute
   l'information du bloc.

   Aujourd'hui, deux cartes de gabarits différents qui pavent le même
   damier. Elles ne se confondent pas, et aucune ne traverse la rangée :

     --event    NOUVEAUTÉ, deux colonnes, affiche à gauche sur toute la
                hauteur, texte à droite, étiquette en toutes lettres.
                La carte d'agenda, encadrée et couchée.

     --routine  SUITE, une colonne, pas d'affiche, pictogramme d'écran
                devant le code, nom de la série en tête. La ligne
                d'agenda, redressée en carte.

   Une nouveauté couvre donc quatre fois la surface d'une suite. Le
   rapport est net de loin, et il tient dans la grille.

   La colonne est le module commun. Tout le reste s'y accroche : c'est ce
   qui garantit qu'aucune carte ne dépasse ni ne laisse de trou.
═══════════════════════════════════════════════ */
.stl-timeline--cards {
    --stl-cols: 2;   /* nombre de colonnes, toujours pair (voir plus bas) */
    --stl-gap: 14px; /* gouttière, la même dans les deux directions       */

    /* Hauteur de l'affiche d'une nouveauté, donc de sa carte, donc de la
       rangée. Le 2/3 de l'affiche s'en déduit : 96 × 3 / 2. */
    --stl-tall: 144px;
}

.stl-timeline--cards .stl-timeline__group + .stl-timeline__group {
    margin-top: 30px;
}

/* La date devient un bandeau de section, pleine largeur au-dessus de la
   grille : il n'y a plus de rail à tenir. */
.stl-timeline--cards .stl-timeline__date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 2px solid currentColor;
}

.stl-timeline--cards .stl-timeline__daynum {
    font-size: 1.4rem;
}

/* Le compte de colonnes est PAIR, toujours, et c'est ce qui fait tenir la
   grille.

   Avec `repeat(auto-fill, minmax(150px, 1fr))`, le navigateur pose autant
   de colonnes qu'il peut : sept, par exemple. Une nouveauté en occupant
   deux, il en reste une, orpheline, au bout de chaque rangée. Sur un jour
   qui ne porte que des nouveautés, une semaine de rentrée, le cas le plus
   courant du bloc, c'est un trou par rangée, sur toute la hauteur.
   `grid-auto-flow: dense` le comble en remontant une suite dans la brèche,
   mais l'ordre de lecture y perd, et un jour sans suite n'a rien à y
   remonter.

   Un compte pair supprime la question : deux colonnes se libèrent toujours
   ensemble, une nouveauté trouve donc toujours sa place, et les suites
   ferment la grille dans l'ordre où render.php les a rangées.

   Le compte se règle sur la largeur du BLOC et non sur celle de la fenêtre
   (@container et non @media) : le même bloc peut être posé pleine largeur
   ou dans une colonne d'article, et seule sa propre largeur dit combien de
   cartes y tiennent. Sans requête de conteneur, la grille reste à deux
   colonnes : plus étroite que nécessaire, jamais cassée. */
.stl-timeline--cards .stl-timeline__col {
    container-type: inline-size;
}

.stl-timeline--cards .stl-timeline__items {
    display: grid;
    grid-template-columns: repeat(var(--stl-cols), minmax(0, 1fr));
    gap: var(--stl-gap);
}

@container (min-width: 560px) {
    .stl-timeline--cards .stl-timeline__items { --stl-cols: 4; }
}

@container (min-width: 900px) {
    .stl-timeline--cards .stl-timeline__items { --stl-cols: 6; }
}

@container (min-width: 1240px) {
    .stl-timeline--cards .stl-timeline__items { --stl-cols: 8; }
}

/* En grille, l'espacement vient de la gouttière : la marge qui sépare deux
   entrées en agenda ferait double emploi. */
.stl-timeline--cards .stl-timeline__items .stl-timeline__item + .stl-timeline__item {
    margin-top: 0;
}

/* ── Ce que les deux cartes ont en commun ────── */
.stl-timeline--cards .stl-timeline__items .stl-timeline__card {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden; /* l'affiche épouse les angles de la carte */
    border: 1px solid currentColor;
    border-radius: 0;
    transition: transform .15s, box-shadow .15s, background .12s, color .12s;
}

/* ═══ NOUVEAUTÉ ═══════════════════════════════
   Film, début de saison, finale, saison lâchée d'un bloc. Deux colonnes,
   affiche à gauche, et le fond d'encre de la carte d'agenda : d'un mode à
   l'autre, un temps fort a le même poids. */
.stl-timeline--cards .stl-timeline__items .stl-timeline__card--event {
    grid-column: span 2;
    min-height: var(--stl-tall);
    background: transparent;
}

.stl-timeline--cards .stl-timeline__items .stl-timeline__card--event:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 currentColor;
}

/* Sans affiche, plus rien ne réclame cette hauteur : la carte se referme
   sur son texte. La retenir laisserait un grand vide sous trois lignes. */
.stl-timeline--cards.no-posters .stl-timeline__items .stl-timeline__card--event {
    min-height: 0;
}

/* L'affiche tient toute la hauteur de la carte, à fleur de bord, sans
   cadre ni angles propres. Sa largeur est fixe : c'est la carte qui donne
   la hauteur, pas l'inverse, sinon un texte long l'étirerait sans fin.
   `align-self: stretch` demande une hauteur automatique, le format 2/3 de
   la règle générale est donc neutralisé, il reparaît par le calcul de
   --stl-tall. */
.stl-timeline--cards .stl-timeline__card--event .stl-timeline__poster {
    flex: none;
    width: 96px;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
    margin: 0;
    border: 0;
    border-right: 1px solid currentColor;
    border-radius: 0;
}

.stl-timeline--cards .stl-timeline__card--event .stl-timeline__poster img {
    transition: transform .4s ease;
}

.stl-timeline--cards .stl-timeline__card--event:hover .stl-timeline__poster img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .stl-timeline--cards .stl-timeline__card--event:hover .stl-timeline__poster img {
        transform: none;
    }
}

/* Fiche sans affiche : le format est conservé pour que la rangée ne bouge
   pas. Le cadre en pointillés de l'agenda n'a plus de bordure où vivre,
   c'est l'initiale, grande et atténuée, qui signale le trou à combler. */
.stl-timeline--cards .stl-timeline__poster:has(.stl-timeline__poster-fallback) {
    border-style: solid;
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.stl-timeline--cards .stl-timeline__poster-fallback {
    font-size: 2rem;
    opacity: .4;
}

/* Le texte se centre en regard de l'affiche. Un film n'a pas de série
   parente, une sortie groupée porte une ligne de plus : centrer évite de
   réserver des lignes vides pour que tout retombe d'aplomb. */
.stl-timeline--cards .stl-timeline__card--event .stl-timeline__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 13px;
}

.stl-timeline--cards .stl-timeline__card--event .stl-timeline__parent {
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Deux lignes au maximum : au-delà, le titre est coupé plutôt que de faire
   grandir la carte. Le titre complet reste à un clic. */
.stl-timeline--cards .stl-timeline__card--event .stl-timeline__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: .96rem;
    line-height: 1.3;
}

.stl-timeline--cards .stl-timeline__card--event .stl-timeline__meta {
    gap: 5px 9px;
    margin-top: 8px;
    font-size: .72rem;
}

/* ═══ SUITE ═══════════════════════════════════
   Un épisode d'une série déjà lancée. Une colonne, pas d'affiche : la
   carte descend de la ligne d'agenda, dont elle reprend jusqu'aux valeurs
   de fond et de cadre (42 % du filet ordinaire). Elle dit « déjà en
   cours » avant même qu'on la lise. */
.stl-timeline--cards .stl-timeline__items .stl-timeline__card--routine {
    flex-direction: column;
    padding: 10px 11px 11px;
    background: transparent;
}

.stl-timeline--cards .stl-timeline__items .stl-timeline__card--routine:hover {
    background: var(--tx, #0a0a0a);
    color: var(--bg, #ffffff);
}

/* Le pictogramme d'écran de l'agenda et le code, sur une ligne. Alignés
   par leur milieu plutôt que par leur base : le pictogramme est un carré,
   il n'a pas de ligne de base à partager avec du texte. */
.stl-timeline--cards .stl-timeline__cardcode {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    font: 700 .72rem/1.3 var(--stl-mono);
    font-variant-numeric: tabular-nums;
    color: var(--stl-mt);
}

/* Le pictogramme hérite déjà de la couleur atténuée que porte le code : le
   mélange de .stl-timeline__epicon se composerait par-dessus (50 % de
   62 %) et le signe s'effacerait. Il reprend l'encre de la ligne. */
.stl-timeline--cards .stl-timeline__cardcode .stl-timeline__epicon {
    width: 14px;
    height: 14px;
    color: inherit;
}

.stl-timeline--cards .stl-timeline__cardcode svg {
    width: 14px;
    height: 14px;
}

.stl-timeline--cards .stl-timeline__card--routine:hover .stl-timeline__epicon {
    color: inherit;
}

/* Le nom de la série porte la carte, comme il porte la ligne d'agenda :
   c'est lui qu'on cherche du regard, pas le titre de l'épisode. */
.stl-timeline--cards .stl-timeline__card--routine .stl-timeline__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.3;
}

/* Le titre de l'épisode complète, sans revendiquer. Atténué sur la feuille
   et non sur un conteneur : les enfants de la carte tirent eux aussi leur
   couleur de currentColor, et les mélanges se composeraient. */
.stl-timeline--cards .stl-timeline__cardsub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 3px 0 0;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--stl-mt);
}

.stl-timeline--cards .stl-timeline__cardsub a:hover { color: inherit; }

/* Chassée en pied : c'est ce qui garde le bas des cartes aligné quand la
   rangée mêle une nouveauté haute et des suites plus courtes. */
.stl-timeline--cards .stl-timeline__card--routine .stl-timeline__meta {
    gap: 3px 10px;
    margin: 0;
    margin-top: auto;
    padding-top: 9px;
    font-size: .71rem;
}

/* ── Repère du jour ─────────────────────────── */
/* En grille, la date est un bandeau de section : sur un jour qui porte des
   sorties, le repère se glisse entre ce bandeau et les cartes. */
.stl-timeline--cards .stl-timeline__nowline {
    margin-bottom: 14px;
}

/* Jour sans sortie : le groupe n'a plus qu'une étiquette à montrer.
   Empilée sous un bandeau de date pleine largeur, elle laissait un grand
   vide entre deux jours pour ne rien dire. Date et repère tiennent sur la
   même ligne, et le groupe se réduit à sa hauteur. */
.stl-timeline--cards .stl-timeline__group--now {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 0;
}

.stl-timeline--cards .stl-timeline__group--now .stl-timeline__date {
    flex: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.stl-timeline--cards .stl-timeline__group--now .stl-timeline__col {
    flex: 1;
}

.stl-timeline--cards .stl-timeline__group--now .stl-timeline__nowline {
    margin-bottom: 0;
}

/* ───────────────────────────────────────────────
   Tableau
─────────────────────────────────────────────── */
.stl-timeline__scroll {
    overflow-x: auto;
}

.stl-timeline__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.stl-timeline__table th,
.stl-timeline__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid currentColor;
    vertical-align: top;
}

.stl-timeline__table th {
    font: 800 .68rem/1.5 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .09em;
    border-top: 6px solid currentColor;
    border-bottom-width: 1px;
}

.stl-timeline__table tr.is-draft { opacity: .65; }

/* La ligne du jour, à défaut d'axe où planter un repère. */
.stl-timeline__table tr.is-today td {
    background: var(--stl-surf);
    font-weight: 700;
}

.stl-timeline__table tr.is-today td:first-child {
    box-shadow: inset 6px 0 0 currentColor;
}

.stl-timeline__subtitle {
    display: block;
    font-size: .8rem;
    color: var(--stl-mt);
}

/* ───────────────────────────────────────────────
   Note de diagnostic (rédaction uniquement)
   Explique pourquoi un bloc est vide. Jamais visible
   d'un visiteur : render.php la conditionne à edit_posts.
─────────────────────────────────────────────── */
.stl-timeline__debug {
    margin-top: 10px;
    padding: 12px 14px;
    font-size: .82rem;
    line-height: 1.6;
    color: inherit;
    background: var(--stl-surf);
    border-left: 6px solid currentColor;
    border-radius: 0;
}

.stl-timeline__debug strong {
    display: block;
    margin-bottom: 4px;
    font: 800 .68rem/1.5 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .09em;
}

.stl-timeline__debug p { margin: 0 0 6px; }
.stl-timeline__debug p:last-child { margin-bottom: 0; }

.stl-timeline__debug-note {
    font-size: .74rem;
    color: var(--stl-mt);
}

/* ───────────────────────────────────────────────
   Responsive

   Le rail est conservé sur mobile : c'est lui qui donne au bloc sa
   lecture de calendrier. Seules ses proportions se resserrent.
─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .stl-timeline--agenda {
        --stl-rail: 42px;
        --stl-gutter: 16px;
        --stl-dot: 8px;
        --stl-dot-y: 11px; /* le quantième est plus petit : son milieu remonte */
    }

    .stl-timeline--agenda .stl-timeline__group {
        padding-bottom: 20px;
    }

    .stl-timeline__daynum { font-size: 1.5rem; }
    .stl-timeline__dayname { font-size: .58rem; }

    .stl-timeline__poster { width: 52px; }

    .stl-timeline--agenda .stl-timeline__items .stl-timeline__item--event { padding: 10px 12px; gap: 12px; }
    .stl-timeline--agenda .stl-timeline__item--event .stl-timeline__title { font-size: 1.05rem; }

    /* Sur une largeur de téléphone, la plateforme rejetée à droite
       laisse un trou au milieu de la ligne : elle reprend sa place
       dans le flux. */
    .stl-timeline__line .stl-timeline__network {
        margin-left: 0;
        padding-left: 0;
    }

    .stl-timeline__eplist {
        grid-template-columns: 1fr;
    }

    /* Le compte de colonnes se règle tout seul sur la largeur du bloc : il
       n'y a ici que les proportions à resserrer. Sur un téléphone, la
       grille est à deux colonnes, donc une nouveauté prend toute la
       largeur et deux suites se partagent la rangée. Le rapport de un à
       quatre entre les deux cartes tient encore. */
    .stl-timeline--cards {
        --stl-gap: 10px;
        --stl-tall: 126px;
    }

    .stl-timeline--cards .stl-timeline__card--event .stl-timeline__poster {
        width: 84px;
    }

    .stl-timeline--cards .stl-timeline__card--event .stl-timeline__body {
        padding: 9px 11px;
    }

    .stl-timeline--cards .stl-timeline__card--event .stl-timeline__title {
        font-size: .9rem;
    }

    .stl-timeline--cards .stl-timeline__items .stl-timeline__card--routine {
        padding: 9px 10px 10px;
    }

    .stl-timeline--cards .stl-timeline__card--routine .stl-timeline__title {
        font-size: .84rem;
    }
}


/* ── Lien vers le calendrier (1.3) ─────────────────────────────────────
   Sous la liste : « La suite dans le calendrier » quand le bloc atteint
   son plafond, ou « Tout le calendrier » si l'option est cochée. */
.stl-timeline__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--tx, #0a0a0a);
  font-size: 14px;
  color: var(--mt, #6b6b6b);
}
.stl-timeline .stl-timeline__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--tx, #0a0a0a);
  color: var(--tx, #0a0a0a);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}
.stl-timeline .stl-timeline__more a:hover { background: var(--tx, #0a0a0a); color: var(--bg, #fff); }