.etapes {
    .container {
        .etapes__list {
            display: flex;
            flex-direction: column;
            gap: 100px;

            .etapes__step {
                display: flex;
                position: relative;
                flex-direction: column;
                margin-left: 35px;
                gap: 10px;

                @media (min-width: 992px) {
                    flex-direction: row;
                    gap: 100px;
                    margin: 0;
                }


                &.right {
                    flex-direction: column;

                    @media (min-width: 992px) {
                        flex-direction: row-reverse;
                    }

                    .content_media {
                        position: relative;
                        /* min-height: 325px;

                        @media (min-width: 992px) {
                            min-width: 320px;
                        }

                        @media (min-width: 1200px) {
                            min-width: 415px;
                        }

                        @media (min-width: 1400px) {
                            min-width: 520px;
                        } */

                        .deco_graine {
                            &:before {
                                content: '';
                                position: absolute;
                                background-size: contain;
                                background-repeat: no-repeat;
                            }
                        }

                        .graine_1 {
                            &:before {
                                background-image: url(../../img/graine_left1.svg);
                                top: -15px;
                                left: 50%;
                                width: 96px;
                                height: 37px;
                            }
                        }

                        .graine_2 {
                            &:before {
                                background-image: url(../../img/graine_left2.svg);
                                bottom: 20px;
                                width: 75px;
                                height: 75px;
                                left: -15px;
                            }
                        }

                        .graine_3 {
                            &:before {
                                background-image: url(../../img/graine_left3.svg);
                                bottom: 30px;
                                right: -15px;
                                width: 50px;
                                height: 56px;

                                @media (max-width: 992px) {
                                    right: -5px;
                                }
                            }
                        }
                    }

                    .content_text {
                        padding-left: 10px;

                        @media (min-width: 992px) {
                            align-items: end;
                            text-align: right;
                            padding-right: 50px;

                            &:before {
                                content: '';
                                position: absolute;
                                border: 4px solid var(--cream);
                                border-left: 0px;
                                border-radius: 0px 20px 20px 0px;
                                top: -38px;
                                right: -25px;
                                height: 419px;
                                width: 80px;
                            }

                            .etape_annee {
                                position: relative;

                                &:before {
                                    content: '';
                                    background-image: url(../../img/point_shadow.svg);
                                    background-position: center;
                                    position: absolute;
                                    right: -55px;
                                    width: 47px;
                                    height: 47px;
                                    background-color: var(--etape-couleur);
                                    border-radius: 50px;
                                    top: 15px;
                                    border: 7px solid var(--white);
                                }
                            }
                        }

                        &:before {
                            @media (min-width: 1400px) {
                                top: -39px;
                                right: -25px;
                                height: 420px;
                                width: 80px;
                            }
                        }

                        .etape_annee {
                            &:before {
                                @media (min-width: 992px) {
                                    right: -96px;
                                }

                                @media (max-width: 992px) {
                                    left: -46px !important;
                                }
                            }
                        }
                    }

                    @media (min-width: 992px) {
                        &.first_step {
                            .content_text {
                                &:before {
                                    border-top: 0px !important;
                                    border-radius: 0px 0px 20px 0px;
                                    height: 330px;
                                    top: 0px;

                                    @media (min-width: 1400px) {
                                        height: 117%;
                                        top: 2px;
                                    }
                                }
                            }
                        }

                        &.last_step {
                            .content_text {
                                &:before {
                                    border-bottom: 0px;
                                    border-radius: 0px 20px 0px 0px;
                                    height: 390px;
                                    top: -38px;
                                }
                            }
                        }
                    }

                    &.date_parents {
                        .content_text {
                            &:before {
                                @media (min-width: 992px) {
                                    border-radius: 0px 20px 0px 0px;
                                    border-bottom: 0px !important;
                                    height: 420px;
                                }

                                @media (min-width: 1400px) {
                                    height: 445px !important;
                                }
                            }
                        }

                        &.last_step {
                            .content_text {
                                &:before {
                                    @media (max-width: 992px) {
                                        height: 600px !important;
                                    }
                                }
                            }
                        }
                    }
                }

                &.left {
                    .content_media {
                        position: relative;
                        /* min-height: 325px;

                        @media (min-width: 992px) {
                            min-width: 320px;
                        }

                        @media (min-width: 1200px) {
                            min-width: 415px;
                        }

                        @media (min-width: 1400px) {
                            min-width: 520px;
                        } */

                        .deco_graine {
                            &:before {
                                content: '';
                                position: absolute;
                                background-size: contain;
                                background-repeat: no-repeat;
                            }
                        }

                        .graine_1 {
                            &:before {
                                background-image: url(../../img/graine_right1.svg);
                                top: -25px;
                                left: 60px;
                                width: 55px;
                                height: 45px;
                            }
                        }

                        .graine_2 {
                            &:before {
                                background-image: url(../../img/graine_right2.svg);
                                bottom: -50px;
                                left: 30%;
                                width: 124px;
                                height: 105px;

                                @media (max-width: 992px) {
                                    left: 20%;
                                    bottom: 25px;
                                }
                            }
                        }

                        .graine_3 {
                            &:before {
                                background-image: url(../../img/graine_right3.svg);
                                bottom: -15px;
                                right: 30%;
                                width: 30px;
                                height: 30px;

                                @media (max-width: 992px) {
                                    bottom: 65px;
                                }
                            }
                        }
                    }

                    .content_text {
                        padding-left: 10px;

                        @media (min-width: 992px) {
                            padding-left: 50px;
                        }

                        &:before {
                            content: '';
                            position: absolute;
                            left: -25px;
                            width: 0px;
                            border: 4px solid var(--cream);
                            border-right: 0;
                            border-radius: 20px 0px 0px 20px;

                            @media (min-width: 992px) {
                                top: -48px;
                                height: 439px;
                                width: 75px;
                            }

                            @media (min-width: 1400px) {
                                width: 90px;
                                height: 438px;
                            }
                        }

                        .etape_annee {
                            position: relative;

                            @media (min-width: 993px) {
                                &:before {
                                    content: '';
                                    background-image: url(../../img/point_shadow.svg);
                                    background-position: center;
                                    position: absolute;
                                    left: -96px;
                                    width: 47px;
                                    height: 47px;
                                    background-color: var(--etape-couleur);
                                    border-radius: 50px;
                                    top: 15px;
                                    border: 7px solid var(--white);
                                }
                            }
                        }
                    }

                    &.first_step {
                        .content_text {
                            &:before {
                                border-top: 0px !important;
                                border-radius: 0px 0px 0px 20px;
                                top: 1px;
                                height: 120%;

                                @media (max-width: 992px) {
                                    height: 710px;
                                }

                                @media (min-width: 1400px) {
                                    top: 0px;
                                }
                            }

                        }
                    }

                    &.last_step {
                        .content_text {
                            &:before {
                                border-bottom: 0px !important;
                                border-radius: 20px 0px 0px 0px;
                                height: 115% !important;
                                top: -48px;

                                @media (max-width: 992px) {
                                    &:before {
                                        height: 580px !important;
                                    }
                                }
                            }
                        }
                    }

                    &.date_parents {
                        .content_text {
                            &:before {
                                @media (min-width: 992px) {
                                    border-radius: 20px 0px 0px 0px !important;
                                    border-bottom: 0px !important;
                                }

                                @media (min-width: 1400px) {
                                    height: 445px !important;
                                }
                            }
                        }
                    }
                }

                &.last_step {
                    .content_text {
                        @media (max-width: 992px) {
                            &:before {
                                height: 300px !important;
                            }
                        }
                    }
                }
            }

            /* .etapes__step:has(+ .etapes__step.date_parents) {
            .content_text {
                &:before {
                    border-bottom: 0px !important;
                }
            }
        } */

            .etapes__step.right:has(+ .etapes__step.right) {
                .content_text {
                    &:before {
                        border-bottom: 0px;
                        border-radius: 0px 20px 0px 0px;

                        @media (min-width: 992px) {
                            height: 138%;
                        }

                        @media (min-width: 1200px) {
                            height: 138%;
                        }

                        @media (min-width: 1400px) {
                            height: 135%;
                        }
                    }
                }
            }

            .etapes__step.right+.etapes__step.right {
                .content_text {
                    &:before {
                        border-top: 0px;
                        border-radius: 0px 0px 20px 0px;
                    }
                }

                &:not(:has(+ .etapes__step.left)) {
                    .content_text {
                        &:before {
                            border-top: 0px;
                            border-radius: 0px;
                        }
                    }
                }
            }

            .etapes__step.left:has(+ .etapes__step.left) {
                .content_text {
                    &:before {
                        border-bottom: 0px;
                        border-radius: 20px 0px 0px 0px;
                    }
                }
            }

            .etapes__step.left+.etapes__step.left {
                .content_text {
                    &:before {
                        border-top: 0px;
                        border-radius: 0px 0px 0px 20px;
                    }
                }

                &:not(:has(+ .etapes__step.right)) {
                    .content_text {
                        &:before {
                            border-top: 0px;
                            border-radius: 0px;
                        }
                    }
                }
            }

            .etape_dates {
                gap: 100px;
                flex-direction: column;

                .content_text {
                    .etape_annee {
                        font-size: 56px !important;
                        line-height: 60px !important;

                        @media (max-width: 992px) {
                            font-size: 40px !important;
                            line-height: 44px !important;
                        }
                    }
                }

                &.left {
                    .etapes__step {
                        &.first_step {
                            .content_text {
                                &:before {
                                    border-radius: 0px !important;
                                    top: -35px !important;

                                    @media (min-width: 992px) {
                                        height: 445px !important;
                                    }
                                }
                            }
                        }

                        &.last_step {
                            .content_text {
                                &:before {
                                    border-radius: 0px 0px 0px 20px !important;

                                    @media (max-width: 991px) {
                                        height: 130px !important;
                                    }

                                    @media (min-width: 992px) {
                                        border-bottom: 4px solid var(--cream) !important;
                                        height: 439px !important;
                                    }
                                }
                            }
                        }
                    }
                }

                &.right {
                    .etapes__step {
                        &.last_step {
                            .content_text {
                                &:before {
                                    border-radius: 0px 0px 20px 0px !important;

                                    @media (max-width: 991px) {
                                        height: 370px !important;
                                    }

                                    @media (min-width: 992px) {
                                        border-bottom: 4px solid var(--cream) !important;
                                        height: 419px !important;
                                    }
                                }
                            }
                        }
                    }
                }

                &.last_step {
                    .etapes__step {
                        &.last_step {
                            .content_text {
                                &:before {
                                    border-bottom: 0px !important;
                                    border-radius: 0px !important;

                                    @media (min-width: 992px) {
                                        height: 370px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }


            .content_media {
                width: 100%;
                height: fit-content;

                @media (min-width: 992px) {
                    min-height: 325px;
                    min-width: 325px;
                    max-width: 325px;
                }

                @media (min-width: 1200px) {
                    min-width: 430px;
                    max-width: 430px;
                }

                @media (min-width: 1400px) {
                    min-width: 520px;
                    max-width: 520px;
                }

                /* min-height: 325px;

                        @media (min-width: 992px) {
                            min-width: 320px;
                        }

                        @media (min-width: 1200px) {
                            min-width: 415px;
                        }

                        @media (min-width: 1400px) {
                            min-width: 520px;
                        } */

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .content_text {
                display: flex;
                flex-direction: column;
                position: relative;
                justify-content: center;

                @media (max-width: 992px) {
                    margin-top: 12px;

                    &:before {
                        content: '';
                        position: absolute;
                        left: -25px;
                        width: 70px;
                        border-left: 4px solid var(--cream);
                        border-radius: 0px;
                        height: 710px;
                        top: 0px;
                        z-index: -1;
                    }
                }

                h4 {
                    color: var(--green-dark1);
                    text-transform: uppercase;
                    font-family: var(--title-font-hdp);
                }

                P {
                    color: var(--green-dark1);
                }

                .etape_annee {
                    font-family: var(--curvy-font);
                    font-style: italic;
                    font-size: 60px;
                    line-height: 60px;
                    font-weight: var(--regular);

                    @media (min-width: 992px) {
                        font-size: 80px;
                        line-height: 80px;
                    }

                    @media (min-width: 1200px) {
                        font-size: 88px;
                        line-height: 88px;
                    }

                    @media (max-width: 992px) {
                        &:before {
                            content: '';
                            background-image: url(../../img/point_shadow.svg);
                            background-position: center;
                            position: absolute;
                            left: -55px;
                            width: 47px;
                            height: 47px;
                            background-color: var(--etape-couleur);
                            border-radius: 50px;
                            top: 0px;
                            border: 7px solid var(--white);
                        }
                    }
                }
            }

            .etape_dates {
                &.right {
                    .etapes__step {
                        &:first-child {
                            .content_text {
                                &:before {
                                    width: 0px !important;
                                    top: -46px !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}