/* ============================= */
/*           MENUS GENERAL       */
/* ============================= */

/* Conteneur d'un menu */
.nav_bar {
    position: relative;
    /* pour que le dropdown soit positionné par rapport au menu */
}

/* Dropdown général */
.dropdown_menu_level_1 {
    list-style: none;
    /* pas de puces devant les éléments de la liste*/
}

/* Dropdown spécifique par type de menu */
.menu_article .dropdown_menu_level_1,
.menu_event .dropdown_menu_level_1,
.menu_etats .dropdown_menu_level_1 {
    background-color: rgb(101, 42, 42);
}

/* Items du menu */
.dropdown_menu_level_1 li {
    padding: 0.5rem 0.5rem;
    cursor: pointer;
}

.dropdown_menu_niv_2 {
    background-color: rgb(125, 67, 67);
    list-style: none;
}


/* ===============================*/
/*  MENU  POUR  DESKTOP  */
/* =============================== */

@media (min-width: 769px) {
    /* Pour les écrans PC / larges */

    .nav_bar {
        flex: 0 1 auto;
        /* s'adapte à la place disponible */
        min-width: 0;
        /* indispensable pour permettre le shrink */
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 100%;
        max-height: 50vh;
        overflow: visible;
    }

    /* Le titre rétrécit automatiquement */
    .nav_bar .main_title {
        font-size: clamp(1vw, 2.5vw, 3vw);
        white-space: nowrap;
        /* évite le retour à la ligne */
    }

    /* Effet au survol */
    .nav_bar:hover {
        background-color: rgba(15, 89, 99, 0.1);
        /* légère couleur de fond */
        color: #fff;
        /* change la couleur du texte */
        /* petit effet de "soulèvement" */
    }

    .dropdown_menu_level_1 {
        position: fixed;
        top: calc(var(--topBarHeight) * 1);
        max-height: 0vh;
        /* hauteur 0 quand fermé */
        overflow: hidden;
        /* cache le contenu */
        padding: 0 0.5rem;
        /* padding horizontal seulement */
        border-radius: 5px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        min-width: 8rem;

        font-size: 1.2rem;
        background-color: rgb(55, 101, 42);
        color: #fff;
        transition: max-height 0.4s ease, padding 0.4s ease;
        z-index: 5000;
    }


    /* Effet au survol d'un item */
    .dropdown_menu_level_1 li:hover {
        background-color: #a76565;
    }

    /* Menu s'ouvre au survol */
    .nav_bar:hover .dropdown_menu_level_1 {
        max-height: 50vh;
        /* hauteur maximale quand ouvert */
        padding: 0.3rem 0.5rem;
        /* padding appliqué quand ouvert */
        overflow: visible;
    }


    /* ----- sous-menu------- */
    .dropdown_menu_level_2 {
        position: absolute;
        top: 0;
        left: 100%;
        /* positionné à droite du parent */

        display: flex;
        flex-direction: column;
        /* enfants alignés verticalement */
        flex-wrap: wrap;
        /* permet de créer plusieurs colonnes si nécessaire */
        gap: 0.1rem 2rem;

        /* multi-colonnes automatiques */
        column-width: 12rem;
        /* largeur min d’une colonne */
        column-gap: 2rem;
        /* espace entre colonnes */

        max-height: 0;
        /* invisible */
        overflow: hidden;
        /* masque le contenu */
        opacity: 0;
        /* invisible */
        transform: translateY(-5px);
        /* léger décalage vers le haut */
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
        padding: 0 0 0 1rem;

        /* Largeur max avant de déclencher les colonnes */
        max-width: 80rem;
        /* tu peux ajuster */
    }

    .dropdown_menu_level_2 li {
        background-color: #bbae67;
        font-size: clamp(0.75vw, 1.5vw, 2vw);
        white-space: nowrap;
        min-width: 10rem;
        /* empêche les colonnes de se chevaucher */
        list-style: none;
        padding: 0.3rem 0;

    }



    /* Affichage au survol d’un li du menu niveau 1 */
    /* .dropdown_menu_level_1 li:hover>.dropdown_menu_level_2 { */
    .dropdown_menu_level_2 {
        max-height: 100vh;
        /* grande valeur pour laisser se déployer */
        opacity: 1;
        transform: translateY(0);
        padding-top: 0.3rem;
        /* ajout du padding en ouverture */
        padding-bottom: 0.3rem;
    }

}




/* ============================= */
/*  MENU  POUR  MOBILE */
/* ============================= */

@media (max-width: 768px) {
    .nav_bar {
        flex: 0 1 auto;
        /* s'adapte à la place disponible */
        min-width: 0;
        /* indispensable pour permettre le shrink */
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 100%;
    }

    /* Le titre rétrécit automatiquement */
    .nav_bar .nav_bar_item {
        font-size: clamp(1vw, 5vw, 10vw);
        white-space: nowrap;
        /* évite le retour à la ligne */
    }

    /* DROPDOWN : version mobile FIXED */
    .dropdown_menu_level_1 {
        position: fixed;
        /* relative ne fonctionne pas*/
        top: calc(var(--topBarHeight) * 1);
        left: 0;
        width: 100vw;
        /* viewport width */
        min-width: 5rem;
        background: #222;
        font-size: clamp(1vw, 3vw, 7vw);
        display: flex;
        flex-direction: column;
        /* Les enfants sont empilés verticalement */
        align-items: center;
        /* Tous les enfants sont centrés verticalement */
        max-height: 0;
        /* caché par défaut */
        overflow: hidden;
        /* Rien ne dépasse */
        padding: 0;
        /* pas de padding quand fermé */
        transition: max-height 0.5s ease, padding 0.5s ease;
        /* transition minimale */
        z-index: 5000;
    }

    .nav_bar.open .dropdown_menu_level_1 {
        max-height: 50vh;
        /* suffisamment grand pour tous les cas */
        overflow: visible;
        padding: 1vh 0;
    }

    .dropdown_menu_niv_2 {
        max-height: 0;
        /* invisible */
        overflow: hidden;
        /* masque le contenu */
        opacity: 0;
        /* invisible */
        transform: translateY(-5px);
        /* léger décalage vers le haut */
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
        padding-left: 1rem;
        /* optionnel : indentation */
    }

}