/**
 * CinFlix Design System — v20260523-v7 (hero home immersif responsive)
 * Couche finale : harmonise tout le frontend existant sans casser JS ni classes métier.
 * Mobile-first • Tablette • Desktop • TV / grands écrans • reduced-motion
 */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@500..800&family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&display=swap");

/* ------------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app {
  --cf-brand: #e50914;
  --cf-brand-soft: rgba(229, 9, 20, 0.14);
  --cf-brand-hover: #f40612;
  --cf-ink: #fafafa;
  --cf-ink-muted: rgba(250, 250, 250, 0.68);
  --cf-ink-faint: rgba(250, 250, 250, 0.46);
  --cf-surface-0: #060606;
  --cf-surface-1: #0e0e0e;
  --cf-surface-2: #161616;
  --cf-surface-glass: rgba(12, 12, 12, 0.72);
  --cf-edge: rgba(255, 255, 255, 0.08);
  --cf-edge-strong: rgba(255, 255, 255, 0.14);
  --cf-accent-cool: #5eead4;
  --cf-font-sans: "DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cf-font-display: "Syne", "DM Sans", var(--cf-font-sans);
  --cf-radius-sm: 8px;
  --cf-radius-md: 14px;
  --cf-radius-lg: 22px;
  --cf-nav-h: min(76px, 14vw);
  --cf-pad-inline: clamp(16px, 4vw, 56px);
  --cf-shell-max: min(1680px, 100%);
  --cf-shadow-lift: 0 28px 80px rgba(0, 0, 0, 0.55);
  --cf-motion-fast: 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cf-motion-smooth: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------------- */
