/* =========================================================
   BASE — LuxurCars.ch
   Body, typographie, utilitaires globaux
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

/* ── Corps ─────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color:       var(--text-primary);
  background:  var(--bg-obsidian);
  transition:  background var(--transition-smooth), color var(--transition-smooth);
  /* NE PAS mettre overflow-x: hidden sur body — Chrome en fait un scroll container
     indépendant ce qui fait que les media queries se calculent sur la largeur du body
     plutôt que celle du viewport. Le clip sur html (reset.css) suffit. */
}

/* ── Texture de fond Vantablack avec profondeur ───────── */
body::before {
  content:  '';
  position: fixed;
  inset:    0;
  z-index:  0;
  pointer-events: none;

  /* Grain subtil */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    /* Halo rouge très subtil en haut */
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(166,43,43,0.07) 0%, transparent 70%),
    /* Vignette sombre sur les bords */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
  background-size: 300px 300px, cover, cover;
  mix-blend-mode: overlay;
}

/* Ligne de séparation subtile entre sections */
.section {
  position: relative;
}
.section + .section::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       50%;
  transform:  translateX(-50%);
  width:      60%;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 30%, rgba(166,43,43,0.12) 50%, rgba(255,255,255,0.04) 70%, transparent);
}

/* ── Container ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Headings ───────────────────────────────────────────── */
h1 {
  font-family:    var(--font-display);
  font-size:      var(--fs-h1);
  font-weight:    200;
  line-height:    var(--lh-tight);
  letter-spacing: -0.02em;
  color:          var(--text-primary);
}

h2 {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  line-height:    var(--lh-snug);
  letter-spacing: -0.015em;
  color:          var(--text-primary);
}

h3 {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    400;
  line-height:    var(--lh-snug);
  letter-spacing: -0.01em;
}

/* ── Display ────────────────────────────────────────────── */
.display {
  font-family:    var(--font-display);
  font-size:      var(--fs-display);
  font-weight:    200;
  line-height:    var(--lh-tight);
  letter-spacing: -0.03em;
}

/* ── Italic serif (noms modèles) ─────────────────────────── */
.serif-italic {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-weight:  400;
}

/* ── Mono (specs, prix) ──────────────────────────────────── */
.mono {
  font-family:         var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Eyebrow / caption ───────────────────────────────────── */
.eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* ── Section spacing ─────────────────────────────────────── */
.section {
  padding-block: var(--space-3xl);
}

.section--sm {
  padding-block: var(--space-xl);
}

/* ── Section title block ──────────────────────────────────── */
.section-header {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-sm);
  margin-bottom: var(--space-xl);
}

.section-header--center {
  align-items: center;
  text-align:  center;
}

/* ── Séparateur ───────────────────────────────────────────── */
.divider {
  width:      60px;
  height:     1px;
  background: var(--accent);
}

/* ── Text utilities ───────────────────────────────────────── */
.text-muted    { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent   { color: var(--accent); }

/* ── Price format ─────────────────────────────────────────── */
.price {
  font-family:         var(--font-mono);
  font-size:           var(--fs-small);
  font-weight:         500;
  color:               var(--accent);
  font-variant-numeric: tabular-nums;
}

.price--large {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── Visually hidden (a11y) ───────────────────────────────── */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:    -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Focus visible ────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
  border-radius:  1px;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-graphite); }
::-webkit-scrollbar-thumb { background: var(--bg-steel); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: var(--accent);
  color:      var(--text-primary);
}

/* ── Utilitaires de visibilité ───────────────────────────── */
/* Masqué sur desktop, visible uniquement sur mobile (≤768px) */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  /* Exceptions flex — le !important de mobile-only écrase display:flex sans ça */
  .mobile-wallet-hero {
    display: flex !important;
  }
}