/* ============================================================
   3D PARIS EXPRESS — Thème CLAIR "LAB"
   Fond blanc / gris clair · plus épuré · esprit laboratoire
   Surcharge styles.css + printer.css
   ============================================================ */
:root {
  /* --- Surfaces claires, légèrement froides --- */
  --bg:        oklch(0.984 0.003 255);
  --bg-2:      oklch(0.965 0.004 255);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.004 255);
  --line:      oklch(0.90 0.006 255);
  --line-soft: oklch(0.93 0.005 255);

  /* --- Encres sombres --- */
  --ink:   oklch(0.24 0.02 258);
  --ink-2: oklch(0.38 0.018 258);
  --ink-3: oklch(0.44 0.016 258);
  --ink-4: oklch(0.55 0.014 258);

  /* --- Bleu électrique, assombri pour le contraste sur blanc --- */
  --blue:      oklch(0.55 0.21 258);
  --blue-hi:   oklch(0.50 0.22 261);
  --blue-deep: oklch(0.44 0.21 262);
  --blue-glow: oklch(0.55 0.21 258 / 0.28);
  --cyan:      oklch(0.62 0.16 230);

  /* --- Ombres douces grises (au lieu du noir) --- */
  --shadow: 0 14px 38px -22px oklch(0.4 0.03 258 / 0.4);
  --shadow-blue: 0 14px 34px -16px var(--blue-glow);

  --glow: 0.5; /* effets lumineux atténués */
}

/* Grille de fond plus discrète et "millimétrée" */
body::before {
  background-image:
    linear-gradient(oklch(0.45 0.03 258 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.45 0.03 258 / 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 80%);
}

/* --- Boutons : texte blanc sur bleu --- */
.btn-primary { color: #fff; box-shadow: 0 8px 22px -10px var(--blue-glow); }
.btn-primary:hover { box-shadow: 0 14px 30px -10px var(--blue-glow); }
.btn-ghost { background: #fff; border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }

/* --- Nav claire --- */
.nav.scrolled { background: oklch(1 0 0 / 0.82); border-bottom-color: var(--line); }
.brand .logo svg path { stroke: #fff; }
.nav-links a:hover { background: var(--surface-2); }
.mobile-menu { background: oklch(0.99 0.003 258 / 0.97); }

/* --- Hero plus calme --- */
.hero-glow { opacity: calc(0.35 * var(--glow)); }
.hero-badge { background: #fff; }
.hero h1 .grad { background: linear-gradient(120deg, var(--blue-hi), var(--cyan)); -webkit-background-clip: text; background-clip: text; }

/* --- Cartes : à plat, plus épurées (esprit "fiche labo") --- */
.card { background: var(--surface); box-shadow: 0 1px 2px oklch(0.4 0.03 258 / 0.04); }
.card:hover { box-shadow: var(--shadow-blue); }
.card .icn { background: oklch(0.55 0.21 258 / 0.08); border-color: oklch(0.55 0.21 258 / 0.22); }

/* --- Matériaux --- */
.mat-row { background: var(--surface); }
.mat-row:hover { background: var(--surface-2); }
.bars i { background: var(--line); }

/* --- Timeline --- */
.tl-num { box-shadow: 0 0 0 6px var(--bg); }

/* --- Galerie : placeholders clairs "blueprint" --- */
.gal-ph {
  background:
    repeating-linear-gradient(135deg, oklch(0.95 0.004 258) 0 12px, oklch(0.915 0.006 258) 12px 24px);
}
.gal-ph span { color: var(--ink-4); }
.gal-overlay { background: linear-gradient(to top, oklch(0.18 0.02 258 / 0.86), transparent 62%); }
.gal-overlay b { color: #fff; }
.gal-tag-corner { background: oklch(1 0 0 / 0.82); border-color: var(--line); color: var(--ink-2); }
.filter { background: var(--surface); }
.filter.active { color: #fff; }

/* --- Témoignages --- */
.testi-av { background: var(--surface-2); }
.testi-quote-mark { opacity: .18; }

/* --- Devis --- */
.devis-aside {
  background:
    radial-gradient(circle at 20% 10%, oklch(0.55 0.21 258 / 0.10), transparent 55%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
}
.field input, .field select, .field textarea { background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px oklch(0.55 0.21 258 / 0.14); }
.dropzone { background: var(--surface-2); }
.dropzone:hover, .dropzone.drag { background: oklch(0.55 0.21 258 / 0.05); }
.recaptcha-slot { background: #fff; }

/* --- Footer --- */
.footer { background: var(--bg-2); }

/* --- Printer : textures de couches plus marquées sur blanc --- */
.printer-svg { filter: drop-shadow(0 24px 40px oklch(0.4 0.05 258 / 0.18)); }
.printer-svg .layer-line { stroke: oklch(0.55 0.21 258 / 0.45); }
.spec-chip { background: oklch(1 0 0 / 0.86); }
.spec-chip b { color: var(--ink); }

/* --- Hero vidéo : placeholder & voile clairs --- */
.hero-video-ph {
  background:
    radial-gradient(ellipse 80% 70% at 70% 42%, oklch(0.55 0.21 258 / 0.08), transparent 60%),
    repeating-linear-gradient(135deg, oklch(0.95 0.004 258) 0 14px, oklch(0.915 0.006 258) 14px 28px);
}
.hvp-icn { background: oklch(1 0 0 / 0.6); }
.hero-scrim {
  background: linear-gradient(90deg, var(--bg) 26%, transparent 58%);
}
@media (max-width: 920px) {
  .hero-scrim { display: none; }
}