{{ define "main" }}
<div class="home">
  <section class="hero" aria-labelledby="hero-title">
    <div class="hero__bg" aria-hidden="true"></div>
    <div class="hero__river" aria-hidden="true">
      <img src="{{ "images/app/river.png" | relURL }}" alt="" width="1400" height="400" decoding="async">
    </div>
    <div class="hero__inner">
      <p class="hero__brand">P'titsPas</p>
      <h1 id="hero-title" class="hero__title">{{ .Title }}</h1>
      {{ with .Params.hero_tagline }}
      <p class="hero__tagline">{{ . }}</p>
      {{ end }}
      <p class="hero__actions">
        <a class="btn btn--pill" href="{{ .Params.cta_primary_url | default "/contact/" | relURL }}">{{ .Params.cta_primary | default "Demander une démonstration" }}</a>
      </p>
    </div>
  </section>

  <section class="section experiences" aria-labelledby="exp-title">
    <div class="section__inner">
      <h2 id="exp-title">Trois expériences. Une même plateforme.</h2>
      <p class="section__lead">Sur le terrain, chacun a son parcours — la collectivité garde la vision d'ensemble.</p>
      <ul class="exp-grid">
        <li class="exp-card">
          <h3>Gestionnaires de RPE</h3>
          <p>Agenda, dossiers, messagerie, événements — un seul outil. Fini le jonglage WhatsApp, SMS, Outlook et Telegram.</p>
          <a href="{{ "fonctionnalites/" | relURL }}#rpe">Voir le quotidien RPE</a>
        </li>
        <li class="exp-card">
          <h3>Assistantes maternelles</h3>
          <p>Contrats, absences et congés regroupés. Plus besoin d'un deuxième téléphone pour séparer le pro et le perso.</p>
          <a href="{{ "fonctionnalites/" | relURL }}#am">Voir le quotidien AM</a>
        </li>
        <li class="exp-card">
          <h3>Parents</h3>
          <p>Recherche simple selon le besoin, sans notation ni classement opaque. Plus de listes papier périmées.</p>
          <a href="{{ "fonctionnalites/" | relURL }}#parents">Voir le côté parents</a>
        </li>
      </ul>
    </div>
  </section>

  <section class="section pilotage-teaser" aria-labelledby="pil-title">
    <div class="section__inner section__inner--narrow">
      <h2 id="pil-title">Et pour votre collectivité, enfin une vision d'ensemble.</h2>
      <p>Places, disponibilités, projections liées à l'entrée à l'école : sortez de la collecte fastidieuse. P'titsPas est conçu pour centraliser ces indicateurs et les exporter pour votre pilotage.</p>
      <p class="hero__actions">
        <a class="btn btn--pill btn--secondary" href="{{ "pilotage/" | relURL }}">Découvrir le pilotage</a>
      </p>
    </div>
  </section>

  <section class="section confiance" aria-labelledby="conf-title">
    <div class="section__inner">
      <h2 id="conf-title">Installée chez vous. Pas un SaaS cloud.</h2>
      <p class="section__lead">P'titsPas s'installe chez la collectivité (on-premise). Vos données restent sous votre maîtrise — souveraineté des données, service public, pas un cloud opaque.</p>
      <ul class="principes">
        <li><strong>Neutralité</strong> — pas de notation, pas de préférence algorithmique</li>
        <li><strong>Équité</strong> — le même outil pour tout le territoire</li>
        <li><strong>Transparence</strong> — parcours lisibles et tracés</li>
        <li><strong>Accessibilité</strong> — téléphone, tablette et ordinateur</li>
      </ul>
      <p class="hero__actions">
        <a class="btn btn--pill" href="{{ "contact/" | relURL }}">Demander une démonstration</a>
        <a class="btn btn--text" href="{{ "pourquoi-ptitspas/" | relURL }}">Pourquoi P'titsPas</a>
      </p>
    </div>
  </section>
</div>
{{ end }}