/* Hopyou VTC – Styles principaux (clean) */
/* ========================================================================== */
/* Reset & variables */
/* ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --primary-violet:#6D28D9;
  --primary-purple:#A78BFA;
  --gradient-primary:linear-gradient(135deg,#6D28D9,#A78BFA);
  --gradient-soft:linear-gradient(135deg,#E9D5FF,#F3E8FF);
  --white:#fff;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937;
  --success:#10b981; --error:#ef4444; --warning:#f59e0b; --info:#3b82f6;
  --radius:12px;
  --shadow-soft:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-medium:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --transition:all .3s cubic-bezier(.4,0,.2,1);

  /* Header compact */
  --bg-elev:rgba(255,255,255,.95);
  --text:#111827; --muted:#6b7280;
  --brand:#0ea5e9; --brand-strong:#0284c7; --ring:#93c5fd;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --maxw:1200px; --gap:8px; --padY:6px; --padX:16px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ========================================================================== */
/* Base */
/* ========================================================================== */
html { -webkit-text-size-adjust:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6; color:#2d3748; background:#f7fafc; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ========================================================================== */
/* Header */
/* ========================================================================== */
.header{
  position:relative; background:var(--bg-elev);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:var(--shadow); border-bottom:1px solid rgba(109,40,217,.1);
  overflow:visible; /* pour autocomplétion */
}
.header .container{
  max-width:var(--maxw); padding:var(--padY) var(--padX);
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  min-height:60px;
}
.header-left{display:flex;align-items:center;gap:8px;min-width:0;}
.logo{display:inline-flex;align-items:center;text-decoration:none;}
.logo-img{width:35px;height:auto;display:block;transition:var(--transition);}
.logo:hover{opacity:.9;transform:scale(1.02);}
.tagline{margin:0;font:500 11px/1.2 var(--font);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.assistance-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);
  background:var(--brand);color:#fff;font:600 13px/1 var(--font);text-decoration:none;
  box-shadow:0 2px 6px rgba(2,132,199,.2);transition:.15s; border:2px solid transparent;
}
.assistance-btn:hover{background:var(--brand-strong);transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,132,199,.25);}
.assistance-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}
.headphone-icon{font-size:14px;line-height:1;}
.nav-link{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:6px;
  color:var(--text);text-decoration:none;font:600 13px/1 var(--font);transition:.15s;
}
.nav-link:hover{background:rgba(2,132,199,.06);color:var(--brand-strong);}
.nav-link:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}

/* ========================================================================== */
/* Main & hero */
/* ========================================================================== */
.main{min-height:calc(100vh - 180px);padding:1.5rem 0;overflow:visible;}
.hero-section{
  text-align:center;padding:3rem 0;background:var(--gradient-soft);
  border-radius:var(--radius);margin-bottom:2rem;
}
.hero-content h1{font-size:3rem;font-weight:800;color:var(--gray-800);margin-bottom:1rem;line-height:1.1;}
.hero-subtitle{font-size:1.25rem;color:var(--gray-600);margin-bottom:2rem;font-weight:500;}
.hero-features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;max-width:800px;margin:0 auto;
}
.feature{background:var(--white);padding:1rem;border-radius:8px;font-weight:600;color:var(--primary-violet);box-shadow:var(--shadow-soft);}

/* ========================================================================== */
/* Steps */
/* ========================================================================== */
.steps-nav{display:flex;justify-content:center;margin-bottom:2rem;gap:1rem;}
.step{
  padding:.75rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;
  background:var(--gray-200);color:var(--gray-600);transition:var(--transition);
}
.step.active{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-soft);}
.step.completed{background:var(--success);color:#fff;}

/* ========================================================================== */
/* Sections */
/* ========================================================================== */
.section-card,
.booking-section,.trip-summary,.vehicle-selection,.checkout-form-section,
.success-section,.cancel-section,.services-section,.why-choose-section{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-soft);
  padding:2rem;margin-bottom:2rem;overflow:visible; /* dropdown Places */
}
.booking-header,.why-choose-header,.services-header{text-align:center;margin-bottom:2rem;}
.booking-header h2,.why-choose-header h2,.services-header h2{
  font-size:2.25rem;font-weight:800;color:var(--gray-800);margin-bottom:.5rem;
}
.booking-header p,.services-header p{font-size:1.1rem;color:var(--gray-600);}

