{% set variant = variant|default('surface') %}
{% set back_label = back_label|default('Retour') %}
<header class="page-nav-reveal mb-6
    {% if variant == 'surface' %}
        sticky top-0 z-30 pt-[max(0.35rem,var(--safe-top))] pb-3 backdrop-blur-xl bg-stone-50/92 dark:bg-stone-950/90 border-b border-stone-200/80 dark:border-stone-800/80 shadow-sm shadow-stone-900/5 dark:shadow-black/20
    {% elseif variant == 'glass' %}
        sticky top-0 z-30 pt-[max(0.35rem,var(--safe-top))] pb-3 backdrop-blur-xl bg-stone-950/35 border-b border-white/10
    {% else %}
        pt-[max(0.25rem,var(--safe-top))] pb-1
    {% endif %}">
    <div class="flex items-start gap-3 min-h-[2.75rem]
        {% if variant == 'hero' or variant == 'glass' %}text-white{% else %}text-stone-900 dark:text-stone-50{% endif %}">
        {% if back_href is defined and back_href %}
            <a href="{{ back_href }}"
               class="shrink-0 mt-0.5 flex size-10 items-center justify-center rounded-xl transition-colors
                   {% if variant == 'surface' %}
                       bg-stone-200/90 text-stone-700 hover:bg-stone-300/90 dark:bg-stone-800 dark:text-stone-200 dark:hover:bg-stone-700
                   {% else %}
                       bg-white/12 text-white border border-white/18 hover:bg-white/20
                   {% endif %}">
                <span class="sr-only">{{ back_label }}</span>
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
                </svg>
            </a>
        {% endif %}
        <div class="flex-1 min-w-0 pt-0.5">
            {% if eyebrow is defined and eyebrow %}
                <p class="text-[10px] font-bold uppercase tracking-widest mb-1
                    {% if variant == 'hero' %}text-white/55{% elseif variant == 'glass' %}text-white/50{% else %}text-stone-500 dark:text-stone-400{% endif %}">
                    {{ eyebrow }}
                </p>
            {% endif %}
            <h1 class="font-bold leading-tight {% if variant == 'hero' or variant == 'glass' %}text-3xl{% else %}text-xl sm:text-2xl{% endif %}">
                {{ title }}
            </h1>
            {% if subtitle is defined and subtitle %}
                <p class="text-sm mt-1
                    {% if variant == 'hero' %}text-white/45{% elseif variant == 'glass' %}text-white/40{% else %}text-stone-500 dark:text-stone-400{% endif %}">
                    {{ subtitle }}
                </p>
            {% endif %}
        </div>
        {% block trailing %}{% endblock %}
    </div>
</header>