{# text-image-split.html — Bloc 50/50 texte + image side-by-side.
   Pattern explainer récurrent — manquant dans la lib.
   Slots :
   {{EYEBROW}}
   {{H2_HTML}}                              — titre (HTML pour <span> accent)
   {{BODY_HTML}}                            — corps (HTML autorisé)
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton CTA (optionnel)
   {{IMG_SRC}} / {{IMG_ALT}}                — image
   Class modifiers :
   - `tis--reverse` sur <section> pour inverser (image gauche, texte droite)
#}

<section class="tis">
  <div class="tis__inner">
    <div class="tis__copy">
      <span class="tis__eyebrow">{{EYEBROW}}</span>
      <h2 class="tis__h2">{{H2_HTML}}</h2>
      <div class="tis__body">{{BODY_HTML}}</div>
      <a class="tis__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    </div>
    <div class="tis__media">
      <img src="{{IMG_SRC}}" alt="{{IMG_ALT}}" loading="lazy">
    </div>
  </div>
</section>

<style>
  .tis { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .tis__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .tis--reverse .tis__inner { direction: rtl; }
  .tis--reverse .tis__copy, .tis--reverse .tis__media { direction: ltr; }
  .tis__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
  .tis__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .tis__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; margin: 0; }
  .tis__h2 :where(span) { color: var(--color-accent, #ff2c7b); }
  .tis__body { font-size: 1.0625rem; line-height: 1.65; }
  .tis__body :where(p) { margin: 0 0 0.9rem; }
  .tis__body :where(strong) { color: var(--color-accent, #ff2c7b); font-weight: 700; }
  .tis__cta { background: var(--color-cta-bg, #111); color: var(--color-cta-text, #fff) !important; text-decoration: none; font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1rem; padding: 0.9rem 1.6rem; border-radius: 10px; margin-top: 0.5rem; }
  .tis__cta:hover { filter: saturate(.85); transform: scale(.97); }
  .tis__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
  @media (max-width: 900px) { .tis__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; } .tis--reverse .tis__inner { direction: ltr; } }
</style>