/* =============================================================
   WSP Home v2 — Fond photo + zoom scroll vers la voiture
   Overrides only. Leaves home.css tokens & content styles intact.
   ============================================================= */

/* ---- Base tweaks so content sits cleanly on the photo ---- */
body {
  /* un peu plus chaud en neutre — sera piloté par Tweaks */
  background: #0b0d10;
}

/* Neutralise anything referencing the old road */
.road-stage, .mountains, .road-svg, .vehicle, .speedlines, .horizon, .clouds {
  display: none !important;
}

/* =========================================================
   ZOOM STAGE — fixed photo background, CSS-var driven
   --zoom  : current scale factor (1 = image fits viewport)
   --fx/--fy : focal point (% of the image) — the front car
   ========================================================= */
.zoom-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0b0d10;
  --fx: 46%;   /* car-x in image */
  --fy: 58%;   /* car-y in image */
  --zoom: 1;
  --bg-saturate: 1;
  --bg-contrast: 1;
  --bg-hue: 0deg;
  --bg-bright: 1;
}

.zoom-image {
  position: absolute;
  inset: 0;
  background-image: url("bg-landscape.png");
  background-image: image-set(
    url("bg-landscape.avif") type("image/avif"),
    url("bg-landscape.webp") type("image/webp"),
    url("bg-landscape.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: cover;                 /* fill viewport */
  background-position: var(--fx) var(--fy);
  transform-origin: var(--fx) var(--fy);
  transform: scale(var(--zoom));
  transition: transform 180ms linear, filter 400ms ease;
  filter:
    saturate(var(--bg-saturate))
    contrast(var(--bg-contrast))
    brightness(var(--bg-bright))
    hue-rotate(var(--bg-hue));
  will-change: transform;
}

/* Painterly vignette to blend content on top */
.zoom-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at var(--fx) var(--fy),
      rgba(0,0,0,0) 0%,
      rgba(4,8,14,0.15) 40%,
      rgba(4,8,14,0.55) 78%,
      rgba(4,8,14,0.88) 100%),
    linear-gradient(180deg,
      rgba(4,8,14,0.55) 0%,
      rgba(4,8,14,0.10) 15%,
      rgba(4,8,14,0.10) 70%,
      rgba(4,8,14,0.85) 100%);
  transition: opacity 300ms ease;
  opacity: var(--vignette-opacity, 1);
}

