{{ define "main" }}
<div class="hn-home">
    <section class="hn-hero" aria-label="Accroche">
        <p class="hn-hero__kicker">{{ .Params.hero_tagline | default "Plateforme publique — petite enfance" }}</p>
        <h1>{{ .Title }}</h1>
        <div class="hn-hero__visual">
            <img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="900" height="560" fetchpriority="high">
        </div>
    </section>
    <div class="hn-dual">
        <div class="hn-panel hn-prose">
            {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
        </div>
        <aside class="hn-ethics" aria-label="Engagements">
            <h2>Principes</h2>
            <ul>
                {{ range .Params.ethics }}
                <li><strong>{{ .title }}</strong>{{ .detail }}</li>
                {{ end }}
            </ul>
        </aside>
    </div>
    <section class="hn-constellation">
        <div class="hn-constellation-inner hn-prose">
            {{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
        </div>
    </section>
    <section class="hn-cta" aria-labelledby="hn-cta-title">
        <h2 id="hn-cta-title">{{ .Params.cta_title | default "Échanger avec nous" }}</h2>
        <p>Parcours clair · données maîtrisées · service public</p>
        <div>
            <a class="hn-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
            <a class="hn-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
        </div>
    </section>
</div>
{{ end }}