/* ============================================================
   VARIABLES GLOBALES (source unique de vérité)
   ============================================================
   Ce fichier doit être inclus en PREMIER, avant navbar.css,
   footer.css?v=1, et tout autre CSS de page.

   Règles :
   1. On ne redéfinit JAMAIS un bloc :root { ... } ailleurs
      (index.php, login.php, register.php, futures pages...).
   2. On ne modifie AUCUNE valeur de variable existante ici
      sans que ce soit explicitement demandé, car cela impacte
      TOUT le site (navbar, footer, toutes les pages) en une
      seule fois. Un changement silencieux "en passant" peut
      casser des styles ailleurs sans qu'on s'en aperçoive.
   3. Ajouter une nouvelle variable est moins risqué, mais doit
      toujours se faire ici, jamais dupliquée dans un fichier
      de page.
   ============================================================ */

:root {
    /* Fonds */
    --bg-deep: #06060d;
    --bg-surface: #0c0c1a;
    --bg-card: rgba(16,16,30,0.7);

    /* Couleurs d'accent */
    --cyan: #00d4ff;
    --cyan-glow: rgba(0,212,255,0.5);
    --violet: #9b30ff;
    --violet-glow: rgba(155,48,255,0.5);
    --magenta: #ff2d75;
    --magenta-glow: rgba(255,45,117,0.4);
    --gold: #f0c060;

    /* Texte */
    --text: #e8e8f0;
    --text-muted: #9898b8;

    /* Bordures & verre (glassmorphism) */
    --border-subtle: rgba(255,255,255,0.06);
    --glass: rgba(12,12,28,0.65);
    --glass-strong: rgba(16,16,34,0.85);

    /* Boutons de la navbar (recherche, user menu, etc.) */
    --nav-btn-bg: rgba(255,255,255,0.05);
    --nav-btn-border: rgba(255,255,255,0.12);
    --nav-btn-bg-hover: rgba(255,255,255,0.12);
    --nav-btn-border-hover: rgba(255,255,255,0.28);

    /* Rayons de bordure */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
    --transition-smooth: 0.4s cubic-bezier(0.25,0.1,0.25,1);
    --transition-spring: 0.5s cubic-bezier(0.34,1.56,0.64,1);

    /* Ombres néon */
    --shadow-neon-cyan: 0 0 30px rgba(0,212,255,0.35), 0 0 80px rgba(0,212,255,0.12);
    --shadow-neon-violet: 0 0 30px rgba(155,48,255,0.35), 0 0 80px rgba(155,48,255,0.12);
    --shadow-card: 0 8px 40px rgba(0,0,0,0.5);
}



/* ============================================================
   BASE COMMUNE (*, html, body)
   ============================================================
   Ces règles doivent être identiques sur TOUTES les pages.
   Une page peut surcharger UNE propriété précise si besoin
   (ex: body { cursor:default; } dans une media query), sans
   dupliquer tout le bloc — la cascade CSS ne remplace que les
   propriétés redéclarées, le reste (line-height, font-family,
   background...) reste hérité d'ici. Ne JAMAIS recopier tout
   le bloc *, html ou body dans une page : c'est justement ça
   qui a cassé l'alignement de la navbar/du popup Discord la
   dernière fois (une page avait oublié line-height).
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scrollbar-width: thin !important;
    scrollbar-color: #3b7dd8 transparent !important;
}
body {
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Couleur volontairement codée en dur (pas de variable root) */
::-webkit-scrollbar {
    width: 12px !important;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #3b7dd8;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--violet);
    border-color: var(--violet);
}
/* Supprime les flèches directionnelles haut/bas (et gauche/droite) */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}