{# hero-offer-cta.html — Hero promo : eyebrow + h1 + offre + CTA + visuel droit.
   Variante riche de hero.html (qui reste un hero centré minimaliste).
   Slots :
   {{EYEBROW}}                      — petite ligne au-dessus du h1 (ex. "Coaching premium")
   {{H1_HTML}}                      — gros titre (HTML autorisé pour <span> accent)
   {{OFFER_HTML}}                   — paragraphe offre (HTML, ex. "<strong>90 jours gratuits</strong> avec…")
   {{CTA_LABEL}} / {{CTA_HREF}}     — bouton principal
   {{IMG_SRC}} / {{IMG_ALT}}        — visuel droit
#}

<section class="hofc">
  <div class="hofc__inner">
    <div class="hofc__copy">
      <span class="hofc__eyebrow">{{EYEBROW}}</span>
      <h1 class="hofc__h1">{{H1_HTML}}</h1>
      <p class="hofc__offer">{{OFFER_HTML}}</p>
      <a class="hofc__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    </div>
    <div class="hofc__media">
      <img src="{{IMG_SRC}}" alt="{{IMG_ALT}}" loading="eager">
    </div>
  </div>
</section>

<style>
  .hofc { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .hofc__inner { max-width: 90rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .hofc__copy { display: flex; flex-direction: column; gap: 1.5rem; }
  .hofc__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.875rem; font-weight: 600; color: var(--color-accent, #ff2c7b); }
  .hofc__h1 {
    font-family: var(--font-heading, inherit); font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0;
  }
  .hofc__offer { font-size: 1.15rem; line-height: 1.55; margin: 0; }
  .hofc__cta {
    align-self: flex-start;
    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: 1.125rem; padding: 1rem 1.75rem; border-radius: 10px;
    transition: transform .25s, filter .25s;
  }
  .hofc__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .hofc__media img { width: 100%; height: auto; border-radius: 12px; display: block; aspect-ratio: 4/5; object-fit: cover; }
  @media (max-width: 900px) {
    .hofc__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.25rem; }
    .hofc__media { order: -1; }
  }
</style>