/*------------------------------*\
    #COMPOSANT PROGRESSBAR GENERAL
/*------------------------------*/
.progressbar {
    margin-bottom: 40px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    transition: all .5s;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    font-size: calc(var(--basePX) + 5px);
    width: 33%;
}
.progressbar li:before {
    position: absolute;
    top: 22px;
    left: 0;
    height: 2px;
    width: 100%;
    content: "";
}
.progressbar li:first-of-type:before {
    left: 50%;
    width: 50%;
}
.progressbar li:last-of-type:before {
    left: 0;
    width: 50%;
}
.progressbar li span {
    text-transform: uppercase;
    font-size: calc(var(--basePX) + 4px);
}
.progressbar li a {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
}
.progressbar li a:focus {
    outline: 0;
    box-shadow: none;
}
.progressbar li a:before {
    width: 46px;
    height: 46px;
    display: block;
    background-color: transparent;
    border-radius: 50%;
    content: "";
    margin: 0 auto 10px auto;
    transition: all .5s;
}
.progressbar li a.active {
    font-weight: bold;
}
.progressbar li a.active:before {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50%;
    content: "";
    margin: 0 auto 10px auto;
}
.progressbar li a:after {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translate(-50%, -4px);
    transition: all .75s;
}
.progressbar li a.active:after {
    width: 16px;
    height: 16px;
    top: 19px;
    transform: translate(-50%, -4px);
}
/*------------------------------*\
    #COMPOSANT PROGRESSBAR MOBILE PROPOSAL
/*------------------------------*/
@media (max-width: 767.98px) {
    .progressbar li span {
        font-size: var(--basePX);
    }
}


/*------------------------------*\
    #COMPOSANT PROGRESSBAR VARIANTS
/*------------------------------*/
/* --- inscription form --- */
.form-inscription__header .progressbar li:before{
    background: var(--main-color_esn-forfait);
}
.form-inscription__header .progressbar li a {
    color: var(--main-color_esn-forfait);
}

.form-inscription__header .progressbar li a:after {
    background-color: var(--main-color_esn-forfait);
}
.form-inscription__header .progressbar li a.active:after {
    background: var(--background-menu-users-account);
}
.form-inscription__header .progressbar li a.active:before {
    background-color: var(--main-color_esn-forfait);
}


/* --- mission form --- */
.form-mission__header .progressbar li:before {
    background: var(--main-color_mission);
}

.form-mission__header .progressbar li a:after {
    background: var(--main-color_mission);
}
.form-mission__header .progressbar li a.active:after {
    background: white;
}
.form-mission__header .progressbar li a.active:before {
    background-color: var(--main-color_mission);
}
.form-mission__header .progressbar li a.active:after {
    background: white;
}

/* --- profil form --- */
.form-profil__header .progressbar li:before {
    background: var(--main-color_profil);
}

.form-profil__header .progressbar li a:after {
    background: var(--main-color_profil);
}
.form-profil__header .progressbar li a.active:after {
    background: white;
}
.form-profil__header .progressbar li a.active:before {
    background-color: var(--main-color_profil);
}
.form-profil__header .progressbar li a.active:after {
    background: white;
}

/* --- demande formation form --- */
.form-AO__header .progressbar li:before {
    background: var(--main-color_ao);
}

.form-AO__header .progressbar li a:after {
    background: var(--main-color_ao);
}
.form-AO__header .progressbar li a.active:after {
    background: white;
}
.form-AO__header .progressbar li a.active:before {
    background-color: var(--main-color_ao);
}
.form-AO__header .progressbar li a.active:after {
    background: white;
}

/* --- demande formation form --- */
.form-formation__header .progressbar li:before {
    background: var(--main-color_formation);
}

.form-formation__header .progressbar li a:after {
    background: var(--main-color_formation);
}
.form-formation__header .progressbar li a.active:after {
    background: white;
}
.form-formation__header .progressbar li a.active:before {
    background-color: var(--main-color_formation);
}
.form-formation__header .progressbar li a.active:after {
    background: white;
}

/* --- clients finaux form --- */

.form-client-finaux__header {
    background: transparent linear-gradient(87deg, #7A0046 0%, #B0001B 100%) 0% 0% no-repeat padding-box;
    margin-bottom: 40px;
}

/* --- esn - miami form --- */
.form-esn__header .progressbar li:before {
    background: var(--main-color_esn-forfait);
}

.form-esn__header .progressbar li a:after {
    background: var(--main-color_esn-forfait);
}
.form-esn__header .progressbar li a.active:after {
    background: white;
}
.form-esn__header .progressbar li a.active:before {
    background-color: var(--main-color_esn-forfait);
}
.form-esn__header .progressbar li a.active:after {
    background: white;
}

/* --- demande formation form --- */
.form-freelance__header .progressbar li:before {
    background: var(--main-color_freelance);
}

.form-freelance__header .progressbar li a:after {
    background: var(--main-color_freelance);
}
.form-freelance__header .progressbar li a.active:after {
    background: white;
}
.form-freelance__header .progressbar li a.active:before {
    background-color: var(--main-color_freelance);
}
.form-freelance__header .progressbar li a.active:after {
    background: white;
}