/* ============================================================
   Design tokens — façon Netflix (noir + rouge)
   ============================================================ */

@font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* — Surfaces — */
  --bg:        #141414;   /* fond principal Netflix */
  --bg-deep:   #000000;
  --header:    #141414;
  --card:      #2a2a2a;   /* carte sans image / panneau survol */
  --card-hi:   #333333;
  --line:      rgba(255, 255, 255, 0.14);
  --line-hi:   rgba(255, 255, 255, 0.28);

  /* — Texte — */
  --text:   #ffffff;
  --muted:  #b3b3b3;
  --faint:  #808080;

  /* — Accent : rouge Netflix — */
  --red:        #e50914;
  --red-hover:  #f40612;
  --red-dim:    rgba(229, 9, 20, 0.16);
  --accent:     var(--red);
  --accent-dim: var(--red-dim);
  --good:       #46d369;   /* vert « match » Netflix */
  --star:       #f5c518;
  --danger:     #e50914;

  /* — Typographie : grotesque propre (pas de fioritures) — */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Consolas', ui-monospace, monospace;

  /* — Rayons (Netflix : presque carré) — */
  --r-xs: 3px;
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* — Ombres — */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.75);

  /* — Mouvement — */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.12s;
  --t: 0.3s;
  --t-slow: 0.5s;

  /* — Espacement — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --nav-h: 68px;
  --row-gap: 4px;          /* écart entre vignettes d'une rangée */
  --edge: 60px;            /* marge latérale Netflix */
}