.m-image-texte {

  .m-image-texte__titre {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .m-image-texte__texte {

    .encadre-gris {
      padding: 15px;
      margin: 16px 0;
      border-radius: 10px 5px 5px 5px;
      background-color: #F4F4F4;

      p {
        margin: 0;
      }
    }

    ol,
    ul {
      padding-inline-start: 25px !important;
    }
  }

  .col-image {
    align-self: stretch;

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

      @media(width < 992px) {
        max-height: 400px;
      }

      &.m-image-texte__image--points {
        @media(width < 768px) {
          height: auto;
          max-height: none;
          margin-top: 20px;
        }
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 24px;

        @media(width < 992px) {
          max-height: 400px;
        }
      }
    }
  }

  .m-image-texte__liens {
    margin-top: 16px;
  }

  .m-image-texte__image--points {
    position: relative;

    @media(width < 992px) {
      margin-top: 60px;
    }

    @media(width < 768px) {
      margin-top: 0;
    }

    img {
      border-radius: 24px;
    }
  }

  .m-image-texte__points {
    position: absolute;
    inset: 0;

    @media(width < 768px) {
      position: static;
      inset: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }
  }

  .m-image-texte__point {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.30) 100%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(16px);
    max-width: 421px;
    text-align: left;

    @media(width < 768px) {
      position: static;
      max-width: 100%;
      border-color: transparent;
      background: #F4F4F4;
      backdrop-filter: none;
    }
  }

  .m-image-texte__point--1 {
    top: -40px;
    right: -117px;

      @media(width < 1500px) {
        right: -30px;
      }

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

  .m-image-texte__point--2 {
    top: 53px;
    left: -33px;

    @media(width < 768px) {
      top: auto;
      left: auto;
    }
  }

  .m-image-texte__point--3 {
    bottom: 53px;
    left: -33px;

    @media(width < 768px) {
      bottom: auto;
      left: auto;
    }
  }

  .m-image-texte__point--4 {
    bottom: -40px;
    right: -117px;

    @media(width < 1500px) {
      right: -30px;
    }

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

  .m-image-texte__point-icone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 8px;
    background: var(--wp--preset--color--primary);
    box-shadow: 0 4px 16px 0 rgba(233, 91, 33, 0.24);
    flex-shrink: 0;
    width: 56px;
    padding: 12px;
    margin: 6px 0 6px 6px;

    img {
      width: 24px !important;
      height: auto !important;
      border-radius: 0 !important;
      object-fit: contain !important;
    }
  }
  
  .m-image-texte__point-texte {
    margin: 6px 12px 6px 0;
  }

  .m-image-texte__point-titre {
    color: var(--wp--preset--color--main);
    font-size: 12px;
    font-weight: var(--wp--custom--font-weight--semi-bold);
    margin-bottom: 2px;
    margin-top: 0;
  }

  .m-image-texte__point-desc {
    color: var(--wp--preset--color--main);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
  }

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

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

  &.has-secondary-background-color {
    .m-image-texte__titre {
      color: #fff;
    }
  }

  &.m-image-texte--under,
  &.m-image-texte--above {
    .m-image-texte__texte_wrap {
      padding-left: 0;
      padding-right: 0;
    }

    .m-image-texte__image {
      img {
        width: 100%;
        max-height: 450px;
        object-fit: cover;
      }
    }
  }

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