{# OSEP — Stepper du wizard de création de projet
   Paramètre :
     - currentStep (int, requis) : 1, 2 ou 3
   Le stepper est purement visuel ; les étapes "done" ne sont pas cliquables
   afin de ne pas casser la cohérence du flux (un projet créé ne se "dé-crée"
   pas en revenant à l'étape 1).
#}
{% set currentStep = currentStep ?? 1 %}

<div class="osep-wizard-stepper" role="navigation" aria-label="Étapes de création du projet">
    <div class="steps">

        {# === Étape 1 — Détails === #}
        <div class="step {{ currentStep == 1 ? 'active' : (currentStep > 1 ? 'done' : '') }}">
            <div class="num">
                {% if currentStep > 1 %}<i class="mdi mdi-check"></i>{% else %}1{% endif %}
            </div>
            <div class="body">
                <div class="lbl">Étape 1 / 3</div>
                <div class="ttl">Détails du projet</div>
            </div>
        </div>

        <div class="connector {{ currentStep > 1 ? 'done' : '' }}"></div>

        {# === Étape 2 — Budget === #}
        <div class="step {{ currentStep == 2 ? 'active' : (currentStep > 2 ? 'done' : '') }}">
            <div class="num">
                {% if currentStep > 2 %}<i class="mdi mdi-check"></i>{% else %}2{% endif %}
            </div>
            <div class="body">
                <div class="lbl">Étape 2 / 3</div>
                <div class="ttl">Lignes budgétaires</div>
            </div>
        </div>

        <div class="connector {{ currentStep > 2 ? 'done' : '' }}"></div>

        {# === Étape 3 — Réglages === #}
        <div class="step {{ currentStep == 3 ? 'active' : '' }}">
            <div class="num">3</div>
            <div class="body">
                <div class="lbl">Étape 3 / 3</div>
                <div class="ttl">Réglages &amp; flux</div>
            </div>
        </div>

    </div>
</div>