/* ============================================================================
 * FSS layout fixes — surcharge le template FSV1 sur les bugs reportés.
 * Chargé après tous les CSS du template pour gagner en spécificité.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * Play button — surcharge `button:not(.color-btn):not([class*=fr])` de
 * fullfilm.css/main-inline.css qui force padding/font-size/line-height sur
 * TOUS les buttons. On réinitialise pour que le triangle CSS pur de
 * `.play-button` (width:0;height:0;border:60px 0 60px 90px transparent)
 * du live f.style.css ligne 17 reste valide.
 * ---------------------------------------------------------------------------- */
#main-player button.play-button,
#player-container button.play-button {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* width / height / border-* viennent de f.style.css .play-button */
}

/* ----------------------------------------------------------------------------
 * 1) Iframe player — container 16:9 strict, contrôles fullscreen visibles,
 *    rien ne touche le menu du haut, rien n'est coupé en bas.
 * ---------------------------------------------------------------------------- */

#player-container {
  margin: 16px auto 0;
  max-width: 1280px;
  padding: 0 8px;
  position: relative;
  z-index: 5; /* sous le header sticky (z-index 200) */
}

/* #main-player : on laisse le live h.style.css piloter (width:100%; height:100%
 * → remplit le #player-container 400px). Pas de aspect-ratio override ici, ça
 * faisait déborder le bouton play au-delà de 850px. */

#main-player > div {
  position: absolute !important;
  inset: 0;
}

#main-player iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  margin: 0 !important;
}

/* `.iframe-area` du live = div vide en haut de .ftabs (placeholder DLE legacy).
 * On le neutralise complètement — pas de hauteur, pas de fond. */
.iframe-area {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 2) Header sticky avec z-index suffisant pour passer au-dessus du player
 * ---------------------------------------------------------------------------- */

.header-outer {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #1a1a1a;
}

/* Menu : ouverture au CLICK (géré par /menu3.js qui toggle inline display).
 * Pas d'ouverture au hover — c'est l'original qui veut ça. */
@media (min-width: 1025px) {
  .nav-menu > li.submenu {
    position: relative;
  }
}

/* custom.css du live force `.hidden-menu { visibility:hidden; opacity:0 }` et
 * ne révèle que via `:hover`. Notre menu3.js toggle display:block + ajoute
 * `.active` au <li> parent au click — il faut donc forcer la visibilité
 * quand `.active` est posé, sinon le dropdown s'affiche en rectangle vide. */
.nav-menu > li.submenu.active > .hidden-menu {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Le live attribue les colonnes du dropdown via `.submenu:nth-child(2/3)` —
 * Films et Series étaient en position 2/3 dans l'original. Notre HTML a 3
 * <li> mobile-only avant (close, search, Mon Panel) qui décalent les indices,
 * donc le sélecteur ne matche plus. On force la grille auto-fit avec une
 * largeur min de 170px : 4 colonnes pour 800px (Films) et 5+ pour Series. */
@media (min-width: 1025px) {
  .nav-menu > li.submenu > .hidden-menu .menu-container {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    max-height: none !important;
  }
  /* style28.css force min-width: 800px ; on autorise plus large pour les
   * menus qui ont 5+ sections (Series), max viewport - 40px. */
  .nav-menu > li.submenu > .hidden-menu {
    width: max-content !important;
    max-width: calc(100vw - 40px) !important;
  }
  /* style28.css ligne 1725 met les .menu-section à opacity:0 + animation
   * avec delay nth-child. Animation joue au LOAD (pas à l'ouverture du
   * dropdown) → quand le user click pour ouvrir, l'animation est déjà
   * jouée hors écran et tout reste à opacity:0 (parent display:none → le
   * navigateur ne calcule pas vraiment). On désactive cette animation pour
   * desktop : opacity:1 direct, pas de translate Y. */
  .nav-menu .menu-section {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ----------------------------------------------------------------------------
 * 3) Menu mobile — drawer qui slide depuis la droite (style original FSS)
 * ---------------------------------------------------------------------------- */

@media (max-width: 1220px) {
  /* Hamburger inline-flex dans .hd-right (sans bordure) */
  .btn-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    color: #ff7e28;
    font-size: 22px;
    background: transparent;
    border: 0 !important;
    border-radius: 6px;
    margin: 0;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
  }
  .btn-menu:hover,
  .btn-menu:active {
    background: rgba(255, 126, 40, 0.12);
    color: #ffa05c;
  }
  .btn-menu .fa,
  .btn-menu i {
    color: inherit;
  }

  /* hd-right en mobile : compact, gap réduit, no wrap */
  .hd-right {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-left: auto;
  }
  /* Recherche du header masquée en mobile — uniquement celle du drawer
   * (.nav-mobile-search) reste accessible. Évite le doublon visuel. */
  .hd-right .search-wrap,
  .hd-right form#quicksearch,
  .hd-right input[name="q"],
  .hd-right input#story {
    display: none !important;
  }
  /* Profil utilisateur (FsvUserMenu) ET menu visiteur (FsvGuestMenu) ET
   * bouton login : MASQUÉS en mobile car le drawer a déjà tout ça (Mon Panel
   * en haut + Connexion / Créer un compte). Évite la redondance. */
  .hd-right > div:has(> button.button) {
    display: none !important;
  }
  .hd-right #loginButtonContainer {
    display: none !important;
  }
  /* Cloche : taille uniforme */
  .hd-right .notif-bell {
    width: 40px !important;
    height: 40px !important;
  }
  /* (Login button bloc — settings de fallback gardés au cas où) */
  .hd-right .login-fallback {
    height: 40px;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
  }

  /* Drawer mobile = REPLIQUE exacte de la .side-panel du live fss.lol */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    height: 100vh !important;
    background: rgba(38, 38, 38, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 999 !important;
    padding: 20px 0 40px !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    list-style: none !important;
  }

  .nav-menu.is-open {
    transform: translateX(0) !important;
  }


  .nav-menu > li.submenu {
    display: block;
    width: 100%;
    border-bottom: 1px solid #232323;
    list-style: none;
  }

  /* Header du drawer mobile : recherche + Mon Panel — fixe en haut */
  .nav-menu .nav-mobile-header {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, #1a1a1a, #161616);
    padding: 56px 16px 14px;
    border-bottom: 1px solid #2a2a2a;
    list-style: none;
  }
  .nav-menu .nav-mobile-search {
    margin-bottom: 10px;
  }
  .nav-menu .nav-mobile-search .search-wrap,
  .nav-menu .nav-mobile-search > * {
    display: block !important;
    width: 100%;
  }
  .nav-menu .nav-mobile-search input,
  .nav-menu .nav-mobile-search .search-input,
  .nav-menu .nav-mobile-search [type="search"],
  .nav-menu .nav-mobile-search [type="text"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    background: #0d0d0d !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-size: 14px !important;
  }
  .nav-menu .nav-mobile-panel {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(244, 134, 37, 0.18), rgba(244, 134, 37, 0.05));
    border: 1px solid rgba(244, 134, 37, 0.45);
    border-radius: 6px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s;
  }
  .nav-menu .nav-mobile-panel:hover {
    background: rgba(244, 134, 37, 0.25);
  }
  .nav-menu .nav-mobile-panel > i {
    color: #ff7e28;
    font-size: 16px;
  }

  /* L'entête de chaque section (FILMS, SÉRIES, etc.) — tap area généreuse */
  .nav-menu > li.submenu > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    min-height: 52px;
    color: #f0f0f0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 126, 40, 0.2);
  }

  /* Chevron indicateur — pivote quand le sous-menu est ouvert */
  .nav-menu > li.submenu > a::after {
    content: "▾";
    font-size: 12px;
    color: #ff7e28;
    transition: transform 0.2s;
    margin-left: 8px;
  }
  .nav-menu > li.submenu.is-open > a::after {
    transform: rotate(180deg);
  }

  .nav-menu > li.submenu > a:hover,
  .nav-menu > li.submenu > a:active {
    background: rgba(255, 126, 40, 0.1);
    color: #ff7e28;
  }

  /* ==== Sous-menus mobile : neutralise les rules desktop du live ==== */
  /* Le live force min-width: 800px sur .hidden-menu → débordait à droite. */
  .nav-menu .hidden-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    box-shadow: none !important;
    padding: 6px 0 14px !important;
    border-top: 1px solid rgba(255, 126, 40, 0.15) !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    border-top: 1px solid rgba(255, 126, 40, 0.15) !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
  }

  .nav-menu li.submenu.is-open > .hidden-menu {
    display: block !important;
    animation: fssMenuSlideDown 0.25s ease-out;
  }
  @keyframes fssMenuSlideDown {
    from { opacity: 0; transform: translateY(-8px) !important; }
    to { opacity: 1; transform: translateY(0) !important; }
  }

  /* Le live force grid-template-columns: repeat(4, 1fr) → on remet en colonne */
  .nav-menu .hidden-menu .menu-container {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Section (Par Genre, Par Langue, ...) — chacune est un accordion imbriqué.
     Par défaut le CONTENU est masqué, seul le titre cliquable est visible.
     La 1ère section reste ouverte par défaut (UX original). */
  .nav-menu .menu-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .nav-menu .menu-section + .menu-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Titre de sous-section (Par Genre, Par Langue, etc.) — cliquable */
  .nav-menu .menu-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 22px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #cccccc !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    border-bottom: none !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 126, 40, 0.2);
    transition: color 0.15s, background 0.15s;
    user-select: none;
  }
  .nav-menu .menu-section-title::after {
    content: "+" !important;
    margin-left: auto !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #ff7e28 !important;
    line-height: 1 !important;
    transition: transform 0.2s !important;
  }
  .nav-menu .menu-section.is-open > .menu-section-title::after {
    content: "−" !important;
  }
  .nav-menu .menu-section-title:hover,
  .nav-menu .menu-section-title:active {
    background: rgba(255, 126, 40, 0.06) !important;
    color: #ff7e28 !important;
  }
  .nav-menu .menu-section.is-open > .menu-section-title {
    color: #ff7e28 !important;
  }
  .nav-menu .menu-section-title i {
    color: rgba(255, 126, 40, 0.8) !important;
    font-size: 13px !important;
    margin-right: 0 !important;
    width: 16px !important;
    text-align: center !important;
  }

  /* Contenu de la section : masqué par défaut, visible avec .is-open */
  .nav-menu .menu-section > a,
  .nav-menu .menu-section > .menu-subsection {
    display: none !important;
  }
  .nav-menu .menu-section.is-open > a,
  .nav-menu .menu-section.is-open > .menu-subsection {
    display: flex !important;
    animation: fssMenuSlideDown 0.2s ease-out;
  }
  /* Espacement après section ouverte */
  .nav-menu .menu-section.is-open {
    padding-bottom: 8px !important;
  }

  /* Liens dans les sections — tap area large, indenté, animation clean */
  .nav-menu .menu-section a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 22px 9px 38px !important;
    min-height: 40px !important;
    color: #d4d4d4 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
    -webkit-tap-highlight-color: rgba(255, 126, 40, 0.2);
  }
  .nav-menu .menu-section a:hover,
  .nav-menu .menu-section a:active {
    background: linear-gradient(90deg, rgba(255, 126, 40, 0.15), transparent) !important;
    color: #fff !important;
    padding-left: 44px !important;
  }
  .nav-menu .menu-section a > i,
  .nav-menu .menu-section a > .fa {
    color: rgba(255, 126, 40, 0.6) !important;
    width: 16px !important;
    font-size: 13px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    opacity: 0.8;
    transition: all 0.15s !important;
    transform: none !important;
  }
  .nav-menu .menu-section a:hover > i,
  .nav-menu .menu-section a:hover > .fa {
    color: #ff7e28 !important;
    opacity: 1;
    transform: scale(1.1) !important;
  }

  /* Sous-section ("Films Par Pays") imbriquée */
  .nav-menu .menu-subsection {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.06) !important;
  }
  .nav-menu .menu-subsection-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 22px 6px 38px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255, 126, 40, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
  }
  .nav-menu .menu-subsection a {
    padding-left: 48px !important;
    font-size: 13px !important;
  }
  .nav-menu .menu-subsection a:hover {
    padding-left: 54px !important;
  }

  /* Cache les pseudo-elements ::after du live qui faisaient un underline */
  .nav-menu > li > a::after,
  .nav-menu > li.submenu > a::after {
    content: "▾" !important;
    background: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    color: #ff7e28 !important;
    font-size: 12px !important;
    margin-left: auto !important;
    transition: transform 0.2s !important;
    bottom: auto !important;
    left: auto !important;
  }
  .nav-menu > li.submenu.is-open > a::after {
    transform: rotate(180deg) !important;
  }
  /* Pas de chevron sur le header (search+panel) ni les liens directs */
  .nav-menu .nav-mobile-header > a::after,
  .nav-menu li.submenu:not(:has(.hidden-menu)) > a::after {
    content: none !important;
  }
  /* Items sans sous-menu (TV Live, Animes, Musique, F.A.Q, Ma Liste, Favoris) */
  .nav-menu li.submenu > a:not(:has(+ .hidden-menu))::after {
    content: "›" !important;
    color: rgba(255, 126, 40, 0.5) !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Override des animations live qui pourraient cacher les sections */
  .nav-menu > li.submenu {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* ===== Module RECHERCHE en mobile : panneau plein écran OPAQUE.
   * L'overlay est portalé vers <body> donc il échappe au transform du drawer.
   * On force position fixed sur tout le viewport + fond opaque solide pour
   * masquer ce qui est derrière (drawer + page). */
  .search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 12px !important;
    z-index: 10001 !important;
    background: #0a0a0a !important;
    overflow-y: auto !important;
    /* Pas de blur — on veut un panneau VRAIMENT opaque */
    backdrop-filter: none !important;
  }
  .search-overlay > div:first-child {
    margin-bottom: 12px !important;
  }
  /* Grid des résultats : compact 3 colonnes mobile */
  .search-overlay div[style*="grid-template-columns"],
  .search-overlay div[style*="gridTemplateColumns"] {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
    gap: 8px !important;
  }
  /* Carte de résultat compacte */
  .search-poster-card {
    border-radius: 4px !important;
  }
  .search-poster-card > div:last-child {
    padding: 5px 7px !important;
  }
  .search-poster-card div[title] {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  /* Champ de recherche : taille tactile + évite zoom iOS */
  .search-overlay input[type="search"],
  .search-overlay input[type="text"],
  .nav-mobile-search input {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  /* Bouton fermer du search overlay : plus accessible */
  .search-overlay button[aria-label*="erm" i] {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
  }

  /* Backdrop semi-transparent quand menu ouvert */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 240;
    backdrop-filter: blur(2px);
  }
  body.nav-open {
    overflow: hidden; /* bloque le scroll body quand drawer ouvert */
  }

  /* Header et search en mobile */
  .header-in {
    padding: 8px 12px;
  }

  .hd-right .search-wrap {
    display: none;
  }

  body.nav-open .hd-right .search-wrap {
    display: block;
  }

  /* Bouton X close — VRAI élément cliquable (pas un ::before) */
  .nav-menu::before {
    content: none !important;
  }
  .nav-menu .nav-mobile-close-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: visible;
    position: relative;
  }
  .nav-mobile-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #ddd;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s;
  }
  .nav-mobile-close-btn:hover,
  .nav-mobile-close-btn:active {
    background: rgba(255, 126, 40, 0.18);
    border-color: #ff7e28;
    color: #ff7e28;
  }
}

