/* ==========================================================================
   CHARTE DE NAVIGATION FINALE ET ULTRA-PRIORITAIRE (PC & MOBILE)
   Fichier de remplacement complet pour : css/menu.css
   ========================================================================== */

/* 1. CONTAINER GENERAL DE LA BARRE (BANDEAU ANTHRACITE) */
.navbar-tactical, 
.navbar-default.navbar-tactical,
div.navbar-tactical,
.barre-navigation-pc {
    background-color: #1f2224 !important; /* Teinte laiton/charbon mat du visuel */
    border: none !important;
    border-radius: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clear: both !important;
}

/* 2. ALIGNEMENT HORIZONTAL DES CATEGORIES (MODE PC) */
@media (min-width: 768px) {
    .navbar-tactical .collapse,
    .navbar-tactical .navbar-collapse,
    .navbar-tactical .navbar-collapse.collapse,
    .barre-navigation-pc .liste-onglets-pc {
        display: flex !important;
        display: -webkit-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-tactical ul.navbar-nav > li,
    .navbar-tactical .navbar-nav > li,
    .barre-navigation-pc ul li {
        float: none !important;
        display: inline-block !important;
        position: relative !important;
    }

    /* 3. TYPOGRAPHIE RESTYLISÉE ET SEPARATEURS VERTICAUX "|" */
    .navbar-tactical ul.navbar-nav > li > a,
    .navbar-tactical .navbar-nav > li > a,
    .barre-navigation-pc ul li a {
        color: #a3a3a3 !important; /* Gris fin de la maquette */
        font-family: 'Arial', sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        padding: 14px 18px !important;
        background: transparent !important;
        border: none !important;
        display: block !important;
        line-height: 20px !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }

    /* Dessiner les fins séparateurs "|" du visuel */
    .navbar-tactical ul.navbar-nav > li:not(:last-child) > a::after,
    .navbar-tactical .navbar-nav > li:not(:last-child) > a::after,
    .barre-navigation-pc ul li:not(:last-child) > a::after {
        content: "|" !important;
        position: absolute !important;
        right: -2px !important;
        top: 14px !important;
        color: #34383c !important;
        font-weight: 300 !important;
    }

    /* Couleur Or Laiton au survol et onglet actif */
    .navbar-tactical ul.navbar-nav > li > a:hover,
    .navbar-tactical ul.navbar-nav > li.active > a,
    .barre-navigation-pc ul li a:hover,
    .barre-navigation-pc ul li a.active-or {
        color: #c5a059 !important;
        background-color: transparent !important;
    }
}

/* 4. COMPORTEMENT ET RENDER EN MODE SMARTPHONE (MOBILE) */
@media (max-width: 767px) {
    .navbar-tactical-mobile,
    .navbar-default.m-navbar-museum-mobile {
        background-color: #1f2224 !important;
        border: none !important;
    }
    .m-header-barre-noire {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 44px;
        padding: 0 15px !important;
    }
    .m-hamburger-btn {
        border: 1px solid rgba(197, 160, 89, 0.2) !important;
        padding: 6px 8px !important;
    }
    .m-hamburger-btn .icon-bar {
        background-color: #c5a059 !important;
    }
    .navbar-collapse.m-rideau-categories {
        background-color: #16191b !important;
        border-top: 1px solid #2d3135 !important;
    }
    .m-item-mobile a {
        color: #cbd5e1 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        padding: 12px 10px !important;
    }
    .m-item-mobile a:hover, .m-item-mobile.active a {
        color: #c5a059 !important;
    }
}