/* ==========================================================================
   Accueil — « Nos chiffres en graphiques »
   Design repris du modèle fourni (deux cartes : graphique en barres +
   anneau de satisfaction), avec :

     - les couleurs de la charte du site (noir #000000), à la place du bleu/or
       du modèle (consigne « pas de jaune »)
     - des icônes Font Awesome (le modèle utilisait Font Awesome « fa-solid »,
       c'est compatible, mais on reste sur la syntaxe utilisée partout ici)
     - ⚠️ des DONNÉES RÉELLES, tirées de la chronologie de about.php
       (20, 50, 100, 200, 300, 500 subventions accordées). Le modèle
       contenait les chiffres d'un autre projet : ne pas les recopier.
   ========================================================================== */

.section-blanche {
    --primaire: #000000;
    --primaire-fonce: #000000;
    --accent: #000000;
    --bordure: #eef1f6;
    --texte-muet: #6b7280;

    background-color: #ffffff;
}

/* ==========================================================================
   CARTES
   ========================================================================== */
.carte-avantage {
    background: #ffffff;
    border: 1px solid var(--bordure);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.icone-avantage {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--primaire);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-avantage h5 {
    font-weight: 700;
    color: var(--primaire-fonce);
    font-size: 1.05rem;
}

/* ==========================================================================
   GRAPHIQUES
   ========================================================================== */
.chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Anneau de satisfaction */
.donut-svg {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Liste à puces cochées */
.liste-chiffres {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.liste-chiffres li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    color: #3a3a3a;
}

.liste-chiffres li:last-child {
    margin-bottom: 0;
}

.liste-chiffres i {
    color: var(--primaire);
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

/* ==========================================================================
   BARRES DE PROGRESSION
   ========================================================================== */
.progress-campagne {
    height: 8px;
    border-radius: 999px;
    background: var(--bordure);
    overflow: hidden;
}

.progress-campagne-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primaire), var(--accent));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */