.m-image-texte {

  .m-image-texte__texte_wrap {
    padding: 2em;

    @media(991px < width) {
      padding: 1.5em 0;
    }
  }


  .m-image-texte__texte {
    margin: 2em 0;
  }

  &.is-style-rounded {
    .m-image-texte__image {
      img {
        border-radius: 20px;
      }
    }
  }

  &.is-style-epure {
    .m-image-texte__image {
      img {
        border-radius: 24px;
      }
    }

    .m-image-texte__texte {
      margin: 0;
    }
  }


  @media(991px > width) {
    .m-image-texte__texte_wrap {
      max-width: 100%;
      padding: 60px !important;
    }
  }

  @media(991px < width) {
    .m-image-texte__texte_wrap {
      padding: 2em;
    }
  }

  &.alignfull {
    .container-fluid {
      .col-texte .m-image-texte__texte_wrap {
        @media(width > 992px) {
          width: 70%;
          margin: 0 auto;
        }
      }
    }
  }


  &.m-image-texte--noimage {
    .m-image-texte__texte_wrap {
      padding-left: 0;
      padding-right: 0;
    }
  }

}

/* Image sits out of flow, matched to the text column's height (not the reverse). Only above the lg breakpoint — columns stack below it. */
@media (991px < width) {
  .m-image-texte__row--cover {
    position: relative;
  }

  .m-image-texte__row--cover .col-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .m-image-texte--droite .m-image-texte__row--cover .col-image {
    left: auto;
    right: 0;
  }

  /* La colonne image épouse la hauteur du texte : la photo la remplit en
     entier (recadrée) au lieu de s'arrêter à sa hauteur naturelle. */
  .m-image-texte__row--cover .m-image-texte__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Whatever theme color is picked, the panel only ever shows on the text
   column — never the full-width outer wrapper. */
.m-image-texte[class*="-background-color"] {
  background-color: transparent !important;
}

.m-image-texte[class*="-background-color"] .m-image-texte__wrap {
  border-radius: 24px;
  overflow: hidden;
}

.m-image-texte[class*="-background-color"] .row {
  margin-left: 0;
  margin-right: 0;
  align-items: stretch !important;
}

.m-image-texte[class*="-background-color"] .col-texte,
.m-image-texte[class*="-background-color"] .col-image {
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.m-image-texte[class*="-background-color"] .col-texte {
  background-color: var(--wp--preset--color--secondary);
}

.m-image-texte[class*="-background-color"] .m-image-texte__image {
  width: 100%;
  height: 100%;
}

.m-image-texte[class*="-background-color"] .m-image-texte__texte_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  height: 100%;
  padding: 129px;
}

.m-image-texte[class*="-background-color"] .m-image-texte__titre,
.m-image-texte[class*="-background-color"] .m-image-texte__texte {
  margin: 0;
  color: var(--wp--preset--color--base);
}

.m-image-texte[class*="-background-color"] .m-image-texte__texte ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: 1em 0;
}

.m-image-texte[class*="-background-color"] .m-image-texte__lien .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--secondary);
}

/* Mobile : même marge latérale que le container par défaut des blocs de la page d'accueil. */
@media (max-width: 767px) {
  .m-image-texte .container,
  .m-image-texte .container-fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
}

.m-image-texte.is-style-epure[class*="-background-color"] {
  background-color: transparent !important;
}

.m-image-texte.is-style-epure[class*="-background-color"] .col-texte {
  background-color: transparent !important;
}

.m-image-texte.is-style-epure .m-image-texte__texte_wrap {
  padding: 0;
}

.m-image-texte.is-style-epure.m-image-texte--gauche .m-image-texte__texte_wrap {
  padding-left: 143px;
}

.m-image-texte.is-style-epure.m-image-texte--droite .m-image-texte__texte_wrap {
  padding-right: 143px;
}

.m-image-texte.is-style-epure .m-image-texte__titre,
.m-image-texte.is-style-epure .m-image-texte__texte {
  color: var(--wp--preset--color--secondary);
}

@media (max-width: 1500px) {
  .m-image-texte[class*="-background-color"] .m-image-texte__texte_wrap {
    padding: 90px;
  }

  .m-image-texte.is-style-epure.m-image-texte--gauche .m-image-texte__texte_wrap {
    padding-left: 60px;
  }

  .m-image-texte.is-style-epure.m-image-texte--droite .m-image-texte__texte_wrap {
    padding-right: 100px;
  }
}


@media (max-width: 1200px) {
  .m-image-texte[class*="-background-color"] .m-image-texte__texte_wrap {
    padding: 70px;
  }
}

@media (max-width: 767px) {
  .m-image-texte.is-style-epure .m-image-texte__texte_wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.m-image-texte__image {
  height: 100%;
}

.m-image-texte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lightbox */
.m-image-texte-galerie {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 43, 63, .95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.m-image-texte-galerie.is-open {
  opacity: 1;
  pointer-events: auto;
}

.m-image-texte-galerie__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 100px;
}

.m-image-texte-galerie__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  opacity: 1;
  transition: opacity .15s ease;
}

.m-image-texte-galerie__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-image-texte-galerie__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-image-texte-galerie__nav--prev {
  left: 24px;
}

.m-image-texte-galerie__nav--next {
  right: 24px;
}

@media (max-width: 767px) {
  .m-image-texte-galerie__stage {
    padding: 80px 24px;
  }

  .m-image-texte-galerie__nav {
    width: 44px;
    height: 44px;
  }

  .m-image-texte-galerie__nav--prev {
    left: 8px;
  }

  .m-image-texte-galerie__nav--next {
    right: 8px;
  }
}
/* 3D viewer (iframe), same overlay as the gallery lightbox */
.m-image-texte-vue3d {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 43, 63, .95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.m-image-texte-vue3d.is-open {
  opacity: 1;
  pointer-events: auto;
}

.m-image-texte-vue3d__stage {
  width: 100%;
  height: 100%;
  padding: 88px 48px 48px;
}

.m-image-texte-vue3d__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  background-color: #fff;
}

.m-image-texte-vue3d__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 767px) {
  .m-image-texte-vue3d__stage {
    padding: 80px 12px 12px;
  }
}