/* ── Bloc KPI ── */

/* Le bloc utilise .sec (72px) — on surcharge pour coller au wireframe */
.bloc-kpi {
    padding: var(--kpi-padding);
    background: var(--color-bg-footer);
}

/* Fond sombre : le fond dark prend le dessus via sec--dark */
.sec--dark.bloc-kpi,
.sec--dark .bloc-kpi {
    background: var(--slate-900);
}

.bloc-kpi__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min-col), 1fr));
    gap: var(--space-md);
    text-align: center;
}

/* Cas 1 seule stat — l'item se centre au lieu de s'étirer sur toute la ligne */
.bloc-kpi__grille:has(> .bloc-kpi__item:only-child) {
    grid-template-columns: min-content;
    justify-content: center;
}
.bloc-kpi__item:only-child {
    min-width: var(--kpi-single-min);
}

.bloc-kpi__item {
    padding: var(--space-lg) var(--space-md);
    border-right: 2px solid #000;
}
.bloc-kpi__item:last-child {
    border-right: none;
}

.bloc-kpi__nombre {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-kpi-value);
    font-weight: var(--font-weight-kpi);
    color: #000;
    line-height: normal;
    text-align: center;
    margin-bottom: var(--space-xs);
}

.bloc-kpi__label {
    display: block;
    font-size: var(--font-size-kpi-label);
    font-weight: var(--font-weight-kpi);
    color: #000;
    text-transform: uppercase;
    letter-spacing: var(--kpi-label-spacing);
    line-height: normal;
    text-align: center;
    margin-top: var(--kpi-label-mt);
}

/* Fond sombre — items avec fond translucide + texte blanc */
.sec--dark .bloc-kpi__item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.sec--dark .bloc-kpi__item:last-child {
    border-right: none;
}
.sec--dark .bloc-kpi__nombre {
    color: var(--color-text-light);
}
.sec--dark .bloc-kpi__label {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .bloc-kpi {
        padding: var(--kpi-padding-tablet);
    }
}

@media (max-width: 640px) {
    .bloc-kpi {
        padding: var(--kpi-item-padding);
    }
    .bloc-kpi__grille {
        grid-template-columns: repeat(2, 1fr);
    }
    .bloc-kpi__item,
    .sec--dark .bloc-kpi__item {
        border-right: none;
    }
    /* Empêche la coupure des nombres contenant un espace (ex: "+5 000") */
    .bloc-kpi__nombre {
        white-space: nowrap;
    }
}