/* =========================================
   ✅ STATS COMPACTES - VERSION BLEU MARINE PREMIUM
   ========================================= */

#stats-container-nouveau,
#stats-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 16px 24px !important;
  background: #1a2644 !important; /* ✅ BLEU MARINE DE LA CHARTE */
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(26, 38, 68, 0.25) !important;
  margin-bottom: 20px !important;
  overflow-x: auto !important;
}

/* Chaque élément de statistique */
#stats-container-nouveau .stat-item,
#stats-container .stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 130px !important;
  padding: 0 20px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important; /* ✅ Séparateur blanc subtil */
}

/* Retirer la bord droite du dernier élément */
#stats-container-nouveau .stat-item:last-child,
#stats-container .stat-item:last-child {
  border-right: none !important;
  padding-right: 0 !important;
}

/* ✅ Icônes vectorielles - TOUTES EN JAUNE OR (ressort sur fond sombre) */
#stats-container-nouveau .stat-icon,
#stats-container .stat-icon {
  font-size: 20px !important;
  color: #ffcd01 !important; /* ✅ JAUNE OR - impact maximal sur fond bleu */
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Conteneur du texte */
#stats-container-nouveau .stat-content,
#stats-container .stat-content {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

/* Label (titre discret) - BLANC CASSÉ pour lisibilité */
#stats-container-nouveau .stat-label,
#stats-container .stat-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important; /* ✅ Gris clair sur bleu marine */
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

/* Valeur (chiffre impactant) - BLANC PUR pour contraste maximal */
#stats-container-nouveau .stat-content strong,
#stats-container .stat-content strong {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important; /* ✅ BLANC PUR */
}

/* ✅ MISE EN AVANT DE LA PROGRESSION - JAUNE OR TOTAL */
#stats-container-nouveau .stat-item.highlight .stat-icon,
#stats-container .stat-item.highlight .stat-icon {
  color: #ffcd01 !important;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255, 205, 1, 0.4)); /* ✅ Halo lumineux */
}

#stats-container-nouveau .stat-item.highlight .stat-content strong,
#stats-container .stat-item.highlight .stat-content strong {
  color: #ffcd01 !important; /* ✅ Jaune or pur sur fond bleu = spectaculaire */
}

/* ✅ Effet hover subtil */
#stats-container-nouveau .stat-item:hover,
#stats-container .stat-item:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  transition: background-color 0.2s ease !important;
}

/* État de mise à jour */
#stats-container-nouveau.updating,
#stats-container.updating {
  opacity: 0.6 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* Responsive */
@media (max-width: 768px) {
  #stats-container-nouveau,
  #stats-container {
    padding: 12px 16px !important;
  }
  
  #stats-container-nouveau .stat-item,
  #stats-container .stat-item {
    min-width: 120px !important;
    padding: 0 16px !important;
  }
  
  #stats-container-nouveau .stat-content strong,
  #stats-container .stat-content strong {
    font-size: 16px !important;
  }
}