/* =========================================================
   PAT Motors — Design System
   Variables, Reset, Base
   ========================================================= */

:root {
  /* Primaires */
  --rouge          : #f5101c;
  --rouge-sombre   : #c0000a;
  --rouge-hover    : #ff2a35;

  /* Neutres sombres */
  --noir           : #080808;
  --charbon        : #111111;
  --gris-fonce     : #1a1a1a;
  --gris-moyen     : #2a2a2a;
  --gris-texte     : #555555;

  /* Neutres clairs */
  --creme          : #f5f0ea;
  --blanc-casse    : #fafaf8;
  --blanc          : #ffffff;

  /* Accent luxe */
  --or             : #c9a84c;
  --or-clair       : #e8c96e;
  --or-sombre      : #a08030;

  /* Opacités utilitaires */
  --rouge-10       : rgba(245, 16, 28, 0.10);
  --blanc-10       : rgba(255, 255, 255, 0.10);
  --blanc-30       : rgba(255, 255, 255, 0.30);
  --blanc-60       : rgba(255, 255, 255, 0.60);
  --noir-60        : rgba(8, 8, 8, 0.60);
  --noir-90        : rgba(8, 8, 8, 0.90);

  /* Typographie */
  --font-display  : 'Cormorant Garamond', Georgia, serif;
  --font-body     : 'Montserrat', Helvetica, sans-serif;

  --text-xs       : 0.625rem;
  --text-sm       : 0.6875rem;
  --text-base     : 0.8125rem;
  --text-md       : 0.9375rem;
  --text-lg       : 1.25rem;
  --text-xl       : 1.5rem;
  --text-2xl      : 2rem;
  --text-3xl      : 3rem;
  --text-4xl      : 4rem;
  --text-hero     : clamp(3.5rem, 7vw, 6.5rem);

  --tracking-wide    : 0.08em;
  --tracking-caps    : 0.15em;
  --tracking-caps-lg : 0.25em;

  /* Layout */
  --gutter         : 60px;
  --gutter-md      : 40px;
  --gutter-sm      : 24px;
  --section-py     : 100px;
  --section-py-md  : 60px;
  --section-py-sm  : 48px;
  --radius-sm      : 2px;
  --radius-md      : 4px;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  color: var(--blanc);
  background: var(--noir);
  line-height: 1.65;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
}

.label, .tag {
  font-family: var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 1024px) {
  .container { padding: 0 var(--gutter-md); }
}

@media (max-width: 640px) {
  .container { padding: 0 var(--gutter-sm); }
}

/* --- Sections --- */
.section {
  padding: var(--section-py) 0;
}

@media (max-width: 1024px) {
  .section { padding: var(--section-py-md) 0; }
}

@media (max-width: 640px) {
  .section { padding: var(--section-py-sm) 0; }
}

.section--dark   { background: var(--noir); color: var(--blanc); }
.section--charbon { background: var(--charbon); color: var(--blanc); }
.section--light  { background: var(--blanc-casse); color: var(--noir); }
.section--creme  { background: var(--creme); color: var(--noir); }
.section--rouge  { background: var(--rouge); color: var(--blanc); }

/* --- Curseur custom --- */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  background: var(--rouge);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  mix-blend-mode: difference;
}

@media (max-width: 1024px) {
  .cursor-dot { display: none; }
}

/* --- Grain overlay --- */
.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}