/* ==========================================================================
   REFONTE — colonne latérale, ossature à deux colonnes et thème sombre plat.
   Chargée en DERNIER : cette feuille surcharge, elle ne remplace rien.
   Aucune des feuilles existantes n'est modifiée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THÈME SOMBRE PLAT
   Le thème sombre d'origine est un bleu nuit (#0b1023) parcouru de halos
   violet/cyan, avec du verre translucide. On le remplace par un noir profond
   et mat. Comme tout passe par les jetons, TOUS les composants suivent.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --night: #0b0b10;            /* --bg d'Ideal */
    --night-2: #0e0e15;          /* --bg-soft d'Ideal */
    --night-3: #14141f;
    --surface: #101018;          /* --panel d'Ideal */
    --surface-solid: #101018;
    --surface-2: #14141f;        /* --panel-2 d'Ideal */
    --anthracite: #161622;
    --text: #e9e9f2;
    --text-muted: #8a8a9d;
    --text-dim: #66667a;
    --border: #1f1f2d;
    --border-strong: #2c2c40;
    --violet: #7c5cf0;
    --violet-soft: #a795ff;
    --grad-primary: linear-gradient(135deg, #6c5ce7 0%, #8b5cf6 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
    --shadow-glow: none;
    --bs-body-bg: #0b0b10;
    --bs-body-color: #e9e9f2;
}

/* Fond parfaitement plat : on écrase les dégradés radiaux. */
[data-bs-theme="dark"] body {
    background: #0b0b10;
    background-attachment: initial;
}