/* ========================================================================== */
/* Services */
/* ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem;}
.service-card{text-align:center;padding:2rem;background:var(--gradient-soft);border-radius:var(--radius);transition:var(--transition);border:2px solid transparent;}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-medium);border-color:var(--primary-purple);}
.service-icon{font-size:2.5rem;margin-bottom:1rem;}
.service-card h3{font-size:1.25rem;font-weight:700;color:var(--gray-800);margin-bottom:.75rem;}
.service-card p{color:var(--gray-600);line-height:1.5;}

/* ========================================================================== */
/* Formulaires – 1 champ par ligne */
/* ========================================================================== */
.booking-form,.checkout-form{max-width:640px;margin:0 auto;}
.form-row{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.25rem;}
.form-group{display:flex;flex-direction:column;}
.form-group label{font-weight:600;color:var(--gray-700);margin-bottom:.5rem;font-size:.95rem;}
.form-group input,.form-group select{
  padding:.875rem 1rem;border:2px solid var(--gray-200);border-radius:8px;font-size:16px; /* évite zoom iOS */
  transition:var(--transition);background:var(--white);
}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-violet);box-shadow:0 0 0 3px rgba(109,40,217,.1);}
.form-group input::placeholder{color:#9ca3af;}
.form-group input.error,.form-group select.error{border-color:var(--error);}

/* petite aide sous champ */
.help-txt{color:#6b7280;font-size:.85rem;margin-top:.35rem;}

/* ========================================================================== */
/* Paiement */
/* ========================================================================== */
.payment-options{margin:2rem 0;}
.payment-options h3{font-size:1.1rem;font-weight:700;color:var(--gray-800);margin-bottom:1rem;}
.payment-choice{margin-bottom:1rem;}
.payment-choice input[type="radio"]{display:none;}
.payment-option{
  display:block;padding:1.25rem;border:2px solid var(--gray-200);border-radius:8px;cursor:pointer;
  transition:var(--transition);background:var(--white);
}
.payment-choice input[type="radio"]:checked + .payment-option{
  border-color:var(--primary-violet);background:var(--gradient-soft);box-shadow:var(--shadow-soft);
}
.payment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.5rem;}
.recommended-badge{background:var(--success);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;}
.payment-description{color:var(--gray-600);margin-bottom:.5rem;}
.payment-benefits{font-size:.9rem;color:var(--gray-700);line-height:1.4;}

/* ========================================================================== */
/* Boutons */
/* ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.875rem 1.5rem;border:none;border-radius:8px;font-weight:600;font-size:1rem;
  text-decoration:none;transition:var(--transition);cursor:pointer;width:100%;
}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-soft);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:2px solid var(--gray-200);}
.btn-secondary:hover{background:var(--gray-200);transform:translateY(-1px);}
.btn-large{padding:1.125rem 2rem;font-size:1.1rem;margin-top:1rem;}
.btn-payment{background:linear-gradient(135deg,#1a56db,#3b82f6);}
.payment-amount{margin-left:auto;font-weight:800;}

/* ========================================================================== */
/* Messages */
/* ========================================================================== */
.error-messages{margin-bottom:1.25rem;}
.error-message{
  background:#fef2f2;color:#dc2626;padding:.875rem 1rem;border-radius:8px;border:1px solid #fecaca;
  margin-bottom:.5rem;font-size:.9rem;
}
.demo-notice,.payment-notice{
  background:#fff3cd;color:#856404;padding:1rem;border-radius:8px;margin:1rem 0;border-left:4px solid #ffc107;
}

/* ========================================================================== */
/* Véhicules */
/* ========================================================================== */
.vehicles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem;}
.vehicle-card{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-soft);
  padding:1.5rem;border:2px solid var(--gray-100);transition:var(--transition);display:flex;flex-direction:column;
}
.vehicle-card:hover{transform:translateY(-5px);border-color:var(--primary-purple);box-shadow:var(--shadow-medium);}
.vehicle-image{
  text-align:center;margin-bottom:1.25rem;height:170px;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);border-radius:8px;
}
.vehicle-image img{max-width:100%;max-height:150px;object-fit:contain;border-radius:8px;}
.vehicle-placeholder{padding:40px;text-align:center;color:var(--gray-600);font-size:1.05rem;font-weight:600;}
.vehicle-info h3{font-size:1.35rem;font-weight:700;color:var(--gray-800);margin-bottom:.5rem;}
.vehicle-description{color:var(--gray-600);margin-bottom:1rem;}
.vehicle-specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.spec{background:var(--gray-100);color:var(--gray-700);padding:.25rem .75rem;border-radius:15px;font-size:.85rem;font-weight:600;}
.vehicle-price{text-align:center;margin-bottom:1rem;}
.price{font-size:1.9rem;font-weight:800;color:var(--primary-violet);}
.price-note{color:#6b7280;font-size:.9rem;margin-left:.5rem;}
.vehicle-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;}
.badge{background:var(--gradient-soft);color:var(--primary-violet);padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;}
.selection-info{
  text-align:center;margin-bottom:2rem;padding:1rem;background:var(--gradient-soft);
  border-radius:8px;color:var(--gray-700);font-weight:500;
}
.no-vehicles{text-align:center;padding:3rem;color:var(--gray-600);}

