{# Progress Steps Moderne #}
<div class="progress-steps">
    <div class="progress-step progress-step--active" data-moodia--stepper-target="stepIndicator" data-step="1">
        <div class="progress-step__circle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
            </svg>
        </div>
        <div class="progress-step__label">Document</div>
    </div>
    <div class="progress-step__line"></div>
    <div class="progress-step" data-moodia--stepper-target="stepIndicator" data-step="2">
        <div class="progress-step__circle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m-6-7H0m6 0h6m6 0h6"/>
            </svg>
        </div>
        <div class="progress-step__label">Configuration</div>
    </div>
    <div class="progress-step__line"></div>
    <div class="progress-step" data-moodia--stepper-target="stepIndicator" data-step="3">
        <div class="progress-step__circle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
            </svg>
        </div>
        <div class="progress-step__label">Génération</div>
    </div>
    <div class="progress-step__line"></div>
    <div class="progress-step" data-moodia--stepper-target="stepIndicator" data-step="4">
        <div class="progress-step__circle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
            </svg>
        </div>
        <div class="progress-step__label">Aperçu</div>
    </div>
    <div class="progress-step__line"></div>
    <div class="progress-step" data-moodia--stepper-target="stepIndicator" data-step="5">
        <div class="progress-step__circle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/>
            </svg>
        </div>
        <div class="progress-step__label">Déploiement</div>
    </div>
</div>