/* Étapes numérotées (composant Steps) : 01, 02… en rouge au-dessus de chaque étape. */

.steps {
    display: grid;
    gap: var(--space-8);
    counter-reset: step;
}

@media (min-width: 600px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .steps {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.steps__item {
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-default);
    counter-increment: step;
}

.steps__item::before {
    content: counter(step, decimal-leading-zero);
    font: var(--type-mono);
    color: var(--text-accent);
}

.steps__item h3 {
    margin-top: var(--space-3);
    font: var(--type-h4);
}

.steps__item p {
    margin-top: var(--space-2);
    color: var(--text-secondary);
}

.steps__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-weight: var(--weight-semibold);
}

.steps__link svg {
    width: 16px;
    height: 16px;
}