/* ============================================================
   AUTOBAHN — DESIGN SYSTEM
   Modifiez ce fichier → mis à jour sur toutes les pages
   ============================================================ */

/* ── IMPORTS POLICES ── */
@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/webfonts/geist-cyrillic-300-normal.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/webfonts/geist-cyrillic-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* ============================================================
   LOGO
   Pour changer le logo texte : modifiez --logo-text
   Pour passer à une image SVG : utilisez nav.js (voir commentaire)
   ============================================================ */
html {
  scrollbar-gutter: stable;
}

:root {
  --logo-text:    "Autobahn —";
  --logo-size:    13px;
  --logo-spacing: 0.06em;
  --nav-height: 80px;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
:root {
  --f-display: 'Geist', sans-serif;
  --f-mono:    'Courier New', Courier, monospace;
  --f-sans:    'DM Sans', system-ui, sans-serif;

  --fs-hero:     clamp(48px, 7vw, 96px);
  --fs-title:    clamp(32px, 4vw, 56px);
  --fs-subtitle: 18px;
  --fs-body:     15px;
  --fs-label:    11px;
  --fs-micro:    10px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;

  --lh-tight:    1.1;
  --lh-normal:   1.6;
  --lh-loose:    1.8;

  --ls-tight:    0.02em;
  --ls-normal:   0.06em;
  --ls-wide:     0.1em;
  --ls-xwide:    0.15em;
}

/* ============================================================
   COULEURS — MODE CLAIR
   ============================================================ */
:root {
  --c-bg:        #f5f4f0;
  --c-surface:   #e8e6e0;
  --c-ink:       #1a1a18;
  --c-slate:     #6b6860;
  --c-ash:       #c8c5bc;
  --c-accent:    #0038FF;
  --c-border:    rgba(26, 26, 24, 0.12);
  --nav-bg:      rgba(245, 244, 240, 0.92);
}

/* ── MODE SOMBRE ── */
[data-theme="dark"] {
  --c-bg:        #141412;
  --c-surface:   #1e1e1c;
  --c-ink:       rgba(245, 244, 240, 0.92);
  --c-slate:     rgba(245, 244, 240, 0.5);
  --c-ash:       rgba(245, 244, 240, 0.25);
  --c-border:    rgba(245, 244, 240, 0.1);
  --nav-bg:      rgba(20, 20, 18, 0.92);
}

/* ============================================================
   ESPACEMENTS
   ============================================================ */
:root {
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;
}

/* ============================================================
   ÉLÉMENTS GRAPHIQUES / EFFETS
   ============================================================ */
:root {
  --border-weight:   0.5px;
  --radius-sm:       4px;
  --radius-md:       8px;
  --nav-blur:        blur(12px);
  --transition:      0.3s ease;
  --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  cursor: url('./assets/cursor-hand.png') 9 0, auto;
  transition: var(--transition-theme);
}

a, button, [role="button"], input, select, textarea, label {
  cursor: url('./assets/cursor-hand-hover.png') 9 0, auto;
}
/* ============================================================
   NAVIGATION (commune à toutes les pages)
   ============================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 410;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px var(--space-lg);
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: var(--border-weight) solid var(--c-border);
  transition: var(--transition-theme);
}

.nav-logo {
  position: fixed;
  top: 0;
  left: var(--space-lg);
  height: var(--nav-height);
  font-family: var(--f-mono);
  display: flex;
  font-size: 13px;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  mix-blend-mode: difference;
  z-index: 420; /* au-dessus de la nav (410), du menu mobile (200) et de la page profil (400) */
  line-height: 1;
}
.nav-logo img { filter: brightness(0) invert(1); }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-controls {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-links {
  display: flex;
  gap: var(--space-md);
}

.nav-links a {
  font-family: 'Geist', sans-serif !important;
  font-weight: 300 !important;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-slate);
  text-decoration: none;
  transition: color 0.2s, font-weight 0.2s;
}
.nav-links a:hover  { color: var(--c-ink); }
.nav-links a.active { color: var(--c-ink); font-weight: 800 !important; border-bottom: 1px solid var(--c-ink); }

/* ── Sélecteur de langue ── */
.lang-switch {
  display: flex;
  border: var(--border-weight) solid var(--c-border);
  overflow: hidden;
  transition: border-color var(--transition);
}
.lang-btn {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-slate);
  background: none;
  border: none;
  padding: 6px 13px;
  border-right: var(--border-weight) solid var(--c-border);
  transition: background 0.2s, color 0.2s;
}
.lang-btn:last-child      { border-right: none; }
.lang-btn.active          { background: var(--c-ink); color: var(--c-bg); }
.lang-btn:hover:not(.active) { color: var(--c-ink); }

