/*
Theme Name: DiviChild
Description: Thème enfant Divi pour les personnalisations du site.
Author: La Petite Agence
Author URI: https://www.lepetitsite.fr/
Template: Divi
Version: 1.1.0
Text Domain: DiviChild
*/

/* =========================================================
   MENU MOBILE FULLSCREEN — DIVI 5 / EN-TÊTE CLASSIQUE
   ========================================================= */

@media (max-width: 980px) {
    #main-header {
        --lpa-mobile-menu-bg: #384544;
        --lpa-mobile-menu-color: #ffffff;
    }

    /* Le logo et le bouton restent accessibles au-dessus du menu. */
    #main-header .logo_container,
    #main-header .mobile_menu_bar {
        position: relative;
        z-index: 10001;
    }

    #main-header .mobile_menu_bar::before {
        font-size: 34px;
    }

    /* Croix de fermeture, blanche uniquement lorsque le menu est ouvert. */
    #main-header .mobile_nav.opened .mobile_menu_bar::before {
        content: "\00d7" !important;
        color: var(--lpa-mobile-menu-color) !important;
        font-family: Arial, sans-serif !important;
        font-size: 42px !important;
        font-weight: 300 !important;
        line-height: 1 !important;
    }

    /* Panneau plein écran. */
    #main-header .et_mobile_menu {
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 105px 24px 40px !important;
        background: var(--lpa-mobile-menu-bg) !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 10000;
        animation: none !important;
        transition: none !important;
    }

    /* Ouverture et fermeture immédiates. */
    #main-header .mobile_nav.closed .et_mobile_menu {
        display: none !important;
    }

    #main-header .mobile_nav.opened .et_mobile_menu {
        display: block !important;
    }

    /* Liens principaux : même taille et même graisse. */
    #main-header .et_mobile_menu > li {
        padding: 0;
        text-align: center;
    }

    #main-header .et_mobile_menu > li > a {
        padding: 11px 10px;
        color: var(--lpa-mobile-menu-color) !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        opacity: 1;
    }

    /* Les entrées avec sous-menu gardent le même style,
       avec seulement un espacement et un trait en plus. */
    #main-header .et_mobile_menu > .menu-item-has-children {
        margin-bottom: 16px;
    }

    #main-header .et_mobile_menu > .menu-item-has-children > a::after {
        content: "";
        display: block;
        width: 42px;
        height: 2px;
        margin: 10px auto 0;
        background: currentColor;
        opacity: 0.5;
    }

    /* Sous-menus visibles et clairement hiérarchisés. */
    #main-header .et_mobile_menu .sub-menu {
        display: block !important;
        padding: 0;
        background: transparent !important;
        box-shadow: none !important;
    }

    #main-header .et_mobile_menu .sub-menu a {
        padding: 6px 10px;
        color: var(--lpa-mobile-menu-color) !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.35;
        text-align: center;
        opacity: 0.75;
    }

    #main-header .et_mobile_menu a:hover,
    #main-header .et_mobile_menu .current-menu-item > a,
    #main-header .et_mobile_menu .current-menu-ancestor > a {
        background: transparent !important;
        color: var(--lpa-mobile-menu-color) !important;
        opacity: 1;
    }
}