/* Mobile small : ajustements */
@media (max-width: 480px) {
  .nav-menu {
    width: min(340px, 92vw);
  }
  .nav-menu > li.submenu > a {
    font-size: 15px;
    padding: 14px 18px;
  }
  .nav-menu .menu-section a {
    padding: 10px 18px 10px 28px !important;
    font-size: 13px;
  }
}

@media (min-width: 1221px) {
  .btn-menu {
    display: none !important;
  }
  /* Header mobile (search + Mon Panel) caché en desktop, ainsi que le
   * wrapper du bouton X (qui sinon apparaît comme un li dans la nav). */
  .nav-menu .nav-mobile-header,
  .nav-menu .nav-mobile-only,
  .nav-menu .nav-mobile-close-wrapper {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------
 * Full fiche poster — badges qualité GAUCHE / version DROITE.
 * Le live met les 2 à droite par défaut, on inverse via override.
 * ---------------------------------------------------------------------------- */
.fposter .short-meta.short-qual {
  /* short-qual = audioVersion (VF, VOSTFR, TRUEFRENCH...) → DROITE */
  right: 6px !important;
  left: auto !important;
  top: 6px !important;
  background: rgba(15, 15, 15, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fposter .short-meta.short-label {
  /* short-label = quality (HD, BLURAY, CAM...) → GAUCHE */
  left: 6px !important;
  right: auto !important;
  top: 6px !important;
  background: rgba(15, 15, 15, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* CAM → flag rouge sur la qualité (gauche) */
.fposter .short-meta.short-label[data-quality="CAM" i],
.fposter .short-meta.short-label:has(+ * [class*="cam" i]) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

/* ----------------------------------------------------------------------------
 * Badges qualité (GAUCHE) + version (DROITE)
 * Style sobre par défaut : blanc/gris transparent sur fond sombre.
 * Quality "CAM" → ROUGE flagrant (signal "qualité pourrie").
 * Forme actuelle conservée (rounded). Au HOVER de la card, badges + vote-circle
 * s'effacent pour révéler les boutons d'action (favori + info).
 * ---------------------------------------------------------------------------- */
.short .film-quality,
.short .film-version {
  position: absolute !important;
  top: 6px !important;
  background: rgba(15, 15, 15, 0.78) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  padding: 0px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  height: 15px !important;
  line-height: 15px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 5 !important;
  width: auto !important;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.short .film-quality {
  left: 6px !important;
  right: auto !important;
}
.short .film-version {
  right: 6px !important;
  left: auto !important;
}
.short .film-quality a,
.short .film-version a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Quality CAM → rouge flag (alerte qualité) */
.short .film-quality:has(a[href*="qualit=CAM" i]),
.short .film-quality[data-quality="CAM" i] {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.5),
    0 4px 10px rgba(220, 38, 38, 0.5) !important;
}

/* Au HOVER de la card, on FADE les badges (sauf CAM qui reste visible — alerte) */
.short:hover .film-version,
.short:hover .film-quality:not([data-quality="CAM" i]):not(:has(a[href*="qualit=CAM" i])) {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* ---- Layout shorts : badges qualité/version EMPILÉS À GAUCHE,
       vote-score À DROITE (revient au design d'origine).
       Le cercle conic-gradient est seulement sur les FULL FICHES, pas ici. ---- */
.short .film-quality {
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
}
.short .film-version {
  top: 26px !important; /* sous le badge qualité */
  left: 6px !important;
  right: auto !important;
}

/* Pour les shorts SÉRIES : .mli-eps (nombre d'épisodes) prend la place du
 * badge qualité (top-left), et la version glisse de 1-2px en dessous.
 * Sans override, mli-eps a position absolute top-left + height 32px et
 * chevauche le badge version. */
.short .mli-eps {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  margin: 0 !important;
  height: auto !important;
  padding: 2px 7px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  background: rgba(15, 15, 15, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  letter-spacing: 0.4px !important;
  z-index: 5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap;
}
.short .mli-eps i { display: none !important; }
/* Quand .mli-eps est présent (séries) on REMONTE la version sous lui (gap 2px) */
.short:has(.mli-eps) .film-version {
  top: 26px !important;
}
/* Et on cache le badge qualité (qui n'a pas de sens sur une série épisodes) */
.short:has(.mli-eps) .film-quality {
  display: none !important;
}
/* Score (bulle de note) à DROITE — utilise la div .vote-circle existante mais
   en simple pill sans conic gradient */
.short .vote-circle {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: 18px !important;
  min-width: 32px;
  background: rgba(0, 0, 0, 0.78) !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 7px !important;
  z-index: 5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: short-score-fade 0.3s ease-out 0.05s backwards;
}
@keyframes short-score-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.short .vote-circle::before,
.short .vote-circle::after { content: none; }
.short .vote-circle .vote-score {
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1;
}
.short .vote-circle .vote-score::before {
  content: "★ ";
  color: #f59e0b;
}

/* Au HOVER de la card, score se cache (laisse place au menu actions) */
.short:hover .vote-circle {
  opacity: 0;
  pointer-events: none;
}

/* ---- Hover actions sur poster ---- */
/* 3 boutons révélés au hover, empilés à droite : ❤ favori, ℹ info, ✏ edit */
.short .info-button,
.short .fsv-short-fav,
.short .fsv-edit-pin {
  position: absolute !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(15, 15, 15, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-shadow: none !important;
  z-index: 6 !important;
  opacity: 0 !important;
  transform: scale(0.85) translateX(6px) !important;
  transition: opacity 0.18s, transform 0.18s, background 0.18s !important;
  text-decoration: none !important;
}
.short .info-button { top: 8px !important; color: #ff7e28 !important; font-family: serif !important; font-size: 16px !important; }
.short .fsv-short-fav { top: 46px !important; color: #f87171 !important; }
.short .fsv-short-fav.is-fav { color: #ef4444 !important; background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.5) !important; }
.short .fsv-edit-pin { top: 84px !important; color: #ff7e28 !important; }

.short:hover .info-button,
.short:hover .fsv-short-fav,
.short:hover .fsv-edit-pin {
  opacity: 1 !important;
  transform: scale(1) translateX(0) !important;
}
.short .info-button:hover,
.short .fsv-short-fav:hover,
.short .fsv-edit-pin:hover {
  background: linear-gradient(135deg, #f48625, #ff8533) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.08) !important;
}
.short .fsv-short-fav.is-fav:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

/* ----------------------------------------------------------------------------
 * Synopsis full fiche — style live FSS (font 22px Inter, justify, ombre).
 * Pas de heading "Synopsis", juste le texte. Si trop long → "Afficher la suite".
 * ---------------------------------------------------------------------------- */
.fdesc-tagline {
  font-style: italic;
  color: #ff7e28;
  font-size: 17px;
  margin: 12px 0 8px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
/* La règle .fdesc du live override avec font-size 22px etc. — on s'aligne
 * dessus avec !important pour battre les .css legacy qui forcent 14px. */
.fdesc {
  margin: 15px 0 !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.fdesc .fdesc-text {
  margin: 0;
  font-size: 22px;
  line-height: 27px;
  text-align: justify;
  color: #ffffff;
}
.fdesc.slice-masked .fdesc-text {
  /* Quand clamp actif : effet mask gradient pour fade au bas du texte */
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fdesc-more {
  display: block;
  margin: 10px auto 0;
  background: transparent;
  border: 0;
  color: #ff7e28;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
  transition: color 0.15s;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.fdesc-more:hover {
  color: #ffa05c;
  text-decoration: underline;
}

/* Titre h1 de la fiche — style live */
.fmain h1 {
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  font-size: 28px !important;
  color: #FFF !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* ----------------------------------------------------------------------------
 * Cast — en basse résolution : slider horizontal au lieu du grid.
 * Le DERNIER item visible reçoit un overlay sombre + label "Voir la suite"
 * pour signaler qu'il y a plus à voir / clic = expand.
 * ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .actors-container ul#actorList.fsv-actor-list {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    /* Cache la scrollbar (esthétique) */
    scrollbar-width: none;
  }
  .actors-container ul#actorList.fsv-actor-list::-webkit-scrollbar {
    display: none;
  }
  .actors-container ul#actorList.fsv-actor-list > li {
    flex: 0 0 38% !important;
    max-width: 200px !important;
    min-width: 130px;
    scroll-snap-align: start;
    position: relative;
  }
  /* Last visible card = peeking : overlay gradient + label */
  .actors-container ul#actorList.fsv-actor-list > li:last-child::after {
    content: "→ Voir la suite";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.85) 100%
    );
    color: #ff7e28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 4px;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  }
}
@media (max-width: 600px) {
  .actors-container ul#actorList.fsv-actor-list > li {
    flex: 0 0 50% !important;
    min-width: 120px;
  }
}

/* ----------------------------------------------------------------------------
 * 4) Effet 3D sur le poster en fiche full (comme l'original)
 * ---------------------------------------------------------------------------- */

.fposter {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.fposter .dvd-container,
.fposter > img:not([class]) {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
  transform: rotateY(0deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  will-change: transform;
  overflow: visible;
}

.fposter .dvd-container img.dvd-thumbnail,
.fposter > img:not([class]) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.fposter:hover .dvd-container,
.fposter:hover > img:not([class]) {
  transform: rotateY(-12deg) translateZ(0);
  box-shadow: 12px 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(244, 134, 37, 0.2);
}

/* Bouton edit ✏️ pour Admin/Team — pin haut-droit du poster */
.fsv-edit-pin {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  border: 1.5px solid rgba(244, 134, 37, 0.6);
  border-radius: 50%;
  color: #ff7e28;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.18s ease;
  pointer-events: auto;
}
.short:hover .fsv-edit-pin,
.fposter:hover .fsv-edit-pin,
.fsv-edit-pin:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.fsv-edit-pin:hover {
  background: linear-gradient(135deg, #f48625, #ff8533);
  border-color: #fff;
  color: #fff;
  transform: scale(1.1);
}

/* Badges overlay sur le poster (statut série + nb épisodes dispo) */
.fposter .poster-badge {
  position: absolute;
  z-index: 4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.fposter .poster-status {
  top: 8px;
  left: 8px;
  background: rgba(244, 134, 37, 0.95);
}
.fposter .poster-eps {
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.85);
}

/* dvd-overlay : on force le display flex pour notre popup React (le live a
 * display:none par défaut, contourné par JS — nous on le pose en inline). */
.dvd-overlay {
  display: flex !important;
}

/* Trailer backdrop dans le player preview — fill total du player area avec
 * cover (pas de bandes noires). Wrapper interne porte l'aspect-ratio 16:9
 * (fiable sur div), iframe inside fill 100%×100%. */
#main-player .trailer-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
#main-player .trailer-backdrop .trailer-iframe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover desktop (player 3:1) : largeur = 100% du parent (1200), hauteur via
     aspect-ratio 16:9 → 675px. Déborde verticalement de 137px haut/bas →
     clipping ✓. Le YT remplit horizontalement. */
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}
/* Mobile (player ratio 12:9, plus carré que 16:9) : on bascule sur fill par
   hauteur (height 100% + aspect-ratio donne width = height × 16/9). */
@media (max-width: 768px) {
  #main-player .trailer-backdrop .trailer-iframe-wrap {
    width: auto;
    height: 100%;
  }
}
#main-player .trailer-backdrop .trailer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0.18;
  transition: opacity 0.45s ease;
  filter: saturate(0.9);
  display: block;
}
#main-player:hover .trailer-backdrop .trailer-iframe {
  opacity: 0.5;
  filter: saturate(1.05);
}

/* Bouton mute/unmute Netflix-style en haut à droite du trailer preview.
 * Apparaît au hover du #main-player, click toggle le mute via postMessage YT. */
.trailer-mute-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.18s, transform 0.12s;
}
#main-player:hover .trailer-mute-btn {
  opacity: 1;
}
.trailer-mute-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: #fff;
  transform: scale(1.06);
}

/* Trailer modal — le live force `.modal-content-custom { position:fixed; top:50%;
 * left:50%; transform: translate(-50%,-50%) }`. Combiné avec notre flex centering
 * (qui centre déjà), ça shifte le modal hors écran (bas-droite ou haut-gauche
 * selon le navigateur). On NEUTRALISE ces règles. */
.modal-custom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-content-custom {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  height: auto !important;
}

/* ----------------------------------------------------------------------------
 * 5) Box Office navigation bar — style ressemblant l'original
 * ---------------------------------------------------------------------------- */

.box-office-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 10px 14px;
  margin: 16px 0 8px;
  background: linear-gradient(90deg, rgba(244, 134, 37, 0.08), transparent);
  border-left: 3px solid #f48625;
  border-radius: 4px;
}

.box-office-nav .bn-title {
  font-size: 18px;
  font-weight: 800;
  color: #f48625;
  margin-right: 16px;
  letter-spacing: 1px;
}

.box-office-nav .bn-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  border: none;
}

.box-office-nav .bn-tab:hover {
  color: #fff;
  background: rgba(244, 134, 37, 0.15);
}

.box-office-nav .bn-tab.active {
  color: #fff;
  background: #f48625;
}

/* ----------------------------------------------------------------------------
 * Player area — on respecte STRICTEMENT le live :
 *   #player-container { height: 400px } (desktop) ou auto (mobile)
 *   #main-player { width:100%; height:100% } → fill le container
 *   .play-button { position:absolute; top:50%; left:50% } → centre du container
 * On NE TOUCHE PAS à height/aspect-ratio du main-player ici (laisse le live).
 * ---------------------------------------------------------------------------- */

/* Wrapper externe (player-container) : juste recentrage horizontal max-width */
#player-container {
  margin: 16px auto 0;
  max-width: 1280px;
}

/* Host strip : on garde EXACTEMENT le live fullfilm.css ligne 388 :
 *   position:absolute; left:0; right:0  (top auto = sous main-player)
 * Le .customDiv 70px sert de spacer pour .fmain. */

/* Play-button — z-index élevé pour rester cliquable au-dessus du wrapper
 * trailer (qui est en z-index:1). Sans ça, le wrapper attrape parfois le
 * clic et la lecture ne démarre pas. */
#main-player .play-button {
  z-index: 10;
  cursor: pointer;
}

/* L'iframe interne (post-play) doit remplir le main-player 400px */
#main-player iframe#video-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.player-option {
  position: relative;
}

/* Dropdown : le strip est en BAS du player → dropdown s'ouvre vers le HAUT
 * (bottom:100%) pour rester visible sur l'iframe.
 * width:100% prend la largeur du bouton parent → centré naturellement. */
.version-dropdown {
  bottom: 100% !important;
  top: auto !important;
  left: 0 !important;
  width: 100% !important;
  border-radius: 4px 4px 0 0 !important;
  border-bottom: 2px solid #f48625 !important;
  background: #0f0f0f !important;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.7) !important;
  z-index: 100 !important;
}

.version-dropdown .version-option {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.version-dropdown .version-option:hover,
.version-dropdown .version-option:focus {
  background: #f48625 !important;
  color: #fff !important;
}

/* Hover desktop ouvre le dropdown */
@media (min-width: 769px) {
  .player-option:hover .version-dropdown,
  .player-option.is-open .version-dropdown {
    display: block !important;
  }
}

/* Mobile : tap to toggle (le live le fait via JS, on garde la même logique
 * mais sans le JS — le clic sur le bouton parent marche déjà via React) */
@media (max-width: 768px) {
  .player-option.is-open .version-dropdown {
    display: block !important;
  }
}

/* Series episodes list : on laisse 100% sspplayer.css du live piloter le style
 * (column-header, episode-row, ep-download/title/checkbox/info, etc.) — pas
 * d'override ici sinon ça casse la fidélité visuelle au live.
 *
 * Petit ajustement : remonter visuellement la barre des hosts au-dessus de
 * l'iframe (le live a une marge naturelle, on la reproduit avec un padding
 * en haut + une marge sous la bar). */
#player-buttons-bar,
.player-buttons-bar {
  padding: 8px 0 !important;
  margin-bottom: 6px;
}

.iframe-container {
  margin-top: 6px;
}

/* Fullscreen sur le CONTAINER : permet au src de l'iframe de changer
 * (autoplay épisode suivant) sans faire sortir du plein écran. */
.iframe-container:fullscreen,
.iframe-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iframe-container:fullscreen #sv-fr,
.iframe-container:-webkit-full-screen #sv-fr {
  width: 100% !important;
  height: 100% !important;
}
/* Cache les indicators superflus en fullscreen (apparence player propre) */
.iframe-container:fullscreen #current-episode-indicator,
.iframe-container:fullscreen #autoplay-indicator,
.iframe-container:fullscreen #fullscreen-btn,
.iframe-container:-webkit-full-screen #current-episode-indicator,
.iframe-container:-webkit-full-screen #autoplay-indicator,
.iframe-container:-webkit-full-screen #fullscreen-btn {
  z-index: 100;
}

/* fullfilm.css force `.ftabs { background-color: #000 }` qui crée un fond
 * noir derrière le player + épisodes. On rend tout transparent. */
.ftabs,
.ftabs.tabs-box,
.tabs-box {
  background-color: transparent !important;
}

/* Épisode déjà visionné en entier (data-ep-progress = 100%) :
 * couleur du titre verte = repère visuel "vu" */
.episode-row.ep-watched .ep-title span {
  color: #2ecc71;
}
.episode-row.ep-watched .ep-title i.fa-play::before {
  content: "\f00c"; /* fa-check */
}

/* ----------------------------------------------------------------------------
 * Vote thumbs — fix clic & affichage rond
 * ---------------------------------------------------------------------------- */

/* Trois disques 80×80 côte à côte (UP / NOTE / DOWN) reprenant la structure
 * `.frate .fr-box22 .rate-plus|fr-common|rate-minus` du live FSS.
 * Inspiré de cuztom.css live mais propre, sans inline-styles. */
.frate {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 12px;
}

.frate .fr-box22 {
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

/* Boutons UP / DOWN — RING conic-gradient proportionnel au % de votes.
 * Le green-ring sur rate-plus fait `--up-pct%` du tour ; le red-ring sur
 * rate-minus fait `--down-pct%` du tour. Plus le score est haut, plus le
 * ring vert est complet et le rouge petit. */
.frate .rate-plus,
.frate .rate-minus {
  appearance: none;
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #bbb;
  transition: transform 0.18s ease;
  user-select: none;
  font-family: inherit;
  font-size: inherit;
}
/* Ring conic — vert vif pour up, orange-rouge chaud pour down.
 * Ring fin de 3px (mask radial entre 35.5px et 38.5px sur un cercle 80px). */
.frate .rate-plus::before,
.frate .rate-minus::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--ring-color, transparent) 0%,
    var(--ring-color, transparent) var(--ring-pct, 0%),
    rgba(255, 255, 255, 0.08) var(--ring-pct, 0%),
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 35.5px, black 36px, black 38.5px, transparent 39px);
  mask: radial-gradient(circle, transparent 35.5px, black 36px, black 38.5px, transparent 39px);
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--ring-glow, transparent));
  transition: --ring-pct 0.6s ease;
}
.frate .rate-plus {
  --ring-color: #16a34a;       /* vert plus saturé que #22c55e */
  --ring-glow: rgba(22, 163, 74, 0.55);
}
.frate .rate-minus {
  --ring-color: #f97316;       /* orange-rouge chaud (rouge sang trop sombre) */
  --ring-glow: rgba(249, 115, 22, 0.55);
}

