/* ------------------------------------------------------------------
   Panneau de categories du menu principal (Films / Series)

   Le theme n'affichait qu'une colonne etroite de 220 px : avec vingt
   genres, la liste depassait l'ecran et n'etait pas parcourable.
   Ce panneau reprend le meme declencheur (survol du menu parent) mais
   s'ouvre en plusieurs colonnes.

   Le fond clair est volontaire : c'est celui des autres sous-menus du
   theme (Sports, TV en direct). Changer seulement celui-ci creerait
   une incoherence dans la barre de navigation.
   ------------------------------------------------------------------ */

.header-section ul li ul.mega-panneau {
    width: min(880px, calc(100vw - 40px));
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.header-section ul li ul.mega-panneau > li.mega-contenu {
    display: flex;
    gap: 34px;
    padding: 26px 30px;
    border-bottom: 0;
    overflow: visible;
}

.mega-titre {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #98a0ad;
    margin-bottom: 12px;
    font-weight: 600;
}

/* --- Liens --- */
.header-section ul li ul.mega-panneau .mega-bloc a {
    display: block;
    padding: 6px 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: #1d2025;
    border: 0;
    white-space: nowrap;
}

.header-section ul li ul.mega-panneau .mega-bloc a:hover,
.header-section ul li ul.mega-panneau .mega-bloc a:focus-visible {
    color: #ff8c00;
}

.header-section ul li ul.mega-panneau .mega-bloc a:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 2px;
    border-radius: 3px;
}

.mega-lien-fort {
    font-weight: 700 !important;
}

/* --- Colonnes --- */
.mega-raccourcis {
    flex: 0 0 150px;
    border-right: 1px solid #ececf0;
    padding-right: 24px;
}

.mega-genres {
    flex: 1 1 auto;
    min-width: 0;
}

.mega-colonnes {
    column-count: 3;
    column-gap: 26px;
}

@media (max-width: 1200px) {
    .mega-colonnes { column-count: 2; }
}

.mega-colonnes a {
    break-inside: avoid;
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

/* Le nombre de titres aide a choisir : un genre a 55 titres n'est pas
   la meme promesse qu'un genre a 2. */
.mega-compte {
    font-size: 11.5px;
    color: #a8aeb8;
    font-variant-numeric: tabular-nums;
}

/* --- Mise en avant --- */
.mega-vedette {
    flex: 0 0 150px;
    border-left: 1px solid #ececf0;
    padding-left: 24px;
}

.mega-vedette a {
    padding: 0 !important;
    white-space: normal !important;
}

.mega-vedette img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    display: block;
    margin-bottom: 9px;
}

.mega-vedette-titre {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: #1d2025;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Mobile : le menu deroulant devient une liste dans le panneau replie.
   Le positionnement absolu et les colonnes n'ont plus de sens.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {

    .header-section ul li ul.mega-panneau {
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }

    .header-section ul li ul.mega-panneau > li.mega-contenu {
        flex-direction: column;
        gap: 18px;
        padding: 14px 16px;
    }

    .mega-raccourcis,
    .mega-vedette {
        flex: none;
        border: 0;
        padding: 0;
    }

    /* L'affiche prend trop de place sur un petit ecran : on garde le texte. */
    .mega-vedette { display: none; }

    .mega-colonnes { column-count: 2; column-gap: 16px; }

    .header-section ul li ul.mega-panneau .mega-bloc a {
        padding: 9px 0;
        font-size: 15px;
    }
}