/*------------------------------*\
    #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: auto;
}
.progressbar li:before {
    position: absolute;
    top: 22px;
    left: -1px;
    height: 2px;
    width: 100%;
    content: "";
}
.progressbar li:first-of-type:before {
    left: 50%;
    width: 50%;
}
.progressbar li:last-of-type:before {
    left: -1;
    width: 50%;
}

.progressbar li span {
    display: block;
    text-transform: uppercase;
    font-size: calc(var(--basePX) + 4px);
    margin-left: 8px;
    margin-right: 8px;
    word-break: auto-phrase;
    text-align: center;
}

.progressbar li:last-child span {
    word-break: break-all;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: keep-all;
}

.progressbar li a {
    display: block;
    position: relative;
    padding: 0;
    border: 0;
    text-decoration: none;
}
.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 span {
    font-weight: 600;
}
.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);
    }
}

@media (max-width: 480px) {
    .container-etape .progressbar li span {
        font-size: var(--basePX);
    }
}


/*------------------------------*\
    #COMPOSANT PROGRESSBAR VARIANTS
/*------------------------------*/
/* --- inscription form --- */
.form-inscription__header {margin-bottom: 2em;}
.form-inscription__header .progressbar li:before{
    background: var(--main-color_demande);
}
.form-inscription__header .progressbar li a {
    color: var(--main-color_demande)!important;
}

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

/* --- negociee form --- */
.form-negociee__header .progressbar li:before {
    background: var(--main-color_negociee);
}

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

.form-negociee__header  a {
    color: var(--main-color_negociee);
}


/* --- formateur disponible form --- */
.form-disponible__header .progressbar li:before {
    background: var(--main-color_disponible);
}

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

.form-disponible__header  a {
    color: var(--main-color_negociee);
}

/* --- besoin formateur form --- */
.form-besoin__header .progressbar li:before {
    background: var(--main-color_besoin);
}

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

.form-besoin__header  a {
    color: var(--main-color_besoin);
}


/* --- demande form --- */
.form-demande__header .progressbar li:before {
    background: var(--main-color_demande);
}

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

.form-demande__header  a {
    color: var(--main-color_demande);
}