/* ===========================================================================
   Header mobile (≤767px) — Beautysané
   Menu plein écran à onglets (Boutique / Diagnostic / À propos).
   Markup : header.php (.m-burger + .m-menu) — comportement : assets/js/header-mobile.js
   Les panneaux réutilisent le rendu des méga-menus (functions.megamenu.php).
   =========================================================================== */

/* Burger + overlay : invisibles en desktop. */
.m-burger {
    display: none;
}

.m-menu {
    display: none;
}

/* ===========================================================================
   ≤767px
   =========================================================================== */
@media (max-width: 767px) {

    /* --- Paddings resserrés --- */
    #mainHeader .info-bar {
        padding: 0 16px;
    }

    #main-menu-container {
        padding: 0 16px;
    }

    /* Les langues passent en bas du menu (barre .m-menu__bottom). */
    #mainHeader .info-bar .flags {
        display: none;
    }

    /* --- Barre nav repensée : burger | logo | icônes --- */
    #main-menu-container nav.navbar {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 60px;
    }

    /* Les 3 liens desktop et le lien distributeur disparaissent de la barre :
       ils sont repris dans l'overlay (onglets + bouton bas). */
    #main-menu-container .navbar-nav.main-nav,
    #main-menu-container .aside_menu .distributor-link {
        display: none;
    }

    #main-menu-container .navbar-brand {
        order: 1;
        margin: 0 auto;          /* centre le logo entre burger et icônes */
    }

    #main-menu-container .aside_menu {
        order: 2;
        gap: 0;
    }

    /* --- Burger (3 traits → croix) --- */
    .m-burger,
    .m-burger:hover {
        order: 0;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .m-burger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--bs-ink);
        transition: transform .25s ease, opacity .2s ease;
    }

    #mainHeader.menu-opened .m-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    #mainHeader.menu-opened .m-burger span:nth-child(2) {
        opacity: 0;
    }

    #mainHeader.menu-opened .m-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- État ouvert : #mainHeader devient plein écran, en colonne --- */
    #mainHeader.menu-opened {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #FFF;
    }

    #mainHeader.menu-opened .info-bar,
    #mainHeader.menu-opened #main-menu-container {
        flex: 0 0 auto;
    }

    #mainHeader.menu-opened .m-menu {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }

    /* --- Onglets --- */
    .m-menu__tabs {
        display: flex;
        flex: 0 0 auto;
        margin: 0;
        padding: 0 16px;
        list-style: none;
        border-bottom: 1px solid #ECECEC;
    }

    .m-menu__tab {
        flex: 1;
        list-style: none;
        text-align: center;
    }

    .m-menu__tab > button,
    .m-menu__tab > a {
        display: block;
        width: 100%;
        margin: 0;
        padding: 16px 6px;
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        font: 500 16px/1 "Inter";
        color: #717171;
        text-decoration: none;
        cursor: pointer;
    }

    .m-menu__tab.is-active > button,
    .m-menu__tab.is-active > a {
        color: var(--bs-ink);
        font-weight: 600;
        border-bottom-color: var(--bs-ink);
    }

    /* --- Zone scrollable des panneaux --- */
    .m-menu__panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 16px 28px;
    }

    .m-menu__panel {
        display: none;
    }

    .m-menu__panel.is-active {
        display: block;
    }

    /* Neutralise le panneau méga-menu (dropdown desktop → flux mobile). */
    .m-menu .bs-megamenu {
        position: static;
        left: auto;
        right: auto;
        width: auto;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .m-menu .bs-megamenu::before {
        display: none;
    }

    .m-menu .bs-megamenu__inner,
    .m-menu .bs-megamenu--about .bs-megamenu__inner {
        display: block;
        padding: 0;
    }

    /* Colonne 1 : liens directs (pas d'accordéon). */
    .m-menu .bs-megamenu__links {
        margin: 0 0 22px;
        padding: 0 0 22px;
        border-bottom: 1px solid #ECECEC;
    }

    .m-menu .bs-megamenu__links li + li {
        margin-top: 22px;
    }

    .m-menu .bs-megamenu__links a {
        font: 600 20px/22px "Inter";
        color: var(--bs-ink);
    }

    /* Colonnes 2 & 3 : accordéons (Nos produits / Vos besoins). */
    .m-menu .bs-megamenu__cats,
    .m-menu .bs-megamenu__needs {
        border-bottom: 1px solid #ECECEC;
    }

    .m-menu .bs-megamenu__title {
        position: relative;
        margin: 0;
        padding: 18px 30px 18px 0;
        font: 600 17px/100% "Inter";
        color: var(--bs-ink);
        cursor: pointer;
    }

    .m-menu .bs-megamenu__title::after {
        content: "\f078"; /* fa chevron-down */
        font-family: "FontAwesome";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--bs-ink);
        transition: transform .2s ease;
    }

    .m-menu .bs-megamenu__cats.is-open .bs-megamenu__title::after,
    .m-menu .bs-megamenu__needs.is-open .bs-megamenu__title::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .m-menu .bs-megamenu__cats ul,
    .m-menu .bs-megamenu__needs ul {
        display: none;
        padding: 0 0 18px;
    }

    .m-menu .bs-megamenu__cats.is-open ul,
    .m-menu .bs-megamenu__needs.is-open ul {
        display: block;
    }

    .m-menu .bs-megamenu__cats ul li + li,
    .m-menu .bs-megamenu__needs ul li + li {
        margin-top: 14px;
    }

    .m-menu .bs-megamenu__cats a,
    .m-menu .bs-megamenu__needs a {
        font: 400 16px/20px "Inter";
        color: var(--bs-ink);
    }

    /* Encarts ACF empilés en bas du panneau. */
    .m-menu .bs-megamenu__promos {
        display: block;
        margin-top: 24px;
    }

    .m-menu .bs-megamenu__promo {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .m-menu .bs-megamenu__promo:last-child {
        margin-bottom: 0;
    }

    /* Image d'encart : pleine largeur mais hauteur plafonnée à 140px (recadrée). */
    .m-menu .bs-megamenu__promo-img,
    .m-menu .bs-megamenu__promo-img img {
        width: 100%;
        max-width: 100%;
        height: 140px;
        aspect-ratio: auto;
        object-fit: cover;
    }

    /* --- Barre basse : langues + bouton distributeur (sticky) --- */
    .m-menu__bottom {
        flex: 0 0 auto;
        padding: 14px 16px;
        border-top: 1px solid #ECECEC;
        background: #FFF;
    }

    .m-menu__bottom .lang_mobile_menu {
        margin-bottom: 14px;
        text-align: center;
    }

    .m-menu__bottom .country_languages_btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--bs-ink);
        font: 400 14px/100% "Inter";
        text-decoration: none;
        cursor: pointer;
    }

    .m-menu__bottom .country_languages_btn .img {
        display: inline-block;
        width: 18px;
        height: 13px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    .m-menu__bottom .country_languages_btn .sep {
        color: #B5B5B5;
    }

    .m-menu__bottom .country_languages_btn::after {
        content: "\f078"; /* fa chevron-down */
        font-family: "FontAwesome";
        font-size: 9px;
        margin-left: 4px;
        color: #202020;
    }

    /* Bouton vert « Devenir / Espace distributeur ». */
    .m-menu__cta {
        display: block;
        width: 100%;
        padding: 16px;
        border-radius: 4px;
        background: #2F5E4E;
        text-align: center;
        text-decoration: none !important;
        text-underline-offset: 0;
    }

    .m-menu__cta .label {
        font: 600 15px/1 "Inter";
        color: #FFF;
    }

    .m-menu__cta:hover {
        background: #274e41;
    }
}