/* ========================================================================== */
/* Récapitulatif & total */
/* ========================================================================== */
.summary-card{background:var(--gray-50);border-radius:var(--radius);padding:1.5rem;border:2px solid var(--gray-100);}
.summary-section{margin-bottom:1.25rem;}
.summary-section:last-child{margin-bottom:0;}
.summary-section h4{
  font-size:1.05rem;font-weight:700;color:var(--gray-800);margin-bottom:.75rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--primary-purple);
}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--gray-200);}
.summary-row:last-child{border-bottom:none;}
.summary-row.highlight{background:var(--gradient-soft);margin:0 -1rem;padding:.75rem 1rem;border-radius:8px;}
.label{font-weight:600;color:var(--gray-700);}
.value{color:var(--gray-800);text-align:right;flex:1;margin-left:1rem;}
.summary-total{background:var(--primary-violet);color:#fff;padding:1rem;border-radius:8px;margin-top:1rem;}
.total-row{display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:700;}

/* ========================================================================== */
/* Pages succès / annulation */
/* ========================================================================== */
.success-section,.cancel-section{text-align:center;max-width:900px;margin:0 auto;}
.success-icon,.cancel-icon{font-size:4rem;margin-bottom:1rem;}
.success-section h1,.cancel-section h1{font-size:2.2rem;font-weight:800;color:var(--gray-800);margin-bottom:1rem;}
.order-number{background:var(--gradient-soft);padding:1rem 2rem;border-radius:8px;margin:2rem 0;display:inline-block;}
.order-number .number{font-size:1.25rem;font-weight:800;color:var(--primary-violet);}
.email-confirmation,.email-warning{background:#f0f9ff;border:1px solid #0ea5e9;color:#0c4a6e;padding:1rem;border-radius:8px;margin:1.25rem 0;}
.email-warning{background:#fef2f2;border-color:#ef4444;color:#dc2626;}

.booking-details{margin:3rem 0;}
.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:1.25rem;}
.detail-card{background:var(--white);border:2px solid var(--gray-100);border-radius:var(--radius);padding:1.25rem;}
.detail-card h3{font-size:1.05rem;font-weight:700;color:var(--gray-800);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary-purple);}
.detail-row{display:flex;justify-content:space-between;margin-bottom:.5rem;}
.price-card{border-color:var(--primary-violet);background:var(--gradient-soft);}
.total-price{text-align:center;font-size:1.9rem;font-weight:800;color:var(--primary-violet);margin-bottom:1rem;}
.payment-status{text-align:center;}
.payment-mode{padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem;}
.payment-mode.paid{background:#dcfce7;color:#166534;}
.payment-mode.bord{background:#dbeafe;color:#1e40af;}
.payment-mode.pending{background:#fef3c7;color:#92400e;}

.important-info{margin:3rem 0;}
.info-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:1.25rem;}
.info-section{background:var(--white);border:2px solid var(--gray-100);border-radius:var(--radius);padding:1.25rem;}
.info-section h3{font-size:1.05rem;font-weight:700;color:var(--gray-800);margin-bottom:1rem;}
.info-section ul{list-style:none;}
.info-section li{padding:.25rem 0;color:var(--gray-700);position:relative;padding-left:1.25rem;}
.info-section li:before{content:'•';position:absolute;left:0;color:var(--primary-violet);font-weight:700;}
.action-buttons{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap;}

/* Annulation : infos d’aide */
.cancel-info,.help-section,.reassurance-section{margin:2rem 0;text-align:left;}
.cancel-info h2,.help-section h3,.reassurance-section h3{color:var(--gray-800);margin-bottom:1rem;font-size:1.15rem;font-weight:700;}
.cancel-info ul{list-style:none;}
.cancel-info li{padding:.5rem 0;position:relative;padding-left:1.25rem;color:var(--gray-700);}
.cancel-info li:before{content:'→';position:absolute;left:0;color:var(--primary-violet);font-weight:700;}

.saved-reservation{background:var(--gradient-soft);padding:1.25rem;border-radius:var(--radius);margin:1.5rem 0;}
.contact-options{display:grid;gap:1rem;margin-top:1rem;}
.contact-option{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--gray-50);border-radius:8px;}
.reassurance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem;}
.reassurance-item{text-align:center;padding:1rem;background:var(--gray-50);border-radius:8px;}
.reassurance-icon{font-size:2rem;margin-bottom:.5rem;}

/* ========================================================================== */
/* Checkout layout */
/* ========================================================================== */
.checkout-layout{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;}
@media (min-width:1024px){ .checkout-layout{grid-template-columns:1fr 400px;} }

/* ========================================================================== */
/* Carte */
/* ========================================================================== */
.map-section{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:2rem;margin-bottom:2rem;}
.map-container{height:400px;border-radius:8px;overflow:hidden;background:var(--gray-50);display:flex;align-items:center;justify-content:center;}
.map-placeholder{text-align:center;color:var(--gray-600);padding:2rem;line-height:1.6;}

/* ========================================================================== */
/* Trust bar (facultatif) */
/* ========================================================================== */
.trust-bar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:.75rem 0 0;}
.trust-pill{
  display:inline-flex;align-items:center;gap:.5rem;background:#ffffffaa;backdrop-filter:blur(6px);
  border:1px solid rgba(109,40,217,.15);border-radius:999px;padding:.5rem .75rem;font-weight:600;
}
.trust-pill .i{font-size:1.1rem;}

