/* ==========================================================================
   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; }

/* Sélecteur de matière (segmented control) */
.mat-btn{ background:transparent; color:inherit; transition:background .15s,color .15s; }
.mat-btn:hover{ background:rgba(100,116,139,.12); }
.mat-btn.mat-on{ background:linear-gradient(135deg,var(--grad-1),var(--grad-3)); color:#fff; }

/* Bascule de langue (FR/EN) — réutilise l'état actif .mat-on */
.lang-btn{ background:transparent; color:inherit; transition:background .15s,color .15s; }
.lang-btn:hover{ background:rgba(100,116,139,.12); }
.lang-btn.mat-on{ background:linear-gradient(135deg,var(--grad-1),var(--grad-3)); color:#fff; }

/* Barre de navigation scrollable sans barre de défilement visible (mobile) */
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* Badge « prérequis » dans les révisions prioritaires (niveau < classe de l'élève) */
.tag-prereq{
  display:inline-block; vertical-align:middle; margin-left:.25rem;
  font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.04em;
  background:rgba(255,255,255,.22); border-radius:.375rem; padding:.1rem .35rem;
}

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; }

/* === Correction bienveillante 7-77 (Éklo) ================================ */
/* Réponses : la bonne s'illumine (✓ vert), le mauvais choix se marque (rose).
   Toujours icône + couleur (jamais la couleur seule → daltonisme). */
.qcm-opt.qcm-bonne  { border-color:#10b981 !important; background:#ecfdf5 !important; box-shadow:inset 0 0 0 2px #10b981; }
.qcm-opt.qcm-fausse { border-color:#f43f5e !important; background:#fff1f2 !important; box-shadow:inset 0 0 0 2px #f43f5e; }
.dark .qcm-opt.qcm-bonne  { background:rgba(16,185,129,.16) !important; }
.dark .qcm-opt.qcm-fausse { background:rgba(244,63,94,.16) !important; }

/* Carte de correction : verte si juste, ambre (jamais rouge dur) si à revoir. */
.corr-card { padding:1rem 1.15rem; border-radius:1rem; border:1px solid; animation:corrIn .25s ease; }
.corr-card-ok     { background:#ecfdf5; border-color:#a7f3d0; }
.corr-card-revoir { background:#fff7ed; border-color:#fed7aa; }
.dark .corr-card-ok     { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); }
.dark .corr-card-revoir { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.corr-tete    { font-weight:800; font-size:1.1rem; letter-spacing:-.01em; }
.corr-ok      { color:#047857; } .corr-revoir { color:#b45309; }
.dark .corr-ok{ color:#6ee7b7; } .dark .corr-revoir { color:#fcd34d; }
.corr-rep     { margin-top:.4rem;  font-size:.98rem; color:#1e293b; }
.dark .corr-rep     { color:#e2e8f0; }
.corr-explain { margin-top:.55rem; font-size:.98rem; line-height:1.55; color:#334155; }
.dark .corr-explain { color:#cbd5e1; }
/* Bouton Continuer : cible 56px, focus visible (accessibilité 7-77). */
.corr-suite   { margin-top:.9rem; width:100%; min-height:56px; border:none; border-radius:1rem;
                font-weight:800; font-size:1.05rem; cursor:pointer; box-shadow:0 6px 16px rgba(75,87,201,.28); }
.corr-suite:focus-visible { outline:3px solid #a5b4fc; outline-offset:2px; }
@keyframes corrIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce){ .corr-card{ animation:none; } }

/* ---------------------------------------------------------------------------
   Pages juridiques (mentions légales, CGV, confidentialité)
   Ces textes sont longs et doivent rester lisibles : mesure limitée, titres
   nettement détachés, et numérotation automatique des articles pour qu'on
   puisse s'y référer sans avoir à les renuméroter à la main à chaque ajout.
   --------------------------------------------------------------------------- */
.prose-juridique { counter-reset: article; }
.prose-juridique h2 {
  font-size: 1.15rem; font-weight: 700; margin-top: 2.25rem; margin-bottom: .6rem;
  padding-top: 1.25rem; border-top: 1px solid rgb(226 232 240 / .8);
}
.dark .prose-juridique h2 { border-top-color: rgb(30 41 59); }
.prose-juridique h3 { font-size: 1rem; font-weight: 600; margin-top: 1.4rem; margin-bottom: .4rem; }
.prose-juridique p, .prose-juridique li { line-height: 1.7; }
.prose-juridique p { margin-top: .7rem; }
.prose-juridique ul, .prose-juridique ol { margin-top: .7rem; padding-left: 1.4rem; }
.prose-juridique ul { list-style: disc; }
.prose-juridique ol { list-style: decimal; }
.prose-juridique li { margin-top: .35rem; }
.prose-juridique a { text-decoration: underline; text-underline-offset: 2px; }
.prose-juridique code {
  font-size: .875em; padding: .1em .35em; border-radius: .3rem;
  background: rgb(241 245 249); 
}
.dark .prose-juridique code { background: rgb(30 41 59); }
.prose-juridique .note {
  font-size: .9rem; color: rgb(100 116 139);
  border-left: 3px solid rgb(203 213 225); padding-left: .9rem; margin-top: .9rem;
}
.dark .prose-juridique .note { color: rgb(148 163 184); border-left-color: rgb(51 65 85); }
.prose-juridique [data-a-completer] { line-height: 1.6; }
/* Les crochets signalent ce qui reste à renseigner : on les rend visibles,
   pour qu'un champ oublié saute aux yeux en relecture plutôt qu'en production. */
.prose-juridique .todo {
  background: rgb(254 249 195); color: rgb(113 63 18);
  padding: .05em .3em; border-radius: .25rem; font-weight: 600;
}
.dark .prose-juridique .todo { background: rgb(66 32 6); color: rgb(253 230 138); }