.accordeons-etapes {
    .section__title {
        h2 {
            max-width: 760px;
            margin: auto;
        }
    }

    &:not(.c_white) {
        .onglet_txt {
            .titre_onglet {
                color: var(--white);
                
                span {
                    border: 1px solid var(--white) !important;
                }
            }
        }
    }

    &.c_white {
        .nav {

            li,
            p,
            span,
            h2,
            h3,
            h4,
            button {
                color: var(--dark-blue2) !important;
            }

            li {
                &.active {
                    border-color: var(--dark-blue2) !important;
                }
            }

            span {
                border-color: var(--dark-blue2) !important;
            }
        }

        .onglets {
            ul.nav {
                li.nav-item {
                    button {

                        &:before {
                            background: var(--dark-blue2);
                        }
                    }
                }
            }

            .tab-content {
                .tab-pane {
                    .onglet__content {
                        .onglet_txt {
                            z-index: 2;

                            &:after {
                                box-shadow: 0 0 48px rgba(8, 12, 24, 0.05);
                                background: rgba(80, 120, 240, 0.10);
                            }
                        }
                    }
                }
            }
        }
    }
}

.onglets {

    &.vertical {
        display: flex;
        margin-top: 80px;
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;

        @media (min-width: 991px) {
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
        }

        .tab-content {
            margin-top: 0px !important;
            width: 100%;
            background: linear-gradient(90deg, rgba(64, 96, 192, 0.7) 0%, rgba(48, 72, 144, 0.6) 100%);
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            background-color: var(--dark);
            padding: 40px;
            transition: var(--transition);

            @media (min-width: 992px) {

                max-width: 840px;
                min-height: 440px;
                padding: 40px 100px;
            }

            &:before,
            &:after {
                content: '';
                background: rgba(80, 120, 240, 0.16);
                box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.1);
                position: absolute;
                border-radius: 100%;
                opacity: 1;
                z-index: 0;
            }

            &:before {
                top: 0;
                right: 0;
                width: 280px;
                height: 280px;
                transform: translate(40%, -40%);

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

            &:after {
                bottom: 0;
                left: 0;
                width: 370px;
                height: 370px;
                transform: translate(-30%, 50%);

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

        .tab_navigation {
            display: flex;
            flex: 0 0 auto;
            overflow: visible;
            position: relative;
            align-self: stretch;
            padding: 20px 0;
        }

        ul.nav {
            width: fit-content;
            flex-direction: column;
            gap: 8px;
            justify-content: start;
            position: sticky;
            top: 200px;
            align-self: center;
            margin: 0;
            padding: 20px;
            list-style: none;
            display: flex;

            li {
                max-width: none !important;
                display: flex;
                align-items: center;
                gap: 15px;
                width: fit-content;
                padding-top: 10px;
                transition: var(--transition);
                white-space: nowrap;
                margin-bottom: 0;

                &.active {
                    border-top: 2px solid var(--white);

                    span {
                        border-top: 0px !important;
                        padding: 0px !important;
                    }
                }

                button {
                    margin: 0 !important;
                    padding: 0 !important;
                    transition: var(--transition);

                    &:before {
                        display: none;
                    }
                }

                span {
                    padding-top: 10px;
                    border-top: 2px solid var(--white);
                    transition: var(--transition);
                }
            }
        }

        .onglet__content {
            .onglet_txt {
                color: var(--white) !important;
                transition: var(--transition);

                &:after {
                    display: none;
                }

                ul li ul {
                    margin-top: 10px;
                }
            }
        }
    }

    ul.nav {
        display: flex;
        justify-content: center;
        border: 0px;
        gap: 20px;

        li.nav-item {
            @media (max-width: 767px) {
                width: 100%;

                button {
                    width: 100%;
                }
            }

            @media (min-width: 768px) {
                max-width: 200px;
            }

            &.active {

                span,
                button {
                    opacity: 1;
                }
            }

            span {
                font-size: 16px;
                line-height: 20px;
                padding-bottom: 5px;
                font-weight: var(--bold);
            }

            span,
            button {
                font-family: var(--main-font);
                color: var(--white);
                opacity: 0.16;
            }

            button {
                font-size: 20px;
                line-height: 22px;
                font-weight: var(--medium);
                background: none;
                padding: 0px;
                text-align: left;
                padding-top: 15px;
                position: relative;
                margin-top: 10px;

                &:before {
                    content: '';
                    width: 100%;
                    height: 2px;
                    background: var(--white);
                    position: absolute;
                    top: 0;
                }
            }
        }
    }

    .tab-content {
        margin-top: 50px;

        .tab-pane {
            .onglet__content {
                display: flex;
                flex-direction: column-reverse;
                justify-content: space-between;
                align-items: center;
                gap: 50px;
                
                @media (max-width: 767px) {
                    gap: 150px;
                }
                
                @media (min-width: 992px) {
                    min-height: 500px;
                    flex-direction: row;
                }

                &:has(.no_img) {
                    justify-content: center;
                }

                .onglet_txt {
                    position: relative;
                    text-align: center;

                    
                    @media (min-width: 992px) {
                        text-align: left;
                        
                        &.no_img {
                            max-width: 470px;
                        }
                    }

                    &:after {
                        content: '';
                        background: rgba(32, 48, 96, 0.16);
                        width: 440px;
                        height: 440px;
                        border-radius: 600px;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translate(0%, -50%);
                        box-shadow: 0 0 48px rgba(8, 12, 24, 0.16);
                        z-index: 0;
                        pointer-events: none;

                        @media (max-width: 992px) {
                            width: 350px;
                            height: 350px;
                            right: 50%;
                            top: 78%;
                            transform: translate(50%, -50%);
                        }
                    }

                    .titre_onglet {
                        font-size: 24px;
                        line-height: 32px;
                        font-weight: var(--bold);
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        margin-bottom: 40px;

                        @media (max-width: 992px) {
                            justify-content: center;
                            flex-direction: column;
                        }

                        span {
                            padding: 8px 11px;
                            border-radius: 8px;
                            border: 1px solid var(--dark-blue2);
                        }
                    }
                }

                .onglet__img {
                    display: flex;
                    justify-content: end;
                    position: relative;
                    min-width: 60%;

                    @media (max-width: 992px) {
                        justify-content: center;
                        width: 100%;
                    }

                    &:not(:has(.img_bulle)) {
                        justify-content: center;
                    }

                    &:has(.img_bulle) {
                        &:before {
                            content: '';
                            background: transparent;
                            position: absolute;
                            width: 200px;
                            height: 200px;
                            border-radius: 100%;
                            outline: 8px solid var(--blue);
                            left: 0;
                            transform: translate(12%, -50%);
                            top: 50%;
                            z-index: 0;

                            @media (max-width: 768px) {
                                top: 0;
                                transform: translate(-50%, -50%);
                                left: 50%;
                            }

                            @media (min-width: 768px) and (max-width: 992px) {
                                top: 80%;
                            }

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

                    img {
                        &:not(.img_bulle) {
                            z-index: 1;
                            width: 400px;
                            height: 400px;
                            object-fit: cover;
                            border-radius: 16px;

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

                        &.img_bulle {
                            width: 200px;
                            height: 200px;
                            object-fit: cover;
                            border-radius: 100%;
                            position: absolute;
                            left: 0;
                            transform: translate(12%, -50%);
                            top: 50%;
                            z-index: 2;

                            @media (max-width: 768px) {
                                top: 0;
                                transform: translate(-50%, -50%);
                                left: 50%;
                            }

                            @media (min-width: 768px) and (max-width: 992px) {
                                top: 80%;
                            }

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