/** BLOC 12 — Processus horizontal 4 étapes (Figma node 1470:5369) */
.section-process .section__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Bloc header (titre + description) : gap 32px entre eux */
.section-process__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.section-process__title {
    font-size: clamp(1.75rem, 2.8vw, 2.3125rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0;
    color: inherit;
}
.section-process__title .accent,
.section-process__title .green-text { color: var(--color-accent); }

.section-process__description {
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    margin: 0;
    color: inherit;
    max-width: none;
}

/* Row de 4 steps : chacune prend 1/4 de la largeur */
.section-process__steps {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-start;
}

.section-process__step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

/* Cercle : 72×72, bleu primary, chiffre 32px bold blanc */
.section-process__step-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    flex-shrink: 0;
}

/* Titre étape : 18px semibold noir */
.section-process__step-title {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: inherit;
    margin: 0;
}

/* Description étape : 14px regular noir */
.section-process__step-description {
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    margin: 0;
}

/* Sur fond bleu : cercle inversé (blanc/bleu) */
.section--bg-blue .section-process__step-number {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* Pastilles colorées optionnelles (échelles type niveaux d'alerte).
   Prioritaires sur l'inversion fond bleu. */
/* Couleurs échantillonnées sur la maquette Figma CCIR - Proterina4 */
.section-process__step--vert .section-process__step-number {
    background-color: #a1c25b;
    /* Chiffre foncé : blanc sur ces pastilles claires = contraste < 3:1,
       le numéro était illisible (revue design 2026-07-21). */
    color: var(--color-black);
}

.section-process__step--jaune .section-process__step-number {
    background-color: #fadb8c;
    color: var(--color-black);
}

.section-process__step--orange .section-process__step-number {
    background-color: #f7a666;
    color: var(--color-black);
}

.section-process__step--rouge .section-process__step-number {
    background-color: #d9332e;
    color: var(--color-white);
}

/* Responsive : grille 2x2 en tablet, puis 1 col en mobile */
@media (max-width: 768px) {
    .section-process__steps { flex-wrap: wrap; }
    .section-process__step { flex: 0 0 50%; margin-bottom: var(--space-4); }
}
@media (max-width: 480px) {
    .section-process__step { flex: 0 0 100%; }
}