/* ===============================================
   MENU ACCORDÉON ASTUCES - DESIGN FIRSTGEN
   =============================================== */
aside.site-sidebar {
    min-width: 320px;
}
/* Conteneur du Menu */
.site-sidebar-container {
    width: 100%;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Menu Principal */
.site-sidebar {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

.site-sidebar li {
    list-style: none !important;
    margin-bottom: 0 !important;
    transition: background-color 0.2s ease !important;
}

.site-sidebar li:last-child {
    border-bottom: none !important;
}

.site-sidebar li:hover {
    background-color: #fefaf9 !important;
}

/* Liens normaux du menu */
.site-sidebar a {
    display: block !important;
    padding: 1rem 1.25rem !important;
    color: #333333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 400 !important;
}

.site-sidebar a:hover {
    color: #e55a2b !important;
    background-color: #fef7f4 !important;
    padding-left: 1.5rem !important;
}

.site-sidebar a:focus {
    outline: 2px solid #ff6b35 !important;
    outline-offset: -2px !important;
    background-color: #fff0eb !important;
}
.menu-sidebar {
    padding: 0!important;
    list-style: none;
}
/* Wrapper pour les éléments avec sous-menus */
.menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

.menu-item-wrapper:hover {
    background-color: #fefaf9 !important;
}

/* Lien principal dans le wrapper */
.menu-item-link {
    flex: 1 !important;
    padding: 1rem 1.25rem !important;
    color: #333333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 400 !important;
}

.menu-item-link:hover {
    color: #e55a2b !important;
    padding-left: 1.5rem !important;
}

.menu-item-link:focus {
    outline: 2px solid #ff6b35 !important;
    outline-offset: -2px !important;
    background-color: #fff !important;
}

/* Accordéons à tous les niveaux */
.accordion-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem !important;
    margin: 0.5rem  !important;
    color: var(--global--color-primary) !important;
    border: 1px solid #e7e7e7 !important;
    background: #e7e7e7 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    min-width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}

.accordion-toggle:hover {
    background: #ffffff !important;
    border-color: var(--global--color-primary) !important;
    color: var(--global--color-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(255,107,53,0.2) !important;
}

.accordion-toggle:focus {
    outline: 2px solid var(--global--color-primary) !important;
    outline-offset: 0 !important;
}

.accordion-toggle[aria-expanded="true"] {
    background: #e7e7e7 !important;
    border-color: #e7e7e7 !important;
    color: var(--global--color-primary) !important;
}

/* Styles spécifiques par niveau d'accordéon */
.accordion-level-0 {
    font-weight: 500 !important;
}

.accordion-level-1 {
    font-weight: 400 !important;
    margin: 0.25rem !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0.5rem !important;
}

.accordion-level-2,
.accordion-level-3 {
    font-weight: 400 !important;
    margin: 0.25rem 0.5rem 0.25rem 0.25rem !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0.375rem !important;
}

/* Icônes d'accordéon */
.accordion-icon {
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    transition: transform 0.3s ease !important;
}

/* Icônes plus petites pour les niveaux inférieurs */
.accordion-level-1 .accordion-icon {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid currentColor !important;
}

.accordion-level-2 .accordion-icon,
.accordion-level-3 .accordion-icon {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 3px solid currentColor !important;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg) !important;
}

/* Sous-menus */

     .sub-menu .sub-menu {
        display: none !important;
        opacity: 0 !important;
        background: #fefaf9 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: opacity 0.3s ease !important;
        border-top: 1px solid #f5f5f5 !important;
        list-style: none;
    }
    .menu-sidebar > .menu-item-has-children > .menu-item-wrapper {
        display: none !important;
    }





.accordion-open > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    padding: 0.5rem 0 !important;

}

.sub-menu li {
    border-bottom: 1px solid var(--global--color-primary) !important;
    padding-left: 0 !important;
    background: #fefaf9 !important;
}

.sub-menu li:last-child {
    /* border-bottom: none !important; */
}

.sub-menu li:hover {
    background-color: #fff0eb !important;
}

/* Styles pour les différents niveaux de sous-menus */
.sub-menu-level-0 {
    background: #ffffff !important;
    padding-left: 0 !important;
}

.sub-menu-level-1 {
    background: #ffffff !important;
}

.sub-menu-level-2 {
    background: #ffffff !important;
}

/* Indentation progressive pour les sous-menus imbriqués */
.sub-menu .sub-menu li {
    padding-left: 1rem !important;
    /* background: #ffffff !important; */
}

.sub-menu .sub-menu .sub-menu li {
    padding-left: 4rem !important;
    /* background: #ffffff !important; */
}

.sub-menu .sub-menu .sub-menu .sub-menu li {
    padding-left: 5rem !important;
    /* background: #ffffff !important; */
}

.sub-menu a {
    padding: 0.75rem 1.25rem !important;
    font-size: 1em !important;
    color: var(--global--color-primary) !important;
    font-weight: 500 !important;
    width: 100%;
    display: block;
}

/* Styles pour les sous-menus de niveau 2+ */
.sub-menu .sub-menu a {
    font-size: 0.85em !important;
    padding: 0.625rem 1rem !important;
    color: var(--global--color-primary) !important;
    width: 100%;
    display: block;
}

.sub-menu .sub-menu .sub-menu a {
    font-size: 0.8em !important;
    padding: 0.5rem 1rem !important;
    color: #777777 !important;
    width: 100%;
    display: block;
}

.sub-menu a:hover {
    color: var(--global--color-primary) !important;
    background-color: #ffffff !important;
    padding-left: 1.5rem !important;
}

/* États actifs */
.site-sidebar {
    .current-menu-item > a,
    .current-menu-item > .menu-item-wrapper > .menu-item-link {
        font-weight: 600 !important;
        color: var(--global--color-primary) !important;

        /* border-left: 3px solid  var(--global--color-primary) !important; */
    }

    .current-menu-ancestor > .menu-item-wrapper > .menu-item-link {
        color: var(--global--color-primary) !important;
        font-weight: 500 !important;
    }

    .current-menu-ancestor > .menu-item-wrapper > .accordion-toggle {
        background: #e7e7e7 !important;
        border-color: #e7e7e7 !important;
        color: var(--global--color-primary) !important;
    }
}

/* Masquer le premier parent */
.site-sidebar > li:first-child > .menu-item-wrapper,
.site-sidebar > li:first-child > a {
    display: none !important;
}

/* Afficher directement les sous-menus du premier parent */
.site-sidebar > li:first-child > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: none !important;
    background: #ffffff !important;
}

