/* =========================================================
   TOKENS — couleurs, typo, espacements, rayons, animations.
   Charte Stick Games : blanc / gris clair, rouge en accent, noir.
   Changez la marque ici uniquement.
   ========================================================= */
:root {
  /* Couleurs de marque */
  --c-red: #ed1c24;               /* rouge du logo */
  --c-red-dark: #cb1619;          /* rouge des bandeaux */
  --c-black: #111111;
  --c-white: #ffffff;
  --c-grey: #dcdcdc;              /* gris du fond de la DA */

  /* Rôles */
  --c-bg: #ececec;                /* fond général (si pas d'image) */
  --c-surface: #ffffff;           /* cartes, blocs */
  --c-surface-2: #e3e3e3;         /* hachures des placeholders */
  --c-text: var(--c-black);
  --c-text-muted: #5a5a5a;
  --c-text-on-dark: #ffffff;      /* texte posé sur vidéo / image / rouge */
  --c-accent: var(--c-red);
  --c-accent-contrast: #ffffff;
  --c-accent-2: var(--c-red-dark);
  --c-eyebrow: #ffffff;           /* surtitre du hero */
  --c-line: rgba(0, 0, 0, 0.1);
  --c-overlay: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); /* voile sur vidéo et images de jeux */
  --c-strip-bg: var(--c-black);   /* bandeau logos partenaires */

  /* Fond de page : motif répété (carré qui se raccorde sans couture) qui défile avec la page.
     --page-bg-size = taille d'affichage d'un carré : plus petit = joysticks plus petits. */
  --page-bg-color: #dedede;
  --page-bg-image: url("../assets/bg-tile-5.png");   /* joysticks blancs (carré 200 px) — autres : bg-tile-2 (gris), bg-tile-3 (rouge), bg-tile-4 (blancs petits, taille 100px) */
  --page-bg-size: 125px;
  --games-bg: url("../assets/background-waves.jpg");   /* fond de la section « Our Games » (none = motif ci-dessus) */

  /* Typographie */
  --font-display: "Rubik", system-ui, sans-serif;   /* titres, nav, boutons (Google Fonts, licence libre) */
  --font-body: "Inter", system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --lh-tight: .92;

  /* Mise en page */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 10vw, 140px);
  --header-h: 76px;

  /* Barre de navigation flottante */
  --bar-top: 42px;                 /* distance au haut de l'écran */
  --bar-inset: clamp(12px, 2.1vw, 40px); /* marge gauche/droite (≈40 px sur grand écran) */
  --bar-h: 66px;                   /* épaisseur (hauteur de la barre) */
  --bar-radius: 6px;
  --bar-blur: 18px;
  --bar-bg: rgba(255, 255, 255, .38);          /* translucide : la vidéo se voit à travers */
  --bar-bg-scrolled: rgba(255, 255, 255, .62); /* un peu plus opaque sur le contenu clair */
  --bar-text: #ffffff;              /* liens du menu */
  --nav-fs: 1rem;                    /* taille du texte du menu (16 px) */
  --bar-text-hover: var(--c-red);
  --bar-divider: rgba(0, 0, 0, .2);
  --logo-tile-bg: var(--c-black);
  --logo-tile-w: auto;

  /* Bouton graphique du hero (hauteur ; la largeur suit l'image) */
  --btn-img-h: clamp(42px, 3.6vw, 52px);

  /* Retrait du texte du hero par rapport au bord gauche de la barre (≈155 px sur grand écran) */
  --hero-text-indent: clamp(6px, 8vw, 155px);   /* retrait du texte après le bord gauche du logo (≈155 px sur grand écran) */

  /* Icônes réseaux sociaux (pied de page) */
  --social-size: 44px;

  /* Bannière de titre « Our Games » (hauteur ; la largeur suit l'image) */
  --title-img-h: clamp(54px, 6vw, 96px);
  --games-gap: clamp(16px, 2vw, 28px);
  --anchor-gap: 24px;   /* espace entre la barre et la bannière quand on clique sur « Our Games » */

  /* Reflet lumineux sur le logo : durée d'un cycle (passage + pause) */
  --shine-every: 2s;

  /* Formes */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .7s;
  --marquee-duration: 40s;
}