/* Base typographie & lisibilité                                         */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app {
  font-family: var(--cf-font-sans);
  color: var(--cf-ink);
  letter-spacing: -0.01em;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Réduit zoom / « bounce » au double‑tap sans bloquer les carrousels horizontaux */
body.streamix-skin.cf-public-app:not(.watch-page) {
  touch-action: manipulation;
}

body.streamix-skin.cf-public-app .rail-wrap,
body.streamix-skin.cf-public-app .rail,
body.streamix-skin.cf-public-app .rail.poster-rail,
body.streamix-skin.cf-public-app .franchise-rail,
body.streamix-skin.cf-public-app .home-catalog-grid {
  touch-action: pan-x pinch-zoom;
}

/* iOS Safari : champs sous 16px déclenchent encore un zoom au focus */
@media screen and (max-width: 1023px) {
  body.streamix-skin.cf-public-app:not(.watch-page)
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  body.streamix-skin.cf-public-app:not(.watch-page) textarea,
  body.streamix-skin.cf-public-app:not(.watch-page) select {
    font-size: max(16px, 1rem);
  }

  body.streamix-skin.cf-public-app:not(.watch-page)
    input[type="search"]::placeholder,
  body.streamix-skin.cf-public-app:not(.watch-page)
    textarea::placeholder {
    font-size: max(13px, 0.8125rem);
  }
}

body.streamix-skin.cf-public-app .logo-cin {
  letter-spacing: 0 !important;
}
body.streamix-skin.cf-public-app .drawer-brand .intro-logo {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

body.streamix-skin.cf-public-app .footer-premium-logo,
body.streamix-skin.cf-public-app .section-head-netflix .section-heading-group .section-title-link h1,
body.streamix-skin.cf-public-app .section-head-netflix .section-heading-group .section-title-link h2,
body.streamix-skin.cf-public-app .section-head-netflix .section-heading-group .section-title-link h3,
body.streamix-skin.cf-public-app .page-hero h1,
body.streamix-skin.cf-public-app .page-hero h2 {
  font-family: var(--cf-font-display);
  font-weight: 700;
}

/* Skip link accessible */
.cf-skip-link {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 99999;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-140%);
  transition:
    opacity var(--cf-motion-fast, 0.18s ease),
    transform var(--cf-motion-smooth, 0.32s ease);
  box-shadow: 0 10px 30px rgba(229, 9, 20, 0.45);
  background: var(--cf-brand, #e50914);
}
.cf-skip-link:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.cf-skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Contenu après skip : ancre lisible pour lecteurs d'écran */
#main-content:focus {
  outline: none;
}

/* ------------------------------------------------------------------------- */
/* Topbar navigation — lisible mobile / sticky premium                    */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app .topbar.cinflix-topbar-modern {
  padding-left: calc(var(--cf-pad-inline) / 2);
  padding-right: calc(var(--cf-pad-inline) / 2);
  padding-top: calc(10px + env(safe-area-inset-top, 0px) * 0.35);
  padding-bottom: 10px;
  min-height: var(--cf-nav-h);
  border-bottom-color: var(--cf-edge);
  isolation: isolate;
}

body.streamix-skin.cf-public-app .logo {
  text-decoration: none;
  gap: 0.15rem;
  font-family: var(--cf-font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  letter-spacing: -0.06em;
  transition:
    opacity var(--cf-motion-fast),
    transform var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .logo:hover,
body.streamix-skin.cf-public-app .logo:focus-visible {
  opacity: 0.94;
  transform: translateY(-1px);
}
body.streamix-skin.cf-public-app .logo-flix {
  color: var(--cf-brand);
}

body.streamix-skin.cf-public-app .topbar .logo .brand-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  letter-spacing: -0.06em !important;
  white-space: nowrap !important;
}

/* Topbar compact (≤1024) : même traitement que sidebar — Cin bleu, Flix blanc */
@media (max-width: 1023px) {
  body.streamix-skin.cf-public-app .topbar .logo .brand-wordmark .logo-cin {
    color: #5a8de6 !important;
    letter-spacing: 0 !important;
  }

  body.streamix-skin.cf-public-app .topbar .logo .brand-wordmark .logo-flix {
    color: #ffffff !important;
  }
}

/* Stripe topbar au même bleu nuit que le body home (voir pixel-theme) */
body.streamix-skin.cf-public-app .topbar {
  background: rgba(2, 6, 13, 0.84) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

body.streamix-skin.cf-public-app .topbar-right .main-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
body.streamix-skin.cf-public-app .topbar-right .main-nav::-webkit-scrollbar {
  height: 0;
}

@media (max-width: 1023px) {
  body.streamix-skin.cf-public-app:not(.mobile-nav-open):not(.topbar-expanded) .main-nav .nav-link {
    white-space: nowrap;
    scroll-snap-align: center;
    font-size: 0.8125rem;
    padding-inline: 0.55rem;
  }
}

body.streamix-skin.cf-public-app .topbar-right .main-nav .nav-link {
  position: relative;
  border-radius: 999px;
  padding: 0.45rem 0.82rem;
  font-weight: 600;
  font-size: clamp(0.78rem, 1.05vw, 0.9375rem);
  color: var(--cf-ink-muted) !important;
  text-decoration: none !important;
  transition:
    background var(--cf-motion-fast),
    color var(--cf-motion-fast),
    box-shadow var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .topbar-right .main-nav .nav-link:hover {
  color: var(--cf-ink) !important;
  background: rgba(255, 255, 255, 0.06);
}
body.streamix-skin.cf-public-app .topbar-right .main-nav .nav-link.active {
  color: var(--cf-ink) !important;
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 0 0 1px var(--cf-edge-strong),
    0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Recherche : champ transparent dans le pill du conteneur (plus de « double capsule »). */
body.streamix-skin.cf-public-app .topbar-right .search-wrap {
  flex: 0 1 clamp(280px, 36vw, 580px);
  min-width: 0;
}

body.streamix-skin.cf-public-app .topbar-right .search-wrap input[type="search"],
body.streamix-skin.cf-public-app .topbar-right .search-wrap input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.streamix-skin.cf-public-app .topbar-right .search-wrap input:focus,
body.streamix-skin.cf-public-app .topbar-right .search-wrap input:focus-visible,
body.streamix-skin.cf-public-app .topbar-right .search-wrap input:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.streamix-skin.cf-public-app .drawer-head .btn-ghost.drawer-join-btn {
  border-radius: 999px;
  font-weight: 600;
}

/* Burger / touches header */
body.streamix-skin.cf-public-app .mobile-header-tools .mobile-icon-btn {
  border-radius: var(--cf-radius-md);
  border: 1px solid var(--cf-edge-strong);
}

/* Shell largeur cohérente + TV overscan léger */
body.streamix-skin.cf-public-app:not(.watch-page) .browse-main.page-shell,
body.streamix-skin.cf-public-app:not(.watch-page) .page-shell,
body.streamix-skin.cf-public-app:not(.watch-page) .watchparty-main {
  width: min(var(--cf-shell-max), calc(100% - var(--cf-pad-inline)));
  padding-left: clamp(4px, 1vw, 12px);
  padding-right: clamp(4px, 1vw, 12px);
}

/*
 * Profil : le <main> est déjà dans la colonne retranchée par --px-sidebar.
 * Sans ce correctif, .browse-main.page-shell reprend une largeur en % du viewport
 * qui s’ajoute à la marge gauche du rail ⇒ dépassement horizontal.
 */
body.streamix-skin.cf-public-app:not(.watch-page)[data-page-view="profile"] #main-content.browse-main.page-shell.cf-profile-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Sections home / rails */
body.streamix-skin.cf-public-app:not(.watch-page) main > .section:first-of-type {
  margin-top: clamp(12px, 2.5vw, 28px);
}

body.streamix-skin.cf-public-app:not(.watch-page) .section {
  margin-inline: 0 !important;
  padding-inline: clamp(4px, 1vw, 8px);
}

body.streamix-skin.cf-public-app .section-head-netflix .section-heading-group {
  gap: 0.5rem;
}
body.streamix-skin.cf-public-app .section-title-link {
  text-decoration: none;
  transition: opacity var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .section-title-link:hover {
  opacity: 0.9;
}

body.streamix-skin.cf-public-app .section-title-arrow {
  transition: transform var(--cf-motion-smooth);
}
body.streamix-skin.cf-public-app .section-title-link:hover .section-title-arrow,
body.streamix-skin.cf-public-app .section-title-link:focus-visible .section-title-arrow {
  transform: translateX(4px);
}

/* Rails */
body.streamix-skin.cf-public-app .rail-wrap .rail-nav {
  width: clamp(42px, 4vw, 52px);
  height: clamp(42px, 4vw, 52px);
  border-radius: var(--cf-radius-lg);
  border: 1px solid var(--cf-edge-strong);
  backdrop-filter: blur(12px);
  transition:
    opacity var(--cf-motion-fast),
    transform var(--cf-motion-fast),
    background var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .rail-wrap .rail-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Boutons système global */
body.streamix-skin.cf-public-app .btn {
  border-radius: var(--cf-radius-md) !important;
  font-family: inherit;
  letter-spacing: -0.01em;
}

body.streamix-skin.cf-public-app .btn-primary {
  background: linear-gradient(180deg, var(--cf-brand-hover) 0%, #b20710 96%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow:
    0 16px 40px rgba(229, 9, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.streamix-skin.cf-public-app .btn-primary:hover {
  filter: brightness(1.06);
}

body.streamix-skin.cf-public-app .btn-ghost:not(.rail-nav):not(.search-modal-close) {
  border: 1px solid var(--cf-edge-strong) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body.streamix-skin.cf-public-app .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

body.streamix-skin.cf-public-app .btn:focus-visible {
  outline: 2px solid var(--cf-brand);
  outline-offset: 3px;
}

/* Footer — alignement grille mobile */
@media (max-width: 720px) {
  body.streamix-skin.cf-public-app .footer-premium-nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* Catalogue — filtres */
body.streamix-skin.cf-public-app .filter-toggle-btn {
  border-radius: 999px;
  transition:
    transform var(--cf-motion-fast),
    box-shadow var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .filter-toggle-btn:active {
  transform: scale(0.98);
}
body.streamix-skin.cf-public-app .quick-filter-btn {
  border-radius: 999px;
  transition: transform var(--cf-motion-fast);
}
body.streamix-skin.cf-public-app .quick-filter-btn.active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Modal recherche mobile */
.search-modal-watch .search-modal-content {
  border-radius: var(--cf-radius-lg) !important;
}
.search-modal-watch .search-modal-close:focus-visible {
  outline: 2px solid var(--cf-brand);
  outline-offset: 2px;
}

/* Lecteur watch — typo & panneaux */
body.streamix-skin.watch-page.cf-public-app .watch-source-panel {
  border-radius: var(--cf-radius-lg);
}
body.streamix-skin.watch-page.cf-public-app .watch-source-header h2 {
  font-family: var(--cf-font-display);
}

/* Animations très légères page */
@media (prefers-reduced-motion: no-preference) {
  body.streamix-skin.cf-public-app:not(.watch-page) main {
    animation: cfMainFade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.04s;
  }
  @keyframes cfMainFade {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* =========================================================================
   Priorités UX livrées ici :
   P1 · Accueil : hero lisible + teinte marque CinFlix
   P2 · Rails & catalogue : hover cohérent, accès « tout le catalogue »
   P3 · Fiche détail : accent aligné DS
   ========================================================================= */

/* —— P1 · Hero —— catalogues / rails (.hero hors #hero accueil) */
body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero)::after {
  background:
    linear-gradient(98deg, rgba(3, 7, 14, 0.97) 0%, rgba(3, 7, 14, 0.72) 32%, rgba(3, 7, 14, 0.18) 56%, rgba(3, 7, 14, 0.55) 100%),
    linear-gradient(182deg, rgba(0, 0, 0, 0.04) 0%, transparent 42%, rgba(0, 0, 0, 0.86) 100%),
    radial-gradient(ellipse 85% 70% at 78% -8%, rgba(229, 9, 20, 0.12), transparent 58%),
    radial-gradient(circle at 12% 88%, transparent 40%, rgba(2, 6, 13, 0.55) 100%) !important;
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-kicker {
  border-radius: 999px !important;
  gap: 0.45rem !important;
  letter-spacing: 0.06em !important;
  padding: 0 0.75rem !important;
  height: auto !important;
  min-height: 28px !important;
  color: #fff !important;
  border-color: rgba(229, 9, 20, 0.35) !important;
  background: rgba(229, 9, 20, 0.16) !important;
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-meta {
  color: rgba(255, 255, 255, 0.92) !important;
  filter: saturate(1.06);
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-overview {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 14px 40px rgba(0, 0, 0, 0.65) !important;
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-action-main {
  border-radius: 10px !important;
  padding: 0 1rem !important;
  min-height: 44px !important;
  height: auto !important;
  box-shadow:
    0 14px 28px rgba(229, 9, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, var(--cf-brand-hover) 0%, #ad0710 92%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-action-plus {
  border-radius: 10px !important;
  min-height: 44px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

body.streamix-skin.cf-public-app:not(.movie-details-page) .hero:not(#hero) .hero-dot.active {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(229, 9, 20, 0.55) !important;
}

@media (max-width: 639px) {
  body.streamix-skin.cf-public-app:not(.movie-details-page):not(.watch-page) .hero:not(#hero) .hero-content {
    width: calc(100% - 24px - env(safe-area-inset-inline, 0px)) !important;
    max-width: 640px !important;
    margin-left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
    margin-right: auto !important;
  }
}


/* ------------------------------------------------------------------------- */
/* Accueil #hero — carte ciné lisible PC / mobile, un seul voile (pas ::after pile) */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero::after {
  content: none !important;
  display: none !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero {
  --cf-home-hero-radius: clamp(14px, 1.35vw + 8px, 22px);
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: clamp(6px, 1vw, 16px) 0 clamp(12px, 1.75vw, 22px) !important;
  min-height: clamp(296px, 22vw + 168px, 392px) !important;
  height: clamp(300px, 20vw + 180px, 420px) !important;
  max-height: min(480px, 58vh) !important;
  border-radius: var(--cf-home-hero-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(90, 141, 230, 0.09), transparent 55%),
    #050a11 !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  filter: saturate(1.04) brightness(0.93) contrast(1.02) !important;
  transform: none !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      92deg,
      rgba(5, 10, 18, 0.92) 0%,
      rgba(5, 10, 18, 0.66) 28%,
      rgba(5, 10, 18, 0.2) 48%,
      rgba(5, 10, 18, 0.55) 100%
    ),
    linear-gradient(180deg, rgba(1, 3, 8, 0.35) 0%, transparent 40%, rgba(3, 6, 12, 0.88) 100%),
    radial-gradient(ellipse 90% 60% at 70% -10%, rgba(229, 9, 20, 0.08), transparent 48%) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: var(--hero-media-position, center center) !important;
  transform: scale(1.04) translateZ(0) !important;
  transform-origin: center center !important;
  animation: none !important;
  will-change: opacity !important;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
  vertical-align: top !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  align-self: center !important;
  box-sizing: border-box !important;
  gap: clamp(10px, 1.35vw, 14px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: min(540px, 46vw, 92%) !important;
  margin-inline: clamp(14px, 2.75vw + 6px, 48px) auto !important;
  padding: clamp(12px, 2vw, 22px) 0 clamp(44px, 4.5vw, 56px) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  align-self: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: unset !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.35rem 0.82rem !important;
  border-radius: 999px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(255, 255, 255, 0.93) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(10, 16, 28, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-kicker-dot {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--cf-brand, #e50914) !important;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.25) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-title,
body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero h1 {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  font-family: var(--cf-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  font-size: clamp(1.7rem, 2.85vw + 0.92rem, 2.82rem) !important;
  line-height: 1.06 !important;
  color: #fff !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 22px 50px rgba(0, 0, 0, 0.45) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-title.is-long-title,
body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero h1.is-long-title {
  font-size: clamp(1.45rem, 2.15vw + 0.92rem, 2.35rem) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-title.is-xlong-title,
body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero h1.is-xlong-title {
  font-size: clamp(1.3rem, 1.85vw + 0.82rem, 2.05rem) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-meta {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  font-size: clamp(0.8rem, 0.42vw + 0.73rem, 0.935rem) !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em !important;
  color: rgba(246, 248, 253, 0.72) !important;
  filter: none !important;
  overflow: hidden !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-overview {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  line-height: 1.48 !important;
  font-size: clamp(0.82rem, 0.42vw + 0.73rem, 0.98rem) !important;
  font-weight: 400 !important;
  color: rgba(242, 244, 250, 0.78) !important;
  text-shadow: none !important;
  overflow: hidden !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(10px, 1.85vw, 14px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0.125rem !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-main {
  flex: 0 1 auto !important;
  min-width: min(148px, 42%) !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 clamp(1rem, 2.8vw, 1.35rem) !important;
  border-radius: 999px !important;
  font-size: clamp(0.84rem, 0.42vw + 0.73rem, 0.945rem) !important;
  font-weight: 700 !important;
  border: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--cf-brand-hover, #f61618), #bb0710 100%) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-plus {
  flex: 1 1 min(204px, 100%) !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 clamp(1rem, 2.8vw, 1.35rem) !important;
  border-radius: 999px !important;
  font-size: clamp(0.84rem, 0.42vw + 0.73rem, 0.945rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-plus.is-active {
  border-color: rgba(229, 9, 20, 0.55) !important;
  background: rgba(229, 9, 20, 0.15) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-main,
body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  white-space: normal !important;
  text-align: center !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-glyph {
  flex-shrink: 0 !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-nav {
  position: absolute !important;
  top: clamp(10px, 1.85vw, 22px) !important;
  right: clamp(10px, 1.85vw, 26px) !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 8px !important;
}

@media (max-width: 767px) {
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-nav {
    display: none !important;
  }
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-nav-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(6, 10, 18, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-indicators {
  bottom: max(13px, env(safe-area-inset-bottom, 0px)) !important;
  gap: clamp(9px, 2vw, 11px) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  opacity: 0.4 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-dot.active {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(229, 9, 20, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg-media {
    transition: opacity 0.35s ease !important;
    transform: scale(1.02) translateZ(0) !important;
  }
}

@media (min-width: 1024px) {
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-overview {
    -webkit-line-clamp: 4 !important;
  }
}

@media (min-width: 1440px) {
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero {
    max-height: min(460px, 52vh) !important;
    min-height: clamp(324px, 18vw + 200px, 400px) !important;
    height: clamp(328px, 16vw + 220px, 410px) !important;
  }
}

@media (max-width: 639px) {
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero {
    --cf-hero-mobile-pad: clamp(14px, 4.2vw, 18px);
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(332px, 56vw + 140px, 420px) !important;
    height: auto !important;
    max-height: none !important;
    padding-inline: var(--cf-hero-mobile-pad) !important;
    border-radius: clamp(14px, 3.8vw + 10px, 18px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg::after {
    background:
      linear-gradient(
        180deg,
        rgba(5, 9, 16, 0.35) 0%,
        rgba(5, 9, 16, 0.15) 32%,
        rgba(5, 9, 16, 0.55) 68%,
        rgba(5, 8, 14, 0.92) 100%
      ),
      radial-gradient(ellipse 85% 70% at 50% -5%, rgba(229, 9, 20, 0.07), transparent 48%) !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-bg-media {
    transform: scale(1.065) translateZ(0) !important;
    transform-origin: 50% 24% !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-content {
    align-items: center !important;
    align-self: auto !important;
    text-align: center !important;
    max-width: min(420px, 100%) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding: clamp(16px, 4vw + 10px, 28px) 0 clamp(48px, 9vw + 18px, 60px) !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-kicker {
    align-self: center !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-title,
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero h1 {
    text-align: center !important;
    font-size: clamp(1.38rem, 6.2vw + 0.7rem, 1.92rem) !important;
    line-height: 1.1 !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-meta {
    text-align: center !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-overview {
    -webkit-line-clamp: 2 !important;
    text-align: center !important;
    font-size: clamp(0.78rem, 2.95vw + 0.62rem, 0.895rem) !important;
    line-height: 1.45 !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-actions {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-main,
  body.streamix-skin.cf-public-app:not(.watch-page) #hero.hero .hero-action-plus {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding-inline: clamp(10px, 3vw, 14px) !important;
    font-size: clamp(0.78rem, 2.85vw + 0.62rem, 0.865rem) !important;
    border-radius: 12px !important;
  }
}

/* —— Sections / kickers liste accueil —— */
body.streamix-skin.cf-public-app:not(.watch-page) .section-kicker {
  font-family: var(--cf-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.54) !important;
  margin: 0 0 6px !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .section-head-stack:not(.catalog-title-row)
  h2,
body.streamix-skin.cf-public-app:not(.watch-page)
  .section-head-stack:not(.catalog-title-row)
  h3 {
  font-family: var(--cf-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  #catalogSection.section
  > .catalog-title-row
  h2#catalogTitle {
  font-family: var(--cf-font-display) !important;
}

/* —— P2 · Lien tout le catalogue (rétabli après pixel-theme) —— */
body.streamix-skin.cf-public-app .home-catalog-link {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.45rem 0.92rem !important;
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  text-decoration: none !important;
}
body.streamix-skin.cf-public-app .home-catalog-link:hover {
  border-color: rgba(229, 9, 20, 0.45) !important;
  background: rgba(229, 9, 20, 0.12) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  #catalogSection
  > .catalog-title-row.section-head-stack {
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .home-catalog-toolbar {
  padding: 0.75rem 0 !important;
  margin-bottom: 0.35rem !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  #homeCatalogFilters
  .filter-pill.home-catalog-filter {
  border-radius: 999px !important;
  padding: 0.45rem 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition:
    transform var(--cf-motion-fast),
    border-color var(--cf-motion-fast),
    background var(--cf-motion-fast) !important;
}
body.streamix-skin.cf-public-app:not(.watch-page)
  #homeCatalogFilters
  .filter-pill.home-catalog-filter.active {
  background: rgba(229, 9, 20, 0.16) !important;
  border-color: rgba(229, 9, 20, 0.52) !important;
  box-shadow:
    0 6px 20px rgba(229, 9, 20, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.streamix-skin.cf-public-app:not(.watch-page):not(.movie-details-page)
    .rail
    .poster-card:not(.minimal-poster-placeholder):not(.skeleton-cell),
  body.streamix-skin.cf-public-app[data-page-view="catalogue"]
    .browse-grid
    .poster-card.catalogue-grid-card:not(.minimal-poster-placeholder) {
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.streamix-skin.cf-public-app:not(.watch-page):not(.movie-details-page)
    .rail
    .poster-card:not(.minimal-poster-placeholder):hover,
  body.streamix-skin.cf-public-app:not(.watch-page):not(.movie-details-page)
    .rail
    .poster-card:not(.minimal-poster-placeholder):focus-within {
    transform: translateY(-6px) scale(1.025);
    z-index: 3;
    box-shadow:
      0 26px 50px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  body.streamix-skin.cf-public-app[data-page-view="catalogue"]
    .browse-grid
    .poster-card.catalogue-grid-card:not(.minimal-poster-placeholder):hover,
  body.streamix-skin.cf-public-app[data-page-view="catalogue"]
    .browse-grid
    .poster-card.catalogue-grid-card:not(.minimal-poster-placeholder):focus-within {
    transform: translateY(-4px);
    box-shadow:
      0 22px 44px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(229, 9, 20, 0.18);
  }
}

body[data-page-view="catalogue"].streamix-skin.cf-public-app .catalog-toolbar-simple {
  border-radius: var(--cf-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: clamp(10px, 2vw, 16px) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 52%),
    rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(12px);
}

body[data-page-view="catalogue"].streamix-skin.cf-public-app .filter-panel-simple[aria-hidden="false"] {
  border-radius: var(--cf-radius-lg) !important;
  border-color: rgba(229, 9, 20, 0.18) !important;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45) !important;
}

/* —— P3 · Fiche détail —— */
body.movie-details-page.streamix-skin.cf-public-app {
  --details-accent: #e50914;
  --details-accent-soft: rgba(229, 9, 20, 0.2);
}

body.movie-details-page.streamix-skin.cf-public-app .movie-details-type-badge {
  background: rgba(229, 9, 20, 0.16) !important;
  border-color: rgba(229, 9, 20, 0.42) !important;
  color: #fff2f4 !important;
}

/* =====================================================================
   Vague continue : Découverte, listes “shell”, Profil/VIP après inline,
                    Watch Party fonctionnel + overlay lancement synchronisée
   ===================================================================== */

body.streamix-skin.cf-public-app[data-page-view="discover"] .filter-chip.active {
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.32), rgba(229, 9, 20, 0.12)) !important;
  border-color: rgba(229, 9, 20, 0.55) !important;
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.22) !important;
}

body.streamix-skin.cf-public-app[data-page-view="discover"] #discoverSubmit.btn-primary {
  min-height: 48px !important;
  border-radius: 12px !important;
}

body.streamix-skin.cf-public-app:is(
    [data-page-view="latest"],
    [data-page-view="suggestions"],
    [data-page-view="watchlist"],
    [data-page-view="top10"],
    [data-page-view="continue"]
  )
  .page-kicker {
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.6875rem !important;
  color: rgba(255, 255, 255, 0.66) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  padding: 0.35rem 0.85rem !important;
  border: 1px solid rgba(229, 9, 20, 0.28) !important;
  background: rgba(229, 9, 20, 0.09) !important;
  margin: 0 0 12px !important;
}

body.streamix-skin.cf-public-app:is([data-page-view="latest"], [data-page-view="suggestions"])
  .browse-main.page-shell
  section.section:first-of-type {
  margin-top: 6px;
}

body.streamix-skin.cf-public-app:is(
    [data-page-view="latest"],
    [data-page-view="suggestions"],
    [data-page-view="watchlist"],
    [data-page-view="top10"],
    [data-page-view="continue"],
    [data-page-view="watchparty"]
  )
  .page-chip.is-accent {
  border-color: rgba(229, 9, 20, 0.36) !important;
  background: rgba(229, 9, 20, 0.12) !important;
}

body[data-page-view="profile"].streamix-skin.cf-public-app .settings-side-link.is-active {
  background: rgba(229, 9, 20, 0.14);
  border: 1px solid rgba(229, 9, 20, 0.35);
}

body[data-page-view="profile"].streamix-skin.cf-public-app .settings-side-link.is-active .ss-icon {
  color: var(--cf-brand, #e50914);
}

body[data-page-view="profile"].streamix-skin.cf-public-app .settings-input:focus {
  border-color: rgba(229, 9, 20, 0.55);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}

body[data-page-view="profile"].streamix-skin.cf-public-app .settings-btn-primary {
  background: linear-gradient(180deg, var(--cf-brand-hover), #ad0710 96%);
  box-shadow: 0 16px 34px rgba(229, 9, 20, 0.28);
  border: none;
}

body[data-page-view="profile"].streamix-skin.cf-public-app .settings-card-title {
  font-family: var(--cf-font-display);
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-room-head.salon-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-room-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-room-code {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: 0.08em;
  color: #fff;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-panel-card > h3,
body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-entry-card > h2 {
  font-family: var(--cf-font-display);
  margin-bottom: 0.35rem;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-card-caption {
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 1rem;
  line-height: 1.55;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-current-pane > .btn-primary {
  width: fit-content;
  margin-top: 12px;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-members {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

body[data-page-view="watchparty"].streamix-skin.cf-public-app .salon-members .salon-member-item {
  padding: 12px;
}

.cf-room-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  backdrop-filter: blur(12px);
  background: rgba(3, 3, 5, 0.72);
}

.cf-room-launch-overlay.hidden {
  display: none;
}

.cf-room-launch-card {
  padding: clamp(28px, 6vw, 48px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 30% 0%, rgba(229, 9, 20, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(18, 18, 22, 0.98), rgba(6, 6, 10, 0.98));
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.6);
  max-width: 440px;
  width: min(440px, 92vw);
  text-align: center;
}

.cf-room-launch-overlay.is-go .cf-room-launch-count {
  color: var(--cf-brand, #e50914);
}

@media (prefers-reduced-motion: no-preference) {
  .cf-room-launch-overlay.is-go .cf-room-launch-count {
    animation: cfPulseGlow 1.12s ease-in-out infinite;
  }
}

.cf-room-launch-title {
  margin: 0 0 8px;
  font-weight: 700;
}

.cf-room-launch-count {
  font-size: clamp(3rem, 10vw, 4.75rem);
  font-family: var(--cf-font-display);
  font-weight: 800;
  line-height: 1;
}

.cf-room-launch-caption {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

@keyframes cfPulseGlow {
  50% {
    filter: brightness(1.12);
    text-shadow: 0 0 18px rgba(229, 9, 20, 0.42);
  }
}

body.watch-party-active.cf-public-app .salon-members .salon-member-item {
  border-left: 2px solid rgba(229, 9, 20, 0.35);
}

body[data-page-view="vip"].streamix-skin.cf-public-app .vip-title span {
  background: linear-gradient(135deg, #e50914, #ff5a62);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 920px) {
  body[data-page-view="vip"].streamix-skin.cf-public-app .footer-premium {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

body.streamix-skin.watch-page.cf-public-app #roomSessionBar.room-session-bar:not(.hidden) {
  margin-top: 12px;
  border-radius: var(--cf-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------------- */
/* Barre gauche — mêmes tokens que topbar / shell (couleurs DS)               */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app .cf-left-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 11px calc(14px + env(safe-area-inset-bottom, 0px))
    !important;
  /* Aligné avec la home (pixel-theme body / rail bleu‑nuit — pas les gris #060606) */
  background:
    linear-gradient(180deg, rgba(5, 10, 18, 0.98), rgba(4, 9, 17, 0.965)),
    var(--px-bg-soft, #050a12) !important;
  border-right: 0 none !important;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.22) !important;
}

/* Pas de ligne verticale de séparation au bord droit du rail ; mobile/tablette sans rail ni offset */
@media (max-width: 1023px) {
  body.streamix-skin.cf-public-app .cf-left-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    border: 0 none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .topbar,
  body.streamix-skin.cf-public-app:not(.watch-page) main,
  body.streamix-skin.cf-public-app:not(.watch-page) .footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1024px) {
  body.streamix-skin.cf-public-app:not(.watch-page) .cf-left-sidebar {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}
body.streamix-skin.cf-public-app .cf-brand {
  margin: 0 2px 18px !important;
  gap: 0 !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition:
    opacity var(--cf-motion-fast),
    transform var(--cf-motion-fast);
}

/* Sidebar : lien logo sans « bulle » — Cin bleu lisible sur fond sombre, Flix blanc */
body.streamix-skin.cf-public-app .cf-left-sidebar .cf-brand {
  align-self: flex-start !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.streamix-skin.cf-public-app .cf-brand:hover,
body.streamix-skin.cf-public-app .cf-brand:focus-visible {
  opacity: 0.94;
  transform: translateY(-1px);
}

body.streamix-skin.cf-public-app .cf-brand-word {
  font-family: var(--cf-font-display) !important;
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
}

/* Sidebar : mot-partie — bleu foncé lisible vs fond nuit • Flix blanc */
body.streamix-skin.cf-public-app .cf-left-sidebar .cf-brand-word {
  color: #ffffff !important;
}

body.streamix-skin.cf-public-app .cf-left-sidebar .cf-brand-word .logo-cin {
  color: #5a8de6 !important;
  letter-spacing: 0 !important;
}

body.streamix-skin.cf-public-app .cf-left-sidebar .cf-brand-word .logo-flix {
  color: #ffffff !important;
}

body.streamix-skin.cf-public-app .cf-side-nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 1px !important;
  overflow-y: auto !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
  -webkit-overflow-scrolling: touch;
}

body.streamix-skin.cf-public-app .cf-side-account {
  display: grid !important;
  gap: 1px !important;
  flex-shrink: 0 !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--cf-edge) !important;
}

body.streamix-skin.cf-public-app .cf-side-account p {
  margin: 0 8px 6px !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: var(--cf-ink-faint) !important;
  text-transform: uppercase !important;
}

body.streamix-skin.cf-public-app .cf-side-link,
body.streamix-skin.cf-public-app .cf-side-nav a,
body.streamix-skin.cf-public-app .cf-side-account a {
  position: relative !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  gap: 12px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  color: var(--cf-ink-muted) !important;
  transition:
    background var(--cf-motion-fast),
    color var(--cf-motion-fast),
    box-shadow var(--cf-motion-fast) !important;
}

body.streamix-skin.cf-public-app .cf-side-link:hover,
body.streamix-skin.cf-public-app .cf-side-nav a:hover,
body.streamix-skin.cf-public-app .cf-side-account a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--cf-ink) !important;
  transform: none !important;
}

body.streamix-skin.cf-public-app .cf-side-link.is-active,
body.streamix-skin.cf-public-app .cf-side-nav a.is-active,
body.streamix-skin.cf-public-app .cf-side-account a.is-active {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--cf-ink) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 0 1px var(--cf-edge-strong),
    0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

body.streamix-skin.cf-public-app .cf-side-nav a.is-active::before,
body.streamix-skin.cf-public-app .cf-side-account a.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 3px !important;
  transform: translateY(-50%) !important;
  background: var(--cf-brand, #e50914) !important;
  box-shadow: 0 0 12px var(--cf-brand-soft), 0 0 18px rgba(229, 9, 20, 0.35) !important;
}

body.streamix-skin.cf-public-app .cf-side-nav a.is-active,
body.streamix-skin.cf-public-app .cf-side-account a.is-active {
  padding-left: calc(12px + 6px) !important;
}

body.streamix-skin.cf-public-app .cf-nav-svg {
  opacity: 0.92 !important;
}

body.streamix-skin.cf-public-app .cf-side-nav a.is-active .cf-nav-svg,
body.streamix-skin.cf-public-app .cf-side-account a.is-active .cf-nav-svg {
  opacity: 1 !important;
}

body.streamix-skin.cf-public-app .cf-side-premium {
  flex-shrink: 0 !important;
  align-self: stretch !important;
  margin-top: auto !important;
  margin-inline: 0 !important;
  margin-bottom: 0 !important;
  padding: 11px 12px !important;
  min-height: 0 !important;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.92), rgba(4, 9, 17, 0.96)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid #172235 !important;
  border-radius: var(--cf-radius-sm) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

body.streamix-skin.cf-public-app .cf-premium-title {
  margin-bottom: 8px !important;
}

body.streamix-skin.cf-public-app .cf-side-premium h3 {
  color: var(--cf-ink, #fafafa) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

body.streamix-skin.cf-public-app .cf-premium-icon {
  border-radius: 7px !important;
  background: var(--cf-brand-soft) !important;
  color: var(--cf-brand, #e50914) !important;
  box-shadow: none !important;
}

body.streamix-skin.cf-public-app .cf-side-premium p {
  margin: 0 0 10px !important;
  color: var(--cf-ink-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

body.streamix-skin.cf-public-app .cf-side-premium a {
  height: auto !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: var(--cf-brand, #e50914) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  box-shadow:
    0 6px 16px var(--cf-brand-soft),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: background var(--cf-motion-fast, 0.18s ease),
    transform var(--cf-motion-fast, 0.18s ease),
    box-shadow var(--cf-motion-fast, 0.18s ease);
}

body.streamix-skin.cf-public-app .cf-side-premium a:hover {
  background: var(--cf-brand-hover, #f40612) !important;
  box-shadow:
    0 8px 22px var(--cf-brand-soft),
    0 6px 14px rgba(0, 0, 0, 0.35) !important;
}

body.streamix-skin.cf-public-app .cf-side-link:focus-visible,
body.streamix-skin.cf-public-app .cf-side-nav a:focus-visible,
body.streamix-skin.cf-public-app .cf-side-account a:focus-visible,
body.streamix-skin.cf-public-app .cf-side-premium a:focus-visible {
  outline: 2px solid var(--cf-brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------- */
/* Tablette                                                                  */
/* ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  body.streamix-skin.cf-public-app {
    --cf-pad-inline: clamp(24px, 5vw, 48px);
  }

  body.streamix-skin.cf-public-app .cf-side-nav a.is-active::before,
  body.streamix-skin.cf-public-app .cf-side-account a.is-active::before {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    top: 74% !important;
    bottom: auto !important;
    width: 22px !important;
    height: 3px !important;
    box-shadow: 0 0 10px var(--cf-brand-soft), 0 0 14px rgba(229, 9, 20, 0.4) !important;
  }

  body.streamix-skin.cf-public-app .cf-side-nav a.is-active,
  body.streamix-skin.cf-public-app .cf-side-account a.is-active {
    padding-left: 12px !important;
  }
}

/* ------------------------------------------------------------------------- */
/* TV & ultra-wide — typo + lisibilité à distance                            */
/* ------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  body.streamix-skin.cf-public-app {
    font-size: 110%;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .browse-main.page-shell,
  body.streamix-skin.cf-public-app:not(.watch-page) .page-shell {
    width: min(1880px, calc(94vw - env(safe-area-inset-inline, 0px)));
    padding-inline: max(48px, 4vw);
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .rail-wrap .rail-nav {
    transform: scale(1.06);
    transform-origin: center;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .poster-card:not(.minimal-poster-placeholder),
  body.streamix-skin.cf-public-app:not(.watch-page) .browse-card-inner {
    border-radius: calc(var(--cf-radius-md) + 4px);
  }
}

@media (min-width: 2560px) {
  body.streamix-skin.cf-public-app {
    font-size: 122%;
  }
}

/* ------------------------------------------------------------------------- */
/* Topbar plus lisible • recherche • modal notifications                         */
/* ------------------------------------------------------------------------- */
body.streamix-skin.cf-public-app:not(.watch-page) .topbar {
  background: linear-gradient(180deg, rgba(2, 4, 9, 0.97) 0%, rgba(4, 8, 15, 0.94) 100%) !important;
  backdrop-filter: blur(20px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(118%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.082) !important;
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.48),
    inset 0 -1px 0 rgba(255, 255, 255, 0.042) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .topbar.scrolled {
  background: linear-gradient(180deg, rgba(1, 3, 8, 0.98), rgba(3, 6, 12, 0.96)) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 6px 36px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* —— Barre recherche premium : une seule forme capsule, fond bleu nuit satiné —— */
body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px 0 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  isolation: isolate;
  color: rgba(239, 244, 255, 0.92) !important;
  background:
    linear-gradient(
      160deg,
      rgba(72, 110, 180, 0.18) 0%,
      rgba(12, 22, 44, 0.65) 38%,
      rgba(6, 12, 24, 0.88) 100%
    ) !important;
  border: 1px solid rgba(110, 150, 220, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 10px 32px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  transition:
    border-color var(--cf-motion-fast),
    box-shadow var(--cf-motion-fast),
    transform var(--cf-motion-fast),
    background 0.25s ease !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 24px rgba(80, 130, 220, 0.06) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap .search-icon,
body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input[type="search"],
body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap .search-input {
  position: relative !important;
  z-index: 1 !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap .search-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: rgba(180, 210, 255, 0.95) !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input[type="search"],
body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input.search-input {
  font-size: 0.935rem !important;
  font-weight: 440 !important;
  letter-spacing: 0.01em !important;
  color: #f7f9ff !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input::placeholder {
  color: rgba(180, 198, 230, 0.72) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap:focus-within {
  border-color: rgba(229, 9, 20, 0.38) !important;
  box-shadow:
    0 0 0 2px rgba(229, 9, 20, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 28px rgba(0, 0, 0, 0.42) !important;
  transform: translateY(-0.5px) !important;
}

@media (min-width: 1024px) {
  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap::after {
    content: "Ctrl · K" !important;
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: 26px !important;
    padding: 0 9px !important;
    margin-left: 4px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 640 !important;
    letter-spacing: 0.04em !important;
    font-variant-numeric: tabular-nums !important;
    color: rgba(220, 230, 248, 0.78) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

/* Mobile / tablette : pleine largeur du panneau, pas de faux double cadre */
@media (max-width: 1023px) {
  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap {
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap::after {
    display: none !important;
    content: none !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page).mobile-search-open .topbar .search-wrap {
    margin: 0 auto !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input[type="search"],
  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap input.search-input {
    font-size: 1rem !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap:focus-within {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.streamix-skin.cf-public-app:not(.watch-page) .search-wrap:focus-within {
    transform: none !important;
  }
}

body.streamix-skin.cf-public-app:not(.watch-page) .mobile-notify-btn {
  flex-shrink: 0 !important;
}

@media (min-width: 1024px) {
  body.streamix-skin.cf-public-app .mobile-notify-btn {
    display: none !important;
  }
}

/* Overlay + carte : au-dessus du menu Plus (mobile) */
.cf-notifications-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 215 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(14px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition:
    opacity 0.28s var(--cf-motion-smooth),
    visibility 0.28s step-end !important;
}

.cf-notifications-root.is-open {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition:
    opacity 0.28s var(--cf-motion-smooth),
    visibility 0s step-start !important;
}

.cf-notifications-overlay {
  position: absolute !important;
  inset: 0 !important;
  cursor: pointer !important;
  background: rgba(3, 5, 12, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.cf-notifications-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, calc(100vw - 28px)) !important;
  max-height: min(72vh, 560px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--cf-radius-lg) !important;
  background: linear-gradient(165deg, rgba(14, 18, 30, 0.98), rgba(6, 9, 16, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  transform: translateY(10px) scale(0.98) !important;
  opacity: 0 !important;
  transition:
    transform 0.32s var(--cf-motion-smooth),
    opacity 0.28s ease !important;
}

.cf-notifications-root.is-open .cf-notifications-dialog {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.cf-notifications-dialog-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  padding: 16px 16px 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: linear-gradient(180deg, rgba(229, 9, 20, 0.12), transparent) !important;
}

.cf-notifications-dialog-header h3 {
  margin: 0 !important;
  font-family: var(--cf-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--cf-ink) !important;
}

.cf-notifications-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
  transition:
    background var(--cf-motion-fast),
    color var(--cf-motion-fast),
    transform var(--cf-motion-fast) !important;
}

.cf-notifications-close:hover,
.cf-notifications-close:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  outline: none !important;
}

.cf-notifications-close:focus-visible {
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.45) !important;
}

.cf-notifications-body {
  overflow: hidden auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 8px 10px 14px !important;
  -webkit-overflow-scrolling: touch !important;
}

.cf-notifications-root .topbar-notifications-empty {
  margin: 20px 8px !important;
  padding: 28px 16px !important;
  border-radius: var(--cf-radius-md) !important;
  text-align: center !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  color: var(--cf-ink-muted) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

.cf-notifications-root .topbar-notification-item {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 8px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: inherit !important;
  text-decoration: none !important;
  transition:
    border-color var(--cf-motion-fast),
    background var(--cf-motion-fast) !important;
}

.cf-notifications-root .topbar-notification-item:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.cf-notifications-root .topbar-notification-icon {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.28), rgba(122, 92, 255, 0.15)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cf-notifications-root .topbar-notification-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.cf-notifications-root .topbar-notification-copy strong {
  font-size: 0.9rem !important;
  font-weight: 640 !important;
  color: var(--cf-ink) !important;
}

.cf-notifications-root .topbar-notification-copy span {
  font-size: 0.84rem !important;
  line-height: 1.4 !important;
  color: var(--cf-ink-muted) !important;
}

.cf-notifications-root .topbar-notification-copy small {
  font-size: 0.74rem !important;
  letter-spacing: 0.03em !important;
  color: var(--cf-ink-faint) !important;
}

.cf-notifications-root .topbar-notification-cta {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--cf-brand) !important;
}

/* Anneau focus TV / clavier grande surface — interactifs uniquement          */
@media (min-width: 1920px) {
  body.streamix-skin.cf-public-app:not(.watch-page) button:focus-visible,
  body.streamix-skin.cf-public-app:not(.watch-page) a.nav-link:focus-visible,
  body.streamix-skin.cf-public-app:not(.watch-page) .browse-card-inner:focus-visible,
  body.streamix-skin.cf-public-app:not(.watch-page) .poster-card:focus-visible {
    outline-width: max(3px, 0.23vw);
    outline-offset: max(6px, 0.42vw);
  }
}

/* ------------------------------------------------------------------------- */
/* Page Profil — même topbar que le reste du site ; onglets compte (#hash)       */
/* ------------------------------------------------------------------------- */

body.streamix-skin.cf-public-app[data-page-view="profile"] .browse-main.cf-profile-main,
body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  padding-top: clamp(20px, 3.2vw, 36px) !important;
  padding-inline: clamp(10px, 3vw, 20px) !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Pleine colonne responsive (pas de bande étroite 920px forcée au centre) */
body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main > .settings-loading,
body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main > .settings-auth,
body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main > .settings-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Surface hors champs + <main> : pas de caret / halo type saisie */
body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main[data-cf-profile-root] {
  caret-color: transparent !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main[data-cf-profile-root]:focus:not(:focus-visible) {
  outline: none !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-hero,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-stats {
  caret-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-shell input,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-shell textarea,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-shell select,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-shell button,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-auth input,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-auth textarea,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-auth select,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-auth button,
body.streamix-skin.cf-public-app[data-page-view="profile"] .avatar-picker-search-input {
  -webkit-user-select: auto !important;
  user-select: auto !important;
  caret-color: auto !important;
}

/* Mobile / tablette : même layout que catalogue (pas de marge forcée qui écraserait pixel-theme) */
@media (max-width: 1023px) {
  body.streamix-skin.cf-public-app[data-page-view="profile"] #main-content.cf-profile-main,
  body.streamix-skin.cf-public-app[data-page-view="profile"] .browse-main.cf-profile-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: clamp(14px, 4.2vw, 22px) !important;
    padding-top: clamp(28px, 6.8vw, 52px) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-panel.is-active {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(22px, 3.2vw, 32px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .cf-profile-shell {
  gap: clamp(14px, 2.5vw, 22px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-main {
  min-width: 0 !important;
  gap: clamp(22px, 3vw, 32px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-card,
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-hero {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-wrap: anywhere !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] #cinflixAvatarPicker .avatar-picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr)) !important;
}

@media (max-width: 640px) {
  body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-toggle-row {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-toggle-row .settings-toggle-info {
    flex: 1 1 200px !important;
    min-width: 0 !important;
  }

  body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-session-item {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-session-info {
    flex: 1 1 200px !important;
    min-width: 0 !important;
  }
}

/* Bandeau d’onglets dans `.topbar-right` — scroll horizontal élégant (desktop / tablette) */
body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav {
  grid-column: unset !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: min(740px, 52vw, 72%) !important;
  padding-block: 2px !important;
  margin-inline-end: clamp(10px, 2vw, 18px) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav
  .nav-link {
  flex: 0 0 auto !important;
  padding: 0 12px !important;
  margin: 0 !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease !important;
}

@media (hover: hover) {
  body.streamix-skin.cf-public-app:not(.watch-page)
    .topbar-right
    nav.main-nav.cf-profile-top-nav
    .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav
  .nav-link.active {
  background: rgba(229, 9, 20, 0.18) !important;
  border-color: rgba(229, 9, 20, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(229, 9, 20, 0.15) inset !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav
  .nav-link.is-profile-danger-link:not(.active) {
  color: rgba(255, 150, 160, 0.88) !important;
}

body.streamix-skin.cf-public-app:not(.watch-page)
  .topbar-right
  nav.main-nav.cf-profile-top-nav
  .nav-link.is-profile-danger-link.active {
  background: rgba(220, 20, 40, 0.22) !important;
  border-color: rgba(255, 107, 125, 0.45) !important;
}

/* Cartes & hero profil — plus « account Netflix », mêmes teintes */
body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-hero {
  border-radius: 18px !important;
  padding: clamp(22px, 4vw, 32px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-stats {
  gap: clamp(10px, 2vw, 14px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-stat {
  border-radius: 16px !important;
  padding: clamp(14px, 2.8vw, 20px) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-card {
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-auth-panel {
  border-radius: 18px !important;
}

@media (max-width: 767px) {
  body.streamix-skin.cf-public-app:not(.watch-page)
    .mobile-nav-open
    .topbar-right
    nav.main-nav.cf-profile-top-nav {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    mask-image: none !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page)
    .mobile-nav-open
    .topbar-right
    nav.main-nav.cf-profile-top-nav
    .nav-link {
    width: auto !important;
    flex: 1 1 44% !important;
    justify-content: center !important;
  }
}

/* Sidebar gauche : sections du compte (icônes + libellés) */
body.streamix-skin.cf-public-app .cf-left-sidebar.cf-sidebar-profile-mode .cf-side-nav {
  gap: 4px !important;
}

body.streamix-skin.cf-public-app .cf-profile-side-nav-link.is-sidebar-profile-danger:not(.is-active) span:last-child {
  color: rgba(255, 160, 175, 0.95) !important;
}

body.streamix-skin.cf-public-app .cf-profile-side-nav-link.is-sidebar-profile-danger:not(.is-active) .cf-nav-svg {
  color: rgba(255, 146, 168, 0.95) !important;
}

/* Bottom navigation mobile — version compte (7 emplacements) */
body.streamix-skin.cf-public-app[data-page-view="profile"]
  .cf-bottom-nav.cf-bottom-nav-profile-shell
  .cf-bottom-link
  span:last-child {
  font-size: 7.5px !important;
  letter-spacing: -0.01em !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"]
  .cf-bottom-nav.cf-bottom-nav-profile-shell
  .cf-bottom-link[data-more-btn="profile"]
  .cf-bottom-icon svg {
  opacity: 0.95 !important;
}

.cf-more-item.is-profile-sheet-danger {
  border-color: rgba(255, 120, 140, 0.35) !important;
  background: rgba(120, 20, 32, 0.24) !important;
}

.cf-more-item.is-profile-sheet-danger span:last-child {
  color: rgba(255, 220, 225, 0.98) !important;
}

/* Relief visuel page profil (palette existante) */
body.streamix-skin.cf-public-app[data-page-view="profile"] .cf-profile-shell {
  position: relative !important;
  z-index: 0 !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .cf-profile-shell::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 85% 45% at 15% -5%, rgba(90, 141, 230, 0.11), transparent 52%),
    radial-gradient(ellipse 65% 50% at 92% 8%, rgba(229, 9, 20, 0.07), transparent 48%) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-card-title {
  letter-spacing: -0.02em !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-hero {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

body.streamix-skin.cf-public-app[data-page-view="profile"] .settings-stats .settings-stat {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ------------------------------------------------------------------------- */
/* Accessibilité : réduit les animations                                   */
/* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body.streamix-skin.cf-public-app:not(.watch-page) main {
    animation: none !important;
  }

  .cf-room-launch-overlay.is-go .cf-room-launch-count {
    animation: none !important;
  }

  .cf-notifications-root,
  .cf-notifications-dialog {
    transition: none !important;
  }

  .cf-notifications-root.is-open .cf-notifications-dialog {
    transform: none !important;
  }
}