/*------------------------------*\
    #MAINNAVHEADER
/*------------------------------*/
.mainnavheader {
    background: var(--light_gray); 
    padding-bottom: 1em;
}

.mainnavheader .container-fluid {
    padding-right: 0;
    padding-left: 0;
}



.mainnavheader.navbar {
    /* padding: 1.2rem 0 0; */
    /* padding: 1em 0 0; */
    padding: 0;
}

.mainnavheader .navbar-brand {
    display: flex;
    width: 261px;
    height: 65px;
    padding: 0;
} 

.mainnavheader .navbar-toggler {
    padding: 0;
    margin-left: 0.5em;
    margin-right: 0.5em;
    max-width: fit-content;
}

@media (max-width: 991px) {
    .navbar-expand-lg .navbar-toggler.profil_circle svg {
        width: 40px;
        height: auto;
        color: var(--main-color_demande);
    }
}

.mainnavheader .texte-welcome p {
    margin: 0;
    color: var(--main-color_paragraphe);
    text-align: center;
    font-family: "ClanOT-NarrowBook", sans-serif;
}

.mainnavheader .texte-welcome p:first-child {
    font-size: calc(2 * var(--basePX) + 5px);
}

.mainnavheader .texte-welcome p:last-child{
    font-size: 16px;
}

.mainnavheader .menu-principal {
    border-top: 1px solid #7070701a;
    border-bottom: 1px solid #7070701a;
}

.mainnavheader .menu-principal .nav-link {
    display: initial;
    padding: 0;
    font-family: 'FF Clan', sans-serif;
}

.mainnavheader .menu-principal .nav-link .picto-menu {
    display: block;
    height: 35px;}

.mainnavheader .menu-principal ul li {
    cursor: pointer;
    padding: 5px 10px 0px 10px;
    box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, 3%) !important;
    outline : 1px solid #7070701a;
    border-bottom: 9px solid #ffffff00;
    text-align: center;
    min-width: 215px;
}

.mainnavheader .menu-principal ul li:hover a {
    text-decoration: none;
    color: var(--white) !important;
}

.mainnavheader .menu-principal ul li.item-demande.active {
    border-bottom-color: var(--main-color_demande);
}

.mainnavheader .menu-principal ul li.item-demande:hover {
    border-bottom-color: var(--main-color_demande);
    background-color: var(--main-color_demande);
}

.mainnavheader .menu-principal ul li.item-negociee.active {
    border-bottom-color: var(--main-color_negociee);
}

.mainnavheader .menu-principal ul li.item-negociee:hover {
    border-bottom-color: var(--main-color_negociee);
    background-color: var(--main-color_negociee);
}

.mainnavheader .menu-principal ul li.item-annuaire.active {
    border-bottom-color: var(--main-color_annuaire);
}

.mainnavheader .menu-principal ul li.item-annuaire:hover {
    border-bottom-color: var(--main-color_annuaire);
    background-color: var(--main-color_annuaire);
}

.mainnavheader .menu-principal ul li.item-disponible.active {
    border-bottom-color: var(--main-color_disponible);
}

.mainnavheader .menu-principal ul li.item-disponible:hover {
    border-bottom-color: var(--main-color_disponible);
    background-color: var(--main-color_disponible);
}

.mainnavheader .menu-principal ul li.item-besoin.active {
    border-bottom-color: var(--main-color_besoin);
}

.mainnavheader .menu-principal ul li.item-besoin:hover {
    border-bottom-color: var(--main-color_besoin);
    background-color: var(--main-color_besoin);
}

#navbar-close span {
    line-height: 30px;
}

.mainnavheader__menu svg,
.mainnavheader .mainnavigation.mainnavigation--fluid svg {
    height: 20px;
    width: 20px;
}

.mainnavheader #miniSearchApp {
    width: 100%;
}

.mainnavheader md-autocomplete {
    background-color: transparent;
}

.mainnavheader md-autocomplete-wrap {
    border-radius: 30px;
    height: 54px;
    line-height: 54px;
    background-color: transparent;
}

