/* ==========================================================================
   NetCrafter Quiz — Design System
   Glassmorphism sombre, dégradés néon, micro-animations. Complète Tailwind.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Sora', sans-serif; }

/* ---- Fond "arène" avec taches lumineuses animées ---- */
.app-bg {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,.25), transparent),
              radial-gradient(ellipse 60% 40% at 90% 10%, rgba(139,92,246,.15), transparent),
              #05070d;
}
.dark .app-bg { background-color: #05070d; }
.light .app-bg, html:not(.dark) .app-bg { background-color: #f5f6fb; }

.blob {
  position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .35; pointer-events: none;
}

/* ---- Texte en dégradé ---- */
.text-gradient {
  background: linear-gradient(90deg, #818cf8, #c084fc, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-x 6s ease infinite;
}

/* ---- Verre dépoli (glassmorphism) ---- */
.glass {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html:not(.dark) .glass {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.06);
}
.glass-card { border-radius: 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,.35); }

/* ---- Cartes / hover lift ---- */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(99,102,241,.35); }

/* ---- Boutons ---- */
.btn-glow { box-shadow: 0 8px 24px -6px rgba(99,102,241,.55); }
.btn-glow:hover { box-shadow: 0 12px 32px -6px rgba(99,102,241,.75); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(129,140,248,.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,.7); }

/* ---- Skeleton loader ---- */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Toasts ---- */
#toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { min-width: 260px; max-width: 360px; padding: .85rem 1rem; border-radius: .85rem; color: #fff; font-size: .875rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: toast-in .25s ease; display: flex; align-items: center; gap: .6rem; }
.toast.hide { animation: toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }
.toast-success { background: linear-gradient(135deg,#10b981,#059669); }
.toast-error   { background: linear-gradient(135deg,#ef4444,#dc2626); }
.toast-info    { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.toast-warning { background: linear-gradient(135deg,#f59e0b,#d97706); }

/* ---- Modals ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(3,5,12,.7); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.active { display: flex; }
.modal-box { animation: modal-in .2s ease; }
@keyframes modal-in { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ---- Options de quiz (QCM) ---- */
.quiz-option { border: 2px solid rgba(255,255,255,.1); transition: all .2s ease; cursor: pointer; }
.quiz-option:hover:not(.disabled) { border-color: #818cf8; background: rgba(129,140,248,.08); transform: translateY(-2px); }
.quiz-option.selected { border-color: #818cf8; background: rgba(129,140,248,.15); }
.quiz-option.correct { border-color: #10b981 !important; background: rgba(16,185,129,.18) !important; }
.quiz-option.incorrect { border-color: #ef4444 !important; background: rgba(239,68,68,.18) !important; }
.quiz-option.disabled { pointer-events: none; opacity: .6; }

/* ---- Minuteur circulaire ---- */
.timer-ring { transform: rotate(-90deg); }
.timer-ring circle { transition: stroke-dashoffset 1s linear, stroke .3s ease; }

/* ---- Podium ---- */
.podium-step { border-radius: 1rem 1rem 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 1rem; position: relative; }
.podium-gold   { background: linear-gradient(180deg,#fde68a,#f59e0b); height: 12rem; }
.podium-silver { background: linear-gradient(180deg,#e5e7eb,#9ca3af); height: 9rem; }
.podium-bronze { background: linear-gradient(180deg,#fbbf8f,#c2703d); height: 7rem; }
y
/* ---- Badges de statut ---- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }

/* ---- Pulsation "EN DIRECT" ---- */
.live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 rgba(239,68,68,.6); animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

/* ---- Confetti (canvas overlay géré en JS) ---- */
#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 200; }

/* ---- Barre de progression ---- */
.progress-track { background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#6366f1,#22d3ee); transition: width .4s ease; }

/* ---- Entrées animées ---- */
.animate-in { animation: fade-up .5s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Ligne clamp ---- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   Mode clair — recalibrage de contraste
   Tout le reste de cette feuille (et les classes Tailwind utilisées dans les
   pages) est pensé "sombre d'abord" : texte clair sur fond sombre. Ce bloc
   réaffecte les teintes concernées quand <html> n'a pas la classe .dark,
   avec !important car l'ordre de chargement entre le CDN Tailwind (JIT,
   injecté en JS) et cette feuille n'est pas garanti.
   Les boutons à fond coloré (dégradé ou couleur pleine) doivent garder un
   texte blanc dans LES DEUX thèmes : ils sont explicitement exclus via des
   sélecteurs composés (ex. .bg-gradient-to-r.text-white) placés après la
   règle générale .text-white.
   ========================================================================== */

html:not(.dark) {
  color-scheme: light;
}

/* Texte "blanc" -> encre foncée sur les surfaces (cartes, tableaux, titres) */
html:not(.dark) .text-white { color: #0f172a !important; }

/* Exceptions : texte de bouton, toujours blanc sur fond coloré */
html:not(.dark) .bg-gradient-to-r.text-white,
html:not(.dark) .bg-brand-600.text-white,
html:not(.dark) .bg-red-600.text-white,
html:not(.dark) .bg-red-500.text-white,
html:not(.dark) .bg-red-600\/80.text-white,
html:not(.dark) .bg-emerald-600.text-white,
html:not(.dark) .bg-emerald-500.text-white,
html:not(.dark) .bg-amber-600.text-white,
html:not(.dark) .bg-amber-500.text-white {
  color: #ffffff !important;
}

/* Nuances de gris (corps de texte, libellés, texte secondaire) */
html:not(.dark) .text-slate-200 { color: #334155 !important; }
html:not(.dark) .text-slate-300 { color: #475569 !important; }
html:not(.dark) .text-slate-400 { color: #64748b !important; }
html:not(.dark) .text-slate-500 { color: #475569 !important; }

/* Couleurs d'accent (badges, liens, icônes) : versions foncées pour rester lisibles sur fond clair */
html:not(.dark) .text-brand-300   { color: #4338ca !important; }
html:not(.dark) .text-brand-400   { color: #4f46e5 !important; }
html:not(.dark) .text-emerald-300 { color: #047857 !important; }
html:not(.dark) .text-emerald-400 { color: #059669 !important; }
html:not(.dark) .text-red-300     { color: #b91c1c !important; }
html:not(.dark) .text-red-400     { color: #dc2626 !important; }
html:not(.dark) .text-amber-300   { color: #b45309 !important; }
html:not(.dark) .text-amber-400   { color: #b45309 !important; }
html:not(.dark) .text-fuchsia-300 { color: #a21caf !important; }
html:not(.dark) .text-fuchsia-400 { color: #a21caf !important; }
html:not(.dark) .text-orange-400  { color: #c2410c !important; }

/* Surfaces translucides "blanches" (cartes/boutons/entrées) -> équivalents sombres légers */
html:not(.dark) .bg-white\/5    { background-color: rgba(15,23,42,.04) !important; }
html:not(.dark) .bg-white\/10   { background-color: rgba(15,23,42,.06) !important; }
html:not(.dark) .bg-white\/20   { background-color: rgba(15,23,42,.10) !important; }
html:not(.dark) .hover\:bg-white\/5:hover  { background-color: rgba(15,23,42,.05) !important; }
html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgba(15,23,42,.08) !important; }
html:not(.dark) .hover\:bg-white\/20:hover { background-color: rgba(15,23,42,.12) !important; }
html:not(.dark) .border-white\/5  { border-color: rgba(15,23,42,.06) !important; }
html:not(.dark) .border-white\/10 { border-color: rgba(15,23,42,.10) !important; }
html:not(.dark) .ring-white\/10   { --tw-ring-color: rgba(15,23,42,.10) !important; }

/* Champs de formulaire : fond clair, texte foncé, placeholder lisible */
html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea {
  color: #0f172a;
}
html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

/* Composants internes utilisant des rgba blancs codés en dur */
html:not(.dark) .quiz-option { border-color: rgba(15,23,42,.12); }
html:not(.dark) .timer-ring-track { stroke: rgba(15,23,42,.1); }

/* États hover/focus sur texte (aucun n'est utilisé sur un bouton à fond coloré) */
html:not(.dark) .hover\:text-white:hover      { color: #0f172a !important; }
html:not(.dark) .hover\:text-brand-300:hover  { color: #4338ca !important; }
html:not(.dark) .hover\:text-red-400:hover    { color: #dc2626 !important; }