/* ========================================================================== */
/* Footer */
/* ========================================================================== */
.footer{background:var(--gray-800);color:#d1d5db;padding:3rem 0 1rem;margin-top:4rem;}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-section h4{color:#fff;margin-bottom:1rem;font-weight:700;font-size:1.1rem;}
.footer-section p{margin-bottom:1rem;line-height:1.6;}
.footer-section ul{list-style:none;}
.footer-section li{margin-bottom:.5rem;}
.footer-section a{color:#d1d5db;text-decoration:none;transition:var(--transition);}
.footer-section a:hover{color:var(--primary-purple);}
.social-links{display:flex;gap:.75rem;margin-top:1rem;}
.social-links a{display:inline-block;font-size:1.25rem;padding:.5rem;border-radius:8px;background:rgba(255,255,255,.1);transition:var(--transition);}
.social-links a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.footer-bottom{border-top:1px solid #4b5563;padding-top:1.5rem;text-align:center;color:#9ca3af;font-size:.9rem;}

/* ========================================================================== */
/* Google Places Autocomplete – z-index + unclipping */
/* ========================================================================== */
.pac-container{z-index:99999 !important;}
.header,.main,.container,.booking-section{overflow:visible !important;position:relative;}

/* ========================================================================== */
/* Responsif */
/* ========================================================================== */
@media (max-width:992px){
  .checkout-layout{gap:1.25rem;}
}
@media (max-width:768px){
  .header{position:sticky;top:0;z-index:50;}
  .btn,.assistance-btn,.nav-link{min-height:44px;}
  .steps-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:.75rem;padding:.25rem;scroll-snap-type:x mandatory;}
  .steps-nav .step{display:inline-flex;white-space:nowrap;scroll-snap-align:start;}
  .services-grid,.benefits-grid,.vehicles-grid,.details-grid,.info-sections,.reassurance-grid,.footer-content{grid-template-columns:1fr;gap:1rem;}
  .vehicle-image{height:150px;}
}
@media (max-width:640px){
  .container{padding:0 16px;}
  .booking-section,.trip-summary,.vehicle-selection,.checkout-form-section,.services-section,.why-choose-section{padding:1.25rem;}
  .service-card,.vehicle-card,.summary-card,.detail-card{box-shadow:0 2px 4px rgba(0,0,0,.06);}
  .map-container{height:min(55vh,320px);}
  .vehicle-badges,.vehicle-specs{gap:.375rem;}
  .spec,.badge{font-size:.8rem;padding:.2rem .6rem;}
  .footer-section a{padding:4px 0;display:inline-block;}
}
@media (max-width:480px){
  .header .container{flex-direction:column;gap:8px;min-height:80px;padding:10px var(--padX);}
  .header-left,.header-right{justify-content:center;}
  .logo-img{width:32px;}
  .tagline{font-size:10px;max-width:80vw;}
  .assistance-btn,.nav-link{font-size:12px;padding:6px 10px;}
  .hero-section{padding:2rem 1rem;}
  .hero-content h1{font-size:1.875rem;}
  .hero-subtitle{font-size:1.05rem;}
}
@media (prefers-reduced-motion:reduce){
  .logo,.nav-link,.assistance-btn,.btn{transition:none;}
}

/* ========================================================================== */
/* iOS safe areas */
/* ========================================================================== */
@supports(padding:max(0px)){
  .header .container{padding-top:max(var(--padY),env(safe-area-inset-top));}
  .footer{padding-bottom:calc(3rem + env(safe-area-inset-bottom));}
}