.accordeons_cartes_bleues {
    &[data-color="#202f77"] {
        .bloc_accordeon {
            .accordion-item {
                border: 1px solid var(--white) !important;
            }
        }
    }

    .section__title {
        h2 {
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .filters_tabs {
        .filter_tab {
            color: var(--white);

            &:not(.active) {
                border-color: var(--white) !important;
            }
        }
    }

    .container {
        .filters_tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 35px;
            flex-wrap: wrap;

            .filter_tab {
                padding: 9px 14px;
                border: 1px solid var(--white);
                color: var(--white);
                font-size: 15px;
                font-family: var(--regular);
                border-radius: 4px;
                background: transparent;
                display: flex;
                gap: 8px;
                align-items: center;
                transition: var(--transition);
                min-width: 139px;
                justify-content: center;
                border-radius: 50px;

                img {
                    width: 20px;
                    height: 20px;
                    object-fit: contain;
                }

                &.active,
                &:hover {
                    border: 1px solid transparent;
                    background: var(--red);

                    img {
                        filter: brightness(100) !important;
                    }
                }
            }

        }

        .bloc_accordeon {
            .accordion-item {
                display: flex;
                align-items: center;
                padding: 50px;
                margin-top: 50px;
                min-height: 560px;
                gap: 60px;
                overflow: visible;
                position: relative;
                visibility: visible;
                opacity: 1;
                background: transparent;
                border: none;
                position: relative;
                background: var(--dark-blue2);
                border-radius: 16px;

                &:not(.no_img) {
                    max-width: 880px;
                }

                &.no_img {
                    .accordion-content {
                        max-width: none;
                        text-align: center;
                    }
                }

                @media (max-width: 1199px) {
                    gap: 20px;
                    flex-direction: column-reverse;
                }

                &:not(.active) {
                    visibility: hidden;
                    opacity: 0;
                    position: absolute;

                    &.right {
                        .accordion-content {
                            transform: translateX(100%);
                        }

                        .accordion-media {
                            transform: translateX(0%);
                        }
                    }

                    &.left {
                        .accordion-content {
                            transform: translateX(-100%);
                        }

                        .accordion-media {
                            transform: translateX(0%);
                        }
                    }
                }

                &.right {
                    margin-right: auto;
                    margin-left: auto;

                    @media (min-width: 1200px) {
                        padding-left: 10px;
                        flex-direction: row-reverse;
                        justify-content: start;

                        &:not(.no_img) {
                            margin-left: 100px;
                        }
                    }

                    .accordion-content {
                        text-align: start;
                        align-items: start;

                        @media (min-width: 1200px) {
                            padding-left: 45px;
                        }
                    }


                    .accordion-media {
                        @media (min-width: 1199px) {
                            transform: translate(60%, 0);
                            right: 0px;
                        }
                    }

                    .accordion-icon {
                        left: 15px;
                    }
                }

                &.left {
                    margin-left: auto;
                    margin-right: auto;

                    @media (min-width: 1200px) {
                        flex-direction: row;
                        justify-content: end;

                        &:not(.no_img) {
                            margin-right: 100px;
                        }
                    }

                    .accordion-media {
                        @media (min-width: 1199px) {
                            transform: translate(-32%, 0);
                            left: 0px;
                        }
                    }

                    .accordion-icon {
                        right: 15px;
                    }
                }

                .accordion-media {
                    width: 100%;
                    transition: transform 0.4s ease;

                    @media (min-width: 1200px) {
                        position: absolute;
                        width: 560px;
                        height: 400px;
                    }

                    img {
                        width: 400px;
                        height: 400px;
                        object-fit: cover;
                        border-radius: 8px;
                    }
                }

                .accordion-content {
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                    transform: translateX(0%);
                    transition: transform 0.4s ease;
                    margin-top: 50px;

                    @media (min-width: 1200px) {
                        margin-top: 0px;
                        max-width: 65%;
                    }

                    .accordion-header,
                    .accordion-body {
                        background: transparent !important;
                        color: var(--white);
                        padding: 0px;
                    }

                    .accordion-body {

                        p,
                        li,
                        span {
                            opacity: 0.75;
                        }

                        .cta,
                        .cta--p {
                            opacity: 1;
                        }

                        >h2,
                        >h3,
                        >h4 {
                            opacity: 1;
                            color: #FFF !important;
                        }
                    }
                }

                .accordion-icon {
                    position: absolute;
                    top: 15px;
                    width: 56px;
                    height: 56px;
                    border-radius: 8px;
                    aspect-ratio: unset;
                    background: var(--red);
                    display: grid;
                    place-items: center;
                    padding: 12px 15px;

                    img {
                        filter: brightness(100);
                        width: 100%;
                    }
                }
            }
        }
    }

    ul li {
        position: relative;
        padding: 0px 0px 0px 30px;

    }

    ul:not([class]) li::before {
        background: var(--main-color1);
        border-radius: 100%;
        content: "";
        display: inline-block;
        height: 8px;
        margin: -2px 15px 0px 15px;
        vertical-align: middle;
        width: 8px;
        outline: 2px solid rgba(7, 116, 186, 0.33);
        position: absolute;
        left: -5px;
        top: 11px;
    }
}

.accordeons_cartes_bleues.c_white {
    .filters_tabs {
        .filter_tab {

            &:not(.active),
            &:not(:hover) {
                color: var(--red);
                border-color: var(--red) !important;

                img {
                    filter: brightness(0) saturate(100%) invert(22%) sepia(93%) saturate(7189%) hue-rotate(338deg) brightness(90%) contrast(99%);
                }
            }
        }
    }

    .container {
        .filter_tab {
            border: 1px solid var(--red);
            color: var(--red);
            background: transparent;

            &.active,
            &:hover {
                border: 1px solid transparent;
                background: var(--red);
                color: var(--white);
            }
        }
    }
}