/* Evan Prod — jetons de design (direction artistique « Pose longue »). Voir ../../design.md */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Couleurs — contrastes vérifiés sur --asphalte : brume 16,4 · beton 7,4 · feu 5,6 · sodium 9,6 */
  --asphalte: #0A0B0D;   /* fond principal */
  --carbone:  #141619;   /* surfaces, cartes, pied de page */
  --ligne:    #2A2D33;   /* filets, bordures (décoratif) */
  --brume:    #EDEAE4;   /* texte principal */
  --beton:    #9B9FA7;   /* texte secondaire */
  --feu:      #FF3B2F;   /* accent unique : bouton principal (texte asphalte), traînées, REC, focus */
  --sodium:   #F2A541;   /* timecodes, numéros de plan */
  --feu-halo: rgba(255, 59, 47, .55);
  --voile: linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,0) 55%, rgba(10,11,13,.92) 100%);

  /* Polices */
  --font: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --wdth-titre: 125%;
  --wdth-etiquette: 112%;
  --wdth-texte: 100%;

  /* Échelle typographique fluide (390 → 1440 px) */
  --fs-mega:  clamp(3rem, 1.2rem + 7.4vw, 8.5rem);
  --fs-h1:    clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  --fs-h2:    clamp(2rem, 1.3rem + 2.9vw, 3.75rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  --fs-lead:  clamp(1.125rem, 1.04rem + .35vw, 1.375rem);
  --fs-body:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-mono:  clamp(.75rem, .72rem + .12vw, .8125rem);
  --lh-titre: .9;
  --lh-texte: 1.6;
  --ls-titre: -.02em;
  --ls-etiquette: .06em;
  --ls-mono: .08em;
  --mesure: 62ch;

  /* Espacements (échelle 4/8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(96px, 60px + 9vw, 176px);
  --gutter: clamp(20px, 8px + 3vw, 48px);
  --gap: 24px;
  --wrap: 1320px;
  --nav-h: 72px;
  --bande-cinema: 9vh;

  /* Rayons */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Ombres et halos */
  --ombre-carte: 0 24px 48px -24px rgba(0, 0, 0, .7);
  --ombre-dialog: 0 40px 120px rgba(0, 0, 0, .8);
  --halo-feu: 0 0 12px 1px var(--feu-halo);
  --filet-interieur: inset 0 0 0 1px var(--ligne);

  /* Mouvement */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;
  --dur-ouverture: 1.1s;
  --stagger: 80ms;
  --stagger-mot: 70ms;
  --rec-pulse: 1.6s;
  --marquee: 40s;
  --radar: 12s;

  /* Couches */
  --z-grain: 40;
  --z-nav: 50;
  --z-menu: 60;
  --z-dialog: 70;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; --marquee: 30s; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; --dur-ouverture: 0s;
    --stagger: 0ms; --stagger-mot: 0ms;
  }
}