/* ====================================================================
   BANDE D'INDICATEURS — LE GABARIT DE LA FICHE PDS
   La fiche d'un professionnel annonce ses chiffres sur une bande plate,
   collée sous son en-tête : une colonne par indicateur, séparées d'un
   filet, l'intitulé en petites capitales grises au-dessus d'une valeur
   bleue et d'une note. Les pages des quatre applications les
   présentaient autrement — dix blocs, quatre habillages : cartes grises
   bordées, cartes à dégradé bleu et liseré, cartes blanches, et une
   grille écrite par un module. Toutes reprennent ici la bande.

   Ces règles vivaient dans le <style> de dashboard.html. La
   sectorisation, qui est faite de pages séparées, les reprend : d'où
   cette feuille, seule source du gabarit pour les cinq applications.
   ==================================================================== */
.kpi-carte {
    background: #fff; border-radius: 12px; margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    /* La bande court d'un bord à l'autre : sans cela ses angles
       dépasseraient ceux de la carte. */
    overflow: hidden;
}
.kpi-entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid #f0f0f0;
}
.kpi-entete h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin: 0; }
.kpi-bande {
    display: grid;
    /* Une colonne par cellule, de largeur égale, sans avoir à compter
       les indicateurs : deux pages en changent le nombre selon le
       filtre retenu. */
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.kpi-cellule {
    padding: 0.875rem 1.25rem; text-align: center; min-width: 0;
    border-right: 1px solid #f0f0f0;
}
.kpi-cellule:last-child { border-right: 0; }
.kpi-libelle {
    font-size: 0.65rem; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.kpi-valeur { font-size: 1.1rem; font-weight: 800; color: #0075C9; }
/* Un nom de laboratoire ou de groupe tient rarement sur une ligne de
   1,1 rem : ces valeurs-là s'écrivent plus petit. */
.kpi-valeur--texte { font-size: 0.85rem; line-height: 1.25; }
.kpi-note {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap; margin-top: 2px;
    font-size: 0.65rem; color: #94a3b8;
}
/* Écart d'une période à l'autre, en vert ou en rouge selon le sens. */
.kpi-ecart {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0.15rem 0.4rem; border-radius: 6px;
    background: #f1f5f9; color: #64748b;
    font-size: 0.65rem; font-weight: 600;
}
.kpi-ecart--hausse { background: #dcfce7; color: #16a34a; }
.kpi-ecart--baisse { background: #fee2e2; color: #dc2626; }
/* Sous 900 px, cinq colonnes ne laissent plus lire ni l'intitulé ni la
   valeur : la bande se replie en deux rangées, filets compris. */
@media (max-width: 900px) {
    .kpi-bande { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-cellule { border-bottom: 1px solid #f0f0f0; }
    .kpi-cellule:nth-child(2n) { border-right: 0; }
}