/*
 * AOC Native Header Style — v1.3.0
 * CSS uniquement : aucun remplacement du DOM VamTam.
 */

body.aoc-native-header-modern {
    --aoc-header-max: 1480px;
    --aoc-header-height: 96px;
    --aoc-logo-max: 270px;
    --aoc-header-accent: #b01b32;
    --aoc-topbar-height: 32px;
    --aoc-menu-font: 12px;
    --aoc-menu-gap: 16px;
    --aoc-submenu-width: 290px;
}

/* ------------------------- base ---------------------------------------- */

body.aoc-native-header-modern .fixed-header-box,
body.aoc-native-header-modern .fixed-header-box header.main-header {
    background: #fff !important;
}

body.aoc-native-header-modern .fixed-header-box header.main-header {
    border-bottom: 1px solid rgba(20,20,20,.065) !important;
    box-shadow: 0 3px 18px rgba(20,20,20,.035);
}

/* Top bar */
body.aoc-native-header-modern #top-nav-wrapper {
    min-height: var(--aoc-topbar-height);
    background: #292c2f !important;
    border: 0 !important;
}

body.aoc-native-header-modern #top-nav-wrapper .top-nav,
body.aoc-native-header-modern #top-nav-wrapper .top-nav-inner {
    min-height: var(--aoc-topbar-height);
}

body.aoc-native-header-modern #top-nav-wrapper .top-nav-inner {
    width: min(calc(100% - 40px), var(--aoc-header-max)) !important;
    max-width: var(--aoc-header-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.aoc-native-header-modern #top-nav-text,
body.aoc-native-header-modern #top-nav-social {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

body.aoc-native-header-modern #top-nav-text,
body.aoc-native-header-modern #top-nav-text span,
body.aoc-native-header-modern #top-nav-social,
body.aoc-native-header-modern #top-nav-social span {
    color: rgba(255,255,255,.80) !important;
}

body.aoc-native-header-no-topbar #top-nav-wrapper {
    display: none !important;
}

/* ------------------------- desktop ------------------------------------- */

