/* =====================================================================
   QuickCar — THÈME FUTURISTE (surcouche, page d'accueil uniquement)
   Chargé APRÈS styles.css → surcharge le look public sans toucher
   aux pages internes (agenda, inspection) ni à la logique JS.
   ===================================================================== */

:root {
  --bg: #060912;
  --bg-2: #0a1020;
  --txt: #e9eef9;
  --muted: #93a1ba;
  --neon: #19e08a;
  --neon-2: #0fb978;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-2: rgba(255, 255, 255, 0.20);
  --font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}

html, body { background: var(--bg); color: var(--txt); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(25, 224, 138, 0.3); color: #fff; }
a { color: inherit; }
h1, h2, h3 { color: #fff; }

/* ---------- Fond animé (aurora + grille + bruit) ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -2; overflow: hidden; background:
    radial-gradient(1200px 800px at 70% -10%, #0d1830 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 110%, #0a1426 0%, transparent 55%),
    linear-gradient(180deg, #060912, #05070f); }
.bg-fx .blob { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(90px); opacity: 0.5; mix-blend-mode: screen; will-change: transform; }
.bg-fx .b1 { background: radial-gradient(circle, #19e08a, transparent 70%); top: -12%; left: 55%; animation: drift1 22s ease-in-out infinite; }
.bg-fx .b2 { background: radial-gradient(circle, #22d3ee, transparent 70%); bottom: -18%; left: -8%; animation: drift2 26s ease-in-out infinite; }
.bg-fx .b3 { background: radial-gradient(circle, #8b5cf6, transparent 70%); top: 35%; left: 25%; opacity: 0.35; animation: drift3 30s ease-in-out infinite; }
.bg-fx .grid { position: absolute; inset: -2px; background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(900px 600px at 70% 20%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 600px at 70% 20%, #000 0%, transparent 80%);
  animation: gridpan 40s linear infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw, 5vh) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw, -4vh) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw, 6vh) scale(1.18); } }
@keyframes gridpan { from { background-position: 0 0; } to { background-position: 54px 54px; } }

/* ---------- Header glass ---------- */
.site-header { background: rgba(8, 12, 22, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--stroke); }
.brand-name { color: #fff; }
.brand-name strong { color: var(--neon); text-shadow: 0 0 18px rgba(25, 224, 138, 0.55); }
.brand-logo { filter: drop-shadow(0 0 14px rgba(25, 224, 138, 0.5)); }
.main-nav a { color: var(--muted); position: relative; }
.main-nav a:hover { color: #fff; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: linear-gradient(90deg, var(--neon), var(--cyan)); transition: width .25s ease; border-radius: 2px; }
.main-nav a:hover::after { width: 100%; }

/* ---------- Boutons néon ---------- */
.btn-primary { background: linear-gradient(135deg, var(--neon), #14c9b0); color: #04231a; box-shadow: 0 0 0 1px rgba(25,224,138,0.5), 0 12px 36px -10px rgba(25, 224, 138, 0.7); position: relative; overflow: hidden; }
.btn-primary:hover { background: linear-gradient(135deg, #2bf29a, #1ad9c0); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(25,224,138,0.7), 0 18px 46px -10px rgba(25, 224, 138, 0.85); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn-primary:hover::after { left: 140%; }
.btn-light { background: var(--glass-2); color: #fff; border: 1px solid var(--stroke-2); backdrop-filter: blur(8px); }
.btn-light:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); box-shadow: 0 14px 36px -12px rgba(0,0,0,0.6); }
.header-inner .btn-primary { color: #04231a; }

/* ---------- Eyebrow mono ---------- */
.eyebrow { font-family: var(--font-mono); color: var(--neon); letter-spacing: 0.16em; font-size: 0.74rem; }
.eyebrow-dot { background: var(--neon); box-shadow: 0 0 0 4px rgba(25,224,138,0.18), 0 0 14px var(--neon); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------- Hero ---------- */
.hero { background: transparent; overflow: visible; }
.hero-bg { display: none; }
.hero-copy h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.hl { background: linear-gradient(120deg, var(--neon), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.35)); }
.lead { color: var(--muted); }
.lead strong { color: #fff; }
.trust-pills li { background: var(--glass); border: 1px solid var(--stroke); color: #d6e0f0; backdrop-filter: blur(6px); font-family: var(--font-mono); font-size: 0.78rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

/* ---------- Carte formulaire (glass premium) ---------- */
.hero-form-card { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border: 1px solid var(--stroke); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.10); position: relative; }
.hero-form-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(25,224,138,0.6), rgba(34,211,238,0.25), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.form-card-icon { background: linear-gradient(160deg, rgba(25,224,138,0.25), rgba(34,211,238,0.12)); border: 1px solid var(--stroke); box-shadow: 0 0 24px rgba(25,224,138,0.25); }
.form-title { color: #fff; }
.form-sub { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; }

/* ---------- Champs / selects (dark) ---------- */
.field label { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; font-size: 0.74rem; text-transform: uppercase; }
.field .opt { color: #6b7a92; }
.field input, .field select, .contact-block textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); color: #fff;
}
.field input::placeholder, .contact-block textarea::placeholder { color: #5f6e86; }
.field input:focus, .field select:focus, .contact-block textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(25,224,138,0.18), 0 0 22px rgba(25,224,138,0.25); background: rgba(255,255,255,0.06); }
.field select option { background: #0c1424; color: #fff; }
.select-wrap::after { border-color: var(--neon); }
.field input.invalid, .field select.invalid { border-color: #ff5d6c; box-shadow: 0 0 0 3px rgba(255,93,108,0.18); }
.form-hint { color: #6b7a92; font-family: var(--font-mono); font-size: 0.72rem; }

/* ---------- Résultat : HUD ---------- */
.result-section { background: transparent; }
.result-card { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); border: 1px solid var(--stroke); backdrop-filter: blur(18px); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08); }
.result-head h2 { color: #fff; font-family: var(--font-display); }
.result-price { background: linear-gradient(135deg, rgba(25,224,138,0.12), rgba(34,211,238,0.06)); border: 1px solid rgba(25,224,138,0.3); box-shadow: inset 0 0 40px rgba(25,224,138,0.08); }
.price-label { color: var(--neon); font-family: var(--font-mono); }
.price-value { font-family: var(--font-display); background: linear-gradient(120deg, #ffffff, var(--neon) 60%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(25,224,138,0.45)); }
.price-range { color: var(--muted); font-family: var(--font-mono); }
.meta-label { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; }
.meta-value { color: #fff; }
.badge { backdrop-filter: blur(6px); }
.badge.eleve { background: rgba(25,224,138,0.16); color: #5af0b0; box-shadow: 0 0 16px rgba(25,224,138,0.4); }
.badge.moyen { background: rgba(255,181,71,0.16); color: #ffce82; box-shadow: 0 0 16px rgba(255,181,71,0.35); }
.badge.faible { background: rgba(255,93,108,0.16); color: #ff95a0; box-shadow: 0 0 16px rgba(255,93,108,0.35); }
.result-argument { background: rgba(255,255,255,0.03); border-left: 3px solid var(--neon); color: #c9d4e6; border-radius: 0 12px 12px 0; box-shadow: 0 0 28px rgba(25,224,138,0.08); }
.result-factors h3, .result-benefits h3 { color: #fff; }
.result-factors li { background: var(--glass); border: 1px solid var(--stroke); color: #cdd8ea; }
.benefits-list li { background: linear-gradient(160deg, rgba(25,224,138,0.10), rgba(255,255,255,0.02)); border: 1px solid rgba(25,224,138,0.22); color: #d6e0f0; }
.benefits-list strong { color: #fff; }

/* Accept bar + RDV */
.accept-bar { background: linear-gradient(135deg, rgba(25,224,138,0.16), rgba(34,211,238,0.06)); border: 1px solid rgba(25,224,138,0.35); box-shadow: 0 0 40px rgba(25,224,138,0.15); }
.accept-text h3 { color: #fff; }
.accept-text p { color: #c4d0e2; }
.contact-block { border-top: 1px dashed var(--stroke); }
.contact-block h3 { color: #fff; }
.contact-block > p { color: var(--muted); }
.segmented label { background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); color: var(--muted); }
.segmented input:checked + label { background: rgba(25,224,138,0.16); border-color: var(--neon); color: #7af0bb; box-shadow: 0 0 18px rgba(25,224,138,0.3); }
.upload-zone { background: rgba(255,255,255,0.03); border: 1.5px dashed var(--stroke-2); }
.upload-zone:hover { border-color: var(--neon); background: rgba(25,224,138,0.06); }
.upload-text { color: var(--muted); }
.upload-text small { color: #6b7a92; }
.form-success { color: #5af0b0; }

/* ---------- Sections ---------- */
.section-title { color: #fff; font-family: var(--font-display); letter-spacing: -0.01em; }
.steps, .faq { background: transparent; }
.advantages { background: transparent; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.step, .adv { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--stroke); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; }
.step:hover, .adv:hover { transform: translateY(-5px); border-color: rgba(25,224,138,0.4); box-shadow: 0 24px 50px -22px rgba(0,0,0,0.7), 0 0 0 1px rgba(25,224,138,0.25); }
.step-num { background: linear-gradient(160deg, var(--neon), var(--cyan)); color: #04231a; box-shadow: 0 0 22px rgba(25,224,138,0.45); }
.step h3, .adv h3 { color: #fff; }
.step p, .adv p { color: var(--muted); }
.adv-icon { filter: drop-shadow(0 0 12px rgba(25,224,138,0.4)); }

/* FAQ */
.faq details { background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(8px); }
.faq summary { color: #fff; }
.faq summary::after { color: var(--neon); }
.faq details p { color: var(--muted); }

/* CTA final */
.cta-final { background: linear-gradient(135deg, rgba(25,224,138,0.16), rgba(34,211,238,0.10)); border-top: 1px solid rgba(25,224,138,0.3); border-bottom: 1px solid rgba(25,224,138,0.3); position: relative; overflow: hidden; }
.cta-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(25,224,138,0.25), transparent 70%); pointer-events: none; }
.cta-final h2 { color: #fff; position: relative; }
.cta-final p { color: #c4d0e2; position: relative; }

/* Footer */
.site-footer { background: #05070f; border-top: 1px solid var(--stroke); }
.footer-brand { color: #fff; }
.footer-brand strong { color: var(--neon); }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--neon); }
.footer-legal { color: #59667d; }

/* Cookie banner */
.cookie-banner { background: rgba(10, 16, 28, 0.92); border: 1px solid var(--stroke); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -18px rgba(0,0,0,0.8); }
.cookie-text { color: #c4d0e2; }
.cookie-text a { color: var(--neon); }

/* ---------- Apparitions au scroll ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bg-fx .blob, .bg-fx .grid, .eyebrow-dot { animation: none !important; }
}