/* ============================================================
   KPI Full Width Correction — JSL Distribution
   Scope: Accueil → section "Indicateurs — pilotage institutionnel"
   Objectif: grille 5/3/1, pleine largeur, sans impacter le reste
   ============================================================ */

main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  overflow: visible;
  justify-items: stretch;
}

main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-card {
  flex: initial; /* neutralise les règles flex legacy */
  width: auto;
  min-width: 0;
  overflow: hidden; /* empêche les textes de “sortir” visuellement */
}

main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-value,
main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-amount {
  overflow-wrap: anywhere;
  word-break: break-word;
}

main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive .kpi-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1024px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1920px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: calc(var(--space-4) * 1.25);
  }
}

@media (min-width: 2560px) {
  main.page-content section.login-card[aria-label="Indicateurs clés"] .kpi-strip.kpi-responsive {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--space-4) * 1.5);
  }
}