/* ========== BASE ========== */
:root{
  --gold:#ffd500;
  --text:#222;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Roboto", Arial, sans-serif;
  color: var(--text);
  line-height:1.6;
  background:#fff;
}
h1,h2,h3{ font-family:"Playfair Display", serif; margin:0 0 10px; }
.container{ width:90%; max-width:1100px; margin:0 auto; }
.page-section{ padding:60px 0; }
.alt-bg{ background:#f8f8f8; }

/* ========== HEADER ========== */
header{ background:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,.06); }
header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; }
.logo{ font-weight:700; text-decoration:none; color:#000; }
nav ul{ list-style:none; display:flex; gap:16px; padding:0; margin:0; }
nav a{ text-decoration:none; color:#333; }
nav a:hover{ color:#000; }

/* Dropdown simple */
.dropdown{ position:relative; }
.dropbtn{ display:inline-flex; align-items:center; gap:6px; }
.dropdown-content{ display:none; position:absolute; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px; top:120%; left:0; min-width:220px; z-index:200; }
.dropdown:hover .dropdown-content{ display:block; }
.dropdown-content a{ display:block; padding:8px 10px; color:#333; }

/* ========== DRAPEAUX FR / EN ========== */
.lang-switcher{ display:flex; gap:12px; align-items:center; }
.lang-flag{ width:44px; height:auto; display:inline-block; cursor:pointer; }
.lang-flag.active{ outline:2px solid var(--gold); border-radius:4px; }

/* ========== HERO ========== */
#hero{
  position: relative;
  background: url("images/Paris-by-Night.jpg") center/cover no-repeat fixed;
  min-height: 88vh;
}
.hero-overlay{
  position: absolute; inset:0;
  background: rgba(0,0,0,0.60);
}
.hero-content{
  position: relative; z-index:2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  padding-top: 80px; /* si header fixe */
}
#hero h1,#hero p{ color:#fff; }

/* Formulaire principale – on garde ta structure/champs */
.booking-form{ margin-top: 18px; }
.form-row{ display:flex; gap:12px; flex-wrap:wrap; }
.booking-type-selector{ display:flex; gap:10px; margin-bottom:12px; }
.booking-type-btn{ padding:8px 14px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.booking-type-btn.active{ background:var(--gold); color:#000; border-color:var(--gold); }

.hidden{ display:none !important; }

/* Paiement */
.payment-buttons{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.stripe-btn{ background:var(--gold); border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:700; }
#paypal-button-container{ min-width: 250px; }

/* ========== SERVICES ========== */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:20px; }
.service-card{ background:#fff; border:1px solid #eee; padding:18px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.service-card i{ font-size:28px; color:#333; margin-bottom:10px; display:block; }

/* ========== VÉHICULES ========== */
.vehicules-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:22px; margin-top:25px; }
.vehicule-card{ background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.08); }
.vehicule-card img{ width:100%; display:block; }
.vehicule-content{ padding:14px; }
.vehicule-specs{ display:flex; gap:12px; color:#666; font-size:.95rem; }

/* ========== CONTACT ========== */
.contact-form{ display:grid; gap:12px; max-width:640px; margin:0 auto; }
.contact-form input,.contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:1rem;
}
.contact-form button{
  background:var(--gold); color:#000; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:700;
}

/* ========== FOOTER / FLOATS ========== */
footer{ background:#111; color:#bbb; padding:24px 0; margin-top:40px; }
.footer-content{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-content a{ color:#fff; }

.reserver-float, .whatsapp-float{
  position:fixed; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px;
  background:#25D366; color:#fff; text-decoration:none; padding:10px 14px; border-radius:999px; box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.reserver-float{ bottom:74px; background:var(--gold); color:#000; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px){
  #hero{ background-attachment: scroll; }
  .form-row{ flex-direction:column; }
  nav ul{ flex-wrap:wrap; }
}
/* ========= THEME DARK + OR (override) ========= */
:root{
  --bg:#0e0e0f;          /* fond site (noir très foncé) */
  --panel:#1b1b1d;       /* panneaux/formulaires */
  --panel-2:#222225;     /* survols / variantes */
  --text:#ddd;           /* texte principal */
  --muted:#a0a0a8;       /* texte secondaire */
  --gold:#d4af37;        /* or (liserés/boutons) */
  --gold-2:#f1d46a;      /* or clair (hover) */
  --line:#2c2c2f;        /* séparateurs */
}

/* Fond global + texte */
body{ background:var(--bg); color:var(--text); }

/* Titres */
h1,h2,h3{ color:var(--gold); }

/* ====== HEADER ====== */
header{ background:#0b0b0c; border-bottom:1px solid #141416; }
nav a{ color:#cfcfd5; }
nav a:hover{ color:#fff; }

/* ====== HERO ====== */
#hero{
  background: url("images/Paris-by-Night.jpg") center/cover no-repeat fixed;
  min-height: 78vh;
}
.hero-overlay{ background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.75)); }
#hero h1{ color:#fff; letter-spacing:.3px; }
#hero p{ color:#e6e6ea; }

/* ====== FORMULAIRE DE RÉSERVATION (inchangé côté HTML) ====== */
.booking-form{
  background:var(--panel);
  border:1px solid var(--gold);
  border-radius:10px;
  padding:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  max-width: 540px;
  margin: 0 auto;
}
.booking-type-selector{ display:flex; background:#0f0f11; border:1px solid var(--line); padding:4px; border-radius:8px; }
.booking-type-btn{
  flex:1; padding:8px 10px; border:none; background:transparent; color:#cfcfd5; cursor:pointer; border-radius:6px;
}
.booking-type-btn.active{ background:var(--gold); color:#000; font-weight:700; }

.form-row{ display:flex; gap:10px; margin:8px 0; }
.form-row input, .booking-form textarea{
  background:#121214; color:#eee; border:1px solid #303035; border-radius:6px;
  padding:10px 12px; width:100%;
}
.form-row input::placeholder, .booking-form textarea::placeholder{ color:#8f8f95; }
.booking-form textarea{ min-height:80px; }

/* Bouton calculer / suivant / etc. */
#calculatePriceBtn, #calculateHourlyPriceBtn, #nextBtn, #backBtn, #confirmBtn{
  background:var(--gold); color:#000; border:none; padding:10px 14px; border-radius:6px; cursor:pointer; font-weight:700;
}
#calculatePriceBtn:hover, #calculateHourlyPriceBtn:hover, #nextBtn:hover, #backBtn:hover, #confirmBtn:hover{
  background:var(--gold-2);
}

/* ====== Cartes services ====== */
.service-card{
  background:var(--panel);
  border:1px solid var(--line);
  color:#d7d7dd;
}
.service-card i{ color:var(--gold); }

/* ====== Flotte ====== */
.vehicule-card{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.vehicule-content h3{ color:#f0f0f3; }
.vehicule-specs{ color:var(--muted); }

/* ====== Paiement ====== */
.payment-buttons .stripe-btn{
  background:var(--gold); color:#000; border:none; font-weight:700;
}
.payment-buttons .stripe-btn:hover{ background:var(--gold-2); }
#paypal-button-container{ filter:saturate(1.1) contrast(1.05); }

/* ====== Footer & boutons flottants ====== */
footer{ background:#0b0b0c; color:#bdbdc5; border-top:1px solid #141416; }
.footer-content a{ color:#fff; }

.reserver-float{ background:var(--gold); color:#000; }
.whatsapp-float{ background:#25D366; }

/* ====== Divers ====== */
.section-title{ color:var(--gold); }
.alt-bg{ background:#101012; }
.dropdown-content{ background:#0f0f11; border:1px solid #1b1b1f; }
.dropdown-content a{ color:#d7d7dd; }
.dropdown-content a:hover{ background:#151518; }

/* Responsive */
@media (max-width:768px){
  #hero{ background-attachment:scroll; }
  .form-row{ flex-direction:column; }
}