.frate .rate-plus .fa { color: #16a34a; font-size: 38px; line-height: 1; transition: transform 0.18s ease; }
.frate .rate-minus .fa { color: #f97316; font-size: 38px; line-height: 1; transition: transform 0.18s ease; }
.frate .rate-plus:hover .fa { transform: scale(1.15) rotate(-8deg); }
.frate .rate-minus:hover .fa { transform: scale(1.15) rotate(8deg); }

.frate .rate-plus .fr-num,
.frate .rate-minus .fr-num {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.3px;
}
/* Cache le compteur quand il est exactement à 0 (pas de vote → pas affiché) */
.frate .fr-num:empty,
.frate .fr-num:where([data-zero]) {
  display: none;
}

/* Hover : on intensifie l'icône (scale + glow) sans remplir le fond */
.frate .rate-plus:not(:disabled):hover {
  transform: translateY(-1px);
}
.frate .rate-plus:not(:disabled):hover .fa {
  text-shadow: 0 0 16px rgba(22, 163, 74, 0.95);
}
.frate .rate-minus:not(:disabled):hover {
  transform: translateY(-1px);
}
.frate .rate-minus:not(:disabled):hover .fa {
  text-shadow: 0 0 16px rgba(249, 115, 22, 0.95);
}

/* État "j'ai voté" — l'icône s'illumine + le ring se renforce.
   On lit l'élément (.fr-num est legacy mais peut rester) */
.frate .rate-plus.is-active .fa {
  color: #4ade80;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.8));
}
.frate .rate-plus.is-active::before {
  background: conic-gradient(
    from 0deg,
    #22c55e 0%,
    #22c55e var(--ring-pct, 0%),
    rgba(74, 222, 128, 0.25) var(--ring-pct, 0%),
    rgba(74, 222, 128, 0.25) 100%
  );
}
.frate .rate-minus.is-active .fa {
  color: #f87171;
  filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.8));
}
.frate .rate-minus.is-active::before {
  background: conic-gradient(
    from 0deg,
    #ef4444 0%,
    #ef4444 var(--ring-pct, 0%),
    rgba(248, 113, 113, 0.25) var(--ring-pct, 0%),
    rgba(248, 113, 113, 0.25) 100%
  );
}

