body.dark-mode {
    background-color: #121212!important; /* Couleur de fond sombre */
    color: #ffffff!important;          /* Couleur de texte clair */
}

.dark-mode .navbar {
    background-color: #1f1f1f!important;
    color: #ffffff!important;
}

.dark-mode .header {
    background: linear-gradient(to bottom, #1e1e1e, #121212);
}
.dark-mode .btn-primary {
    background-color: #375a7f!important;
    border-color: #375a7f!important;
}
.dark-mode .text-dark {
        color: #ffffff!important;          /* Couleur de texte clair */
}
.dark-mode .card,
.dark-mode .card .card-header,
.dark-mode .card .card-footer,
.dark-mode .modal .modal-content

{
    background-color: #1e1e1e!important;
    color: rgba(255,555,255,.75)!important;
      border: 1px solid #333333!important;
}
.dark-mode .modal .border,
.dark-mode .modal .border-bottom,
.dark-mode .modal .border-top,
.dark-mode .modal .modal-header,
.dark-mode .modal .modal-footer
{
   
    border-color:#444!important;
}

body.dark-mode #navbarBottom {
    background-color: #555!important; /* Fond assombri */
}

body.dark-mode .bg-white {
    background-color: #555!important; /* Fond assombri */
}

body.dark-mode .btn-light {
    background-color: #444444; /* Fond assombri */
    color: #f1f1f1; /* Texte clair mais pas trop vif */
    border: 1px solid #555555; /* Bordure discrète mais visible */
}

body.dark-mode .btn-light:hover {
    background-color: #555555; /* Fond légèrement plus sombre au survol */
    color: #ffffff; /* Texte plus lumineux au survol */
    border-color: #666666; /* Bordure plus claire au survol */
}

body.dark-mode .btn-light:focus, 
body.dark-mode .btn-light:active {
    background-color: #666666; /* Fond encore plus sombre pour l'état actif */
    color: #ffffff; /* Texte lumineux */
    border-color: #777777; /* Bordure plus claire pour l'état actif */
}

body.dark-mode .navbar-light {
    background-color: #333333; /* Fond sombre pour la navbar */
    color: #f1f1f1; /* Texte clair */
}

body.dark-mode .navbar-light .navbar-brand,
body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: #f1f1f1; /* Couleur du texte claire pour les liens */
}

body.dark-mode .navbar-light .navbar-nav .nav-link:hover,
body.dark-mode .navbar-light .navbar-nav .nav-link:focus {
    color: #007bff; /* Couleur du texte au survol */
}

body.dark-mode .navbar-light .navbar-toggler-icon {
    background-color: #f1f1f1; /* Icône du bouton du menu hamburger */
}

/* Si vous utilisez un mode sombre sur le fond du navbar mais pas sur le texte */
body.dark-mode .navbar-light .navbar-toggler {
    border-color: #555555; /* Bordure de la navbar-toggler en mode sombre */
}



.dark-mode .form-control {
    background-color: #333333!important;
    color: #ffffff!important;
    border-color: #555555!important;
}

.dark-mode .text-muted {
    color: #CCC!important; /* Suffisamment contrasté mais discret */
}


.dark-mode .bg-light {
    background-color: #2c2c2c !important; /* Couleur de fond pour le mode sombre */
    color: #ffffff !important;           /* Couleur de texte claire */
}



.dark-mode .list-group {
    background-color: #1e1e1e!important; /* Arrière-plan de la liste */
    color: #f1f1f1!important;            /* Couleur du texte */
}

.dark-mode .list-group-item {
    background-color: #333333!important; /* Fond de chaque élément de la liste */
    color: #f1f1f1!important;            /* Texte clair */
    border: none;              /* Pas de bordure pour éviter des effets d'ombres ou de contours */
}

.dark-mode .list-group-item:hover {
    background-color: #444444; /* Changer le fond au survol */
}

.dark-mode #user-sidebar-menu .list-group-item:hover, 
.dark-mode #user-sidebar-menu .list-group-item:active,
.dark-mode #user-sidebar-menu .list-group-item.active,
.dark-mode .list-group-item.active {
    background-color: #444444!important; /* Couleur active de l'élément */
    color: #ffffff!important;
}



.dark-mode #navbarBottom .nav-item .nav-link {
    min-width: 64px;
    width: 100%;
    max-width: 100%;
    padding: .5rem !important;
    overflow: hidden;
    color: var(--light) !important;
}