/* ---- 1. LE CONTENEUR DU MENU (LE BANDEAU BLEU) ---- */
.mod-menu, 
.container-nav,
ul.nav.nav-pills.mod-list {
    background-color: #1b3a57 !important; /* Bleu de type administration */
    padding: 5px 15px !important;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

/* ---- 2. LES LIENS DU MENU EN BLANC ---- */
ul.nav-pills .nav-link,
.mod-menu .nav-link {
    color: #ffffff !important; /* Écritures blanches */
    background-color: transparent !important; /* Supprime le fond gris ou bleu Bootstrap */
    font-weight: 500;
    padding: 8px 16px !important;
    margin: 2px;
    transition: all 0.2s ease-in-out;
}

/* ---- 3. EFFET AU SURVOL (HOVER) ---- */
ul.nav-pills .nav-link:hover,
.mod-menu .nav-link:hover {
    color: #ffffff !important;
    background-color: #254f75 !important; /* Bleu légèrement plus clair au survol */
    border-radius: 4px;
}

/* ---- 4. ÉLÉMENT ACTIF (PAGE COURANTE) ---- */
ul.nav-pills .nav-link.active,
.mod-menu .nav-item.active .nav-link,
.mod-menu .nav-link.active {
    color: #ffffff !important;
    background-color: #2c5d8a !important; /* Bleu mis en valeur pour la page active */
    border-radius: 4px;
}

/* S'assurer que la zone du logo au-dessus reste propre et noire/sombre */
.header {
    background-color: #ffffff !important;
    background-image: none !important; /* Supprime le dégradé violet/bleu par défaut */
}