/* Panneaux mats : ni flou d'arrière-plan, ni reflet, ni ombre portée. */
[data-bs-theme="dark"] .glass,
[data-bs-theme="dark"] .glass-sm,
[data-bs-theme="dark"] .glass-panel,
[data-bs-theme="dark"] .glass-nav {
    background: var(--surface);
    border-color: var(--border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
[data-bs-theme="dark"] .glass-panel::before { display: none; }

[data-bs-theme="dark"] .navbar-x,
[data-bs-theme="dark"] .navbar-x.glass-nav {
    background: var(--night-2);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
[data-bs-theme="dark"] .footer {
    background: var(--night-2);
    border-top: 1px solid var(--border);
    backdrop-filter: none;
}
[data-bs-theme="dark"] .search-box input { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .icon-btn { background: var(--surface); border: 1px solid var(--border); }
[data-bs-theme="dark"] .chip { background: var(--surface-2); border-color: var(--border); }
[data-bs-theme="dark"] .card-title-media { background: var(--night-3); border-color: var(--border); }
[data-bs-theme="dark"] .card-title-media:hover { border-color: var(--violet); box-shadow: none; }

/* --------------------------------------------------------------------------
   2. OSSATURE : colonne latérale + colonne de contenu
   -------------------------------------------------------------------------- */
.app-shell {
    display: block;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

.app-side { display: none; }

/* La colonne apparaît à 1301px, juste au-dessus du seuil où responsive.css
   masque .nav-menu (max-width: 1300px). Les liens passent ainsi de la barre
   du haut à la colonne sans jamais être absents ni affichés en double.
   Le 1301 évite le chevauchement d'un pixel : les deux media queries sont
   inclusives et se déclenchaient toutes les deux à 1300 pile. */
@media (min-width: 1301px) {
    .app-shell {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        /* 22 comme la maquette : avec 26, la colonne centrale perdait 4 px. */
        gap: 22px;
        align-items: start;
    }

    .app-side {
        display: block;
        position: sticky;
        top: var(--nav-height);
        padding-top: 24px;
        /* La colonne peut dépasser la hauteur de l'écran : sans défilement
           propre, son bas (Gestion, Administration) devenait inatteignable
           une fois la colonne épinglée — le « bug » au scroll. */
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        scrollbar-width: none;
    }
    .app-side::-webkit-scrollbar { display: none; }

    /* Les vues existantes centrent leur contenu avec .container-x ; dans la
       colonne, ce cadrage ferait doublon. */
    .app-col .container-x,
    .app-col .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* Les liens principaux vivent désormais dans la colonne. */
    .navbar-x .nav-menu { display: none; }
}

/* La barre du haut ne s'escamote plus au défilement : la maquette la garde
   fixe, et son masquage faisait « sauter » la colonne collée juste dessous. */
.navbar-x.hide { transform: none; }

/* Effet de la maquette sur la barre : coins arrondis, fond légèrement plus
   translucide et ombre portée douce qui la détache du contenu. */
.navbar-x.glass-nav {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
}
/* En sombre : les coins restent arrondis, mais fond plat et sans ombre,
   comme la maquette (le relief y vient de la bordure basse). */
[data-bs-theme="dark"] .navbar-x.glass-nav {
    background: var(--night-2);
    box-shadow: none;
}

/* Note du carrousel : étoile dorée, comme la maquette. */
.hero-chip-score { color: #c0971c; font-weight: 700; }
.hero-chip-score .bi { color: #e0ae24; }
[data-bs-theme="dark"] .hero-chip-score { color: #f2c94c; }
[data-bs-theme="dark"] .hero-chip-score .bi { color: #f8d868; }

/* --------------------------------------------------------------------------
   3. NAVIGATION LATÉRALE
   -------------------------------------------------------------------------- */
.side-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* La classe explicite est indispensable : sans elle, la règle
   a:not([href]):not([class]) de Bootstrap imposerait color:inherit. */
.side-nav .side-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 13px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.885rem;
    font-weight: 600;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.side-nav .side-item > i {
    width: 19px;
    flex: 0 0 19px;
    text-align: center;
    font-size: 1.02rem;
    opacity: 0.75;
    transition: opacity 0.18s var(--ease);
}
.side-nav .side-item > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-nav .side-item:hover { background: rgba(124, 58, 237, 0.08); color: var(--text); }
.side-nav .side-item:hover > i { opacity: 1; }

.side-nav .side-item.active {
    background: rgba(124, 58, 237, 0.12);
    color: var(--violet);
}
.side-nav .side-item.active > i { opacity: 1; color: var(--violet); }
.side-nav .side-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--grad-primary);
}

[data-bs-theme="dark"] .side-nav .side-item.active {
    background: #1c1c2b;
    border: 1px solid #2a2a3e;
    color: var(--text);
}
[data-bs-theme="dark"] .side-nav .side-item.active > i { color: var(--violet-soft); }
[data-bs-theme="dark"] .side-nav .side-item:hover { background: #16161f; }

.side-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-style: normal;
}
.side-nav .side-item:hover .side-count { color: var(--text-muted); }
.side-count.is-zero { opacity: 0.45; }
[data-bs-theme="dark"] .side-count { background: #1a1a26; border-color: var(--border); }

.side-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 9px;
    padding: 0 13px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.side-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --------------------------------------------------------------------------
   4. GRILLES D'AFFICHES — format 156 x 219
   Un seul endroit à toucher : toutes les pages de catalogue passent par
   .grid-cards ou .scroller, qui contiennent le même partial card-drama.
   Concerne : explorer, dramas, films, genres, pays, sociétés, recherche,
   les rangées de l'accueil et les recommandations des fiches.
   En dessous de 992px on laisse responsive.css gérer : les vignettes
   fluides y sont préférables à un format figé.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* 158 et non 156 : .card-title-media porte une bordure de 1px et
       box-sizing est en border-box, donc l'affiche à l'intérieur mesure
       158 - 2 = 156 px exactement. */
    .grid-cards {
        grid-template-columns: repeat(auto-fill, 158px);
        justify-content: space-between;
        gap: 22px 14px;
    }

    .scroller > * { width: 158px; }

    /* .card-poster est en aspect-ratio 2/3 ; on impose la hauteur exacte. */
    .grid-cards .card-poster,
    .scroller .card-poster {
        height: 219px;
        aspect-ratio: auto;
    }
}

/* --------------------------------------------------------------------------
   5. BLOCS DE LA COLONNE DROITE DE L'ACCUEIL
   « Ma liste », carte de profil, « Statistiques ».
   -------------------------------------------------------------------------- */
.side-head .link-more { font-weight: 600; }

.hw-rows { display: flex; flex-direction: column; }
.hw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 2px;
    font-size: 0.88rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    text-decoration: none;
}
.hw-rows > .hw-row:first-child { border-top: 0; }
.hw-row span { display: flex; align-items: center; gap: 9px; }
.hw-row span i { width: 16px; text-align: center; color: var(--text-dim); }
.hw-row b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
a.hw-row:hover { color: var(--text); }
a.hw-row:hover b { color: var(--violet); }

/* --- carte de profil --- */
.hw-profil { overflow: hidden; padding: 0 !important; }
.hw-cover {
    height: 74px;
    position: relative;
    overflow: hidden;
    background: var(--grad-primary);
}
.hw-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.hw-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), var(--surface-solid));
    opacity: 0.85;
}
.hw-identite {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    padding: 0 17px;
    margin-top: -31px;
    position: relative;
    z-index: 2;
}
.hw-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    flex: 0 0 auto;
    overflow: hidden;
    border: 3px solid var(--surface-solid);
    background: var(--night-3);
    box-shadow: var(--shadow-sm);
}
.hw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hw-pseudo {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding-bottom: 3px;
}
.hw-pseudo a { color: var(--text); }
.hw-pseudo a:hover { color: var(--violet); }
.hw-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--grad-primary);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hw-depuis { margin: 0 0 5px; font-size: 0.76rem; color: var(--text-dim); }
.hw-bio { padding: 12px 17px 0; margin: 0; font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }
.hw-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 17px 14px; }
.hw-tags .chip { font-size: 0.72rem; padding: 4px 10px; }
.hw-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.hw-stat { padding: 13px 6px; text-align: center; border-right: 1px solid var(--border); }
.hw-stat:last-child { border-right: none; }
.hw-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.hw-stat span { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.03em; }
[data-bs-theme="dark"] .hw-avatar { border-color: var(--surface); }