.frate button:disabled { cursor: wait; opacity: 0.7; }

/* Animation pop quand on vote — feedback satisfaisant */
@keyframes frate-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { transform: scale(1); }
}
.frate .rate-plus.is-just-voted,
.frate .rate-minus.is-just-voted {
  animation: frate-pop 0.45s ease-out;
}

/* Animation d'entrée — au chargement de la page, les 3 disques apparaissent
 * en cascade avec un petit "spring". */
@keyframes frate-enter {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(8px);
  }
  60% {
    transform: scale(1.06) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.frate .fr-box22 {
  animation: frate-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.frate .fr-box22:nth-child(1) { animation-delay: 0.05s; }
.frate .fr-box22:nth-child(2) { animation-delay: 0.18s; }
.frate .fr-box22:nth-child(3) { animation-delay: 0.31s; }

/* État "désactivé" pour les ghost (pas le droit de voter) — visuel grisé,
 * tooltip "Connecte-toi pour voter". */
.frate .rate-plus[data-blocked="1"],
.frate .rate-minus[data-blocked="1"] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.7);
}
.frate .rate-plus[data-blocked="1"]:hover,
.frate .rate-minus[data-blocked="1"]:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.frate .rate-plus[data-blocked="1"]:hover .fa,
.frate .rate-minus[data-blocked="1"]:hover .fa {
  transform: none;
}

