.switch-up .arianne{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.switch-up .arianne__item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    color:var(--color-grey);
}

.switch-up .arianne__item.is-active{
    color: var(--color-primary);

}

.switch-up .arianne__item.is-active .arianne__item__bulle{
    width: 32px;
    height: 32px;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.switch-up .arianne__item.is-active .ligne{
    border-top: 1px solid var(--color-primary);
}

.switch-up .arianne__item.is-active .arianne__item__libelle{
    display: block;
}

.switch-up .arianne__item.is-done{
    color: var(--color-primary);
}

.switch-up .arianne__item.is-done .arianne__item__bulle{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.switch-up .arianne__item.is-done .ligne{
    border-top: 1px solid var(--color-primary);
}

.switch-up .arianne__item__bulle{
    position: relative;
    display: block;
    /*font-family: 'Arial';*/
    font-weight: 600;
    width: 20px;
    height:20px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--color-secondary);
    font-size: var(--font-size-3);
    color:var(--color-grey);
    z-index: 1;
}

.switch-up .arianne__item__libelle{
    position: absolute;
    width: 300px;
    display: none;
    top:100%;
    left:50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 8px;
    text-align: center;
    font-size: 1.3rem;
}

.switch-up .arianne__item .ligne{
    position: absolute;
    top:16px;
    width: calc(100% / 2);
    height:1px;
    border-top: 1px dotted var(--color-grey);
}

.switch-up .arianne__item .ligne--gauche{
    left:0;
}

.switch-up .arianne__item .ligne--droite{
    left:calc(50% + 1px);
}

.switch-up .arianne__item:first-child .ligne--gauche{
    display: none;
}

.switch-up .arianne__item:last-child .ligne--droite{
    width: 100%;
}

.switch-up .arianne__item:last-child .ligne--droite::after{
    content:'';
    position: absolute;
    left: calc(100% - 13px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height:30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
    background-color: var(--color-secondary);
    -webkit-mask-image: url(../../../img/icon/ariane-arrow.svg); /* warning : not standard */
    top: 1px; /* fix vertical center */
}

.switch-up .arianne__item.is-active:last-child .ligne--droite::after{
    background-color: var(--color-primary);
    -webkit-mask-image: url(../../../img/icon/ariane-arrow.svg); /* warning : not standard */
}

@media screen and (max-width: 991px) {
    .switch-up .arianne{
        display: none;
    }
}