{# hero.html — titre + accent line + lead + (optionnel) sous-lead.
   Slots (à remplacer à l'instanciation) :
   {{HERO_TITLE}}      — h1 principal (ex. "La masterclass")
   {{HERO_LEAD}}       — paragraphe court (1-2 phrases)
   {{HERO_SUBLEAD}}    — paragraphe secondaire (optionnel, peut être vide)
#}

<section class="hero">
  <h1 class="hero__title">{{HERO_TITLE}}</h1>
  <span class="hero__accent"></span>
  <p class="hero__lead">{{HERO_LEAD}}</p>
  <p class="hero__sublead">{{HERO_SUBLEAD}}</p>
</section>

<style>
  .hero {
    max-width: var(--max-width-small);
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0 2rem;
  }
  .hero__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    color: var(--color-fg);
  }
  .hero__accent {
    display: inline-block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin-bottom: 2rem;
  }
  .hero__lead {
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    color: var(--color-fg);
  }
  .hero__sublead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.55;
    opacity: 0.85;
    color: var(--color-fg);
  }
  @media (max-width: 600px) {
    .hero { padding: 2rem 0 1.5rem; }
    .hero__lead { font-size: 1.125rem; }
  }
</style>