/* ===== from main.css lines 1233-1391 ===== */
    /* ---------- Home mode (no search active) ---------- */
    body.home-mode .shell {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 100px);
    }

    body.home-mode:not(.has-home-sections) .hero {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 18vh;
    }

    body.home-mode:not(.has-home-sections) .hero-top {
      flex-direction: column;
      align-items: center;
      gap: 36px;
      margin-bottom: 0;
      width: 100%;
    }

    body.home-mode:not(.has-home-sections) .brand-logo-svg {
      height: calc(var(--floating-header-row-h) * 0.6875);
    }

    body.home-mode:not(.has-home-sections) .search-form {
      max-width: 682px;
      width: 100%;
      padding: 7px 9px 7px 26px;
      outline-width: 2px;
    }

    body.home-mode:not(.has-home-sections) .search-input {
      font-size: 1.265rem;
      padding: 15px 0;
    }

    body.home-mode:not(.has-home-sections) .search-button {
      min-width: 48px;
      min-height: 48px;
    }

    body.home-mode:not(.has-home-sections) .search-button svg {
      width: 22px;
      height: 22px;
    }

    body.home-mode:not(.has-home-sections) .hero-actions {
      position: fixed;
      top: 24px;
      right: max(16px, calc(50vw - 620px));
      z-index: 5;
    }

    /* Toggle switch complet (On) / simple (Off) */
    .home-mode-switch {
      display: inline-flex;
      align-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .home-mode-switch-track {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      width: 76px;
      height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(var(--accent-rgb), 0.22);
      border: 1.5px solid rgba(var(--accent-rgb), 0.75);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      transition: background-color 200ms ease, border-color 200ms ease;
    }
    .home-mode-switch-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1;
      user-select: none;
      transition: opacity 200ms ease;
      pointer-events: none;
    }
    .home-mode-switch .label-off { opacity: 0; color: var(--muted); margin-left: auto; }
    .home-mode-switch .label-on { opacity: 1; }
    .home-mode-switch-knob {
      position: absolute;
      top: 50%;
      left: 3px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      transform: translate(42px, -50%);
      transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .home-mode-switch.is-off .home-mode-switch-track {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--header-control-border);
    }
    .home-mode-switch.is-off .label-on { opacity: 0; }
    .home-mode-switch.is-off .label-off { opacity: 1; }
    .home-mode-switch.is-off .home-mode-switch-knob { transform: translate(0, -50%); }
    .home-mode-switch:hover .home-mode-switch-track { filter: brightness(1.08); }
    .home-mode-switch:focus-visible .home-mode-switch-track {
      outline: 2px solid var(--accent-hover);
      outline-offset: 2px;
    }

    body.home-mode .layout {
      display: none;
    }

    /* Continue watching row */
    .continue-watching { display: none; margin: 0 0 32px; }
    body.home-mode.has-continue-watching .continue-watching,
    body.watchlist-mode.has-continue-watching .continue-watching { display: block; }
    body.home-mode.has-continue-watching .hero,
    body.home-mode.has-home-sections .hero {
      flex: 0 0 auto;
      padding-bottom: 32px;
      justify-content: flex-start;
    }
    .continue-watching h3 {
      font-size: var(--fs-md);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      margin: 0 0 20px;
      padding: 0 4px;
      font-weight: var(--fw-black);
    }
    .continue-watching-row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 12px 8px 20px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    @media (min-width: 768px) {
      .continue-watching-row { gap: 24px; }
    }
    .continue-watching-row::-webkit-scrollbar { display: none; }