/* Flash rouge quand un ghost essaie de voter — feedback "tu peux pas" */
@keyframes frate-blocked-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.frate.is-blocked-flash {
  animation: frate-blocked-shake 0.5s ease-out;
}
.frate.is-blocked-flash::after {
  content: "Connecte-toi pour voter";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: #ff4444;
  background: rgba(255, 68, 68, 0.12);
  border: 1px solid rgba(255, 68, 68, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  animation: frate-tooltip-fade 0.7s ease-out;
}
@keyframes frate-tooltip-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.frate {
  position: relative;
}

/* Note moyenne — cercle TRANSPARENT avec bord 1px gris/blanc (style live).
 * Élargi à 72px pour que le mot "moyenne" rentre sans déborder ; le couple
 * note + label remonte légèrement (padding-bottom) pour que le label tombe
 * dans la zone large du cercle au lieu de l'étranglement bas. */
.frate .fr-count.fr-common {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 72px;
  /* Centre dans le fr-box22 80×80 */
  margin: 4px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3) inset, 0 4px 14px rgba(0, 0, 0, 0.5);
}
.frate .fr-count.fr-common > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Pousse contenu vers le haut → "moyenne" reste dans la zone large */
  padding-bottom: 6px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.frate .fr-count.fr-common > div div {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-top: 3px;
  opacity: 0.85;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
 * 6) Blocs de commentaires modernisés
 * Layout : Like en HAUT À DROITE, Reply en BAS À DROITE, auteur en BAS À GAUCHE
 * ---------------------------------------------------------------------------- */

.comm-thread-wrap {
  padding: 28px clamp(16px, 4vw, 48px);
  max-width: 1100px;
  margin: 0 auto;
}

.comm-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
}
.comm-thread-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.comm-thread-count {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  margin-left: 4px;
}

/* Sort select */
.comm-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comm-sort-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.comm-sort-select {
  background: #1a1a1a;
  color: #ddd;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23f48625' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}
.comm-sort-select:hover,
.comm-sort-select:focus {
  border-color: #f48625;
}

/* Editor wrap : cadre carte comme un commentaire pour cohérence visuelle */
.comm-editor-wrap {
  margin-bottom: 26px;
}
.comm-empty {
  text-align: center;
  color: #666;
  padding: 40px 20px;
  font-size: 14px;
}

/* ----------------------------------------------------------------------------
 * Comment editor — design "carte pro" : header note (étoiles), zone texte
 * propre avec focus orange, toolbar inline en bas avec bouton publier solide.
 * ---------------------------------------------------------------------------- */
.comm-editor {
  background: linear-gradient(180deg, #1c1c1c 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.comm-editor:focus-within {
  border-color: rgba(244, 134, 37, 0.55);
  box-shadow: 0 6px 22px rgba(244, 134, 37, 0.12);
}
.comm-editor.is-compact {
  padding: 10px 12px;
  gap: 8px;
  border-radius: 8px;
}

.comm-editor-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.comm-editor-rating-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.comm-editor-rating-clear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #999;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.comm-editor-rating-clear:hover {
  background: rgba(220, 53, 69, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.comm-editor-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  padding: 12px 14px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  outline: none;
  transition: border-color 0.15s;
}
.comm-editor-textarea:focus {
  border-color: rgba(244, 134, 37, 0.5);
}
.comm-editor-textarea::placeholder {
  color: #666;
}

.comm-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comm-editor-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
}
.comm-editor-tool:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.comm-editor-tool.is-active {
  background: rgba(244, 134, 37, 0.18);
  color: #ff7e28;
}
.comm-editor-spacer {
  flex: 1;
}
.comm-editor-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #f48625, #ff8533);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  transition: transform 0.12s, box-shadow 0.18s, opacity 0.18s;
  letter-spacing: 0.3px;
}
.comm-editor-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 134, 37, 0.5);
}
.comm-editor-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.comm-editor-smileys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: #0d0d0d;
  border: 1px solid #232323;
  border-radius: 8px;
}
.comm-editor-smiley {
  background: transparent;
  border: 0;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
}
.comm-editor-smiley:hover {
  background: rgba(244, 134, 37, 0.2);
}

.comm-editor-error {
  margin: 0;
  padding: 8px 12px;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 6px;
  color: #ff8a95;
  font-size: 12px;
}

/* ----------------------------------------------------------------------------
 * Étoiles AlloCiné-style — orange remplies, gris pour vide,
 * demi-étoiles via clipPath SVG. Hover preview en interactive.
 * ---------------------------------------------------------------------------- */
