/* ==========================================================================
   NovaStream — Finition UI (boutons arrondis, Connexion animée, menus, Premium)

   Ce fichier est chargé EN DERNIER sur toutes les pages : il ne fait
   qu'ajuster l'apparence. Aucune structure HTML ni aucun comportement
   n'est modifié par ces règles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Boutons : arrondi net et propre, partout sur le site
   -------------------------------------------------------------------------- */
.btn,
a.btn,
button.btn,
input.btn,
.nav.cinema-nav .btn,
.hero-actions .btn,
.hero-actions .hero-watchlist,
#trending-hero .hero-actions .btn,
#trending-hero .hero-actions .hero-watchlist,
.member-actions .btn,
.public-toolbar .btn,
.public-pages .btn,
.cta-band .btn,
.auth-form .btn,
.community-form .btn,
.player-gate-actions .btn,
.member-tabs a,
.icon-btn,
.admin .btn,
.admin .icon-btn,
.nav.cinema-nav .burger {
  border-radius: 999px;
}

/* Un peu plus d'air latéral : un galet a besoin de largeur. */
.btn { padding-left: 21px; padding-right: 21px; }
.btn-sm { padding-left: 15px; padding-right: 15px; }

/* Le bouton principal gagne un dégradé doux et un liseré lumineux. */
.btn-primary {
  border: 1px solid rgba(255,255,255,.15);
  background-color: #e50914;
  background-image: linear-gradient(135deg, #ff3a45 0%, #e50914 52%, #bd0810 100%);
  box-shadow: 0 6px 18px rgba(229,9,20,.22), inset 0 1px rgba(255,255,255,.2);
}
.btn-primary:hover {
  border-color: rgba(255,255,255,.22);
  background-color: #f12430;
  background-image: linear-gradient(135deg, #ff4a54 0%, #f01624 52%, #cc0a13 100%);
  box-shadow: 0 10px 26px rgba(229,9,20,.3), inset 0 1px rgba(255,255,255,.24);
}
.btn-primary:active { box-shadow: 0 3px 10px rgba(229,9,20,.28), inset 0 1px rgba(255,255,255,.18); }

/* Fiche de contenu : « Regarder » / « Voir les épisodes » en galet net. */
.nf-page .nf-cta .btn {
  border-radius: 999px;
  padding-left: 26px;
  padding-right: 26px;
  font-weight: 700;
  letter-spacing: .01em;
}
.nf-page .nf-cta > .btn-primary {
  border-color: rgba(255,255,255,.15);
  background-color: #e50914;
  background-image: linear-gradient(135deg, #ff3a45 0%, #e50914 52%, #bd0810 100%);
  box-shadow: 0 8px 24px rgba(229,9,20,.26), inset 0 1px rgba(255,255,255,.2);
}
.nf-page .nf-cta > .btn-primary:hover {
  background-color: #f12430;
  background-image: linear-gradient(135deg, #ff4a54 0%, #f01624 52%, #cc0a13 100%);
  box-shadow: 0 12px 30px rgba(229,9,20,.34), inset 0 1px rgba(255,255,255,.24);
}
.nf-page .nf-cta .member-actions .btn { border-radius: 999px; }
@media (max-width: 600px) {
  .nf-page .nf-cta .btn { padding-left: 20px; padding-right: 20px; }
}

/* Boutons secondaires : contour plus lisible + galet. */
.btn-outline,
.btn-ghost {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
}
.btn-outline:hover,
.btn-ghost:hover {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
}

/* --------------------------------------------------------------------------
   2. Bouton « Connexion » : icône, dégradé, halo respirant et reflet
   -------------------------------------------------------------------------- */
.nav.cinema-nav .nav-tools > a.btn-primary {
  position: relative;
  padding-left: 41px;
  padding-right: 20px;
  font-weight: 750;
  border: 1px solid rgba(255,255,255,.16);
  background-color: #e50914;
  background-image: linear-gradient(135deg, #ff414c 0%, #e50914 55%, #b5070f 100%);
  box-shadow: 0 6px 18px rgba(229,9,20,.26), inset 0 1px rgba(255,255,255,.22);
  animation: ns-login-halo 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
/* Icône utilisateur dessinée en CSS : aucun HTML à modifier.
   Le centrage se fait par top:50% + translateY(-50%) : l'icône est
   parfaitement alignée sur le texte, quelle que soit la hauteur du bouton. */
.nav.cinema-nav .nav-tools > a.btn-primary::before {
  content: "";
  display: block;
  position: absolute;
  inset: auto auto auto 15px;
  top: 50%;
  left: 15px;
  width: 17px;
  height: 17px;
  margin: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7.4' r='3.9'/><path d='M20 20.6v-1.9a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v1.9'/></svg>") center/contain no-repeat;
  opacity: .96;
  transform: translateY(-50%);
}
/* Reflet qui balaie le bouton pour attirer l'œil. */
.nav.cinema-nav .nav-tools > a.btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-180%) rotate(14deg);
  animation: ns-login-shine 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ns-login-halo {
  0%   { box-shadow: 0 6px 18px rgba(229,9,20,.26), 0 0 0 0 rgba(229,9,20,.42), inset 0 1px rgba(255,255,255,.22); }
  65%  { box-shadow: 0 6px 18px rgba(229,9,20,.26), 0 0 0 11px rgba(229,9,20,0), inset 0 1px rgba(255,255,255,.22); }
  100% { box-shadow: 0 6px 18px rgba(229,9,20,.26), 0 0 0 0 rgba(229,9,20,0), inset 0 1px rgba(255,255,255,.22); }
}
@keyframes ns-login-shine {
  0%, 55%   { transform: translateX(-180%) rotate(14deg); }
  85%, 100% { transform: translateX(420%) rotate(14deg); }
}
.nav.cinema-nav .nav-tools > a.btn-primary:hover {
  background-image: linear-gradient(135deg, #ff525c 0%, #f01624 55%, #c80810 100%);
  box-shadow: 0 12px 30px rgba(229,9,20,.34), 0 0 0 3px rgba(229,9,20,.14), inset 0 1px rgba(255,255,255,.26);
  transform: translateY(-1px);
}
.nav.cinema-nav .nav-tools > a.btn-primary:hover::before { opacity: 1; }

/* Liens du menu principal : galet cohérent avec le reste des boutons. */
.nav.cinema-nav .nav-links a { border-radius: 999px; }
.nav.cinema-nav .nav-links a.is-active {
  box-shadow: 0 4px 14px rgba(240,22,36,.22), inset 0 1px rgba(255,255,255,.06);
}

/* --------------------------------------------------------------------------
   3. Menu du compte : ouverture animée + entrées en cascade
   -------------------------------------------------------------------------- */
.account-menu summary {
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  transition: background-color .2s ease, transform .2s ease;
}
.account-menu summary:hover,
.account-menu[open] summary {
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.account-menu summary:focus-visible { outline: 2px solid rgba(255,255,255,.35); outline-offset: 3px; }

.account-menu[open] .account-dropdown {
  transform-origin: top right;
  animation: ns-menu-in .26s cubic-bezier(.2,.75,.3,1) both;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #191b21, #12141a);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
}
@keyframes ns-menu-in {
  from { opacity: 0; transform: translateY(-9px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.account-menu[open] .account-dropdown > * { animation: ns-menu-item .34s cubic-bezier(.2,.75,.3,1) both; }
.account-menu[open] .account-dropdown > *:nth-child(1) { animation-delay: .03s; }
.account-menu[open] .account-dropdown > *:nth-child(2) { animation-delay: .06s; }
.account-menu[open] .account-dropdown > *:nth-child(3) { animation-delay: .09s; }
.account-menu[open] .account-dropdown > *:nth-child(4) { animation-delay: .12s; }
.account-menu[open] .account-dropdown > *:nth-child(5) { animation-delay: .15s; }
.account-menu[open] .account-dropdown > *:nth-child(6) { animation-delay: .18s; }
@keyframes ns-menu-item {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-dropdown a,
.account-dropdown button {
  border-radius: 11px;
  border-top: 0;
  padding: 11px 12px;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.account-dropdown a:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}
.account-dropdown button:hover { background: rgba(229,9,20,.12); }
.account-dropdown > div { display: grid; }

/* --- Alignement et finition : mêmes colonnes pour tous les entrées ------ */
.account-menu[open] .account-dropdown {
  width: 250px;
  gap: 2px;
  padding: 14px 14px 13px;
}
.account-menu[open] .account-dropdown > small {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 0;
  color: #8f8d98;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
}
.account-menu[open] .account-dropdown > small::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ember, #e50914);
  box-shadow: 0 0 8px rgba(229,9,20,.45);
}
.account-menu[open] .account-dropdown > strong {
  margin: 2px 0 9px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #f4f2f7;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.account-dropdown a,
.account-dropdown button {
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px;
  align-items: center;
  column-gap: 10px;
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  color: #cfccd6;
  font-size: 12.5px;
  font-weight: 500;
}
/* Les deux premières entrées sont injectées dans un conteneur : même
   gouttière que les autres lignes pour rester parfaitement alignées. */
.account-dropdown [data-member-nav] {
  gap: 2px;
}
.account-dropdown [data-member-nav] a {
  padding: 9px 12px;
}
.account-dropdown a > span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 18px;
  height: 18px;
  color: #7d7b86;
  transition: color .16s ease, transform .16s ease;
}
.account-dropdown a > span svg { width: 100%; height: 100%; }
.account-dropdown a:hover,
.account-dropdown a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: none;
}
.account-dropdown a:hover > span,
.account-dropdown a:focus-visible > span {
  color: #fff;
  transform: translate(1px,-1px);
}
.account-dropdown > button {
  grid-template-columns: minmax(0,1fr);
  margin-top: 7px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #ff8f88;
  font-weight: 500;
}
.account-dropdown > button:hover,
.account-dropdown > button:focus-visible { color: #fff; }
.account-dropdown .premium-badge {
  margin: -1px 0 7px;
  padding: 7px 9px;
  border: 1px solid rgba(227,172,47,.3);
  border-radius: 10px;
  background: rgba(227,172,47,.09);
  color: #f0d083;
  font-size: 10.5px;
  font-weight: 600;
}

/* Le résumé garde une pilule nette, avec avatar cerclé au survol. */
.account-menu summary > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  color: #9a98a3;
}
.account-menu summary > span:last-child svg { width: 14px; height: 14px; }
.account-menu summary:hover .account-avatar,
.account-menu[open] .account-avatar {
  box-shadow: 0 0 0 2px rgba(229,9,20,.32);
}

/* --------------------------------------------------------------------------
   4. Menu principal (burger) : tiroir arrondi qui glisse, entrées en cascade
   -------------------------------------------------------------------------- */
/* Entrées réservées au tiroir mobile : jamais visibles dans la barre desktop. */
/* Entrées réservées au tiroir mobile : jamais visibles dans la barre desktop. */
.nav.cinema-nav .nav-links > a.drawer-admin,
.nav.cinema-nav .nav-links > .drawer-label,
.nav.cinema-nav .nav-links > .drawer-user,
.nav.cinema-nav .nav-links > .drawer-login,
.nav.cinema-nav .nav-links > .drawer-logout,
.nav.cinema-nav .nav-links > a .drawer-ico { display: none; }

@media (max-width: 1100px) {
  /* Le flou de la barre passe sur un pseudo-element. Un backdrop-filter sur la
     barre elle-meme cree un bloc conteneur : le tiroir fixed se calait alors
     sur la barre (decalage de 10 px) au lieu du bord de l'ecran. */
  .nav.cinema-nav,
  .nav.cinema-nav.scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav.cinema-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    transition: opacity .2s ease;
  }

  /* Fondu doux des elements de barre quand le tiroir s'ouvre ou se referme. */
  .nav.cinema-nav > .brand,
  .nav.cinema-nav > .nav-tools {
    transition: opacity .2s ease;
  }

  /* Tiroir ouvert : la barre s'efface, seuls le voile et le panneau restent. */
  body.nav-open .nav.cinema-nav,
  body.nav-open .nav.cinema-nav.scrolled {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  body.nav-open .nav.cinema-nav::before { opacity: 0; }
  body.nav-open .nav.cinema-nav > :not(.nav-links) {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  /* Le panneau reste cliquable malgre la barre neutralisee. */
  body.nav-open .nav.cinema-nav .nav-links { pointer-events: auto; }

  /* Le panneau : colle au bord gauche, pleine hauteur, coins arrondis a droite. */
  .nav.cinema-nav .nav-links {
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: min(86vw, 340px);
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(255,255,255,.1);
    border-left: 0;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(180deg, #15161b 0%, #0b0b0e 64%);
    box-shadow: 18px 0 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05);
    transform: translateX(calc(-100% - 30px));
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.8,.28,1), visibility .34s ease;
  }
  .nav.cinema-nav .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    animation: none;
  }
  .nav.cinema-nav .nav-links.is-open > * { animation: ns-menu-item .32s cubic-bezier(.2,.75,.3,1) both; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(1) { animation-delay: .04s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(2) { animation-delay: .07s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(3) { animation-delay: .1s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(4) { animation-delay: .13s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(5) { animation-delay: .16s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(6) { animation-delay: .19s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(7) { animation-delay: .22s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(8) { animation-delay: .25s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(9) { animation-delay: .28s; }
  .nav.cinema-nav .nav-links.is-open > *:nth-child(10) { animation-delay: .31s; }

  /* Les liens : gros galets lisibles, état actif rouge discret. */
  .nav.cinema-nav .nav-links > a {
    border-radius: 12px;
    padding: 12px 13px;
    font-weight: 600;
    color: #cfcdd6;
  }
  .nav.cinema-nav .nav-links > a:hover { background: rgba(255,255,255,.05); color: #fff; }
  .nav.cinema-nav .nav-links > a.is-active {
    background: linear-gradient(90deg, rgba(229,9,20,.16), rgba(229,9,20,.03));
    color: #fff;
    box-shadow: inset 3px 0 #e50914;
  }
  .nav.cinema-nav .nav-links .nav-search-wrap { margin: 0 0 8px; }
  .nav.cinema-nav .drawer-head { margin-bottom: 12px; }

  /* Bouton Telegram : carte deux lignes, posée en bas du tiroir. */
  .nav.cinema-nav .nav-links > a.drawer-telegram {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding: 12px 13px;
    border: 1px solid rgba(41,171,226,.3);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(41,171,226,.15), rgba(41,171,226,.04));
    color: #d9efff;
    font-size: 13px;
    font-weight: 700;
  }
  .nav.cinema-nav .nav-links > a.drawer-telegram:hover {
    background: linear-gradient(120deg, rgba(41,171,226,.24), rgba(41,171,226,.09));
    color: #fff;
    transform: none;
  }
  .nav.cinema-nav .nav-links > a.drawer-telegram .dt-logo { width: 20px; height: 20px; flex: none; color: #29abe2; }
  .nav.cinema-nav .nav-links > a.drawer-telegram .dt-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .nav.cinema-nav .nav-links > a.drawer-telegram .dt-body strong { font-size: 13px; font-weight: 700; }
  .nav.cinema-nav .nav-links > a.drawer-telegram .dt-body small { color: #7fb6d6; font-size: 10px; font-weight: 600; letter-spacing: .01em; }
  .nav.cinema-nav .nav-links > a.drawer-telegram > .ns-ico { width: 14px; height: 14px; flex: none; color: #7fb6d6; opacity: .8; }

  /* Entrée Administration (équipe uniquement). */
  .nav.cinema-nav .nav-links > a.drawer-admin {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding: 12px 13px;
    border: 1px solid rgba(229,9,20,.34);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(229,9,20,.17), rgba(229,9,20,.04));
    color: #ffd0d3;
    font-size: 13px;
    font-weight: 700;
  }
  .nav.cinema-nav .nav-links > a.drawer-admin[hidden] { display: none; }
  .nav.cinema-nav .nav-links > a.drawer-admin:hover {
    background: linear-gradient(120deg, rgba(229,9,20,.26), rgba(229,9,20,.1));
    color: #fff;
    transform: none;
  }
  .nav.cinema-nav .nav-links > a.drawer-admin .ns-ico { width: 19px; height: 19px; flex: none; color: #ff5b64; }
  .nav.cinema-nav .nav-links > a.drawer-admin > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .nav.cinema-nav .nav-links > a.drawer-admin > span small { color: #cf8e92; font-size: 10px; font-weight: 600; }

  /* Telegram juste sous l'entrée Administration quand elle est visible. */
  .nav.cinema-nav .nav-links:has(> a.drawer-admin:not([hidden])) > a.drawer-telegram { margin-top: 8px; }

  .nav.cinema-nav .burger { color: #fff; }
}
@media (max-width: 420px) {
  .nav.cinema-nav .nav-links {
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: min(90vw, 340px);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0 20px 20px 0;
  }
}

/* Le burger offert à tous les écrans : rond, réactif. */
.nav.cinema-nav .burger {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav.cinema-nav .burger:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.09);
}
.nav.cinema-nav .burger:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   5. Écran de connexion : carte lumineuse, onglets galets, champs animés
   -------------------------------------------------------------------------- */
/* Halos d'ambiance qui dérivent lentement en arrière-plan. */
.auth-wrap::before,
.auth-wrap::after { animation: ns-aurora 17s ease-in-out infinite alternate; }
.auth-wrap::after { animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes ns-aurora {
  from { transform: translate3d(0,0,0) scale(1); opacity: .75; }
  to   { transform: translate3d(4%,5%,0) scale(1.16); opacity: 1; }
}

/* La carte : plus profonde, liseré lumineux, entrée en douceur. */
.auth-card {
  border-radius: 22px;
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(25,25,31,.95), rgba(12,12,16,.97));
  box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset, 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(14px);
  animation: ns-rise .55s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes ns-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Halo chaud en haut de la carte. */
.auth-card::after {
  content: "";
  position: absolute;
  top: -130px;
  left: 50%;
  width: 360px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(240,22,36,.2), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
/* La fine ligne du haut balaie la carte comme un scan. */
.auth-card::before {
  inset: 0 12% auto;
  height: 2px;
  background-image: linear-gradient(90deg, transparent, rgba(255,72,86,.9), transparent);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ns-scan 6s ease-in-out infinite;
}
@keyframes ns-scan {
  0%, 100% { background-position: -70% 0; }
  50%      { background-position: 170% 0; }
}
/* Le contenu passe au-dessus du halo. */
.auth-card > * { position: relative; z-index: 1; }

/* Arrivée en cascade : titre, onglets, champs, bouton. */
.auth-card > * { animation: ns-auth-in .55s cubic-bezier(.2,.75,.3,1) both; }
.auth-card > *:nth-child(1) { animation-delay: .05s; }
.auth-card > *:nth-child(2) { animation-delay: .1s; }
.auth-card > *:nth-child(3) { animation-delay: .15s; }
.auth-card > *:nth-child(4) { animation-delay: .2s; }
.auth-card > *:nth-child(5) { animation-delay: .25s; }
.auth-card > *:nth-child(6) { animation-delay: .28s; }
.auth-card > *:nth-child(7) { animation-delay: .31s; }
@keyframes ns-auth-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Onglets « Connexion / Inscription » : contrôle segmenté en galets. */
.auth-tabs {
  gap: 6px;
  border-radius: 999px;
  padding: 5px;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.075);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.32);
}
.auth-tab {
  border-radius: 999px;
  padding: 11px 9px;
  letter-spacing: .01em;
  transition: color .2s ease, background-color .22s ease, box-shadow .25s ease, transform .2s ease;
}
.auth-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.auth-tab.is-active {
  background-color: #e50914;
  background-image: linear-gradient(135deg, #ff3a45, #e50914 55%, #bd0810);
  box-shadow: 0 8px 20px rgba(229,9,20,.32), inset 0 1px rgba(255,255,255,.22);
  animation: ns-tab-pop .4s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes ns-tab-pop {
  from { transform: scale(.93); }
  to   { transform: scale(1); }
}

/* Champs : sombres, arrondis, icône intégrée, mise au point lumineuse. */
.auth-form .field label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8f8d99;
}
.auth-form .field input {
  min-height: 52px;
  padding: 0 16px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.1);
  background-color: rgba(255,255,255,.035);
  color: #f5f5f6;
  font: 500 .92rem Inter, sans-serif;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.auth-form .field input::placeholder { color: #6d6c78; }
.auth-form .field input:hover { border-color: rgba(255,255,255,.18); }
.auth-form .field input:focus {
  border-color: rgba(240,22,36,.75);
  background-color: rgba(255,255,255,.055);
  box-shadow: 0 0 0 4px rgba(240,22,36,.14), 0 8px 22px rgba(0,0,0,.35);
}
.auth-form .field input[type="email"],
.auth-form .field input[type="password"] {
  padding-left: 47px;
  background-repeat: no-repeat;
  background-position: 17px center;
  background-size: 17px 17px;
}
.auth-form .field input[type="email"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918f9b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='4.8' width='18.8' height='14.4' rx='3'/><path d='M3.4 7.6l8.6 5.6 8.6-5.6'/></svg>");
}
.auth-form .field input[type="password"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918f9b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4.4' y='10.2' width='15.2' height='9.8' rx='2.6'/><path d='M7.9 10.2V7.9a4.1 4.1 0 018.2 0v2.3'/></svg>");
}

/* Bouton principal : grand galet et reflet qui traverse au survol. */
.auth-form .btn.btn-primary {
  position: relative;
  min-height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background-color: #e50914;
  background-image: linear-gradient(135deg, #ff3a45, #e50914 55%, #bd0810);
  box-shadow: 0 12px 28px rgba(229,9,20,.3), inset 0 1px rgba(255,255,255,.22);
  font-size: .95rem;
  font-weight: 700;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, background-image .25s ease;
}
.auth-form .btn.btn-primary::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-160%) rotate(14deg);
  transition: transform .65s cubic-bezier(.3,.7,.3,1);
  pointer-events: none;
}
.auth-form .btn.btn-primary:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(135deg, #ff4a54, #f01624 55%, #cc0a13);
  box-shadow: 0 18px 38px rgba(229,9,20,.4), inset 0 1px rgba(255,255,255,.26);
}
.auth-form .btn.btn-primary:hover::after { transform: translateX(420%) rotate(14deg); }
.auth-form .btn.btn-primary:active { transform: translateY(0) scale(.995); }

/* Message d'erreur : pastille discrète qui attire l'œil d'une secousse. */
.auth-error {
  display: none;
  margin: 0;
  padding: 11px 14px;
  border-radius: 13px;
  border: 1px solid rgba(240,22,36,.3);
  background: rgba(240,22,36,.12);
  color: #ff8b93;
  font-size: .82rem;
  line-height: 1.5;
}
.auth-error:not(:empty) {
  display: block;
  animation: ns-shake .42s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes ns-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* Lien de bas de carte : soulignement qui se dessine. */
.auth-note { margin-top: 24px; font-size: .82rem; }
.auth-note a {
  position: relative;
  color: #f04450;
  transition: color .2s ease;
}
.auth-note a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s ease;
}
.auth-note a:hover { color: #ff7c85; text-decoration: none; }
.auth-note a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 520px) {
  .auth-card { border-radius: 20px; }
  .auth-form .field input { min-height: 50px; }
  .auth-form .btn.btn-primary { min-height: 52px; }
  .auth-tab { padding: 10px 6px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   6. Insignes Premium
   -------------------------------------------------------------------------- */
.premium-badge,
.member-account-status.is-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, #f9dd8c 0%, #e3ac2f 55%, #c98f18 100%);
  color: #2b1d02;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 5px 16px rgba(227,172,47,.26), inset 0 1px rgba(255,255,255,.5);
  white-space: nowrap;
}
.member-account-status.is-premium::before { background: currentColor; box-shadow: 0 0 9px currentColor; }
.pill.premium {
  background: linear-gradient(120deg, rgba(249,221,140,.22), rgba(227,172,47,.16));
  color: #f0c65a;
  border: 1px solid rgba(227,172,47,.3);
}
.premium-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.premium-toggle:hover { border-color: rgba(227,172,47,.4); background: rgba(227,172,47,.06); }
.premium-toggle input { accent-color: #e3ac2f; }
.premium-toggle span { font-size: .86rem; }
.premium-toggle small { display: block; color: var(--text-muted); font-size: .72rem; margin-top: 2px; }

/* Bouton d'activation rapide dans la liste des utilisateurs. */
.premium-quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text-muted, #a3a5ad);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}
.premium-quick:hover { color: #fff; border-color: rgba(227,172,47,.45); background: rgba(227,172,47,.1); }
.premium-quick.is-on {
  color: #f4cf6d;
  border-color: rgba(227,172,47,.45);
  background: rgba(227,172,47,.13);
}

/* --------------------------------------------------------------------------
   7. Accessibilité : on coupe les animations si l'utilisateur le demande
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav.cinema-nav .nav-links,
  .nav-scrim {
    transition: none;
  }
  .nav.cinema-nav .nav-tools > a.btn-primary,
  .nav.cinema-nav .nav-tools > a.btn-primary::after,
  .account-menu[open] .account-dropdown,
  .account-menu[open] .account-dropdown > *,
  .nav.cinema-nav .nav-links.is-open,
  .nav.cinema-nav .nav-links.is-open > *,
  .auth-wrap::before,
  .auth-wrap::after,
  .auth-card,
  .auth-card::before,
  .auth-card::after,
  .auth-card > *,
  .auth-tab.is-active {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. Téléphone : on garde le galet compact et lisible
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .btn { padding-left: 17px; padding-right: 17px; }
  .nav.cinema-nav .nav-tools > a.btn-primary {
    padding-left: 36px;
    padding-right: 15px;
    font-size: 12px;
  }
  .nav.cinema-nav .nav-tools > a.btn-primary::before {
    left: 12px;
    width: 16px;
    height: 16px;
  }
  .account-menu summary { padding: 3px 8px 3px 3px; }
  .account-menu[open] .account-dropdown { border-radius: 15px; }
}

/* --------------------------------------------------------------------------
   9. Icônes inline (SVG) — même teinte que le texte, taille relative
   -------------------------------------------------------------------------- */
.ns-ico {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -.16em;
  pointer-events: none;
}
button .ns-ico, a .ns-ico, .btn .ns-ico { vertical-align: -.14em; }
.pill .ns-ico, .tag .ns-ico, .card-info .ns-ico, .hero-meta .ns-ico { vertical-align: -.12em; }

/* --------------------------------------------------------------------------
   10. Bouton « œil » : afficher / masquer un mot de passe
   -------------------------------------------------------------------------- */
.field.pw-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 7px;
}
.pw-field > label { grid-row: 1; grid-column: 1; }
.pw-field > input { grid-row: 2; grid-column: 1; }
/* Le bouton partage la cellule du champ : centrage vertical parfait,
   bord droit du cadre, jamais au-dessus du texte grâce à la réserve. */
.pw-field > .pw-toggle {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  margin-right: 6px;
}
.pw-field > input,
.pw-field input[type="password"],
.pw-field input[type="text"] { padding-right: 56px; }
/* L'œil natif d'Edge ne doit pas se superposer au nôtre. */
.pw-field input::-ms-reveal,
.pw-field input::-ms-clear { display: none; }
.pw-toggle {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8d8d8d;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.pw-toggle .pw-eye,
.pw-toggle .pw-eye-off {
  position: absolute;
  display: grid;
  place-items: center;
  transition: opacity .16s ease, transform .16s ease;
}
.pw-toggle .pw-eye-off { opacity: 0; transform: scale(.7); }
.pw-toggle.is-visible .pw-eye { opacity: 0; transform: scale(.7); }
.pw-toggle.is-visible .pw-eye-off { opacity: 1; transform: scale(1); }
.pw-toggle .ns-ico { width: 18px; height: 18px; vertical-align: 0; }.pw-toggle .ns-ico { width: 17px; height: 17px; vertical-align: 0; }

/* --------------------------------------------------------------------------
   11. Ligne « Retrouver ma lecture » : défilement premium sans barre visible
   -------------------------------------------------------------------------- */
.member-continue-grid {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 4px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.member-continue-grid::-webkit-scrollbar { display: none; }
.member-continue-grid .member-tile { scroll-snap-align: start; }
.member-continue .row-head { margin-bottom: 14px; }
.member-continue .row-nav { top: 0; bottom: 15px; }
.member-continue .row-nav.prev { left: 0; }

/* --------------------------------------------------------------------------
   12. Lecteur vidéo & porte publicitaire — la salle de cinéma
   -------------------------------------------------------------------------- */

/* ----- Cadre du lecteur ------------------------------------------------ */
.player-modal {
  background: rgba(4,4,6,.86);
  backdrop-filter: blur(9px);
  animation: nsFadeIn .22s ease both;
}
@keyframes nsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.player-box {
  width: min(100%, 1060px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #0d0d10;
  box-shadow: 0 45px 110px rgba(0,0,0,.78);
  animation: nsBoxIn .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes nsBoxIn {
  from { opacity: 0; transform: translateY(20px) scale(.975); }
  to { opacity: 1; transform: none; }
}

.player-head {
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #151519, #0e0e11);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.player-head-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.player-head-kicker { color: #ff5b64; font-size: 9.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.player-head-copy > strong { font-size: 15px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-head-tools { display: flex; align-items: center; gap: 8px; }
.player-head-tools .btn { display: inline-flex; align-items: center; gap: 7px; }
.player-head-tools .ns-ico { width: 14px; height: 14px; vertical-align: 0; }
#btn-close-player {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  color: #d7d7db;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .25s ease;
}
#btn-close-player:hover { background: #e50914; border-color: #e50914; color: #fff; transform: rotate(90deg); }

/* ----- Rangée « Ma watchlist / Favoris » ------------------------------- */
#player-member-actions {
  display: flex;
  padding: 11px 18px;
  background: #0b0b0e;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#player-member-actions .member-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
#player-member-actions .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; }
#player-member-actions .ns-ico { width: 15px; height: 15px; vertical-align: 0; }

/* ----- Scène : écran noir profond + halo discret ----------------------- */
.player-stage { background: radial-gradient(ellipse at 50% 12%, #16161c, #040405 72%); }
.player-feedback {
  gap: 16px;
  background: rgba(5,5,7,.86);
  backdrop-filter: blur(3px);
  color: #e8e8ec;
  font-size: 13.5px;
  letter-spacing: .01em;
}
.player-feedback > span { width: 30px; height: 30px; border-width: 2.5px; border-color: rgba(255,255,255,.16); border-top-color: #ff3a45; }
.player-feedback > strong { font-size: 17px; font-weight: 750; }

/* ----- Porte publicitaire --------------------------------------------- */
.player-gate { padding: 22px; background: rgba(3,3,4,.78); backdrop-filter: blur(12px); }
/* Voile chaud posé sur l'affiche floutée, sous la carte (z-index 0). */
.player-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 60% at 50% -8%, rgba(229,9,20,.3), rgba(229,9,20,0) 64%),
    radial-gradient(120% 100% at 50% 52%, rgba(0,0,0,0) 26%, rgba(3,3,4,.78) 100%);
}
.player-gate-bg { filter: blur(26px) brightness(.3) saturate(1.05); }
/* ----- Porte publicitaire : forme compacte (icône + pastille + consignes + bouton) -----
   Couleurs posées en dur : cette couche sert toutes les pages du site,
   sans dépendre des jetons Zenix de la fiche.                                       ----- */
.player-gate-card {
  width: min(100%, 330px);
  padding: 24px 22px 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(29,30,36,.98), rgba(13,13,16,.99) 70%, rgba(9,9,11,.99));
  box-shadow: 0 35px 80px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.05);
  text-align: center;
  animation: nsGateIn .4s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes nsGateIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Icône : écran + lecture, signée rouge. */
.gate-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border: 1px solid rgba(229,9,20,.3);
  border-radius: 15px;
  background: rgba(229,9,20,.09);
  color: #e50914;
}
.gate-ico svg { width: 28px; height: 28px; }

/* Pastille « Pub 1/3 » : c'est l'élément #gate-progress, mis à jour par le script. */
.gate-badge {
  display: inline-block;
  margin: 12px auto 0;
  padding: 3px 12px;
  border: 1px solid rgba(229,9,20,.45);
  border-radius: 999px;
  background: rgba(229,9,20,.08);
  color: #ff97a0;
  font-size: 10.5px;
  font-weight: 800;
}

.player-gate-card h3 { margin: 12px 0 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }

/* Les trois consignes, numérotées. */
.gate-how {
  counter-reset: ns-how;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gate-how li {
  position: relative;
  padding-left: 17px;
  color: #b7bcc6;
  font-size: 11.8px;
  line-height: 1.5;
}
.gate-how li::before {
  content: counter(ns-how) ".";
  counter-increment: ns-how;
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #7a7e88;
}
.gate-how strong { color: #fff; font-weight: 700; }

.player-gate-actions { display: flex; flex-direction: column; gap: 9px; margin: 17px 0 0; }
.player-gate-actions .btn { width: 100%; min-height: 44px; justify-content: center; border-radius: 12px; font-size: 13px; font-weight: 750; }
#btn-gate-open {
  border: 1px solid rgba(255,255,255,.14);
  background-image: linear-gradient(135deg,#ff3a45,#e50914 52%,#bd0810);
  box-shadow: 0 14px 32px rgba(229,9,20,.3), inset 0 1px rgba(255,255,255,.22);
}
#btn-gate-open:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
/* Un seul gros bouton : « Lancer la lecture » n'apparaît qu'une fois les
   publicités terminées (état .is-ready), alors en bouton rouge principal. */
#btn-gate-play { display: none; border: 0; background: none; }
#btn-gate-play.is-ready {
  display: inline-flex;
  border-color: rgba(255,255,255,.14);
  background-image: linear-gradient(135deg,#ff3a45,#e50914 52%,#bd0810);
  color: #fff;
  box-shadow: 0 14px 32px rgba(229,9,20,.3), inset 0 1px rgba(255,255,255,.22);
  animation: nsReadyPulse 2s ease-in-out infinite;
}
#btn-gate-play.is-ready:hover { transform: translateY(-1px); }
#btn-gate-play:disabled { animation: none; }
@keyframes nsReadyPulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(229,9,20,.28); }
  50% { box-shadow: 0 16px 40px rgba(229,9,20,.5); }
}
.player-gate-direct {
  padding: 9px 12px;
  border: 1px dashed rgba(229,9,20,.42);
  border-radius: 999px;
  background: rgba(229,9,20,.06);
  color: #ff97a0 !important;
  font-size: 11.5px;
  text-decoration: none;
}
.player-gate-direct:hover { background: rgba(229,9,20,.14); }
/* Message affiché uniquement le jour où le navigateur bloque la fenêtre. */
#gate-blocked { margin: 13px 0 0; color: #ffb1b7; font-size: 11px; line-height: 1.55; }

/* ----- Téléphone : plein cadre, commandes compactes -------------------- */
@media (max-width: 720px) {
  .player-modal { padding: 0; }
  .player-box { border-radius: 0; border-left: 0; border-right: 0; }
  .player-head { padding: 10px 12px; gap: 10px; }
  .player-head-kicker { display: none; }
  .player-head-copy > strong { font-size: 13px; max-width: 46vw; }
  .player-head-tools { gap: 6px; }
  .player-head-tools .btn { padding: 8px 9px; min-height: 34px; }
  .player-head-tools .btn-label { display: none; }
  .player-head-tools .ns-ico { width: 15px; height: 15px; }
  #btn-close-player { width: 34px; height: 34px; font-size: 19px; }
  #player-member-actions { padding: 10px 12px; }
  #player-member-actions .btn { min-height: 34px; padding: 0 13px; font-size: 11.5px; }
  .player-gate { align-items: flex-start; overflow: auto; padding: 14px; }
  /* Centrage sûr : la carte défile si elle dépasse, jamais rognée par le bas. */
  .player-gate-card { margin: auto; max-height: none; padding: 20px 16px 16px; border-radius: 14px; }
  .player-gate-actions .btn { min-height: 45px; }
}
@media (max-width: 400px) {
  .player-head-copy > strong { max-width: 40vw; }
}

/* --------------------------------------------------------------------------
   13. Administration : vue « Direct », bandeau live et finitions
   -------------------------------------------------------------------------- */

/* ----- Le point « en direct » ------------------------------------------ */
.live-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3140;
  box-shadow: 0 0 0 4px rgba(229,9,20,.16);
  animation: nsLivePulse 1.9s ease-in-out infinite;
}
@keyframes nsLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.nav-live-dot {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: #ff3140;
  animation: nsLivePulse 1.9s ease-in-out infinite;
}
.admin-nav a[data-view="live"].is-active .nav-live-dot { background: #fff; }

/* ----- Bandeau « en direct » du tableau de bord ------------------------ */
.studio-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(229,9,20,.1), rgba(19,19,22,.94) 44%);
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
}
.studio-live-status { display: flex; align-items: center; gap: 11px; }
.studio-live-status strong { display: block; font-size: 13.5px; font-weight: 750; }
.studio-live-status div > span { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.studio-live-metrics { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-right: auto; }
.studio-live-metric { display: flex; flex-direction: column; gap: 2px; }
.studio-live-metric strong { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.studio-live-metric small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* ----- En-tête de la vue Direct ---------------------------------------- */
.live-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(229,9,20,.11), rgba(18,18,21,.95) 42%);
  box-shadow: 0 16px 36px rgba(0,0,0,.3);
}
.live-hero-status { display: flex; align-items: center; gap: 12px; }
.live-hero-status strong { display: block; font-size: 14px; font-weight: 750; }
.live-hero-status div > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.live-hero-actions { display: flex; align-items: center; gap: 12px; }
.live-refresh-note { font-size: 11px; color: var(--text-muted); }

/* ----- Cartes de chiffres ---------------------------------------------- */
.live-grid { margin-bottom: 18px; }
.live-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, #141418, #0f0f12);
  transition: transform .2s ease, border-color .2s ease;
}
.live-card:hover { transform: translateY(-2px); border-color: rgba(229,9,20,.28); }
.live-card h3 { font-variant-numeric: tabular-nums; }
.live-card.is-main {
  border-color: rgba(229,9,20,.34);
  background: linear-gradient(160deg, rgba(229,9,20,.15), rgba(16,16,19,.97) 58%);
  box-shadow: 0 20px 44px rgba(0,0,0,.38);
}

/* ----- Courbe d'affluence ---------------------------------------------- */
.live-chart-panel { margin-bottom: 18px; border-radius: 16px; }
.live-chart-body { padding: 12px 14px 6px; }
.live-chart-body canvas { display: block; width: 100%; cursor: crosshair; }
.live-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted); }
.live-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.live-legend .lg::before { content: ""; width: 16px; height: 3px; border-radius: 3px; background: currentColor; }
.lg-online { color: #ff3a45; }
.lg-members { color: #4fd18b; }
.lg-guests { color: #9a97a6; }
.live-empty { margin: 0; padding: 30px 0 36px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ----- Deux colonnes : lectures en cours / pages consultées ------------ */
.live-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.live-cols .panel { border-radius: 16px; }
.live-count {
  min-width: 30px;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.live-list { list-style: none; margin: 0; padding: 6px 4px; }
.live-item,
.live-page-item { display: flex; gap: 12px; padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.live-list > :last-child { border-bottom: 0; }
.live-item-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(229,9,20,.13);
  color: #ff5b64;
}
.live-item-icon .ns-ico { width: 15px; height: 15px; vertical-align: 0; }
.live-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.live-item-body strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-item-body span { font-size: 11.5px; color: var(--text-muted); }
.live-item-pulse {
  align-self: center;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: #4fd18b;
  box-shadow: 0 0 0 4px rgba(79,209,139,.14);
  animation: nsLivePulse 2.2s ease-in-out infinite;
}
.live-page-item { flex-direction: column; gap: 7px; }
.live-page-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.live-page-head strong { font-weight: 700; }
.live-page-head span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.live-page-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.live-page-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff3a45, #bd0810); transition: width .35s ease; }
.live-empty-item { padding: 26px 6px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ----- Finitions générales du panneau (sans toucher aux données) ------- */
.admin .panel { border-radius: 16px; border-color: rgba(255,255,255,.07); box-shadow: 0 18px 44px rgba(0,0,0,.32); }
.admin .panel-head h3 { letter-spacing: -.01em; }
.admin table tbody tr { transition: background .18s ease; }
.admin table tbody tr:hover { background: rgba(255,255,255,.03); }
.admin .stat-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .2s ease, border-color .2s ease;
}
.admin .stat-card:hover { transform: translateY(-2px); border-color: rgba(229,9,20,.24); }
.admin-nav a { border-radius: 10px; }
.admin-nav a.is-active { background: linear-gradient(90deg, rgba(229,9,20,.16), rgba(229,9,20,.03)); }

@media (max-width: 880px) {
  .live-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .live-hero { padding: 14px 16px; }
  .live-hero-actions .live-refresh-note { display: none; }
  .live-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .live-card.is-main { grid-column: 1 / -1; }
  .studio-live { padding: 14px 15px; gap: 12px; }
  .studio-live-metrics { gap: 8px 20px; }
  .studio-live-metric strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .nav-live-dot,
  .live-item-pulse { animation: none !important; }
  .live-card,
  .live-page-bar i { transition: none; }
  .player-modal,
  .player-box,
  .player-gate-card,
  #btn-gate-play.is-ready { animation: none !important; }
  #btn-close-player { transition: none; }
}

/* --------------------------------------------------------------------------
   14. Tiroir mobile — repères, icônes et carte utilisateur
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav.cinema-nav .nav-links {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .nav.cinema-nav .nav-links::-webkit-scrollbar { display: none; }

  /* Ordre visuel : en-tête, recherche, titre Navigation, puis les pages. */
  .nav.cinema-nav .nav-links > .drawer-head { order: -3; }
  .nav.cinema-nav .nav-links > .nav-search-wrap { order: -2; }
  .nav.cinema-nav .nav-links > .drawer-label:not(.drawer-user-label) { order: -1; }

  .nav.cinema-nav .nav-links > a { display: flex; align-items: center; gap: 12px; }
  .nav.cinema-nav .nav-links > a .drawer-ico {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: #b7b5c0;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .nav.cinema-nav .nav-links > a .drawer-ico .ns-ico { width: 17px; height: 17px; vertical-align: 0; }
  .nav.cinema-nav .nav-links > a:hover .drawer-ico { color: #fff; background: rgba(255,255,255,.09); }
  .nav.cinema-nav .nav-links > a.is-active .drawer-ico {
    color: #fff;
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(140deg, #ff3a45, #bd0810);
    box-shadow: 0 6px 16px rgba(229,9,20,.35);
  }

  .nav.cinema-nav .nav-links > .drawer-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 4px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6f6c78;
  }
  .nav.cinema-nav .nav-links > .drawer-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.07);
  }

  .nav.cinema-nav .nav-links > .drawer-user,
  .nav.cinema-nav .nav-links > .drawer-login {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 0;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    color: #fff;
  }
  .nav.cinema-nav .nav-links > .drawer-login {
    border-color: rgba(229,9,20,.3);
    background: linear-gradient(120deg, rgba(229,9,20,.14), rgba(229,9,20,.03));
  }
  .nav.cinema-nav .nav-links > .drawer-user:hover,
  .nav.cinema-nav .nav-links > .drawer-login:hover {
    background: linear-gradient(120deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    transform: none;
  }
  .nav.cinema-nav .nav-links > .drawer-login:hover {
    background: linear-gradient(120deg, rgba(229,9,20,.2), rgba(229,9,20,.05));
  }
  .drawer-user .du-avatar,
  .drawer-login .du-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, #ff3a45, #a40610);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: inset 0 1px rgba(255,255,255,.25);
  }
  .drawer-login .du-avatar { background: rgba(255,255,255,.08); color: #ff8a91; }
  .drawer-login .du-avatar .ns-ico { width: 18px; height: 18px; }
  .drawer-user .du-body,
  .drawer-login .du-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .drawer-user .du-body strong,
  .drawer-login .du-body strong { font-size: 13px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer-user .du-body small,
  .drawer-login .du-body small { font-size: 10.5px; color: #98959f; }
  .drawer-user > .ns-ico,
  .drawer-login > .ns-ico { width: 14px; height: 14px; color: #7c7985; flex: none; }
  .nav.cinema-nav .nav-links > .drawer-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #8f8c97;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .nav.cinema-nav .nav-links > .drawer-logout:hover { color: #ff8a91; background: rgba(229,9,20,.08); }
  .nav.cinema-nav .nav-links > .drawer-logout .ns-ico { width: 15px; height: 15px; }
}

/* --------------------------------------------------------------------------
   15. Réglages appliqués côté public
   -------------------------------------------------------------------------- */
body.hide-hero #trending-hero { display: none !important; }
body.hide-row-trending #row-trending-block,
body.hide-row-top10 #row-top10-block,
body.hide-row-new #row-new-block { display: none !important; }
body.hide-telegram .telegram-banner,
body.hide-telegram .drawer-telegram { display: none !important; }
.auth-tabs.is-single { display: none; }

/* --------------------------------------------------------------------------
   16. Paramètres du site — contrôles premium
   -------------------------------------------------------------------------- */
.settings-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.settings-panel { border-radius: 18px; }
.settings-panel .panel-head { padding-bottom: 14px; }
.panel-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); font-weight: 400; }
.settings-toggles { display: grid; gap: 9px; padding: 0 20px 2px; }
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.switch-row:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.035); }
.switch-row.compact { padding: 9px 11px; }
.switch { position: relative; flex: none; width: 44px; height: 26px; margin-top: 1px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s ease, border-color .2s ease;
}
.switch i::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #d8d6de;
  transition: transform .2s ease, background .2s ease;
}
.switch input:checked + i { background: linear-gradient(135deg, #ff3a45, #bd0810); border-color: rgba(255,255,255,.18); }
.switch input:checked + i::after { transform: translateX(17px); background: #fff; }
.switch input:focus-visible + i { outline: 2px solid rgba(255,90,100,.7); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-text strong { font-size: 13px; font-weight: 700; color: var(--text); }
.switch-text small { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.settings-subgrid { margin-top: 4px; }
.color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.color-row input[type="color"] {
  width: 46px;
  height: 46px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.color-row #s-accent-hex {
  width: 118px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.color-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: 11.5px;
  color: #cfccd6;
}
.color-preview::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--preview, #e50914);
  box-shadow: 0 0 12px var(--preview, #e50914);
}
.field-hint { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.settings-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(13,13,17,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 54px rgba(0,0,0,.5);
}
.settings-hint { margin-right: auto; font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 720px) {
  .settings-savebar { flex-direction: column; align-items: stretch; }
  .settings-savebar .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Direct — cartes de chiffres, courbe et listes premium
   -------------------------------------------------------------------------- */
.live-hero {
  border-radius: 18px;
  padding: 18px 22px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(229,9,20,.16), transparent 52%),
    linear-gradient(120deg, rgba(20,20,25,.96), rgba(12,12,15,.96));
  box-shadow: 0 22px 50px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
}
.live-hero-status strong { font-size: 15px; letter-spacing: -.01em; }
.live-dot {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 5px rgba(229,9,20,.16), 0 0 18px rgba(229,9,20,.7);
}
@media (min-width: 721px) {
  .live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
}
.live-card {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 15px;
  border-radius: 16px;
  background: linear-gradient(180deg, #16161b, #0f0f13);
}
.live-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--lc, rgba(255,255,255,.2)), transparent 90%);
  opacity: .75;
}
.live-card .live-card-ico {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: var(--lc-soft, rgba(255,255,255,.06));
  color: var(--lc, #b7b5c0);
  border: 1px solid rgba(255,255,255,.06);
}
.live-card .live-card-ico svg { width: 18px; height: 18px; }
.live-card h3 { font-size: 31px; line-height: 1.05; letter-spacing: -.03em; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-card .label { margin-top: 6px; }
.live-card .delta { margin-top: 4px; }
.live-card.is-online { --lc: #ff4a55; --lc-soft: rgba(255,74,85,.14); }
.live-card.is-members { --lc: #4fd18b; --lc-soft: rgba(79,209,139,.12); }
.live-card.is-guests { --lc: #9aa1b4; --lc-soft: rgba(154,161,180,.12); }
.live-card.is-playing { --lc: #b78cff; --lc-soft: rgba(183,140,255,.12); }
.live-card.is-peak { --lc: #ff9d54; --lc-soft: rgba(255,157,84,.12); }
.live-card.is-record { --lc: #f2c94c; --lc-soft: rgba(242,201,76,.12); }
.live-card.is-views { --lc: #5ab8ff; --lc-soft: rgba(90,184,255,.12); }
.live-chart-panel { border-radius: 18px; }
.live-legend .lg {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 10.5px;
}
.live-legend .lg::before { width: 10px; height: 3px; }
.live-cols .panel { overflow: hidden; }
.live-list { padding: 4px 10px 10px; }
.live-item { align-items: center; padding: 13px 8px; }
.live-item-icon { width: 38px; height: 38px; border-radius: 12px; }
.live-item-body strong { font-size: 13.5px; }
.live-page-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 12px 8px;
}
.live-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #b9b6c2;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.live-page-item:first-child .live-rank { background: rgba(229,9,20,.18); color: #ff8b92; }
.live-page-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.live-page-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.live-page-head span { font-variant-numeric: tabular-nums; color: #d9d7de; font-weight: 700; }
.live-page-bar { height: 6px; }
.live-empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 14px 34px;
  text-align: center;
}
.live-empty-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: #77747f;
}
.live-empty-ico svg { width: 20px; height: 20px; }
.live-empty-block strong { font-size: 13px; color: #cfccd6; }
.live-empty-block > span:last-child { font-size: 11.5px; line-height: 1.5; color: #7f7c88; max-width: 260px; }
@media (max-width: 720px) {
  .live-card h3 { font-size: 26px; }
  .settings-panel .panel-head,
  .settings-toggles { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   18. Maintenance — écran d'attente
   -------------------------------------------------------------------------- */
#ns-maintenance {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(229,9,20,.12), transparent 55%),
    #07070b;
}
.ns-maintenance-card {
  width: min(460px, 100%);
  padding: 34px 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: linear-gradient(160deg, #15151b, #0b0b0f);
  box-shadow: 0 34px 90px rgba(0,0,0,.6);
  text-align: center;
}
.ns-maintenance-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 20px;
  background: rgba(229,9,20,.14);
  color: #ff5b64;
}
.ns-maintenance-mark svg { width: 30px; height: 30px; }
.ns-maintenance-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ff7079;
}
.ns-maintenance-card h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 10px; }
.ns-maintenance-card p { color: #9a97a6; font-size: 13.5px; line-height: 1.7; margin: 0 0 22px; }

/* --------------------------------------------------------------------------
   19. Recherche : champ soigne, panneau de suggestions, animations discretes
   -------------------------------------------------------------------------- */

/* --- Champ : icone, texte, raccourci, effacement ------------------------- */
.nav.cinema-nav .search-field {
  position: relative;
  gap: 10px;
  height: 44px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(22,22,28,.86), rgba(13,13,17,.92));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: text;
  transition:
    border-color .2s ease,
    box-shadow .22s ease,
    background-color .2s ease,
    transform .22s cubic-bezier(.2,.7,.25,1);
}
.nav.cinema-nav .search-field:hover {
  border-color: rgba(255,255,255,.21);
  background: linear-gradient(180deg, rgba(26,26,32,.9), rgba(16,16,21,.94));
}
.nav.cinema-nav .search-field:focus-within {
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(28,28,35,.92), rgba(17,17,22,.95));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.5);
  transform: none;
}
/* Filet d'accent tres fin au bas du champ : anime sans encadrer. */
.nav.cinema-nav .search-field::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,59,78,.62), transparent);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.25,1);
  pointer-events: none;
}
.nav.cinema-nav .search-field:focus-within::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Icone loupe : pivote doucement a l'ouverture. */
.nav.cinema-nav .search-field > svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #8d8b95;
  cursor: pointer;
  transition: color .2s ease, transform .28s cubic-bezier(.2,.7,.25,1);
}
.nav.cinema-nav .search-field:focus-within > svg {
  color: #dedbe6;
  transform: scale(1.06);
}

.nav.cinema-nav .search-field input {
  min-width: 0;
  font-size: 13px;
  letter-spacing: -.005em;
}
.nav.cinema-nav .search-field input::placeholder {
  color: #7d7b86;
  transition: color .2s ease;
}
.nav.cinema-nav .search-field:focus-within input::placeholder { color: #918f9b; }

/* Le bouton natif des champs search est remplace par le notre. */
.nav.cinema-nav .search-field input::-webkit-search-cancel-button { display: none; }

/* Bouton effacer : petit galet neutre, jamais bleu ni rouge. */
.nav.cinema-nav .search-clear {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.045);
  color: #c5c2cc;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  cursor: pointer;
  opacity: 0;
  transform: scale(.82);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.7,.25,1), background-color .16s ease, border-color .16s ease, color .16s ease, visibility .16s ease;
}
.nav.cinema-nav .search-clear svg { width: 12px; height: 12px; }
.nav.cinema-nav .search-field.has-value .search-clear {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
}
.nav.cinema-nav .search-clear:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.nav.cinema-nav .search-clear:active { transform: scale(.92); }
.nav.cinema-nav .search-clear:focus-visible {
  outline: 1px solid rgba(255,255,255,.34);
  outline-offset: 2px;
}

/* --- Panneau de suggestions --------------------------------------------- */
.nav.cinema-nav .nav-search-wrap .search-results {
  top: calc(100% + 9px);
  /* Le panneau depasse le champ de part et d'autre (menu deroulante classique) :
     insets negatifs + largeur auto centree, le max-width empeche tout
     debordement d'ecran. Le tiroir mobile reecrit left/right (bloc 1100px). */
  left: -56px;
  right: -56px;
  margin: 0 auto;
  width: auto;
  max-width: min(430px, calc(100vw - 32px));
}
.nav-search-wrap .search-results {
  width: min(420px, calc(100vw - 28px));
  padding: 7px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #16161c 0%, #101014 100%);
  box-shadow:
    0 26px 60px rgba(0,0,0,.62),
    0 2px 8px rgba(0,0,0,.4),
    inset 0 1px rgba(255,255,255,.05);
  transform-origin: top center;
}
.nav-search-wrap .search-results.show {
  max-height: min(560px, calc(100vh - 130px));
  animation: ns-search-panel .22s cubic-bezier(.2,.75,.3,1) both;
}
/* Barre de defilement sombre : plus de rail blanc natif. */
.nav-search-wrap .search-results {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.nav-search-wrap .search-results::-webkit-scrollbar { width: 6px; }
.nav-search-wrap .search-results::-webkit-scrollbar-track { background: transparent; }
.nav-search-wrap .search-results::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 99px;
  background: rgba(255,255,255,.13);
  background-clip: content-box;
}
.nav-search-wrap .search-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.24);
  background-clip: content-box;
}
.nav-search-wrap .search-results::-webkit-scrollbar-corner { background: transparent; }
@keyframes ns-search-panel {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En-tete du panneau : rappelle la requete. */
.search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 9px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.search-panel-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7f7d88;
}
.search-panel-head span {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #6f6d78;
  font-variant-numeric: tabular-nums;
}

/* Ligne de resultat : affiche, texte, meta, chevron.
   Prefixe .nav-search-wrap : dans le tiroir mobile la ligne est aussi un <a>
   de .nav-links (cinema.css) qui ferait gagner son padding 9px 11px. */
.nav.cinema-nav .nav-search-wrap .search-results .search-result {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 11px;
  border-bottom: 0;
  min-height: 0;
  color: #eceaf0;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.nav.cinema-nav .nav-search-wrap .search-results .search-result:hover,
.nav.cinema-nav .nav-search-wrap .search-results .search-result:focus-visible {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
  outline: none;
}
.search-results .search-result:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
}
/* Fin trait d'accent a gauche : plus discret qu'un cadre complet. */
.search-results .search-result::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,59,78,.9), rgba(255,59,78,.28));
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.25,1);
}
.search-results .search-result:hover::before,
.search-results .search-result:focus-visible::before {
  opacity: .8;
  transform: scaleY(1);
}
.search-results .search-result.is-active { background: rgba(255,255,255,.07); }

.search-results .search-result-poster {
  width: 38px;
  height: 56px;
  flex: 0 0 38px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(145deg, #262631, #17171e);
  box-shadow: 0 3px 10px rgba(0,0,0,.42);
}
.search-results .search-result-poster img { border-radius: inherit; }
.search-results .search-result-poster > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #5d5b67;
}
.search-results .search-result-poster svg { width: 16px; height: 16px; }

.search-results .search-result-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  color: #f0eef3;
}
.search-results .search-result-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.search-results .search-result-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #8b8995;
}
.search-results .search-result-copy small i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Badge de type : Film, Serie, Anime. */
.search-result-kind {
  flex: none;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  color: #a5a3ae;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.search-result-kind.is-anime { color: #d9b3ff; border-color: rgba(183,140,255,.26); background: rgba(183,140,255,.1); }
.search-result-kind.is-tv { color: #a9c8ff; border-color: rgba(90,184,255,.24); background: rgba(90,184,255,.09); }

/* Surlignage de la requete dans le titre. */
.search-results .search-result-copy mark {
  padding: 0 1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ember) 22%, transparent);
  color: #fff;
  font-weight: 750;
}

/* Chevron d'ouverture, revelé au survol. */
.search-result-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #5f5d68;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .16s ease, transform .16s ease, color .16s ease;
}
.search-result-go svg { width: 13px; height: 13px; }
.search-results .search-result:hover .search-result-go,
.search-results .search-result:focus-visible .search-result-go {
  opacity: 1;
  transform: none;
  color: var(--ember);
}

/* Note TMDB. */
.search-result-score {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #e8c583;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.search-result-score svg { width: 10px; height: 10px; }

/* Etats : chargement, vide, erreur. */
.search-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 18px 24px;
  text-align: center;
}
.search-state-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #6f6d78;
}
.search-state-ico svg { width: 17px; height: 17px; }
.search-state strong { font-size: 12.5px; font-weight: 700; color: #d7d5dd; }
.search-state p { margin: 0; max-width: 250px; font-size: 11.5px; line-height: 1.55; color: #83818c; }

/* Chargement : trois points qui respirent. */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px 0 20px;
}
.search-loading i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f6d78;
  animation: ns-search-dot 1s ease-in-out infinite;
}
.search-loading i:nth-child(2) { animation-delay: .14s; }
.search-loading i:nth-child(3) { animation-delay: .28s; }
@keyframes ns-search-dot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  45%      { opacity: 1;  transform: translateY(-3px); }
}

/* Lien catalogue : galet discret en bas du panneau. */
.search-all-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #d6d4dd !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, #17171d, #131318);
  box-shadow: 0 -8px 18px rgba(0,0,0,.34);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.search-all-results span { color: inherit; }
.search-all-results .search-all-arrow { color: var(--ember); font-weight: 800; white-space: nowrap; }
.search-all-results:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: #fff !important;
}

/* Historique : petites pastilles de recherches recentes. */
.search-recents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 9px 6px;
}
.search-recents button {
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #b3b1bc;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.search-recents button:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

/* Entre 1101 et 1160 px, la barre de navigation est plus dense :
   on resserre le champ pour ne jamais deborder. */
@media (min-width: 1101px) and (max-width: 1160px) {
  .nav.cinema-nav .nav-links .nav-search-wrap {
    flex: 0 1 240px;
    max-width: 240px;
  }
}

/* --- Mobile : le champ occupe toute la largeur du tiroir ---------------- */
@media (max-width: 1100px) {
  .nav.cinema-nav .nav-links .nav-search-wrap .search-results {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
  }
  .nav.cinema-nav .nav-links .search-field {
    height: 48px;
    padding: 0 12px 0 15px;
    border-radius: 999px;
    font-size: 16px;
  }
  .nav.cinema-nav .nav-links .search-field input { font-size: 16px; }
  .nav.cinema-nav .nav-links .search-clear { width: 28px; height: 28px; }

  .nav-search-wrap .search-results {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 8px;
    padding: 7px;
    border-radius: 16px;
    box-shadow: 0 26px 56px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  }
  .nav-search-wrap .search-results.show {
    max-height: min(46vh, 420px);
    overflow-y: auto;
  }
  .nav.cinema-nav .nav-search-wrap .search-results .search-result { padding: 10px; gap: 11px; }
  .search-results .search-result-go { display: none; }
  .search-results .search-result-copy { font-size: 14px; }
  .search-results .search-result-copy small { font-size: 11px; }
  .search-results .search-result-poster { width: 38px; height: 56px; flex-basis: 38px; }
  .search-all-results { font-size: 12px; padding: 12px; }
}

@media (max-width: 420px) {
  .nav.cinema-nav .nav-links .search-field { height: 46px; }
}

/* Mouvement reduit : on coupe les animations, on garde les etats. */
@media (prefers-reduced-motion: reduce) {
  .nav-search-wrap .search-results.show { animation: none; }
  .search-loading i { animation: none; opacity: .6; }
  .nav.cinema-nav .search-field > svg,
  .search-results .search-result { transition: none; }
}

/* --------------------------------------------------------------------------
   20. Marque : mot-symbole NovaStream
   -------------------------------------------------------------------------- */
.nav.cinema-nav .brand,
.cinema-footer .brand,
.nav.cinema-nav .drawer-head .brand {
  gap: 0;
}

.nav.cinema-nav .brand-name,
.cinema-footer .brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: #f7f5fa;
  white-space: nowrap;
  transition: color .18s ease;
}

/* Nom du serveur : plus grand dans la barre de navigation desktop (la
   signature de la marque), pied de page maintenu équilibré. */
.nav.cinema-nav .brand-name { font-size: 1.75rem; }
.cinema-footer .brand-name { font-size: 1.4rem; }

/* Le « N » rouge suffit à rappeler la référence : le reste du mot-symbole
   reste net, en blanc, sans contour ni effet qui alourdirait la lecture. */
.nav.cinema-nav .brand-name::first-letter,
.cinema-footer .brand-name::first-letter {
  color: var(--ember, #e50914);
}

.nav.cinema-nav .brand:hover .brand-name,
.cinema-footer .brand:hover .brand-name {
  color: #fff;
}

/* Le clone du logo dans le tiroir ne doit pas hériter du galet actif. */
.nav.cinema-nav .drawer-head .brand,
.nav.cinema-nav .drawer-head .brand.is-active,
.nav.cinema-nav .drawer-head .brand:hover {
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

@media (max-width: 600px) {
  .nav.cinema-nav { flex-wrap: nowrap; }
  .nav.cinema-nav .nav-tools {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }
}

@media (max-width: 360px) {
  /* À 320 px, le CTA ne tient plus sur la même ligne que la marque et le burger.
     La connexion reste accessible dans le tiroir. */
  .nav.cinema-nav .nav-tools > a.btn-primary { display: none; }
}

@media (max-width: 1100px) {
  .nav.cinema-nav .brand-name { font-size: 1.45rem; }
  .cinema-footer .brand-name { font-size: 1.3rem; }
}

@media (max-width: 720px) {
  .nav.cinema-nav .brand-name { font-size: 1.22rem; }
  .cinema-footer .brand-name { font-size: 1.22rem; }
}

@media (max-width: 380px) {
  .nav.cinema-nav .brand-name { font-size: 1.16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav.cinema-nav .brand-name,
  .cinema-footer .brand-name { transition: none; }
}

/* --------------------------------------------------------------------------
   21. Recherche : contrôles natifs sombres, effacement soigné, focus discret
   -------------------------------------------------------------------------- */

/* Les contrôles natifs (barres de défilement, listes de select) suivent
   désormais le thème sombre au lieu d'afficher du blanc système. */
html { color-scheme: dark; }

/* On retire le bouton natif des champs de recherche : le nôtre prend le relais. */
.nav.cinema-nav .search-field input[type="search"],
.catalogue-search-field input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  caret-color: #f5f3f7;
}
.nav.cinema-nav .search-field input[type="search"]::-webkit-search-decoration,
.nav.cinema-nav .search-field input[type="search"]::-webkit-search-cancel-button,
.nav.cinema-nav .search-field input[type="search"]::-webkit-search-results-button,
.nav.cinema-nav .search-field input[type="search"]::-webkit-search-results-decoration,
.catalogue-search-field input[type="search"]::-webkit-search-decoration,
.catalogue-search-field input[type="search"]::-webkit-search-cancel-button,
.catalogue-search-field input[type="search"]::-webkit-search-results-button,
.catalogue-search-field input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.nav.cinema-nav .search-field input[type="search"]::-ms-clear,
.catalogue-search-field input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

/* --- Champ de recherche du catalogue : même langage que la nav ----------- */
.catalogue-toolbar .catalogue-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  min-width: 190px;
  min-height: 44px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: linear-gradient(180deg, #141418, #0f0f12);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
  cursor: text;
  transition: border-color .2s ease, box-shadow .22s ease, background-color .2s ease;
}
.catalogue-toolbar .catalogue-search-field:hover {
  border-color: rgba(255,255,255,.19);
  background: linear-gradient(180deg, #17171c, #111115);
}
.catalogue-toolbar .catalogue-search-field:focus-within {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(180deg, #191920, #121216);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.045),
    0 10px 26px rgba(0,0,0,.28);
}
.catalogue-toolbar .catalogue-search-field > svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #8d8b95;
  transition: color .2s ease;
}
.catalogue-toolbar .catalogue-search-field:focus-within > svg { color: #dedbe6; }
.catalogue-toolbar .catalogue-search-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #f5f3f7;
  font: inherit;
  font-size: 13px;
}
.catalogue-toolbar .catalogue-search-field input::placeholder { color: #7d7b86; }
.catalogue-toolbar .catalogue-search-field input:focus,
.catalogue-toolbar .catalogue-search-field input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.catalogue-search-clear {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.045);
  color: #c5c2cc;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  cursor: pointer;
  opacity: 0;
  transform: scale(.82);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.7,.25,1), background-color .16s ease, border-color .16s ease, color .16s ease, visibility .16s ease;
}
.catalogue-search-clear svg { width: 12px; height: 12px; }
.catalogue-search-field.has-value .catalogue-search-clear {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
}
.catalogue-search-clear:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.catalogue-search-clear:active { transform: scale(.92); }
.catalogue-search-clear:focus-visible {
  outline: 1px solid rgba(255,255,255,.34);
  outline-offset: 2px;
}

/* ==========================================================================
   22. Boutons & animations premium — galets plus riches, courbe « expo »
   ========================================================================== */

/* Jetons de mouvement : une seule courbe, très nette (sortie explosive). */
:root {
  --ns-ease: cubic-bezier(.16,1,.3,1);
  --ns-ease-soft: cubic-bezier(.33,1,.68,1);
}

/* --------------------------------------------------------------------------
   22.1 Pastilles de navigation : fin, sobre, accent rouge très discret
   -------------------------------------------------------------------------- */
.nav.cinema-nav .nav-links a {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  transition: color .28s var(--ns-ease), background-color .28s var(--ns-ease),
    border-color .28s var(--ns-ease);
}
.nav.cinema-nav .nav-links a:not(.is-active):hover {
  color: #fff;
  background-color: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
/* Onglet actif : voile neutre très léger + texte blanc, sans aplat rouge. */
.nav.cinema-nav .nav-links a.is-active {
  color: #fff;
  font-weight: 600;
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* Filet rouge court et discret sous le libellé, en accent de marque. */
.nav.cinema-nav .nav-links a.is-active::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: #e50914;
  transform: translateX(-50%);
  opacity: .9;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   22.2 Matière des boutons : soulèvement au survol, enfoncement à l'appui
   -------------------------------------------------------------------------- */
.btn,
a.btn,
button.btn,
input.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-weight: 650;
  letter-spacing: .005em;
  transition: transform .34s var(--ns-ease), box-shadow .34s var(--ns-ease),
    background-color .3s var(--ns-ease), border-color .3s var(--ns-ease),
    color .3s var(--ns-ease), filter .3s var(--ns-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .1s; }

/* Bouton principal : rouge net, liseré fin, halo très retenu. */
.btn-primary {
  background-color: #e50914;
  background-image: linear-gradient(135deg, #f11723 0%, #e50914 55%, #c00810 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 4px 14px rgba(229,9,20,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover {
  background-color: #ea0d18;
  background-image: linear-gradient(135deg, #f5202b 0%, #ea0d18 55%, #c60911 100%);
  box-shadow:
    0 7px 20px rgba(229,9,20,.3),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* Boutons secondaires : verre dépoli, liseré plus net au survol. */
.btn-outline,
.btn-ghost,
.hero-watchlist {
  background-color: rgba(12,12,16,.55);
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.22);
  color: #eceaef;
}
.btn-outline:hover,
.btn-ghost:hover,
.hero-watchlist:hover {
  background-color: rgba(22,22,28,.62);
  border-color: rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.36);
  color: #fff;
}

/* Petits boutons ronds (notifications, œil, etc.) et burger. */
.icon-btn,
.nav.cinema-nav .burger {
  border-color: rgba(255,255,255,.12);
  background-image: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .3s var(--ns-ease), box-shadow .3s var(--ns-ease),
    background-color .3s var(--ns-ease), border-color .3s var(--ns-ease), color .3s var(--ns-ease);
}
.icon-btn:hover,
.nav.cinema-nav .burger:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 8px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
}
.icon-btn:active,
.nav.cinema-nav .burger:active { transform: scale(.94); }

/* Entrée en scène du bouton « Regarder maintenant » (une fois par diapo). */
.motion-ready .hero-slide.is-active .hero-actions .btn-primary {
  animation: ns-cta-in .8s var(--ns-ease) .3s backwards;
}
@keyframes ns-cta-in {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   22.3 Flèches de défilement : pastilles rondes en verre, centrées
   -------------------------------------------------------------------------- */
.row-scroll-wrap .row-nav {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .3s var(--ns-ease);
}
.row-scroll-wrap .row-nav::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(9,9,12,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .3s var(--ns-ease), background-color .3s var(--ns-ease),
    border-color .3s var(--ns-ease), box-shadow .3s var(--ns-ease);
}
.row-scroll-wrap .row-nav svg { position: relative; z-index: 1; }
.row-scroll-wrap .row-nav:hover::before,
.row-scroll-wrap .row-nav:focus-visible::before {
  transform: scale(1.08);
  background-color: rgba(22,22,28,.85);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.row-scroll-wrap .row-nav:active::before { transform: scale(.93); }

/* --------------------------------------------------------------------------
   22.4 Cartes : zoom plus franc et auréole claire au survol
   -------------------------------------------------------------------------- */
.card:hover {
  transform: translateY(-6px);
  filter: brightness(1.1);
}
.card:hover .card-poster {
  transform: scale(1.04);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
}

/* --------------------------------------------------------------------------
   22.5 Accessibilité : tout ce qui précède se coupe si l'utilisateur
   demande moins d'animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready .hero-slide.is-active .hero-actions .btn-primary { animation: none !important; opacity: 1 !important; }
  .member-tile { animation: none !important; }
  .btn, .icon-btn, .nav.cinema-nav .burger, .nav.cinema-nav .nav-links a,
  .row-scroll-wrap .row-nav::before, .card, .card-poster { transition: none !important; }
}

/* --- Sélecteurs du catalogue : chevron fin, liste native sombre ---------- */
.catalogue-toolbar select {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  padding-right: 34px;
  background-color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918f9b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.catalogue-toolbar select:hover {
  border-color: rgba(255,255,255,.2);
  background-color: #15151b;
}
.catalogue-toolbar select:focus,
.catalogue-toolbar select:focus-visible {
  border-color: rgba(255,255,255,.28);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}
.catalogue-toolbar select option {
  background: #111116;
  color: #f3f1ec;
}

/* --- Focus des affiches : liseré fin, jamais de cadre rouge -------------- */
.card-link:focus-visible,
.public-card:focus-visible,
.member-tile > a:focus-visible {
  outline: none;
}
.card-link:focus-visible .card-poster,
.public-card:focus-visible .public-poster,
.member-tile > a:focus-visible .member-poster {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34),
    0 14px 32px rgba(0,0,0,.48);
}
.public-card:focus-visible .public-poster { transform: translateY(-4px); }
.public-card:focus-visible h3 { color: #fff; }
.search-all-results:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* --- Tiroir mobile : la recherche se superpose au menu ------------------ */
@media (max-width: 1100px) {
  .nav.cinema-nav { flex-wrap: nowrap; }
  .nav.cinema-nav > .nav-tools {
    display: flex;
    align-items: center;
    flex: none;
    gap: 8px;
    margin-left: auto;
  }
  .nav.cinema-nav .burger { flex: none; }

  .nav.cinema-nav .nav-links .nav-search-wrap {
    position: relative;
    z-index: 40;
  }
  .nav.cinema-nav .nav-links .nav-search-wrap .search-results,
  .nav-search-wrap .search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    z-index: 50;
    border-radius: 16px;
    box-shadow: 0 26px 56px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.4);
  }
  .nav-search-wrap .search-results.show {
    max-height: min(48vh, 430px);
    overflow-y: auto;
  }
}

/* Catalogue mobile : plus aucun débordement horizontal. */
@media (max-width: 650px) {
  .catalogue-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
  }
  .catalogue-toolbar .catalogue-search-field {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
  .catalogue-toolbar .catalogue-search-field input { font-size: 16px; }
  .catalogue-toolbar select { width: 100%; min-width: 0; }
  .catalogue-toolbar select:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .catalogue-toolbar { grid-template-columns: minmax(0, 1fr); }
  .catalogue-toolbar select,
  .catalogue-toolbar select:last-of-type { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav.cinema-nav .search-field::after,
  .nav.cinema-nav .search-clear,
  .search-results .search-result::before,
  .catalogue-search-field,
  .catalogue-search-clear,
  .catalogue-toolbar select { transition: none; }
}

/* ==========================================================================
   23. Catalogue — glissement à chaque changement de catégorie
   ========================================================================== */
/* Le bloc de résultats glisse d'un tenant (déclenché en JS à chaque changement
   de type / genre / tri). Les vignettes du catalogue n'animent plus
   individuellement : évite un double mouvement et garde un effet net. */
.motion-ready main .public-catalogue.is-visible .public-card {
  animation: none !important;
}

/* Accessibilité : pas de glissement si l'utilisateur demande moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready main .public-catalogue.is-visible .public-card {
    animation: none !important;
  }
}

/* ==========================================================================
   24. Premium — pseudo en or et étoile (menu du compte)
   ========================================================================== */
/* Membre premium : le pseudo passe en or, dans le bouton du compte comme
   dans le menu déroulant. Sur le bouton, une petite étoile dorée s'ajoute
   juste à côté du nom (statut premium visible d'un coup d'œil). */
.account-label.is-premium,
.account-dropdown > strong.is-premium,
.account-menu[open] .account-dropdown > strong.is-premium { color: #f3cf6a; }

.premium-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 13px;
  height: 13px;
  color: #f3cf6a;
  filter: drop-shadow(0 0 4px rgba(243,207,106,.5));
}
.premium-star svg { width: 100%; height: 100%; display: block; }

/* Accessibilité : pas de halo doré si l'utilisateur demande moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .premium-star { filter: none; }
}

/* ==========================================================================
   25. Annonce — superposée au héros + esthétique premium
   ========================================================================== */

/* Les annonces forment une colonne espacée, qu'elles soient en flux
   (pages sans héros) ou superposées à l'accueil. */
.public-announcements {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sur l'accueil, l'annonce flotte DANS le héros (position absolue) au lieu
   de le pousser vers le bas : elle le « superpose » et ne le « succède »
   plus. Le héros garde donc sa position normale. */
.hero > .public-announcements {
  position: absolute;
  top: 104px; /* juste sous la nav fixe (bas ~86px) */
  left: auto;
  right: clamp(24px, 3vw, 56px);
  /* Carte compacte en haut à DROITE : le titre du héros est aligné à gauche,
     on gagne donc une séparation horizontale garantie (aucun recouvrement),
     quel que soit le nombre de lignes du titre. */
  width: min(420px, 34%);
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 4; /* au-dessus de l'image du héros, sous la nav fixe (100) */
}

/* Carte : verre sombre sur l'image du héros, accent de marque à gauche,
   coins généreux et entrée posée (plus d'apparition brutale). */
.public-announcement {
  position: relative;
  margin: 0;
  padding: 15px 52px 15px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid #e50914;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(23, 23, 27, .94), rgba(14, 14, 17, .9));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  font-size: 13px;
  line-height: 1.65;
  overflow: hidden;
  animation: ns-announce-in .55s cubic-bezier(.16, 1, .3, 1) both;
}

/* Hiérarchie claire : titre net, message reposé. */
.public-announcement strong {
  display: block;
  color: #fff;
  font-weight: 650;
  letter-spacing: -.01em;
}
.public-announcement p {
  margin: 4px 0 0;
  color: #c4c2cb;
  white-space: pre-wrap;
}

/* Variantes sémantiques : même langue visuelle, accent coloré. */
.public-announcement.success {
  border: 1px solid rgba(52, 209, 126, .3);
  border-left: 3px solid #34d17e;
  background: linear-gradient(135deg, rgba(16, 34, 24, .94), rgba(11, 20, 15, .9));
}
.public-announcement.success strong { color: #b6f0d0; }

.public-announcement.warning {
  border: 1px solid rgba(232, 176, 58, .3);
  border-left: 3px solid #e8b03a;
  background: linear-gradient(135deg, rgba(36, 28, 14, .94), rgba(22, 18, 11, .9));
}
.public-announcement.warning strong { color: #f4dca4; }

/* Fermeture : cible ronde, discrète au repos, nette au survol/focus. */
.public-announcement button {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a09ea9;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.public-announcement button:hover,
.public-announcement button:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transform: scale(1.05);
}
.public-announcement button:focus-visible {
  outline: 2px solid rgba(229, 9, 20, .7);
  outline-offset: 2px;
}

/* Entrée posée : fondu + court glissement, en cascade légère. */
@keyframes ns-announce-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
.public-announcement:nth-child(2) { animation-delay: .07s; }
.public-announcement:nth-child(3) { animation-delay: .14s; }

/* Accessibilité : pas de mouvement si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
  .public-announcement { animation: none; }
  .public-announcement button { transition: none; }
}

/* Bande intermédiaire (1000-1199px) : la zone libre à droite du titre se
   resserre. Carte réduite pour rester entièrement hors du titre — y compris
   le titre sur deux lignes (cas « Spider-Man : Brand New Day »). */
@media (max-width: 1199px) and (min-width: 1000px) {
  .hero > .public-announcements {
    width: min(420px, 22%);
  }
}

/* Réactif : en mobile (héros compact, contenu en bas), l'annonce reprend
   une pleine largeur centrée en haut, sans gêner le titre. */
@media (max-width: 720px) {
  .hero > .public-announcements {
    top: 80px; /* nav mobile plus basse (bas ~64px) */
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
  }
  .public-announcement {
    padding: 13px 46px 13px 15px;
    border-radius: 12px;
    font-size: 12.5px;
  }
}

/* --------------------------------------------------------------------------
   

/* 32. Coussin : le heros accueille sous la barre flottante - l'affiche
   reste alors visible en entier (+6 px de respiration au sommet). */
body:has(.nav.cinema-nav){ padding-top:92px; }
@media (max-width:1100px){
  body:has(.nav.cinema-nav){ padding-top:86px; }
}
@media (max-width:720px){
  body:has(.nav.cinema-nav){ padding-top:70px; }
}

/* 33. Forme capsule de la barre : arrondie et flottante (rayon complet,
   ombre douce) - la largeur et la position restent exactement les memes. */
.nav.cinema-nav{
  border-radius:999px;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.09);
}

/* 35. Dans le panneau de recherche : aucun texte debordant. Le panneau
   herite du nowrap de la barre : les lignes glissaient hors du cadre
   (barre de defilement horizontale + texte decentre). Le retour a la
   normale permet a chaque ligne de se regulier - reste centre. */
.nav-search-wrap .search-results,
.nav-search-wrap .search-results *{
  white-space:normal;
}

/* 36. Menu admin : sidebar premium - categories nettes, onglets actifs
   marques, respiration. CSS pur : aucune structure ni logique changee. */

/* Surface laterale : gradiente organique + finestra. */
.admin-sidebar{
  background:
    radial-gradient(130% 30% at 16% 0%, rgba(255,59,78,.075), transparent 62%),
    radial-gradient(90% 26% at 50% 100%, rgba(99,102,241,.05), transparent 65%),
    linear-gradient(180deg, #0b0e15 0%, #0a0c11 100%);
  border-right-color: rgba(255,255,255,.055);
  padding: 22px 14px 18px;
  scrollbar-width: thin;
  scrollbar-color: #2a3140 transparent;
}

/* En-tete : marque hypothecee, separateur doux. */
.admin-sidebar .admin-brand{
  padding: 2px 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 2px;
}
.admin-sidebar .brand-mark{
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(255,59,78,.28), inset 0 1px rgba(255,255,255,.25);
}
.admin-sidebar .admin-brand .brand-name{ font-family: var(--font-display); }

/* Les categories deviennent des titres : puce braise + filet degrade. */
.admin-nav .group-label{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 10px 8px;
  padding: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: #9aa1b5;
}
.admin-nav .group-label::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 7px var(--ember-glow);
  flex: none;
}
.admin-nav .group-label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,0));
}

/* Onglets : puces propres, icones vivantes. */
.admin-nav a{
  gap: 12px;
  padding: 10px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: #a7aec1;
  border: 1px solid transparent;
  transition: color .2s var(--zx-ease), background .2s var(--zx-ease),
              border-color .2s var(--zx-ease), box-shadow .2s var(--zx-ease),
              transform .2s var(--zx-ease);
}
.admin-nav a svg{
  width: 18px;
  height: 18px;
  opacity: .72;
  transition: opacity .2s var(--zx-ease), transform .2s var(--zx-ease), color .2s var(--zx-ease);
}
.admin-nav a:hover{
  background: rgba(255,255,255,.055);
  color: #fff;
  border-color: rgba(255,255,255,.06);
  box-shadow: none;
  transform: translateX(2px);
}
.admin-nav a:hover svg{ opacity: 1; transform: scale(1.07); }
.admin-nav a:focus-visible{ outline: 2px solid rgba(255,59,78,.55); outline-offset: 2px; }

/* Onglet actif : carte braise + barre d'accent (via ::before, hors flux reflet). */
.admin-nav a.is-active{
  color: #fff;
  background: linear-gradient(90deg, rgba(255,59,78,.17), rgba(255,59,78,.03) 62%, transparent);
  border-color: rgba(255,59,78,.3);
  box-shadow: 0 0 22px rgba(255,59,78,.09), inset 0 1px rgba(255,255,255,.05);
}
.admin-nav a.is-active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 58%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--ember), #ff8598);
  box-shadow: 0 0 10px var(--ember-glow);
}
.admin-nav a.is-active svg{
  opacity: 1;
  color: var(--ember);
  filter: drop-shadow(0 0 6px rgba(255,59,78,.4));
}

/* Puce « Direct » : pulse discrete. */
.admin-nav .nav-live-dot{
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
  animation: ns-live-pulse 1.9s ease-in-out infinite;
}
@keyframes ns-live-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,59,78,.4), 0 0 8px var(--ember-glow); }
  50%{ box-shadow: 0 0 0 5px rgba(255,59,78,0), 0 0 5px var(--ember-glow); }
}

/* Carte utilisateur : panneau vrai. */
.admin-sidebar .admin-user{
  margin-top: 16px;
  padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.admin-sidebar .admin-user .avatar{ border: 1px solid rgba(255,255,255,.3); }
.admin-sidebar .admin-user p{ font-size: 12px; font-weight: 600; }

/* Rythme compact sur mobile. */
@media (max-width: 900px){
  .admin-nav .group-label{ margin: 15px 8px 7px; }
}

/* 37. Panel admin : ligne zenix (observer leurs cartes : fond #0a0a0f sur
   #070709, filets blancs 5-6%, ignition braise au survol, rouge plat,
   champs fumes). Surfaces generiques seulement - les cadrans KPI du
   dashboard (studio 11-16) restent their's untouched. */

/* Toile : plus profonde + souffle braise discret en haut. */
.admin .admin-main{
  background:
    radial-gradient(85% 42% at 72% -8%, rgba(229,9,20,.05), transparent 62%),
    linear-gradient(180deg, #070709 0%, #050507 100%);
}
.admin .admin-topbar{
  background: rgba(7,7,9,.72);
  backdrop-filter: blur(18px) saturate(1.12);
  border-bottom-color: rgba(255,255,255,.06);
}
.admin .admin-topbar h2{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.014em;
}
.admin .admin-topbar .sub{ color: #8c8fa0; }

/* Panneaux : surface carte zenix + anneau d' ignition au survol. */
.admin .panel{
  background: linear-gradient(180deg, #0b0b11 0%, #08080d 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.04);
  position: relative;
  isolation: isolate;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.admin .panel::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255,255,255,.05);
  border-radius: 14px;
  pointer-events: none;
  z-index: 6;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.admin .panel:hover{ border-color: rgba(229,9,20,.24); }
.admin .panel:hover::after{
  border-color: rgba(229,9,20,.4);
  box-shadow: inset 0 0 18px rgba(229,9,20,.14);
}
.admin .panel-head{
  padding: 15px 18px;
  border-bottom-color: rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.admin .panel-head h3{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
}
.admin .panel-head h3::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--ember), #ff8598);
  box-shadow: 0 0 8px rgba(255,59,78,.4);
  flex: none;
}
.admin .panel-sub{ color: #8b8e9b; }

/* Champs : fumes (blanc 4.5%, filet 10%), focus braise a anneau. */
.admin .field input,
.admin .field select,
.admin .field textarea,
.admin .tmdb-import-grid input,
.admin .tmdb-import-grid select,
.admin .tmdb-quick input,
.admin select{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.admin .field input:focus,
.admin .field select:focus,
.admin .field textarea:focus,
.admin .tmdb-import-grid input:focus,
.admin .tmdb-import-grid select:focus,
.admin .tmdb-quick input:focus,
.admin select:focus{
  outline: none;
  border-color: rgba(229,9,20,.55);
  box-shadow: 0 0 0 3px rgba(229,9,20,.14);
  background: rgba(255,255,255,.06);
}
.admin .field input::placeholder,
.admin .field textarea::placeholder{ color: #6d707d; }
.admin .field label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .014em;
  color: #a1a5b5;
}

/* Boutons : plat et net - davantage de calme dans le panel. */
.admin .btn{ border-radius: 12px; }
.admin .btn::before, .admin .icon-btn::before{ display: none; }
.admin .btn-primary{
  background: #e50914;
  box-shadow: 0 8px 22px rgba(229,9,20,.32), inset 0 1px rgba(255,255,255,.16);
}
.admin .btn-primary:not(.btn-sm)::after{ display: none; }
.admin .btn-primary:hover{
  background: #ff1320;
  box-shadow: 0 12px 30px rgba(229,9,20,.42);
}
.admin .btn-outline{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #e7e5f0;
}
.admin .btn-outline:hover{
  border-color: rgba(229,9,20,.5);
  background: rgba(229,9,20,.09);
  box-shadow: 0 0 22px rgba(229,9,20,.2);
}
.admin .live-card:hover{ border-color: rgba(229,9,20,.4); }

/* Transition de vue : montee douce (reprend la main sur studio-in). */
.admin-view.active{ animation: ns-view-in .3s cubic-bezier(.2,.75,.3,1); }
@keyframes ns-view-in{
  from{ opacity: 0; transform: translateY(9px); }
  to{ opacity: 1; transform: none; }
}

/* 38. Panel admin : alignement sur leur backoffice observe EN SESSION
   (canvas #09090b, cartes zinc-900/bordure zinc-800, chart-cards a
   bordure degrade via fond + padding 1px, tableaux 12px/16px). La
   technique des leurs est transposee en double fond padding-box /
   border-box : meme rendu de filet lumineux, zero HTML en plus. */

/* Panneaux : filet degrade reposant qui s' embrase au survol. */
.admin .panel{
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #0b0b12 0%, #08080d 100%) padding-box,
    linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 45%, rgba(229,9,20,.15)) border-box;
}
.admin .panel::after{ content: none; }
.admin .panel{
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.admin .panel:hover{
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 26px rgba(229,9,20,.10);
  background:
    linear-gradient(180deg, #0b0b12 0%, #08080d 100%) padding-box,
    linear-gradient(140deg, rgba(255,255,255,.12), rgba(229,9,20,.4) 52%, rgba(229,9,20,.16)) border-box;
}

/* Cadrans chiffres : meme filet degrade (dashboard + stats). */
.admin .stat-card{
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(25,30,43,.985) 0%, rgba(12,15,23,.985) 100%) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.028) 46%, rgba(229,9,20,.18)) border-box;
}
.admin .stat-card:hover{
  background:
    linear-gradient(150deg, rgba(25,30,43,.985) 0%, rgba(12,15,23,.985) 100%) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(229,9,20,.42) 50%, rgba(229,9,20,.2)) border-box;
}

/* Tableaux : grele et net comme les leurs (conteneur zinc-900). */
.admin table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.admin table thead th{
  padding: 11px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #8b8ea2;
  background: rgba(255,255,255,.028);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin table tbody td{
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  color: #c9cbd8;
  font-size: .88rem;
  vertical-align: middle;
}
.admin table tbody tr:last-child td{ border-bottom: none; }
.admin table tbody tr:hover{ background: rgba(229,9,20,.05); }

/* Topbar : plus dense, presque solide (la leur = #09090b net). */
.admin .admin-topbar{
  background: rgba(9,9,11,.9);
  backdrop-filter: blur(16px) saturate(1.08);
  border-bottom-color: rgba(255,255,255,.07);
}
.admin .admin-topbar h2{ font-size: 17px; }

/* Toile : ton canvas global vers leur zinc-950 constate. */
.admin .admin-main{
  background:
    radial-gradient(85% 42% at 70% -8%, rgba(229,9,20,.045), transparent 62%),
    linear-gradient(180deg, #0a0a0d 0%, #060608 100%);
}

/* Graphique direct : coins arrondis propres autour du tracé existant. */
.admin #live-chart{ display: block; border-radius: 12px; }

/* 39. REDESIGN VISIBLE du panel admin (reprise totale apres retour
   « aucun changement »). Principe : contraste evident carte/toile a la
   zenix (leurs cartes zinc-900 sur zinc-950), cadrans reaffiches,
   sidebar calme, topbar solide. Tout reste en CSS pur : zero HTML/JS. */

/* Toile : descendre le fond pour faire RESSORTIR les cartes. */
.admin .admin-main{
  background:
    radial-gradient(80% 40% at 68% -10%, rgba(229,9,20,.06), transparent 60%),
    linear-gradient(180deg, #09090c 0%, #050507 100%);
}

/* Panneaux : true zinc-900 clair + filet degrade bien visible. */
.admin .panel{
  background:
    linear-gradient(180deg, #17181f 0%, #13141b 100%) padding-box,
    linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(229,9,20,.22)) border-box;
  box-shadow: 0 14px 34px rgba(0,0,0,.44);
}
.admin .panel:hover{
  box-shadow: 0 18px 42px rgba(0,0,0,.52), 0 0 30px rgba(229,9,20,.15);
  background:
    linear-gradient(180deg, #191a22 0%, #14151d 100%) padding-box,
    linear-gradient(140deg, rgba(255,255,255,.17), rgba(229,9,20,.48) 52%, rgba(229,9,20,.2)) border-box;
}
.admin .panel-head{
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.admin .panel-head h3{ font-size: 15px; gap: 10px; }
.admin .panel-head h3::before{ height: 17px; box-shadow: 0 0 10px rgba(255,59,78,.5); }

/* Cadrans chiffres : cartouche clair, gros chiffre, pastille d etat. */
.admin .stat-card{
  background:
    linear-gradient(165deg, #1b1c24 0%, #13151d 100%) padding-box,
    linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.035) 46%, rgba(229,9,20,.24)) border-box;
  padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
}
.admin .stat-card .icon{
  width: 44px; height: 44px; border-radius: 13px; font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.32);
}
.admin .stat-card h3{
  font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  color: #fff; font-family: var(--font-display);
}
.admin .stat-card p.label{
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #9aa0b2;
}
.admin .stat-card .delta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4.5px 11px; border-radius: 999px;
  background: rgba(229,9,20,.11); border: 1px solid rgba(229,9,20,.26);
  color: #ff98a3; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}

/* Sidebar : ambiance calme zinc (au lieu du degrade) - structure 36 conservee. */
.admin .admin-nav{
  background: linear-gradient(180deg, #0b0b0f 0%, #070709 100%);
  border-right: 1px solid rgba(255,255,255,.07);
}
.admin .admin-nav a:hover{ background: rgba(255,255,255,.065); color: #fff; }
.admin .admin-nav a.is-active{
  background: linear-gradient(90deg, rgba(229,9,20,.24), rgba(229,9,20,.07));
  color: #fff;
}

/* Topbar : solide, nette (fini le verre flou). */
.admin .admin-topbar{
  background: #0b0b0f;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.admin .admin-topbar h2{ font-size: 18px; font-weight: 700; }

/* Boutons : plus presents. */
.admin .btn{ min-height: 40px; font-size: 13.5px; font-weight: 600; }
.admin .btn-primary{
  background: linear-gradient(180deg, #f5152b 0%, #d60714 100%);
  box-shadow: 0 10px 24px rgba(229,9,20,.36), inset 0 1px rgba(255,255,255,.2);
}
.admin .btn-primary:hover{ background: linear-gradient(180deg, #ff2438 0%, #e30a18 100%); }
.admin .btn-outline{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.admin .btn-outline:hover{ background: rgba(229,9,20,.13); }

/* Zone graphique : retour plus sombre pour faire lire la courbe. */
.admin .live-chart-body{
  background: linear-gradient(180deg, #0f1016 0%, #0b0c12 100%);
  border-radius: 12px;
}

/* Tablards des tableaux : bandeau visible. */
.admin table thead th{ background: #1d1e27; }
.admin table tbody td{ color: #d7d9e5; }
.admin table tbody tr:hover{ background: rgba(229,9,20,.08); }

/* Champs un poil plus clairs sur cartes zinc. */
.admin .field input, .admin .field select, .admin .field textarea,
.admin .tmdb-import-grid input, .admin .tmdb-import-grid select,
.admin .tmdb-quick input, .admin select{ background: rgba(255,255,255,.055); }

/* 40. Gestion utilisateurs facon zenix : bandeau de compteurs, barre
   de recherche + filtres, avatars-cercles initiales, badges de role.
   La logique premium/crayon existante est conservee a l identique. */
.admin .users-stats{ margin-bottom: 24px; }
.admin .users-stats .stat-card{ min-height: 0; padding: 16px 20px; }
.admin .users-stats .stat-card h3{ font-size: 24px; }
.admin .users-head{ padding: 16px 20px; }
.admin .users-toolbar{
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin .users-search{
  flex: 1 1 260px; min-width: 0;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 10px 14px;
  color: #e7e8f2; font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.admin .users-search:focus{
  border-color: rgba(229,9,20,.55);
  box-shadow: 0 0 0 3px rgba(229,9,20,.14);
}
.admin .users-search::placeholder{ color: #6d707d; }
.admin select.users-filter{ flex: none; width: auto; }
.admin .users-note{ padding: 12px 20px 0; color: #9aa0b2; font-size: .8rem; line-height: 1.65; }
.admin .users-empty{ padding: 34px 20px; text-align: center; color: #8a8fa2; font-size: .85rem; }
.admin .users-cell{ display: flex; align-items: center; gap: 13px; }
.admin .user-avatar, .admin-modal .user-avatar{
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5152b 0%, #a90610 100%);
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 14px rgba(229,9,20,.25);
}
.admin .users-id{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin .user-name{ color: #f2f3fa; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin .user-mail{ color: #9599ab; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin .pill.role-elev, .admin-modal .pill.role-elev{
  background: linear-gradient(120deg, rgba(229,9,20,.18), rgba(229,9,20,.08));
  color: #ff8d99; border: 1px solid rgba(229,9,20,.28);
}
.admin .pill.role-std, .admin-modal .pill.role-std{ background: rgba(255,255,255,.05); color: #9aa0b2; border: 1px solid rgba(255,255,255,.09); }

/* 41. Langage de boutons et champs zenix EXACT (mesure de leur
   back-office : primaire plat #fe0000 radius 8 h50 pad 14/24 fw500
   sans ombre ; secondaire zinc-800 #27272a texte #d4d4d8 ; accent
   abonnement ambre 15/40% ; icones transparentes grises qui passent
   au rouge au survol ; champs pleins zinc-800 radius 6).
*/

/* --- Boutons generiques --- */
.admin .btn, .admin-modal .btn{
  border-radius: 8px;
  min-height: 46px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.admin .btn:active, .admin-modal .btn:active{ transform: none; }
.admin .btn.btn-sm, .admin-modal .btn.btn-sm{ min-height: 37px; padding: 7px 14px; font-size: 12.5px; }
.admin .btn-primary, .admin-modal .btn-primary{
  background: #fe0000;
  border: 1px solid rgba(0,0,0,0);
  color: #fff;
  box-shadow: none;
}
.admin .btn-primary::after, .admin-modal .btn-primary::after{ display: none; }
.admin .btn-primary:hover, .admin-modal .btn-primary:hover{
  background: #e70000;
  box-shadow: none;
}
.admin-modal .btn-outline, .admin-modal .btn:not(.btn-primary):not(.icon-btn), .admin .btn-outline, .admin .btn:not(.btn-primary):not(.icon-btn){
  background: #27272a;
  border: 1px solid #27272a;
  color: #d4d4d8;
}
.admin-modal .btn-outline:hover, .admin-modal .btn:not(.btn-primary):not(.icon-btn):hover, .admin .btn-outline:hover, .admin .btn:not(.btn-primary):not(.icon-btn):hover{
  background: #313135;
  border-color: #313135;
  color: #f4f4f5;
  box-shadow: none;
}
.admin .icon-btn, .admin-modal .icon-btn{
  background: transparent;
  border: 0;
  color: #71717a;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s ease;
}
.admin .icon-btn svg, .admin-modal .icon-btn svg{ width: 17px; height: 17px; }
.admin .icon-btn:hover, .admin-modal .icon-btn:hover{ color: #fe0000; background: transparent; }
.admin .premium-quick{
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.42);
  color: #fde68a;
  border-radius: 8px;
  min-height: 32px; padding: 5px 12px;
  font-size: 12px; font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease;
}
.admin .premium-quick:hover{ background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.55); }
.admin .premium-quick.is-on{ background: rgba(245,158,11,.24); }

/* --- Bouton fermoir de modales, zones de tete --- */
.admin .admin-modal-card > .panel-head .icon-btn{ align-self: center; }

/* --- Champs pleins zinc (leurs valeurs : #27272a, 6px, h48) --- */
.admin .field input,
.admin .field select,
.admin .field textarea,
.admin-modal .field input,
.admin-modal .field select,
.admin-modal .field textarea,
.admin .users-search,
.admin select.users-filter,
.admin .tmdb-import-grid input,
.admin .tmdb-import-grid select,
.admin .tmdb-quick input,
.admin select{
  background: #27272a;
  border: 1px solid #343439;
  border-radius: 6px;
  padding: 12px 16px;
  min-height: 46px;
  color: #f4f4f5;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin .field input:focus,
.admin .field select:focus,
.admin .field textarea:focus,
.admin-modal .field input:focus,
.admin-modal .field select:focus,
.admin-modal .field textarea:focus,
.admin .users-search:focus,
.admin select.users-filter:focus,
.admin .tmdb-import-grid input:focus,
.admin .tmdb-import-grid select:focus,
.admin .tmdb-quick input:focus,
.admin select:focus{
  border-color: rgba(254,0,0,.55);
  box-shadow: 0 0 0 3px rgba(254,0,0,.15);
}
.admin .field input[readonly], .admin-modal .field input[readonly], .admin .users-search::placeholder{ color: #8b8d97; }
.admin .field input::placeholder, .admin .field textarea::placeholder{ color: #6b6e79; }

/* --- Modale personnalisation (bandeau identite + sections) --- */
.admin-modal .admin-modal-card{
  width: min(560px, calc(100vw - 32px));
  border-radius: 16px;
  background: #18181b;
  border: 1px solid #27272a;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  overflow: hidden;
}
.admin-modal .user-band{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, #1f1f24, #17171b);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-modal .user-band-id{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-modal .user-band-id strong{ color: #fafafa; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-modal .user-band-id span{ color: #8f92a1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-modal .user-band .pill{ flex: none; }
.admin-modal .user-band .icon-btn{ flex: none; }
.admin .user-avatar-lg, .admin-modal .user-avatar-lg{ width: 52px; height: 52px; font-size: 16px; }
.admin-modal .user-modal-body{ padding: 4px 0 2px; }
.admin-modal .modal-section{ padding: 16px 22px 6px; border-top: 1px solid rgba(255,255,255,.05); }
.admin-modal .modal-section:first-child{ border-top: 0; padding-top: 14px; }
.admin-modal .modal-section-title{
  margin: 0 0 10px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: #7c7f8e;
  display: flex; align-items: center; gap: 8px;
}
.admin-modal .modal-section-title::before{ content: ""; width: 3px; height: 12px; border-radius: 99px; background: linear-gradient(180deg, #fe0000, #ff5a5a); }
.admin-modal .mail-lock{
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #7c7f8e; background: rgba(255,255,255,.06);
  padding: 2px 7px; border-radius: 99px; margin-left: 2px;
  vertical-align: 1px;
}
.admin-modal .premium-toggle{ width: 100%; }
.admin-modal .user-editor .form-actions{
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.28));
  border-top: 1px solid rgba(255,255,255,.05);
}
/* badges DANS table : role pill arrondie comme les leurs */
.admin .pill, .admin-modal .pill{ border-radius: 999px; }

/* 42. Vues Studio (annonces, demandes, episodes, parrainage, anime,
   outils) ramenees au langage zinc/rouge du panel + controles de
   formulaire globalises. Les vues sont generees par studio.js : on
   ne touche ni le HTML ni la logique, uniquement l'apparence. */

/* --- Controles globalises admin (meme langue que les champs zenix) --- */
.admin input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.admin select,
.admin textarea{
  background: #27272a;
  border: 1px solid #343439;
  border-radius: 6px;
  padding: 10px 14px;
  min-height: 42px;
  color: #f4f4f5;
  font-size: 13.5px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin textarea{ min-height: 92px; resize: vertical; line-height: 1.55; }
.admin input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.admin select:focus,
.admin textarea:focus{
  border-color: rgba(254,0,0,.55);
  box-shadow: 0 0 0 3px rgba(254,0,0,.14);
}
.admin input[type="file"]{ padding: 8px; font-size: 12px; min-height: 0; }
.admin select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8f92a1 50%), linear-gradient(135deg, #8f92a1 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* --- Tete des vues generees (bandeau de titre) --- */
.admin .studio-intro{
  display: block;
  padding: 20px 22px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #1c1d24, #16171c);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.admin .studio-eyebrow{
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fe0000;
}
.admin .studio-intro h1{
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #f4f4f5;
  letter-spacing: -.01em;
}
.admin .studio-intro p{
  margin: 7px 0 0;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.6;
  color: #8f92a1;
}

/* --- Cartes de liste (demandes, annonces, parrainage, anime) --- */
.admin .studio-list-item{
  background: #17181f;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .18s ease, background-color .18s ease;
}
.admin .studio-list-item + .studio-list-item{ margin-top: 10px; }
.admin .studio-list-item:hover{ border-color: rgba(254,0,0,.22); background: #191a21; }
.admin .studio-request-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.admin .studio-request-head h4{
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: #eceef4;
}
.admin .studio-list-item p{ margin: 6px 0; font-size: 13px; line-height: 1.6; color: #b9bcca; }
.admin .studio-list-item small, .admin .studio-list-item .studio-muted{ font-size: 12px; color: #7c7f8e; }
.admin .studio-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.admin .studio-actions select{ min-height: 34px; padding: 6px 10px; font-size: 12.5px; width: auto; }
.admin .studio-code{
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #c9ccd6;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 8px 11px;
  word-break: break-all;
  user-select: all;
}

/* --- Pastilles d'etat --- */
.admin .studio-badge{
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #9aa0b2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin .studio-badge.green{ background: rgba(79,209,139,.13); border-color: rgba(79,209,139,.32); color: #4fd18b; }
.admin .studio-badge.amber{ background: rgba(242,181,68,.13); border-color: rgba(242,181,68,.32); color: #f2b544; }
.admin .studio-badge.red{ background: rgba(254,60,80,.12); border-color: rgba(254,60,80,.3); color: #ff7d88; }

/* --- Editeur d'episodes (une ligne = un episode) --- */
.admin .studio-episode{
  display: grid;
  grid-template-columns: 92px 92px minmax(170px, 1.5fr) 108px minmax(210px, 1.7fr) 34px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.admin .studio-episode + .studio-episode{ margin-top: 8px; }
.admin .studio-episode label{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c7f8e;
}
.admin .studio-episode input{ min-height: 38px; padding: 8px 12px; font-size: 13px; }
.admin .studio-episode .icon-btn{ align-self: end; margin-bottom: 2px; }
.admin .studio-season-tools{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

/* --- Vides soignes, formulaires, listes --- */
.admin .studio-empty{
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 12px;
  padding: 26px 22px;
  text-align: center;
  color: #8f92a1;
}
.admin .studio-empty h4{ margin: 0 0 6px; font-size: 14px; color: #d7dae4; }
.admin .studio-empty p{ margin: 0; font-size: 12.5px; }
.admin .studio-form label, .admin .studio-toolbar label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7c7f8e;
}
.admin .studio-list{ display: flex; flex-direction: column; gap: 10px; }
.admin .studio-preview{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid #fe0000;
  border-radius: 10px;
  padding: 14px 16px;
}
.admin .studio-preview p{ margin: 5px 0 0; font-size: 13px; color: #b9bcca; }

/* --- KPI, meters, chart des vues studio --- */
.admin .studio-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin .studio-kpi{
  background: #17181f;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.admin .studio-kpi span{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #7c7f8e; }
.admin .studio-kpi strong{ display: block; margin-top: 6px; font-family: Sora, Inter, sans-serif; font-size: 22px; color: #f4f4f5; }
.admin .studio-kpi small{ display: block; margin-top: 4px; font-size: 11.5px; color: #8f92a1; }
.admin .studio-kpi.hot strong{ color: #ff8d99; }
.admin .studio-chart{ background: #101014; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 16px; }
.admin .studio-bar{ background: rgba(255,255,255,.06); border-radius: 999px; height: 10px; overflow: hidden; }
.admin .studio-bar i, .admin .studio-meter i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fe0000, #ff5a5a); }
.admin .studio-meter{ background: rgba(255,255,255,.06); border-radius: 999px; height: 8px; overflow: hidden; }
.admin .studio-metric{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; color: #b9bcca; }
.admin .studio-metric:last-child{ border-bottom: 0; }
.admin .studio-metric strong{ color: #eceef4; font-weight: 650; }
.admin .studio-activity>div{ border-left: 2px solid rgba(254,0,0,.4); padding-left: 12px; }
.admin .studio-activity small, .admin .studio-activity time{ color: #7c7f8e; font-size: 12px; }
.admin .studio-health{ display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8f92a1; }
.admin .studio-health:before{ content: ""; width: 8px; height: 8px; border-radius: 99px; background: #4fd18b; }
.admin .studio-health.error{ color: #ff7d88; }
.admin .studio-health.error:before{ background: #fe3c50; }

/* --- Barre d outils, pagination, actions de pied --- */
.admin .studio-toolbar{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 12px; margin-bottom: 14px; }
.admin .studio-toolbar input, .admin .studio-toolbar select{ min-height: 38px; padding: 8px 13px; }
.admin .studio-pagination{ display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.admin .studio-page-info{ font-size: 12px; color: #7c7f8e; }
.admin .studio-footer-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.admin .studio-columns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.admin .studio-quick{ position: relative; }
.admin .studio-cover{ border-radius: 8px; }

/* 42b. Barres d''inscriptions (vue Statistiques) et liens sociaux du
   pied de page (personnalisables depuis Parametres). */
.admin .ns-bars{ display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 6px; }
.admin .ns-bar{ flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.admin .ns-bar i{ display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #ff5a5a, #fe0000); min-height: 6px; }
.admin .ns-bar small{ font-size: 9px; color: #7c7f8e; white-space: nowrap; }
.cinema-footer .social-link{
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #c9ccd6; font-size: .78rem; font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}
.cinema-footer .social-link:hover{ color: #fff; border-color: rgba(255,59,78,.5); }

/* --------------------------------------------------------------------------
   21. Bande "Un titre vous manque ?" : action Telegram
   Les demandes passent par Telegram : le bouton adopte la teinte officielle
   et l'avion en papier, puis redirige vers le lien du canal (liens t.me
   re-ecrits par applyTelegramSettings depuis les parametres du site).
   -------------------------------------------------------------------------- */
.cta-band .btn-telegram{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #37bbea 0%, #1f8fd6 55%, #147acc 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(31,143,214,.3), inset 0 1px rgba(255,255,255,.22);
  transition: background .2s ease, box-shadow .22s ease, transform .18s ease;
}
.cta-band .btn-telegram:hover{
  background: linear-gradient(135deg, #4bc7f2 0%, #2b9de0 55%, #1b86d8 100%);
  box-shadow: 0 14px 32px rgba(31,143,214,.4), inset 0 1px rgba(255,255,255,.24);
  transform: translateY(-1px);
}
.cta-band .btn-telegram:active{ transform: translateY(0); }
.cta-band .btn-telegram svg{ width: 17px; height: 17px; flex: none; }
.cta-band .btn-telegram:focus-visible{
  outline: 2px solid #7fd0ff; outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   22. Lecteur en ligne, forme Zenix (§48)
   Le bloc lecteur s'insere dans la fiche, juste sous la banniere : media
   16/9 noir cerne d'un liseré clair et d'une ombre profonde, puis barre
   « Serveurs de lecture », puces de sources, navigation d'episodes et note
   discrete. Meme logique de lecture qu'avant (plein ecran, signalement,
   erreurs, episodes) ; les selecteurs sont prefixes pour passer devant
   cinema.css et zenix-style.css, charges apres ui-polish.
   -------------------------------------------------------------------------- */
.nf-player-slot:not(:empty){
  max-width: 1320px; margin: 26px auto 0;
  padding: 0 clamp(16px,3vw,48px);
}
.nf-player-slot .player-modal{
  position: static; inset: auto; z-index: auto;
  display: none; background: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  align-items: initial; justify-content: initial;
  transition: none;
}
.nf-player-slot .player-modal.open{ display: block; }
.nf-player-slot .player-box{
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: none; height: auto; max-height: none;
  margin-top: 0; padding: 0;
  background: rgba(12,12,15,.72);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.05);
}
.nf-player-slot .player-box::before{ content: none; }
.nf-player-slot .player-box:fullscreen{
  border-radius: 0; border: 0; background: #000; box-shadow: none;
}
.player-modal .player-stage{
  position: relative; width: 100%; aspect-ratio: 16/9; flex: none;
  background: #000; border-radius: 0; overflow: hidden;
  box-shadow: none;
}
.player-modal .player-head{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 18px 0; flex-wrap: wrap;
  background: none; border-bottom: 0;
}
.player-modal .player-head-copy{ display: block; min-width: 0; }
.player-modal .player-head-copy strong{
  font-family: Sora, Inter, sans-serif;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
  line-height: 1.3; white-space: normal;
}
.player-modal .player-head-kicker{
  display: block; margin-bottom: 3px;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.player-modal .player-head-kicker::before{ content: none; }
.player-modal .player-head-tools{ display: flex; align-items: center; gap: 8px; }
.player-modal .player-head-tools .btn,
.player-modal .player-head-tools .icon-btn{
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82); font-size: .74rem; font-weight: 650;
  transition: color .18s ease, border-color .18s ease, background .2s ease;
}
.player-modal .player-head-tools .icon-btn{
  width: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.player-modal .player-head-tools .btn:hover,
.player-modal .player-head-tools .icon-btn:hover{
  color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09);
}
/* La ligne « Ma watchlist / Favoris » cède la place aux puces de sources. */
#player-modal #player-member-actions{ display: none; }
.player-servers{
  display: flex; gap: 8px; margin-top: 12px; padding: 2px 18px 0;
  overflow-x: auto; scrollbar-width: none;
}
.player-servers::-webkit-scrollbar{ display: none; }
.player-chip{
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86); font: inherit; font-size: .8rem; font-weight: 650;
  white-space: nowrap;
  transition: border-color .18s ease, background .2s ease, color .18s ease, box-shadow .22s ease;
}
.player-chip svg{ width: 13px; height: 13px; flex: none; }
.player-chip:hover{ border-color: rgba(255,255,255,.3); color: #fff; }
.player-chip.is-active{
  border-color: rgba(255,255,255,.18); color: #fff;
  background: linear-gradient(135deg, #ff3a45 0%, #e50914 55%, #bd0810 100%);
  box-shadow: 0 6px 16px rgba(229,9,20,.28), inset 0 1px rgba(255,255,255,.2);
}
.player-modal .player-episode-nav,
.player-modal .player-options{
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
  padding: 0 18px; background: none; border-top: 0;
  color: rgba(255,255,255,.6); font-size: .78rem;
}
.player-modal .player-episode-nav label,
.player-modal .player-options label{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: rgba(255,255,255,.6);
}
.player-modal .player-episode-nav select,
.player-modal .player-options select{
  border-radius: 999px; padding: 8px 12px; font: inherit; font-size: .78rem;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff;
}
.player-modal .player-episode-nav .btn,
.player-modal .player-options .btn{
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.82);
  font-size: .75rem; font-weight: 650; min-height: 34px;
}
.player-note{
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px; padding: 13px 18px 15px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .75rem; line-height: 1.45; color: rgba(255,255,255,.42);
}
.player-note svg{ width: 14px; height: 14px; flex: none; opacity: .8; }
.player-modal .report-form{ margin-top: 0; padding: 14px 18px 16px; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 720px){
  .nf-player-slot #player-stage{
    aspect-ratio: 16/9; min-height: 0; flex: none;
  }
  /* La porte publicitaire a besoin de hauteur sur petit ecran : elle pousse
     le media au-dessus du 16/9 le temps du passage, puis tout revient. */
  .nf-player-slot #player-stage:has(#player-gate:not([hidden])){
    aspect-ratio: auto; min-height: 300px;
  }
  .nf-player-slot .player-box{ height: auto; max-height: none; }
}
.nf-player-slot .player-box:fullscreen .player-stage{ flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
@media (max-width: 560px){
  .player-modal .player-head-tools .btn-label{ display: none; }
  .player-modal .player-head-tools .btn{ padding: 0 11px; }
  .nf-player-slot:not(:empty){ margin-top: 18px; }
  .player-chip{ height: 38px; padding: 0 14px; font-size: .76rem; }
  .player-modal .player-head{ padding: 12px 14px 0; }
  .player-servers{ padding: 2px 14px 0; }
  .player-modal .player-episode-nav,
  .player-modal .player-options{ padding: 0 14px; }
  .player-note{ padding: 12px 14px; }
  .player-modal .report-form{ padding: 12px 14px 14px; }
}

/* --------------------------------------------------------------------------
   22b. Porte publicitaire : version telephone simplifiee (§52)
   Plus de défilement interne ni de barres : tout tient sur un ecran.
   Icone, badge « Pub x/3 », titre, une phrase d'consigne courte et un
   bouton plein cadre — les etapes detaillees restent reservees a l'ecran.
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  .player-modal .player-gate{
    overflow: hidden; padding: 14px; align-items: center;
  }
  .player-modal .player-gate-card{
    width: 100%; max-width: none; margin: 0;
    padding: 18px 14px 16px; text-align: center; max-height: none;
  }
  .player-modal .player-gate .gate-ico{ width: 38px; height: 38px; }
  .player-modal .player-gate .gate-how{ display: none; }
  .player-modal .player-gate-card::after{
    content: "Ouvre la pub, ferme l'onglet, puis reviens ici.";
    display: block; margin-top: 10px;
    font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.45);
  }
  .player-modal .player-gate-actions{ width: 100%; }
  .player-modal .player-gate-actions .btn,
  .player-modal #btn-gate-open,
  .player-modal #btn-gate-play{ width: 100%; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   23. Sélecteurs : liste déroulante maison (cohérente avec la recherche)
   Le menu natif Windows est blanc et souligné en bleu : impossible à styler.
   Le <select> reste en place (valeur + évènements intacts), seule la liste
   affichée est la nôtre — même carte sombre que .search-results.
   -------------------------------------------------------------------------- */
select { color-scheme: dark; }
select option { background: #141419; color: #f1f0f4; }

.ns-select-pop{
  position: fixed; z-index: 10000; min-width: 150px;
  max-height: min(280px, 55vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: #141419; box-shadow: 0 22px 55px rgba(0,0,0,.62);
  animation: ns-select-pop-in .14s ease both;
}
@keyframes ns-select-pop-in{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.ns-select-pop .ns-select-head{
  padding: 7px 12px 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #7d7b86;
}
.ns-select-pop button{
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 8px; background: transparent; color: #d7d6de;
  font: 500 13px Inter, sans-serif; text-align: left; white-space: nowrap; cursor: pointer;
}
.ns-select-pop button:hover:not(:disabled),
.ns-select-pop button:focus-visible{
  background: rgba(255,255,255,.07); color: #fff; outline: none;
}
.ns-select-pop button[aria-selected="true"]{ color: #fff; background: rgba(229,9,20,.13); }
.ns-select-pop button[aria-selected="true"]::after{
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: #e50914; box-shadow: 0 0 8px rgba(229,9,20,.85);
}
.ns-select-pop button:disabled{ opacity: .4; cursor: default; }
.ns-select-pop::-webkit-scrollbar{ width: 6px; }
.ns-select-pop::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 8px; }
.ns-select-pop::-webkit-scrollbar-track{ background: transparent; }
select.ns-select-open{ border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }