/* ==========================================================
   SousToit — Navigation V5
   Header blanc + menu moderne + logo responsive
   ========================================================== */

:root {
    --nav-text: #0b2c52;
    --nav-text-muted: #667085;
    --nav-border: #dce3ea;
    --nav-hover: #f4f7fa;
    --nav-active-bg: #0b2c52;
    --nav-active-text: #ffffff;
    --nav-orange: #ff6b00;
}

/* Header principal */

    .topbar
 {
    box-sizing: border-box;
    width: 100%;
    min-height: 86px;
    padding: 10px clamp(16px, 3vw, 42px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2.5vw, 34px);

    background: #ffffff !important;
    color: var(--nav-text) !important;
    border-bottom: 1px solid #e7ebf0;
    box-shadow: 0 3px 16px rgba(11, 44, 82, .07);

    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Marque SousToit */
.topbar .brand,
.topbar .brand:visited {
    color: var(--nav-text) !important;
    text-decoration: none;
}

.topbar .brand.brand-soustoit {
    display: flex;
    align-items: center;
    gap: clamp(7px, 1vw, 12px);
    flex: 0 1 clamp(150px, 18vw, 255px);
    min-width: 125px;
    max-width: 255px;
    padding: 0;
    margin: 0;
}

.topbar .brand.brand-soustoit .soustoit-logo {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: clamp(48px, 6vw, 68px) !important;
    object-fit: contain;
    object-position: left center;
}

.topbar .brand.brand-soustoit .soustoit-space-label {
    flex: 0 0 auto;
    color: var(--nav-text-muted) !important;
    font-size: clamp(.68rem, .8vw, .78rem);
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

/* Navigation */
.topbar nav,
.admin-topbar nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.topbar nav > a,
.topbar nav > a:visited,
.topbar .nav-inline-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: var(--nav-text) !important;
    background: transparent !important;

    text-decoration: none;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.topbar nav > a:hover,
.topbar nav > a:focus-visible,
.topbar .nav-inline-form button:hover,
.topbar .nav-inline-form button:focus-visible {
    color: var(--nav-text) !important;
    background: var(--nav-hover) !important;
    border-color: var(--nav-border);
    outline: none;
    transform: translateY(-1px);
}

/* Page active */
.topbar nav > a.active,
.topbar nav > a.active:visited {
    color: var(--nav-active-text) !important;
    background: var(--nav-active-bg) !important;
    border-color: var(--nav-active-bg) !important;
    box-shadow: 0 3px 9px rgba(11, 44, 82, .15);
}

/* Passage vers l'autre espace */
.topbar nav > a.nav-switch {
    color: var(--nav-text) !important;
    /*border-color: #b7c5d3 !important;*/
    background: #ffffff !important;
}

.topbar nav > a.nav-switch:hover,
.topbar nav > a.nav-switch:focus-visible {
    color: #ffffff !important;
    border-color: var(--nav-active-bg) !important;
    background: var(--nav-active-bg) !important;
}

/* Utilisateur connecté */
.topbar .nav-user {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 10px;

    border: 1px solid var(--nav-border);
    border-radius: 999px;

    color: var(--nav-text-muted) !important;
    background: #ffffff !important;

    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.topbar .nav-inline-form {
    display: inline-flex;
    margin: 0;
}

.topbar .nav-inline-form button {
    cursor: pointer;
}

/* Tablette : le menu passe proprement sous la marque */
@media (max-width: 980px) {
    
    .topbar
 {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        padding: 9px 16px 11px;
    }

    .topbar .brand.brand-soustoit {
        flex-basis: clamp(145px, 28vw, 210px);
        max-width: 210px;
    }

    .topbar nav,
    .admin-topbar nav {
        flex: 1 0 100%;
        justify-content: flex-start;
    }

    .topbar .brand.brand-soustoit .soustoit-space-label {
        display: none;
    }
}

/* Mobile : boutons sur deux colonnes */
@media (max-width: 620px) {
    
    .topbar
 {
        position: static;
        padding: 8px 12px 10px;
    }

    .topbar .brand.brand-soustoit {
        flex-basis: clamp(125px, 42vw, 165px);
        max-width: 165px;
    }

    .topbar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .topbar nav > a,
    .topbar .nav-inline-form,
    .topbar .nav-inline-form button {
        width: 100%;
        box-sizing: border-box;
    }

    .topbar nav > a,
    .topbar .nav-inline-form button {
        min-height: 38px;
        padding: 7px 8px;
        font-size: .84rem;
        white-space: normal;
        text-align: center;
    }

    .topbar .nav-user {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


/* ==========================================================
   CORRECTION LOGO SousToit — v5.1
   Cette section est volontairement placée EN FIN DE FICHIER
   afin d'écraser d'éventuelles anciennes règles sur .brand img.
   ========================================================== */

.topbar a.brand,
.buyer-topbar a.brand {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

.topbar a.brand img,
.buyer-topbar a.brand img,
.topbar img.soustoit-logo,
.buyer-topbar img.soustoit-logo {
    display: block !important;

    /* Taille fluide : petit écran -> petit logo, grand écran -> plus grand */
    width: clamp(125px, 14vw, 195px) !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 70px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

@media (max-width: 900px) {
    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(120px, 24vw, 165px) !important;
        max-height: 58px !important;
    }
}

@media (max-width: 620px) {
    .topbar a.brand,
    .buyer-topbar a.brand {
        max-width: none !important;
    }

    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(165px, 46vw, 205px) !important;
        max-height: 76px !important;
    }
}


/* ==========================================================
   SousToit — ajustements mobile v5.3
   Logo plus présent + header plus compact
   ========================================================== */

@media (max-width: 620px) {
    
    .topbar
 {
        padding: 10px 12px 12px !important;
        gap: 10px !important;
    }

    /* Logo centré et plus grand */
    .topbar .brand.brand-soustoit,
    .buyer-topbar .brand.brand-soustoit {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        flex-basis: 100% !important;
    }

    .topbar a.brand img,
    .buyer-topbar a.brand img,
    .topbar img.soustoit-logo,
    .buyer-topbar img.soustoit-logo {
        width: clamp(190px, 58vw, 240px) !important;
        max-width: 240px !important;
        max-height: 92px !important;
        object-position: center center !important;
    }

    /* Menu plus compact */
    .topbar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px 8px !important;
    }

    .topbar nav > a,
    .topbar .nav-inline-form button {
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: .82rem !important;
        border-radius: 9px !important;
    }

    /* Réduit l'espace visuel du menu de langue */
    .language-menu {
        margin-left: auto !important;
    }

    .language-menu summary {
        padding: 5px 8px !important;
        min-height: 34px !important;
    }
}


/* ==========================================================
   SousToit — correction réelle du logo mobile v5.4
   Important : ces sélecteurs ont une spécificité supérieure
   aux anciennes règles .topbar .brand.brand-soustoit .soustoit-logo
   ========================================================== */

@media (max-width: 620px) {
    .topbar a.brand.brand-soustoit,
    .buyer-topbar a.brand.brand-soustoit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        margin: 0 !important;
        padding: 4px 0 6px !important;
        overflow: visible !important;
    }

    .topbar a.brand.brand-soustoit > img.soustoit-logo,
    .buyer-topbar a.brand.brand-soustoit > img.soustoit-logo {
        display: block !important;

        width: clamp(210px, 58vw, 245px) !important;
        max-width: 245px !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* ==========================================================
   SousToit — Navigation V6
   Menu acheteurs : accès compact + menu "Mon espace"
   ========================================================== */

.buyer-topbar-v6 {
    min-height: 78px;
    gap: 18px;
}

.buyer-topbar-v6 .buyer-main-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
}

.buyer-topbar-v6 .nav-item,
.buyer-topbar-v6 .nav-login,
.buyer-topbar-v6 .account-menu > summary {
    box-sizing: border-box;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--nav-text) !important;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.buyer-topbar-v6 .nav-item:hover,
.buyer-topbar-v6 .nav-login:hover,
.buyer-topbar-v6 .account-menu > summary:hover {
    background: var(--nav-hover);
    border-color: var(--nav-border);
    transform: translateY(-1px);
}

.buyer-topbar-v6 .nav-item.active,
.buyer-topbar-v6 .account-menu > summary.active {
    border: 0 !important;
    background: #ffffff !important;
    color: var(--nav-text) !important;
    box-shadow: none !important;
}

.buyer-topbar-v6 .nav-login {
    border-color: #c8d4df;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(11, 44, 82, .06);
}

.buyer-topbar-v6 .nav-login:hover {
    color: #ffffff !important;
    background: var(--nav-active-bg);
    border-color: var(--nav-active-bg);
}

.buyer-topbar-v6 .nav-switch {
    border-color: transparent !important;
    background: transparent !important;
}

.buyer-topbar-v6 .nav-icon,
.buyer-topbar-v6 .menu-icon,
.buyer-topbar-v6 .account-avatar svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* Menu compte */
.buyer-topbar-v6 .account-menu {
    position: relative;
    flex: 0 0 auto;
}

.buyer-topbar-v6 .account-menu > summary {
    list-style: none;
    cursor: pointer;
    padding-right: 11px;
    user-select: none;
}

.buyer-topbar-v6 .account-menu > summary::-webkit-details-marker {
    display: none;
}

.buyer-topbar-v6 .account-menu > summary::after {
    content: "▾";
    margin-left: 2px;
    font-size: .72rem;
    opacity: .65;
}

.buyer-topbar-v6 .account-menu[open] > summary::after {
    content: "▴";
}

.buyer-topbar-v6 .account-avatar {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--nav-active-bg);
}

.buyer-topbar-v6 .account-avatar svg {
    width: 17px;
    height: 17px;
}

.buyer-topbar-v6 .account-menu > summary.active .account-avatar {
    color: var(--nav-active-bg);
    background: #ffffff;
}

.buyer-topbar-v6 .account-summary-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.buyer-topbar-v6 .account-summary-title {
    font-weight: 800;
}

.buyer-topbar-v6 .account-summary-text small {
    max-width: 130px;
    overflow: hidden;
    color: var(--nav-text-muted);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buyer-topbar-v6 .account-menu > summary.active .account-summary-text small {
    color: rgba(255,255,255,.75);
}

.buyer-topbar-v6 .account-menu-list,
.buyer-topbar-v6 .language-menu-list {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 1200;
    min-width: 225px;
    padding: 7px;
    border: 1px solid #e1e7ed;
    border-radius: 14px;
    background: #ffffff;
    color: var(--nav-text);
    box-shadow: 0 16px 40px rgba(11, 44, 82, .16);
}

.buyer-topbar-v6 .account-menu-list::before,
.buyer-topbar-v6 .language-menu-list::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 18px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #e1e7ed;
    border-left: 1px solid #e1e7ed;
    background: #ffffff;
    transform: rotate(45deg);
}

.buyer-topbar-v6 .account-menu-list a,
.buyer-topbar-v6 .account-logout {
    box-sizing: border-box;
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--nav-text) !important;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    cursor: pointer;
}

.buyer-topbar-v6 .account-menu-list a:hover,
.buyer-topbar-v6 .account-menu-list a.is-active,
.buyer-topbar-v6 .account-logout:hover {
    background: var(--nav-hover);
}

.buyer-topbar-v6 .account-menu-list a.is-active {
    font-weight: 800;
}

.buyer-topbar-v6 .account-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: #e7ebf0;
}

.buyer-topbar-v6 .account-menu-list form {
    margin: 0;
}

.buyer-topbar-v6 .account-logout {
    color: #b42318 !important;
}

/* Langue */
.buyer-topbar-v6 .language-menu {
    position: relative;
    margin-left: 0;
    flex: 0 0 auto;
}

.buyer-topbar-v6 .language-menu summary {
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid #d8e0e8;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: #ffffff;
    color: var(--nav-text);
    cursor: pointer;
    list-style: none;
    font-size: .82rem;
    font-weight: 700;
}

.buyer-topbar-v6 .language-menu summary::-webkit-details-marker {
    display: none;
}

.buyer-topbar-v6 .language-menu summary::after {
    content: "▾";
    margin-left: 2px;
    font-size: .7rem;
    opacity: .65;
}

.buyer-topbar-v6 .language-menu[open] summary::after {
    content: "▴";
}

.buyer-topbar-v6 .language-menu-list {
    min-width: 165px;
}

.buyer-topbar-v6 .language-menu-list a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #111827 !important;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}

.buyer-topbar-v6 .language-menu-list a:hover,
.buyer-topbar-v6 .language-menu-list a.is-active {
    background: var(--nav-hover);
}

.language-menu-flag {
    width: 22px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}

/* Tablette */
@media (max-width: 980px) {
    .buyer-topbar-v6 {
        flex-wrap: wrap;
    }

    .buyer-topbar-v6 .brand.brand-soustoit {
        margin-right: auto;
    }

    .buyer-topbar-v6 .buyer-main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .buyer-topbar-v6 .language-menu {
        margin-left: auto;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .buyer-topbar-v6 {
        position: sticky !important;
        top: 0;
        padding: 8px 12px 9px !important;
        gap: 7px 10px !important;
    }

    .buyer-topbar-v6 .brand.brand-soustoit {
        width: auto !important;
        max-width: calc(100% - 62px) !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    .buyer-topbar-v6 a.brand.brand-soustoit > img.soustoit-logo {
        width: clamp(145px, 45vw, 190px) !important;
        max-width: 190px !important;
        max-height: 58px !important;
        margin: 0 !important;
        object-position: left center !important;
    }

    .buyer-topbar-v6 .buyer-main-nav {
        display: flex !important;
        order: 3;
        width: 100%;
        flex-basis: 100%;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 1px;
        scrollbar-width: none;
    }

    .buyer-topbar-v6 .buyer-main-nav::-webkit-scrollbar {
        display: none;
    }

    .buyer-topbar-v6 .nav-item,
    .buyer-topbar-v6 .nav-login,
    .buyer-topbar-v6 .account-menu > summary {
        min-height: 38px;
        padding: 6px 9px;
        border-radius: 9px;
        font-size: .8rem;
    }

    .buyer-topbar-v6 .nav-switch span {
        display: none;
    }

    .buyer-topbar-v6 .nav-switch {
        width: 38px;
        flex: 0 0 38px;
        padding: 6px !important;
    }

    .buyer-topbar-v6 .account-summary-text small {
        display: none;
    }

    .buyer-topbar-v6 .account-avatar {
        width: 27px;
        height: 27px;
    }

    .buyer-topbar-v6 .account-menu-list {
        position: fixed;
        top: auto;
        right: 12px;
        left: 12px;
        min-width: 0;
        margin-top: 7px;
    }

    .buyer-topbar-v6 .account-menu-list::before {
        display: none;
    }

    .buyer-topbar-v6 .language-menu summary .language-name {
        display: none;
    }

    .buyer-topbar-v6 .language-menu summary {
        min-width: 42px;
        padding: 6px 8px;
    }

    .buyer-topbar-v6 .language-menu-list {
        right: 0;
    }
}


/* ==========================================================
   SousToit — Navigation V6.2
   Uniformisation finale du menu acheteurs
   ========================================================== */

/* Tous les boutons du menu principal ont exactement le même aspect. */
.buyer-topbar-v6 .buyer-main-nav > a.nav-item,
.buyer-topbar-v6 .buyer-main-nav > a.nav-item:visited,
.buyer-topbar-v6 .buyer-main-nav > a.nav-item.active,
.buyer-topbar-v6 .buyer-main-nav > a.nav-item.active:visited,
.buyer-topbar-v6 .buyer-main-nav > a.nav-switch,
.buyer-topbar-v6 .buyer-main-nav > a.nav-switch:visited,
.buyer-topbar-v6 .buyer-main-nav > a.nav-login,
.buyer-topbar-v6 .buyer-main-nav > a.nav-login:visited,
.buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary,
.buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary.active {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 8px 12px;

    border: 0 !important;
    border-radius: 10px;
    background: #ffffff !important;
    color: var(--nav-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Même hover discret pour tous. */
.buyer-topbar-v6 .buyer-main-nav > a.nav-item:hover,
.buyer-topbar-v6 .buyer-main-nav > a.nav-item:focus-visible,
.buyer-topbar-v6 .buyer-main-nav > a.nav-switch:hover,
.buyer-topbar-v6 .buyer-main-nav > a.nav-switch:focus-visible,
.buyer-topbar-v6 .buyer-main-nav > a.nav-login:hover,
.buyer-topbar-v6 .buyer-main-nav > a.nav-login:focus-visible,
.buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary:hover,
.buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary:focus-visible {
    border: 0 !important;
    background: var(--nav-hover) !important;
    color: var(--nav-text) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none;
}

/* L'icône de Mon espace suit le même style navy sur blanc. */
.buyer-topbar-v6 .account-avatar,
.buyer-topbar-v6 .account-menu > summary.active .account-avatar {
    width: 28px;
    height: 28px;
    background: transparent !important;
    color: var(--nav-text) !important;
}

/* Aucun indicateur graphique spécial pour l'élément actif. */
.buyer-topbar-v6 .nav-item.active::after,
.buyer-topbar-v6 .account-menu > summary.active::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 620px) {
    .buyer-topbar-v6 .buyer-main-nav > a.nav-item,
    .buyer-topbar-v6 .buyer-main-nav > a.nav-item.active,
    .buyer-topbar-v6 .buyer-main-nav > a.nav-switch,
    .buyer-topbar-v6 .buyer-main-nav > a.nav-login,
    .buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary,
    .buyer-topbar-v6 .buyer-main-nav > details.account-menu > summary.active {
        height: 38px;
        min-height: 38px;
        padding: 6px 9px;
    }
}


/* ==========================================================
   SousToit — Header unifié
   Acheteur / Professionnel / Administration
   ========================================================== */

.topbar,
.admin-space .topbar,
.admin-topbar {
    background: #ffffff !important;
    color: var(--nav-text) !important;
}

.admin-space .topbar .brand,
.admin-space .topbar .brand:visited,
.admin-space .topbar nav a,
.admin-space .topbar nav a:visited,
.admin-space .topbar nav button,
.admin-space .topbar .nav-user {
    color: var(--nav-text) !important;
}

.admin-space .topbar nav > a:hover,
.admin-space .topbar nav > a:focus-visible,
.admin-space .topbar .nav-inline-form button:hover,
.admin-space .topbar .nav-inline-form button:focus-visible {
    color: var(--nav-text) !important;
    background: var(--nav-hover) !important;
    border-color: var(--nav-border) !important;
}

.admin-space .topbar nav > a.active,
.admin-space .topbar nav > a.active:visited {
    color: var(--nav-text) !important;
    background: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.admin-space .topbar .soustoit-space-label {
    color: var(--nav-text-muted) !important;
}