/* --------------------------------------------------------------------------
   6. CARROUSEL DE L'ACCUEIL — mise en page de la maquette
   Texte à gauche, affiche à droite, et l'affiche floutée en fond diffuse
   ses couleurs. Le balisage et le JS d'origine sont conservés : seules
   l'orientation, la hauteur et les calques changent.
   -------------------------------------------------------------------------- */
.hero.hero-clean {
    min-height: 0;
    align-items: stretch;
    background: var(--surface-solid);
}

.hero-caption {
    position: relative;
    padding: 0;
    max-width: none;
    /* 350 + 2 px de bordure du conteneur = 352, la hauteur de la maquette
       (le site était à 380, d'où un slider plus gros). */
    min-height: 350px;
    display: flex;
    align-items: center;
}

/* Espacements internes relevés sur la maquette : titre mb 12, synopsis mb 16,
   puces mb 20 avant les boutons — et gouttière de puces à 8 px : à 16 px
   (valeur du site), les puces passaient sur deux lignes et gonflaient le tout. */
.hero-caption .hero-text h2 { margin: 0 0 12px; }
.hero-caption .hero-text p { margin: 0 0 16px; }
.hero-caption .hero-meta-chips {
    gap: 8px;
    margin-bottom: 20px;
    font-size: inherit;
}
.hero-caption.d-none { display: none !important; }

/* Calque 1 : l'affiche floutée, tirée de --hero-bg posé en ligne. */
.hero-caption::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center 22%;
    filter: blur(38px) saturate(1.5);
    transform: scale(1.25);
    opacity: 0.5;
}

/* Calque 2 : le voile qui rend le texte lisible. */
.hero-caption::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(96deg,
        var(--night) 0%,
        rgba(243, 244, 248, 0.86) 44%,
        rgba(243, 244, 248, 0.35) 76%,
        transparent 100%);
}
[data-bs-theme="dark"] .hero-caption::after {
    background: linear-gradient(96deg,
        #0b0b10 0%,
        rgba(11, 11, 16, 0.88) 44%,
        rgba(11, 11, 16, 0.42) 76%,
        transparent 100%);
}

