body {
    margin: 0;
    padding: 0;
}
h1, h2 {
  color: #004AAD;
}
.talean_logo {
    height: 70px; /* Exemple : Définissez la hauteur désirée de la barre */
    width: auto;
    /* Optionnel : Assure qu'elle se comporte bien comme un bloc */
    display: block;
}
.navbar-brand {
    /* Annule le padding par défaut de Bootstrap */
    padding: 0 !important;
    /* S'assurer que le parent peut contenir le logo de 100% de haut */
    height: 100%;
}
.navbar {
    /* Annule le padding vertical de la navbar. */
    padding: 0 !important;
    background-image: linear-gradient( 90.2deg,  rgba(1,47,95,1) -0.4%, rgba(56,141,217,1) 106.1% );
}
.navbar-nav .nav-link {
    /* Ajustez la taille de la police ou les marges verticales si les liens sont trop gros */
    font-size: 0.90em;
    /* Pour un meilleur alignement vertical au centre */
    line-height: 40px; /* Doit correspondre à la hauteur de votre logo (ici 40px) */
    padding-top: 0;
    padding-bottom: 0;
    color: #ffffff !important; /* Jaune d'or (Gold) */
}
.navbar-nav .nav-link:hover {
  color: #004AAD !important;
  background-color: #ffffff;
  border-radius: 8px; /* ARRONDI : Coins de l'en-tête */
}
.nav-link {
  cursor: pointer;
}
.container-fluid {
    /* Supprime le padding horizontal qui cause la marge à gauche et à droite */
    padding: 0 !important;
}
.dropdown-item {
  color: #004AAD !important;
  cursor: pointer;
}
.dropdown-item:hover {
  color: #ffffff !important;
  background-color: #004AAD !important;
}
.user_div_wrapper {
    padding-right: 20px;
}
.user_div {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #ffffff !important;
  cursor: pointer;
}
.user_icon {
  height: 2em;

}
.user_info {
    text-align: center;
}
@media (max-width: 991px) {
    /* Le conteneur collapse de Bootstrap */
    .navbar-collapse {
        background-color: #3EB896; /* Même couleur que ta navbar */
        padding: 10px;
        border-radius: 0 0 8px 8px;
    }

    /* Les items de navigation en grille */
    .navbar-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        gap: 8px;
        width: 100%;
    }

    /* Chaque lien de navigation */
    .nav-link {
        padding: 10px 8px !important;
        font-size: 13px !important;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Les items avec dropdown */
    .nav-item.dropdown .dropdown-toggle::after {
        margin-left: 3px;
    }

    /* Menu dropdown sur mobile */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 5px;
        background-color: rgba(255, 255, 255, 0.95);
    }
}

/* Pour écrans très petits (< 400px) - garde 2 colonnes mais plus compact */
@media (max-width: 400px) {
    .nav-link {
        font-size: 11px !important;
        padding: 8px 5px !important;
    }
}

/* Pour écrans moyens (tablettes) - 3 colonnes */
@media (min-width: 576px) and (max-width: 991px) {
    .navbar-nav {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    }
}
@media (max-width: 991px) {
    .navbar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .nav-item {
        flex: 1 1 calc(50% - 8px); /* Minimum 2 colonnes */
        min-width: 120px; /* Largeur minimale */
    }
}