/* Style pour le bouton */
.toggle-sidebar-btn {
    color: #2c338f; /* Couleur de l'icône */
    background-color: #ffffff; /* Couleur de fond bleu */
    border: 1px solid #ffffff; /* Contour blanc */
    border-radius: 4px; /* Légèrement plus arrondi */
    padding: 6px 12px; /* Espacement interne augmenté pour plus de confort */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Ombre légère pour le relief */
    cursor: pointer; /* Pointeur clic */
    transition: all 0.3s ease; /* Transition douce */
    font-size: 16px; /* Taille de l'icône */
    height: auto; /* Ajustement automatique de la hauteur */
    position: relative; /* Position relative pour le placement du message */
    display: flex; /* Flexbox pour l'alignement de l'icône */
    justify-content: center; /* Centrer l'icône dans le bouton */
    align-items: center; /* Centrer l'icône verticalement */
}

/* Ajout d'un effet au survol */
.toggle-sidebar-btn:hover {
    background-color: #dae0ee; /* Couleur  au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
    transform: scale(1.05); /* Léger agrandissement pour l’effet visuel */
}

/* Message d'information (bulle) */
.toggle-sidebar-btn::after {
    content: "Ouvrir/fermer le Menu"; /* Message du tooltip */
    position: absolute;
    top: 100%; /* Position sous le bouton */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Centrer parfaitement la bulle */
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre mais transparent pour la bulle */
    color: #ffffff; /* Couleur du texte (blanc) */
    font-size: 12px; /* Taille du texte réduite */
    padding: 4px 8px; /* Espacement autour du texte */
    border-radius: 6px; /* Coins arrondis pour la bulle */
    opacity: 0; /* Initialement masqué */
    visibility: hidden; /* Initialement masqué */
    white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition douce pour l'apparition */
    z-index: 999; /* Assure que la bulle est au-dessus du bouton */
    width: max-content; /* Largeur auto-ajustée en fonction du contenu */
}

/* Affichage du message au survol */
.toggle-sidebar-btn:hover::after {
    opacity: 1; /* Rendre le texte visible */
    visibility: visible; /* Le texte devient visible au survol */
}