.m-toggle {
    .m-toggle__titre {
        margin-top: 0;
        font-size: 2.25rem;
    }

    .m-toggle__texte {
        color: #393937;
    }

    &.m-toggle-image {
        .col-image {
            height: auto;

            .m-toggle__image {
                height: 100%;

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

        }
    }

    &.is-style-centre {
        .m-toggle__top {
            text-align: center;
        }

        .m-toggle__liens {
            justify-content: center;
        }
    }
}

.toggle {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 50px;
    ;

    .toggle__item {
        background-color: var(--wp--preset--color--white);
        border: 1px solid #bdbdbc;
        border-radius: var(--wp--preset--border-radius--md);
    }

    .toggle__item__title {
        padding: 26px 72px 26px 30px;
        position: relative;
        margin: 0;
        transition: .25s ease-in-out;
        cursor: pointer;

        h3 {
            font-size: var(--wp--preset--font-size--text-lg);
            line-height: inherit;
        }

        @media(width < 768px) {
            padding: 16px 58px 16px 16px;

            h3 {
                font-size: var(--wp--preset--font-size--text-sm);
            }
        }

        span {
            position: absolute;
            right: 30px;
            top: 50%;
            width: 32px;
            height: 32px;
            transform: translateY(-50%);

            @media(width < 768px) {
                right: 16px;
            }

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 50%;
                width: 16px;
                height: 2px;
                background-color: var(--wp--preset--color--main);
            }

            &:after {
                transform: translate3d(50%, 0, 0);
            }

            &:before {
                transform: translate3d(50%, 0, 0) rotate(90deg);
                transition: all 0.3s ease-in-out;
            }
        }

        &.active {
            padding-bottom: 8px;

            span {
                &:before {
                    transform: translate3d(50%, 0, 0) rotate(0deg);
                }
            }
        }
    }

    .toggle__item__content {
        transition: all 0.3s ease-in-out;
        height: 0;
        overflow: hidden;

        .js-deploy-wrapper {
            color: var(--wp--preset--color--description-light);
            padding: 0 72px 26px 30px;

            @media(width < 768px) {
                color: #2f2f2d;
                font-size: var(--wp--preset--font-size--text-sm);
                padding: 0 58px 16px 16px;
            }
        }
    }

    @media(width < 768px) {
        gap: 16px;
    }

    &.toggle--2cols {
        flex-direction: row;

        .toggle__col {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 25px;
        }

        @media(width < 768px) {
            flex-direction: column;

            .toggle__col {
                gap: 16px;
            }
        }
    }
}