/* ╔══════════════════════════════════════════════════════════════╗
   ║  Studens App — Design tokens partagés (Phase 3 SaaS theming) ║
   ║                                                              ║
   ║  Variables CSS surchargeables par tenant via JS              ║
   ║  (js/branding.js → applyBranding). Toute page de la webapp   ║
   ║  doit `link rel="stylesheet" href="css/brand.css"` AVANT     ║
   ║  ses styles inline.                                          ║
   ║                                                              ║
   ║  Convention : chaque couleur a sa version hex (pour les      ║
   ║  bordures, textes, gradients) ET sa version RGB en chaîne    ║
   ║  (pour les rgba/halos). Le helper JS calcule la RGB depuis   ║
   ║  le hex tenant.                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
  /* Brand — défaults Studens */
  --brand-primary:        #3b82f6;
  --brand-primary-rgb:    59, 130, 246;
  --brand-primary-light:  #60a5fa;
  --brand-accent:         #22d3ee;
  --brand-accent-rgb:     34, 211, 238;
  --brand-font:           'Inter', sans-serif;
  --brand-font-display:   'Syne', sans-serif;

  /* Surface — invariant entre tenants pour garder l'identité visuelle Studens */
  --brand-bg:             #020206;
  --brand-text:           #cbd5e1;
  --brand-text-strong:    #e2e8f0;
  --brand-text-soft:      #94a3b8;
  --brand-text-muted:     #64748b;

  /* Glass card */
  --brand-glass-bg:       rgba(15, 23, 42, 0.55);
  --brand-glass-border:   rgba(var(--brand-primary-rgb), 0.15);
  --brand-glass-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Bases globales partagées */
body {
  font-family: var(--brand-font);
  background: var(--brand-bg);
  color: var(--brand-text);
  min-height: 100vh;
  position: relative;
}

h1, h2, h3 { font-family: var(--brand-font-display); }

/* Halos décoratifs */
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.halo-1 {
  top: -15%; right: -10%;
  width: 520px; height: 520px;
  background: rgba(var(--brand-primary-rgb), 0.18);
}
.halo-2 {
  bottom: -15%; left: -10%;
  width: 480px; height: 480px;
  background: rgba(var(--brand-accent-rgb), 0.12);
}

/* Glass card surface réutilisable */
.glass-card {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  background: var(--brand-glass-bg);
  border: 1px solid var(--brand-glass-border);
  box-shadow: var(--brand-glass-shadow);
}

/* Gradient text — couleur primary→accent */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Spinners */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--brand-primary-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.spinner-sm {
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Animations utility */
.fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Curseurs cohérents (pas de I-beam sur les boutons) ────────────────
   Force cursor: pointer sur tous les éléments interactifs et empêche
   la sélection de texte qui causait le curseur text indésirable.       */
button,
a[href],
a[onclick],
a.btn-primary, a.btn-primary-big, a.btn-ghost, a.btn-danger, a.btn-google,
a.btn-secondary-text, a.theory-action-btn, a.arcade-cta, a.menu-item,
label,
.btn-primary, .btn-primary-big, .btn-ghost, .btn-danger, .btn-google,
.btn-secondary-text,
.chapter-card:not(.locked),
.theme-card:not(.coming-soon),
.lesson-card:not(.locked),
.final-test-card:not(.locked),
.arcade-cta,
.module-card,
.ctrl-card,
.icon-btn,
.modal-close,
.nav-item,
.menu-item,
.qcm-option:not(.locked),
.tf-card:not(.locked),
.img-card:not(.locked),
.order-btn,
.theory-action-btn {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Sur les boutons disabled / éléments lockés : curseur not-allowed */
button:disabled,
.chapter-card.locked,
.theme-card.coming-soon,
.lesson-card.locked,
.final-test-card.locked,
.qcm-option.locked,
.tf-card.locked,
.img-card.locked,
.order-btn:disabled {
  cursor: not-allowed;
}

/* Empêche le I-beam sur les enfants (span, iconify-icon) des éléments interactifs */
button > *,
a[href] > *,
.btn-primary-big > *,
.btn-primary > *,
.chapter-card > *,
.theme-card > *,
.lesson-card > *,
.arcade-cta > * {
  pointer-events: none;
}