.hero-caption .hero-inner {
    position: relative;
    z-index: 2;
    flex-direction: row-reverse;   /* texte à gauche, affiche à droite */
    justify-content: space-between;
    width: 100%;
    padding: 32px 40px;
    gap: 32px;
}
.hero-caption .hero-poster { width: 178px; }
.hero-caption .hero-text { max-width: 590px; }

/* Flèches, révélées au survol. */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-solid);
    border: 1px solid var(--border-strong);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero:hover .hero-arrow { opacity: 0.95; }
.hero-arrow:hover { transform: translateY(-50%) scale(1.08); }
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }

@media (max-width: 960px) {
    .hero-caption { min-height: 0; }
    .hero-caption .hero-inner { flex-direction: column; padding: 24px; }
    .hero-caption .hero-poster { width: 150px; }
    .hero-arrow { display: none; }
    .hero-caption::after {
        background: linear-gradient(180deg, rgba(243, 244, 248, 0.9), rgba(243, 244, 248, 0.72));
    }
    [data-bs-theme="dark"] .hero-caption::after {
        background: linear-gradient(180deg, rgba(11, 11, 16, 0.9), rgba(11, 11, 16, 0.75));
    }
}

/* --------------------------------------------------------------------------
   6bis. ACCUEIL — dimensions calées sur la maquette
   Valeurs relevées au pixel sur /apercu-design puis reportées ici.
   -------------------------------------------------------------------------- */
@media (min-width: 1301px) {
    /* Bootstrap répartit en pourcentages (876 / 292) ; la maquette fige la
       colonne de droite à 288 px avec une gouttière de 22 px. On remplace la
       rangée par une grille et on neutralise les gouttières Bootstrap. */
    .home-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 288px;
        gap: 22px;
        margin: 0;
    }
    .home-row > .home-main,
    .home-row > .home-sidebar {
        width: auto;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Pas de padding-top ajouté ici : la gouttière verticale de .row g-4 pose déjà
   24 px de margin-top sur les DEUX colonnes, ce qui les aligne exactement.
   En ajouter un second décalait l'ensemble de 24 px vers le bas. */

/* Héros : le titre était à 54,4 px contre 37,6 px sur la maquette. */
.hero-caption .hero-text h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.9px;
}
.hero-caption .hero-text p {
    font-size: 0.93rem;
    line-height: 1.6;
}
/* Rayon : 22 px (radius-lg) et non 28 px (radius-xl). */
.hero { border-radius: var(--radius-lg); }
.hero-caption .hero-inner { padding: 32px 38px; }

/* Indicateurs du carrousel : la maquette utilise des barres (18x4, 32x4 pour
   l'actif), pas des pastilles rondes de 12x10. */
/* Centrés en bas, comme la maquette (l'original les colle à droite). */
.hero-dots {
    gap: 7px;
    right: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}
/* Spécificité relevée : dark.css impose rgba(15,23,42,.22) via
   [data-bs-theme="light"] .hero-dots button (0,2,1). */
