/* ==========================================================================
   MATH-EVAL — compléments custom (le gros du style vient de Tailwind CDN)
   ========================================================================== */

:root {
  --grad-1: #6366f1; /* indigo-500 */
  --grad-2: #8b5cf6; /* violet-500 */
  --grad-3: #ec4899; /* pink-500  */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dégradé d'arrière-plan animé (léger) ------------------------------------ */
/* IMPORTANT : on utilise background-IMAGE (pas le raccourci `background`) pour ne PAS
   écraser le background-color des classes Tailwind bg-slate-50 / dark:bg-slate-950 du body. */
.app-bg {
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(236,72,153,.14), transparent 55%);
}
.dark .app-bg {
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(236,72,153,.16), transparent 55%);
}

/* Carte "verre" ----------------------------------------------------------- */
.glass {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Texte en dégradé -------------------------------------------------------- */
.text-grad {
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Apparition douce -------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .45s cubic-bezier(.21,.61,.35,1) both; }

@keyframes pop {
  0% { transform: scale(.96); opacity: .6; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop .25s ease-out both; }

/* Barre de progression du test ------------------------------------------- */
.progress-track { transition: width .4s cubic-bezier(.21,.61,.35,1); }

/* Réponses QCM : états ---------------------------------------------------- */
.qcm-opt { transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
.qcm-opt:hover:not(:disabled) { transform: translateY(-1px); }
.qcm-opt:active:not(:disabled) { transform: translateY(0) scale(.99); }

/* Scrollbar discrète ------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,140,.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,140,.55); }

/* KaTeX un peu plus lisible dans les énoncés ------------------------------ */
.katex { font-size: 1.05em; }

/* Pastilles de maîtrise --------------------------------------------------- */
.dot { width: .6rem; height: .6rem; border-radius: 99px; display: inline-block; }