/* ── Toggle dark mode ── */
.theme-toggle {
  width: 36px;
  height: 20px;
  background: var(--c-surface);
  border: var(--border-weight) solid var(--c-border);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-slate);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s;
}
[data-theme="dark"] .theme-toggle::after {
  transform: translateX(16px);
  background: var(--c-ash);
}

/* ============================================================
   SECTIONS DE PAGE — CLASSES RÉUTILISABLES
   ============================================================ */
.page-header {
  padding: calc(var(--space-2xl) + var(--space-lg)) var(--space-lg) var(--space-xl);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: var(--border-weight) solid var(--c-border);
}

.section-label {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-ash);
  margin-bottom: 12px;
}

.page-title {
  font-family: var(--f-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.page-desc {
  font-family: var(--f-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-light);
  color: var(--c-slate);
  line-height: var(--lh-loose);
  max-width: 420px;
}

/* ── Footer ── */
footer {
  border-top: var(--border-weight) solid var(--c-border);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xl);
  transition: border-color 0.4s;
}
.footer-copy,
.footer-tag {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--c-ash);
  letter-spacing: var(--ls-normal);
}

/* ============================================================
   GESTION BILINGUE (FR / EN)
   ============================================================ */
.fr, .en          { display: none; }
body.lang-fr .fr  { display: inline; }
body.lang-en .en  { display: inline; }
span.fr, span.en  { display: none; }
body.lang-fr span.fr { display: inline; }
body.lang-en span.en { display: inline; }

/* ============================================================
   HAMBURGER — caché sur desktop
   ============================================================ */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  position: fixed; /* fixed = hors du stacking context du nav */
  right: var(--space-lg);
  top: calc(var(--nav-height) / 2);
  transform: translateY(-50%);
  z-index: 210; /* au-dessus du menu mobile (200) */
  color: #fff;
  /* drop-shadow : rend les barres lisibles sur fond clair ET sombre */
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)) drop-shadow(0 0 2px rgba(0,0,0,0.9));
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.77,0,0.175,1),
              opacity   0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   MENU MOBILE PLEIN ÉCRAN
   ============================================================ */
#mobileMenu {
  display: none; /* visible uniquement sur mobile via media query */
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-bg);
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--space-lg) 60px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events: none;
  overflow: hidden;
}
#mobileMenu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.mobile-nav-links a {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 11vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  opacity: 0.38;
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
  display: block;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.mobile-active { opacity: 1; }
[data-theme="dark"] .mobile-nav-links a { color: var(--c-ink); opacity: 0.38; }
[data-theme="dark"] .mobile-nav-links a:hover,
[data-theme="dark"] .mobile-nav-links a.mobile-active { opacity: 1; }

.mobile-menu-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: var(--border-weight) solid var(--c-border);
  padding-top: 24px;
  margin-top: 32px;
}

.mobile-lang {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-lang-btn {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ash);
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}
.mobile-lang-btn.active { color: var(--c-ink); }
.mobile-lang-sep {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-border);
}

.mobile-theme-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ash);
  transition: color 0.2s;
}
.mobile-theme-btn:hover { color: var(--c-ink); }
.mobile-theme-icon { font-size: 14px; }

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Variables */
  :root {
    --space-lg:  20px;
    --space-xl:  48px;
    --space-2xl: 64px;
    --nav-height: 60px;
  }

  /* Nav — on garde logo à gauche + hamburger à droite uniquement */
  nav { padding: 16px var(--space-lg); }
  .nav-links   { display: none !important; }
  .nav-controls { display: none !important; }
  .nav-hamburger { display: flex; }

  /* Logo : force en blanc pour que mix-blend-mode:difference fonctionne sur tout fond */
  .nav-logo img { filter: brightness(0) invert(1); }

  /* Nav : fond et blur supprimés sur mobile (logo + burger sont fixed indépendants) */
  nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  /* Menu plein écran */
  #mobileMenu { display: flex; }

  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: calc(var(--nav-height) + 32px) var(--space-lg) var(--space-md);
  }
  .page-desc {
    max-width: 100%;
    font-size: 14px;
    text-align: left;
  }

  /* Footer */
  footer {
    flex-direction: column;
    gap: 6px;
    padding: var(--space-md) var(--space-lg);
  }
}