{# templates/_organisms/step-layout/step-layout.html.twig
 #
 # Layout centré pour toutes les étapes d'inscription et de bienvenue.
 # Remplace auth-layout (split-screen) par un layout single-column épuré.
 #
 # Paramètres :
 # | Nom            | Type   | Défaut | Description                              |
 # |----------------|--------|--------|------------------------------------------|
 # | currentStep    | int    | null   | Étape courante (pour barre de progression)|
 # | totalSteps     | int    | null   | Nombre total d'étapes                    |
 # | showProgress   | bool   | false  | Afficher la barre de progression         |
 # | backUrl        | string | null   | URL du lien retour (← Retour)            |
 # | backLabel      | string | '← Retour' | Label du lien retour               |
 #}
{% set showProgress = showProgress ?? false %}
{% set backUrl = backUrl ?? null %}
{% set backLabel = backLabel ?? '← Retour' %}
{% set cardClass = cardClass ?? 'w-full max-w-md' %}
{% set blobColor = blobColor ?? 'var(--color-primary)' %}
<div class="min-h-screen flex flex-col items-center justify-center px-4 py-3 sm:py-6 bg-gray-50 relative overflow-hidden" data-turbo="false">

    {# Spots décoratifs — style hero Moodia #}
    <div style="position:absolute;width:700px;height:700px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, {{ blobColor }} 28%, transparent) 0%,transparent 70%);top:-250px;right:-200px;"></div>
    <div style="position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, {{ blobColor }} 22%, transparent) 0%,transparent 70%);top:-180px;left:-200px;"></div>
    <div style="position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb, {{ blobColor }} 12%, transparent) 0%,transparent 70%);bottom:-120px;left:50%;transform:translateX(-50%);"></div>

    {# Logo — absolu en haut pour ne pas décaler le centrage du contenu #}
    <div class="absolute top-10 sm:top-8 inset-x-0 flex justify-center z-10">
        {% block logo %}
        <a href="{{ path('app_landing') }}" class="inline-flex scale-75 sm:scale-100">
            {% include '_atoms/logo/logo-with-text.html.twig' with {
                showBadge: false, size: 'lg'
            } only %}
        </a>
        {% endblock %}
    </div>

    {# Contenu principal — centré sur le viewport entier #}
    <div class="flex flex-col items-center w-full relative z-10 pt-28 sm:pt-0">

        {# Titre + sous-titre au-dessus de la carte #}
        {% block heading %}{% endblock %}

        {# Card principale #}
        <div class="{{ cardClass }}">
            {% block card %}{% endblock %}
        </div>

        {# Lien retour ou footer #}
        {% if backUrl %}
            <div class="mt-6 text-sm text-gray-500">
                {% if backText is defined and backAction is defined %}
                    {{ backText }} <a href="{{ backUrl }}" class="text-primary font-semibold hover:underline transition-colors">{{ backAction }}</a>
                {% else %}
                    <a href="{{ backUrl }}" class="hover:text-gray-700 transition-colors">{{ backLabel }}</a>
                {% endif %}
            </div>
        {% endif %}

    </div>

    {# Contenu ancré en bas de l'écran #}
    {% block bottom %}{% endblock %}

</div>