[data-bs-theme] .hero-dots button,
.hero-dots button {
    width: 18px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(20, 26, 51, 0.22);
    transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.hero-dots button.active { width: 32px; }
[data-bs-theme="dark"] .hero-dots button { background: rgba(255, 255, 255, 0.22); }
[data-bs-theme="dark"] .hero-dots button.active { background: var(--grad-primary); }

/* Étiquette « Drama à la une » : texte violet sur fond très clair, et non
   texte sombre sur fond violet appuyé. */
.hero-caption .hero-text .eyebrow {
    padding: 5px 12px;
    color: var(--violet);
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(124, 58, 237, 0.3);
}
[data-bs-theme="dark"] .hero-caption .hero-text .eyebrow {
    color: var(--violet-soft);
    background: rgba(124, 92, 240, 0.16);
    border-color: rgba(124, 92, 240, 0.32);
}

/* Blocs de la colonne de droite : dans la maquette le panneau n'a AUCUN
   rembourrage — ce sont l'en-tête et les lignes qui le portent, ce qui fait
   courir les séparateurs sur toute la largeur. */
.home-sidebar .side-card { padding: 0; overflow: hidden; }
.home-sidebar .side-head {
    padding: 16px 17px 12px;
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.home-sidebar .hw-row { padding: 10px 17px; }
.home-sidebar .rank-list { padding: 4px 12px 10px; }
.home-sidebar .side-tabs { padding: 10px 17px 0; margin-bottom: 0; }
.home-sidebar .rank-empty { padding: 12px 17px 16px; }

/* Rangées d'affiches de l'accueil : la maquette montre UNE rangée de 5 cartes
   réparties en space-between, pas un bandeau défilant coupé au bord. On
   reproduit : wrap + répartition, cartes au-delà de la 5e masquées (le lien
   « Tout voir » y mène), flèches de défilement retirées. */
@media (min-width: 1301px) {
    .home-main .scroller {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px 14px;
        overflow-x: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }
    .home-main .scroller > * { width: 156px; }
    .home-main .scroller > *:nth-child(n+6) { display: none; }
    .home-main .scroller-nav { display: none; }
    .grid-cards { grid-template-columns: repeat(auto-fill, 156px); gap: 20px 14px; }
    .grid-cards .card-poster,
    .scroller .card-poster { width: 156px; }
}

/* Colonne de droite : micro-écarts relevés à la sonde. */
.home-sidebar .rank-item { padding: 6px 13px; gap: 10px; }
.home-sidebar .rank-poster { border-radius: 10px; }
.home-sidebar .rank-title { font-size: 0.83rem; font-weight: 650; }
.home-sidebar .side-tab { padding: 3px 10px; }

/* Actualités : grande carte + liste de brèves, comme la maquette. */
.home-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 18px;
}
.home-news-visual { aspect-ratio: 16 / 9; overflow: hidden; background: var(--night-2); }
.home-news-visual img { width: 100%; height: 100%; object-fit: cover; }
.home-news-body { padding: 16px 18px 18px; }
.home-news-body h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
    color: var(--text);
}
.home-news-list { display: flex; flex-direction: column; gap: 16px; }
.home-news-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    align-items: flex-start;
    text-decoration: none;
}
.home-news-thumb {
    width: 84px;
    height: 56px;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--night-2);
}
.home-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-news-item h3 { font-size: 0.88rem; font-weight: 650; line-height: 1.4; margin: 0 0 5px; color: var(--text); }
@media (max-width: 960px) {
    .home-news { grid-template-columns: minmax(0, 1fr); }
}

/* Titres de section : 19,5 px sur la maquette, contre 30,4 px ici. */
.home-main .section-head h2,
[data-airing-week] .section-head h2 {
    font-size: 1.22rem;
}
.home-main .section-head h2::before,
[data-airing-week] .section-head h2::before {
    height: 22px;
}
.home-main .section-head { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   6ter. FICHE DRAMA / FILM — valeurs EXACTES de l'artifact « Ideal — Solo
   Leveling » (source lue, pas estimée depuis une capture).
   Police, tailles, rayons, couleurs d'étoile et d'accent : littéraux Ideal.
   -------------------------------------------------------------------------- */
.fiche-layout {
    /* pile de polices d'Ideal, appliquée à toute la fiche */
    font-family: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Helvetica, Arial, sans-serif;
}
/* Les titres du site sont forcés en Poppins par une règle globale
   (font-family: var(--font-display)) : sur la fiche, ils doivent hériter de
   la pile Ideal — c'est ce qui rendait le bloc Informations discordant. */
.fiche-layout h1,
.fiche-layout h2,
.fiche-layout h3,
.fiche-layout h4,
.fiche-layout h5,
.fiche-layout h6 {
    font-family: inherit;
}

/* Deux colonnes : rail de 300 px, gouttière 24 (Ideal .layout). */
@media (min-width: 992px) {
    .fiche-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        align-items: start;
    }
}
.fiche-main { min-width: 0; }
.fiche-side { margin-top: 24px; min-width: 0; }
@media (max-width: 991.98px) { .fiche-side { margin-top: 0; } }

/* L'entête n'est PAS une carte chez Ideal : la bannière est un bloc arrondi
   autonome, le texte repose sur le fond de page. */
