/* ===== Justice261 KPI ===== */

/* Conteneur global pour limiter la largeur sur grand écran */
.kpi-wrapper{
  max-width: 900px;
  margin: 0 auto;
}

/* Grille des cartes KPI */
.kpi-grid{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.25rem 0;
}

.kpi-card{
  background: #F7F8FA;
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  min-width: 220px;
  flex: 0 1 300px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.kpi-value{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  font-weight: 800;
  color: #4970B3;
}

.kpi-label{
  margin-top: .25rem;
  font-weight: 600;
  color: #111827;
}

.kpi-hint{
  margin-top: .2rem;
  color: #6B7280;
  font-size: .95rem;
}

/* ===== Footer Justice261 ===== */

footer .footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

footer .footer-links{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

footer .footer-links a{
  color: #4970B3;
  text-decoration: none;
}

footer .footer-links a:hover{
  text-decoration: underline;
}

/* ===== Header Justice261 : fond bleu + texte blanc ===== */

/* On vise le header principal, quel que soit son id/classe exact(e) */
body > header,
body > div#page-wrapper > header,
body #header {
  background-color: #4970B3 !important;  /* Bleu Justice261 */
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Logo & texte du logo */
body header .logo,
body header .logo h3,
body header .logo h3 a {
  color: #ffffff !important;
}

/* Liens de navigation (Quark : .navigation ou .main-nav) */
body header .navigation ul li a,
body header nav.main-nav ul li a {
  color: #ffffff !important;
}

/* Survol + onglet actif */
body header .navigation ul li a:hover,
body header .navigation ul li.active > a,
body header nav.main-nav ul li a:hover,
body header nav.main-nav ul li.active > a {
  color: #E5EEFF !important;
  border-color: #E5EEFF !important;
}

/* ===== Laisser de la place sous le header fixe ===== */

/* On pousse les deux conteneurs possibles de Quark : #body et #body-wrapper */
body #body,
body #body-wrapper {
  padding-top: 90px;   /* Tu peux ajuster à 80 / 100 px si besoin */
}

@media (max-width: 768px) {
  body #body,
  body #body-wrapper {
    padding-top: 80px;
  }
}