nav {
    height:100%;
    color: var(--nav-text-color);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
}
nav a, .menu__user a, #toggle_conteneur {
    color: var(--muted);
}

.menu {
    display: flex;
    flex-direction: column;
    flex:1;
    width: 150px;
}
.menu--reduit {
    width:80px;
}
.menu__item, .menu__user {
    gap:1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu__user ul {
    list-style: none;
    margin:0;
    padding:0;
}
.menu__user ul li.deroulant {
    position: relative;
    width:150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu__user ul .sous {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    border: 1px solid gray;
    border-left:none;
    width: max-content;
    background-color: var(--bg-color);
    border-radius: 0 5px 5px 0;
    bottom:-14px;
    left:150px;
    padding: 10px;
    z-index: 9000;
    height: auto;
    /* Délai de 250 ms à la fermeture pour que le curseur ait le temps d'atteindre le menu */
    transition: opacity 0.12s ease 0.25s, visibility 0.12s ease 0.25s;
}
.menu__user li.deroulant:hover .sous,
.menu__user li.deroulant.open .sous {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}
.menu__user .sous a {
    display:flex;
    align-items: center;
    gap:10px;
    padding: 10px 5px;
}
.menu__user a.initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--nav-user-color);
    color: var(--text-color-primary);
    font-weight: 700;
    text-transform: uppercase;
}
.menu__user li.deroulant:hover a.initiales {
    background-color: rgba(41, 87, 255, 0.2);
}

.menu__item a, .menu__user a {
    display: flex;
    align-items: center;
    text-align: center;
    position:relative;
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
}
.menu__item a {
    flex-direction: column;
}
.menu__item a.active, .menu__item a:hover, .menu__user .sous a:hover  {
    background-color: rgba(41, 87, 255, 0.2);
    color: var(--main-color);
}

.menu__item a.active:hover {
    color: var(--text-color-menu-active);
}
.menu .material-symbols-outlined{
    font-size: clamp(var(--small-icon), 1.5vh + 1rem, var(--big-icon));
}

.menu .texte_menu {
    font-size: clamp(12px, 1vw, 14px);
}
.menu__user a {
    padding:10px;
}
.menu__user {
    font-size: 0.9em;
}
.menu__user .non-connecte a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.menu--reduit .texte_menu {
    display: none;
}
.menu__user.menu--reduit li.deroulant {
    width:80px;
}
.menu__user.menu--reduit ul .sous {
    left: 80px;
}

#toggle_conteneur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: 80px;
    margin: 10px;
}
#toggle_menu, #open_menu, #closeMenu {
    cursor: pointer;
}
#open_menu, #closeMenu, #toggle_menu.hide {
    display:none;
}
.reduce-menu {
    /* on retourne à 180° */
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}
.reduce-menu:hover {
    transform: translateX(-5px) rotate(180deg);
}
.extend-menu {
    transition: transform 0.3s ease-in-out;
}
.extend-menu:hover {
    transform: translateX(5px);
}

/* Sur les appareils sans hover (tactile) : ouverture au clic via classe .open */
@media (hover: none) {
    .menu__user li.deroulant:hover .sous {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    .menu__user li.deroulant:hover a.initiales {
        background-color: unset;
    }
    .menu__user li.deroulant.open .sous {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .menu__user li.deroulant.open a.initiales {
        background-color: rgba(41, 87, 255, 0.2);
    }
}