/* ==========================================================================
   Section « Nos valeurs » — cartes (Accueil + page À propos)

   Design repris du modèle fourni par l'utilisateur (section « Comment ça
   Marche ? » de mfo/index.php) : quatre cartes `.process-step-card` avec une
   pastille d'icône ronde grise qui s'inverse au survol, la carte se soulevant
   légèrement.

     - `.section-valeurs` : filet de séparation au-dessus de la section
     - `.texte-intro-valeurs` : largeur de lecture de l'intro
     - `.values-grid` / `.process-step-*` : la rangée et les cartes

   Seules les COULEURS suivent la charte du site — le modèle utilisait un bleu
   nuit (#001f3f) et un vert pastel (#d4af37) : ici les titres sont en vert
   #001428 et la pastille passe au vert #001f3f au survol.

   Les variables --primaire / --primaire-fonce / --bordure sont fournies par la
   section appelante (.section-blanche pour l'accueil, .about-charte pour la
   page À propos).
   ========================================================================== */

.section-valeurs {
    border-top: 1px solid var(--bordure);
}

.texte-intro-valeurs {
    max-width: 640px;
}

/* --- La carte d'une valeur (design du modèle fourni) ---------------------- */
.process-step-card {
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Texte en gris de la charte (au lieu du gris Bootstrap #212529) */
    color: var(--ed-texte, #46505f);
}

.process-step-card .card-body {
    padding: 1.5rem 1.25rem;
}

.process-step-card:hover,
.process-step-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.1);
}

/* Pastille d'icône : bleu pâle de la charte au repos, bleu nuit au survol */
.process-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ed-vert-pale, #f5f7fa);
    color: var(--ed-vert, #001f3f);
    font-size: 1.4rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.process-step-card:hover .process-step-icon,
.process-step-card:focus-within .process-step-icon {
    background: var(--primaire);
}

.process-step-card:hover .process-step-icon i,
.process-step-card:focus-within .process-step-icon i {
    color: #ffffff;
}

.process-step-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primaire-fonce);
}

.process-step-card p {
    font-size: 0.82rem;
    /* !important : neutralise la classe Bootstrap .text-muted du markup */
    color: var(--ed-texte, #46505f) !important;
}

/* --------------------------------------------------------------------------
   ⚠ css/card.css force `.row { flex-direction: column }` sous 768 px : les
   cartes `col-6` ne pourraient pas se placer deux par ligne. `.values-grid`
   rétablit le comportement normal, sur cette seule rangée.

   La plage doit être `max-width: 768px` exactement (celle de card.css), sinon
   à 768 px les cartes restent empilées et larges de 25 % seulement.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .values-grid {
        display: flex;
        flex-flow: row wrap;
        width: auto;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
    }

    .values-grid > [class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    .process-step-card .card-body {
        padding: 1.15rem 0.9rem;
    }
}