/* Animation de rotation pour les icônes des triggers */
.nm-trigger .nm-trigger-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nm-trigger[data-open="true"] .nm-trigger-icon {
    transform: rotate(-90deg);
}

/* --- Navigation - Menu --- */
header nav div[data-isactivekey="true"] {
    background-color: oklch(96.7% 0.003 264.542);
    color: oklch(26.9% 0 0);
}

/* Optimisations viewport */
#nm-viewport {
    transition: height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: top center;
}

#nm-viewport.nm-open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto;
}

#nm-viewport.nm-closed {
    opacity: 0 !important;
    height: 0 !important;
    transform: translateY(4px) scale(0.98) !important;
    pointer-events: none;
}

/* Underline optimisé */
#nm-underline {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation - Submenu */
main nav div[data-isactivekey="true"] {
    background-color: #ffffff;
    color: oklch(26.9% 0 0);
}

/* Performance optimizations */
.nm-trigger {
    -webkit-tap-highlight-color: transparent;
}

#nm-viewport > * {
    will-change: auto;
}


/* --- CONTAINER MENU BUTTON MOBILE --- */
.container-menu-button-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    /*position: absolute;*/
    left: 1rem;
    top: 1.25rem;
    z-index: 1003;
}
@media (min-width: 1024px){ /* 768px */
    .container-menu-button-mobile {
        display: none;
    }
}
.container-menu-button-mobile[aria-expanded="true"] #icon_navigation_menu_toggle_close {
    opacity: 1;
    visibility: visible; /* Devenu visible */
    transition: opacity 0.5s ease 0.25s, visibility 0s 0.25s; /* Ajouter délai pour visibility */
}
.container-menu-button-mobile[aria-expanded="true"] #icon_navigation_menu_toggle_open {
    opacity: 0;
    visibility: hidden; /* Devenu invisible */
    transition: opacity 0.5s ease, visibility 0s 0.25s; /* Ajouter délai pour visibility */
}
.container-menu-button-mobile[aria-expanded="false"] #icon_navigation_menu_toggle_close {
    opacity: 0;
    visibility: hidden; /* Devenu invisible */
    transition: opacity 0.5s ease, visibility 0s 0.25s; /* Ajouter délai pour visibility */
}
.container-menu-button-mobile[aria-expanded="false"] #icon_navigation_menu_toggle_open {
    opacity: 1;
    visibility: visible; /* Devenu visible */
    transition: opacity 0.5s ease 0.25s, visibility 0s 0.25s; /* Ajouter délai pour visibility */
}

.container-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    animation: none;

    background-color: rgba(0,0,0,0);
    transition: background-color 250ms ease-in-out;

    z-index: 1002;
}
#navigation_menu {
    transform: translateX(-100%);
    z-index: 1002;
}
@media (max-width: 1023px){ /* 767px */
    .container-menu[data-visible="true"] {
        width: 100%;
        background-color: rgba(0,0,0,.7);
        backdrop-filter: blur(7px);
        transition: background-color 250ms ease-in-out, backdrop-filter 250ms ease-in-out;
    }
    .container-menu[data-visible="false"] {
        width: 0%;
        background-color: rgba(0,0,0,.0);
        backdrop-filter: blur(0);
        transition: background-color 250ms ease-in-out, width 0ms ease-in-out 250ms, backdrop-filter 250ms ease-in-out;
    }
    .container-menu[data-visible="true"] > #navigation_menu {
        transform: translateX(0);
        transition: transform 250ms ease-in-out;
    }
    .container-menu[data-visible="false"] > #navigation_menu {
        transform: translateX(-100%);
        transition: transform 250ms ease-in-out;
    }
}
@media (min-width: 1024px){ /* 768px */
    #navigation_menu {
        transform: translateX(0);
        transition: transform 0s ease-in-out;
    }
}


.container-menu-button-mobile .icon_toggle {
    display: flex;
    visibility: visible;
    font-size: 1.5rem;

    position: absolute;
    border-radius: 3px;

    z-index: 1;
}

/* --- Navigation menu --- */
#navigation_menu {

    display: flex;
    flex-direction: column;
    justify-content: left;

    top: 0;
    left: 0;

    z-index: 1002;
    -webkit-user-select: none;
    user-select: none;

    position: absolute;
    height: 100dvh;
    width: 18rem;

    padding: 1rem .5rem 3rem .75rem;

    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;

    overflow-y: scroll;
}
@media(min-width: 1024px){
    #navigation_menu {
        transform: translate(0, 0);
        width: 17rem;
    }
}

/* Scroll bar */
#navigation_menu {
    --sb-track-color: rgba(var(--secondary-color-rgb), 0);
    --sb-thumb-color: rgba(var(--secondary-color-rgb), .6);
    --sb-size: 3px;
}
#navigation_menu::-webkit-scrollbar {
    width: var(--sb-size);
}
#navigation_menu::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
}
#navigation_menu::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
    #navigation_menu {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* --- Menu list --- */

#service_menu_list .menu-title-item[aria-current="page"] {
    background-color: #E2D1C2;
}

/* Submenu */
.menu-header-sublist {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}
.menu-header-sublist-open {}
.menu-header-sublist .menu-title-item[aria-current="page"]{
    background-color: #E2D1C2;
}
#service_menu_list > li > ul > li {
    padding-bottom: .25rem;
}
.menu-title-item {
    /*padding: 0.5rem 0.75rem;*/
}
.menu-title-item svg {
    transition: all 0.2s ease-out;
}

.service-menu-current-link,
.menu-current-item {
    background-color: rgba(45, 212, 191, 15%);
}

.service-menu-current-link, .service-menu-current-link > *,
.menu-current-item {
    color: rgb(4 120 87);
}

/* --- Section menu --- */

.section-menu div {
    border-color: transparent;
}
.section-menu div:hover {
    color: #948C7A;
    border-color: #948C7A;
}
.section-menu div[aria-current="page"] {
    color: #948C7A;
    border-color: #948C7A;
}

/* --- Account navigation scrollable (hidden scrollbar) --- */
.account-nav-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.account-nav-scroll::-webkit-scrollbar {
    display: none;
}

/* --- Account navigation dropdown (mobile) --- */
.account-menu-dropdown {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
    pointer-events: none;
}
.account-menu-dropdown.open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}