/* ===== from main.css lines 1392-1476 ===== */
    /* ---------- Home sections (p-stream style) ---------- */
    .home-section { display: none; margin: 0 0 32px; }
    body.home-mode .home-section.visible { display: block; }
    /* CV:auto au niveau SECTION retiré : la `contain-intrinsic-size: auto 480px`
       (480 px FIXE, non responsive) imposait une hauteur placeholder à toutes
       les .home-section.visible en home-mode. Sur viewport ≥768 px, la
       hauteur réelle de la section (header ~50 + cards row 378 + paddings 32 ≈
       460 px) est proche de 480 → quand le browser hésite entre skip/render
       ou que le cache `auto` n'est pas encore peuplé, la section reste bloquée
       à 480 px, créant un espace vide sous le contenu. Symptôme reporté :
       "BECAUSE YOU WATCHED" / "RECOMMANDATIONS" avec un grand vide noir
       sous les cards alors que CONTINUE WATCHING (qui n'a pas .home-section)
       fonctionne. Le bénéfice mémoire Safari est conservé via le CV:auto
       au niveau .show-card individuel (home.css:539-543) — les bitmaps des
       posters sont libérés card-par-card, ce qui est l'essentiel. */
    .home-section-title {
      font-size: var(--fs-md);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
      margin: 0 0 20px;
      font-weight: var(--fw-black);
    }
    .home-section-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 20px;
      padding: 0 4px;
      flex-wrap: wrap;
    }
    .home-section-header .home-section-title { margin: 0; }
    .home-row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 12px 8px 20px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-padding-left: 8px;
    }
    @media (hover: none), (pointer: coarse) {
      .home-row,
      .continue-watching-row {
        scroll-snap-type: x proximity;
      }
      .home-row .show-card,
      .continue-watching-row .show-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
    }
    @media (min-width: 768px) {
      .home-row { gap: 24px; }
    }
    .home-row::-webkit-scrollbar { display: none; }

    .row-viewport {
      position: relative;
    }
    .row-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, 0.12);
      appearance: none;
      -webkit-appearance: none;
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 2.09rem;
      line-height: 1;
      padding: 0 0 3px;
      cursor: pointer;
      z-index: 3;
      transition: background 0.2s ease, transform 0.2s ease;
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
    }
    .row-nav:hover {
      background: rgba(255, 255, 255, 0.24);
      transform: translateY(-50%) scale(1.05);
    }
    .row-nav.prev { left: 4px; }
    .row-nav.next { right: 4px; }
    .row-viewport.can-scroll-left .row-nav.prev { display: flex; }
    .row-viewport.can-scroll-right .row-nav.next { display: flex; }
    @media (hover: none) {
      .row-nav { display: none !important; }
    }
