/* ============================================================
   rs1/stats-band — bande de chiffres clés
   Chiffres : .mp-kpi ; bande bleue : .mp-bande-bleue (mp-tokens.css)
   ============================================================ */

.mp-sb{ padding-block: clamp(3rem, 5vw, 4.25rem) }
.mp-sb--blanc{ background: var(--mp-blanc) }
.mp-sb--brume{ background: var(--mp-bleu-brume) }

.mp-sb__titre{
  margin: 0 0 2.5rem;
  text-align: center;
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-sombre .mp-sb__titre{ color: var(--mp-blanc) }

.mp-sb__grille{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Unité sous le nombre (« interventions », « ans ») */
.mp-sb__unite{
  display: block;
  margin-top: .3rem;
  font-family: var(--mp-font-titre);
  font-style: normal;
  font-weight: 700;
  font-size: var(--mp-t-lg);
  letter-spacing: -.01em;
  color: var(--mp-encre);
}
.mp-sombre .mp-sb__unite{ color: var(--mp-blanc) }

.mp-sb .mp-sb__sub{
  margin-top: .2rem;
  font-size: var(--mp-t-xs);
}

/* Deux colonnes jusqu'à 960px : un troisième chiffre isolé prend toute la
   rangée (centré) au lieu de rester seul calé à gauche. */
@media (max-width: 960px){
  .mp-sb__grille--3 .mp-sb__item:last-child,
  .mp-sb__grille--1 .mp-sb__item{ grid-column: 1 / -1 }
}

/* ── Cinq chiffres : blocs de taille égale, sans hiérarchie ──
   Flex centré : deux colonnes jusqu'à 960px (le cinquième prend la
   dernière rangée), 3 + 2 centrés de 961 à 1100px, 5 alignés au-delà. */
.mp-sb__grille--5{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mp-sb__grille--5 > .mp-sb__item{ flex: 0 0 calc((100% - 1.25rem) / 2) }
.mp-sb__grille--5 > .mp-sb__item:last-child{ flex-basis: 100% }

@media (min-width: 961px){
  .mp-sb__grille--4{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .mp-sb__grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 58rem; margin-inline: auto }
  .mp-sb__grille--2{ max-width: 38rem; margin-inline: auto }
  .mp-sb__grille--1{ grid-template-columns: minmax(0, 1fr) }

  .mp-sb__item{ padding-inline: 1rem }
  .mp-sb__item + .mp-sb__item{ border-left: 1px solid var(--mp-trait) }
  .mp-sombre .mp-sb__item + .mp-sb__item{ border-left-color: var(--mp-trait-sombre) }

  .mp-sb__grille--5 > .mp-sb__item,
  .mp-sb__grille--5 > .mp-sb__item:last-child{ flex-basis: calc((100% - 2 * 1.25rem) / 3) }
}
@media (min-width: 961px) and (max-width: 1100px){
  .mp-sb__grille--5 > .mp-sb__item:nth-child(4){ border-left: 0 }
}
@media (min-width: 1101px){
  .mp-sb__grille--5 > .mp-sb__item,
  .mp-sb__grille--5 > .mp-sb__item:last-child{ flex-basis: calc((100% - 4 * 1.25rem) / 5) }
  /* Cinq colonnes : « +10 000 » doit tenir dans le bloc */
  .mp-sb__grille--5 .mp-kpi b{ font-size: clamp(1.9rem, 2.6vw, 2.6rem) }
}

/* Éditeur : emplacements sans chiffre, masqués sur le site */
.mp-sb__a-renseigner{
  margin: 2rem auto 0;
  padding: .6rem 1rem;
  max-width: 46rem;
  border: 1px dashed var(--mp-trait);
  border-radius: var(--mp-r-sm);
  font-size: var(--mp-t-xs);
  text-align: center;
  color: var(--mp-gris);
  background: var(--mp-blanc);
}