{# Widget « Étapes / Processus » — « Comment ça marche » en étapes numérotées. #}

<div class="izi-steps izi-steps--{{ orientation }}" style="--izi-steps-accent: {{ accentColor }};">
    {% for step in steps %}
        <div class="izi-steps__item">
            <span class="izi-steps__marker">
                {% if showNumbers %}
                    {{ loop.index }}
                {% else %}
                    <i class="fa-solid {{ step.icon|default('fa-check') }}" aria-hidden="true"></i>
                {% endif %}
            </span>
            {% if not loop.last %}<span class="izi-steps__connector" aria-hidden="true"></span>{% endif %}
            <div class="izi-steps__body">
                {% if step.title|default('') %}
                    <h3 class="izi-steps__title">{{ step.title }}</h3>
                {% endif %}
                {% if step.description|default('') %}
                    <p class="izi-steps__description">{{ step.description }}</p>
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>

<style>
    .izi-steps {
        display: flex;
        gap: 32px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .izi-steps--horizontal {
        flex-direction: row;
        text-align: center;
    }

    .izi-steps--vertical {
        flex-direction: column;
        max-width: 700px;
    }

    .izi-steps__item {
        position: relative;
        flex: 1;
        display: flex;
        gap: 16px;
    }

    .izi-steps--horizontal .izi-steps__item {
        flex-direction: column;
        align-items: center;
    }

    .izi-steps--vertical .izi-steps__item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding-bottom: 28px;
    }

    .izi-steps__marker {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--izi-steps-accent);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        z-index: 1;
    }

    .izi-steps__connector {
        position: absolute;
        background: color-mix(in srgb, var(--izi-steps-accent) 30%, transparent);
    }

    .izi-steps--horizontal .izi-steps__connector {
        top: 26px;
        left: calc(50% + 36px);
        width: calc(100% - 72px);
        height: 2px;
    }

    .izi-steps--vertical .izi-steps__connector {
        top: 60px;
        left: 25px;
        bottom: 0;
        width: 2px;
    }

    .izi-steps__title {
        margin: 0 0 6px 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text, #1e293b);
    }

    .izi-steps__description {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--color-text-light, #64748b);
    }

    .container-on-dark .izi-steps__title { color: #ffffff; }
    .container-on-dark .izi-steps__description { color: var(--primitive-gray-200, #e2e8f0); }

    @media (max-width: 768px) {
        .izi-steps--horizontal {
            flex-direction: column;
            text-align: left;
        }
        .izi-steps--horizontal .izi-steps__item {
            flex-direction: row;
            align-items: flex-start;
            padding-bottom: 20px;
        }
        .izi-steps--horizontal .izi-steps__connector {
            top: 60px;
            left: 25px;
            bottom: 0;
            width: 2px;
            height: auto;
        }
    }
</style>