/* ===== from main.css lines 2254-2394 ===== */
    /* ---------- Explorer header (title + tabs + dividers) ---------- */
    /* Visibility is gated on body.home-mode.has-home-sections so the block
       never leaks into watchlist/search/detail pages. Using `display: none`
       as the default also avoids the `hidden` attribute being overridden by
       the more specific `display: flex` rule. */
    .explorer-header {
      display: none;
      flex-direction: column;
      align-items: center;
      margin: 8px 0 16px;
    }
    body.home-mode.has-home-sections .explorer-header { display: flex; }
    .explorer-title {
      text-align: center;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 12px 0 4px;
      color: var(--text, #fff);
      font-weight: var(--fw-bold, 700);
    }
    .explorer-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.14);
      align-self: center;
    }
    .explorer-divider--long  { width: 95%; margin: 24px 0 8px; }
    .explorer-divider--short { width: 50%; max-width: 420px; margin: 8px 0 18px; }
    /* Hide the long divider above the Explorer title when no section is
       rendered above it (recommendations not visible). */
    body.home-mode #homeRecommendations:not(.visible) ~ #explorerHeader .explorer-divider--long { display: none; }

    /* ---------- Home tabs (p-stream style) ---------- */
    .home-tabs {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin: 0 0 8px;
      padding: 0 4px 8px;
    }
    .home-tab-chip {
      padding: 8px 16px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-bold);
      cursor: pointer;
      transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                  transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .home-tab-chip:hover { color: var(--text); }
    .home-tab-chip[aria-selected="true"] {
      color: var(--text);
      transform: scale(1.08);
    }

    /* ---------- Home carousels container ---------- */
    .home-carousels { display: none; position: relative; z-index: 20; }
    body.home-mode.has-home-sections .home-carousels { display: block; }
    .home-carousels .home-section { display: block; }
    .home-section-dropdown {
      min-height: var(--control-pill-height);
      box-sizing: border-box;
      padding: 0 32px 0 16px;
      border-radius: 999px;
      border: 1.5px solid var(--header-control-border);
      background-color: 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-sm);
      font-weight: var(--fw-semi);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      text-transform: none;
      letter-spacing: normal;
      padding-right: 32px;
      max-width: 260px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 200ms ease,
                  transform 100ms ease;
    }
    .home-section-dropdown:hover {
      background-color: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      transform: scale(1.03);
    }
    .home-section-dropdown option {
      color: var(--text);
      background: #111111;
    }
    .home-row-empty {
      padding: 20px 6px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .home-section-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .home-section-controls .home-filter-chip { padding: 4px 12px; font-size: var(--fs-2xs); }

    .show-card-more .show-card-more-inner {
      position: relative;
      padding-bottom: 150%;
      width: 100%;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
      transition: background 200ms ease, border-color 200ms ease;
      overflow: hidden;
    }
    .show-card-more .show-card-more-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--muted);
    }
    .show-card-more .show-card-more-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text);
    }
    .show-card-more .show-card-more-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text);
    }
    .show-card.show-card-more:hover,
    .show-card.show-card-more:focus-visible {
      background: transparent;
    }
    .show-card-more:hover .show-card-more-inner,
    .show-card-more:focus-visible .show-card-more-inner {
      border-color: var(--accent);
    }

    .section-grid-view {
      position: fixed;
      inset: 0;
      z-index: var(--z-route-surface, 90);
      background: var(--bg);
      --section-grid-head-h: 74px;
      /* overflow-x: clip makes the (implicit-auto-from-overflow-y) horizontal
         axis stop generating a scrollbar when trailer-expanded cards shift
         their row siblings past the right edge via transform.
         The 48 px clip margin matches what `.section-grid-view-grid` and
         `.results` allow internally — without it, the inner grid lets the
         expanded card's accent ring through but this outer overlay clipped
         it again at the viewport edge. */
      overflow-x: clip;
      overflow-clip-margin: 200px;
      overflow-y: auto;
      padding: 0 32px 80px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .section-grid-view::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: calc(var(--section-grid-topbar-h, 80px) + var(--section-grid-head-h, 74px) + 96px);
      z-index: 45;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.96) 0%,
        rgba(0, 0, 0, 0.86) 54%,
        rgba(0, 0, 0, 0) 100%
      );
      opacity: 1;
      transition:
        height 240ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms ease;
      will-change: height, opacity;
    }
    .section-grid-view.is-subhead-hidden::before {
      height: 0;
      opacity: 0;
    }
    .section-grid-view[hidden] { display: none; }
