/* ============================================================
   rs1/text-counters — texte + chiffres clés
   Chiffres : .mp-kpi ; carte : .mp-carte--statique (mp-tokens.css)
   Fond brume : suit un bandeau sombre, précède rs1/avatar-text (blanc).
   ============================================================ */

.mp-tc{
  padding-block: var(--mp-section-sm);
  background: var(--mp-bleu-brume);
}

.mp-tc__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.mp-tc__titre{
  margin: 0 0 1.1rem;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}

.mp-tc__desc{
  max-width: 62ch;
  font-size: var(--mp-t-base);
  color: var(--mp-texte);
}
.mp-tc__desc > :last-child{ margin-bottom: 0 }

/* ── Chiffres ────────────────────────────────────────────────
   Mobile : deux colonnes, trait vertical entre voisins,
   trait horizontal entre rangées. */
.mp-tc__chiffres{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  list-style: none;
  text-align: center;
}
.mp-tc__chiffres--1{ grid-template-columns: minmax(0, 1fr) }

.mp-tc__item{ padding: 1.1rem .6rem }
.mp-tc__item:nth-child(2n){ border-left: 1px solid var(--mp-trait) }
.mp-tc__item:nth-child(n+3){ border-top: 1px solid var(--mp-trait) }
.mp-tc__chiffres--3 .mp-tc__item:last-child{ grid-column: 1 / -1 }

/* « Plus de » : petite ligne au-dessus du nombre */
.mp-tc__prefixe{
  display: block;
  margin-bottom: .5rem;
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mp-encre);
}

/* Suffixe long : unité sous le nombre */
.mp-tc__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);
}

@media (min-width: 601px){
  .mp-tc__chiffres--3{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mp-tc__chiffres--3 .mp-tc__item:last-child{ grid-column: auto }
  .mp-tc__chiffres--3 .mp-tc__item:nth-child(n+3){ border-top: 0 }
  .mp-tc__chiffres--3 .mp-tc__item + .mp-tc__item{ border-left: 1px solid var(--mp-trait) }
}

/* Texte et chiffres côte à côte : dès 961px pour 1-2 chiffres,
   dès 1101px pour 3-4 (la colonne serait trop étroite avant). */
@media (min-width: 961px){
  .mp-tc--n1 .mp-tc__grille,
  .mp-tc--n2 .mp-tc__grille{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1101px){
  .mp-tc--n3 .mp-tc__grille,
  .mp-tc--n4 .mp-tc__grille{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) }
}