.etape{
    color: var(--light-text-color);
    margin-bottom: 20px;
    font-size: 1.5em;
}
.questionnaire-header{
    height: 230px;
    padding: 90px 50px 0 50px;
}
.loader{
    position: relative;
    width: 100%;
    border-radius: 100px;
    overflow: hidden;
    height: 20px;
    
    /* -webkit-box-reflect: below 1px linear-gradient(transparent, #0005) */}
.loader::before{
    content: "";
    z-index: 2;
    position: absolute;
    width: 100%;
    border-radius: 100px;
    height: 20px;
    background: #fff;
}
.loader-before{
    transition: width 0.5s ease-in-out;
    content: "";
    z-index: 4;
    position: absolute;
    border-radius: 100px;
    inset: 0;
    /* background: linear-gradient(90deg, var(--gradient-first-color), var(--gradient-second-color)); */
    background: linear-gradient(90deg, var(--gradient-first-color), var(--gradient-second-color), var(--gradient-third-color), var(--gradient-first-color)) ;
    animation: animate 10s linear infinite;
    background-size: 500%;
}
.loader-before.active, .loader.active::before, .loader.active::after{
    background: rgb(0, 255, 0);
}
.loader::after{
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(90deg, var(--gradient-first-color), var(--gradient-second-color)); */
    background: linear-gradient(90deg, var(--gradient-first-color), var(--gradient-second-color), var(--gradient-third-color), var(--gradient-first-color)) ;
    animation: animate 10s linear infinite;
    background-size: 500%;
    filter: blur(40px);
}
.slider-form{
    position: relative;
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    height: calc(100% - 230px);
    width: 100%;
    background-color: #fff;
    float: left;
}
.slider-item{
    /* border: var(--gradient-first-color) 1px solid; */
    background-color: white;
    padding: 70px 50px 70px 50px;
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: bottom .2s ease-in-out;
}
.slider-item.active{
    bottom: 0;
}


@keyframes animate {
    0%
    {
        background-position: 0 0;
    }
    0%
    {
        background-position: 500% 0;
    }
}