/* =========================================================
   BLOCK — Texte - Image
========================================================= */

.texte-image{
  width: 100%;
  padding: 34px 0;
  background: var(--ti-bg);
  /* overflow: hidden;  */
}

/* =========================================================
   THEME
========================================================= */

.texte-image.is-theme-dark{
  --ti-text: var(--color-blanc);
  --ti-muted: var(--color-blanc-fonce);
  --ti-bg: var(--color-noir);
  --ti-quote-bg: var(--color-gris);
}

.texte-image.is-theme-light{
  --ti-text: var(--color-noir);
  --ti-muted: var(--color-noir);
  --ti-bg: transparent;
  --ti-quote-bg: var(--color-blanc);
}

/* =========================================================
   VARIABLES LAYOUT
   - largeur image + gap garanti
========================================================= */

.texte-image{
  --ti-media-w: clamp(280px, 40vw, 420px);
  --ti-gap: 42px;

  /* ✅ taille image en mobile (centrée, jamais trop grande) */
  --ti-media-w-mobile: clamp(220px, 70vw, 340px);
}

/* =========================================================
   GRID (sert d’ancrage à l’image absolute)
========================================================= */

.texte-image__grid{
  position: relative; /* ✅ CRITIQUE : ancre l'image pour CHAQUE bloc */
  min-height: 1px;
}

/* =========================================================
   CONTAINER
========================================================= */

.texte-image__container{
  max-width: var(--layout-wide-size);
  margin: 0 auto;
  padding: 0 20px;
}

/* ✅ Réserve anti-chevauchement :
   - image gauche => on pousse le contenu du container vers la droite
   - image droite => on pousse le contenu du container vers la gauche
*/
@media (min-width: 681px){
  .texte-image.is-image-left .texte-image__container{
    padding-left: calc(20px + var(--ti-media-w) + var(--ti-gap));
    padding-right: 20px;
  }

  .texte-image.is-image-right .texte-image__container{
    padding-right: calc(20px + var(--ti-media-w) + var(--ti-gap));
    padding-left: 20px;
  }
}

/* =========================================================
   IMAGE (hors flow, collée au bord du bloc)
========================================================= */

.texte-image__media{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ti-media-w);
  display: block;
  pointer-events: none;
}

/* ✅ Frame qui garantit un carré */
.texte-image__media-frame{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* l'image remplit le carré */
.texte-image__media-frame img{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  object-position: center;
}

/* position selon orientation */
.texte-image.is-image-left  .texte-image__media{ left: -50px; }
.texte-image.is-image-right .texte-image__media{ right: -50px; }

/* carré / rond */
.texte-image.is-image-square .texte-image__media-frame{ border-radius: 0; }
.texte-image.is-image-round  .texte-image__media-frame{ border-radius: 999px; }

.texte-image.is-image-square .texte-image__media-frame img{ object-fit: contain; }
.texte-image.is-image-round  .texte-image__media-frame img{ object-fit: cover; }

/* =========================================================
   CONTENT (reste normal dans le container)
========================================================= */

.texte-image__content{
  max-width: 70ch;
  min-width: 0;
  padding: 30px 0;
}

/* =========================================================
   KICKER + QUOTE
========================================================= */

.texte-image__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-transform: uppercase;
  color: var(--ti-text);
  font-size: var(--font-size-s, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.texte-image__quote{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  line-height: 45px;
  padding-top: 17px;
  border-radius: 4px;
  background: var(--ti-quote-bg);
  color: var(--page-accent);
}

/* =========================================================
   TYPO
========================================================= */

.texte-image__title, .texte-image__title p{
  margin: 0 0 14px;
  color: var(--ti-text);
  font-size: var(--font-size-xxl, 40px);
  font-weight: 400;
  line-height: 1.1;
}

.texte-image__text, .texte-image__text p{
  color: var(--ti-muted);
  font-size: var(--font-size-s, 15px);
  line-height: 1.6;
  max-width: 90ch;
}

.texte-image__text p{ margin: 0 0 12px; }
.texte-image__text p:last-child{ margin-bottom: 0; }

.texte-image__cta{ margin-top: 18px; }

/* =========================================================
   LIENS (Repeater ACF)
========================================================= */

.texte-image__content > div > a:not(.btn_primary):not(.btn_secondary){
  display: inline-block;
  text-decoration: none;
  transition: color .2s ease;
}

/* Mode clair */
.texte-image.is-theme-light .texte-image__content > div > a:not(.btn_primary):not(.btn_secondary){
  color: var(--color-noir);
}
.texte-image.is-theme-light .texte-image__content > div > a:not(.btn_primary):not(.btn_secondary):hover{
  color: var(--page-accent);
}

/* Mode sombre */
.texte-image.is-theme-dark .texte-image__content > div > a:not(.btn_primary):not(.btn_secondary){
  color: var(--color-blanc);
}
.texte-image.is-theme-dark .texte-image__content > div > a:not(.btn_primary):not(.btn_secondary):hover{
  color: var(--page-accent);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px){
  .texte-image{
    --ti-media-w: clamp(240px, 42vw, 360px);
    --ti-gap: 30px;
  }
}

/* ✅ Mobile : image en flow, centrée avant le texte, jamais trop grande */
@media (max-width: 680px){
  .texte-image{
    padding: 26px 0;
    --ti-gap: 18px;
  }

  /* reset réserve container en mobile */
  .texte-image__container{
    padding: 0 20px;
  }

  /* ✅ on repasse en flow */
  .texte-image__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* ✅ l'image n'est plus absolute et passe avant le texte */
  .texte-image__media{
    position: static;
    transform: none;
    width: var(--ti-media-w-mobile);
    max-width: var(--ti-media-w-mobile);
    margin: 0 auto;
    display: block;
    order: -1; /* avant le container, quelle que soit l’orientation desktop */
  }

  /* ✅ sécurité : le frame suit la taille définie */
  .texte-image__media-frame{
    width: 100%;
  }

  .texte-image__content{
    max-width: none;
    padding: 0;
  }

  .texte-image__title{
    font-size: var(--font-size-xl, 32px);
  }
}