/* ===== from main.css lines 639-807 ===== */
    /* Card menu (⋯) */
    .card-menu-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: var(--show-card-action-size);
      height: var(--show-card-action-size);
      border-radius: 50%;
      border: 1.5px solid var(--header-control-border);
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      opacity: 1;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .card-menu-btn-icon { display: block; width: 20px; height: 20px; }
    .card-menu-btn .icon-saved { display: none; }
    .card-menu-btn.in-watchlist .icon-add { display: none; }
    .card-menu-btn.in-watchlist .icon-saved { display: block; }
    .card-menu-btn:hover,
    .card-menu-btn:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      transform: translateY(-1px);
      outline: none;
    }
    .card-menu-btn.in-watchlist {
      border-color: var(--header-control-border);
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }
    .card-menu-btn.in-watchlist .card-menu-btn-icon {
      fill: #fff;
      stroke: #fff;
    }
    .card-menu-btn.in-watchlist:hover,
    .card-menu-btn.in-watchlist:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      color: #fff;
    }
    .card-menu-btn.in-watchlist:hover .card-menu-btn-icon {
      fill: var(--accent-hover);
      stroke: var(--accent-hover);
    }
    .card-watched-btn {
      position: absolute;
      top: 10px;
      right: calc(10px + var(--show-card-action-size) + var(--show-card-action-gap));
      width: var(--show-card-action-size);
      height: var(--show-card-action-size);
      border-radius: 50%;
      border: 1.5px solid var(--header-control-border);
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      line-height: 1;
      cursor: pointer;
      opacity: 1;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    @media (max-width: 767px) {
      .card-watched-btn {
        top: calc(10px + var(--show-card-action-size) + var(--show-card-action-gap));
        right: 10px;
      }
    }
    .card-watched-btn-icon { display: block; width: 20px; height: 20px; }
    .card-watched-btn .icon-eye-closed { display: none; }
    .card-watched-btn.is-watched .icon-eye-open { display: none; }
    .card-watched-btn.is-watched .icon-eye-closed { display: block; }
    .card-watched-btn:hover,
    .card-watched-btn:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      transform: scale(1.05);
      outline: none;
    }
    .card-watched-btn.is-watched {
      border-color: var(--header-control-border);
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }
    .card-watched-btn.is-watched:hover,
    .card-watched-btn.is-watched:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      color: #fff;
    }

    @media (hover: none), (pointer: coarse) {
      .show-card.is-trailer-expanded .card-watched-btn { display: none; }
    }

    /* Inline trailer trigger — only visible on touch devices in grid contexts
       (search results + section grid). Sits below the watched-eye button. */
    .card-trailer-btn {
      position: absolute;
      width: var(--show-card-action-size);
      height: var(--show-card-action-size);
      border-radius: 50%;
      border: 1.5px solid transparent;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      line-height: 1;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
      z-index: 3;
      align-items: center;
      justify-content: center;
      padding: 0;
      display: none;
    }
    .card-trailer-btn-icon { display: block; width: 20px; height: 20px; }
    .card-trailer-btn[hidden] { display: none !important; }
    .card-trailer-btn .icon-stop { display: none; }
    .card-trailer-btn.is-playing .icon-play { display: none; }
    .card-trailer-btn.is-playing .icon-stop { display: block; }
    .card-trailer-btn.is-playing {
      border-color: transparent;
      background: rgba(255, 255, 255, 0.12);
    }
    @media (hover: none), (pointer: coarse) {
      /* Trailer button visible on every touch show-card (carousel rows AND
         grids). Mobile users no longer get scroll-idle auto-rotation, so the
         button is the single explicit entry point: tap → expand + play with
         a fresh user gesture (which iOS Safari requires for audio). */
      .show-card .card-trailer-btn {
        display: inline-flex;
        top: calc(10px + var(--show-card-action-size) + var(--show-card-action-gap) + var(--show-card-action-size) + var(--show-card-action-gap));
        right: 10px;
      }
      /* Interest selection page has its own picked/seen overlay — the
         trailer button is irrelevant there and overlaps the overlay icon. */
      .show-card.interest-card .card-trailer-btn { display: none !important; }
      /* When a card is expanded (inline trailer playing), hide the floating
         trailer button — the close X (.show-card-trailer-close-btn) takes
         over as the dismiss control. */
      .show-card.is-trailer-expanded .card-trailer-btn { display: none !important; }
    }
    .show-card:not([data-trailer-available="1"]) .card-trailer-btn {
      display: none !important;
    }
    /* Mobile-grid trailer expansion close button (top-left). Only present
       while a trailer is mounted via the per-card `.card-trailer-btn` flow;
       removed by `collapseCardTrailer`'s deferred cleanup. */
    .show-card-trailer-close-btn {
      position: absolute;
      top: 10px;
      left: 10px;
      width: var(--show-card-action-size);
      height: var(--show-card-action-size);
      border-radius: 50%;
      border: 1.5px solid var(--header-control-border);
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      z-index: 4;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }
    .show-card-trailer-close-btn:hover,
    .show-card-trailer-close-btn:focus-visible {
      background: rgba(0, 0, 0, 0.65);
      border-color: var(--header-control-border-hover);
      transform: scale(1.05);
      outline: none;
    }
    .card-menu-popover {
      position: fixed;
      min-width: 236px;
      max-width: 300px;
      padding: 8px;
      border: 1.5px solid var(--header-control-border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
      z-index: 1500;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .card-menu-item {
      min-height: 38px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      color: rgba(255, 255, 255, 0.92);
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .card-menu-item:hover,
    .card-menu-item:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      color: #fff;
      outline: none;
    }
    .card-menu-item.danger {
      color: var(--danger, #ff6b6b);
    }
    .card-menu-item.danger:hover,
    .card-menu-item.danger:focus-visible {
      background: rgba(244, 110, 110, 0.12);
      border-color: rgba(244, 110, 110, 0.22);
      color: #ff8a8a;
    }
    .card-menu-item .check {
      color: #6ad97a;
      font-weight: 800;
    }
    .card-menu-sep {
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
      margin: 5px 2px;
    }
    .card-menu-section-label {
      padding: 7px 12px 3px;
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.52);
      font-weight: var(--fw-bold);
    }

    /* .show-card déjà position: relative */

    .icon-button.active {
      border-color: rgba(var(--accent-rgb), 0.75);
      background: rgba(var(--accent-rgb), 0.22);
      color: #fff;
    }
    .icon-button.active:hover {
      background: rgba(var(--accent-rgb), 0.32);
      border-color: rgba(var(--accent-hover-rgb), 0.9);
    }

    .hero p,
    .meta, .hint, .empty, .status, .episode-overview {
      color: var(--muted);
    }

    .hero p {
      max-width: 620px;
      margin: 0 auto 28px;
      line-height: var(--lh-loose);
      font-size: var(--fs-base);
    }

/* ===== from main.css lines 1477-1959 ===== */
    /* ---------- Show card (composant unifie) ----------
       Standard d'espacement commun:
       - grid de cards desktop: gap 28px vertical / 32px horizontal
       - grid de cards mobile:  gap 20px vertical / 16px horizontal
       - carrousel horizontal:  gap 24px desktop / 16px mobile
       Typo: titre 16px/800, sous-titre 14px/700 (voir .show-card-title/.show-card-sub)
    ---------- */
    .show-card {
      --show-card-body-height: 56px;
      position: relative;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      text-align: left;
      font: inherit;
      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .home-row .show-card,
    .continue-watching-row .show-card {
      flex: 0 0 auto;
      --card-w: 140px;
      --poster-h: calc(var(--card-w) * 1.5);
      width: var(--card-w);
      transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (min-width: 480px) {
      .home-row .show-card,
      .continue-watching-row .show-card { --card-w: 173px; }
    }
    @media (min-width: 768px) {
      .home-row .show-card,
      .continue-watching-row .show-card { --card-w: 220px; }
    }
    .show-card:hover,
    .show-card:focus-visible {
      background: rgba(255, 255, 255, 0.10);
      outline: none;
    }
    .show-card:hover .show-card-poster-wrap,
    .show-card:focus-visible .show-card-poster-wrap {
      transform: scale(0.96);
      border-radius: 8px;
      box-shadow: 0 0 0 2px var(--accent);
    }
    /* Poster aspect-ratio universel : un seul système (aspect-ratio 2/3)
       pour tous les contextes — home-row, continue-watching, similar,
       results, section-grid-view, person-filmography. Avant : double système
       (`padding-bottom: 150%` legacy + override `aspect-ratio` home-row/CW)
       qui pouvait produire 1 px de différence en subpixel rounding selon
       browser, faisant percevoir des cards de hauteurs différentes. */
    .show-card-poster-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 2 / 3;
      overflow: hidden;
      border-radius: 12px;
      background: var(--panel-soft);
      margin-bottom: 12px;
      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                  border-radius 300ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .show-card-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .show-card.is-random-poster-pending .show-card-poster {
      opacity: 0;
    }
    .show-card.is-random-poster-pending .show-card-poster-wrap {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 100%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.4s linear infinite;
    }
    /* Body texte sous la miniature — hauteur partagee entre card repliee et
       card trailer etendue. Les cards repliees gardent l'espace reserve au
       bouton Description, ce qui empeche tout saut vertical quand
       `.is-trailer-expanded` remplace le sous-titre par le lien. */
    .show-card-body {
      box-sizing: border-box;
      padding: 0 2px 0 8px;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      height: var(--show-card-body-height);
      min-height: var(--show-card-body-height);
      max-height: var(--show-card-body-height);
      overflow: hidden;
    }
    .show-card-title,
    .show-card-sub {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      flex: 0 0 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .show-card-title {
      font-size: 16px;
      font-weight: 800;
      line-height: 20px;
      height: 20px;
      color: var(--text);
      word-break: normal;
    }
    .show-card-sub {
      font-size: 14px;
      font-weight: 700;
      line-height: 18px;
      height: 18px;
      color: var(--muted);
    }
    .show-card-sub[hidden] { display: none; }

    /* Skeleton placeholder pour les cards en cours de chargement (cold load
       Explorer / homeCarousels). Reutilise l'animation shimmer definie dans
       featured-hero.css. La specificite .show-card-skeleton .* gagne sur
       les regles .show-card-poster-wrap / .show-card-title / .show-card-sub
       qui suivent dans la cascade. */
    .show-card.show-card-skeleton {
      pointer-events: none;
      cursor: default;
    }
    .show-card.show-card-skeleton .show-card-poster-wrap {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 100%
      );
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.4s linear infinite;
    }
    .show-card.show-card-skeleton .show-card-title,
    .show-card.show-card-skeleton .show-card-sub {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 4px;
    }
    .show-card.show-card-skeleton .show-card-title { width: 80%; }
    .show-card.show-card-skeleton .show-card-sub { width: 50%; }
    .show-card-desc-link {
      align-self: flex-start;
      padding: 2px 0;
      font-size: 14px;
      font-weight: 700;
      line-height: 18px;
      color: var(--accent);
      background: transparent;
      border: 0;
      cursor: pointer;
      display: none;
      font-family: inherit;
      text-align: left;
    }
    .show-card.is-trailer-expanded .show-card-desc-link:not([hidden]) {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
    }
    /* Expanded state: same body height as the collapsed card. Title 20 +
       button 24 + 12 px of bottom slack = 56 px total. The extra slack
       lives below the button, keeping the title/link gap tight without
       changing the card's outer height. */
    .show-card.is-trailer-expanded .show-card-body {
      gap: 0;
      justify-content: flex-start;
      padding-bottom: 4px;
    }
    .show-card.is-trailer-expanded .show-card-desc-link {
      line-height: 24px;
      height: 24px;
    }
    .show-card-desc-link::after {
      content: "›";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      font-weight: var(--fw-regular);
      line-height: 1;
      transform: translateY(-1px);
      transition: transform 0.15s ease;
    }
    .show-card-desc-link:hover::after { transform: translate(2px, -1px); }
    /* Mobile expanded card: shift the caret slightly up so it visually
       aligns with the cap-height of "Description" (the glyph baseline
       sits below the text baseline in the parent's inline-flex centring). */
    @media (max-width: 720px) {
      .show-card.is-trailer-expanded .show-card-desc-link::after {
        transform: translateY(-1px);
      }
      .show-card.is-trailer-expanded .show-card-desc-link:hover::after {
        transform: translate(2px, -1px);
      }
    }
    .show-card-desc-link[hidden] { display: none !important; }
    .show-card-desc-link:hover { color: var(--accent-hover); }
    .show-card.is-trailer-expanded .show-card-sub { display: none; }
    /* ===== Show-card trailer expansion (desktop hover) ===== */
    .show-card.is-trailer-expanded {
      width: calc(var(--poster-h) * 16 / 9);
      z-index: 5;
    }
    @media (hover: none), (pointer: coarse) {
      .show-card.is-trailer-expanded {
        width: min(calc(var(--poster-h) * 16 / 9), calc(100vw - 48px));
      }
    }
    .show-card.is-trailer-expanded .show-card-poster-wrap {
      transform: scale(0.96);
      border-radius: 8px;
      box-shadow: 0 0 0 2px var(--accent);
    }
    /* Grid cards (search results & "Voir plus") use padding-bottom:150%
       for the portrait 2/3 aspect. When expanded for a trailer, switch to
       a proper 16:9 aspect so the YouTube iframe isn't letter-boxed. The
       card keeps its 1fr grid cell and overflows visually — no grid reflow
       (would push the last-of-row card to the next line). Width is applied
       inline by `applyGridShiftOnExpand`; siblings slide sideways. */
    .section-grid-view-grid .show-card.is-trailer-expanded,
    .results .show-card.is-trailer-expanded {
      z-index: 5;
      position: relative;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    /* User-triggered grid trailer expansion (per-card .card-trailer-btn,
       JS adds `.is-trailer-grid` next to `.is-trailer-expanded`).
       Highlight = the same `0 0 0 2px var(--accent)` ring on the WRAP that
       desktop hover uses (cards.css L385). The ring sits tight around the
       visible poster/trailer rectangle and is rendered OUTSIDE the wrap's
       border-box, so the wrap's own `overflow: hidden` doesn't clip it.
       Drop-shadow halo is OFF here (it bled visually over the opposite-side
       neighbour and made the expansion look taller/wider). */
    .section-grid-view-grid .show-card.is-trailer-expanded.is-trailer-grid,
    .results .show-card.is-trailer-expanded.is-trailer-grid {
      box-shadow: none;
    }
    /* Grid wrap base (portrait 2:3) relies on the inherited
       `padding-bottom: 150%`. On expand we flip padding-bottom off and pin
       `height` inline via JS (= portraitPosterH, the sibling's portrait
       height). The card width transitions from its 1fr cell to
       posterH × 16/9 — wrap width follows (100% of card), wrap height
       stays fixed throughout, so the box morphs 2:3 → 16:9 purely via
       width growth. No aspect-ratio transition (unreliable cross-browser),
       no vertical snap, no "growing from the bottom" artifact. */
    .section-grid-view-grid .show-card.is-trailer-expanded .show-card-poster-wrap,
    .results .show-card.is-trailer-expanded .show-card-poster-wrap {
      /* Keep the same `scale(0.96)` shrink as the carousel hover/expand
         state — the user expects the trailer container to stay shrunken
         (not snap back to full size) until the card collapses. */
      transform: scale(0.96);
      padding-bottom: 0;
      /* Keep the portrait bottom gap explicit so the card's total height
         doesn't change between portrait and landscape states. */
      margin-bottom: 12px;
    }
    /* Carrousels horizontaux (.home-row + .home-row[data-similar-row]) :
       même morphing 2:3 → 16:9 par croissance de width, height pinnée à
       la hauteur portrait `--poster-h`. Sans cette règle, le wrap garde
       son `aspect-ratio: 2/3` (cards.css:301) → quand la card s'élargit
       via `width: calc(var(--poster-h) * 16/9)`, le wrap stretche
       verticalement à `width × 1.5`. Le grid-track de la rangée s'aligne
       sur le max → toutes les cards de la rangée stretchent à cette
       hauteur excessive, créant un grand vide sous les cards normales.
       Particulièrement visible à >=768px (carre-w 220 → expanded 587 ×
       880 = +550 px de vide sous chaque card non-expandue). */
    .home-row .show-card.is-trailer-expanded .show-card-poster-wrap {
      aspect-ratio: auto;
      height: var(--poster-h);
      margin-bottom: 12px;
    }
    .show-card.is-trailer-expanded .show-card-poster {
      opacity: 0;
      transition: opacity 200ms ease 120ms;
    }
    .show-card.is-trailer-expanded .rating-badge,
    .show-card.is-trailer-expanded .episode-progress {
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    .show-card-trailer-iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
      /* Start fully visible: iOS Safari requires a painted, non-hidden iframe
         for muted autoplay to succeed. */
      opacity: 1;
    }
    .show-card-trailer-iframe.is-ready { opacity: 1; }
    .show-card-trailer-iframe.is-touch-covered {
      z-index: 3;
      opacity: 0.001;
      pointer-events: auto;
    }
    .show-card-trailer-tap-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      overflow: hidden;
      background: #000;
      pointer-events: none;
      opacity: 1;
      transition: opacity 160ms ease, transform 160ms ease;
    }
    .show-card-trailer-tap-overlay::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.34) 72%),
        rgba(0, 0, 0, 0.18);
    }
    .show-card-trailer-tap-overlay.is-hiding {
      opacity: 0;
      transform: scale(0.96);
    }
    .show-card-trailer-tap-overlay.is-loading .trailer-touch-play-overlay-icon svg {
      opacity: 0;
      transform: scale(0.78);
    }
    .show-card-trailer-tap-overlay.is-loading .trailer-touch-play-overlay-icon::before {
      content: "";
      position: absolute;
      inset: 14px;
      box-sizing: border-box;
      border: 3px solid rgba(255, 255, 255, 0.55);
      border-top-color: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      animation: player-spin 0.9s linear infinite;
    }
    .trailer-touch-play-overlay-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
    }
    .trailer-touch-play-overlay-icon {
      position: relative;
      z-index: 2;
      pointer-events: none;
      width: 62px;
      height: 62px;
      border-radius: 999px;
      border: 1.5px solid var(--header-control-border);
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .trailer-touch-play-overlay-icon svg {
      width: 30px;
      height: 30px;
      margin-left: 3px;
      transition: opacity 120ms ease, transform 120ms ease;
    }
    .show-card-video-shield {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: transparent;
      cursor: default;
      touch-action: manipulation;
    }

    /* Grid row-carousel wrapper (mobile only). When a card expands inside a
       grid on a touch device, `enterGridRowCarousel` inserts a
       `<div class="grid-active-row">` DOM element into the grid in place of
       the expanded card's row, and moves that row's cards into it. The
       wrapper spans the full grid width via `grid-column: 1 / -1` — so it
       occupies exactly one grid row — and lays its children out as a
       horizontal flex carousel with snap-to-center. The grid itself keeps
       its multi-row auto-fill layout, meaning the non-active rows stay
       visible and in place. On collapse the wrapper is removed and the
       cards re-inserted as direct grid children. */
    .grid-active-row {
      grid-column: 1 / -1;
      display: flex;
      gap: var(--card-gap-col, 12px);
      /* Escape the grid's horizontal padding so the row-carousel spans the
         full grid border-box. Without this the wrapper lives inside the
         padded content-box and the centred card shows SAFETY_MARGIN + grid
         padding on each side — perceived as "masked by the container". */
      margin-left: calc(var(--grid-pad-x, 0px) * -1);
      margin-right: calc(var(--grid-pad-x, 0px) * -1);
      overflow-x: auto;
      /* Match `.home-row` / `.continue-watching-row`: vertical scroll is
         never wanted inside a horizontal carousel. `overflow-y: visible`
         would be silently promoted to `auto` by the browser (CSS rule:
         `visible` on one axis computes to `auto` when the other axis is
         scrollable), producing a parasitic vertical scrollbar. */
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      /* Virtual gutter equal to half the scrollport so the first/last card
         can snap to the scrollport's centre — without it the last card is
         bound to the right edge and `pickTouchAutoplayCard` can never get
         its centre near the viewport centre. */
      scroll-padding-inline: 50%;
      align-items: start;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .grid-active-row::-webkit-scrollbar { display: none; }
    .grid-active-row > .show-card {
      flex: 0 0 auto;
      scroll-snap-align: center;
      /* Disable the `.show-card` width transition inside the row-carousel:
         widths are pinned synchronously (cellWidth or expandedWidth) and
         the smooth scroll already provides the motion. With the transition
         enabled, `scrollIntoView` fires while the card is still mid-animation
         and centres on the stale (pre-transition) width — the card ends up
         visibly off-centre or clipped by the container edges. */
      transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Pseudo-fullscreen fallback : un <div> monté à la racine de <body>
       accueille l'iframe (+ fs-btn + click-overlay) pour échapper à toute
       containing-block ancêtre (transform, overflow:hidden, etc.). */
    .pseudo-fullscreen-container {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      z-index: var(--z-player-fullscreen, 9999);
      background: #000;
      padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
      box-sizing: border-box;
    }
    .pseudo-fullscreen-container .show-card-trailer-iframe.is-pseudo-fullscreen {
      position: absolute;
      inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
      width: 100%;
      height: auto;
      z-index: auto;
    }
    .pseudo-fullscreen-container .show-card-click-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
    }
    .pseudo-fullscreen-container .show-card-fs-btn {
      position: absolute;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
      right: 16px;
      z-index: calc(var(--z-player-fullscreen, 9999) + 1);
    }
    body.has-pseudo-fullscreen { overflow: hidden; }

    /* Fallback when no trailer exists: cover the poster-wrap with the main
       TMDB backdrop so the expansion still looks intentional. */
    .show-card-backdrop-fallback {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .show-card-click-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: transparent;
      cursor: pointer;
    }

    .show-card-fs-btn,
    .show-card-back-btn {
      position: absolute;
      z-index: 4;
      display: none;
      align-items: center;
      justify-content: center;
      width: var(--show-card-action-size);
      height: var(--show-card-action-size);
      padding: 0;
      border: 1.5px solid transparent;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .show-card-fs-btn {
      bottom: 10px;
      right: 10px;
      border-color: var(--header-control-border);
      border-radius: 50%;
      line-height: 1;
      opacity: 1;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
    }
    .show-card-back-btn { top: 8px; left: 8px; }
    .show-card-fs-btn:hover,
    .show-card-fs-btn:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      transform: scale(1.05);
      outline: none;
    }
    .show-card-back-btn:hover,
    .show-card-back-btn:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: transparent;
      transform: scale(1.05);
      outline: none;
    }
    .show-card-fs-btn svg,
    .show-card-back-btn svg { width: 20px; height: 20px; }
    .show-card.is-trailer-expanded .show-card-back-btn { display: inline-flex; }
    .show-card.is-showing-description .show-card-back-btn { display: inline-flex; }

    /* Mobile trailer preview overlay */
    .show-card-preview-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      border-radius: inherit;
      overflow: hidden;
    }
    .show-card-preview-overlay .preview-backdrop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .show-card-preview-overlay .preview-tint {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      z-index: 1;
    }
    .show-card-preview-overlay .preview-play-btn {
      position: relative;
      z-index: 2;
      width: 56px;
      height: 56px;
      padding: 0;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .show-card-preview-overlay .preview-play-btn:hover,
    .show-card-preview-overlay .preview-play-btn:focus-visible {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      transform: scale(1.05);
      outline: none;
    }
    .show-card-preview-overlay .preview-play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
    .show-card-preview-overlay .preview-desc-link {
      position: relative;
      z-index: 2;
      border: 0;
      padding: 0;
      background: transparent;
      color: #fff;
      font: inherit;
      font-size: var(--fs-sm);
      text-decoration: underline;
      cursor: pointer;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Description overlay (mobile + desktop) */
    .show-card-desc-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      border-radius: inherit;
      overflow: hidden;
    }
    .show-card-desc-overlay .desc-backdrop-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 0;
    }
    .show-card-desc-overlay .desc-blur-layer {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      z-index: 1;
    }
    .show-card-desc-overlay .desc-text {
      position: absolute;
      inset: 56px 16px 16px;
      overflow-y: auto;
      color: #fff;
      font-size: var(--fs-sm);
      line-height: 1.4;
      font-weight: var(--fw-semi);
      z-index: 2;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }
    .show-card-desc-overlay .show-card-back-btn { display: inline-flex; z-index: 4; }
    .show-card.is-trailer-expanded .show-card-fs-btn { display: flex; }
    @media (prefers-reduced-motion: reduce) {
      .home-row .show-card,
      .continue-watching-row .show-card { transition: background-color 200ms linear; }
      .show-card-trailer-iframe { transition: none; }
    }
    .home-discover-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
      gap: var(--card-gap-row) var(--card-gap-col);
    }
    .home-discover-grid .show-card {
      width: auto;
    }
    .home-filter-chip {
      min-height: var(--control-pill-height);
      box-sizing: border-box;
      padding: 0 14px;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: var(--fw-semi);
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .home-filter-chip:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
    }

    #watchlistHistory .home-filter-chip {
      min-height: var(--show-card-action-size);
      padding-inline: 16px;
      font-size: var(--fs-sm);
    }
    .home-filter-chip.active {
      border-color: rgba(var(--accent-rgb), 0.75);
      color: #fff;
      background: rgba(var(--accent-rgb), 0.22);
    }
    .home-filter-chip.active:hover {
      background: rgba(var(--accent-rgb), 0.32);
      border-color: rgba(var(--accent-hover-rgb), 0.9);
    }