/*------------------------------*\
    #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) + 3px);
}
.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_acquisition);
}
.form-inscription__header .progressbar li a {
    color: var(--main-color_acquisition)!important;
}

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

/* --- cession form --- */
.form-cession__header .progressbar li:before {
    background: var(--main-color_cession);
}

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

.form-cession__header  a {
    color: var(--main-color_cession);
}

/* --- acquisition form --- */
.form-acquisition__header .progressbar li:before {
    background: var(--main-color_acquisition);
}

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

.form-acquisition__header  a {
    color: var(--main-color_cession);
}