.m-engagement {
    .m-engagement__wrap {

        padding: 72px 87px 155px 86px;
        position: relative;

        &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            z-index: 0;
            border-radius: 10px;
            background-color: var(--wp--preset--color--secondary-accent);
        }

        @media(width < 991px) {
            padding: 40px 0 155px !important;

        }
    }

    .m-engagement__top {
        position: relative;
        z-index: 1;

        @media(width < 991px) {
            padding-left: 24px;
            padding-right: 24px;
        }
    }

    .m-engagement__titre,
    .m-engagement__texte {
        color: var(--wp--preset--color--base);
    }

    .m-engagement__lien {
        height: auto;
        margin-top: 2.1875rem;

        @media(width < 991px) {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
    }

    .m-engagement__image {
        text-align: right;

        img {
            aspect-ratio: 3/4;
            object-fit: cover;
            max-height: 630px;
            max-width: 509px;
            border-radius: 8px;
            margin-top: -200px;

            @media(width < 991px) {
                margin-top: 0;
                max-width: 100%;
                aspect-ratio: 1/1;
            }
        }
    }

    .m-engagement__blocs {
        position: relative;
        margin-top: -115px;
        margin-left: 87px;
        margin-right: 87px;
        z-index: 1;

        @media(width < 991px) {
            margin-top: -120px;
            margin-left: 15px !important;
            margin-right: 15px !important;
        }
    }

    &.alignfull {

        /* Variante pleine largeur uniquement (conteneur « fluid »). Dans un
           .container le panneau est déjà borné par la grille : on n'y touche pas. */
        .container-fluid>.m-engagement__wrap {
            /* 1306px auparavant : légèrement élargi pour desserrer les marges latérales */
            max-width: 1340px;
            margin: 0 auto;

            /* Une fois le panneau à sa largeur maximale, le padding passe à 110px :
               1340 - 2 x 110 = 1120px de contenu centré, soit exactement l'axe des
               sections standard de la page (.container). En dessous de 1340px le
               panneau occupe toute la largeur, on garde les 86/87px d'origine. */
            @media(width >=1340px) {
                padding-left: 110px;
                padding-right: 110px;
            }
        }

        .container-fluid>.m-engagement__blocs {
            /* 1150px auparavant. La rangée porte une gouttière de 8px de chaque côté
               (g-3), donc 1136 - 16 = 1120px de cards : même axe que le texte au-dessus
               et que les sections standard de la page. */
            max-width: 1136px;
            margin-left: auto;
            margin-right: auto;

            /* Entre 991 et 1340px le panneau occupe toute la largeur avec 86px de
               padding : la rangée est calée sur ce padding (86 - 8 de gouttière)
               pour que les cards restent sous le texte du bloc. */
            @media(width >=991px) and (width < 1340px) {
                max-width: none;
                margin-left: 78px;
                margin-right: 78px;
            }
        }

        /* Variante « dans la grille » (conteneur .container, ex. page architectes) :
           le panneau est déjà borné par la grille, on ne touche donc pas à sa
           largeur. Seule la rangée de cards est recalée sous le texte : le wrap
           porte 86px de padding à gauche et 87px à droite, et la rangée ajoute
           8px de gouttière (g-3) de chaque côté — d'où 86-8=78 et 87-8=79 pour
           que les cards tombent exactement sur l'axe du texte. */
        .container>.m-engagement__blocs {
            @media(width >=991px) {
                margin-left: 78px;
                margin-right: 79px;
            }
        }

        @media(width < 991px) {
            margin-left: inherit;
            margin-right: inherit;
        }
    }
}