{{ define "main" }}
<div class="home">
    <section class="home-hero">
        {{ partial "home-path-motif.html" . }}
        <div class="home-hero__inner">
            <div class="home-hero__media">
                <img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="1200" height="630" fetchpriority="high">
            </div>
            <div class="home-hero__copy">
                <h1 class="home-hero__title">{{ .Title }}</h1>
                {{ with .Params.hero_tagline }}<p class="accroche">{{ . }}</p>{{ end }}
            </div>
        </div>
    </section>

    <div class="home-bento">
        <article class="home-card home-card--intro">
            {{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
        </article>
        <aside class="home-card home-card--ethics" aria-label="Engagements">
            <h2 class="visually-hidden">Nos engagements</h2>
            <ol class="ethics-steps">
                {{ range .Params.ethics }}
                <li>
                    <strong>{{ .title }}</strong>
                    {{ .detail }}
                </li>
                {{ end }}
            </ol>
        </aside>
    </div>

    <section class="home-why">
        {{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
    </section>

    <section class="home-cta" aria-labelledby="home-cta-title">
        <h2 id="home-cta-title" class="visually-hidden">Actions</h2>
        {{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }}
        <div>
            <a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a>
            <a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a>
        </div>
    </section>
</div>
{{ end }}