{# hero-intro-portrait.html — Hero narratif : eyebrow + h1 + lead + portrait droit + CTA + lien.
   Variante de hero-offer-cta : ton "présentation coach + signature", pas commercial.
   Slots :
   {{EYEBROW}}                              — petite ligne (ex. "Méthode A.R.C.H.I")
   {{H1_HTML}}                              — gros titre (HTML pour <span> accent)
   {{LEAD}}                                 — paragraphe pitch
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton CTA principal
   {{LINK_LABEL}} / {{LINK_HREF}}           — lien secondaire (text-only)
   {{PORTRAIT_SRC}} / {{PORTRAIT_ALT}}      — portrait droit
   {{SIGNATURE}}                            — signature manuscrite (texte italique)
#}

<section class="hip">
  <div class="hip__inner">
    <div class="hip__copy">
      <span class="hip__eyebrow">{{EYEBROW}}</span>
      <h1 class="hip__h1">{{H1_HTML}}</h1>
      <p class="hip__lead">{{LEAD}}</p>
      <div class="hip__ctas">
        <a class="hip__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
        <a class="hip__link" href="{{LINK_HREF}}">{{LINK_LABEL}} →</a>
      </div>
      <p class="hip__signature">{{SIGNATURE}}</p>
    </div>
    <div class="hip__media">
      <img src="{{PORTRAIT_SRC}}" alt="{{PORTRAIT_ALT}}" loading="eager">
    </div>
  </div>
</section>

<style>
  .hip { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .hip__inner { max-width: 90rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
  .hip__copy { display: flex; flex-direction: column; gap: 1.5rem; }
  .hip__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .hip__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; }
  .hip__lead { font-size: 1.2rem; line-height: 1.55; margin: 0; max-width: 36rem; }
  .hip__ctas { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .hip__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: 1rem 1.75rem; border-radius: 10px; transition: transform .25s, filter .25s; }
  .hip__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .hip__link { color: var(--color-fg, #111); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; font-size: 0.95rem; }
  .hip__signature { font-family: var(--font-heading, inherit); font-style: italic; font-size: 1.05rem; opacity: 0.7; margin: 0; }
  .hip__media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; display: block; }
  @media (max-width: 900px) { .hip__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.25rem; } .hip__media { order: -1; max-width: 22rem; margin: 0 auto; } }
</style>