@media (min-width: 901px) {
    body.aoc-native-header-modern header.main-header > .limit-wrapper {
        width: min(calc(100% - 40px), var(--aoc-header-max)) !important;
        max-width: var(--aoc-header-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.aoc-native-header-modern .header-contents {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: none !important;
        min-height: var(--aoc-header-height);
    }

    body.aoc-native-header-modern .header-contents > .first-row {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.aoc-native-header-modern .logo-wrapper {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.aoc-native-header-modern .logo-wrapper > .logo {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: var(--aoc-logo-max) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.aoc-native-header-modern .logo-wrapper > .logo img.normal-logo,
    body.aoc-native-header-modern .logo-wrapper > .logo img.alternative-logo {
        width: auto !important;
        max-width: var(--aoc-logo-max) !important;
        height: auto !important;
        max-height: calc(var(--aoc-header-height) - 24px) !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain;
        object-position: left center;
    }

    body.aoc-native-header-modern .logo-tagline {
        display: none !important;
    }

    body.aoc-native-header-modern .mobile-logo-additions {
        display: none !important;
    }

    body.aoc-native-header-modern .header-contents > .second-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: var(--aoc-header-height);

        margin: 0 0 0 auto !important;
        padding: 0 !important;

        float: none !important;
        overflow: visible !important;
    }

    body.aoc-native-header-modern #menus {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    /*
     * Structure réelle observée :
     * nav#main-menu > div.menu-...-container > ul.menu > li
     */
    body.aoc-native-header-modern nav#main-menu {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    body.aoc-native-header-modern nav#main-menu > div {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        justify-content: flex-end !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: var(--aoc-menu-gap) !important;

        float: none !important;
        clear: none !important;

        list-style: none !important;
        white-space: nowrap !important;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li {
        position: relative !important;

        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: none !important;

        list-style: none !important;
        white-space: nowrap !important;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li > a {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: var(--aoc-header-height);

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 2px solid transparent !important;

        font-size: var(--aoc-menu-font) !important;
        line-height: 1.15 !important;
        font-weight: 650 !important;
        letter-spacing: .01em !important;
        text-transform: uppercase !important;

        color: #393939 !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        transition: color .18s ease, border-color .18s ease;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li:hover > a,
    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li.current-menu-item > a,
    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li.current-menu-ancestor > a,
    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li.current_page_item > a,
    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li.current_page_ancestor > a {
        color: var(--aoc-header-accent) !important;
        border-bottom-color: var(--aoc-header-accent) !important;
    }

    /* Recherche et Don sont des frères de .second-row dans ce thème. */
    body.aoc-native-header-modern .header-contents > .search-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 42px !important;
        width: 42px !important;
        max-width: 42px !important;

        margin: 0 0 0 12px !important;
        padding: 0 !important;
        float: none !important;
    }

    body.aoc-native-header-modern
    .search-wrapper .header-search.wpv-overlay-search-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: transparent !important;
        color: #222 !important;
    }

    body.aoc-native-header-modern .header-contents > #phone-num {
        display: flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 0 0 10px !important;
        padding: 0 !important;

        float: none !important;
    }

    body.aoc-native-header-modern #phone-num a.vamtam-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 44px !important;

        margin: 0 !important;
        padding: 11px 17px !important;

        border: 0 !important;
        border-radius: 8px !important;

        background: var(--aoc-header-accent) !important;
        color: #fff !important;

        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;

        box-shadow: 0 7px 18px rgba(176,27,50,.14);
    }

    body.aoc-native-header-modern #phone-num a.vamtam-button .btntext {
        color: #fff !important;
    }
}

/* ------------------------- sous-menus stables et lisibles ---------------- */

/*
 * IMPORTANT — v1.3
 * .sub-menu-wrapper est le conteneur ANIMÉ par VamTam. Il peut rester présent
 * dans le DOM quand le menu est fermé et VamTam lui applique ses propres
 * dimensions/transitions. On ne lui impose donc plus : largeur, hauteur,
 * padding, fond, bordure, ombre, overflow, display, visibility ou opacity.
 *
 * Le style visuel est appliqué au UL .sub-menu situé À L'INTÉRIEUR du wrapper.
 * Cela supprime les grands rectangles blancs visibles au repos et évite que
 * notre CSS se batte avec l'animation native du thème (effet de tremblement).
 */

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu .sub-menu-wrapper {
    /* aucune géométrie : VamTam garde le contrôle */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu .sub-menu-wrapper::before,
body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu .sub-menu-wrapper::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu {
    box-sizing: border-box !important;

    min-width: var(--aoc-submenu-width) !important;
    max-width: min(var(--aoc-submenu-width), 92vw) !important;

    margin: 0 !important;
    padding: 8px !important;

    border: 1px solid rgba(20,20,20,.08) !important;
    border-radius: 14px !important;

    background: #fff !important;
    background-color: #fff !important;

    box-shadow: 0 18px 42px rgba(20,20,20,.15) !important;

    list-style: none !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    background: transparent !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li > a {
    box-sizing: border-box !important;
    display: block !important;

    width: 100% !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    color: #292929 !important;
    text-decoration: none !important;
    white-space: normal !important;

    text-shadow: none !important;

    transition: background-color .15s ease, color .15s ease !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li > a span {
    color: inherit !important;
    opacity: 1 !important;
}

body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li > a:hover,
body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li.current-menu-item > a,
body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu > li.current-menu-ancestor > a {
    background: #f5f2ed !important;
    color: var(--aoc-header-accent) !important;
}

/* Les sous-menus imbriqués gardent eux aussi le positionnement VamTam. */
body.aoc-native-header-modern.aoc-native-header-rounded-dropdowns
nav#main-menu ul.sub-menu ul.sub-menu {
    min-width: var(--aoc-submenu-width) !important;
    background: #fff !important;
}

/* ------------------------- desktop plus étroit -------------------------- */

@media (min-width: 901px) and (max-width: 1380px) {
    body.aoc-native-header-modern .header-contents {
        gap: 16px !important;
    }

    body.aoc-native-header-modern .logo-wrapper > .logo,
    body.aoc-native-header-modern .logo-wrapper > .logo img.normal-logo,
    body.aoc-native-header-modern .logo-wrapper > .logo img.alternative-logo {
        max-width: min(var(--aoc-logo-max), 235px) !important;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu {
        gap: min(var(--aoc-menu-gap), 8px) !important;
    }

    body.aoc-native-header-modern nav#main-menu > div > ul.menu > li > a {
        font-size: min(var(--aoc-menu-font), 10.5px) !important;
        letter-spacing: 0 !important;
    }

    body.aoc-native-header-modern .header-contents > .search-wrapper {
        margin-left: 5px !important;
    }

    body.aoc-native-header-modern .header-contents > #phone-num {
        margin-left: 4px !important;
    }

    body.aoc-native-header-modern #phone-num a.vamtam-button {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ------------------------- mobile -------------------------------------- */

@media (max-width: 900px) {
    body.aoc-native-header-modern.aoc-native-header-hide-topbar-mobile
    #top-nav-wrapper {
        display: none !important;
    }

    body.aoc-native-header-modern header.main-header > .limit-wrapper {
        width: 100% !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .header-contents > .first-row {
        min-height: 78px !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .logo-wrapper {
        display: grid !important;
        grid-template-columns: 44px minmax(0,1fr) 44px;
        align-items: center !important;
        gap: 8px;

        width: 100% !important;
        min-height: 78px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    #mp-menu-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        grid-column: 1;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50%;

        background: #f5f2ed;
        color: var(--aoc-header-accent) !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .logo-wrapper > .logo {
        grid-column: 2;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 290px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .logo-wrapper > .logo img.normal-logo,
    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .logo-wrapper > .logo img.alternative-logo {
        width: auto !important;
        max-width: min(100%,285px) !important;
        height: auto !important;
        max-height: 60px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.aoc-native-header-modern .logo-tagline {
        display: none !important;
    }

    body.aoc-native-header-modern.aoc-native-header-compact-mobile
    .mobile-logo-additions {
        grid-column: 3;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 44px !important;

        margin: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.aoc-native-header-modern .fixed-header-box *,
    body.aoc-native-header-modern .fixed-header-box *::before,
    body.aoc-native-header-modern .fixed-header-box *::after {
        transition: none !important;
        animation: none !important;
    }
}