@media (max-width: 575.98px) {
    .nav-pills--nego,
    .nav-pills--disponible,
    .nav-pills--besoin,
    .nav-pills--annu {
        display: flex;
        flex-direction: column;
    }
 
    .nav-pills--nego .nav-item:nth-of-type(2),
    .nav-pills--disponible .nav-item:nth-of-type(2),
    .nav-pills--besoin .nav-item:nth-of-type(2),
    .nav-pills--annu .nav-item:nth-of-type(2) {
        margin: 0 0 .5rem 0!important;
    }
}

.nav-pills--disponible .nav-link:nth-of-type(2),
.nav-pills--nego .nav-link:nth-of-type(2),
.nav-pills--besoin .nav-link:nth-of-type(2),
.nav-pills--annu .nav-link:nth-of-type(2) {
    margin: 0 15px;
}

.nav-pills--disponible .nav-link,
.nav-pills--besoin .nav-link,
.nav-pills--nego .nav-link,
.nav-pills--annu .nav-link  {
    border-radius: 30px;
    /* padding: 5px 20px; */
    padding: 0 20px;
    font-size: calc(var(--basePX) + 4px);
    /* font-family: 'Poppins', sans-serif; */
    font-family: "Roboto", sans-serif;
    font-weight: 400 !important; /* Roboto regular */
}

.nav-pills--disponible .nav-link {
    border: 1px solid var(--main-color_disponible);
    color: var(--main-color_disponible);
}

.nav-pills--besoin .nav-link {
    border: 1px solid var(--main-color_besoin);
    color: var(--main-color_besoin);
}

.nav-pills--nego .nav-link {
    border: 1px solid var(--main-color_negociee);
    color: var(--main-color_negociee);
}

.nav-pills--annu .nav-link {
    border: 1px solid var( --main-color_annuaire);
    color: var( --main-color_annuaire);
}

.nav-pills--disponible .nav-link:hover, 
.nav-pills--disponible .nav-link.active {
    border: 1px solid var(--main-color_disponible)!important;
    color: var(--white)!important;
    background: var(--main-color_disponible)!important;
}

.nav-pills--nego .nav-link:hover,
.nav-pills--nego .nav-link.active {
    border: 1px solid var(--main-color_negociee)!important;
    color: var(--white)!important;
    background: var(--main-color_negociee)!important;
}

.nav-pills--annu .nav-link:hover, 
.nav-pills--annu .nav-link.active {
    border: 1px solid var( --main-color_annuaire)!important;
    color: var(--white)!important;
    background: var( --main-color_annuaire)!important;
}

.nav-pills--besoin .nav-link:hover, 
.nav-pills--besoin .nav-link.active {
    border: 1px solid var(--main-color_besoin)!important;
    color: var(--white)!important;
    background: var(--main-color_besoin)!important;
}

.nav-pills--inscription .nav-link:hover, 
.nav-pills--inscription .nav-link.active,
.nav-pills--esn .nav-link.active {
    border: 1px solid var(--main-color_esn-forfait)!important;
    color: var(--white)!important;
    background: var(--main-color_esn-forfait)!important;
}