.mainnavheader md-autocomplete-wrap input {
    background: url('/assets/img/svg/loupe_ao.svg') var(--white);
    background-repeat: no-repeat;
    background-position: 20px 50%;
    padding: 0 35px 0 80px;
    border: 1px solid var(--main-color_demande);
    border-radius: 30px;
    height: 54px;
    line-height: 54px;
    font-size: calc(var(--basePX) + 4px);
}
.mainnavheader md-autocomplete-wrap input::placeholder {
    font-size: 17px;
    color: var(--another-gray);
    font-family: Calibri, sans-serif;
}

#navbar-close span {
    line-height: 30px;
}

/* menu burger du header */
/* .dropdown-toggle::after, */
.btn-mobile-burger::after {
    display: flex;
    position: absolute;
    align-items: center;
    right: -15px;
    top: 15px;
    content: "";
    border: 0!important;
    height: 16px;
    width: 15px;
    background: linear-gradient(180deg, 
                var(--main-color_cession) 0, 
                var(--main-color_cession) 2px, 
                transparent 2.01px,
                transparent 4px,  
                var(--main-color_cession) 4.01px, 
                var(--main-color_cession) 6px,
                transparent 6.01px,  
                transparent 8px,
                var(--main-color_cession) 8.01px,  
                var(--main-color_cession) 10px,
                transparent 10.01px,
                transparent 12px,  
                var(--main-color_cession) 12.01px, 
                var(--main-color_cession) 14px,
                transparent 14.01px,
                transparent 16px
                );
}

.timer--connect {
    font-size: calc(var(--basePX) + 1px);
    line-height: 13px;
    font-family: "Roboto", sans-serif;
    font-weight: 400; /* Roboto regular */ 
}

.timer--connect:hover svg {
    animation: rotate linear 2.5s infinite;
}

#new-messages,
.new-messages {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    bottom: -4px;
    right: -8px;
    position: absolute;
    background: var(--secondary-color_ao);
    
    box-shadow: 0 0 0 0 rgba(var(--secondary-color_ao_rgb), 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

.maincontent__messagerie #new-messages /*,
.maincontent__messagerie .new-messages */ {
    bottom: -10px;
    right: -10px;
}

/*------------------------------*\
    #MAINNAVHEADER dropdown
/*------------------------------*/

.mainnavheader__dropdown {
    /*padding-top: 20px;*/
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--basePX) + 4px);
    transition: all .5s;
}

.mainnavheader__dropdown .header--dropdown {
    padding: .25rem 1.5rem;
    font-size: calc(2 * var(--basePX));
    font-weight: bold;
}
.mainnavheader__dropdown .header--dropdown span {
    margin: 0 10px;
}

.mainnavheader__dropdown .dropdown-item svg,
.header--dropdown svg {
    width: 16px;
    height: 16px;
    margin-left: 10px;
}

.mainnavheader__dropdown .dropdown-item span {
    margin-right: 10px;
}
.mainnavheader__dropdown .header--dropdown hr,
.mainnavheader__dropdown .dropdown-item hr {
    color: var(--another-gray);
    margin: 10px 0;
}
.mainnavheader__dropdown .dropdown-item:hover svg {
    color: currentColor;
}

@media (min-width: 991.01px) {
    .btn.btn--besoin.btn--border-0,
    .btn.btn--disponible.btn--border-0 {
        display: flex;
        align-items: center;
        /* width: 220px; */
        margin-right: -15px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    /* meme boutons mais en bas de page */
    .btn.btn.btn--besoin.btn--border-0.btn--skew-0,
    .btn.btn--disponible.btn--border-0.btn--skew-0 {
        display: inline-block;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        text-align: center;
        margin-right: 0
    }
    .btn.btn--besoin.btn--border-0 svg,
    .btn.btn--disponible.btn--border-0 svg {
        margin-right: .5rem;
    }
}

/* ************** */
/* MediaµQueries */


@media (min-width: 991.01px) {
    .mainnavheader .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 991px) {
    .mainnavheader .navbar-brand svg {
        width: 100% !important;
    }

    .mainnavheader .navbar-brand {
        /* max-width: 180px; */
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .main {
        background-position-y: 230px;
        /* padding-top: 220px; */
      }
}