.fsv-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.fsv-star-wrap {
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.fsv-star-svg {
  display: block;
}
.fsv-star-bg {
  fill: #2e2e2e;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.5;
}
.fsv-star-fill {
  fill: #ff9b2c;
  filter: drop-shadow(0 0 2px rgba(244, 134, 37, 0.6));
}
.fsv-stars.is-interactive .fsv-star-wrap {
  cursor: pointer;
}
.fsv-star-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fsv-star-half-left { left: 0; }
.fsv-star-half-right { right: 0; }
.fsv-stars.is-interactive .fsv-star-wrap:hover .fsv-star-bg {
  fill: #3a3a3a;
}
.fsv-stars-label {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #ffa05c;
  letter-spacing: 0.3px;
}

/* Étoiles dans le byline du commentaire — petites, alignées juste avant "Par X" */
.comm-byline-stars {
  display: inline-flex;
  margin-right: 8px;
  vertical-align: middle;
}

/* List & Item */
.comm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comm-item {
  background: linear-gradient(180deg, #1c1c1c 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px 16px 14px 14px;
  display: flex;
  gap: 14px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.comm-item:hover {
  border-color: rgba(244, 134, 37, 0.3);
}

.comm-item.is-reply {
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  margin-left: 0;
}

/* Avatar */
.comm-left {
  flex-shrink: 0;
}
.comm-left img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
  border: 1.5px solid #2a2a2a;
}
.comm-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f48625, #c66405);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  border: 1.5px solid rgba(244, 134, 37, 0.4);
}

.comm-right {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 64px; /* place pour le bouton like en haut à droite */
}

/* Like button — TOP RIGHT */
.comm-like-btn {
  position: absolute;
  top: -2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 2;
}
.comm-like-btn:hover {
  background: rgba(244, 134, 37, 0.12);
  border-color: rgba(244, 134, 37, 0.5);
  color: #ff7e28;
  transform: scale(1.04);
}
.comm-like-btn.is-liked {
  background: linear-gradient(135deg, #f48625, #ff8533);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(244, 134, 37, 0.45);
}
.comm-like-btn.is-liked:hover {
  filter: brightness(1.05);
  transform: scale(1.04);
}

.comm-date {
  color: #777;
  font-size: 11px;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

/* Texte du commentaire — police plus grande et confort de lecture renforcé */
.comm-item .comm-text,
.comm-item .comm-right > div:not(.comm-footer):not(.comm-replies):not(.comm-reply-editor) {
  color: #e6e6e6;
  font-size: 15.5px;
  line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  letter-spacing: 0.1px;
  word-break: break-word;
}
.comm-item .comm-text {
  margin: 6px 0 0;
}
.comm-item .comm-text .spoiler {
  background: #2a2a2a;
  color: #2a2a2a;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.comm-item .comm-text .spoiler.revealed,
.comm-item .comm-text .spoiler:hover {
  color: #ddd;
}
/* Smileys legacy : alignement vertical */
.comm-item .comm-text img.emoji,
.comm-item .comm-text img[src*="emoticons/"] {
  display: inline-block;
  vertical-align: -3px;
  height: 18px;
  width: auto;
  margin: 0 2px;
}

/* Footer : Par USERNAME | Membre Depuis YEAR  +  Reply à droite */
.comm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.comm-byline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 12px;
  color: #777;
  letter-spacing: 0.2px;
  min-width: 0;
  flex: 1;
}
.comm-byline-by {
  color: #555;
}
.comm-byline-name {
  color: #f48625;
  font-weight: 700;
}
.comm-byline-sep {
  color: #444;
  margin: 0 2px;
}
.comm-byline-since {
  color: #999;
}

/* Reply button — BOTTOM RIGHT */
.comm-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.comm-reply-btn:hover {
  background: rgba(244, 134, 37, 0.1);
  border-color: rgba(244, 134, 37, 0.5);
  color: #ff7e28;
}
.comm-reply-btn .fa {
  font-size: 11px;
}

/* Reply editor */
.comm-reply-editor {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border-left: 3px solid #f48625;
}

/* Reply cascade : toggle "Afficher N réponses" */
.comm-replies {
  margin-top: 12px;
}
.comm-toggle-replies {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #ff7e28;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
  position: relative;
}
.comm-toggle-replies:hover {
  color: #ffa05c;
}
.comm-toggle-replies .comm-toggle-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(244, 134, 37, 0.4);
}
.comm-toggle-replies .fa {
  font-size: 11px;
  transition: transform 0.18s;
}

.comm-replies-list {
  margin-top: 10px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: comm-slide-down 0.22s ease-out;
}
@keyframes comm-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Replies imbriqués deeper : on cap l'indentation pour pas tasser le texte */
.comm-replies-list .comm-replies-list {
  padding-left: 18px;
}
.comm-replies-list .comm-replies-list .comm-replies-list {
  padding-left: 12px;
}

@media (max-width: 600px) {
  .comm-thread-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .comm-replies-list {
    padding-left: 14px;
  }
}

/* ----------------------------------------------------------------------------
 * "Continuer le visionnage" — rangée Netflix horizontale (FsvResumeRow)
 * 4 cards visibles à 1920px, scroll horizontal sur les autres, backdrop 16:9
 * ---------------------------------------------------------------------------- */

.resume-row-wrap {
  position: relative;
  margin: 8px 0 4px;
}

.resume-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px 18px;
  -webkit-overflow-scrolling: touch;
}
.resume-row::-webkit-scrollbar {
  display: none;
}

/* 4 cards visibles ≥ 1280px, 3 ≥ 900px, 2 ≥ 600px, 1.6 < 600px */
.resume-card {
  flex: 0 0 calc((100% - 14px * 3) / 4);
  min-width: 0;
  background: #141414;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s, opacity 0.2s;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
@media (max-width: 1279px) {
  .resume-card { flex-basis: calc((100% - 14px * 2) / 3); }
}
@media (max-width: 899px) {
  .resume-card { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 599px) {
  .resume-card { flex-basis: 62%; }
}

.resume-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(244, 134, 37, 0.5);
  z-index: 2;
}

.resume-card.is-removing {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

.resume-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  overflow: hidden;
  border-radius: 8px;
}
.resume-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.resume-card:hover .resume-thumb img {
  transform: scale(1.06);
}
.resume-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.resume-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.resume-card:hover .resume-overlay {
  opacity: 1;
}
/* Triangle pointu orange — réutilise le glyph `.fa-play-circle3:before`
 * (\f04b orange) défini dans /templates/FSV1/style/custom.css line 58. */
.resume-play {
  font-family: FontAwesome;
  font-size: 64px !important;
  line-height: 1;
  color: #ed760c;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  transform: scale(0.85);
  transition: transform 0.2s;
}
.resume-play::before {
  /* override de la règle ".fa-play-circle3:before { font-size: 25px }" du
   * live custom.css : ici on veut une icône grande overlay. */
  font-size: 64px !important;
  color: #ed760c;
}
.resume-card:hover .resume-play {
  transform: scale(1);
}

.resume-ep-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Barre progrès doit passer AU-DESSUS du gradient meta sinon elle est masquée. */
.resume-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  z-index: 3;
}
.resume-progress-fill {
  height: 100%;
  background: #f48625;
  box-shadow: 0 0 8px rgba(244, 134, 37, 0.7);
  transition: width 0.3s ease;
}

/* Méta posée À L'INTÉRIEUR du poster, en bas — sur gradient sombre lisible
 * peu importe l'image backdrop derrière. */
.resume-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
  z-index: 2;
}
.resume-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.resume-time {
  font-size: 11.5px;
  color: #ddd;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.resume-remaining {
  color: #bbb;
}

/* Bouton ✕ supprimer — toujours faiblement visible (opacity 0.55) puis
 * pleine opacité au hover. Plus gros (34px) et bord orange pour ressortir. */
.resume-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  border: 1.5px solid rgba(244, 134, 37, 0.7);
  color: #ff7e28;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: all 0.15s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.resume-card:hover .resume-remove,
.resume-card:focus-within .resume-remove {
  opacity: 1;
}
.resume-remove:hover {
  background: rgba(220, 53, 69, 0.95);
  border-color: #fff;
  color: #fff;
  transform: scale(1.12);
}

/* Boutons flèches Netflix-style — plus visibles : plus gros, bord orange,
 * fond plus opaque, légère ombre. */
.resume-arrow {
  position: absolute;
  top: calc(50% - 6px);
  width: 52px;
  height: 80px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  border: 1.5px solid rgba(244, 134, 37, 0.5);
  color: #ff7e28;
  font-size: 26px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.resume-arrow:hover {
  background: rgba(244, 134, 37, 0.95);
  color: #fff;
  border-color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.resume-arrow-left { left: -12px; }
.resume-arrow-right { right: -12px; }
@media (max-width: 768px) {
  .resume-arrow { display: none; }
}

/* État "aucun résultat dans ce filtre" */
.resume-empty {
  padding: 28px 16px;
  text-align: center;
  color: #888;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 12px 4px;
}

/* Skeleton de chargement */
.resume-row-skeleton {
  display: flex;
  gap: 14px;
  padding: 6px 4px 18px;
}
.resume-card-skel {
  flex: 0 0 calc((100% - 14px * 3) / 4);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(90deg, #1a1a1a, #232323, #1a1a1a);
  background-size: 200% 100%;
  animation: resume-shimmer 1.4s ease-in-out infinite;
}
@keyframes resume-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
 * Watch progress overlay sur cards short — YouTube-style
 * ---------------------------------------------------------------------------- */

.short-watch-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4;
}

.short-watch-progress .swp-fill {
  height: 100%;
  background: #f48625;
  box-shadow: 0 0 6px rgba(244, 134, 37, 0.7);
}

.short-watch-progress .swp-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}

.short-watch-progress .swp-resume {
  background: rgba(244, 134, 37, 0.95);
}

.short-watch-progress .swp-done {
  background: rgba(16, 185, 129, 0.95);
}

/* ----------------------------------------------------------------------------
 * Pagination moderne (FsvPagination) — pills arrondies, hover orange
 * ---------------------------------------------------------------------------- */

.fsv-pagi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d8d8d8;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  user-select: none;
}
.fsv-pagi-btn:hover {
  background: rgba(244, 134, 37, 0.12);
  border-color: rgba(244, 134, 37, 0.4);
  color: #ff7e28;
  transform: translateY(-1px);
}
.fsv-pagi-btn.is-active {
  background: linear-gradient(135deg, #f48625, #ff8533);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  cursor: default;
}
.fsv-pagi-btn.is-active:hover {
  transform: none;
}
.fsv-pagi-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fsv-pagi-ellipsis {
  color: #555;
  font-size: 14px;
  padding: 0 4px;
  letter-spacing: 2px;
}
.fsv-pagi-count {
  margin-left: 14px;
  color: #777;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.3px;
}
@media (max-width: 600px) {
  .fsv-pagi-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 12.5px;
  }
  .fsv-pagi-count {
    width: 100%;
    text-align: center;
    margin: 6px 0 0;
  }
}

