.annuaire-steps-widget .how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 16px;
}

.annuaire-steps-widget .step-card {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--color-ink-100, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.annuaire-steps-widget .step-card__num,
.annuaire-steps-widget .step-card__icon,
.annuaire-steps-widget .step-card__title,
.annuaire-steps-widget .step-card__text {
    transition: color 0.2s ease, background-color 0.2s ease;
}

.annuaire-steps-widget .step-card__icon svg {
    transition: stroke 0.2s ease;
}

.annuaire-steps-widget .step-card__num {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-orange, #f97316);
}

.annuaire-steps-widget .step-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-top: 16px;
    border-radius: 14px;
    background: var(--color-orange-50, #fff7ed);
    color: var(--color-orange, #f97316);
}

.annuaire-steps-widget .step-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.annuaire-steps-widget .step-card__icon i {
    font-size: 22px;
    line-height: 1;
}

.annuaire-steps-widget .step-card__title {
    margin-top: 16px;
}

.annuaire-steps-widget .step-card__text {
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .annuaire-steps-widget .how-it-works__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .annuaire-steps-widget .how-it-works__steps {
        grid-template-columns: 1fr;
    }
}