/*
Theme Name: Divi Child
Theme URI: https://www.akaciakoncept.com
Description: Thème enfant personnalisé pour Divi
Author: Votre Nom
Author URI: https://www.akaciakoncept.com
Template: divi
Version: 1.0.0
*/

/* Style global du conteneur du méga menu */

@media (min-width: 981px) {
    /* 1. Conteneur global du méga menu */
    #et-top-navigation li.mega-menu > ul {
        width: 750px !important;
        left: auto !important;
        right: 0 !important;
        padding: 25px !important;
        display: flex !important;
        flex-wrap: wrap;
        max-height: 80vh !important; /* Limite la hauteur à 80% de la hauteur de l'écran */
        overflow-y: auto !important; /* Active une barre de défilement verticale si nécessaire */
        background: #ffffff !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    /* 2. Organisation des colonnes principales */
    #et-top-navigation li.mega-menu > ul > li {
        width: 50%;
        float: none !important;
        padding: 10px 15px;
    }

    /* 3. Cible spécifique grâce à votre classe personnalisée ".mon-mega-item" */
    #et-top-navigation li.mega-menu li.mon-mega-item > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
        line-height: normal !important;
        padding: 8px 0 !important;
    }

    /* 4. Style et retour à la ligne forcé pour la description de cette classe */
    #et-top-navigation li.mega-menu li.mon-mega-item .menu-item-description {
        display: block !important;
        order: 2 !important;
        width: 100% !important;
        margin-top: 6px !important;
        font-size: 13px !important;
        color: #b6d118 !important; /* Votre couleur personnalisée */
        font-weight: normal !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

		/* S'assure que le menu mobile déroulant affiche tous les éléments */
    #et_mobile_nav_menu .mobile_menu {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    /* Force l'affichage des liens même s'ils n'ont pas de sous-menus */
    #et_mobile_nav_menu .mobile_menu li {
        display: block !important;
    }
}