/* ===== from main.css lines 1960-2253 ===== */
    /* ---------- Featured hero carousel (p-stream style) ---------- */
    .featured-hero {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 40rem;
      overflow: hidden;
      background: var(--bg);
      z-index: 1;
      pointer-events: none;
      transition: height 300ms ease-in-out;
    }
    @media (min-width: 768px) {
      .featured-hero { height: 85vh; max-height: 920px; }
    }
    .featured-hero[hidden] { display: none; }
    .featured-hero .featured-slides,
    .featured-hero .featured-nav,
    .featured-hero .featured-controls,
    .featured-hero .featured-meta,
    .featured-hero .featured-btn,
    .featured-hero .featured-dot,
    .featured-hero .featured-trailer-btn {
      pointer-events: auto;
    }
    body.has-featured-hero .shell { margin-top: 0; pointer-events: none; }
    body.has-featured-hero .hero,
    body.has-featured-hero .home-carousels,
    body.has-featured-hero .home-section,
    body.has-featured-hero .continue-watching,
    body.has-featured-hero .explorer-header,
    body.has-featured-hero .layout,
    body.has-featured-hero .section-grid-view { pointer-events: auto; }
    body.watchlist-mode.has-featured-hero .hero {
      pointer-events: none;
    }
    body.watchlist-mode.has-featured-hero .hero-top,
    body.watchlist-mode.has-featured-hero .hero-top * {
      pointer-events: auto;
    }
    body.home-mode.has-featured-hero {
      --featured-home-overlap: 196px;
    }
    /* Hero margin cascade: push the FIRST visible element below the absolutely
       positioned hero. #homeRecommendations is gated on `.visible` (set when
       there is content), so we have to fall through to #explorerHeader when
       neither continueWatching nor recommendations is rendering. */
    body.home-mode.has-featured-hero #continueWatching:not([hidden]),
    body.home-mode.has-featured-hero #continueWatching[hidden] + #watchlistAll + #watchlistFolders + #homeRecommendations.visible,
    body.home-mode.has-featured-hero #continueWatching[hidden] + #watchlistAll + #watchlistFolders + #homeRecommendations:not(.visible) + #watchlistHistory + #explorerHeader {
      margin-top: calc(40rem - var(--featured-home-overlap));
      position: relative;
      z-index: 2;
    }
    @media (min-width: 768px) {
      /* Le hero est `height: 85vh; max-height: 920px` (cf. ligne 17). Le
         calc doit matcher la hauteur RÉELLE = min(85vh, 920px). Sans le
         clamp, sur viewport haut (≥1083 px height, ex. iPad Pro portrait
         1024×1366), 85vh > 920 → le calc dépasse la hauteur réelle du
         hero → CW positionné en gap sous le hero. Bug "à partir de
         768 px de largeur" : section avec hauteur fixe (max-height 920)
         ignorée par le calc CW responsive. */
      body.home-mode.has-featured-hero #continueWatching:not([hidden]),
      body.home-mode.has-featured-hero #continueWatching[hidden] + #watchlistAll + #watchlistFolders + #homeRecommendations.visible,
      body.home-mode.has-featured-hero #continueWatching[hidden] + #watchlistAll + #watchlistFolders + #homeRecommendations:not(.visible) + #watchlistHistory + #explorerHeader {
        margin-top: calc(min(85vh, 920px) - var(--featured-home-overlap));
      }
    }
    .featured-slides {
      position: absolute; inset: 0;
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .featured-slides::-webkit-scrollbar { display: none; }
    .featured-slide {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center 15%;
      scroll-snap-align: start;
      position: relative;
      /* Establish a stacking context so the explicit z-index of ::before,
         .featured-trailer-mount and .featured-meta below stay isolated and
         don't fight with .featured-nav (z=20) / .featured-controls (z=19). */
      isolation: isolate;
    }
    /* Degrade noir bas pour la lisibilite des metas et la jonction avec la page. */
    .featured-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(to top, var(--bg) 0%, rgba(0,0,0,0.55) 35%, transparent 65%);
      pointer-events: none;
    }
    /* Featured trailer iframe: sits between the backdrop image (auto z) and
       the ::before gradient (z=2). Mobile blurs the gradient so the lower
       half of the slide shows the trailer through a glass effect.
       NOTE: opacity:1 from the start. iOS Safari snapshots iframe visibility
       at the moment `src` is assigned to grant or deny autoplay; an opacity:0
       initial state silently blocked muted autoplay (user saw the red YouTube
       play button overlay). The mount is empty until mountFeaturedTrailer
       inserts the iframe, so there's no flash of dark area when no trailer. */
    .featured-trailer-mount {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
    }
    .featured-slide.has-trailer-pointer .featured-trailer-mount {
      pointer-events: auto;
    }
    .featured-trailer-iframe {
      position: absolute;
      /* Shift iframe up by 80px so the YouTube title bar + "Watch on YouTube"
         link at the top of the player are pushed off the visible slide and
         clipped by .featured-trailer-mount overflow:hidden. The height is
         extended by 80px to compensate so the bottom of the visible video
         still reaches the slide bottom (no gap). Trailer embeds use controls=0
         so the YouTube bottom bar stays hidden. */
      top: -80px;
      left: 50%;
      transform: translateX(-50%);
      border: 0;
      pointer-events: none;
      /* Default (slide aspect < 16:9, e.g. mobile portrait): scale by HEIGHT
         so the iframe fully covers vertically. Width overflows laterally
         (16:9 wider than slide) and is clipped by mount overflow. */
      height: calc(100% + 80px);
      width: auto;
      aspect-ratio: 16 / 9;
    }
    .featured-trailer-iframe.allows-pointer {
      pointer-events: auto;
    }
    .featured-trailer-iframe.is-touch-covered {
      z-index: 2;
      opacity: 0.001;
      pointer-events: auto;
    }
    @media (hover: none), (pointer: coarse) {
      .featured-slide.is-touch-click-through-armed .featured-trailer-iframe.is-touch-covered {
        top: 28%;
        left: 18%;
        width: 64%;
        height: 44%;
        transform: none;
        aspect-ratio: auto;
        -webkit-clip-path: inset(22.75% 0 27.25% 0);
        clip-path: inset(22.75% 0 27.25% 0);
      }
    }
    .featured-trailer-touch-hit-shield {
      position: absolute;
      z-index: 3;
      display: none;
      background: transparent;
      pointer-events: auto;
    }
    @media (hover: none), (pointer: coarse) {
      .featured-slide.is-touch-click-through-armed .featured-trailer-touch-hit-shield {
        display: block;
        left: 18%;
        width: 64%;
      }
      .featured-slide.is-touch-click-through-armed .featured-trailer-touch-hit-shield--top {
        top: 28%;
        height: 10%;
      }
      .featured-slide.is-touch-click-through-armed .featured-trailer-touch-hit-shield--bottom {
        top: 60%;
        height: 12%;
      }
    }
    .featured-trailer-tap-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000;
      pointer-events: none;
      opacity: 1;
      transition: opacity 160ms ease, transform 160ms ease;
    }
    .featured-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.42) 76%),
        rgba(0, 0, 0, 0.14);
    }
    .featured-trailer-tap-overlay.is-hiding {
      opacity: 0;
      transform: scale(0.96);
    }
    .featured-trailer-tap-overlay.is-hiding .trailer-touch-play-overlay-icon {
      opacity: 0;
    }
    .featured-trailer-tap-overlay .trailer-touch-play-overlay-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
    }
    .featured-trailer-tap-overlay .trailer-touch-play-overlay-icon {
      position: relative;
      z-index: 2;
      width: 68px;
      height: 68px;
      border-color: rgba(255, 255, 255, 0.32);
      background: rgba(0, 0, 0, 0.36);
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
    }
    .featured-slide.is-touch-click-through-armed .featured-trailer-tap-overlay .trailer-touch-play-overlay-icon {
      display: none;
    }
    .featured-slide.is-touch-click-through-armed .featured-trailer-tap-overlay {
      background: transparent;
    }
    .featured-slide.is-touch-click-through-armed .featured-trailer-tap-overlay::after {
      display: none;
    }
    @media (hover: hover) and (pointer: fine) {
      /* Desktop / mouse-capable. Pin to top-left, take full width.
         Height = width × 9/16. On wide screens (≥16:9) it overflows below
         and is clipped by .featured-trailer-mount overflow:hidden; on narrow
         desktop (1440×900, 13" laptops, etc.) the iframe stops above the
         slide bottom and the empty space fades into the ::before dark
         gradient. Either way: full width, top-anchored, never past HERO. */
      .featured-trailer-iframe {
        top: -80px;
        left: 0;
        transform: none;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
      }
    }
    /* HERO trailer control is JS-gated and shown only as a manual fallback. */
    .featured-trailer-btn {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 92px);
      right: max(16px, calc(50vw - 620px));
      z-index: 22;
      pointer-events: auto;
      border: 1.5px solid rgba(255, 255, 255, 0.28);
      background: rgba(0, 0, 0, 0.34);
      -webkit-backdrop-filter: blur(16px) saturate(1.55);
      backdrop-filter: blur(16px) saturate(1.55);
      color: #fff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 120ms ease;
    }
    .featured-trailer-btn[hidden] {
      display: none !important;
    }
    .featured-trailer-btn {
      display: inline-flex;
      min-height: var(--floating-header-row-h);
      padding: 0 14px;
      gap: 8px;
      border-radius: 999px;
      font-weight: 700;
      font-size: var(--fs-sm);
    }
    .featured-trailer-btn-icon {
      display: block;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }
    .featured-trailer-btn-icon--explorer {
      width: 20px;
      height: 20px;
    }
    .featured-trailer-btn-icon--watchlist,
    .featured-trailer-btn-icon--mobile-prompt {
      display: none;
    }
    body.watchlist-mode .featured-trailer-btn-icon--explorer {
      display: none;
    }
    body.watchlist-mode .featured-trailer-btn-icon--watchlist {
      display: block;
    }
    .featured-trailer-btn-label {
      display: inline-block;
      max-width: 12rem;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width 220ms ease, opacity 180ms ease, transform 180ms ease;
    }
    body.watchlist-mode .featured-trailer-btn:hover,
    body.watchlist-mode .featured-trailer-btn:focus-visible,
    body.watchlist-mode .featured-trailer-btn.is-hovered {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      color: #fff;
      transform: translateY(-1px);
      outline: none;
    }
    body.watchlist-mode .featured-trailer-btn {
      min-width: var(--floating-header-row-h);
      min-height: var(--floating-header-row-h);
      box-sizing: border-box;
      padding: 0 14px;
      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: none;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      font-family: inherit;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      body.watchlist-mode .featured-trailer-btn {
        --watchlist-trailer-btn-expanded-width: clamp(10.75rem, 13vw, 12rem);
        width: var(--watchlist-trailer-btn-expanded-width);
        max-width: calc(100vw - 32px);
        overflow: hidden;
        transition:
          width 300ms cubic-bezier(0.22, 1, 0.36, 1),
          padding 300ms cubic-bezier(0.22, 1, 0.36, 1),
          gap 240ms ease,
          background 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease,
          color 0.2s ease;
        will-change: width;
      }
    }
    body.watchlist-mode .featured-trailer-btn.is-label-collapsed {
      width: var(--floating-header-row-h);
      min-width: var(--floating-header-row-h);
      gap: 0;
      padding: 0;
    }
    body.watchlist-mode .featured-trailer-btn.is-label-collapsed .featured-trailer-btn-label {
      max-width: 0;
      opacity: 0;
      transform: translateX(4px);
    }
    body.watchlist-mode .featured-trailer-btn.is-label-collapsed:hover,
    body.watchlist-mode .featured-trailer-btn.is-label-collapsed:focus-visible,
    body.watchlist-mode .featured-trailer-btn.is-label-collapsed.is-hovered {
      gap: 0;
      padding: 0;
    }
    .featured-trailer-btn.is-loading {
      cursor: pointer;
      border-color: rgba(255, 255, 255, 0.38);
      background: rgba(255, 255, 255, 0.14);
    }
    .featured-trailer-btn.is-loading .featured-trailer-btn-label {
      animation: featured-trailer-loading-pulse 1.4s ease-in-out infinite;
    }
    body.watchlist-mode .featured-trailer-btn:active {
      transform: scale(0.96);
    }
    @media (prefers-reduced-motion: reduce) {
      body.watchlist-mode .featured-trailer-btn,
      .featured-trailer-btn-label {
        transition-duration: 1ms;
      }
    }
    @keyframes featured-trailer-loading-pulse {
      0%, 100% { color: rgba(255, 255, 255, 0.52); }
      50% { color: #fff; }
    }
    @media (hover: none), (pointer: coarse) {
      .featured-trailer-btn {
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 102px);
        right: max(16px, env(safe-area-inset-right, 0px));
        z-index: 24;
        min-height: var(--floating-header-row-h);
        padding: 0 16px;
        touch-action: manipulation;
      }
      .featured-trailer-btn-icon--explorer {
        width: 22px;
        height: 22px;
      }
      body.watchlist-mode .featured-trailer-btn {
        min-width: var(--floating-header-row-h);
        min-height: var(--floating-header-row-h);
      }
      body.watchlist-mode .featured-trailer-btn.is-label-collapsed {
        width: var(--floating-header-row-h);
        min-width: var(--floating-header-row-h);
      }
      .featured-trailer-btn.is-loading .featured-trailer-btn-icon--explorer,
      .featured-trailer-btn.is-loading .featured-trailer-btn-icon--watchlist {
        display: none;
      }
      .featured-trailer-btn.is-loading .featured-trailer-btn-icon--mobile-prompt {
        display: block;
      }
    }
    /* Mobile only: turn the BOTTOM dark gradient zone into a glass-blur layer
       over the trailer. The gradient itself stays in place across the whole
       slide; mask-image restricts where backdrop-filter is applied so the
       upper half of the slide shows the trailer crisply, and only the bottom
       gets blurred (matching the dark gradient zone). */
    @media (hover: none), (pointer: coarse) {
      .featured-slide.has-trailer-active::before {
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        backdrop-filter: blur(18px) saturate(1.4);
        /* Mask aligns with the dark portion of the gradient (opaque from 0%
           to ~50% from bottom, fading to fully transparent above 70%). Where
           the mask is transparent, ::before is not painted at all and
           backdrop-filter is not applied — the trailer reads clearly. */
        -webkit-mask-image: linear-gradient(
          to top,
          black 0%,
          black 25%,
          transparent 37.5%
        );
        mask-image: linear-gradient(
          to top,
          black 0%,
          black 25%,
          transparent 37.5%
        );
      }
    }
    .featured-meta {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      z-index: 3;
      padding-top: 0;
      padding-right: max(16px, calc(50vw - 620px));
      padding-bottom: 80px;
      padding-left: max(40px, calc(50vw - 620px));
      max-width: none;
      display: grid;
      gap: 16px;
    }
    .featured-meta > * { max-width: 760px; }
    .featured-logo {
      max-width: 14rem;
      max-height: 20vh;
      object-fit: contain;
      object-position: left bottom;
      filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
    }
    @media (min-width: 768px) {
      .featured-logo { max-width: 22rem; }
    }
    .featured-title {
      margin: 0;
      font-size: clamp(1.6rem, 3.6vw, 2.8rem);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-shadow: 0 4px 14px rgba(0,0,0,0.55);
    }
    .featured-badges {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--text);
    }
    .featured-badge {
      flex: 0 0 auto;
      padding: 6px 14px;
      border-radius: 999px;
      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;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .featured-badge.rating {
      background: rgba(var(--accent-rgb), 0.22);
      color: #fff;
    }
    .featured-overview-wrap {
      width: min(100%, 640px);
      max-width: 640px;
      display: grid;
      gap: 8px;
      justify-items: start;
    }
    .featured-overview {
      margin: 0;
      box-sizing: border-box;
      width: 100%;
      font-size: var(--fs-md);
      line-height: var(--lh-base);
      color: rgba(255,255,255,0.95);
      font-weight: var(--fw-semi);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-width: 640px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
    .featured-overview-toggle {
      justify-self: start;
      margin-top: -2px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--accent-hover);
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      cursor: pointer;
      text-align: left;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    .featured-overview-toggle:hover,
    .featured-overview-toggle:focus-visible {
      color: var(--accent-hover);
      outline: none;
    }
    .featured-overview-toggle[hidden],
    .featured-overview-wrap:not(.has-overflow) .featured-overview-toggle {
      display: none !important;
    }
    .featured-slide.is-overview-expanded .featured-overview-wrap {
      width: min(100%, 760px);
      max-width: 760px;
    }
    .featured-slide.is-overview-expanded .featured-overview {
      display: block;
      -webkit-line-clamp: unset;
      line-clamp: unset;
      max-width: none;
      max-height: clamp(10rem, 32vh, 20rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .featured-slide.is-overview-expanded .featured-overview::-webkit-scrollbar {
      width: 7px;
    }
    .featured-slide.is-overview-expanded .featured-overview::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06);
      border-radius: 999px;
    }
    .featured-slide.is-overview-expanded .featured-overview::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.28);
      border-radius: 999px;
    }
    .featured-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
    .featured-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 26px;
      border-radius: 999px;
      border: 0;
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      cursor: pointer;
      transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1),
                  transform 100ms ease;
    }
    .featured-btn.primary {
      border: 0;
      background: #fff;
      color: #0d131a;
    }
    .featured-btn.primary:hover {
      background: rgba(255, 255, 255, 0.88);
      transform: scale(1.03);
    }
    .featured-btn.ghost {
      border: 0;
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
    .featured-btn.ghost:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.03);
    }
    .featured-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: 52px; height: 52px;
      border-radius: 999px;
      border: 0;
      background: rgba(255, 255, 255, 0.12);
      appearance: none;
      -webkit-appearance: none;
      color: #fff;
      font-size: 2.2rem;
      line-height: 1;
      font-weight: 700;
      padding: 0 0 3px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      transition: background 200ms ease, color 200ms ease;
      pointer-events: auto;
    }
    #featuredPrev { left: 16px; }
    #featuredNext { right: 16px; }
    .featured-nav:hover {
      background: rgba(255, 255, 255, 0.24);
    }
    .featured-hero--single .featured-nav,
    .featured-hero--single .featured-controls { display: none !important; }
    .featured-controls {
      position: absolute;
      left: 0; right: 0; bottom: 32px;
      display: flex;
      justify-content: center;
      z-index: 19;
      pointer-events: none;
    }
    .featured-dots { pointer-events: auto; display: flex; gap: 12px; }
    .featured-dot {
      width: 12px; height: 12px;
      border-radius: 999px;
      border: 0;
      background: rgba(255,255,255,0.45);
      cursor: pointer;
      padding: 0;
      transition: background 200ms ease, transform 200ms ease, width 200ms ease;
    }
    .featured-dot.active { background: #fff; transform: scale(1.3); }

    @media (max-width: 720px) {
      .featured-overview { -webkit-line-clamp: 2; line-clamp: 2; }
    }

    body.watchlist-mode .featured-hero .featured-badges { display: none; }
    body.watchlist-mode .featured-hero .featured-overview-wrap {
      justify-items: center;
      text-align: center;
    }
    body.watchlist-mode .featured-hero .featured-overview-toggle {
      justify-self: center;
    }
    body.watchlist-mode .featured-hero .featured-meta {
      justify-items: center;
      text-align: center;
    }
    body.watchlist-mode .featured-hero .featured-logo {
      object-position: center bottom;
    }
    body.watchlist-mode .featured-hero .featured-actions {
      justify-content: center;
    }
    .featured-episode {
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      color: rgba(255,255,255,0.92);
      letter-spacing: 0.02em;
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
    .featured-progress-group {
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .featured-progress-group .featured-actions { margin-top: 0; }
    .featured-progress {
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.22);
      overflow: hidden;
    }
    .featured-progress-fill {
      height: 100%;
      background: var(--accent, #5a62eb);
      border-radius: 999px;
    }

    /* Skeleton loader pour le hero */
    .featured-slide-skeleton {
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.24) 0%, rgba(0, 0, 0, 0.92) 100%) !important;
    }
    .featured-slide-skeleton::before,
    .featured-slide-skeleton::after { background: none; }
    .skeleton-box {
      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;
      border-radius: 10px;
    }
    .skeleton-logo { width: min(260px, 60vw); height: 96px; border-radius: 8px; }
    .skeleton-episode { width: 180px; height: 14px; border-radius: 999px; }
    .skeleton-progress { width: 100%; height: 4px; border-radius: 999px; }
    .skeleton-actions { display: flex; gap: 12px; margin-top: 4px; }
    .skeleton-btn { width: 140px; height: 44px; border-radius: 999px; }
    @keyframes skeleton-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }