/* HOTACONNECT — jetons de style communs (FABLE). Tous les modules n'utilisent que ces variables. */
:root {
  /* Fonds */
  --hc-fond: #070b19;
  --hc-fond-2: #0b1124;
  --hc-surface: #10172e;
  --hc-surface-2: #161f3d;
  --hc-voile: rgba(7, 11, 25, 0.78);
  /* Texte */
  --hc-texte: #f6f4ff;
  --hc-texte-doux: #c3c6dc;
  --hc-texte-faible: #9498b8;
  /* Accents HOTANOVA */
  --hc-cyan: #39dcff;
  --hc-violet: #9778fc;
  --hc-rose: #f15ec5;
  --hc-or: #f2c66d;
  --hc-vert: #42e6a2;
  --hc-alerte: #ffb454;
  --hc-erreur: #ff6b81;
  --hc-degrade: linear-gradient(110deg, #f15ec5 0%, #9778fc 52%, #39dcff 100%);
  --hc-degrade-doux: linear-gradient(140deg, rgba(241, 94, 197, 0.16), rgba(151, 120, 252, 0.12) 50%, rgba(57, 220, 255, 0.14));
  /* Traits et lueurs */
  --hc-trait: rgba(255, 255, 255, 0.12);
  --hc-trait-fort: rgba(255, 255, 255, 0.24);
  --hc-lueur-cyan: 0 0 0 1px rgba(57, 220, 255, 0.45), 0 0 28px rgba(57, 220, 255, 0.18);
  --hc-lueur-rose: 0 0 0 1px rgba(241, 94, 197, 0.45), 0 0 28px rgba(241, 94, 197, 0.18);
  --hc-ombre: 0 18px 50px rgba(0, 0, 0, 0.45);
  /* Formes */
  --hc-rayon: 18px;
  --hc-rayon-petit: 12px;
  --hc-rayon-pastille: 999px;
  /* Typographie */
  --hc-police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hc-police-titre: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* Rythme */
  --hc-largeur: 1320px;
  --hc-marge: clamp(18px, 4.5vw, 72px);
  --hc-transition: 180ms ease;
  /* Couleur propre à chaque univers */
  --hc-hotalab: #7aa8ff;
  --hc-hotaria: #c58bff;
  --hc-hotaflow: #f15ec5;
  --hc-hotagame: #f2c66d;
  --hc-hotaapp: #39dcff;
  --hc-hotakids: #8fd8ff;
}
@media (prefers-reduced-motion: reduce) {
  :root { --hc-transition: 0ms; }
}