/* ===== Thème BH22Car – Sérieux + Vacances ===== */
:root{
  /* Couleurs */
  --bg:#0b1220;            /* nuit marine */
  --bg-2:#0d1528;
  --card:#101a30;
  --line:#1a2844;
  --text:#eef2ff;
  --muted:#a8b0c2;
  --accent:#ff7b00;        /* coucher de soleil (CTA) */
  --accent-2:#00d4a6;      /* lagon (confiance) */
  --accent-3:#ffd166;      /* soleil doux (survols) */

  /* Ombres */
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Rayons */
  --r-lg: 16px;
  --r-xl: 22px;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background:var(--bg);
}
a{ color:var(--accent-2); text-decoration:none }
a:hover{ filter:brightness(1.08) }
.container{ width:min(1150px,92%); margin-inline:auto }
.flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.grid{ display:grid; gap:16px }
.center{ text-align:center }
.muted{ color:var(--muted) }
.hidden{ display:none }

/* Boutons */
.btn{ display:inline-block; padding:.95rem 1.25rem; border-radius:14px; font-weight:800; letter-spacing:.2px; }
.btn-sm{ padding:.6rem .9rem; font-weight:700 }
.btn-lg{ padding:1.15rem 1.45rem; font-size:1.06rem }
.btn-primary{
  background:linear-gradient(92deg,var(--accent),#ff9344 30%, var(--accent-2) 95%);
  color:#0b1220; border:0;
  box-shadow: 0 8px 20px rgba(255,123,0,.25), 0 4px 14px rgba(0,212,166,.15);
  transform:translateY(0); transition:transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 10px 26px rgba(255,123,0,.28), 0 6px 18px rgba(0,212,166,.2) }

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(8,12,24,.9), rgba(8,12,24,.6));
  backdrop-filter: blur(8px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.header-inner{ padding:.8rem 0 }
.logo{ font-weight:900; font-size:1.28rem; color:white }
.logo .brand{ color:var(--accent) }
.nav a{ margin-left:18px; color:var(--muted) }
.nav a:hover{ color:white }

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0,212,166,.15) 0%, transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #0d162c 60%, #0b1220 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('hero-bg.jpg'); /* ➜ remplace par une photo sombre “route + voiture + coucher de soleil” */
  background-size:cover; background-position:center;
  opacity:.20; mix-blend:screen;
}
.hero-inner{ padding:86px 0 42px; text-align:center; position:relative }
.hero h1{ font-size: clamp(1.9rem, 4.5vw, 3.2rem); margin:0 0 10px }
.hero .accent{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero p{ color:var(--muted); margin:0 0 22px }
.hero-microcopy{ margin-top:10px; color:var(--muted); font-weight:600 }

/* Trustbar */
.trustbar{ margin:16px auto 0; display:flex; justify-content:center; gap:16px }
.trust-item{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); padding:8px 12px; border-radius:999px;
}
.stars{
  letter-spacing:1px;
  background:linear-gradient(90deg, #ffd166, #ff7b00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Sections / cartes */
.section{ padding:56px 0 }
.section.alt{ background:var(--bg-2) }
.section h2{ margin:0 0 18px; font-size:1.58rem }

.form-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  background:var(--card); border:1px solid var(--line); padding:16px; border-radius:var(--r-lg);
  box-shadow:var(--shadow)
}
label{ display:grid; gap:6px; font-size:.96rem; color:#d7def0 }
input,select,textarea{
  width:100%; padding:.75rem .95rem; border-radius:12px; border:1px solid #203256; background:#0e1a32; color:white;
}
input:focus,select:focus,textarea:focus{ outline:2px solid #234a6a; border-color:#2a5c8c }
.options{ display:flex; gap:14px; flex-wrap:wrap; font-weight:600 }
.options input{ transform:translateY(1px) }

.cards{ grid-template-columns: repeat(auto-fit, minmax(250px,1fr)) }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative;
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.card img{ width:100%; height:176px; object-fit:cover; display:block; }
.card h3{ margin:12px 12px 0; display:flex; align-items:center; gap:8px }
.card .expand{ margin-left:auto; font-size:.9rem; color:#b9c2d6; cursor:pointer }
.card p{ margin:8px 12px 14px; color:var(--muted) }

/* Chips couleurs (flotte) */
.color-row{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px 14px }
.color-chip{
  border:1px solid #254273; background:#112244; color:#d9e7ff;
  padding:6px 12px; border-radius:999px; cursor:pointer; font-size:.9rem; font-weight:700;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.color-chip:hover{ transform:translateY(-1px); background:#153060; border-color:#2e5394 }

/* Features */
.features{ grid-template-columns: repeat(auto-fit, minmax(210px,1fr)) }
.features h4{ margin:.2rem 0 }
.features p{ color:var(--muted); margin:0 }

/* Quote / résultat */
.quote-result{ margin-top:16px; background:#0f1f3a; border:1px dashed #2a4a7a; padding:16px; border-radius:12px }
.devis-microcopy{ margin:8px 0 0; color:var(--muted); font-size:.95rem; font-weight:600 }

/* Preuve sociale bloc */
.proof-icons{ padding-top:28px; padding-bottom:0 }
.proof-grid{
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
}
.proof{
  display:flex; gap:10px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:12px;
}
.proof svg{ color:var(--accent-2); flex:0 0 auto }
.proof strong{ color:#e9eeff }
.proof span{ color:var(--muted) }

/* Calendrier */
.cal-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow) }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap }
.cal-model{ color:#d7def0 }
.cal-title{ font-weight:800 }
.calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px }
.calendar .dow{ text-align:center; font-size:.85rem; color:var(--muted); padding:6px 0 }
.calendar .cell{
  text-align:center; padding:10px 0; border-radius:10px; background:#0e1a32; border:1px solid #203256; user-select:none;
}
.calendar .cell.muted{ opacity:.45 }
.calendar .cell.available{ outline:1px dashed #2d7f5f }
.calendar .cell.partial{ background:#35240f; border-color:#5f3a12 }
.calendar .cell.full{ background:#3b1515; border-color:#6a1e1e }
.legend{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:middle; margin:0 6px 0 2px }
.legend.available{ background:#0e1a32; outline:1px dashed #2d7f5f }
.legend.partial{ background:#35240f }
.legend.full{ background:#3b1515 }
.scarcity-note{ margin-top:12px }
.partial-tag, .full-tag{ padding:2px 6px; border-radius:6px }
.partial-tag{ background:#35240f; color:#ffd166 }
.full-tag{ background:#3b1515; color:#ffb3b3 }

/* Testimonials */
.testimonials{ grid-template-columns: repeat(auto-fit, minmax(230px,1fr)) }
blockquote{ background:#0e1a32; border-left:4px solid var(--accent); margin:0; padding:14px; border-radius:10px }
cite{ display:block; margin-top:6px; color:var(--muted); font-style:normal }

/* Footer */
.site-footer{ border-top:1px solid var(--line) }
.footer-inner{ padding:24px 0; text-align:center; color:var(--muted); font-size:.96rem }

/* WhatsApp flottant (pulsation douce) */
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:var(--shadow); z-index:50;
  animation: waPulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover{ filter:brightness(1.05) }
@keyframes waPulse{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.06) }
}

/* Barre CTA mobile (optionnelle) */
.cta-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:linear-gradient(90deg, rgba(255,123,0,.95), rgba(0,212,166,.95));
  display:none; padding:10px 14px; backdrop-filter: blur(6px);
}
.cta-sticky .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.cta-sticky strong{ color:#0b1220 }
@media (max-width: 860px){ .cta-sticky{ display:block } }