.fx-card { background: transparent; border: 0; margin-top: 24px; }

/* Bannière : 252 px, rayon 16, voile dégradé vers le bas (valeurs Ideal). */
.fx-banner {
    position: relative;
    height: 252px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    isolation: isolate;
    background: var(--night-2);
}
.fx-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.fx-banner-img.is-blur { filter: blur(30px) saturate(1.45); transform: scale(1.3); opacity: 0.6; }
.fx-banner-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(243, 244, 248, 0) 22%, rgba(243, 244, 248, 0.6) 62%, rgba(243, 244, 248, 0.97) 100%);
}
[data-bs-theme="dark"] .fx-banner-veil {
    background: linear-gradient(180deg, rgba(9, 9, 16, 0) 30%, rgba(9, 9, 16, 0.55) 100%);
}

/* Corps : affiche 200 px en chevauchement de 104 px (Ideal .fiche-head). */
.fx-head { display: flex; gap: 26px; padding: 0 26px; align-items: flex-start; }
.fx-poster { flex: 0 0 auto; margin-top: -104px; position: relative; z-index: 2; }
.fx-poster img { box-shadow: 0 10px 30px rgba(28, 32, 68, 0.10); }
[data-bs-theme="dark"] .fx-poster img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.fx-body { flex: 1; min-width: 0; padding-top: 14px; }

/* Titre : 34 / 800 / -0.02em / 1.15 (Ideal .head-body h1). */
.fx-title {
    font-family: inherit;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}
.fx-subtitle { font-size: 13.5px; line-height: 1.5; margin: 3px 0 0; }
.fx-dot { margin: 0 8px; color: var(--text-dim); }

/* Pastilles : les FAITS en neutre (Ideal .tag), les GENRES en accent
   (Ideal .chip) — les genres sont les seuls liens de la rangée. */
.fx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fx-pills .chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(23, 26, 48, 0.07);
    border: 1px solid rgba(23, 26, 48, 0.14);
    color: #4a5069;
}
[data-bs-theme="dark"] .fx-pills .chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
    color: #dcdce8;
}
.fx-pills a.chip {
    background: rgba(90, 85, 216, 0.12);
    border-color: rgba(90, 85, 216, 0.28);
    color: #4f49cc;
}
.fx-pills a.chip:hover { background: rgba(90, 85, 216, 0.22); }
[data-bs-theme="dark"] .fx-pills a.chip {
    background: rgba(90, 85, 216, 0.16);
    border-color: rgba(90, 85, 216, 0.28);
    color: #7b77e8;
}

