/* Style additionnel pour la plateforme Test de Niveau Informatique */
:root {
  --maroc-green: #006233;
  --maroc-red: #C1272D;
}

body { font-family: 'Cairo', ui-sans-serif, system-ui, sans-serif; }

.gradient-hero {
  background: linear-gradient(135deg, #006233 0%, #0f9b5f 50%, #16a34a 100%);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
}

.badge-niveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  font-weight: 700;
  color: white;
  font-size: 0.95rem;
}

/* Point vert de gestion en bas de page */
.gestion-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #22c55e;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: pulse-green 2s infinite;
  cursor: pointer;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.spinner {
  border: 3px solid #e5e7eb;
  border-top: 3px solid #16a34a;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-bar-bg { background: #e5e7eb; border-radius: 9999px; overflow: hidden; height: 0.6rem; }
.progress-bar-fill { background: linear-gradient(90deg, #16a34a, #22c55e); height: 100%; transition: width 0.4s ease; }

.fade-in { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}