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

.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 4px;
    font-size: 1.5rem;
    line-height: 1.2;
}

.stl-timeline__range {
    margin: 0 0 20px;
    font: 400 .72rem/1.5 var(--stl-mono);
    letter-spacing: .06em;
    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: color-mix(in srgb, var(--stl-bd) 72%, transparent);
}

/* 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 : il s'éteint au lieu de s'arrêter net. */
.stl-timeline--agenda .stl-timeline__group:last-child::after {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--stl-bd) 72%, transparent) 45%,
        transparent
    );
}

/* ── 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: 50%;
    background: currentColor;
}

.stl-timeline__daynum {
    font: 600 1.7rem/1 var(--stl-mono);
    letter-spacing: -.02em;
}

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

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

.stl-timeline__grouplabel {
    font: 500 .78rem/1.4 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--stl-mt);
}

/* 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: 7px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--stl-bd);
}

/* ───────────────────────────────────────────────
   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: 10px;
    margin: 0;
    font: 600 .6rem/1 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.stl-timeline__nowline > span {
    flex: none;
    padding: 4px 8px 5px;
    background: var(--stl-acc);
    color: #1e1b17;
    border-radius: var(--stl-radius);
}

/* 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 et meurt dans la page. Deux pixels,
   parce que le jaune d'accent sur le fond kraft n'a pas assez de contraste
   pour tenir sur un seul. */
.stl-timeline__nowline::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, var(--stl-acc), transparent 72%);
}

/* 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: var(--stl-acc);
    outline: 1.5px solid currentColor;
    outline-offset: 1.5px;
}

/* 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 {
    font-weight: 500;
    color: var(--stl-mt);
}

.stl-timeline--agenda.stl-timeline--group-day .is-past .stl-timeline__date::after {
    background: var(--stl-bd);
}

/* ───────────────────────────────────────────────
   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: 10px;
}

/* 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: 5px;
}

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

/* ── Temps fort : la carte ──────────────────────
   Film, début de saison, finale, saison lâchée d'un bloc. Fond plus
   clair que la page : la carte avance. */
.stl-timeline--agenda .stl-timeline__items .stl-timeline__item--event {
    padding: 12px 14px;
    background: color-mix(in srgb, currentColor 5%, transparent);
    border: 1px solid var(--stl-bd);
    border-radius: var(--stl-radius);
    transition: border-color .15s, background .15s;
}

.stl-timeline--agenda .stl-timeline__items .stl-timeline__item--event:hover {
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}

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

/* ── Épisode courant : la ligne ─────────────────
   Fond gris, bordure ténue, pictogramme d'écran à gauche. Tout dit
   « série déjà en cours » : l'entrée reste lisible sans revendiquer
   l'attention que mérite une nouvelle saison. */
.stl-timeline .stl-timeline__items .stl-timeline__item--routine {
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 9px;
    background: color-mix(in srgb, var(--stl-surf) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--stl-bd) 42%, transparent);
    border-radius: var(--stl-radius);
    transition: border-color .15s, background .15s;
}

.stl-timeline .stl-timeline__items .stl-timeline__item--routine:hover {
    background: color-mix(in srgb, var(--stl-surf) 70%, transparent);
    border-color: color-mix(in srgb, var(--stl-bd) 75%, transparent);
}

.stl-timeline__epicon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: color-mix(in srgb, currentColor 50%, transparent);
}

.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 7px;
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: .84rem;
    line-height: 1.5;
}

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

.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;
    font: 400 .72rem/1.5 var(--stl-mono);
    letter-spacing: .03em;
}

/* Plateforme et durée : des mentions de second plan, où qu'elles
   soient posées. */
.stl-timeline__network,
.stl-timeline__duration {
    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: 9px 0 0;
    padding-top: 8px;
    border-top: 1px dotted color-mix(in srgb, var(--stl-bd) 70%, 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: 56px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--stl-surf);
    border: 1px solid var(--stl-bd);
    border-radius: var(--stl-radius);
    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: 600 1.1rem/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 1px;
    font: 500 .72rem/1.4 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stl-mt);
}

.stl-timeline__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.stl-timeline__code {
    display: inline-block;
    margin-right: .45em;
    font: 500 .82em/1 var(--stl-mono);
    color: var(--stl-mt);
}

.stl-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 7px 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;
}

.stl-timeline__title a:hover,
.stl-timeline__parent a:hover,
.stl-timeline__lineseries:hover {
    color: var(--wf-red, #d23c0f);
}

/* ═══════════════════════════════════════════════
   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: 1px solid var(--stl-bd);
}

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

/* 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 var(--stl-bd);
    border-radius: var(--stl-radius);
    transition: border-color .15s, background .15s;
}

/* ═══ 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: color-mix(in srgb, currentColor 6%, transparent);
}

.stl-timeline--cards .stl-timeline__items .stl-timeline__card--event:hover {
    background: color-mix(in srgb, currentColor 9%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* 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 var(--stl-bd);
    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: color-mix(in srgb, var(--stl-surf) 42%, transparent);
    border-color: color-mix(in srgb, var(--stl-bd) 42%, transparent);
}

.stl-timeline--cards .stl-timeline__items .stl-timeline__card--routine:hover {
    background: color-mix(in srgb, var(--stl-surf) 70%, transparent);
    border-color: color-mix(in srgb, var(--stl-bd) 75%, transparent);
}

/* 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: 500 .72rem/1.3 var(--stl-mono);
    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: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--stl-bd);
    vertical-align: top;
}

.stl-timeline__table th {
    font: 500 .68rem/1.5 var(--stl-mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stl-mt);
    border-bottom-width: 2px;
}

.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: color-mix(in srgb, var(--stl-acc) 25%, transparent);
}

.stl-timeline__table tr.is-today td:first-child {
    box-shadow: inset 2px 0 0 var(--stl-acc);
}

.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: color-mix(in srgb, var(--stl-acc) 18%, transparent);
    border-left: 3px solid var(--stl-acc);
    border-radius: var(--stl-radius);
}

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

.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.4rem; }
    .stl-timeline__dayname { font-size: .58rem; }

    .stl-timeline__poster { width: 46px; }

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