.program-flag {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, #002395 33%, #ffffff 33%, #ffffff 66%, #ed2939 66%) !important;
  border: 2px solid #e5e7eb !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
  font-size: 0 !important;
  color: transparent !important;
  display: block !important;
}
.program-card {
  border-radius: 24px !important;
  padding: 36px !important;
  box-shadow: 0 8px 32px rgba(6, 78, 59, 0.08) !important;
  transition: all 0.5s ease !important;
}
.program-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 48px rgba(6, 78, 59, 0.14) !important;
}
.program-active {
  border: 2px solid #c9a227 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%) !important;
}
.program-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #064e3b, #c9a227) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.btn-premium {
  background: linear-gradient(135deg, #c9a227 0%, #d97706 100%) !important;
  border-radius: 14px !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.35) !important;
  transition: all 0.35s ease !important;
}
.btn-premium:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(201, 162, 39, 0.45) !important;
}
.badge-active {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}
.student-header-premium {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 40%, #047857 100%) !important;
  border-radius: 24px !important;
  padding: 48px !important;
}
.stat-glass {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 20px !important;
  padding: 20px 28px !important;
}
.streak-card-premium {
  border-left: 5px solid #c9a227 !important;
  border-radius: 20px !important;
  padding: 32px !important;
}
.streak-fill-premium {
  background: linear-gradient(90deg, #f97316, #c9a227, #d97706) !important;
}
.path-week-premium {
  border-radius: 20px !important;
  padding: 24px !important;
  transition: all 0.4s ease !important;
}
.path-week-premium:hover {
  transform: translateX(12px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.achievement-card-premium.unlocked {
  background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%) !important;
  border: 2px solid #c9a227 !important;
}
.glass-card {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
}
.student-card-premium {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 4px 24px rgba(6, 78, 59, 0.08) !important;
  transition: all 0.4s ease !important;
  display: flex;
  align-items: center;
  gap: 16px !important;
}
.student-card-premium:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(6, 78, 59, 0.12) !important;
}
.student-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #064e3b, #047857) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
.students-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}
.search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  max-width: 320px !important;
}
.search-box .search-icon {
  position: absolute !important;
  left: 12px !important;
  color: #9ca3af !important;
  display: flex !important;
}
.search-input {
  width: 100% !important;
  padding: 10px 16px 10px 40px !important;
  border-radius: 14px !important;
  border: 2px solid #e5e7eb !important;
  font-size: 14px !important;
  transition: border-color 0.3s !important;
}
.search-input:focus {
  outline: none !important;
  border-color: #c9a227 !important;
}
.students-count {
  font-size: 14px !important;
  color: #6b7280 !important;
}
.students-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
.empty-state {
  text-align: center !important;
  padding: 48px !important;
  grid-column: 1 / -1 !important;
}
.empty-state-icon {
  font-size: 48px !important;
  color: #d1d5db !important;
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: center !important;
}
.btn-icon {
  background: transparent !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  color: #6b7280 !important;
}
.btn-icon:hover {
  background: rgba(201, 162, 39, 0.08) !important;
  color: #064e3b !important;
}
/* ============================================
   MOBILE (<= 768px) : hero + stats plus compacts
   - padding force en !important pour surpasser les
     valeurs premium desktop declarees plus haut.
   - Cartes stats en 48% / chiffre a 2rem / label centre.
   ============================================ */
@media (max-width: 768px) {
  .student-header-premium {
    padding: 1.5rem !important; /* hero plus bas : moins d'espace vertical */
  }
  .student-header-premium h1 {
    font-size: 1.5rem !important;
  }
  .student-header-premium .header-subtitle {
    font-size: 0.875rem !important;
  }
  .header-stats-premium {
    gap: 12px !important;
    margin-top: 16px !important;
  }
  .stat-glass {
    flex: 1 1 48% !important; /* width 48% (au lieu de 45%) : cartes + grandes */
    max-width: 48% !important;
    min-width: 0 !important;
  }
  .stat-glass .stat-value {
    font-size: 2rem !important; /* chiffre agrandi */
  }
  .stat-glass .stat-label {
    text-align: center !important;
    font-size: 0.75rem !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}