.m-toggle {
    .m-toggle__top {
        max-width: var(--wp--style--global--content-size);
        margin: 0 auto;
        text-align: center;
    }

    .toggle {
        max-width: var(--wp--style--global--content-size);
        margin: 2em auto 0;

        .toggle__item {
            padding: 0;
            background-color: var(--wp--preset--color--primary-accent);
            margin-bottom: 20px;
        }

        .toggle__item__title {
            font-size: 1.3125rem;
            line-height: calc(40 / 30);
            padding: 20px 140px 20px 20px;
            position: relative;
            margin: 0;
            transition: all 0.2s ease-in-out 0.1s;
            cursor: pointer;
            color: var(--wp--preset--color--secondary);

            @media(width < 768px) {
                font-size: 1.25rem;
                line-height: calc(30 / 20);
                padding: 20px 65px 20px 20px;
            }

            h3 {
                margin: 0;
                font-size: 1.3125rem;
                line-height: calc(40 / 30);
                font-weight: 300;
            }

            span {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translate3d(0, -50%, 0);
                width: 30px;
                height: 30px;
                display: block;

                &:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 50%;
                    width: 15px;
                    height: 2px;
                    background-color: var(--wp--preset--color--primary);
                    transform: translate3d(50%, 0, 0);
                }

                &:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 50%;
                    width: 15px;
                    height: 2px;
                    background-color: var(--wp--preset--color--primary);
                    transform: translate3d(50%, 0, 0) rotate(90deg);
                    transition: all 0.3s ease-in-out;
                }
            }

            &.active {
                margin: 0;

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

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

            .js-deploy-wrapper {
                font-size: 1rem;
                padding-bottom: 20px;
            }


        }

        .toggle__item__liens {
            margin-top: 1em;
        }

        &.toggle--2cols {
            max-width: inherit;
            flex-wrap: wrap;

            .toggle__col {
                @media(width < 768px) {
                    flex: 100% !important;

                    .toggle__item {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    &.has-background {

        .toggle {
            .toggle__item__content {
                color: initial;
            }
        }
    }

    /* avec une image */
    &.m-toggle-image {
        .col-image {
            height: auto;

            .m-toggle__image {
                max-width: 570px;
                height: 100%;

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

        &.m-toggle-image--droite {
            .m-toggle__image {
                margin-left: auto;
            }
        }
    }

    /*style centre */
    &.is-style-centre,
    &.is-style-colonne {
        .m-toggle__top {
            .m-toggle__texte {
                max-width: 80%;
                margin: 0 auto;

                @media(width < 768px) {
                    max-width: none;
                }
            }
        }
    }

    &.is-triangle-deco {
        @media(width <=767px) {
            display: none;
        }
    }
}