.nav-toggle { display: none; }
.nav-mobile { display: none; }

@media (max-width: 1300px) {
    .nav-menu { display: none; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface-2);
        color: var(--text);
        font-size: 1.3rem;
        cursor: pointer;
    }

    .nav-mobile {
        display: block;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        background: var(--surface-solid);
        transition: max-height 0.4s var(--ease);
        z-index: 1029;
    }

    /* La bordure n'apparaît qu'à l'ouverture : fermé, le panneau fait 0 de
       hauteur et sa bordure resterait visible (trait figé) quand la navbar
       se masque au scroll. */
    .nav-mobile.open { max-height: 80vh; overflow-y: auto; border-bottom: 1px solid var(--border); }
    .nav-mobile ul { list-style: none; margin: 0; padding: 12px; }
    .nav-mobile a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border-radius: var(--radius-sm);
        color: var(--text);
        font-weight: 600;
    }
    .nav-mobile a i {
        width: 20px;
        text-align: center;
        font-size: 1.05rem;
        color: var(--violet);
    }
    .nav-mobile a:hover, .nav-mobile a.active { background: rgba(124, 58, 237, 0.16); }
}

@media (max-width: 860px) {
    .search-box-desktop { display: none; }
    .hero { min-height: 460px; }
    /* Marge basse supplémentaire : réserve la place des pastilles pour qu'elles
       ne chevauchent plus les boutons d'action. */
    .hero-content { padding: 32px 24px 56px; }
    .hero-inner { gap: 22px; }
    .hero-poster { width: 160px; }
    /* Pastilles centrées en bas plutôt qu'en bas à droite, où elles passaient
       par-dessus les boutons sur les petits écrans. */
    .hero-dots { left: 0; right: 0; bottom: 14px; justify-content: center; }
    .grid-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
    .scroller > * { width: 148px; }
    .section { padding: 40px 0; }
}

@media (max-width: 560px) {
    body { padding-top: 64px; }
    :root { --nav-height: 64px; }
    /* Barre du haut compacte : évite que le bouton menu (hamburger) déborde à droite. */
    .navbar-x .inner { padding: 0 12px; gap: 12px; }
    .nav-actions { gap: 8px; }
    /* Connexion/inscription : décoller la carte du logo en haut (plus centrée
       verticalement sur mobile, où elle remontait sous le nom du site). */
    .auth-wrap { align-items: flex-start; padding-top: 90px; padding-bottom: 32px; }
    .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    /* Hauteur auto : le hero épouse son contenu (poster + texte) pour ne pas
       laisser de vide une fois les boutons retirés. */
    .hero { min-height: 0; border-radius: var(--radius-lg); align-items: stretch; }
    /* Poster flottant à gauche : le badge, le titre et les métadonnées viennent
       remplir l'espace à sa droite (plus de vide). */
    .hero-content { padding: 26px 16px 42px; }
    .hero-inner { display: block; }
    .hero-poster { display: block; float: left; width: 100px; margin: 0 16px 12px 0; }
    .hero-content h1 { font-size: 1.55rem; margin-bottom: 12px; }
    .hero-content .eyebrow { margin-bottom: 12px; }
    .hero-meta { gap: 10px 14px; margin-bottom: 0; }
    /* Boutons « Voir la fiche / Explorer » retirés du slider DRAMAS sur mobile
       (uniquement .hero-clean ; le slider news garde ses boutons).
       !important car Bootstrap force .d-flex { display:flex !important }. */
    .hero-clean .hero-text > .d-flex { display: none !important; }
    /* Synopsis masqué sur mobile : trop long dans le slider et il laissait un
       vide (marge du paragraphe) quand il était absent. */
    .hero-content p { display: none; }
    /* ...sauf pour le slider news, où l'extrait fait partie du contenu. */
    .hero-news .hero-content p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hero-news { min-height: 360px; }
    .brand { font-size: 1.2rem; }
    .brand img { height: 28px; }
    .section-head h2 { font-size: 1.25rem; }
    .footer .inner { padding: 40px 16px 24px; }
}

@media (max-width: 380px) {
    .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Fiche (onglet Aperçu) : réorganisation des blocs en version mobile.
   Sous 992px les deux colonnes s'empilent. On les transforme en display:contents
   pour que TOUS les blocs (colonne principale + barre latérale) deviennent des
   éléments d'un même flux vertical, ordonnables via les classes .mo1..mo10.
   Objectif : infos utiles en haut, commentaires toujours en dernier. */
@media (max-width: 991.98px) {
    /* Grille à UNE colonne minmax(0,1fr) : le « 0 » empêche la colonne de
       s'élargir à la largeur du contenu. Un carrousel (.scroller) reste donc
       borné à l'écran et défile en interne au lieu de faire déborder la page.
       On cible « > .row » (enfant direct) pour ne pas toucher les grilles
       imbriquées comme le casting. margin/gutter à 0 : sans colonnes
       (display:contents) les marges Bootstrap ne sont plus compensées. */
    #tab-apercu > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    #tab-apercu > .row > .col-lg-8,
    #tab-apercu > .row > .col-lg-4 { display: contents; }

    #tab-apercu > .row > .col-lg-8 > *,
    #tab-apercu > .row > .col-lg-4 > * { min-width: 0; max-width: 100%; }

    #tab-apercu .mo1 { order: 1; }
    #tab-apercu .mo2 { order: 2; }
    #tab-apercu .mo3 { order: 3; }
    #tab-apercu .mo4 { order: 4; }
    #tab-apercu .mo5 { order: 5; }
    #tab-apercu .mo6 { order: 6; }
    #tab-apercu .mo7 { order: 7; }
    #tab-apercu .mo8 { order: 8; }
    #tab-apercu .mo9 { order: 9; }
    #tab-apercu .mo10 { order: 10; }

    /* Le bloc Statistiques (mo9) n'a pas de marge basse : sans ça, le titre
       « Commentaires » se collerait à son panneau. On rétablit un espace au
       dessus du bloc commentaires, cohérent avec les autres blocs. */
    #tab-apercu .mo10 { margin-top: 24px; }
}