/* ----------------------------------------------------------------------------
 * hd-right (avatar / profil / cloche) — DOIT être au-dessus de .nav-menu
 * (z-index 500 du live) sinon les clicks sur le bouton Panel passent à
 * travers car nav-menu chevauche horizontalement. On ne touche PAS à
 * `position` (le live le met en absolute pour ancrer à droite ; le forcer
 * en relative casse tout le layout). z-index seul suffit pour la stack.
 * ---------------------------------------------------------------------------- */
.hd-right {
  z-index: 600 !important;
}

/* ----------------------------------------------------------------------------
 * Bouton User/Visiteur dans le header — pill cliquable de 40px de haut.
 * Le live a une règle `button:not(.color-btn):not([class*=fr])` qui force
 * font-size + padding sur tous les boutons → casse notre layout. On force
 * tout via .fsv-user-menu-trigger.
 * ---------------------------------------------------------------------------- */
button.fsv-user-menu-trigger {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  height: 40px !important;
  padding: 0 14px 0 6px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: none !important;
}
button.fsv-user-menu-trigger:hover:not(.is-open) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(244, 134, 37, 0.35) !important;
}
button.fsv-user-menu-trigger:active {
  transform: scale(0.97);
}

/* ============================================================================
 * Popup "Aperçu rapide" — sort du bas de l'écran (30vh), 100% largeur.
 * Trigger : click sur l'icône ℹ d'une card. Lazy-fetch /api/posts/[id]/preview.
 * ============================================================================ */
.fsv-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9999;
  animation: fsv-fade-in 0.2s ease-out;
  display: flex;
  align-items: flex-end;
}
.fsv-popup-panel {
  position: relative;
  width: 100%;
  height: 35vh;
  min-height: 320px;
  max-height: 480px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
  border-top: 2px solid #f48625;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: fsv-popup-slide 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fsv-popup-slide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.fsv-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.fsv-popup-close:hover {
  background: rgba(244, 134, 37, 0.95);
  border-color: #fff;
  transform: scale(1.05);
}

.fsv-popup-loading,
.fsv-popup-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  color: #777;
  gap: 12px;
}
.fsv-popup-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(244, 134, 37, 0.2);
  border-top-color: #f48625;
  border-radius: 50%;
  animation: fsv-spin 0.7s linear infinite;
}
@keyframes fsv-spin { to { transform: rotate(360deg); } }

.fsv-popup-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  height: 100%;
  gap: 0;
}
.fsv-popup-media {
  position: relative;
  background: #000;
  overflow: hidden;
}
.fsv-popup-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.fsv-popup-backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fsv-popup-empty-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #555;
  font-size: 14px;
}

.fsv-popup-info {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
}
.fsv-popup-poster-mini {
  flex-shrink: 0;
  width: 110px;
  height: 165px;
  border-radius: 6px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.fsv-popup-poster-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fsv-popup-text {
  flex: 1;
  min-width: 0;
}
.fsv-popup-title {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.fsv-popup-title:hover {
  color: #ff7e28;
}
.fsv-popup-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 8px;
}
.fsv-popup-meta .dot {
  color: #444;
}
.fsv-popup-meta .rating {
  color: #fbbf24;
  font-weight: 700;
}
.fsv-popup-meta .badge {
  background: rgba(244, 134, 37, 0.15);
  color: #ff7e28;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.fsv-popup-tagline {
  font-style: italic;
  color: #ff7e28;
  font-size: 13px;
  margin: 0 0 8px;
  opacity: 0.85;
}
.fsv-popup-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.fsv-popup-genre {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.fsv-popup-synopsis {
  color: #d8d8d8;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fsv-popup-detail {
  font-size: 12px;
  color: #bbb;
  margin: 0 0 6px;
}
.fsv-popup-detail strong {
  color: #888;
  font-weight: 600;
  margin-right: 4px;
}
.fsv-popup-actors {
  margin: 8px 0;
}
.fsv-popup-actors > strong {
  display: block;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.fsv-popup-actors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fsv-popup-actor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  font-size: 11.5px;
  color: #ddd;
}
.fsv-popup-actor img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.fsv-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #f48625, #ff8533);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  transition: transform 0.12s, box-shadow 0.18s;
}
.fsv-popup-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 134, 37, 0.5);
}

@media (max-width: 800px) {
  .fsv-popup-panel { height: 60vh; max-height: none; }
  .fsv-popup-content { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .fsv-popup-poster-mini { width: 80px; height: 120px; }
  .fsv-popup-title { font-size: 17px; }
}

/* ============================================================================
 * Bouton "Signaler un problème" + Modal de signalement
 * ============================================================================ */
.report-btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #bbb;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.report-btn-modern:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.report-btn-modern .report-icon {
  flex-shrink: 0;
}

/* Modal générique (réutilisable) */
.fsv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fsv-fade-in 0.18s ease-out;
}
@keyframes fsv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fsv-modal {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 540px;
  margin: 16px;
  max-height: 90vh;
  overflow-y: auto;
  animation: fsv-modal-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
@keyframes fsv-modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.fsv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #2a2a2a;
}
.fsv-modal-header h2 {
  font-size: 17px;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fsv-modal-header h2 .fa {
  color: #f48625;
}
.fsv-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.fsv-modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
}

.report-modal-body {
  padding: 20px;
}
.report-modal-target {
  margin: 0 0 12px;
  font-size: 13px;
  color: #aaa;
}
.report-modal-target strong {
  color: #fff;
}
.report-modal-label {
  display: block;
  font-size: 13px;
  color: #ddd;
  font-weight: 600;
  margin-bottom: 8px;
}
.report-modal-body textarea {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.report-modal-body textarea:focus {
  border-color: rgba(244, 134, 37, 0.5);
}
.report-modal-counter {
  font-size: 11px;
  color: #777;
  text-align: right;
  margin: 4px 0 0;
}
.report-modal-error {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 13px;
}
.report-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.report-modal-cancel {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.report-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.report-modal-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #f48625, #ff8533);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  transition: transform 0.12s, box-shadow 0.18s;
}
.report-modal-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}
.report-modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.report-modal-success {
  padding: 40px 24px;
  text-align: center;
}
.report-modal-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  animation: fsv-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fsv-pop-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.report-modal-success h3 {
  font-size: 17px;
  color: #fff;
  margin: 0 0 8px;
}
.report-modal-success p {
  color: #aaa;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* Bouton "Signaler" dans le header de conversation /messages */
.messages-thread-report {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.15s;
}
.messages-thread-report:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fff;
}

/* ============================================================================
 * Page /profile/[name]/settings — paramètres du profil
 * ============================================================================ */
.profile-settings-wrap {
  max-width: 800px;
  margin: 24px auto;
  padding: 0 16px;
}
.profile-settings-header h1 {
  font-size: 22px;
  color: #fff;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-settings-header h1 .fa {
  color: #f48625;
}
.profile-settings-sub {
  color: #777;
  font-size: 13px;
  margin: 0 0 20px;
}

.profile-settings {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
}
.profile-settings-tabs {
  display: flex;
  border-bottom: 1px solid #2a2a2a;
  background: #161616;
}
.profile-settings-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.profile-settings-tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}
.profile-settings-tabs button.is-active {
  color: #ff7e28;
  border-bottom-color: #f48625;
  background: rgba(244, 134, 37, 0.05);
}

.profile-settings-msg {
  margin: 14px 16px 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.profile-settings-msg.is-ok {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
}
.profile-settings-msg.is-err {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.profile-settings-form {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-settings-row label {
  font-size: 12px;
  font-weight: 700;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.profile-settings-row input,
.profile-settings-row textarea {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.profile-settings-row input:focus,
.profile-settings-row textarea:focus {
  border-color: rgba(244, 134, 37, 0.5);
}
.profile-settings-row input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.profile-settings-row textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.profile-settings-hint {
  font-size: 11px;
  color: #777;
  margin: 0;
  font-style: italic;
}

.profile-settings-avatar-preview {
  margin-top: 8px;
}
.profile-settings-avatar-preview img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(244, 134, 37, 0.4);
}

.profile-settings-fieldset {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-settings-fieldset legend {
  padding: 0 8px;
  color: #ff7e28;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-settings-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-settings-toggle:hover {
  background: rgba(244, 134, 37, 0.04);
  border-color: rgba(244, 134, 37, 0.3);
}
.profile-settings-toggle input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #f48625;
  flex-shrink: 0;
}
.profile-settings-toggle-title {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.profile-settings-toggle-sub {
  display: block;
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}

.profile-settings-submit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #f48625, #ff8533);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  transition: transform 0.12s, box-shadow 0.18s;
}
.profile-settings-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 134, 37, 0.5);
}
.profile-settings-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
 * Messagerie privée — /messages
 * ============================================================================ */

.messages-wrap {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
}
.messages-header {
  margin-bottom: 18px;
}
.messages-header h1 {
  font-size: 22px;
  color: #fff;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.messages-header h1 .fa {
  color: #f48625;
}
.messages-sub {
  color: #777;
  font-size: 13px;
  margin: 0;
}

.messages-toolbar {
  margin-bottom: 14px;
}
.messages-compose-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #f48625, #ff8533);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(244, 134, 37, 0.35);
  transition: transform 0.12s, box-shadow 0.18s;
}
.messages-compose-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(244, 134, 37, 0.5);
}

