.accordeons {
    &[data-color="#00355f"] {
        .accordeon-item {

            @media (min-width: 768px) {
                &:has(.accordeon_icon) {
                    .accordeon-content {
                        border-left: 2px solid var(--white) !important;
                    }
                }
            }

            @media (min-width: 992px) {

                &:hover,
                &.active {
                    .accordeon_icon {
                        background: var(--red) !important;
                    }
                }
            }

            .accordeon_icon {
                background-color: var(--white) !important;

                span {
                    background-color: var(--dark-blue) !important;
                    color: var(--white) !important;
                }
            }

            .accordeon-content {

                &:not(.open) {
                    h3 {
                        &:after {
                            filter: brightness(100);
                        }
                    }
                }
            }
        }
    }

    &:not([data-color="#00355f"]) {
        .accordeon-item {
            @media (min-width: 992px) {

                &:hover,
                &.active {
                    .accordeon_icon {
                        background: var(--red) !important;
                    }
                }
            }
        }
    }

    &#adhesion_table {
        .accordeon {
            .items {
                &:has(.accordeon-item .accordeon-content>table) {
                    margin-top: 30px;
                }

                .accordeon-item {
                    &:not(:has(.accordeon-content>table)) {
                        .accordeon-content {
                            h3 {
                                text-transform: uppercase !important;
                            }
                        }

                        &.active {
                            .accordeon-content {
                                h3 {
                                    &:after {
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }

                        @media (min-width:992px) {
                            &:hover {
                                .accordeon-content {
                                    h3 {
                                        &:after {
                                            transform: rotate(180deg);
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:has(.accordeon-content>table) {
                        margin: 0;
                        background-color: var(--white);
                        box-shadow: 0px 5px 30px rgba(25, 33, 61, 0.06);
                        padding: 30px;
                        border-radius: var(--border-radius);
                        transition: var(--transition);

                        &:not(.active) {
                            &:hover {
                                background-color: var(--azur);
                            }
                        }

                        h3 {
                            &:after {
                                content: '+' !important;
                                display: inline-block;
                                transition: var(--transition);
                                width: 30px;
                                height: 30px;
                                background-color: var(--dark-blue);
                                border-radius: 999px;
                                color: var(--white);
                                display: grid;
                                place-items: center;
                            }
                        }

                        &.active {
                            h3 {
                                &:after {
                                    content: '-' !important;
                                }
                            }

                            table {
                                max-height: none;
                                display: table;
                                margin-top: 30px;
                            }
                        }

                        table {
                            max-height: 0;
                            overflow: hidden;
                            display: block;

                            tbody {
                                tr {
                                    &:nth-child(odd) {
                                        background-color: #f1f3f9;
                                    }

                                    td {
                                        padding: 5px 15px;

                                        &:nth-child(2) {
                                            border-top: 0 !important;
                                            border-right: 1px solid;
                                            border-bottom: 0 !important;
                                            border-left: 1px solid;
                                            border-color: #dedede !important;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .accordeon-content {
                        h3 {
                            font-weight: 400 !important;
                        }
                    }
                }
            }
        }
    }

    .container {
        z-index: 1;
        position: relative;

        .section__title {
            margin: 0;
            max-width: unset !important;
            text-align: left !important;

            p {
                margin: auto 0 16px 0;
                max-width: unset !important;
            }
        }

        .bloc_accordeon {
            display: flex;
            justify-content: space-between;
            gap: 30px;
            flex-direction: column;
            align-items: start;
            margin-top: 20px;

            &:not(.open) {
                .accordeon-item {
                    cursor: pointer;

                    .accordeon-content {
                        h3 {
                            display: flex;
                            justify-content: space-between;

                            &:after {
                                content: url('../../img/arrow_down.svg');
                                display: inline-block;
                                transition: var(--transition);
                                height: fit-content;
                            }
                        }
                    }

                    &.active {
                        align-items: stretch !important;

                        .accordeon-content {
                            height: auto;

                            *:not(h3, .bouton) {
                                transform: translateY(0px);
                            }

                            h3 {
                                &::after {
                                    transform: rotate(180deg);
                                }
                            }
                        }
                    }

                    &:not(.active) {
                        .accordeon-content {
                            *:not(h3):not(table) {
                                transform: translateY(20px);
                                font-size: 0px;
                                height: 0;
                                margin: 0;
                                opacity: 0;

                                .bouton {
                                    opacity: 0;
                                }
                            }
                        }
                    }
                }
            }

            .items {
                display: flex;
                flex-direction: column;
                position: relative;
                height: fit-content;
                gap: 20px;
                width: 100%;

                .accordeon-item {
                    opacity: 1;
                    width: fit-content;
                    height: fit-content;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;
                    width: 100%;

                    @media (min-width: 768px) {
                        &:has(.accordeon_icon) {
                            .accordeon-content {
                                border-left: 2px solid var(--dark-blue);
                                padding-left: 30px;
                            }
                        }
                    }

                    &.has_img {
                        flex-direction: column;
                        transition: var(--transition);
                        align-items: stretch;

                        @media (min-width: 768px) {
                            align-items: center;
                            flex-direction: row;
                        }

                        .accordeon_icon {
                            background-color: var(--dark-blue);
                            border-radius: 50px;
                            width: 80px;
                            height: 80px;
                            flex-shrink: 0;
                            padding: 20px;
                            display: grid;
                            place-items: center;
                            position: relative;
                            border: 2px solid var(--dark-blue);
                            transition: var(--transition);

                            span {
                                position: absolute;
                                top: -4px;
                                left: -4px;
                                background-color: var(--white);
                                border-radius: 50px;
                                width: 25px;
                                height: 25px;
                                color: var(--dark-blue);
                                display: grid;
                                place-items: center;
                                font-weight: var(--medium);
                            }
                        }

                        .accordeon-content {
                            width: 100%;
                        }
                    }

                    .accordeon-content {
                        height: fit-content;
                        transition: var(--transition);
                        width: 100%;

                        *:not(h3) {
                            transition: transform 0.3s ease, height 0.3s ease, margin 0.3s ease;
                        }

                        img {
                            border-radius: var(--border-radius);
                            width: 124px;
                            height: 124px;
                        }

                        h3 {
                            margin: 0 !important;

                            &+p {
                                margin-top: 20px;
                            }
                        }

                        .cta {
                            margin: 20px 0;
                            text-transform: uppercase;
                        }
                    }
                }
            }
        }
    }

    &#projet_europeens {
        .accordeon {
            .mpc-textblock {
                p {
                    margin: 10px 0 0 0 !important;
                }
            }

            .mpc-button__content {
                margin-bottom: 20px !important;
            }
        }
    }
}