{# ai-prompt-feature.html — Bloc feature IA conversationnelle : titre + lead + faux champ + CTA lien.
   Zéro JS — le "champ" est purement visuel, le CTA est un lien classique vers l'app IA.
   Slots :
   {{EYEBROW}}                     — "Nouveau" / "IA" / "Conseil 24/7"
   {{H2_HTML}}                     — titre
   {{LEAD}}                        — paragraphe d'intro
   {{PROMPT_PLACEHOLDER}}          — texte visuel dans le champ (ex. "Pose ta question…")
   {{CTA_LABEL}} / {{CTA_HREF}}    — bouton lien vers l'app IA
   {{HINT}}                        — micro-ligne d'astuce sous le champ (optionnel)
#}

<section class="apf">
  <div class="apf__inner">
    <span class="apf__eyebrow">{{EYEBROW}}</span>
    <h2 class="apf__h2">{{H2_HTML}}</h2>
    <p class="apf__lead">{{LEAD}}</p>
    <div class="apf__form" role="group" aria-label="Démarrer une conversation">
      <span class="apf__input" aria-hidden="true">{{PROMPT_PLACEHOLDER}}</span>
      <a class="apf__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    </div>
    <span class="apf__hint">{{HINT}}</span>
  </div>
</section>

<style>
  .apf { background: var(--color-bg-alt, #f5f5f5); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .apf__inner { max-width: 48rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .apf__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .apf__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0; }
  .apf__lead { font-size: 1.125rem; line-height: 1.55; margin: 0; max-width: 36rem; }
  .apf__form {
    width: 100%; display: flex; gap: 0.5rem;
    background: var(--color-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--color-fg, #111) 12%, transparent);
    border-radius: 999px; padding: 0.4rem; margin-top: 0.75rem;
    align-items: center;
  }
  .apf__input { flex: 1; padding: 0.85rem 1.25rem; opacity: 0.55; text-align: left; min-width: 0; }
  .apf__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.85rem 1.5rem; border-radius: 999px;
    transition: filter .2s, transform .2s; white-space: nowrap;
  }
  .apf__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .apf__hint { font-size: 0.875rem; opacity: 0.7; }
  @media (max-width: 600px) {
    .apf__form { flex-direction: column; border-radius: 16px; }
    .apf__cta { width: 100%; text-align: center; }
    .apf__input { text-align: center; padding: 0.5rem 1rem; }
  }
</style>