{# about-coach.html — Bio coach : photo gauche + h2 + lead + 3 stats + CTA.
   Slots :
   {{PHOTO_SRC}} / {{PHOTO_ALT}}
   {{EYEBROW}}                                — "À propos" / "Le coach"
   {{H2_HTML}}                                — titre
   {{BIO_HTML}}                               — paragraphe bio (HTML autorisé pour <p>, <strong>)
   {{STAT_1_VALUE}} / {{STAT_1_LABEL}}        — × 3
   {{STAT_2_VALUE}} / {{STAT_2_LABEL}}
   {{STAT_3_VALUE}} / {{STAT_3_LABEL}}
   {{CTA_LABEL}} / {{CTA_HREF}}               — bouton
#}

<section class="abc">
  <div class="abc__inner">
    <div class="abc__media">
      <img src="{{PHOTO_SRC}}" alt="{{PHOTO_ALT}}" loading="lazy">
    </div>
    <div class="abc__copy">
      <span class="abc__eyebrow">{{EYEBROW}}</span>
      <h2 class="abc__h2">{{H2_HTML}}</h2>
      <div class="abc__bio">{{BIO_HTML}}</div>
      <ul class="abc__stats">
        <li><span class="abc__val">{{STAT_1_VALUE}}</span><span class="abc__lab">{{STAT_1_LABEL}}</span></li>
        <li><span class="abc__val">{{STAT_2_VALUE}}</span><span class="abc__lab">{{STAT_2_LABEL}}</span></li>
        <li><span class="abc__val">{{STAT_3_VALUE}}</span><span class="abc__lab">{{STAT_3_LABEL}}</span></li>
      </ul>
      <a class="abc__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    </div>
  </div>
</section>

<style>
  .abc { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .abc__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 0.45fr 0.55fr; gap: 4rem; align-items: center; }
  .abc__media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; display: block; }
  .abc__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
  .abc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .abc__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
  .abc__bio { font-size: 1.05rem; line-height: 1.6; }
  .abc__bio :where(p) { margin: 0 0 0.75rem; }
  .abc__stats { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; }
  .abc__stats li { display: flex; flex-direction: column; gap: 0.25rem; }
  .abc__val { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-accent, #ff2c7b); }
  .abc__lab { font-size: 0.85rem; opacity: 0.75; }
  .abc__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: 1.05rem; padding: 0.95rem 1.75rem; border-radius: 10px; }
  @media (max-width: 900px) { .abc__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; } .abc__stats { gap: 1.5rem; } }
</style>