/* ==================================================
   BLOC — ÉTAPES NUMÉROTÉES
================================================== */

/* Fond turquoise clair, cartes blanches à liseré sable.
   Le numéro n'est pas une pastille : c'est un grand chiffre
   turquoise posé au-dessus du titre. */
.etapes {
    background: var(--v-turquoise-100);
}

.etapes__titre {
    margin-bottom: 24px;
}

/* Grille Bootstrap : le nombre de colonnes est connu (3 à 5 étapes),
   les gouttières g-4 valent les 24 px de Figma. */
.etapes__liste {
    list-style: none;
    margin-top: 8px;
    padding-left: 0;
}

.etapes__etape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 28px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.etapes__numero {
    font-family: var(--v-font-titre);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--v-turquoise-400);
}

.etapes__corps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.etapes__nom {
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--v-texte-titre);
    margin: 0;
    line-height: 1.3;
}

.etapes__texte {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
}

@media (max-width: 767px) {
    .etapes__etape {
        padding: 20px;
    }
}