/* ===== from main.css lines 2395-2473 ===== */
    /* Safe-area padding vit sur le topbar : son background opaque couvre
       la zone sous la dynamic island quand on scrolle, au lieu de laisser
       le contenu scroll paraître derrière le notch. */
    .section-grid-view-topbar {
      margin: 0 -32px;
      padding: calc(env(safe-area-inset-top, 0px) + 12px) 32px 12px;
      background: transparent;
      position: sticky;
      top: 0;
      z-index: 60;
      border-bottom: 0;
    }
    .section-grid-view-topbar .hero-top {
      margin-bottom: 0;
    }
    .section-grid-view-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 -32px 20px;
      flex-wrap: wrap;
      position: sticky;
      top: var(--section-grid-topbar-h, 80px);
      background: transparent;
      padding: 16px 32px 14px;
      z-index: 50;
      border-bottom: 0;
      transform: translateY(0);
      opacity: 1;
      will-change: transform, opacity;
      transition:
        transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms ease;
    }
    .section-grid-view.is-subhead-hidden .section-grid-view-head {
      transform: translateY(calc(-100% - 12px));
      opacity: 0;
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .section-grid-view::before,
      .section-grid-view-head {
        transition: none;
      }
    }
    .section-grid-view-title {
      font-size: 1.1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 700;
      margin: 0;
    }
    .section-grid-view-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      /* `flex-grow: 1` makes the controls fill the remaining row space when
         sharing a line with `.section-grid-view-title`, AND take full width
         when wrapped alone on its own line (mobile). Replaces the older
         `margin-left: auto` which only worked when sharing a line. */
      flex-grow: 1;
      min-width: 0;
    }
    .section-grid-view-head .results-controls-label,
    .section-grid-view-head .grid-view-sort,
    .section-grid-view-head .grid-view-sort > span,
    .section-grid-view-head .filter-reset,
    .section-grid-view-head .filter-reset:hover {
      color: #fff;
    }
    /* New wrap container (since the sort label was hoisted out of
       `.grid-view-filters` to mirror the search panel's structure). It
       contains the filter row + the sort label as siblings; flex-wrap lets
       the sort drop to its own line on narrow viewports. */
    .grid-view-filters-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
      min-width: 0;
    }
    .section-grid-view-controls .grid-view-filters {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      min-width: 0;
      /* `flex-basis: 100%` forces the filter row to take the full width of
         the wrap container on its line, which gives the inner
         `.results-filters-scroll` proper bounds for `overflow-x: auto` to
         engage. Without this, the row can sit at content-size and overflow
         the wrap horizontally instead of scrolling internally. */
      flex: 1 1 100%;
      width: 100%;
      padding: 0;
    }
    .section-grid-view-controls .grid-view-filters .results-filters-scroll {
      /* `flex: 0 1 auto` instead of `1 1 auto`: the scroll container sizes
         to its content's natural width and shrinks (with horizontal scroll)
         only when there isn't enough room. Without grow, the last button's
         right edge always aligns with the scroll container's right edge —
         no empty padding on the right. */
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
    }
    /* Phase S2.2 (mémoire Safari): CV: auto sur les cards de grille → Safari
       libère les bitmaps des cards qui sortent verticalement du viewport
       pendant un scroll long. `contain-intrinsic-size: auto 266px` :
       - `auto` keyword (Safari 18+, Chrome 109+) cache la hauteur RÉELLE
         après 1er rendu → corrige automatiquement par breakpoint.
       - Fallback 266 px = hauteur prudente sous les hauteurs reelles des
         cards standard avec body partage replie/etendu (56 px). Avant :
         410 px FIXE > actual mobile → placeholder trop grand → quand des
         cards sont off-screen (carrousels longs Explorer/Similar ~20 items),
         le grid track `.home-row` (align-items: stretch default) inflate
         à 410 → toutes les cards stretchent à 410 → vide sous le body.
         CW + Watchlist (peu d'items, tous visibles) n'étaient pas
         affectés. Tableau actual heights par breakpoint :
          <380 : 144×1.5 + 68 = 284
          <560 : 155×1.5 + 68 = 301
          <768 : 173×1.5 + 68 = 328
          ≥768 : 220×1.5 + 68 = 398
        Le fallback reste sous le min(actuals) standard = 284. */
    .section-grid-view-grid > .show-card {
      content-visibility: auto;
      contain-intrinsic-size: auto 266px;
    }
    /* P1b memoire : content-visibility: auto sur les cards des carrousels
       horizontaux + grille de resultats. Pendant un scroll vertical de la
       home, les rangees hors viewport ont leurs sous-arbres skippes par
       Safari -> bitmaps des posters liberes. Chaque card est un sous-arbre
       independant, donc CV se reveille des qu'elle entre dans le viewport
       (peu importe l'axe). Le hover-expand des cards ne flicker pas car
       la card est deja dans le viewport pendant la transition. */
    .home-row .show-card,
    .continue-watching-row .show-card,
    .results > .show-card {
      content-visibility: auto;
      contain-intrinsic-size: auto 266px;
    }
    .section-grid-view-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
      gap: var(--card-gap-row) var(--card-gap-col);
      /* 2 px lateral padding inside the grid container = same as the 2 px
         accent ring thickness, so the ring at `wrap.right + 2 px` always
         sits flush inside the grid's padding-box (and never gets clipped
         by it on the right edge of an expanded card). */
      padding-left: 2px;
      padding-right: 2px;
      /* Clip siblings that slide past the grid edges during the Strategy B
         (centre-clamped) expansion. */
      overflow-x: clip;
      overflow-clip-margin: 200px;
    }
    /* Grid cards use a width transition so the JS-driven inline width
       (applied by applyGridShiftOnExpand on hover) animates smoothly, just
       like the carousel's CSS-based width transition on the same class. */
    .section-grid-view-grid .show-card,
    .results .show-card {
      width: auto;
      transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .section-grid-view-more {
      display: flex;
      justify-content: center;
      margin-top: 28px;
      margin-bottom: 28px;
    }