/* Note : 36 / 800, chiffre ET étoile en doré (Ideal .score-big). */
.fx-score { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 13px; }
.fx-score .bi-star-fill { color: #b0790a; font-size: 26px; }
.fx-score b {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #b0790a;
    font-variant-numeric: tabular-nums;
}
.fx-score .text-dim { font-size: 13px; }
[data-bs-theme="dark"] .fx-score .bi-star-fill,
[data-bs-theme="dark"] .fx-score b { color: #f5b840; }

/* Actions : bouton plein rayon 9, 13,5/600 (Ideal .btn / .btn-select). */
.fx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.fx-actions .btn-grad {
    background: #5a55d8;
    box-shadow: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
}
.fx-actions .btn-grad:hover { background: #7b77e8; transform: none; }
.fx-actions .btn-ghost {
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
}
.fx-actions .icon-btn { width: 40px; height: 40px; border-radius: 50%; }
.fx-caret { font-size: 0.7rem; margin-left: 2px; }

.fx-rate-menu { padding: 14px 16px; min-width: 300px; }
.fx-rate-label { font-size: 0.78rem; margin-bottom: 6px; }
.fx-stars { font-size: 1.3rem; color: #b0790a; cursor: pointer; gap: 3px; }
[data-bs-theme="dark"] .fx-stars { color: #f5b840; }
.fx-rate-remove { font-size: 0.72rem; margin-top: 6px; }

/* Onglets : soulignement 2 px accent, 13,5/600, padding 11/16 (Ideal .tabs). */
.fiche-tabs { border-bottom: 1px solid var(--border); gap: 2px !important; margin-top: 26px; }
.fiche-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13.5px;
    padding: 11px 16px;
    margin-bottom: -1px;
    transition: color 0.12s;
}
.fiche-tabs .nav-link:hover { color: var(--text); }
.fiche-tabs .nav-link.active { color: var(--text); border-bottom-color: #5a55d8; background: transparent; }

/* Panneaux et typo du contenu (Ideal .panel / .sec-head / .synopsis). */
/* Les panneaux d'Ideal sont PLATS : fond opaque, bordure fine, sans ombre
   portée, sans flou d'arrière-plan ni reflet — le « halo » que produisait
   notre .glass-panel translucide en thème clair disparaît. */
.fiche-main .glass-panel,
.fiche-side .glass-panel {
    border-radius: 14px;
    background: #ffffff;
    border-color: rgba(23, 26, 48, 0.09);      /* --line d'Ideal (clair) */
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.fiche-main .glass-panel::before,
.fiche-side .glass-panel::before { display: none; }
[data-bs-theme="dark"] .fiche-main .glass-panel,
[data-bs-theme="dark"] .fiche-side .glass-panel {
    background: #101018;                        /* --panel d'Ideal */
    border-color: rgba(255, 255, 255, 0.07);    /* --line d'Ideal (sombre) */
}

/* Titres : interligne 1,5 et couleurs de texte d'Ideal. */
.fiche-main .section-head h2,
.fiche-side h2.h6 { line-height: 1.5; color: #1a1d2e; }
[data-bs-theme="dark"] .fiche-main .section-head h2,
[data-bs-theme="dark"] .fiche-side h2.h6 { color: #f2f2f7; }

/* Étoile du bouton « Noter » : dorée comme .btn-select .star d'Ideal,
   et pleine quand l'utilisateur a déjà noté. */
.fx-noter-star { color: #b0790a; }
[data-bs-theme="dark"] .fx-noter-star { color: #f5b840; }
/* Les en-têtes de section d'Ideal sont NUS : ni barre dégradée, ni icône. */
.fiche-main .section-head { margin-bottom: 16px; }
.fiche-main .section-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; gap: 0; }
.fiche-main .section-head h2::before { display: none; }
.fiche-main .section-head h2 .bi { display: none; }
.fiche-main .mo1 p { font-size: 14px; line-height: 1.7; color: #4a5069; }
[data-bs-theme="dark"] .fiche-main .mo1 p { color: #c8c8da; }
.fiche-main .mo1 p + p { margin-top: 14px; }

/* Panneau Synopsis : padding 22 (Ideal .panel.pad) + rangée « GENRES »
   (Ideal .chip-rows / .chip-row / .lab). */
.fx-syn-panel { padding: 22px; }
.fx-chip-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.fx-chip-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fx-lab {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-right: 4px;
}
.fx-chip-row .chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(90, 85, 216, 0.12);
    border: 1px solid rgba(90, 85, 216, 0.28);
    color: #4f49cc;
    transition: background 0.15s;
}
.fx-chip-row .chip:hover { background: rgba(90, 85, 216, 0.22); }
[data-bs-theme="dark"] .fx-chip-row .chip {
    background: rgba(90, 85, 216, 0.16);
    color: #7b77e8;
}

/* Rail : panneaux padding 20, titres 15,5/700, lignes 13,5 (Ideal .rail). */
.fiche-side .glass-panel { padding: 20px !important; margin-bottom: 20px !important; }
.fiche-side h2.h6 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px !important; }
/* Rangées du bloc Informations : réplication exacte de .stats li d'Ideal.
   Les !important sont nécessaires : les rangées portent un border-bottom en
   style EN LIGNE, le libellé un .text-dim !important et la valeur un
   .fw-semibold !important (Bootstrap). */
.fiche-side .detail-list > div {
    border-bottom: 0 !important;      /* Ideal sépare par le HAUT (li + li) */
    border-top: 1px solid var(--border);
    padding: 8px 0 !important;
    gap: 14px !important;
}
.fiche-side .detail-list > div:first-child { border-top: 0; }
.fiche-side .detail-list dt {
    font-size: 13.5px !important;
    font-weight: 400;
    color: var(--text-muted) !important;   /* --muted d'Ideal, pas le dim trop pâle */
    flex: none;
}
.fiche-side .detail-list dd {
    font-size: 13.5px !important;
    font-weight: 700 !important;           /* Ideal .v : 700 (le fw-semibold imposait 600) */
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
/* Les personnes (réalisateur, scénaristes) : texte plein comme les autres
   valeurs, accent Ideal seulement au survol. */
.fiche-side .detail-list dd a { color: var(--text); }
.fiche-side .detail-list dd a:hover { color: #4f49cc; }
[data-bs-theme="dark"] .fiche-side .detail-list dd a:hover { color: #7b77e8; }

/* Onglet Casting : la grille compacte d'Ideal (.chars) au lieu des grandes
   cartes d'affiches — 6 colonnes, portraits presque carrés, textes serrés. */
#tab-casting .grid-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    justify-content: start;
    margin-bottom: 26px !important;
}
#tab-casting .grid-cards > .card-title-media {
    width: auto;
    flex: none;
    background: transparent;
    border: none;
}
#tab-casting .grid-cards .card-poster {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1.12;
    border-radius: 12px;
    border: 1px solid var(--border);
}
#tab-casting .card-body-media { padding: 9px 2px 2px; }
#tab-casting .card-body-media .title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    min-height: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab-casting .card-body-media .sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
#tab-casting .section-head { margin-bottom: 14px; }
@media (max-width: 1240px) { #tab-casting .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { #tab-casting .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 860px) {
    .fx-banner { height: 196px; }
    .fx-head { gap: 18px; padding: 0 16px; }
    .fx-poster { margin-top: -76px; }
    .fx-poster img { width: 150px !important; }
    .fx-title { font-size: 25px; }
    .fx-score b { font-size: 30px; }
}
@media (max-width: 560px) {
    .fx-banner { height: 170px; }
    .fx-head { flex-direction: column; align-items: flex-start; }
    .fx-poster { margin-top: -64px; }
    .fx-poster img { width: 136px !important; }
}

/* --------------------------------------------------------------------------
   7. « EN COURS DE DIFFUSION » — onglets par jour, bas de l'accueil
   -------------------------------------------------------------------------- */
.aw-days {
    display: flex;
    gap: 8px;
    padding: 10px;
    margin-bottom: 16px;
}
.aw-day {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.aw-day:hover { color: var(--text); background: rgba(124, 58, 237, 0.08); }
.aw-day.on { background: var(--grad-primary); color: #fff; }
[data-bs-theme="dark"] .aw-day:hover { background: #16161f; }

.aw-vide {
    padding: 30px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
}
.aw-vide i { font-size: 1.6rem; opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. CLASSEMENTS : rangs colorés
   Reprend le schéma déjà en place sur .rank-item (1 violet, 2 cyan, 3 ambre).
   -------------------------------------------------------------------------- */
.rank-row:nth-child(1) .rank-n { color: var(--violet); font-weight: 800; }
.rank-row:nth-child(2) .rank-n { color: var(--info); font-weight: 800; }
.rank-row:nth-child(3) .rank-n { color: var(--warning); font-weight: 800; }
[data-bs-theme="dark"] .rank-row:nth-child(1) .rank-n { color: var(--violet-soft); }

/* --------------------------------------------------------------------------
   9. FONDS DE PAGE — valeurs exactes de l'artifact Ideal
   Clair : #f3f4f8 PLAT (les halos radiaux violet/cyan disparaissent).
   Sombre : #0b0b10 (déjà via les jetons ci-dessus).
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] {
    --night: #f3f4f8;            /* --bg d'Ideal */
    --night-2: #eceef4;          /* --bg-soft d'Ideal */
    --surface-2: #f4f5fa;        /* --panel-2 d'Ideal */
    --bs-body-bg: #f3f4f8;
}
[data-bs-theme="light"] body {
    background: #f3f4f8;
    background-attachment: initial;
}