.projet-etape {
    position: relative;
    margin-bottom: 1.5rem;
    height: 100%;
}
.projet-etape::before{
    position: absolute;
    content: '';
    top: 25px;
    left: calc(50% - 8px);
    border-left: 16px dotted #ccc;
    height: 100%;
    z-index: 1;
}

.projet-etape--etat-fait::before{
    border-left-color: #4BA64B;
}

.projet-etape[data-position]:not([data-position="1"])::before {
    top: 0px;
}
.projet-etape[data-position="4"]::before {
    height: 25px;
}

.projet-etape--etat-fait::after{
    position: absolute;
    content: '';
    bottom: 50px;
    left: calc(50% - 45px);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../assets/etape_end.png");
    width: 90px;
    height: 90px;
    z-index: 1;
}

.projet-etape__image img {
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
}

@media (max-width:782px) {

    .projet-etape{
        display: flex;
        justify-content: center;

    }

    .projet-etape::before{
        display: none;
        
    }
    .projet-etape::after{
        bottom: calc(50% - 85px);
        left: calc(50% + 25px);
        z-index: 2;
    }


}