.messages-compose {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.messages-compose input,
.messages-compose textarea {
  width: 100%;
  padding: 10px 12px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
  resize: vertical;
}
.messages-compose input:focus,
.messages-compose textarea:focus {
  border-color: rgba(244, 134, 37, 0.5);
}
.messages-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.messages-cancel {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #aaa;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.messages-cancel:hover {
  background: #1f1f1f;
  color: #fff;
}
.messages-send {
  background: linear-gradient(135deg, #f48625, #ff8533);
  color: #fff;
  border: 0;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(244, 134, 37, 0.3);
}
.messages-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.messages-error {
  color: #ff8a95;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin: 6px 0;
}

.messages-loading,
.messages-empty {
  text-align: center;
  padding: 40px 20px;
  color: #777;
}
.messages-empty .fa {
  font-size: 36px;
  color: #444;
  display: block;
  margin-bottom: 12px;
}
.messages-empty p {
  margin: 0;
}
.messages-empty-sub {
  font-size: 12px;
  color: #555;
  margin-top: 6px !important;
}

/* Liste conversations */
.messages-conv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.messages-conv {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  transition: all 0.15s;
}
.messages-conv:hover {
  border-color: rgba(244, 134, 37, 0.4);
  background: #1f1f1f;
}
.messages-conv.is-unread {
  background: linear-gradient(135deg, rgba(244, 134, 37, 0.08), rgba(244, 134, 37, 0.02));
  border-color: rgba(244, 134, 37, 0.3);
}
.messages-conv a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.messages-conv-avatar {
  position: relative;
  flex-shrink: 0;
}
.messages-conv-avatar img,
.messages-conv-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}
.messages-conv-avatar-fallback {
  background: linear-gradient(135deg, #f48625, #c66405);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
}
.messages-conv-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #f48625;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1a1a;
}
.messages-conv-content {
  flex: 1;
  min-width: 0;
}
.messages-conv-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.messages-conv-name {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.messages-conv.is-unread .messages-conv-name {
  color: #ff7e28;
}
.messages-conv-time {
  font-size: 11px;
  color: #777;
  flex-shrink: 0;
}
.messages-conv-preview {
  color: #aaa;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.messages-conv.is-unread .messages-conv-preview {
  color: #ddd;
  font-weight: 500;
}
.messages-conv-by {
  color: #777;
}
.messages-conv-read,
.messages-conv-sent {
  color: #888;
  margin-left: 6px;
  font-size: 11px;
}
.messages-conv-read {
  color: #4ade80;
}

/* Thread (conversation single) */
.messages-thread {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-height: 800px;
  overflow: hidden;
}
.messages-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
  background: #161616;
}
.messages-back {
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.messages-back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.messages-thread-avatar img,
.messages-thread-avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.messages-thread-avatar-fallback {
  background: linear-gradient(135deg, #f48625, #c66405);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}
.messages-thread-info {
  flex: 1;
  min-width: 0;
}
.messages-thread-name {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}
.messages-thread-meta {
  font-size: 11px;
  color: #777;
}
.messages-thread-banned {
  color: #ef4444;
  font-weight: 700;
}
.messages-thread-profile {
  font-size: 12px;
  color: #ff7e28;
  text-decoration: none;
  border: 1px solid rgba(244, 134, 37, 0.4);
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.15s;
}
.messages-thread-profile:hover {
  background: rgba(244, 134, 37, 0.15);
}

.messages-thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background:
    radial-gradient(circle at 30% 0%, rgba(244, 134, 37, 0.04), transparent 40%),
    #141414;
}
.messages-thread-empty {
  text-align: center;
  padding: 40px 20px;
  color: #777;
}
.messages-thread-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.messages-thread-day-sep {
  text-align: center;
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 16px 0 12px;
  position: relative;
}
.messages-thread-day-sep::before,
.messages-thread-day-sep::after {
  content: "";
  display: inline-block;
  width: 24%;
  height: 1px;
  background: #2a2a2a;
  vertical-align: middle;
  margin: 0 8px;
}

.messages-bubble {
  align-self: flex-start;
  max-width: 70%;
  background: #232323;
  border: 1px solid #2a2a2a;
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  margin-bottom: 6px;
  animation: msg-pop 0.18s ease-out;
}
@keyframes msg-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.messages-bubble.is-mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #f48625, #ff8533);
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 2px 8px rgba(244, 134, 37, 0.25);
}
.messages-bubble-text {
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.messages-bubble.is-mine .messages-bubble-text {
  color: #fff;
}
.messages-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.messages-bubble-tick {
  font-size: 11px;
}
.messages-bubble-tick.is-read {
  color: #ffffff;
  font-weight: 700;
}

.messages-thread-compose {
  border-top: 1px solid #2a2a2a;
  background: #161616;
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.messages-thread-compose textarea {
  flex: 1;
  resize: none;
  background: #0d0d0d;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.messages-thread-compose textarea:focus {
  border-color: rgba(244, 134, 37, 0.5);
}
.messages-thread-compose .messages-send {
  flex-shrink: 0;
  height: 40px;
}

@media (max-width: 600px) {
  .messages-thread {
    height: calc(100vh - 60px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .messages-bubble {
    max-width: 88%;
  }
}

/* ----------------------------------------------------------------------------
 * 7) Notification badge top right
 * ---------------------------------------------------------------------------- */

.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: #ddd;
  background: transparent;
  border: none;
  transition: background 0.15s;
}

.notif-bell:hover {
  background: rgba(255, 255, 255, 0.06);
}

.notif-bell .notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f48625;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 400px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 300;
  overflow-y: auto;
}

.notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:hover {
  background: rgba(244, 134, 37, 0.06);
}

.notif-item.is-unread {
  border-left: 3px solid #f48625;
}

.notif-item .notif-title {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.notif-item .notif-body {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-item .notif-date {
  font-size: 10px;
  color: #666;
  margin-top: 4px;
}

/* ============================================================================
 * Page "Mes favoris" — toolbar (filtres + toggles vue + mode), liste classique,
 * pagination, sentinelle infinite-scroll.
 * ============================================================================ */
.fav-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  margin-bottom: 18px;
}
.fav-tabs {
  display: inline-flex;
  gap: 4px;
}
.fav-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.fav-tab:hover {
  background: #222;
  color: #fff;
}
.fav-tab.is-active {
  background: rgba(244, 134, 37, 0.15);
  border-color: rgba(244, 134, 37, 0.5);
  color: #f48625;
}
.fav-tab-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: 999px;
  color: #ccc;
}
.fav-tab.is-active .fav-tab-count {
  background: rgba(244, 134, 37, 0.25);
  color: #f48625;
}

.fav-toggles {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fav-seg {
  display: inline-flex;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.fav-seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.fav-seg-btn:hover { color: #ddd; }
.fav-seg-btn.is-on {
  background: #2a2a2a;
  color: #fff;
}

.fav-empty {
  text-align: center;
  color: #666;
  padding: 60px 0;
  font-size: 14px;
}

/* --- Mode "liste classique" : poster gauche, infos droite --- */
.fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fav-row {
  display: flex;
  gap: 16px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.fav-row:hover {
  border-color: #3a3a3a;
  background: #1d1d1d;
}
.fav-row-poster {
  flex-shrink: 0;
  width: 90px;
  height: 135px;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0a;
  display: block;
}
.fav-row-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fav-row-poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #555;
  text-align: center;
  padding: 6px;
}
.fav-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fav-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fav-row-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.25;
}
.fav-row-title:hover { color: #f48625; }
.fav-row-rating {
  color: #ffd54a;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.fav-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: #888;
  align-items: center;
}
.fav-row-type {
  background: rgba(244, 134, 37, 0.18);
  color: #f48625;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
.fav-row-tag {
  background: #2a2a2a;
  color: #ccc;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
}
.fav-row-date {
  color: #666;
  font-size: 11px;
  margin-left: auto;
}
.fav-row-desc {
  color: #aaa;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Pagination --- */
.fav-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 0;
}
.fav-pager-btn {
  appearance: none;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fav-pager-btn:hover:not(:disabled) {
  background: #222;
  border-color: #f48625;
  color: #f48625;
}
.fav-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fav-pager-info {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  min-width: 100px;
  text-align: center;
}

.fav-sentinel {
  text-align: center;
  padding: 24px 0;
  color: #666;
  font-size: 13px;
}

@media (max-width: 600px) {
  .fav-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .fav-tabs { justify-content: center; }
  .fav-toggles { justify-content: center; }
  .fav-row-poster { width: 70px; height: 105px; }
  .fav-row-date { margin-left: 0; width: 100%; }
}