/* Subtle film grain — re-uses SVG noise data URI */
.zoom-grain {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =========================================================
   CONTENT — keep scrolling above the stage with stronger
   contrast chrome so it reads over the photo
   ========================================================= */
.scroll-doc { position: relative; z-index: 2; }
.topbar { z-index: 60; }
.ticknav { z-index: 50; }
.tweaks-panel { z-index: 70; }

/* Chapters: a soft dark glass so the content stays legible over
   whatever part of the photo is in frame */
.chapter .chapter-inner {
  position: relative;
}
.chapter:not(.hero-chapter):not(.proof-chapter):not(.cta-chapter) .chapter-inner::before {
  content: "";
  position: absolute;
  inset: -24px -32px;
  background: linear-gradient(180deg,
    rgba(6,10,18,0.72) 0%,
    rgba(6,10,18,0.82) 50%,
    rgba(6,10,18,0.72) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  z-index: -1;
}

/* Hero — leave transparent so the photo sings, but add a bottom fade */
.hero-chapter { background: transparent; }
.hero-chapter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40vh;
  background: linear-gradient(180deg, transparent 0%, rgba(4,8,14,0.7) 100%);
  pointer-events: none;
}

/* Proof / CTA keep their own styling but sit on dimmed photo */
.proof-chapter, .cta-chapter {
  background: rgba(6,10,18,0.78);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

/* =========================================================
   ZOOM INTENSITY tweaks — JS reads data attr, CSS maps vars
   ========================================================= */
[data-zoom-intensity="subtle"]     { --zoom-max: 1.6;  }
[data-zoom-intensity="balanced"]   { --zoom-max: 2.8;  }
[data-zoom-intensity="cinematic"]  { --zoom-max: 4.8;  }

[data-bg-tint="neutral"] .zoom-image { filter: saturate(1) contrast(1) brightness(1) hue-rotate(0deg); }
[data-bg-tint="warm"]    .zoom-image { filter: saturate(1.08) contrast(1.05) brightness(1.02) sepia(0.15) hue-rotate(-8deg); }
[data-bg-tint="cold"]    .zoom-image { filter: saturate(0.9) contrast(1.05) brightness(0.95) hue-rotate(180deg); }
[data-bg-tint="mono"]    .zoom-image { filter: saturate(0) contrast(1.1) brightness(0.95); }

[data-vignette="soft"]   .zoom-vignette { opacity: 0.75; }
[data-vignette="strong"] .zoom-vignette { opacity: 1; }
[data-vignette="off"]    .zoom-vignette { opacity: 0; }

[data-density="relaxed"]  .chapter { padding: 200px 0; }
[data-density="balanced"] .chapter { padding: 140px 0; }
[data-density="dense"]    .chapter { padding: 96px 0; }

/* =========================================================
   Small touches
   ========================================================= */
/* The hero spec card gets an extra shadow so it floats over photo */
.hero-spec {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.04) inset;
}

.scroll-hint { color: rgba(255,255,255,0.8); }

/* Tick nav: add text shadow for legibility */
.ticknav .lbl { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* =========================================================
   MOBILE OPTIMIZATIONS — < 768px
   Stack vertical, retire le rail latéral, retaille le hero,
   convertit la table radar en cards lisibles au pouce.
   ========================================================= */
@media (max-width: 768px) {
  /* Topbar: compacter pour libérer l'espace au CTA Démo produit */
  .topbar { padding: 0 14px; height: 56px; }
  .topbar .brand-name { font-size: 18px; }
  .topbar .brand-tag { display: none; }
  .topbar-right { gap: 10px; }
  .topbar-right .tb-link { display: none; }
  /* Garder uniquement Se connecter + Démo produit, dans cet ordre */
  .topbar-right a[href="/auth/login"].tb-link { display: inline-flex; font-size: 13px; }
  .tb-btn { padding: 8px 12px; font-size: 12.5px; }

  /* Ticknav: caché sur mobile, on libère toute la largeur */
  .ticknav { display: none; }
  .scroll-doc { padding-left: 0; }
  .chapter { padding: 64px 0 40px; min-height: auto; }
  .chapter-inner { padding: 0 16px; }

  /* Hero: titre qui tient à 375px sans débordement */
  .hero-chapter { padding-top: 84px; min-height: auto; }
  .hero-grid {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-grid > * { min-width: 0; max-width: 100%; }
  .hero-title {
    font-size: clamp(30px, 8.5vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .hero-sub { font-size: 15px; margin-bottom: 24px; max-width: 100%; }
  .hero-cta { gap: 10px; margin-bottom: 24px; }
  .btn-signal, .btn-ghost { padding: 11px 18px; font-size: 13.5px; }
  .hero-ticker {
    padding: 10px 12px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .hero-ticker-line { font-size: 12px; gap: 20px; }

  /* Hero spec card: padding réduit, prix retaillé */
  .hero-spec { padding: 20px; }
  .spec-model { font-size: 22px; }
  .spec-price { font-size: 34px; }
  .spec-price .eur { font-size: 18px; }
  .spec-price-row { gap: 10px; flex-wrap: wrap; }

  /* Scroll hint discret pour ne pas chevaucher le contenu */
  .scroll-hint { bottom: 16px; font-size: 9.5px; }

  /* Chapitres: head plus serré */
  .chap-head { margin-bottom: 24px; }
  .chap-title { font-size: clamp(26px, 6.5vw, 36px); line-height: 1.1; }
  .chap-title.big { font-size: clamp(32px, 8vw, 48px); }
  .chap-lede { font-size: 15px; line-height: 1.5; }
  .chap-head.align-right { text-align: left; margin-left: 0; }
  .chap-head.align-right .chap-lede { margin-left: 0; }

  /* Listing radar: la table devient une liste de cards verticales */
  .lm-toolbar { padding: 12px; gap: 10px; }
  .lm-search { min-width: 0; width: 100%; }
  .lm-meta { margin-left: 0; font-size: 10.5px; }
  .lm-thead { display: none; }
  .lm-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title   score"
      "meta    meta";
    gap: 10px 12px;
    padding: 14px 12px;
  }
  .lm-cell.lm-title { grid-area: title; }
  .lm-cell:nth-child(4) { grid-area: score; justify-self: end; }
  /* Prix + marché + signal regroupés sous le titre */
  .lm-row .lm-cell:nth-child(2),
  .lm-row .lm-cell:nth-child(3),
  .lm-row .lm-cell:nth-child(5) {
    grid-area: meta;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    font-size: 12px;
  }
  .lm-row .lm-cell:nth-child(2) { grid-column: 1; }
  .lm-row .lm-cell:nth-child(3) { grid-column: 1; justify-self: start; margin-left: 64px; }
  .lm-row .lm-cell:nth-child(5) { grid-column: 1 / -1; justify-self: start; }
  .lm-img { width: 44px; height: 36px; }
  .lm-model { font-size: 13px; }
  .lm-meta2 { font-size: 10.5px; }

  /* Score explainer: ring + breakdown serrés */
  .score-mock { gap: 16px; margin-top: 24px; }
  .score-left, .score-right { padding: 18px; }
  .sl-photo { height: 140px; }
  .sl-photo-price { font-size: 28px; bottom: 10px; right: 12px; }
  .sl-head h3 { font-size: 20px; }
  .sl-score-hero { padding: 14px; gap: 14px; flex-wrap: wrap; }
  .sl-score-ring svg { width: 92px; height: 92px; }
  .sl-score-num { font-size: 28px; }
  .exp-list li {
    grid-template-columns: 1fr 56px;
    grid-template-rows: auto auto auto;
    column-gap: 8px;
    padding: 10px 0;
  }
  .exp-label { grid-row: 1; grid-column: 1; font-size: 12.5px; }
  .exp-val { grid-row: 1; grid-column: 2; font-size: 12.5px; }
  .exp-bar { grid-row: 2; grid-column: 1 / -1; margin-top: 4px; }
  .exp-note { grid-row: 3; font-size: 10.5px; }
  .exp-foot { flex-direction: column; gap: 4px; align-items: flex-start; }

  /* KPI: 1 colonne pleine, fini les span 2 */
  .kpi-mock { padding: 16px; }
  .kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .kpi-card, .kpi-card.big, .kpi-card.wide { grid-column: span 1; padding: 16px; }
  .kpi-val { font-size: 30px; }
  .kpi-val .kpi-eur { font-size: 14px; }
  .kpi-spark { height: 48px; }
  .kpi-hist { height: 64px; }

  /* Proof: 2 colonnes, padding réduit */
  .proof-grid { margin-top: 24px; }
  .proof-cell { padding: 22px 16px; }
  .proof-val { font-size: 32px; }
  .proof-val .small { font-size: 16px; }
  .proof-lbl { font-size: 11px; margin-top: 8px; }

  /* Testimonials: padding compact */
  .testi-grid { gap: 12px; margin-top: 24px; }
  .testi-card { padding: 20px; gap: 16px; }
  .testi-card blockquote { font-size: 14.5px; }
  .testi-card.big blockquote { font-size: 16px; }
  .testi-stars { display: none; }

  /* Pricing: cards compactes, plus de translateY agressif */
  .pricing-grid { gap: 14px; margin-top: 24px; }
  .price-card { padding: 24px 20px; gap: 14px; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-2px); }
  .price-amount .mono { font-size: 44px; }
  .price-amount .eur { font-size: 22px; }
  .price-feat li { font-size: 12.5px; }

  /* FAQ: questions plus serrées */
  .faq-list { margin-top: 24px; }
  .faq-item summary { padding: 16px 18px; font-size: 14px; }
  .faq-item p { padding: 0 18px 18px; font-size: 13px; }

  /* CTA: box plein écran sans débordement */
  .cta-box { margin: 24px auto 32px; padding: 22px 18px; }
  .cta-form input { padding: 12px 14px; font-size: 13.5px; }
  .btn-signal.big { padding: 14px 20px; font-size: 14px; width: 100%; justify-content: center; }
  .cta-foot { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0 0; }
  .cta-foot-links { gap: 16px; flex-wrap: wrap; }

  /* Steps: card plus aérée à 1 colonne */
  .step { padding: 22px 18px; }

  /* Démo dropdown: en plein largeur, ancré sous la topbar */
  .demo-menu {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    min-width: 0;
    width: auto;
    transform: translateY(-6px);
  }
  .demo-menu.open { transform: translateY(0); }
  .demo-menu-item { padding: 14px 12px; font-size: 14.5px; }
}

/* Très petit (iPhone SE 320–360px): cran de plus */
@media (max-width: 380px) {
  .topbar-right { gap: 6px; }
  .topbar-right a[href="/auth/login"].tb-link { font-size: 12.5px; }
  .tb-btn { padding: 7px 10px; font-size: 12px; }
  .hero-title { font-size: clamp(26px, 8vw, 36px); }
  .spec-price { font-size: 30px; }
  .price-amount .mono { font-size: 38px; }
}

/* ============================================================
   FAQ Drawer (off-flow, opens via top bar link)
   ============================================================ */
.faq-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.faq-drawer[hidden] { display: none; }

.faq-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay, rgba(6, 13, 24, 0.72));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.faq-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  background: var(--bg-surface, #0a0908);
  border-left: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
  padding: 24px clamp(16px, 4vw, 32px) 48px;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
}

.faq-drawer.is-open .faq-drawer-backdrop { opacity: 1; }
.faq-drawer.is-open .faq-drawer-panel    { transform: translateX(0); }

.faq-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.faq-drawer-title {
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
}
.faq-drawer-title em {
  font-style: normal;
  color: var(--accent-signal, #e06a2c);
}

.faq-drawer-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.15));
  color: inherit;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.faq-drawer-close:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent-signal, #e06a2c);
  color: var(--accent-signal, #e06a2c);
}
.faq-drawer-close:focus-visible {
  outline: 2px solid var(--border-focus, var(--accent-signal, #e06a2c));
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .faq-drawer-panel {
    width: 100%;
    border-left: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-drawer-backdrop,
  .faq-drawer-panel { transition: none; }
}