/* Ajuster le style des sous-menus du premier parent */
.site-sidebar > li:first-child > .sub-menu > li {
    border-bottom: 1px solid var(--global--color-primary) !important;
}

.site-sidebar > li:first-child > .sub-menu > li:last-child {
    border-bottom: 1px solid var(--global--color-primary) !important;
}

/* ===============================================
   STYLES RESPONSIFS
   =============================================== */

/* Mobile (jusqu'à 768px) */
@media (max-width: 768px) {
    .menu-sidebar > .menu-item-has-children > .menu-item-wrapper {
        display: flex !important;
    }
    .sub-menu {
        display: none !important;
        opacity: 0 !important;
        background: #fefaf9 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: opacity 0.3s ease !important;
        border-top: 1px solid #f5f5f5 !important;
        list-style: none;
    }
    .menu-toggle {
        display: none !important;
    }

    .site-sidebar-container {
        /* height: 0 !important;
        opacity: 0 !important; */
        overflow: hidden !important;
        transform: translateY(-10px) !important;
        transition: height 0s, opacity 0.3s ease, transform 0.3s ease !important;
        box-shadow: 0 4px 20px rgba(255,107,53,0.1) !important;
    }

    .site-sidebar-container.menu-open {
        height: auto !important;
        opacity: 1 !important;
        overflow-y: auto !important;
        transform: translateY(0) !important;
        transition: height 0s, opacity 0.3s ease, transform 0.3s ease !important;
        max-height: 80vh !important;
    }

    .sidebar,
    site-sidebar {
        border-bottom: none !important;
        padding-bottom: 1rem !important;
    }

    /* Améliorer le scroll sur mobile */
    .site-sidebar-container.menu-open {
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    .site-sidebar-container.menu-open::-webkit-scrollbar {
        width: 4px !important;
    }

    .site-sidebar-container.menu-open::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .site-sidebar-container.menu-open::-webkit-scrollbar-thumb {
        background: #ff8a50 !important;
        border-radius: 4px !important;
    }
}

/* Tablette et Desktop */
@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }

    .site-sidebar-container {
        height: auto !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
        box-shadow: 0 2px 12px rgba(255,107,53,0.08) !important;
    }

    .site-sidebar-container.menu-open {
        height: auto !important;
    }
}

/* ===============================================
   AMÉLIORATIONS UX
   =============================================== */

/* Animation de focus pour l'accessibilité */
@media (prefers-reduced-motion: no-preference) {
    .site-sidebar a,
    .accordion-toggle,
    .menu-toggle {
        transition: all 0.2s ease !important;
    }

    .sub-menu {
        transition: opacity 0.3s ease !important;
    }
}

/* Mode sans mouvement pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .site-sidebar a,
    .accordion-toggle,
    .menu-toggle,
    .sub-menu,
    .accordion-icon,
    .menu-toggle-icon .bar {
        transition: none !important;
    }
}

/* Focus visible amélioré */
.menu-toggle:focus-visible,
.accordion-toggle:focus-visible,
.site-sidebar a:focus-visible {
    outline: 3px solid #ff6b35 !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}