header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Barre latérale */
aside {
    position: fixed;
    top: 100px;
    left: 0;
    bottom: 0;
    width: 64px;
    overflow-y: auto;
    max-height: calc(100vh - 100px);
    transition: width 0.3s ease, transform 0.3s ease; /* Ajouter une transition pour l'animation */
}

/* Par défaut, la barre latérale est visible */
aside.hidden {
    display: none;
}

/* Afficher la barre latérale lorsque le menu est ouvert */
aside.show {
    display: block;
    transform: translateX(0);
}

/* Styles pour le bouton du menu sur mobile */
.menu-button {
    display: none;
}

/* Afficher le bouton du menu et cacher la barre latérale sur mobile */
@media (max-width: 768px) {
    .menu-button {
        display: block;
    }
    aside {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        background-color: white;
        z-index: 1000;
        transform: translateX(-100%);
    }
    aside.show {
        transform: translateX(0);
    }
}