/* ==========================================================================
   THÈMES — seul fichier à modifier pour changer l'apparence du site.
   Le thème actif se règle dans data/settings.json ("theme") puis build.py,
   ou en direct avec le sélecteur de thème (stocké dans le navigateur).
   Chaque thème définit les mêmes tokens ; les composants ne lisent que ces tokens.
   ========================================================================== */

:root {
  /* Typographie */
  --font-display: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-display: 650;
  --tracking-display: -0.035em;

  /* Rayons, espacements, ombres */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-btn: 999px;
  --space-section: clamp(72px, 10vw, 140px);
  --container: 1240px;

  /* Animations (0 = coupées) */
  --motion: 1;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .6s;

  /* Palette de marque (fixe) */
  --carbon: #080B12;
  --white: #FFFFFF;
  --mist: #F5F7FA;
  --electric: #2563EB;
  --cyan: #00D4FF;
  --violet: #7C3AED;
}

/* ---- Theme 1 — Future Mobility (défaut, sombre) ---- */
[data-theme="future-mobility"] {
  --bg: #080B12;
  --bg-2: #0D1220;
  --surface: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.09);
  --text: #F2F5FA;
  --text-2: #A3ADC2;
  --accent: #2563EB;
  --accent-2: #00D4FF;
  --accent-text: #FFFFFF;
  --glow: 0 0 80px rgba(37,99,235,.35);
  --grad: linear-gradient(120deg, #2563EB 0%, #00D4FF 55%, #7C3AED 100%);
  --hero-bg: radial-gradient(60% 60% at 70% 40%, rgba(37,99,235,.35), transparent 70%),
             radial-gradient(40% 40% at 20% 80%, rgba(124,58,237,.25), transparent 70%), #080B12;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --photo-bg: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #e9eef7 60%, #cfd8e8 100%);
  --header-bg: rgba(8,11,18,.72);
  --warn-bg: rgba(250,204,21,.08);
  --warn-border: rgba(250,204,21,.35);
  color-scheme: dark;
}

/* ---- Theme 2 — Minimal Premium (clair) ---- */
[data-theme="minimal-premium"] {
  --bg: #FFFFFF;
  --bg-2: #F5F7FA;
  --surface: #F5F7FA;
  --surface-2: #EEF1F6;
  --border: #E3E8EF;
  --text: #0B0F17;
  --text-2: #4B5565;
  --accent: #0B0F17;
  --accent-2: #2563EB;
  --accent-text: #FFFFFF;
  --glow: 0 20px 60px rgba(11,15,23,.10);
  --grad: linear-gradient(120deg, #0B0F17, #2563EB);
  --hero-bg: radial-gradient(60% 60% at 70% 30%, #EEF3FF, transparent 70%), #FFFFFF;
  --card-bg: #FFFFFF;
  --photo-bg: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #f1f4f9 70%, #e6ebf3 100%);
  --header-bg: rgba(255,255,255,.8);
  --warn-bg: #FFF8E6;
  --warn-border: #F2D27A;
  --fw-display: 600;
  --radius-l: 20px;
  color-scheme: light;
}

/* ---- Theme 3 — Tech Gradient ---- */
[data-theme="tech-gradient"] {
  --bg: #0B0718;
  --bg-2: #140C2B;
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.09);
  --border: rgba(167,139,250,.18);
  --text: #F5F3FF;
  --text-2: #B9B2D6;
  --accent: #7C3AED;
  --accent-2: #00D4FF;
  --accent-text: #FFFFFF;
  --glow: 0 0 90px rgba(124,58,237,.45);
  --grad: linear-gradient(120deg, #7C3AED 0%, #00D4FF 100%);
  --hero-bg: radial-gradient(50% 60% at 75% 35%, rgba(124,58,237,.5), transparent 70%),
             radial-gradient(45% 45% at 15% 75%, rgba(0,212,255,.25), transparent 70%), #0B0718;
  --card-bg: linear-gradient(160deg, rgba(124,58,237,.10), rgba(0,212,255,.04));
  --photo-bg: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #ece8fb 65%, #d9d2f5 100%);
  --header-bg: rgba(11,7,24,.72);
  --warn-bg: rgba(250,204,21,.08);
  --warn-border: rgba(250,204,21,.35);
  --radius-l: 32px;
  color-scheme: dark;
}

/* ---- Theme 4 — Luxury Dark ---- */
[data-theme="luxury-dark"] {
  --bg: #050506;
  --bg-2: #0E0E11;
  --surface: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.06);
  --border: rgba(214,219,227,.12);
  --text: #ECEDEF;
  --text-2: #9A9DA6;
  --accent: #D6DBE3;
  --accent-2: #8E96A3;
  --accent-text: #050506;
  --glow: 0 0 70px rgba(214,219,227,.12);
  --grad: linear-gradient(120deg, #F4F5F7 0%, #8E96A3 100%);
  --hero-bg: radial-gradient(55% 55% at 70% 40%, rgba(214,219,227,.10), transparent 70%), #050506;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  --photo-bg: radial-gradient(70% 70% at 50% 45%, #fafafa 0%, #e7e8eb 65%, #cdd0d6 100%);
  --header-bg: rgba(5,5,6,.75);
  --warn-bg: rgba(214,219,227,.05);
  --warn-border: rgba(214,219,227,.25);
  --font-display: "Plus Jakarta Sans", "Geist", system-ui, sans-serif;
  --fw-display: 500;
  --tracking-display: -0.02em;
  --radius-btn: 6px;
  --dur: .9s;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) { :root { --motion: 0; --dur: 0s; } }