/* ══════════════════════════════════════════════════════
   CORRECTIFS CRITIQUES — 16 avril 2026
   ══════════════════════════════════════════════════════ */

/* ── FIX 1: Performance — Supprimer background-attachment: fixed ── */
.hero,
#services,
#flotte,
#destinations,
section:nth-of-type(5),
section:nth-of-type(6) {
  background-attachment: scroll !important;
}

/* ── FIX 2: Selecteur de langue visible sur navbar sombre ── */
nav.scrolled .lang-current {
  color: var(--gold) !important;
}
nav.scrolled .lang-current::after {
  color: var(--gold) !important;
}
nav.scrolled .lang-switcher:hover .lang-current {
  color: var(--gold-lt) !important;
}

/* ── FIX 3: Pages Services — Contenu avec max-width lisible ── */
body > section.service-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 4rem 2rem !important;
}

/* ── FIX 4: Service Hero — Fond sombre ── */
.service-hero {
  background-color: #0a0a0a !important;
  background-image: url('../images/mercedes-interior-ambient.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
}
.service-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(20,15,5,0.5) 40%, rgba(0,0,0,0.65) 100%) !important;
  z-index: 0 !important;
}
.service-hero > * {
  position: relative !important;
  z-index: 1 !important;
}
.service-hero h1 {
  color: #fff !important;
}
.service-hero p,
.service-hero .service-subtitle {
  color: rgba(255,255,255,0.85) !important;
}

/* ── FIX 5: Reduire les backdrop-filter pour performance ── */
section::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── FIX 6: service-content texte (override du conflit card) ── */
body > section.service-content h2 {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  color: #1a1a1a !important;
  margin-bottom: 1rem !important;
  margin-top: 2.5rem !important;
}
body > section.service-content h2:first-child {
  margin-top: 0 !important;
}
body > section.service-content h3 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  color: #1a1a1a !important;
}
body > section.service-content p {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: #444 !important;
  margin-bottom: 1.2rem !important;
}


/* — FIX 7: Header — Navigation alignée à droite, logo à gauche — */
nav {
    justify-content: flex-end !important;
    gap: 2rem !important;
}
nav .nav-logo {
    margin-right: auto !important;
}
nav .nav-links {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ============================================================
   FIX 8: REFONTE PREMIUM — Section Services Home
   Design: Full-image overlay cards — Tendance 2025/2026
   ============================================================ */

/* --- Section background & spacing --- */
#services {
  background: #f7f7f7 !important;
  padding: 120px 60px !important;
}
#services::before {
  display: none !important;
}

/* --- Section header on dark bg --- */
#services .section-label {
  color: var(--gold) !important;
  letter-spacing: .25em !important;
}
#services .section-title {
  color: #1a1a1a !important;
  font-size: 3.2rem !important;
  line-height: 1.15 !important;
}
#services .section-subtitle {
  color: rgba(0,0,0,.55) !important;
  max-width: 540px !important;
}
#services .divider {
  background: var(--gold) !important;
  opacity: 1 !important;
}

/* --- Grid layout: 3 top + 2 bottom centered --- */
#services .services-showcase {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  margin-top: 60px !important;
  padding: 0 !important;
}
/* Top 3 cards span 2 cols each */
#services .service-item:nth-child(1),
#services .service-item:nth-child(2),
#services .service-item:nth-child(3) { grid-column: span 2 !important; }
/* Bottom 2 cards centered */
#services .service-item:nth-child(4) { grid-column: 2 / span 2 !important; }
#services .service-item:nth-child(5) { grid-column: 4 / span 2 !important; }
#services .service-item:nth-child(4),
#services .service-item:nth-child(5) {
  grid-column: span 1;
}
/* Center the last 2 cards */
#services .services-showcase::after {
  content: '';
  grid-column: span 1;
  display: none;
}

/* --- Card: full-image immersive overlay --- */
#services .service-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #111 !important;
  color: #fff !important;
  text-decoration: none !important;
  min-height: 480px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.15) !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1),
              box-shadow .55s cubic-bezier(.22,1,.36,1) !important;
  cursor: pointer !important;
}
#services .service-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.25), 0 0 0 1px rgba(74,144,217,.15) !important;
}

/* --- Image fills entire card --- */
#services .service-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  z-index: 1 !important;
}
#services .service-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .8s cubic-bezier(.22,1,.36,1),
              filter .8s cubic-bezier(.22,1,.36,1) !important;
  filter: brightness(.75) !important;
}
#services .service-item:hover .service-img-wrap img {
  transform: scale(1.06) !important;
  filter: brightness(.55) !important;
}

/* --- Overlay gradient — rich bottom fade --- */
#services .service-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(0,0,0,.15) 45%,
    rgba(0,0,0,.7) 75%,
    rgba(0,0,0,.92) 100%
  ) !important;
  transition: opacity .5s !important;
  opacity: 1 !important;
}
#services .service-item:hover .service-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.1) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,.8) 75%,
    rgba(0,0,0,.95) 100%
  ) !important;
}

/* --- Content positioned at bottom over image --- */
#services .service-content {
  position: relative !important;
  z-index: 3 !important;
  margin-top: auto !important;
  padding: 0 32px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* --- Number — small accent top-left of content --- */
#services .service-number {
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  color: var(--gold) !important;
  opacity: .9 !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(74,144,217,.3) !important;
  width: fit-content !important;
}

/* --- Title h3 --- */
#services .service-item .service-content h3 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1.65rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
  transform: translateY(0) !important;
}
#services .service-item:hover .service-content h3 {
  transform: translateY(-4px) !important;
}

/* --- Description p --- */
#services .service-item .service-content p {
  color: rgba(255,255,255,.65) !important;
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  line-height: 1.65 !important;
  margin: 0 0 16px 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .5s cubic-bezier(.22,1,.36,1),
              opacity .4s .05s !important;
}
#services .service-item:hover .service-content p {
  max-height: 120px !important;
  opacity: 1 !important;
}

/* --- CTA link "Découvrir" --- */
#services .service-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--gold) !important;
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  transition: gap .4s cubic-bezier(.22,1,.36,1),
              opacity .3s !important;
  opacity: 0 !important;
  transform: translateY(0) !important;
}
#services .service-item:hover .service-link {
  opacity: 1 !important;
  gap: 12px !important;
}
#services .service-link .arrow {
  display: inline-block !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
  font-size: 1.1rem !important;
}
#services .service-item:hover .service-link .arrow {
  transform: translateX(4px) !important;
}

/* --- Accent line on hover (gold top border) --- */
#services .service-item::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--gold) !important;
  z-index: 10 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
}
#services .service-item:hover::after {
  transform: scaleX(1) !important;
}

/* --- Remove old color overrides --- */
#services .service-item,
#services .service-item * {
  color: unset !important;
}

/* --- Responsive: 2 cols on tablet, 1 on mobile --- */
@media (max-width: 1024px) {
  #services .services-showcase {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #services .service-item:nth-child(1),
  #services .service-item:nth-child(2),
  #services .service-item:nth-child(3),
  #services .service-item:nth-child(4),
  #services .service-item:nth-child(5) { grid-column: span 1 !important; }
  #services .service-item {
    min-height: 420px !important;
  }
}
@media (max-width: 640px) {
  #services {
    padding: 80px 20px !important;
  }
  #services .services-showcase {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #services .service-item {
    min-height: 380px !important;
  }
  #services .section-title {
    font-size: 2.2rem !important;
  }
}


/* ═══════════════════════════════════════════════
   FIX 9: Hero Booking Form — Formulaire de reservation rapide
   ═══════════════════════════════════════════════ */

.hero-booking-form {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 780px;
  margin: 2.5rem auto 0;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

/* --- Tabs: Trajet / A l'heure --- */
.booking-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.booking-tab {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.5);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s, background .3s;
  position: relative;
}
.booking-tab:hover {
  color: rgba(255,255,255,.8);
}
.booking-tab.active {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.booking-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--gold, #4A90D9);
  border-radius: 2px;
}

/* --- Form fields row --- */
.booking-fields {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 20px 20px 20px;
  flex-wrap: wrap;
}
.booking-field {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.booking-field:last-of-type {
  border-right: none;
}
.booking-field label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 6px;
}
.booking-field input,
.booking-field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 8px 0;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .9rem;
  outline: none;
  transition: border-color .3s;
}
.booking-field input::placeholder {
  color: rgba(255,255,255,.3);
}
.booking-field input:focus,
.booking-field select:focus {
  border-bottom-color: var(--gold, #4A90D9);
}
.booking-field select option {
  background: #1a1a1a;
  color: #fff;
}

/* --- Search button --- */
.booking-submit {
  flex-shrink: 0;
  padding: 12px 28px;
  margin-left: 10px;
  background: var(--gold, #4A90D9);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, transform .2s;
}
.booking-submit:hover {
  background: #3a7bc8;
  transform: translateY(-1px);
}

/* --- Vehicle selection --- */
.booking-vehicles {
  padding: 24px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  animation: slideDown .4s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.vehicles-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
  text-align: center;
}
.vehicle-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.vehicle-card {
  cursor: pointer;
  flex: 1;
  max-width: 200px;
}
.vehicle-card input[type="radio"] {
  display: none;
}
.vehicle-card-inner {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  background: rgba(255,255,255,.04);
}
.vehicle-card-inner img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.vehicle-name {
  display: block;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .85rem;
  font-weight: 600;
  padding: 10px 8px 2px;
}
.vehicle-model {
  display: block;
  color: rgba(255,255,255,.45);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .7rem;
  padding: 0 8px 10px;
}
.vehicle-card input:checked + .vehicle-card-inner {
  border-color: var(--gold, #4A90D9);
  box-shadow: 0 0 20px rgba(74,144,217,.2);
  transform: translateY(-2px);
}

/* --- Confirm button --- */
.booking-confirm {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 20px auto 0;
  padding: 14px 0;
  background: var(--gold, #4A90D9);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, transform .2s;
}
.booking-confirm:hover {
  background: #3a7bc8;
  transform: translateY(-1px);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero-booking-form {
    max-width: 100%;
    margin: 1.5rem 15px 0;
    border-radius: 12px;
  }
  .booking-fields {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .booking-field {
    border-right: none;
    padding: 0;
    border-bottom: none;
  }
  .booking-submit {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
  .vehicle-options {
    flex-direction: column;
    align-items: center;
  }
  .vehicle-card {
    max-width: 260px;
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FIX 10 — Formulaire réservation : visibilité + responsive mobile
   Hero accueil mobile : texte agrandi et visible — 17 avril 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Visibilité du formulaire : fond sombre + bordure dorée ── */
.hero-booking-form {
  background: rgba(8, 6, 4, 0.65) !important;
  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
  border: 1px solid rgba(185, 150, 80, 0.3) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(185,150,80,0.18) inset !important;
}

/* ── 2. Layout desktop : tous les champs sur une ligne ── */
.booking-fields {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: flex-end !important;
}

/* Lieu de départ et Destination : plus larges */
.booking-field:first-child,
#bf-destination-wrap {
  flex: 2 1 0 !important;
  min-width: 0 !important;
}

/* Date */
.booking-field:has(#bf-date) { flex: 1.4 1 0 !important; }

/* Heure */
.booking-field:has(#bf-heure) { flex: 1.2 1 0 !important; }

/* Autres champs */
.booking-field { flex: 1 1 0 !important; min-width: 0 !important; }

/* Inputs et select : pleine largeur dans leur cellule */
#bf-depart, #bf-destination, #bf-date, #bf-heure {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Bouton ne rétrécit pas */
.booking-submit { flex-shrink: 0 !important; white-space: nowrap !important; }

/* ── 3. RESPONSIVE MOBILE ≤ 768px ── */
@media (max-width: 768px) {

  /* Formulaire pleine largeur mobile */
  .hero-booking-form {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 24px auto 0 auto !important;
  }

  /* Champs en colonne verticale */
  .booking-fields {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Chaque champ prend 100% */
  .booking-field,
  .booking-field:first-child,
  #bf-destination-wrap {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    border-right: none !important;
  }

  /* Inputs et select pleine largeur */
  #bf-depart, #bf-destination, #bf-date, #bf-heure {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    height: 50px !important;
  }

  /* Bouton Rechercher pleine largeur */
  .booking-submit {
    width: 100% !important;
    height: 52px !important;
    font-size: 1rem !important;
    margin: 6px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 4. Hero texte : agrandi et lisible sur mobile ── */
  .hero-content {
    padding: 24px 16px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-pretitle {
    font-size: 0.82rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
  }

  .hero-title {
    font-size: clamp(2.6rem, 9vw, 3.4rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
    opacity: 0.92 !important;
  }
}

/* ── Très petits écrans ≤ 430px ── */
@media (max-width: 430px) {
  .hero-pretitle { font-size: 0.75rem !important; letter-spacing: 0.15em !important; }
  .hero-title { font-size: clamp(2.2rem, 10.5vw, 3rem) !important; }
  .hero-subtitle { font-size: 0.88rem !important; letter-spacing: 0.08em !important; }
  .hero-booking-form {
    margin: 16px auto 0 auto !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }
  .booking-fields { padding: 12px !important; gap: 8px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   FIX 11 — Ajustements : formulaire plus clair/lisible, lieu de départ
   sur une ligne, bulle WhatsApp logo officiel + police lisible,
   hero mobile texte agrandi — 17 avril 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Formulaire : opacité claire (verre givré clair) + police lisible ── */
.hero-booking-form {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
}

/* Onglets TRAJET / A L'HEURE : blanc lisible */
.booking-tab {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.booking-tab.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.booking-tab:hover {
  color: #ffffff !important;
}

/* Labels : blanc pur, bien lisible */
.hero-booking-form label,
.booking-field label {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 0.08em !important;
}

/* Inputs et select : fond blanc semi-transparent, texte noir lisible */
.hero-booking-form input[type="text"],
.hero-booking-form input[type="date"],
.hero-booking-form select,
#bf-depart, #bf-destination, #bf-date, #bf-heure {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  font-weight: 500 !important;
}

.hero-booking-form input::placeholder {
  color: rgba(26, 26, 26, 0.55) !important;
  font-weight: 400 !important;
}

/* Bouton Rechercher : bleu avec texte blanc bien contrasté */
.booking-submit {
  background: #1e3a8a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4) !important;
}
.booking-submit:hover {
  background: #1e40af !important;
}

/* ── 2. Champs plus larges : Lieu de départ sur UNE LIGNE ── */
.booking-fields {
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-end !important;
}

/* Lieu de départ : ligne complète (100%) */
.booking-field:first-child {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Destination : ligne complète (100%) */
#bf-destination-wrap {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Date et Heure : côte à côte sur ligne 3 */
.booking-field:has(#bf-date) {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 140px !important;
}
.booking-field:has(#bf-heure) {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 140px !important;
}

/* Label du lieu de départ pas cassé en 2 lignes */
.booking-field:first-child label {
  white-space: nowrap !important;
}

/* Bouton Rechercher : ligne complète en dessous */
.booking-submit {
  width: 100% !important;
  flex: 1 1 100% !important;
  margin-top: 6px !important;
  height: 52px !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

/* Inputs pleine largeur dans leur cellule */
#bf-depart, #bf-destination, #bf-date, #bf-heure {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
}

/*


/* ═══════════════════════════════════════════════════════════════════
   BULLE WHATSAPP — Refonte propre (remplace FIX 18→25)
   17 avril 2026
   - Desktop : bulle ronde verte, au survol étiquette blanche à gauche
   - Mobile  : 1er tap = affiche étiquette, 2e tap = ouvre WhatsApp
   ═══════════════════════════════════════════════════════════════════ */

#wa-pill,
a#wa-pill {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #25d366 !important;
  background-image: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-shadow: 0 10px 24px rgba(18,140,126,0.35),
              0 4px 10px rgba(0,0,0,0.18) !important;
  transition: transform 220ms cubic-bezier(.22,.9,.3,1),
              box-shadow 220ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  animation: none !important;
}

#wa-pill:hover,
a#wa-pill:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 14px 30px rgba(18,140,126,0.45),
              0 4px 12px rgba(0,0,0,0.22) !important;
}

#wa-pill:focus-visible,
a#wa-pill:focus-visible {
  outline: 3px solid rgba(37,211,102,0.45) !important;
  outline-offset: 3px !important;
}

/* Pulse circulaire */
#wa-pill::after,
a#wa-pill::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.55) !important;
  animation: wa-pulse 2.4s ease-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background: transparent !important;
  border: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  width: auto !important; height: auto !important;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Logo officiel WhatsApp (SVG blanc) au centre */
#wa-pill::before,
a#wa-pill::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 34px !important;
  height: 34px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>") !important;
  z-index: 1 !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* Masque entièrement les enfants DOM (avatar, fallback, label) — le logo est en ::before */
#wa-pill .wa-avatar,
#wa-pill .wa-avatar-fallback,
#wa-pill .wa-label,
a#wa-pill .wa-avatar,
a#wa-pill .wa-avatar-fallback,
a#wa-pill .wa-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  font-size: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Wrapper du tooltip texte */
#wa-pill .wa-text,
a#wa-pill .wa-text {
  position: absolute !important;
  right: calc(100% + 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(8px) !important;
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  background: #ffffff !important;
  color: #0b3d36 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18),
              0 0 0 1px rgba(0,0,0,0.04) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 220ms ease,
              transform 240ms cubic-bezier(.22,.9,.3,1),
              visibility 0s linear 240ms !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Masque "WhatsApp" (wa-label) dans le tooltip, garde le texte natif traduit via data-i18n */
#wa-pill .wa-text .wa-label,
a#wa-pill .wa-text .wa-label {
  display: none !important;
}
#wa-pill .wa-text .wa-action,
a#wa-pill .wa-text .wa-action {
  display: inline !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #0b3d36 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* Petite flèche (queue) du tooltip */
#wa-pill .wa-text::after,
a#wa-pill .wa-text::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -4px !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 10px !important;
  height: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 2px !important;
  box-shadow: 2px -2px 4px rgba(0,0,0,0.03) !important;
  z-index: -1 !important;
  border: none !important;
  animation: none !important;
}
#wa-pill .wa-text::before,
a#wa-pill .wa-text::before {
  display: none !important;
  content: none !important;
}

/* ── Desktop : hover révèle le tooltip ── */
@media (hover: hover) and (pointer: fine) {
  #wa-pill:hover .wa-text,
  #wa-pill:focus-visible .wa-text,
  a#wa-pill:hover .wa-text,
  a#wa-pill:focus-visible .wa-text {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
    transition: opacity 220ms ease,
                transform 240ms cubic-bezier(.22,.9,.3,1),
                visibility 0s !important;
  }
}

/* ── Mobile : classe .wa-revealed (1er tap) montre le tooltip ── */
@media (hover: none), (max-width: 768px) {
  #wa-pill,
  a#wa-pill {
    right: 16px !important;
    bottom: 16px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }
  #wa-pill::before,
  a#wa-pill::before {
    width: 32px !important;
    height: 32px !important;
  }
  #wa-pill.wa-revealed .wa-text,
  a#wa-pill.wa-revealed .wa-text {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
    max-width: calc(100vw - 100px) !important;
    white-space: normal !important;
  }
  #wa-pill.wa-revealed .wa-text .wa-action::before,
  a#wa-pill.wa-revealed .wa-text .wa-action::before {
    white-space: normal !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }
}

/* ── Réduction des animations (a11y) ── */
@media (prefers-reduced-motion: reduce) {
  #wa-pill,
  #wa-pill::after,
  #wa-pill .wa-text,
  a#wa-pill,
  a#wa-pill::after,
  a#wa-pill .wa-text {
    animation: none !important;
    transition: opacity 150ms ease, visibility 0s !important;
  }
}
/* ─────────── FIN BULLE WHATSAPP ─────────── */


/* ═══════════════════════════════════════════════════════════════════
   FIX 26 — UX Mobile premium : hamburger, drawer, sous-menus accordéon,
            lang-switcher visible, formulaire date centré
   17 avril 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── LANG-SWITCHER : visible et lisible sur navbar transparente ── */
.lang-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 10px !important;
}
.lang-switcher .lang-current {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 200ms ease, border-color 200ms ease !important;
  line-height: 1 !important;
}
.lang-switcher .lang-current::after {
  content: "▾" !important;
  font-size: 10px !important;
  margin-left: 2px !important;
  opacity: 0.9 !important;
  color: inherit !important;
}
.lang-switcher:hover .lang-current,
.lang-switcher.open .lang-current,
.lang-switcher:focus-within .lang-current {
  background: rgba(255,255,255,0.24) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
/* Navbar scrolled (fond clair) : texte foncé */
nav.scrolled .lang-switcher .lang-current,
.scrolled .lang-switcher .lang-current {
  background: rgba(11,61,54,0.08) !important;
  color: #0b3d36 !important;
  border-color: rgba(11,61,54,0.2) !important;
}
nav.scrolled .lang-switcher:hover .lang-current,
.scrolled .lang-switcher:hover .lang-current {
  background: rgba(11,61,54,0.14) !important;
  border-color: rgba(11,61,54,0.35) !important;
}

/* Dropdown des langues */
.lang-switcher .lang-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 170px !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 220ms !important;
  z-index: 10000 !important;
  display: block !important;
}
.lang-switcher:hover .lang-dropdown,
.lang-switcher.open .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s !important;
}
.lang-switcher .lang-option {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: #0b3d36 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 150ms ease !important;
  list-style: none !important;
}
.lang-switcher .lang-option:hover {
  background: rgba(11,61,54,0.07) !important;
}

/* ── HAMBURGER : visible en mobile, premium et animé ── */
nav .hamburger {
  display: none;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 200ms ease, border-color 200ms ease !important;
  z-index: 10001 !important;
}
nav .hamburger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  transition: transform 320ms cubic-bezier(.3,.9,.3,1),
              opacity 180ms ease,
              background 200ms ease !important;
  transform-origin: center !important;
}
nav.scrolled .hamburger {
  background: rgba(11,61,54,0.08) !important;
  border-color: rgba(11,61,54,0.2) !important;
}
nav.scrolled .hamburger span {
  background: #0b3d36 !important;
}
nav .hamburger:hover {
  background: rgba(255,255,255,0.2) !important;
}
nav.scrolled .hamburger:hover {
  background: rgba(11,61,54,0.14) !important;
}

/* Hamburger → croix quand menu ouvert */
body.menu-open nav .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
  background: #ffffff !important;
}
body.menu-open nav .hamburger span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
body.menu-open nav .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
  background: #ffffff !important;
}

/* ═══════════ MEDIA MOBILE ≤ 900px ═══════════ */
@media (max-width: 900px) {

  /* Hamburger visible */
  nav .hamburger {
    display: inline-flex !important;
  }

  /* Lang-switcher plus compact (toujours visible à droite du hamburger) */
  .lang-switcher {
    margin-right: 4px !important;
  }
  .lang-switcher .lang-current {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Drawer plein écran */
  nav .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 380px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 96px 24px 40px !important;
    background: linear-gradient(180deg, #0f2a26 0%, #0b3d36 60%, #081e1a 100%) !important;
    box-shadow: -20px 0 40px rgba(0,0,0,0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    transition: transform 380ms cubic-bezier(.22,.9,.3,1),
                visibility 0s linear 380ms !important;
    z-index: 10000 !important;
    list-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.menu-open nav .nav-links {
    transform: translateX(0) !important;
    visibility: visible !important;
    transition: transform 380ms cubic-bezier(.22,.9,.3,1),
                visibility 0s !important;
  }

  /* Backdrop derrière le drawer */
  body.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 9999 !important;
    animation: wa-backdrop-in 300ms ease !important;
  }
  @keyframes wa-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  body.menu-open {
    overflow: hidden !important;
  }

  /* Items du menu mobile */
  nav .nav-links > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  nav .nav-links > li:last-child {
    border-bottom: none !important;
  }
  nav .nav-links > li > a {
    display: block !important;
    padding: 16px 8px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    text-transform: none !important;
    position: relative !important;
    transition: color 180ms ease, padding-left 220ms ease !important;
  }
  nav .nav-links > li > a:hover,
  nav .nav-links > li > a:focus-visible {
    color: #e6c88a !important;
    padding-left: 14px !important;
  }

  /* Items avec sous-menu : icône chevron + toggle */
  nav .nav-links > li.has-dropdown > a {
    padding-right: 48px !important;
  }
  nav .nav-links > li.has-dropdown > a::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: translateY(-70%) rotate(45deg) !important;
    transition: transform 260ms cubic-bezier(.3,.9,.3,1) !important;
    opacity: 0.8 !important;
  }
  nav .nav-links > li.has-dropdown.open > a::after {
    transform: translateY(-30%) rotate(-135deg) !important;
  }

  /* Sous-menu mobile (accordéon) */
  nav .nav-links .dropdown,
  nav .nav-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 420ms cubic-bezier(.22,.9,.3,1) !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 8px !important;
  }
  nav .nav-links > li.has-dropdown.open > .dropdown,
  nav .nav-links > li.has-dropdown.open > ul {
    max-height: 1200px !important;
    padding: 6px 0 10px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  /* Masquer le lien "redondant" vers #services / #destinations / #flotte dans le sous-menu */
  nav .nav-links .dropdown a[href^="#"],
  nav .nav-links ul a[href^="#"] {
    display: none !important;
  }

  /* Liens du sous-menu : visibles et agréables */
  nav .nav-links .dropdown a,
  nav .nav-links ul a {
    display: block !important;
    padding: 11px 20px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    margin: 2px 10px !important;
    transition: background 180ms ease, color 180ms ease, padding-left 200ms ease !important;
  }
  nav .nav-links .dropdown a:hover,
  nav .nav-links ul a:hover,
  nav .nav-links .dropdown a:focus-visible,
  nav .nav-links ul a:focus-visible {
    background: rgba(255,255,255,0.08) !important;
    color: #e6c88a !important;
    padding-left: 28px !important;
  }

  /* CTA Réserver reste mis en avant */
  nav .nav-links > li > a.cta-nav,
  nav .nav-links > li > a[href="#reserver"],
  nav .nav-links > li > a.btn,
  nav .nav-links > li > a[class*="reserv"] {
    display: inline-block !important;
    margin-top: 16px !important;
    padding: 14px 22px !important;
    background: linear-gradient(135deg, #d4a759 0%, #b98934 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    text-align: center !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    box-shadow: 0 8px 20px rgba(184,137,52,0.3) !important;
  }

  /* ── FORMULAIRE HOME : date & heure bien centrés en une ligne ── */
  .booking-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .booking-fields .booking-field:has(#bf-depart),
  .booking-fields .booking-field:has(#bf-destination) {
    width: 100% !important;
  }
  /* Date + Heure sur une ligne, 50/50, centrés */
  .booking-fields .booking-field:has(#bf-date),
  .booking-fields .booking-field:has(#bf-heure) {
    width: calc(50% - 6px) !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
  .booking-fields .booking-field:has(#bf-date) {
    margin-right: 12px !important;
  }
  /* Inputs : 100% de leur field */
  .booking-fields .booking-field input,
  .booking-fields .booking-field select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  /* Input type=date : bien centré dans son cadre */
  .booking-fields #bf-date {
    text-align: left !important;
    padding-right: 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .booking-fields #bf-date::-webkit-calendar-picker-indicator {
    margin-left: auto !important;
    cursor: pointer !important;
  }

  /* Labels uniformes */
  .booking-fields label {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
  }
}

/* Très petit écran : rendre le drawer un peu plus large */
@media (max-width: 480px) {
  nav .nav-links {
    width: 88vw !important;
    padding: 90px 20px 32px !important;
  }
  .lang-switcher .lang-current {
    padding: 6px 9px !important;
    font-size: 11.5px !important;
  }
}
/* ─────────── FIN FIX 26 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 27 — HERO MOBILE : atterrissage premium                    */
/* Objectif : texte lisible + formulaire entièrement visible      */
/* au premier affichage, sans scroll                              */
/* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* --- Hero : hauteur maîtrisée & padding resserré --- */
  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding: 88px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  /* Overlay plus sombre bas pour lisibilité et contraste formulaire */
  .hero::before,
  .hero::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.30) 35%,
      rgba(0,0,0,0.55) 100%) !important;
  }

  /* --- Bloc texte hero : compact et centré --- */
  .hero-content,
  .hero > .container,
  .hero .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .hero-pretitle {
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    opacity: 0.95 !important;
  }

  .hero-title {
    font-size: clamp(1.85rem, 7.8vw, 2.35rem) !important;
    line-height: 1.12 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
    font-weight: 700 !important;
  }

  .hero-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 16px !important;
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 0.95 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  }

  /* --- Formulaire : compact & visible dès l'atterrissage --- */
  .hero-booking-form {
    width: 100% !important;
    max-width: 560px !important;
    margin: 8px auto 0 auto !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.97) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .booking-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .booking-field {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Inputs compacts mais confortables (44px tactile minimum) */
  #bf-depart, #bf-destination, #bf-date, #bf-heure,
  .booking-field input, .booking-field select {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    padding: 0 12px !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  /* Date + Heure côte à côte pour gagner de la hauteur */
  .booking-field.date-field,
  .booking-field.time-field,
  #bf-date-wrap,
  #bf-heure-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .booking-fields .datetime-row,
  .booking-fields > .row-datetime {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Bouton Rechercher premium, compact */
  .booking-submit,
  button.booking-submit,
  .hero-booking-form button[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    margin: 4px 0 0 !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #c9a961 0%, #b8954e 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(184,149,78,0.35) !important;
  }
}

/* --- iPhones standards (≤ 430px) : encore plus compact --- */
@media (max-width: 430px) {
  .hero {
    padding: 80px 14px 20px !important;
  }
  .hero-pretitle {
    font-size: 0.68rem !important;
    letter-spacing: 0.16em !important;
    margin: 0 0 8px !important;
  }
  .hero-title {
    font-size: clamp(1.7rem, 8vw, 2.1rem) !important;
    margin: 0 0 8px !important;
  }
  .hero-subtitle {
    font-size: 0.86rem !important;
    margin: 0 0 12px !important;
  }
  .hero-booking-form {
    margin: 6px auto 0 auto !important;
    border-radius: 12px !important;
  }
  .booking-fields {
    padding: 10px !important;
    gap: 7px !important;
  }
  #bf-depart, #bf-destination, #bf-date, #bf-heure,
  .booking-field input, .booking-field select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.92rem !important;
  }
  .booking-submit,
  .hero-booking-form button[type="submit"] {
    height: 44px !important;
  }
}

/* --- Petits écrans (iPhone SE ≤ 375px) : ultra-compact --- */
@media (max-width: 375px) {
  .hero { padding: 76px 12px 16px !important; }
  .hero-title { font-size: 1.65rem !important; line-height: 1.1 !important; }
  .hero-subtitle { font-size: 0.82rem !important; margin: 0 0 10px !important; }
  .booking-fields { padding: 9px !important; gap: 6px !important; }
  #bf-depart, #bf-destination, #bf-date, #bf-heure {
    height: 40px !important; min-height: 40px !important; font-size: 0.9rem !important;
  }
  .booking-submit { height: 42px !important; }
}
/* ─────────── FIN FIX 27 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 28 — HERO MOBILE : compaction finale du formulaire         */
/* Tabs réduits + labels compacts + Date/Heure côte à côte        */
/* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* Tabs "Aller simple / A-R" compacts */
  .booking-tabs {
    padding: 6px !important;
    gap: 4px !important;
  }
  .booking-tabs .booking-tab,
  .booking-tab {
    font-size: 0.85rem !important;
    padding: 8px 10px !important;
    height: auto !important;
    min-height: 34px !important;
  }

  /* Labels des champs : compacts */
  .booking-field label {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
    display: block !important;
    text-transform: uppercase !important;
    opacity: 0.75 !important;
  }

  /* Date + Heure côte à côte : les 3e et 4e .booking-field */
  #heroBookingForm.booking-fields,
  .booking-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  /* Départ (1er) et Destination (2e) : pleine largeur */
  #heroBookingForm .booking-field:nth-child(1),
  #heroBookingForm .booking-field:nth-child(2),
  .booking-fields > .booking-field:nth-child(1),
  .booking-fields > .booking-field:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  /* Date (3e) et Heure (4e) : une colonne chacun */
  #heroBookingForm .booking-field:nth-child(3),
  #heroBookingForm .booking-field:nth-child(4),
  .booking-fields > .booking-field:nth-child(3),
  .booking-fields > .booking-field:nth-child(4) {
    grid-column: auto !important;
  }

  /* Bouton submit : pleine largeur, dernier enfant */
  .booking-fields > .booking-submit,
  .booking-fields button[type="submit"],
  #heroBookingForm button[type="submit"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  /* Inputs compacts mais touch-friendly */
  #bf-depart, #bf-destination, #bf-date, #bf-heure,
  .booking-field input, .booking-field select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.92rem !important;
    padding: 0 10px !important;
  }
}

@media (max-width: 430px) {
  .booking-tabs .booking-tab,
  .booking-tab {
    font-size: 0.8rem !important;
    padding: 7px 8px !important;
    min-height: 32px !important;
  }
  .booking-field label {
    font-size: 0.68rem !important;
    margin: 0 0 2px !important;
  }
  .booking-fields {
    padding: 9px !important;
    gap: 7px !important;
  }
  #bf-depart, #bf-destination, #bf-date, #bf-heure,
  .booking-field input, .booking-field select {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.88rem !important;
  }
}
/* ─────────── FIN FIX 28 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 29 — MARQUE UNIFIÉE : "by CAB" cohérent header + footer    */
/* Même couleur que "Transfer" (hérite du parent)                 */
/* Taille légèrement plus grande et proportionnée                 */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── Header : nav-logo ─────────────────────────────────────── */
.nav-logo {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.45em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.nav-logo span,
a.nav-logo span,
header .nav-logo span,
nav .nav-logo span {
  color: inherit !important;
  font-size: 0.42em !important;          /* ≈ 13.6px quand le parent est à 32.4px */
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  text-transform: uppercase !important;
  opacity: 0.92 !important;
  transform: translateY(-0.15em) !important;
}

/* Version scrolled : même ratio, donc le span suit naturellement */
nav.scrolled .nav-logo span,
header.scrolled .nav-logo span,
.navbar.scrolled .nav-logo span {
  color: inherit !important;
  font-size: 0.42em !important;
}

/* ─── Footer : footer-logo ──────────────────────────────────── */
.footer-logo {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.45em !important;
  line-height: 1 !important;
}

.footer-logo span,
footer .footer-logo span {
  color: inherit !important;
  font-size: 0.42em !important;          /* même ratio que le header */
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  text-transform: uppercase !important;
  opacity: 0.92 !important;
  transform: translateY(-0.15em) !important;
}

/* ─── Version mobile : on garde les proportions ─────────────── */
@media (max-width: 900px) {
  .nav-logo {
    font-size: 1.35rem !important;
    letter-spacing: 0.22em !important;
  }
  .nav-logo span,
  .footer-logo span {
    font-size: 0.44em !important;        /* un peu plus gros en relatif pour lisibilité */
    letter-spacing: 0.2em !important;
  }
}

@media (max-width: 430px) {
  .nav-logo {
    font-size: 1.2rem !important;
    letter-spacing: 0.2em !important;
  }
  .nav-logo span,
  .footer-logo span {
    font-size: 0.46em !important;
    letter-spacing: 0.18em !important;
  }
}
/* ─────────── FIN FIX 29 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 30 — MARQUE : spécificité maximale pour écraser style.css  */
/* Cible les variantes nav:not(.scrolled), nav.scrolled, footer   */
/* ═══════════════════════════════════════════════════════════════ */

/* HEADER nav-logo : texte principal blanc par défaut */
html body nav .nav-logo,
html body nav:not(.scrolled) .nav-logo,
html body nav.scrolled .nav-logo,
html body header .nav-logo {
  color: #ffffff !important;
}

/* Sur les pages avec hero clair (resv-hero etc.), le logo reste adapté */
html body nav.scrolled .nav-logo {
  color: #1a1a1a !important;
}

/* SPAN "by CAB" du header : même couleur que "Transfer" */
html body nav .nav-logo span,
html body nav:not(.scrolled) .nav-logo span,
html body nav.scrolled .nav-logo span,
html body header .nav-logo span,
html body a.nav-logo span {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 2.6px !important;
  opacity: 0.9 !important;
  line-height: 1 !important;
  padding-left: 4px !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  text-transform: uppercase !important;
  transform: none !important;
}

/* Version scrolled du header : taille légèrement réduite mais lisible */
html body nav.scrolled .nav-logo span {
  font-size: 12px !important;
  letter-spacing: 2.4px !important;
  color: inherit !important;
}

/* FOOTER footer-logo : texte principal et span à la même couleur */
html body footer .footer-logo,
html body .site-footer .footer-logo {
  color: #ffffff !important;
}

html body footer .footer-logo span,
html body .site-footer .footer-logo span,
html body .footer-brand-block .footer-logo span {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 2.6px !important;
  opacity: 0.9 !important;
  line-height: 1 !important;
  padding-left: 4px !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  text-transform: uppercase !important;
}

/* Adaptation mobile */
@media (max-width: 900px) {
  html body nav .nav-logo span,
  html body nav:not(.scrolled) .nav-logo span,
  html body nav.scrolled .nav-logo span,
  html body footer .footer-logo span,
  html body .site-footer .footer-logo span {
    font-size: 11px !important;
    letter-spacing: 2.2px !important;
    padding-left: 3px !important;
  }
}

@media (max-width: 430px) {
  html body nav .nav-logo span,
  html body nav:not(.scrolled) .nav-logo span,
  html body nav.scrolled .nav-logo span,
  html body footer .footer-logo span,
  html body .site-footer .footer-logo span {
    font-size: 10.5px !important;
    letter-spacing: 2px !important;
  }
}
/* ─────────── FIN FIX 30 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 31 — CARTES VÉHICULES (desktop) : fond blanc + image adaptée */
/* Uniquement sur desktop (> 900px)                                */
/* ═══════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {

  /* Fond blanc des cartes véhicules */
  .vehicle-options .vehicle-card,
  .vehicle-options label.vehicle-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transition: all 0.25s ease !important;
  }

  .vehicle-options .vehicle-card:hover {
    border-color: rgba(201,169,97,0.5) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) !important;
  }

  .vehicle-options .vehicle-card:has(input:checked),
  .vehicle-options .vehicle-card input:checked ~ .vehicle-card-inner {
    border-color: #c9a961 !important;
    box-shadow: 0 6px 20px rgba(201,169,97,0.25) !important;
  }

  /* Inner sur fond blanc aussi */
  .vehicle-options .vehicle-card .vehicle-card-inner {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
  }

  /* Image centrée, proportionnée, avec un peu d'espace */
  .vehicle-options .vehicle-card .vehicle-card-inner img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    margin: 0 auto 8px !important;
  }

  /* Nom et modèle en texte sombre lisible sur blanc */
  .vehicle-options .vehicle-card .vehicle-name {
    color: #1a1a1a !important;
    font-weight: 600 !important;
  }
  .vehicle-options .vehicle-card .vehicle-model {
    color: #6b6b6b !important;
  }
}
/* ─────────── FIN FIX 31 ─────────── */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 32 — Estimation de prix dans la carte Sedan (test)         */
/* ═══════════════════════════════════════════════════════════════ */

.vehicle-card .vehicle-price {
  display: block !important;
  margin-top: 6px !important;
  padding: 4px 8px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #6b6b6b !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  min-height: 1.5em !important;
  transition: color 0.2s ease !important;
}

.vehicle-card .vehicle-price.is-price {
  color: #1a1a1a !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
}

/* Adaptation mobile : un peu plus compact */
@media (max-width: 900px) {
  .vehicle-card .vehicle-price {
    font-size: 0.72rem !important;
    padding: 3px 6px !important;
  }
  .vehicle-card .vehicle-price.is-price {
    font-size: 0.85rem !important;
  }
}
/* ─────────── FIN FIX 32 ─────────── */


/* ─────────── FIX 33 ─────────── */
/* Nouvelle image hero + lisibilité du header sur fond clair.
   Ne touche pas au bouton "Réserver" (bleu) qui reste visible tel quel. */

/* 1) Remplacement de l'image hero par hero-home.jpg */
.hero-bg {
  background-image: url("../images/hero-home.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 2) Overlay du hero : on conserve un léger assombrissement pour
   garder le texte de la hero lisible, mais plus doux en haut
   (pour que l'image soit bien mise en valeur). */
.hero-bg::before {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 25%,
    rgba(0,0,0,0.30) 55%,
    rgba(0,0,0,0.55) 100%) !important;
}

/* 3) Header non-scrollé : on ajoute un voile sombre dégradé
   pour que la marque "Transfer by CAB" et les liens du menu
   restent parfaitement lisibles sur l'image claire.
   Le bouton "Réserver" reste en bleu, bien visible, inchangé. */
html body nav:not(.scrolled) {
  background: linear-gradient(180deg,
    rgba(11, 11, 11, 0.55) 0%,
    rgba(11, 11, 11, 0.30) 70%,
    rgba(11, 11, 11, 0.00) 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* 4) Renforcement du texte du header (logo + liens) via ombre portée
   pour garantir la lisibilité même sur zones très claires. */
html body nav:not(.scrolled) .nav-logo,
html body nav:not(.scrolled) .nav-logo span,
html body nav:not(.scrolled) .nav-links a,
html body nav:not(.scrolled) .nav-lang-switcher,
html body nav:not(.scrolled) .nav-lang-switcher * {
  text-shadow: 0 1px 6px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.55) !important;
}

/* 5) Hamburger mobile : contour sombre pour rester visible sur
   fond clair (ne change rien sur scroll). */
html body nav:not(.scrolled) .nav-toggle span,
html body nav:not(.scrolled) .mobile-menu-toggle span,
html body nav:not(.scrolled) .hamburger span {
  box-shadow: 0 0 4px rgba(0,0,0,0.65) !important;
}
/* ─────────── FIN FIX 33 ─────────── */


/* ─────────── FIX 34 ─────────── */
/* Hero — pretitle mise à jour + rotateur élégant des lieux.
   Tous les textes en BLANC pur pour bonne lisibilité sur l'image hero. */

/* Pretitle en blanc, légère ombre portée */
.hero .hero-pretitle {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35) !important;
  opacity: 0.92 !important;
}

/* Titre / rotateur en blanc */
.hero .hero-title,
.hero .hero-title-places,
.hero .hero-title em,
.hero .hero-title .places-rotator,
.hero .hero-title .place-item {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45) !important;
}

/* Conteneur du rotateur : inline-block avec espace réservé,
   évite les sauts de ligne lors de la transition. */
.hero .hero-title-places {
  display: block;
  line-height: 1.05;
  min-height: 1.1em;
  letter-spacing: 0.005em;
}

.hero .places-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  min-height: 1.1em;
  /* Réserve un peu de place pour éviter les shifts */
  min-width: min(90vw, 14ch);
  font-style: italic;
  font-weight: 300;
}

/* Chaque lieu : superposé pour permettre un fondu enchaîné élégant */
.hero .place-item {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 14px);
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  letter-spacing: 0.01em;
  transition:
    opacity 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform, filter;
}

/* État d'arrivée (entering) : préparé sous le texte, invisible */
.hero .place-item.is-entering {
  opacity: 0;
  transform: translate(-50%, 18px);
  filter: blur(8px);
}

/* État actif : centré, net, visible */
.hero .place-item.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
  filter: blur(0);
}

/* État sortant : remonte légèrement en s'estompant */
.hero .place-item.is-leaving {
  opacity: 0;
  transform: translate(-50%, -18px);
  filter: blur(8px);
}

/* Fine ligne dorée sous le lieu courant — touche premium subtile */
.hero .place-item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35em;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.85) 50%, transparent 100%);
  transform: translateX(-50%) scaleX(0.6);
  transform-origin: center;
  opacity: 0;
  animation: placeUnderline 2.3s ease-out forwards;
}
@keyframes placeUnderline {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.3); }
  30%  { opacity: 1; transform: translateX(-50%) scaleX(1); }
  85%  { opacity: 1; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.1); }
}

/* Adaptation mobile : taille un peu plus petite et zone réservée adaptée */
@media (max-width: 768px) {
  .hero .places-rotator {
    min-width: min(92vw, 18ch);
  }
  .hero .place-item.is-active::after {
    width: 36px;
    bottom: -0.28em;
  }
}

/* Respect de la préférence "reduced motion" */
@media (prefers-reduced-motion: reduce) {
  .hero .place-item {
    transition: opacity 250ms linear !important;
    filter: none !important;
    transform: translate(-50%, 0) !important;
  }
  .hero .place-item.is-active::after { animation: none; opacity: 1; }
}
/* ─────────── FIN FIX 34 ─────────── */


/* ─────────── FIX 35 ─────────── */
/* Rotateur de lieux — version animation CSS keyframes.
   Plus robuste que les transitions (pas de dépendance à l'état initial). */

/* Base : élément visible par défaut (pour affichage initial) */
.hero .place-item {
  position: static;
  transform: none;
  display: inline-block;
  opacity: 1;
  filter: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  will-change: opacity, transform, filter;
}

/* Neutraliser les transitions de FIX 34 qui interféraient */
.hero .place-item,
.hero .place-item.is-active,
.hero .place-item.is-entering,
.hero .place-item.is-leaving {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  left: auto !important;
  top: auto !important;
  transition: none !important;
}

/* Animation de sortie : fade + remontée + flou */
.hero .place-item.place-anim-out {
  animation: placeSlideOut 380ms cubic-bezier(0.55, 0.08, 0.68, 0.53) forwards !important;
}

/* Animation d'entrée : fade + venue du bas + netteté */
.hero .place-item.place-anim-in {
  animation: placeSlideIn 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

@keyframes placeSlideOut {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.98); filter: blur(6px); }
}

@keyframes placeSlideIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(8px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Neutraliser l'ancien soulignement ::after qui se basait sur is-active */
.hero .place-item.is-active::after { display: none !important; content: none !important; }

/* Fine ligne dorée sous le texte, indépendante de l'état */
.hero .places-rotator::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  width: 52px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.75) 50%, transparent 100%);
  opacity: 0.9;
}

/* Respect du reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero .place-item.place-anim-out,
  .hero .place-item.place-anim-in {
    animation-duration: 200ms !important;
  }
}
/* ─────────── FIN FIX 35 ─────────── */


/* ─────────── FIX 36 ─────────── */
/* Ajustements hero + sélecteur FR|EN moderne + hover bouton Réserver */

/* --- 1) Pretitle légèrement plus grande --- */
.hero .hero-pretitle {
  font-size: 1.05rem !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 1.1rem !important;
}
@media (max-width: 768px) {
  .hero .hero-pretitle {
    font-size: 0.92rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* --- 2) Rotateur : effet plus élégant + blanc chaud --- */
/* Un blanc "chaud" / ivoire très léger pour un rendu premium */
.hero .hero-title,
.hero .hero-title-places,
.hero .hero-title em,
.hero .places-rotator,
.hero .place-item {
  color: #f8f5ef !important;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.45),
    0 1px 3px rgba(0,0,0,0.35),
    0 0 1px rgba(255,255,255,0.15) !important;
  font-style: italic !important;
  font-weight: 300 !important;
}

/* Nouvelle animation plus élégante : clip-path vertical + fondu + micro-scale */
/* On surcharge FIX 35 pour plus de raffinement */
.hero .place-item.place-anim-out {
  animation: placeElegantOut 600ms cubic-bezier(0.76, 0, 0.24, 1) forwards !important;
}
.hero .place-item.place-anim-in {
  animation: placeElegantIn 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards !important;
}

@keyframes placeElegantOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
    letter-spacing: 0.01em;
  }
  60% {
    opacity: 0.35;
    transform: translateY(-6px) scale(0.995);
    clip-path: inset(0 0 45% 0);
    letter-spacing: 0.06em;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.99);
    clip-path: inset(0 0 100% 0);
    letter-spacing: 0.08em;
  }
}

@keyframes placeElegantIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
    clip-path: inset(100% 0 0 0);
    letter-spacing: 0.08em;
  }
  35% {
    opacity: 0.9;
    transform: translateY(4px) scale(0.998);
    clip-path: inset(40% 0 0 0);
    letter-spacing: 0.04em;
  }
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
    letter-spacing: 0.015em;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
    letter-spacing: 0.01em;
  }
}

/* Affiner la ligne dorée sous le rotator */
.hero .places-rotator::after {
  width: 68px !important;
  height: 1px !important;
  bottom: -0.22em !important;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.85) 50%, transparent 100%) !important;
  opacity: 0.85 !important;
}

/* --- 3) Masquer le hamburger (au cas où, et pour les langages responsive) --- */
nav .hamburger,
nav .nav-toggle,
nav .mobile-menu-toggle,
.mobile-menu,
#mobileMenu {
  display: none !important;
}

/* Masquer l'ancien lang-switcher si jamais resté */
nav .lang-switcher,
nav .lang-dropdown {
  display: none !important;
}

/* --- 4) Sélecteur de langue moderne FR | EN --- */
nav .nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, background 0.25s ease;
}

nav.scrolled .nav-lang-toggle {
  border-color: rgba(212,175,55,0.35);
  background: rgba(255,255,255,0.04);
}

nav .nav-lang-toggle:hover {
  border-color: rgba(212,175,55,0.6);
  background: rgba(255,255,255,0.10);
}

nav .nav-lang-toggle .lang-btn {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  padding: 0.15rem 0.25rem;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

nav .nav-lang-toggle .lang-btn:hover {
  color: #ffffff;
}

nav .nav-lang-toggle .lang-btn.is-active {
  color: var(--gold, #d4af37);
  font-weight: 700;
}

nav.scrolled .nav-lang-toggle .lang-btn.is-active {
  color: var(--gold, #d4af37);
}

nav .nav-lang-toggle .lang-sep {
  color: rgba(255,255,255,0.35);
  font-weight: 300;
  user-select: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* --- 5) Bouton RÉSERVER du header : hover amélioré --- */
/* Le sélecteur cible le lien/bouton "Réserver" dans la nav (classes courantes) */
nav a.btn-reserve,
nav .nav-reserve,
nav a[href*="reserv"],
nav .btn-book,
nav a.btn-primary {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
}

nav a.btn-reserve:hover,
nav .nav-reserve:hover,
nav a[href*="reserv"]:hover,
nav .btn-book:hover,
nav a.btn-primary:hover {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-color: rgba(212,175,55,0.9) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(212,175,55,0.6) inset !important;
  transform: translateY(-1px);
}

/* Adaptation mobile : sélecteur plus compact */
@media (max-width: 768px) {
  nav .nav-lang-toggle {
    margin-left: 0.5rem;
    padding: 0.25rem 0.65rem;
  }
  nav .nav-lang-toggle .lang-btn {
    font-size: 0.78rem;
  }
  /* S'assurer que la nav mobile garde les liens visibles si le burger est masqué */
  nav .nav-links {
    display: flex !important;
  }
}

/* Sur très petits écrans, le hamburger étant retiré, on doit rendre les liens accessibles.
   Nav repliée : on garde les items visibles avec gap réduit. */
@media (max-width: 600px) {
  nav {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  nav .nav-links {
    gap: 0.9rem !important;
  }
  nav .nav-links a {
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
  }
}
/* ─────────── FIN FIX 36 ─────────── */


/* ─────────── FIX 37 ─────────── */
/* Hover amélioré pour le bouton RÉSERVER du header
   (le lien pointe vers /reservation.html, sans classe dédiée) */

nav a[href$="reservation.html"],
nav a[href="/reservation.html"] {
  transition: background 0.28s ease, color 0.28s ease,
              box-shadow 0.28s ease, transform 0.2s ease,
              border-color 0.28s ease !important;
}

nav a[href$="reservation.html"]:hover,
nav a[href="/reservation.html"]:hover {
  background: #ffffff !important;
  color: #1a1a1a !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(212, 175, 55, 0.9) inset !important;
  transform: translateY(-1px);
}

/* Variante nav scrollé : fond or subtil */
nav.scrolled a[href$="reservation.html"]:hover,
nav.scrolled a[href="/reservation.html"]:hover {
  background: var(--gold, #d4af37) !important;
  color: #0b0b0b !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}
/* ─────────── FIN FIX 37 ─────────── */


/* ─────────── FIX 38 ─────────── */
/* Hover bouton RÉSERVER — haute spécificité pour battre style.css */

html body nav a[href*="reservation"],
html body nav .nav-links a[href*="reservation"] {
  transition:
    background 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.2s ease,
    border-color 0.28s ease !important;
}

/* Hover : blanc + texte noir + contour doré + léger shadow */
html body nav a[href*="reservation"]:hover,
html body nav .nav-links a[href*="reservation"]:hover,
html body nav a[href*="reservation"]:focus-visible {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0b0b0b !important;
  opacity: 1 !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(212, 175, 55, 0.95) inset !important;
  transform: translateY(-1px);
  text-shadow: none !important;
}

/* Version nav scrollé : fond or subtil sur hover */
html body nav.scrolled a[href*="reservation"]:hover,
html body nav.scrolled .nav-links a[href*="reservation"]:hover {
  background: var(--gold, #d4af37) !important;
  background-color: var(--gold, #d4af37) !important;
  color: #0b0b0b !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}
/* ─────────── FIN FIX 38 ─────────── */


/* =============== FIX 39 =============== */
/* Rotateur de lieux — animation premium : cross-fade doux + drift vertical subtil + blur.
   Timing aéré, cadence plus naturelle. Override complet des FIX 34/35/36. */

/* Conteneur : réserve une vraie hauteur/largeur pour éviter tout jump. */
.hero .hero-title-places {
  display: block !important;
  line-height: 1.1 !important;
  min-height: 1.15em !important;
  overflow: visible !important;
}

.hero .places-rotator {
  position: relative !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  min-height: 1.15em !important;
  overflow: visible !important;
  perspective: 1000px !important;
}

/* Reset complet des .place-item — on repart de zéro */
.hero .place-item {
  display: inline-block !important;
  position: static !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  letter-spacing: 0.005em !important;
  transition: none !important;
  animation: none !important;
  will-change: opacity, transform, filter !important;
}

/* Sortie élégante : fade down doux + léger blur */
.hero .place-item.place-anim-out {
  animation: placePremiumOut 750ms cubic-bezier(0.33, 0, 0.2, 1) forwards !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Entrée élégante : fade in + léger lift + net */
.hero .place-item.place-anim-in {
  animation: placePremiumIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

@keyframes placePremiumOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
    filter: blur(6px);
  }
}

@keyframes placePremiumIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(8px);
  }
  55% {
    opacity: 0.85;
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hero .place-item.place-anim-out,
  .hero .place-item.place-anim-in {
    animation-duration: 300ms !important;
  }
}
/* =============== FIN FIX 39 =============== */


/* =============== FIX 40 =============== */
/* Formulaire de reservation hero — layout horizontal desktop + onglets marques +
   champ nombre d'heures + hint "* Minimum 3h" + conteneur vehicles compact */

/* --- Conteneur : plus large pour layout horizontal --- */
.hero .hero-booking-form {
  max-width: 1100px !important;
  margin: 2rem auto 0 !important;
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
}

/* --- Onglets plus marques (style pill + fond contraste) --- */
.hero .booking-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 10px 10px 0 10px !important;
  background: rgba(0,0,0,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.hero .booking-tab {
  flex: 1 !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: background 0.3s, color 0.3s, transform 0.2s !important;
}
.hero .booking-tab:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
.hero .booking-tab.active {
  background: linear-gradient(180deg, rgba(215,176,94,0.95) 0%, rgba(195,155,70,0.9) 100%) !important;
  color: #111 !important;
  border-color: rgba(215,176,94,0.9) !important;
  box-shadow: 0 4px 18px rgba(215,176,94,0.35) !important;
}
.hero .booking-tab.active::after {
  display: none !important;
}

/* --- Champs : layout horizontal force sur desktop --- */
@media (min-width: 900px) {
  .hero .booking-fields {
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    padding: 22px 18px !important;
    gap: 0 !important;
  }
  .hero .booking-field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 12px !important;
  }
  .hero .booking-submit {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* --- Nombre d'heures : visible seulement en mode "heure" --- */
.hero #bf-duration-wrap {
  display: none !important;
}
.hero #bf-duration-wrap.is-visible {
  display: block !important;
}
/* Destination : masquee en mode "heure" */
.hero #bf-destination-wrap.is-hidden {
  display: none !important;
}

/* --- Hint "* Minimum 3h" + asterisque --- */
.hero .field-required {
  color: #d7b05e !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}
.hero .field-hint {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.65rem !important;
  color: rgba(255,255,255,0.55) !important;
  font-style: italic !important;
  letter-spacing: 0.04em !important;
}

/* --- Style date input : coherent avec selects --- */
.hero .booking-field input[type="date"] {
  color-scheme: dark !important;
}
.hero .booking-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65) !important;
  cursor: pointer !important;
}

/* --- Booking vehicles : compact pour rester dans le hero --- */
.hero .booking-vehicles {
  padding: 16px 18px 20px !important;
  background: rgba(0,0,0,0.18) !important;
}
.hero .vehicles-title {
  font-size: 0.95rem !important;
  margin: 0 0 12px !important;
  color: #fff !important;
  text-align: center !important;
  letter-spacing: 0.08em !important;
}
.hero .booking-vehicles .vehicle-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
.hero .booking-vehicles .vehicle-card {
  margin: 0 !important;
}
.hero .booking-vehicles .vehicle-card-inner {
  padding: 10px 8px !important;
}
.hero .booking-vehicles .vehicle-card img {
  max-height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
}
.hero .booking-vehicles .vehicle-name {
  font-size: 0.85rem !important;
}
.hero .booking-vehicles .vehicle-model {
  font-size: 0.7rem !important;
}
.hero .booking-vehicles .vehicle-price {
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
}
.hero .booking-confirm {
  margin-top: 14px !important;
  padding: 10px 22px !important;
  font-size: 0.8rem !important;
}

/* --- Mobile : retour layout vertical mais garder tabs marques --- */
@media (max-width: 899px) {
  .hero .hero-booking-form {
    max-width: calc(100% - 24px) !important;
  }
  .hero .booking-fields {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero .booking-field {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px 10px !important;
  }
  .hero .booking-field:last-of-type {
    border-bottom: none !important;
  }
  .hero .booking-submit {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .hero .booking-vehicles .vehicle-options {
    grid-template-columns: 1fr !important;
  }
}
/* =============== FIN FIX 40 =============== */


/* =============== FIX 41 =============== */
/* Override stricte des anciennes regles booking-field qui forcaient un layout 2x2.
   On force un vrai layout horizontal 5 colonnes + bouton sur desktop. */

@media (min-width: 900px) {
  /* Forcer nowrap avec specificite max */
  html body .hero .hero-booking-form .booking-fields {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: flex-end !important;
    padding: 22px 18px !important;
  }
  /* Reset tous les anciens flex: 100% + 50% */
  html body .hero .hero-booking-form .booking-field,
  html body .hero .hero-booking-form .booking-field:first-child,
  html body .hero .hero-booking-form #bf-destination-wrap,
  html body .hero .hero-booking-form .booking-field:has(#bf-date),
  html body .hero .hero-booking-form .booking-field:has(#bf-heure),
  html body .hero .hero-booking-form #bf-duration-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border-right: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: none !important;
  }
  html body .hero .hero-booking-form .booking-field:last-of-type {
    border-right: none !important;
  }
  /* Depart un peu plus large, Destination un peu plus large, date/heure/duree compacts */
  html body .hero .hero-booking-form .booking-field:first-child {
    flex: 1.6 1 0 !important;
  }
  html body .hero .hero-booking-form #bf-destination-wrap {
    flex: 1.6 1 0 !important;
  }
  html body .hero .hero-booking-form .booking-field:has(#bf-date) {
    flex: 1 1 0 !important;
  }
  html body .hero .hero-booking-form .booking-field:has(#bf-heure) {
    flex: 1 1 0 !important;
  }
  html body .hero .hero-booking-form #bf-duration-wrap {
    flex: 1 1 0 !important;
  }
  /* Bouton rechercher : taille fixe a droite */
  html body .hero .hero-booking-form .booking-submit {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    margin-bottom: 2px !important;
    padding: 12px 26px !important;
    height: 48px !important;
  }
  /* Inputs : hauteur coherente */
  html body .hero .hero-booking-form input,
  html body .hero .hero-booking-form select {
    height: 42px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  /* Labels en blanc sur fond transparent (deja en place mais on s'assure) */
  html body .hero .hero-booking-form .booking-field label {
    font-size: 0.62rem !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Hint "* Minimum 3h" : absolu pour ne pas pousser le layout */
  html body .hero .hero-booking-form #bf-duration-wrap {
    position: relative !important;
  }
  html body .hero .hero-booking-form #bf-duration-wrap .field-hint {
    position: absolute !important;
    bottom: -18px !important;
    left: 12px !important;
    white-space: nowrap !important;
  }
}

/* Mobile : on garde layout vertical (le layout 2x2 existant peut rester ou se reset ici) */
@media (max-width: 899px) {
  html body .hero .hero-booking-form .booking-fields {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html body .hero .hero-booking-form .booking-field {
    flex: 1 1 100% !important;
    padding: 4px 0 !important;
    border-right: none !important;
  }
  html body .hero .hero-booking-form .booking-field:has(#bf-date),
  html body .hero .hero-booking-form .booking-field:has(#bf-heure),
  html body .hero .hero-booking-form #bf-duration-wrap {
    flex: 1 1 calc(50% - 8px) !important;
  }
}
/* =============== FIN FIX 41 =============== */


/* =============== FIX 42 =============== */
/* Corriger largeur du bouton Rechercher (cassait le layout horizontal) */
@media (min-width: 900px) {
  html body .hero .hero-booking-form .booking-submit {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 120px !important;
    max-width: 180px !important;
    margin-top: 0 !important;
    margin-left: 12px !important;
    height: 48px !important;
    padding: 0 22px !important;
    font-size: 0.82rem !important;
    align-self: flex-end !important;
    margin-bottom: 0 !important;
  }
}
/* =============== FIN FIX 42 =============== */


/* =============== FIX 43 =============== */
/* 1) Largeur champs adaptative selon contenu du placeholder + bouton compact
   2) Select nombre d'heures : options blanches avec texte sombre
   3) Cartes vehicules : remplir toute la largeur + label capacite
   4) Marque "Transfer by Cab" reste blanche au scroll */

/* --- 1. Largeurs flex adaptatives : depart/destination plus larges pour placeholder long --- */
@media (min-width: 900px) {
  /* Depart et Destination ont de longs placeholders ("Adresse de prise en charge") */
  html body .hero .hero-booking-form .booking-field:first-child {
    flex: 2.4 1 0 !important;
  }
  html body .hero .hero-booking-form #bf-destination-wrap {
    flex: 2.4 1 0 !important;
  }
  /* Date compact (format fixe) */
  html body .hero .hero-booking-form .booking-field:has(#bf-date) {
    flex: 1.1 1 0 !important;
  }
  /* Heure de depart : placeholder moyen */
  html body .hero .hero-booking-form .booking-field:has(#bf-heure) {
    flex: 1.3 1 0 !important;
  }
  /* Nombre d'heures : court */
  html body .hero .hero-booking-form #bf-duration-wrap {
    flex: 1.1 1 0 !important;
  }
  /* Bouton plus compact pour laisser place aux champs */
  html body .hero .hero-booking-form .booking-submit {
    min-width: 110px !important;
    max-width: 140px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
  }
  /* Inputs : s'etirent toujours pleine largeur du champ */
  html body .hero .hero-booking-form .booking-field input,
  html body .hero .hero-booking-form .booking-field select {
    width: 100% !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }
}

/* --- 2. Select nombre d'heures : options blanches coherentes --- */
html body .hero .hero-booking-form #bf-duration {
  background: rgba(255,255,255,0.92) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
}
html body .hero .hero-booking-form #bf-duration option {
  background: #ffffff !important;
  color: #1a1a1a !important;
}
/* Uniformiser tous les selects (y compris pendant deroulement) */
html body .hero .hero-booking-form select,
html body .hero .hero-booking-form select:focus,
html body .hero .hero-booking-form select:active {
  background: rgba(255,255,255,0.92) !important;
  color: #1a1a1a !important;
}
html body .hero .hero-booking-form select option {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* --- 3. Cartes vehicules : remplir toute la largeur + capacite --- */
.hero .booking-vehicles {
  padding: 18px 18px 22px !important;
}
.hero .booking-vehicles .vehicle-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
}
.hero .booking-vehicles .vehicle-card {
  width: 100% !important;
  margin: 0 !important;
}
.hero .booking-vehicles .vehicle-card-inner {
  width: 100% !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}
.hero .booking-vehicles .vehicle-card img {
  max-height: 70px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 4px !important;
}
/* Label capacite : 3 pers. . 2 valises */
.hero .booking-vehicles .vehicle-capacity {
  display: block !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  color: rgba(26,26,26,0.72) !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* --- 4. Marque "Transfer by Cab" reste blanche au scroll --- */
html body nav.scrolled .nav-logo,
html body nav.scrolled .nav-logo *,
html body nav.scrolled .brand,
html body nav.scrolled .brand *,
html body nav.scrolled a.nav-logo,
html body nav.scrolled a.nav-logo *,
html body nav.scrolled .logo,
html body nav.scrolled .logo *,
html body header.scrolled .nav-logo,
html body header.scrolled .nav-logo *,
html body .scrolled .brand-transfer,
html body .scrolled .brand-transfer * {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4) !important;
}
/* =============== FIN FIX 43 =============== */


/* =============== FIX 44 =============== */
/* Ajustements fins : "Heure de depart" trop serre, date trop etroite,
   optimiser font-size des inputs pour que tous les textes rentrent */

@media (min-width: 900px) {
  /* Font-size legerement reduit sur inputs pour optimiser l'espace */
  html body .hero .hero-booking-form input,
  html body .hero .hero-booking-form select {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
  }
  /* Date : format fixe, un peu plus large pour afficher 18/04/2026 */
  html body .hero .hero-booking-form .booking-field:has(#bf-date) {
    flex: 1.2 1 0 !important;
  }
  /* Heure : placeholder "Heure de depart" long, necessite plus d'espace */
  html body .hero .hero-booking-form .booking-field:has(#bf-heure) {
    flex: 1.5 1 0 !important;
  }
  /* Nombre d'heures : "3 heures" short */
  html body .hero .hero-booking-form #bf-duration-wrap {
    flex: 1.1 1 0 !important;
  }
  /* Select padding droit reduit (fleche native prend deja de la place) */
  html body .hero .hero-booking-form select {
    padding-right: 6px !important;
  }
  /* Labels : un tout petit peu plus grand pour cohérence */
  html body .hero .hero-booking-form .booking-field label {
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
  }
}
/* =============== FIN FIX 44 =============== */


/* =============== FIX 45 =============== */
/* Specificite ID pour battre les regles ID precedentes */

@media (min-width: 900px) {
  html body .hero #bf-depart,
  html body .hero #bf-destination,
  html body .hero #bf-date,
  html body .hero #bf-heure,
  html body .hero #bf-duration {
    height: 44px !important;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }
  html body .hero #bf-heure {
    padding-right: 4px !important;
  }
  html body .hero #bf-duration {
    padding-right: 4px !important;
  }
}
/* =============== FIN FIX 45 =============== */


/* =============== FIX 46 =============== */
/* Custom arrow pour <select> : controle total sur l'espace texte
   + heure field flex augmente pour tenir "Heure de depart" complet */

@media (min-width: 900px) {
  /* Heure a besoin de plus de place */
  html body .hero .hero-booking-form .booking-field:has(#bf-heure) {
    flex: 1.7 1 0 !important;
  }
  /* Depart/Destination legerement reduit pour compenser */
  html body .hero .hero-booking-form .booking-field:first-child,
  html body .hero .hero-booking-form #bf-destination-wrap {
    flex: 2.3 1 0 !important;
  }
  /* Date compact */
  html body .hero .hero-booking-form .booking-field:has(#bf-date) {
    flex: 1.1 1 0 !important;
  }
}

/* Custom arrow sur tous les selects du booking */
html body .hero .hero-booking-form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231a1a1a' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
  padding-right: 26px !important;
}
/* =============== FIN FIX 46 =============== */


/* =============== FIX 47 =============== */
/* Labels plus compacts pour tenir en entier + remettre une fleche sur les selects */

@media (min-width: 900px) {
  /* Labels : letter-spacing reduit + overflow visible pour laisser dépasser légèrement */
  html body .hero .hero-booking-form .booking-field label {
    letter-spacing: 0.04em !important;
    font-size: 0.58rem !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}

/* Fleche custom SVG (via background) avec plus forte specificite */
html body .hero .hero-booking-form #bf-heure,
html body .hero .hero-booking-form #bf-duration {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23333' d='M5 6L0 0h10z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 8px 5px !important;
  background-color: rgba(255,255,255,0.92) !important;
  padding-right: 22px !important;
}
/* =============== FIN FIX 47 =============== */

/* ========== FIX 48: vehicle cards premium sales layout ========== */
/* Full-width 3-column grid, large card, hero image, price XXL, selected state */
html body .hero .vehicle-options,
html body .booking-vehicles .vehicle-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 18px 0 0 0 !important;
  padding: 0 !important;
}
html body .hero .vehicle-card,
html body .booking-vehicles .vehicle-card {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .hero .vehicle-card:hover,
html body .booking-vehicles .vehicle-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.16) !important;
  border-color: rgba(198,160,93,0.55) !important;
}
html body .hero .vehicle-card input[type="radio"],
html body .booking-vehicles .vehicle-card input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Selected state (when the radio is checked) */
html body .hero .vehicle-card:has(input:checked),
html body .booking-vehicles .vehicle-card:has(input:checked) {
  border-color: #c6a05d !important;
  box-shadow: 0 14px 36px rgba(198,160,93,0.28), 0 0 0 2px #c6a05d inset !important;
  transform: translateY(-2px) !important;
}
html body .hero .vehicle-card-inner,
html body .booking-vehicles .vehicle-card-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}
/* Hero image area */
html body .hero .vehicle-card img,
html body .booking-vehicles .vehicle-card img {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  max-width: none !important;
  object-fit: contain !important;
  background: linear-gradient(180deg, #f7f5f1 0%, #ffffff 100%) !important;
  padding: 14px 16px 8px !important;
  margin: 0 !important;
  transition: transform .35s ease !important;
}
html body .hero .vehicle-card:hover img,
html body .booking-vehicles .vehicle-card:hover img {
  transform: scale(1.04) !important;
}
/* Name & model typography */
html body .hero .vehicle-card .vehicle-name,
html body .booking-vehicles .vehicle-card .vehicle-name {
  display: block !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.3px !important;
  margin: 6px 12px 0 !important;
  padding: 0 !important;
}
html body .hero .vehicle-card .vehicle-model,
html body .booking-vehicles .vehicle-card .vehicle-model {
  display: block !important;
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #8a8a8a !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin: 2px 12px 8px !important;
  padding: 0 !important;
}
/* Capacity */
html body .hero .vehicle-card .vehicle-capacity,
html body .booking-vehicles .vehicle-card .vehicle-capacity {
  display: block !important;
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #4a4a4a !important;
  margin: 0 12px 10px !important;
  padding: 6px 10px !important;
  background: #f5f1ea !important;
  border-radius: 999px !important;
  align-self: center !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
}
/* Price block — the sales focal point */
html body .hero .vehicle-card .vehicle-price,
html body .booking-vehicles .vehicle-card .vehicle-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto 10px 12px !important;
  padding: 12px 10px !important;
  min-height: 62px !important;
  background: linear-gradient(180deg, #fbf6ec 0%, #f4ead5 100%) !important;
  border: 1px solid rgba(198,160,93,0.35) !important;
  border-radius: 10px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #8a6a2c !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  line-height: 1.15 !important;
  position: relative !important;
}
/* When price still shows placeholder text (long sentence), shrink it */
html body .hero .vehicle-card .vehicle-price:not(:empty) {
  font-size: 22px !important;
}
html body .hero .vehicle-card .vehicle-price[data-placeholder]:not(.has-price) {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #9a7f4a !important;
  background: #faf6ee !important;
  border-style: dashed !important;
  letter-spacing: 0.3px !important;
}
/* "Tout inclus" badge below price */
html body .hero .vehicle-card .vehicle-price.has-price::after,
html body .booking-vehicles .vehicle-card .vehicle-price.has-price::after {
  content: "Tout inclus • TVA & frais" !important;
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #a0824a !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
/* Recommended ribbon on V-Class (middle card) */
html body .hero .vehicle-card:nth-child(2)::before,
html body .booking-vehicles .vehicle-card:nth-child(2)::before {
  content: "POPULAIRE" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  padding: 4px 10px !important;
  background: #c6a05d !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 10px rgba(198,160,93,0.35) !important;
}
/* Booking confirm button — bigger, more inviting */
html body .hero .booking-confirm,
html body .booking-vehicles .booking-confirm,
html body #bf-confirm {
  display: block !important;
  width: 100% !important;
  margin: 18px 0 0 0 !important;
  padding: 16px 24px !important;
  background: linear-gradient(180deg, #d4af70 0%, #c6a05d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(198,160,93,0.35) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
html body .hero .booking-confirm:hover,
html body .booking-vehicles .booking-confirm:hover,
html body #bf-confirm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(198,160,93,0.45) !important;
  filter: brightness(1.04) !important;
}
/* Responsive: stack on narrow viewports */
@media (max-width: 860px) {
  html body .hero .vehicle-options,
  html body .booking-vehicles .vehicle-options {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .hero .vehicle-card,
  html body .booking-vehicles .vehicle-card {
    min-height: 0 !important;
  }
  html body .hero .vehicle-card img,
  html body .booking-vehicles .vehicle-card img {
    height: 140px !important;
  }
}
/* ========== END FIX 48 ========== */

/* ========== FIX 49: override max-height on vehicle card images ========== */
html body .hero .vehicle-card img,
html body .hero .booking-vehicles .vehicle-card img,
html body .booking-vehicles .vehicle-card img,
html body .vehicle-card-inner img {
  height: 150px !important;
  max-height: 150px !important;
  min-height: 150px !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  padding: 14px 16px 8px !important;
  background: linear-gradient(180deg, #f7f5f1 0%, #ffffff 100%) !important;
}
@media (max-width: 860px) {
  html body .hero .vehicle-card img,
  html body .hero .booking-vehicles .vehicle-card img,
  html body .booking-vehicles .vehicle-card img,
  html body .vehicle-card-inner img {
    height: 140px !important;
    max-height: 140px !important;
    min-height: 140px !important;
  }
}
/* ========== END FIX 49 ========== */

/* ========== FIX 50: override booking-confirm max-width, center it ========== */
html body .hero .booking-confirm,
html body .booking-vehicles .booking-confirm,
html body #bf-confirm {
  max-width: 460px !important;
  min-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 16px !important;
  padding: 18px 28px !important;
}
@media (max-width: 720px) {
  html body .hero .booking-confirm,
  html body .booking-vehicles .booking-confirm,
  html body #bf-confirm {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
/* ========== END FIX 50 ========== */

/* ========== FIX 51: discreet cookie bubble on home ========== */
/* Compact, low-contrast, becomes fully visible only on hover */
html body #cookie-manage,
html body .cookie-manage-btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  color: rgba(255,255,255,0.75) !important;
  background: rgba(20,20,20,0.45) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 0.55 !important;
  transition: opacity .25s ease, background .25s ease, color .25s ease !important;
  bottom: 14px !important;
  left: 14px !important;
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
html body #cookie-manage:hover,
html body .cookie-manage-btn:hover,
html body #cookie-manage:focus,
html body .cookie-manage-btn:focus {
  opacity: 1 !important;
  color: #ffffff !important;
  background: rgba(20,20,20,0.8) !important;
  border-color: rgba(198,160,93,0.6) !important;
}
html body #cookie-manage i,
html body .cookie-manage-btn i {
  font-size: 11px !important;
  margin-right: 4px !important;
  opacity: 0.85 !important;
}
/* ========== END FIX 51 ========== */


/* ========== FIX 53: payment methods — expert webmaster redesign ========== */
/* Container */
html body .footer-payment-block {
  display: block !important;
  max-width: 340px !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Eyebrow title */
html body .footer-payment-block h4 {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(198,160,93,0.9) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
/* Grid */
html body .footer-payment-block .payment-logos {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Card (each logo) — premium payment card format */
html body .footer-payment-block .payment-logo {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.04) inset !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 70% auto !important;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease !important;
  overflow: hidden !important;
  cursor: default !important;
  will-change: transform !important;
}
html body .footer-payment-block .payment-logo:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(198,160,93,0.35) !important;
  border-color: rgba(198,160,93,0.4) !important;
}
/* Fallback aspect-ratio for older browsers */
@supports not (aspect-ratio: 3/2) {
  html body .footer-payment-block .payment-logo {
    height: 34px !important;
  }
}
/* Visually hidden labels (sr-only) */
html body .footer-payment-block .payment-logo .pay-label,
html body .footer-payment-block .payment-logo > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* === Per-brand logo injection === */
html body .footer-payment-block .payment-logo[data-pay="visa"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20324%22%3E%3Cpath%20fill%3D%22%231A1F71%22%20d%3D%22M651.19%20.5c-70.94%200-134.34%2036.77-134.34%20104.67%200%2077.82%20112.35%2083.2%20112.35%20122.3%200%2016.46-18.86%2031.2-51.06%2031.2-45.71%200-79.89-20.59-79.89-20.59l-14.64%2068.54s39.39%2017.38%2091.69%2017.38c77.55%200%20138.58-38.57%20138.58-107.66%200-82.23-112.82-87.45-112.82-123.75%200-12.89%2015.48-27.01%2047.58-27.01%2036.23%200%2065.8%2014.97%2065.8%2014.97l14.33-66.2S696.61%20.5%20651.2%20.5zM2.22%205.49L%20.5%2015.5s29.84%205.46%2056.72%2016.36c34.61%2012.49%2037.07%2019.77%2042.89%2042.35l63.55%20244.83h85.21L380.04%205.49h-85.04l-84.4%20210.77-34.45-181C172.99%2013.91%20160.58%205.5%20145.29%205.5H2.21zm411.97%200L347.4%20319.05h81.07L495.19%205.49h-81zm452.77%200c-15.24%200-23.31%208.17-29.23%2022.44L721.81%20319.04h85.04l16.42-47.49h103.66l9.98%2047.49H1012L946.54%205.49h-79.58zm11.06%2084.67l25.23%20117.87h-67.55l42.33-117.87z%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 62% auto !important; }
html body .footer-payment-block .payment-logo[data-pay="mastercard"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20152%20108%22%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2254%22%20r%3D%2248%22%20fill%3D%22%23EB001B%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2254%22%20r%3D%2248%22%20fill%3D%22%23F79E1B%22%2F%3E%3Cpath%20fill%3D%22%23FF5F00%22%20d%3D%22M76%2019.4a48%2048%200%200%200%200%2069.2%2048%2048%200%200%200%200-69.2z%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 46% auto !important; }
html body .footer-payment-block .payment-logo[data-pay="amex"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Crect%20width%3D%221000%22%20height%3D%221000%22%20fill%3D%22%232E77BB%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%22360%22%20width%3D%22860%22%20height%3D%22280%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Ctext%20x%3D%22500%22%20y%3D%22475%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%22105%22%20fill%3D%22%232E77BB%22%20letter-spacing%3D%228%22%3EAMERICAN%3C%2Ftext%3E%3Ctext%20x%3D%22500%22%20y%3D%22595%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%22105%22%20fill%3D%22%232E77BB%22%20letter-spacing%3D%228%22%3EEXPRESS%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 84% auto !important; background-color: #2E77BB !important; border-color: rgba(255,255,255,0.15) !important; }
html body .footer-payment-block .payment-logo[data-pay="applepay"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2030%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12.79%203.87c-.82.97-2.13%201.74-3.44%201.63-.16-1.31.48-2.7%201.23-3.56C11.4.93%2012.84.22%2014%20.17c.14%201.36-.39%202.7-1.21%203.7zm1.2%201.9c-1.9-.11-3.52%201.08-4.42%201.08-.92%200-2.3-1.02-3.8-1-1.96.03-3.77%201.13-4.77%202.89-2.05%203.53-.53%208.76%201.46%2011.63.97%201.42%202.14%202.98%203.67%202.93%201.46-.06%202.03-.95%203.8-.95%201.76%200%202.28.95%203.83.92%201.6-.03%202.6-1.42%203.57-2.85%201.11-1.62%201.56-3.2%201.59-3.28-.04-.02-3.06-1.17-3.09-4.63-.03-2.9%202.36-4.28%202.47-4.36-1.36-2-3.47-2.22-4.21-2.28z%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M29.3%202.06c4.14%200%207.02%202.85%207.02%207%200%204.16-2.94%207.02-7.12%207.02h-4.58v7.27h-3.3V2.06zm-4.68%2011.26h3.8c2.89%200%204.53-1.55%204.53-4.24s-1.64-4.23-4.51-4.23h-3.82zm12.56%205.88c0-2.73%202.09-4.4%205.8-4.6l4.27-.26v-1.2c0-1.74-1.17-2.77-3.12-2.77-1.85%200-3%20.89-3.28%202.27h-3c.18-2.82%202.58-4.9%206.4-4.9%203.74%200%206.14%201.99%206.14%205.1v10.67h-3.05v-2.55h-.07c-.9%201.72-2.85%202.81-4.88%202.81-3.02%200-5.14-1.88-5.14-4.57zm10.07-1.4v-1.23l-3.84.24c-1.91.13-3%20.98-3%202.3s1.12%202.2%202.83%202.2c2.23%200%203.99-1.54%203.99-3.5zm6.22%209.98v-2.58c.23.06.76.06%201.02.06%201.47%200%202.26-.62%202.75-2.21%200-.03.28-.95.28-.97L51.95%207.91h3.44l3.92%2012.6h.06l3.92-12.6h3.35l-5.8%2016.28c-1.33%203.75-2.86%204.96-6.07%204.96-.26%200-1.06-.03-1.3-.08z%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 66% auto !important; background-color: #000000 !important; border-color: rgba(255,255,255,0.18) !important; }
html body .footer-payment-block .payment-logo[data-pay="googlepay"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20752%20400%22%3E%3Cpath%20fill%3D%22%235F6368%22%20d%3D%22M355.1%20196.3v80.1h-25.4V78.7h67.5c17.1%200%2031.7%205.7%2043.7%2017.1%2012.3%2011.4%2018.4%2025.3%2018.4%2041.7%200%2016.8-6.1%2030.7-18.4%2042-11.9%2011.3-26.5%2016.8-43.7%2016.8zm0-93.2v68.9h42.6c10.1%200%2018.6-3.4%2025.3-10.2%206.8-6.8%2010.3-15%2010.3-24.3%200-9.1-3.5-17.2-10.3-24-6.7-7.1-15.1-10.4-25.3-10.4z%22%2F%3E%3Cpath%20fill%3D%22%235F6368%22%20d%3D%22M525%20136.6c18.8%200%2033.6%205%2044.4%2015.1%2010.9%2010.1%2016.3%2023.9%2016.3%2041.4v83.3h-24.2v-18.8h-1.1c-10.5%2015.5-24.5%2023.2-42%2023.2-15%200-27.4-4.4-37.5-13.3-10.1-8.9-15.1-20-15.1-33.4%200-14.1%205.3-25.3%2016-33.6%2010.6-8.4%2024.9-12.5%2042.7-12.5%2015.2%200%2027.8%202.8%2037.6%208.4v-5.8c0-8.9-3.5-16.4-10.6-22.6-7-6.2-15.3-9.3-24.7-9.3-14.3%200-25.6%206-33.8%2018.1l-22.4-14.1c12.3-17.6%2030.5-26.4%2054.5-26.4zm-32.9%2098.3c0%206.6%202.8%2012.2%208.5%2016.6%205.6%204.4%2012.2%206.6%2019.8%206.6%2010.7%200%2020.2-4%2028.6-11.9%208.4-7.9%2012.6-17.2%2012.6-27.9-8-6.3-19.1-9.5-33.4-9.5-10.4%200-19.1%202.5-26%207.5-7.1%205.2-10.6%2011.4-10.6%2018.6z%22%2F%3E%3Cpath%20fill%3D%22%235F6368%22%20d%3D%22M724%20141l-84.8%20195H613l31.5-68.3L589%20141h27.7l40.3%2097h.6l39.2-97z%22%2F%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M237.9%20179c0-8.3-.7-16.2-2.1-23.8H131.4v44l59.9.1c-2.4%2014.2-10.2%2026.3-22.1%2034.3v28.1h35.7c20.8-19.3%2033-47.8%2033-82.7z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M169.2%20233.6c-9.9%206.7-22.7%2010.6-37.8%2010.6-29.1%200-53.8-19.6-62.6-46.1H32v28.9c17.6%2034.9%2053.7%2058.8%2095.4%2058.8%2028.8%200%2053-9.5%2070.6-25.8z%22%2F%3E%3Cpath%20fill%3D%22%23FABB05%22%20d%3D%22M65.2%20176.1c0-7.5%201.2-14.7%203.6-21.4v-28.9H32c-7.6%2015.2-11.9%2032.3-11.9%2050.3s4.3%2035.1%2011.9%2050.3l36.8-28.9c-2.4-6.7-3.6-13.9-3.6-21.4z%22%2F%3E%3Cpath%20fill%3D%22%23E94235%22%20d%3D%22M131.4%20108.6c16.5%200%2031.2%205.7%2042.9%2016.8l31.9-31.9C186.8%2075.5%20161.3%2065%20131.4%2065c-41.6%200-77.7%2023.9-95.4%2058.8l36.8%2028.9c8.8-26.5%2033.5-44.1%2062.6-44.1z%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 78% auto !important; }
html body .footer-payment-block .payment-logo[data-pay="paypal"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20780%20200%22%3E%3Cpath%20fill%3D%22%23003087%22%20d%3D%22M168.3%2045.1c-11.4-13-32-18.6-58.4-18.6H33.4a11%2011%200%200%200-10.8%209.3L-9.4%20189.4c-.5%203.5%202.1%206.6%205.6%206.6h47.3l11.9-75.4-.4%202.4a11%2011%200%200%201%2010.8-9.3h22.5c44.1%200%2078.7-17.9%2088.8-69.8.3-1.5.6-3%20.8-4.5-1.3-.7-1.3-.7%200%200%203-19%200-32-9.6-43z%22%2F%3E%3Cpath%20fill%3D%22%23003087%22%20d%3D%22M189.2%2094.5c-.3%201.5-.6%203-1%204.6C175%20163.5%20131.4%20186%2076%20186H48c-6.8%200-12.5%204.9-13.6%2011.6l-14.3%2090.9-4.1%2025.7a7.2%207.2%200%200%200%207.1%208.3h50c6%200%2011-4.3%2011.9-10.2l.5-2.6%209.4-59.8.6-3.3a12%2012%200%200%201%2011.9-10.2h7.5c48.6%200%2086.6-19.7%2097.7-76.8%204.6-23.8%202.2-43.7-10-57.7-3.7-4.2-8.3-7.8-13.4-10.5z%22%2F%3E%3Cpath%20fill%3D%22%23012069%22%20d%3D%22M175.6%2089.1c-2-.6-4.1-1.1-6.2-1.6-2.2-.5-4.4-.9-6.7-1.2a165%20165%200%200%200-26.4-1.9H73.7a11.9%2011.9%200%200%200-11.8%2010.1L48.2%20182.8l-.4%202.5a13.4%2013.4%200%200%201%2013.4-11.3h28c55.4%200%2098.9-22.5%20111.7-87.6.4-1.9.7-3.8%201-5.6-3.3-1.7-6.8-3.2-10.6-4.4-.9-.3-1.8-.6-2.7-.8z%22%2F%3E%3Cpath%20fill%3D%22%23003087%22%20d%3D%22M61.9%2095.1A11.9%2011.9%200%200%201%2073.7%2085h62.6c7.4%200%2014.3.5%2020.7%201.5%204.3.7%208.5%201.6%2012.5%202.8a67%2067%200%200%201%2010.6%204.4C183.4%2059.6%20183%2037.8%20165.1%2017.5%20145.3-4.9%20109.6-14%2064%20-14H-68A17%2017%200%200%200-84.8.5L-140.1%20351a10.2%2010.2%200%200%200%2010%2011.8h81.3l20.4-129.4z%22%2F%3E%3Ctext%20x%3D%22240%22%20y%3D%22130%22%20font-family%3D%22Arial%20Black%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-style%3D%22italic%22%20font-size%3D%22120%22%20fill%3D%22%23003087%22%20letter-spacing%3D%22-2%22%3EPay%3Ctspan%20fill%3D%22%23009CDE%22%3EPal%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 72% auto !important; }
html body .footer-payment-block .payment-logo[data-pay="sepa"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22400%22%20height%3D%22200%22%20fill%3D%22%23003399%22%2F%3E%3Cg%20fill%3D%22%23FFCC00%22%3E%3Ctext%20x%3D%22200%22%20y%3D%22110%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%20Black%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%2280%22%20letter-spacing%3D%224%22%3ESEPA%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22155%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-weight%3D%22600%22%20font-size%3D%2222%22%20letter-spacing%3D%226%22%20fill%3D%22%23FFFFFF%22%3EVIREMENT%20EUROP%C3%89EN%3C%2Ftext%3E%3Cg%20transform%3D%22translate(200%2C60)%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-30%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%22-21%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-21%22%20cy%3D%2221%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-30%22%20cy%3D%220%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-21%22%20cy%3D%22-21%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important; background-size: 84% auto !important; background-color: #003399 !important; border-color: rgba(255,255,255,0.15) !important; }
html body .footer-payment-block .payment-logo[data-pay="cash"] { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22400%22%20height%3D%22200%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cg%20transform%3D%22translate(60%2C40)%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22280%22%20height%3D%22120%22%20rx%3D%2210%22%20fill%3D%22%230B8A3A%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22260%22%20height%3D%22100%22%20rx%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2260%22%20r%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%2F%3E%3Ctext%20x%3D%22140%22%20y%3D%2275%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%20Black%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%2242%22%20fill%3D%22%23FFFFFF%22%3E%E2%82%AC%3C%2Ftext%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%228%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%2290%22%20r%3D%228%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.25%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%22200%22%20y%3D%22185%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2218%22%20fill%3D%22%232C2C2C%22%20letter-spacing%3D%223%22%3EESP%C3%88CES%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 84% auto !important; }

/* === Trust badge line === */
html body .footer-payment-block .payment-trust {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.65) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
html body .footer-payment-block .payment-trust strong {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
html body .footer-payment-block .payment-trust-icon {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C6A05D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E") !important;
}
/* === Responsive: stay in 4 cols on mobile === */
@media (max-width: 720px) {
  html body .footer-payment-block { max-width: none !important; }
  html body .footer-payment-block .payment-logos { grid-template-columns: repeat(4, 1fr) !important; }
  html body .footer-payment-block .payment-trust { font-size: 10px !important; padding: 5px 10px !important; }
}
/* ========== END FIX 53 ========== */


/* ============================================
   FIX 54 — LEGAL PAGE CORPORATE REDESIGN
   Applied to: mentions-legales.html (.legal-corporate)
   Structure: Hero + Sticky TOC (aside) + Content sections
   ============================================ */

/* Reset the default legal-page constraint for corporate variant */
main.legal-page.legal-corporate{
  max-width: 1280px !important;
  padding: 110px 40px 80px !important;
  margin: 0 auto !important;
  color: #1a1a1a;
  font-family: 'Inter','Helvetica Neue',Arial,sans-serif;
}

/* --- HERO ------------------------------------------------ */
.legal-corporate .legal-hero{
  background: linear-gradient(135deg,#0b0b0b 0%,#1a1a1a 60%,#2a2418 100%);
  color:#f4f0e6;
  border-radius: 18px;
  padding: 60px 56px 54px;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid rgba(201,166,107,.18);
}
.legal-corporate .legal-hero::before{
  content:"";
  position:absolute; top:-60%; right:-10%;
  width:520px; height:520px;
  background: radial-gradient(circle, rgba(201,166,107,.22) 0%, transparent 70%);
  pointer-events:none;
}
.legal-corporate .legal-hero-inner{ position:relative; z-index:1; max-width:900px; }
.legal-corporate .legal-eyebrow{
  display:inline-block;
  font-size:11px; letter-spacing: 3px; text-transform: uppercase;
  color:#c9a66b; font-weight:600;
  padding: 7px 14px;
  border:1px solid rgba(201,166,107,.45);
  border-radius: 999px;
  margin-bottom: 18px;
}
.legal-corporate .legal-hero h1{
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  color:#fff;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}
.legal-corporate .legal-subtitle{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(244,240,230,.82);
  max-width: 780px;
  margin: 0 0 28px;
}
.legal-corporate .legal-subtitle strong{ color:#fff; font-weight:600; }
.legal-corporate .legal-subtitle em{ color:#c9a66b; font-style: italic; }
.legal-corporate .legal-meta{ display:flex; flex-wrap:wrap; gap: 12px 22px; }
.legal-corporate .legal-meta-item{
  display: inline-flex; align-items:center; gap: 8px;
  font-size: 12.5px; color: rgba(244,240,230,.68);
  letter-spacing: 0.3px;
}
.legal-corporate .legal-meta-item i{ color:#c9a66b; font-size: 13px; }

/* --- LAYOUT: sticky TOC + content ------------------------ */
.legal-corporate .legal-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
.legal-corporate .legal-toc{
  position: sticky;
  top: 100px;
  background:#fff;
  border:1px solid #ece4d4;
  border-radius: 14px;
  padding: 22px 22px 22px 18px;
  box-shadow: 0 2px 18px rgba(26,26,26,.05);
}
.legal-corporate .legal-toc-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size: 13px; font-weight:700;
  letter-spacing: 2px; text-transform: uppercase;
  color:#1a1a1a;
  padding-bottom: 12px;
  border-bottom: 1px solid #ece4d4;
  margin-bottom: 12px;
}
.legal-corporate .legal-toc ol{
  list-style: none; counter-reset: toc; padding:0; margin:0;
}
.legal-corporate .legal-toc li{ counter-increment: toc; margin: 0; }
.legal-corporate .legal-toc a{
  display: block;
  padding: 8px 10px 8px 34px;
  font-size: 13px; line-height: 1.45;
  color: #4a4a4a;
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: all .22s cubic-bezier(.2,.7,.3,1);
}
.legal-corporate .legal-toc a::before{
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 8px; top: 8px;
  font-size: 10.5px; font-weight:700;
  color:#c9a66b; letter-spacing: 0.5px;
  font-family: 'Inter',sans-serif;
}
.legal-corporate .legal-toc a:hover{
  background: #faf6ec;
  color:#1a1a1a;
  transform: translateX(2px);
}
.legal-corporate .legal-toc a:hover::before{ color:#a8854c; }

/* --- CONTENT --------------------------------------------- */
.legal-corporate .legal-content{ min-width: 0; }
.legal-corporate .legal-section{
  margin-bottom: 48px;
  scroll-margin-top: 100px;
}
.legal-corporate .legal-section h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.25;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ece4d4;
  display:flex; align-items: baseline; gap: 14px;
}
.legal-corporate .legal-num{
  display: inline-block;
  font-family:'Inter',sans-serif;
  font-size: 12px; font-weight:700;
  letter-spacing: 2px;
  color:#c9a66b;
  background: rgba(201,166,107,.08);
  padding: 4px 10px;
  border-radius: 6px;
  border:1px solid rgba(201,166,107,.25);
  flex-shrink: 0;
}
.legal-corporate .legal-section p{
  font-size: 15px; line-height: 1.75;
  color: #333;
  margin: 0 0 14px;
}
.legal-corporate .legal-section p strong{ color:#1a1a1a; font-weight: 600; }
.legal-corporate .legal-section p em{ color:#6a5a3a; }
.legal-corporate .legal-section a:not(.legal-pill):not(.legal-link){
  color:#a8854c;
  text-decoration: none;
  border-bottom: 1px solid rgba(168,133,76,.35);
  transition: all .2s ease;
}
.legal-corporate .legal-section a:not(.legal-pill):not(.legal-link):hover{
  color:#1a1a1a;
  border-bottom-color: #c9a66b;
}
.legal-corporate .legal-link{
  color:#c9a66b; font-weight:600; text-decoration: none;
  position: relative;
  padding-bottom: 1px;
  background-image: linear-gradient(to right, #c9a66b, #c9a66b);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: all .25s cubic-bezier(.2,.7,.3,1);
}
.legal-corporate .legal-link:hover{
  color:#1a1a1a;
  background-size: 100% 2px;
}
.legal-corporate .legal-note{
  font-size: 13.5px;
  color:#6a6a6a;
  font-style: italic;
  padding: 12px 16px;
  background: #faf6ec;
  border-left: 3px solid #c9a66b;
  border-radius: 4px;
  margin-top: 14px !important;
}

/* --- LEGAL CARD (info box) ------------------------------- */
.legal-corporate .legal-card{
  background: #fff;
  border: 1px solid #ece4d4;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 10px 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 4px 16px rgba(26,26,26,.04);
}
.legal-corporate .legal-card p{ margin-bottom: 8px; font-size: 14.5px; }
.legal-corporate .legal-card p:last-child{ margin-bottom:0; }

/* Definition list grid inside cards */
.legal-corporate .legal-dl{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; margin: 0; }
.legal-corporate .legal-dl > div{
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #f0e8d4;
}
.legal-corporate .legal-dl > div:last-child{ border-bottom: none; }
.legal-corporate .legal-dl dt{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#8a7a5a;
  font-weight: 600;
}
.legal-corporate .legal-dl dd{
  margin: 0;
  font-size: 14.5px;
  color:#1a1a1a;
  font-weight: 500;
}

/* Contact grid */
.legal-corporate .legal-contact-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px !important;
  padding: 28px !important;
}
.legal-corporate .legal-contact-grid > div{
  display: flex; align-items:flex-start; gap: 14px;
}
.legal-corporate .legal-contact-grid > div > i{
  font-size: 18px;
  color:#c9a66b;
  background: rgba(201,166,107,.1);
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  flex-shrink: 0;
}
.legal-corporate .legal-contact-grid > div > div{ display:flex; flex-direction:column; gap: 2px; }
.legal-corporate .legal-label{
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color:#8a7a5a; font-weight:600;
}

/* Mediator highlight */
.legal-corporate .legal-mediator{
  background: linear-gradient(135deg, #faf6ec 0%, #fff 100%);
  border-left: 4px solid #c9a66b;
}

/* --- FOOTER CTA of legal page ---------------------------- */
.legal-corporate .legal-footer-cta{
  margin-top: 64px;
  padding: 40px 36px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2418 100%);
  border-radius: 18px;
  text-align: center;
  color: #f4f0e6;
}
.legal-corporate .legal-footer-cta > p{ color: rgba(244,240,230,.85); font-size: 15px; margin: 0 0 20px; }
.legal-corporate .legal-footer-cta a{
  color:#c9a66b; text-decoration: none;
  border-bottom: 1px solid rgba(201,166,107,.4);
}
.legal-corporate .legal-footer-cta a:hover{ color:#fff; border-bottom-color:#fff; }
.legal-corporate .legal-links-row{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 22px 0;
}
.legal-corporate .legal-pill{
  display: inline-flex; align-items: center;
  padding: 12px 22px;
  background: rgba(201,166,107,.1);
  border: 1px solid rgba(201,166,107,.4);
  color: #f4f0e6 !important;
  border-bottom: 1px solid rgba(201,166,107,.4) !important;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 999px;
  transition: all .3s cubic-bezier(.2,.7,.3,1);
  text-decoration: none !important;
}
.legal-corporate .legal-pill:hover{
  background: #c9a66b;
  border-color:#c9a66b !important;
  color:#1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,166,107,.3);
}
.legal-corporate .legal-updated{
  font-size: 12px;
  color: rgba(244,240,230,.55);
  letter-spacing: 0.5px;
  margin: 20px 0 0 !important;
}
.legal-corporate .legal-updated strong{ color: rgba(244,240,230,.85); }

/* --- RESPONSIVE ----------------------------------------- */
@media (max-width: 960px){
  main.legal-page.legal-corporate{ padding: 90px 20px 60px !important; }
  .legal-corporate .legal-hero{ padding: 44px 28px 40px; border-radius: 14px; }
  .legal-corporate .legal-layout{ grid-template-columns: 1fr; gap: 28px; }
  .legal-corporate .legal-toc{ position: static; }
  .legal-corporate .legal-dl > div{ grid-template-columns: 1fr; gap: 4px; border-bottom: 1px solid #f0e8d4; padding: 10px 0; }
  .legal-corporate .legal-section h2{ flex-wrap: wrap; }
  .legal-corporate .legal-footer-cta{ padding: 32px 22px; }
  .legal-corporate .legal-contact-grid{ padding: 22px !important; }
}
@media (max-width: 560px){
  .legal-corporate .legal-hero h1{ font-size: 32px; }
  .legal-corporate .legal-card{ padding: 18px; }
}
/* END FIX 54 */


/* FIX 54b — Overrides for legal-corporate: enforce H1 color and kill inherited padding */
main.legal-page.legal-corporate h1,
.legal-corporate .legal-hero h1{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.legal-corporate .legal-section{
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.legal-corporate h2,
.legal-corporate .legal-section h2{
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: none !important;
}
.legal-corporate .legal-content > *:first-child{ margin-top: 0; }
/* Override legal-subtitle which inherits from base */
.legal-corporate .legal-subtitle{ color: rgba(244,240,230,.82) !important; }
.legal-corporate .legal-hero .legal-subtitle strong{ color:#fff !important; }
.legal-corporate .legal-hero .legal-subtitle em{ color:#c9a66b !important; font-style: italic; }
/* END FIX 54b */


/* FIX 54c — Force white text in legal CTA (override dark-on-dark) */
.legal-corporate .legal-footer-cta,
.legal-corporate .legal-footer-cta > p,
.legal-corporate .legal-footer-cta p{
  color: rgba(244,240,230,.85) !important;
  -webkit-text-fill-color: rgba(244,240,230,.85) !important;
}
.legal-corporate .legal-footer-cta a{
  color:#c9a66b !important;
  -webkit-text-fill-color:#c9a66b !important;
}
.legal-corporate .legal-footer-cta a:hover{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.legal-corporate .legal-footer-cta .legal-updated{
  color: rgba(244,240,230,.55) !important;
  -webkit-text-fill-color: rgba(244,240,230,.55) !important;
}
.legal-corporate .legal-footer-cta .legal-updated strong{
  color: rgba(244,240,230,.92) !important;
  -webkit-text-fill-color: rgba(244,240,230,.92) !important;
}
.legal-corporate .legal-pill{
  color: #f4f0e6 !important;
  -webkit-text-fill-color: #f4f0e6 !important;
}
.legal-corporate .legal-pill:hover{
  color:#1a1a1a !important;
  -webkit-text-fill-color:#1a1a1a !important;
}
/* END FIX 54c */


/* ============================================
   FIX 54d — Legal Corporate: HERO & CTA lightened
   Passage d'un fond noir corporate à une palette ivoire/champagne
   plus lumineuse, élégante et juridiquement "premium"
   ============================================ */

/* --- HERO : ivoire clair avec accent doré --- */
.legal-corporate .legal-hero{
  background: linear-gradient(135deg, #faf7ef 0%, #f3ecd9 55%, #ece0c2 100%) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(201,166,107,.35) !important;
  box-shadow: 0 20px 60px rgba(201,166,107,.14), 0 2px 8px rgba(26,26,26,.05) !important;
}
.legal-corporate .legal-hero::before{
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 70%) !important;
}
.legal-corporate .legal-eyebrow{
  color: #a8854c !important;
  border-color: rgba(168,133,76,.45) !important;
  background: rgba(255,255,255,.5) !important;
  -webkit-text-fill-color: #a8854c !important;
}
/* H1 doit redevenir foncé sur fond clair (override FIX 54b) */
main.legal-page.legal-corporate h1,
.legal-corporate .legal-hero h1{
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.legal-corporate .legal-subtitle{
  color: #3a3a3a !important;
  -webkit-text-fill-color: #3a3a3a !important;
}
.legal-corporate .legal-hero .legal-subtitle strong{
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.legal-corporate .legal-hero .legal-subtitle em{
  color: #a8854c !important;
  -webkit-text-fill-color: #a8854c !important;
  font-style: italic;
}
.legal-corporate .legal-meta-item{
  color: #6a5a3a !important;
  -webkit-text-fill-color: #6a5a3a !important;
}
.legal-corporate .legal-meta-item i{
  color: #a8854c !important;
}

/* --- CTA : ivoire clair cohérent avec le hero --- */
.legal-corporate .legal-footer-cta{
  background: linear-gradient(135deg, #faf7ef 0%, #f3ecd9 100%) !important;
  border: 1px solid rgba(201,166,107,.35);
  box-shadow: 0 16px 48px rgba(201,166,107,.14), 0 2px 8px rgba(26,26,26,.04);
  color: #1a1a1a !important;
}
.legal-corporate .legal-footer-cta,
.legal-corporate .legal-footer-cta > p,
.legal-corporate .legal-footer-cta p{
  color: #3a3a3a !important;
  -webkit-text-fill-color: #3a3a3a !important;
}
.legal-corporate .legal-footer-cta a{
  color: #a8854c !important;
  -webkit-text-fill-color: #a8854c !important;
  border-bottom: 1px solid rgba(168,133,76,.4) !important;
}
.legal-corporate .legal-footer-cta a:hover{
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border-bottom-color: #1a1a1a !important;
}
.legal-corporate .legal-footer-cta .legal-updated{
  color: #8a7a5a !important;
  -webkit-text-fill-color: #8a7a5a !important;
}
.legal-corporate .legal-footer-cta .legal-updated strong{
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Pills : fond blanc, bordure dorée, texte foncé — contraste élégant */
.legal-corporate .legal-pill{
  background: #ffffff !important;
  border: 1px solid rgba(201,166,107,.5) !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  box-shadow: 0 2px 8px rgba(26,26,26,.04);
}
.legal-corporate .legal-pill:hover{
  background: #c9a66b !important;
  border-color: #c9a66b !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  box-shadow: 0 8px 24px rgba(201,166,107,.35);
}
/* END FIX 54d */


/* FIX 54e — Strip legacy section background-images on legal page
   The style.css rule "section:nth-of-type(5)" (intended for home)
   applied a Mercedes background on the Hébergeur section. Neutralize
   all background-images on legal-corporate sections. */
.legal-corporate .legal-section,
.legal-corporate section.legal-section,
main.legal-page.legal-corporate section{
  background-image: none !important;
  background: transparent !important;
  background-color: transparent !important;
}
/* END FIX 54e */


/* ═══════════════════════════════════════════════════════════════ */
/* FIX 55 — Hero booking form UX (prix visibles + bouton sticky    */
/*           + texte hero responsive mobile/tablette)              */
/* ═══════════════════════════════════════════════════════════════ */

/* 55-A : Prix par véhicule beaucoup plus visibles */
html body section.hero .vehicle-card .vehicle-price,
html body section.hero .booking-vehicles .vehicle-card span.vehicle-price {
  font-size: 0.95rem !important;
  color: #8a8a8a !important;
  font-style: italic !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: 1px dashed rgba(198, 160, 93, 0.45) !important;
  border-radius: 8px !important;
  display: inline-block !important;
}
html body section.hero .vehicle-card .vehicle-price.is-price,
html body section.hero .booking-vehicles .vehicle-card span.vehicle-price.is-price,
html body section.hero #price-sedan.is-price,
html body section.hero #price-van.is-price,
html body section.hero #price-luxury.is-price {
  font-size: 1.45rem !important;
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(180deg, #d4af70 0%, #c6a05d 100%) !important;
  border: 1px solid rgba(198, 160, 93, 0.6) !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  display: inline-block !important;
  margin-top: 10px !important;
  box-shadow: 0 4px 10px rgba(198, 160, 93, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
@media (max-width: 900px) {
  html body section.hero .vehicle-card .vehicle-price {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }
  html body section.hero .vehicle-card .vehicle-price.is-price {
    font-size: 1.2rem !important;
    padding: 8px 14px !important;
  }
}

/* 55-B : Formulaire avec scroll interne + bouton "Réserver" sticky */
html body section.hero .hero-booking-form {
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(198, 160, 93, 0.6) transparent !important;
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
}
html body section.hero .hero-booking-form::-webkit-scrollbar {
  width: 6px !important;
}
html body section.hero .hero-booking-form::-webkit-scrollbar-thumb {
  background: rgba(198, 160, 93, 0.6) !important;
  border-radius: 3px !important;
}
html body section.hero .hero-booking-form::-webkit-scrollbar-track {
  background: transparent !important;
}
html body section.hero .hero-booking-form .booking-vehicles {
  padding-bottom: 10px !important;
}
html body section.hero .booking-confirm,
html body section.hero #bf-confirm {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  width: calc(100% - 8px) !important;
  margin: 14px 4px 4px !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  background: linear-gradient(180deg, #d4af70 0%, #c6a05d 100%) !important;
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.18), 0 8px 22px rgba(198, 160, 93, 0.45) !important;
  border-radius: 10px !important;
}

/* 55-C : Texte hero plus visible sur mobile / tablette */
html body .hero .hero-content {
  position: relative !important;
}
html body .hero .hero-pretitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4) !important;
}
html body .hero .hero-title,
html body .hero .hero-title-places,
html body .hero .hero-title .place-item {
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
html body .hero .hero-subtitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}
@media (max-width: 1024px) {
  html body .hero .hero-pretitle {
    font-size: 1rem !important;
    letter-spacing: 0.18em !important;
  }
  html body .hero .hero-title,
  html body .hero .hero-title-places,
  html body .hero .hero-title .place-item {
    font-size: clamp(2.4rem, 7vw, 4rem) !important;
    line-height: 1.05 !important;
  }
  html body .hero .hero-subtitle {
    font-size: 1rem !important;
    letter-spacing: 0.12em !important;
  }
}
@media (max-width: 768px) {
  html body .hero .hero-pretitle {
    font-size: 0.95rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 6px !important;
  }
  html body .hero .hero-title,
  html body .hero .hero-title-places,
  html body .hero .hero-title .place-item {
    font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
    line-height: 1.05 !important;
  }
  html body .hero .hero-subtitle {
    font-size: 0.92rem !important;
    letter-spacing: 0.1em !important;
  }
}
@media (max-width: 480px) {
  html body .hero .hero-pretitle {
    font-size: 0.88rem !important;
  }
  html body .hero .hero-title,
  html body .hero .hero-title-places,
  html body .hero .hero-title .place-item {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }
  html body .hero .hero-subtitle {
    font-size: 0.85rem !important;
  }
}
/* END FIX 55 */

/* ============================================================ */
/* FIX 56 — Hero text mobile/tablet visibility (24/04/2026)     */
/* Renforcement lisibilité du texte couverture sur mobile/tab.  */
/* CSS uniquement. Aucune modification HTML/JS/business logic.  */
/* Aucun changement desktop (>1024px). Charte couleur respectee.*/
/* ============================================================ */
@media (max-width: 1024px) {
     html body .hero .hero-pretitle,
     html body .hero .hero-title,
     html body .hero .hero-title-places,
     html body .hero .hero-title .place-item,
     html body .hero .hero-subtitle {
            text-shadow:
                     0 2px 6px rgba(0, 0, 0, 0.85),
                     0 6px 22px rgba(0, 0, 0, 0.65),
                     0 0 1px rgba(0, 0, 0, 0.9) !important;
     }
}
@media (max-width: 768px) {
     html body .hero .hero-pretitle {
            font-size: 1.05rem !important;
            letter-spacing: 0.18em !important;
            line-height: 1.4 !important;
            margin-bottom: 10px !important;
            font-weight: 600 !important;
     }
     html body .hero .hero-title,
     html body .hero .hero-title-places,
     html body .hero .hero-title .place-item {
            font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
            line-height: 1.08 !important;
            letter-spacing: 0.005em !important;
            font-weight: 700 !important;
     }
     html body .hero .hero-subtitle {
            font-size: 1.05rem !important;
            letter-spacing: 0.10em !important;
            line-height: 1.5 !important;
            margin-top: 10px !important;
            font-weight: 500 !important;
     }
}
@media (max-width: 480px) {
     html body .hero .hero-pretitle {
            font-size: 0.98rem !important;
     }
     html body .hero .hero-title,
     html body .hero .hero-title-places,
     html body .hero .hero-title .place-item {
            font-size: clamp(2.3rem, 12vw, 3.2rem) !important;
     }
     html body .hero .hero-subtitle {
            font-size: 1rem !important;
     }
}
/* END FIX 56 */

/* ============================================================ */
/* FIX 57 — Mobile UX overhaul (24/04/2026)                     */
/* Header hamburger, hero compact, formulaire vehicules empile  */
/* CSS uniquement. Aucune modification desktop (>768px).        */
/* ============================================================ */

/* 57-A : Suppression visuelle des doublons Google Places */
.pac-container ~ .pac-container ~ .pac-container,
.pac-container ~ .pac-container ~ .pac-container ~ .pac-container {
     display: none !important;
}

/* 57-C : Bouton hamburger */
.fix57-burger {
     display: none;
     background: rgba(255, 255, 255, 0.92);
     border: 0;
     padding: 8px;
     cursor: pointer;
     width: 40px;
     height: 40px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 5px;
     z-index: 1001;
     position: relative;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.fix57-burger span {
     display: block;
     width: 24px;
     height: 2px;
     background: #1a1a1a;
     border-radius: 2px;
     transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
body.fix57-menu-open .fix57-burger {
     background: rgba(255, 255, 255, 0.1);
     box-shadow: none;
}
body.fix57-menu-open .fix57-burger span {
     background: #c6a05d;
}
body.fix57-menu-open .fix57-burger span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
}
body.fix57-menu-open .fix57-burger span:nth-child(2) {
     opacity: 0;
}
body.fix57-menu-open .fix57-burger span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
}

/* FR/EN dans le mobile-menu */
.fix57-mm-lang {
     margin-top: auto;
     padding: 18px 20px;
     border-top: 1px solid rgba(198, 160, 93, 0.3);
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
}
.fix57-mm-lang-label {
     display: block;
     width: 100%;
     color: rgba(255, 255, 255, 0.65);
     font-size: 0.85rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 6px;
}
.fix57-mm-lang-btn {
     background: transparent;
     border: 1px solid rgba(198, 160, 93, 0.5);
     color: #fff;
     padding: 8px 18px;
     font-size: 0.95rem;
     letter-spacing: 0.1em;
     cursor: pointer;
     border-radius: 4px;
     font-family: inherit;
     transition: all 0.25s;
     font-weight: 600;
}
.fix57-mm-lang-btn.is-active {
     background: #c6a05d;
     border-color: #c6a05d;
}
.fix57-mm-lang-sep {
     color: rgba(198, 160, 93, 0.6);
}

/* Mobile-menu drawer */
@media (max-width: 768px) {
     .mobile-menu {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            width: 86% !important;
            max-width: 360px !important;
            height: 100vh !important;
            height: 100svh !important;
            background: rgba(15, 15, 18, 0.97) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            padding: 80px 24px 32px !important;
            transform: translateX(100%);
            visibility: hidden;
            opacity: 0;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s, opacity 0.35s ease;
            z-index: 1000;
            overflow-y: auto;
            box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
            display: flex !important;
            flex-direction: column !important;
     }
     body.fix57-menu-open .mobile-menu {
            transform: translateX(0);
            visibility: visible;
            opacity: 1;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s, opacity 0.35s ease;
     }
     .mobile-menu a,
     .mobile-menu .mobile-services-toggle {
            color: #fff !important;
            display: block !important;
            padding: 14px 0 !important;
            font-size: 1rem !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            text-decoration: none !important;
     }
     .mobile-menu .mobile-services-sub a {
            font-size: 0.88rem !important;
            padding: 10px 0 !important;
            border: none !important;
            color: rgba(255, 255, 255, 0.85) !important;
            letter-spacing: 0.06em !important;
            text-transform: none !important;
     }
     body.fix57-menu-open::after {
            content: "";
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
     }
     body.fix57-menu-open {
            overflow: hidden;
     }

  /* Header layout mobile */
  html body nav .fix57-burger,
     html body nav.scrolled .fix57-burger {
            display: flex !important;
     }
     html body nav .nav-links {
            display: none !important;
     }
     html body nav .nav-lang-toggle {
            display: none !important;
     }
     html body nav,
     html body nav.scrolled {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 10px 14px !important;
     }

  /* Hero compact mobile - tout visible hors scroll */
  html body section.hero,
     html body .hero {
            min-height: 100svh !important;
            padding: 64px 0 0 !important;
            display: flex !important;
            flex-direction: column !important;
     }
     html body .hero .hero-content {
            padding: 12px 14px !important;
            gap: 6px !important;
            text-align: center !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
     }
     html body .hero .hero-pretitle,
     html body section.hero .hero-pretitle {
            margin: 0 0 4px 0 !important;
            font-size: 0.78rem !important;
            letter-spacing: 0.14em !important;
            line-height: 1.3 !important;
            width: 100% !important;
            text-align: center !important;
            word-break: keep-all !important;
     }
     html body .hero .hero-title,
     html body .hero .hero-title-places,
     html body section.hero .hero-title,
     html body section.hero .hero-title-places,
     html body h1.hero-title,
     html body h1.hero-title-places {
            font-size: clamp(1.6rem, 7vw, 2.3rem) !important;
            line-height: 1.05 !important;
            letter-spacing: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            text-align: center !important;
            overflow: hidden !important;
            padding: 0 8px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
            white-space: normal !important;
     }
     html body .hero .hero-title .place-item,
     html body section.hero .hero-title .place-item,
     html body .hero-title-places .place-item {
            font-size: inherit !important;
            display: inline-block !important;
            max-width: 100% !important;
            word-break: keep-all !important;
            white-space: nowrap !important;
     }
     html body .hero .hero-subtitle,
     html body section.hero .hero-subtitle {
            font-size: 0.82rem !important;
            margin: 4px 0 0 0 !important;
            letter-spacing: 0.08em !important;
            width: 100% !important;
            text-align: center !important;
     }

  /* Booking form mobile */
  html body .hero-booking-form,
     html body .booking-form {
            width: calc(100% - 20px) !important;
            max-width: calc(100% - 20px) !important;
            margin: 12px auto 0 !important;
            padding: 14px !important;
            border-radius: 10px !important;
     }
     html body .booking-fields {
            flex-direction: column !important;
            gap: 8px !important;
     }
     html body .booking-fields > * {
            width: 100% !important;
            min-width: 0 !important;
            flex: none !important;
     }
     html body .booking-fields input,
     html body .booking-fields select,
     html body .booking-fields button {
            width: 100% !important;
            box-sizing: border-box !important;
            font-size: 0.95rem !important;
            padding: 10px 12px !important;
     }

  /* Vehicle cards stacked - 1 par ligne */
  html body .booking-vehicles .vehicle-options,
     html body .vehicle-options,
     html body div.vehicle-options {
            display: flex !important;
            flex-direction: column !important;
            gap: 14px !important;
            grid-template-columns: 1fr !important;
            width: 100% !important;
     }
     html body .vehicle-options .vehicle-card,
     html body .vehicle-options label.vehicle-card {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
     }
     html body .vehicle-card .vehicle-card-inner img,
     html body .vehicle-card img,
     html body label.vehicle-card img {
            width: 100% !important;
            max-width: 280px !important;
            height: auto !important;
            max-height: 140px !important;
            object-fit: contain !important;
            display: block !important;
            margin: 0 auto !important;
     }
}

@media (max-width: 480px) {
     html body .hero .hero-title,
     html body .hero .hero-title-places,
     html body h1.hero-title {
            font-size: clamp(1.45rem, 7vw, 2rem) !important;
     }
     html body .hero .hero-pretitle {
            font-size: 0.72rem !important;
     }
     html body .hero .hero-subtitle {
            font-size: 0.78rem !important;
     }
}
/* END FIX 57 */


/* ============================================================
   FIX 58 — CORRECTIFS MOBILE (header casse + hero recentre)
   25 avril 2026 — direct IONOS edit
   Cible : mobile <=768px UNIQUEMENT. Desktop intact.
   ============================================================ */

/* 58-A : Anti-debordement horizontal global (mobile + tablette) */
@media (max-width: 1024px) {
    html, body {
          overflow-x: hidden !important;
          max-width: 100vw !important;
  }
    html body nav,
    html body nav.scrolled {
          max-width: 100vw !important;
          overflow-x: hidden !important;
          box-sizing: border-box !important;
  }
}

/* 58-B : Header mobile — masquer tout sauf logo + burger */
@media (max-width: 768px) {
    /* Masquer le menu desktop (liste de liens) */
    html body nav .nav-links,
    html body nav.scrolled .nav-links {
          display: none !important;
          visibility: hidden !important;
  }
    /* Masquer la 3eme div du nav (RESERVER + CONTACT + FR/EN dans header) */
    html body nav > div:not(.nav-logo):not(.fix57-burger),
    html body nav.scrolled > div:not(.nav-logo):not(.fix57-burger) {
          display: none !important;
          visibility: hidden !important;
  }
    /* Masquer le toggle de langue dans le header */
    html body nav .nav-lang-toggle,
    html body nav.scrolled .nav-lang-toggle {
          display: none !important;
  }
    /* Forcer affichage du burger a droite */
    html body nav button.fix57-burger,
    html body nav.scrolled button.fix57-burger,
    html body nav #fix57-burger {
          display: flex !important;
          visibility: visible !important;
          position: absolute !important;
          right: 14px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          width: 44px !important;
          height: 44px !important;
          z-index: 1002 !important;
          background: rgba(255, 255, 255, 0.12) !important;
          border: 1px solid rgba(255, 255, 255, 0.25) !important;
          border-radius: 8px !important;
          align-items: center !important;
          justify-content: center !important;
          flex-direction: column !important;
          gap: 5px !important;
          padding: 0 !important;
          cursor: pointer !important;
  }
    html body nav button.fix57-burger span {
          display: block !important;
          width: 22px !important;
          height: 2px !important;
          background: #ffffff !important;
          border-radius: 2px !important;
  }
    /* Nav lui-meme : position relative pour ancrer le burger */
    html body nav,
    html body nav.scrolled {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          width: 100vw !important;
          height: 64px !important;
          padding: 0 16px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          background: rgba(10, 10, 10, 0.92) !important;
          backdrop-filter: blur(12px) !important;
          -webkit-backdrop-filter: blur(12px) !important;
          z-index: 1000 !important;
          box-sizing: border-box !important;
  }
    /* Logo bien aligne a gauche */
    html body nav .nav-logo {
          position: relative !important;
          z-index: 1001 !important;
          margin: 0 !important;
  }
}

/* 58-C : Hero mobile — recentrage + tout visible sans scroll */
@media (max-width: 768px) {
    html body section.hero {
          min-height: 100vh !important;
          height: auto !important;
          padding: 80px 16px 24px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-start !important;
          text-align: center !important;
          box-sizing: border-box !important;
          overflow: hidden !important;
  }
    /* Bloc texte centre verticalement dans la moitie haute */
    html body section.hero .hero-content,
    html body section.hero > div:first-child {
          width: 100% !important;
          max-width: 100% !important;
          text-align: center !important;
          margin: 0 auto !important;
          padding: 0 !important;
  }
    /* Pretitre "Votre chauffeur disponible a" */
    html body section.hero .hero-pretitle {
          display: block !important;
          visibility: visible !important;
          font-size: 0.78rem !important;
          line-height: 1.2 !important;
          letter-spacing: 0.18em !important;
          margin: 0 0 10px !important;
          text-transform: uppercase !important;
          color: #ffffff !important;
          opacity: 0.95 !important;
          text-align: center !important;
  }
    /* Titre principal */
    html body section.hero .hero-title,
    html body section.hero .hero-title-places,
    html body section.hero h1.hero-title {
          font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
          line-height: 1.05 !important;
          margin: 0 0 8px !important;
          padding: 0 !important;
          text-align: center !important;
          width: 100% !important;
          display: block !important;
  }
    html body section.hero .hero-title .place-item {
          font-size: inherit !important;
          line-height: 1.05 !important;
          display: inline-block !important;
          text-align: center !important;
  }
    /* Sous-titre */
    html body section.hero .hero-subtitle {
          font-size: 0.82rem !important;
          line-height: 1.3 !important;
          letter-spacing: 0.08em !important;
          margin: 4px 0 18px !important;
          padding: 0 !important;
          text-align: center !important;
          color: #ffffff !important;
          opacity: 0.92 !important;
  }
}

/* 58-D : Hero — tres petits ecrans (<=480px) */
@media (max-width: 480px) {
    html body section.hero {
          padding: 76px 12px 20px !important;
          min-height: 100vh !important;
  }
    html body section.hero .hero-pretitle {
          font-size: 0.7rem !important;
          margin-bottom: 6px !important;
  }
    html body section.hero .hero-title,
    html body section.hero .hero-title-places,
    html body section.hero h1.hero-title {
          font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
          line-height: 1.05 !important;
          margin-bottom: 6px !important;
  }
    html body section.hero .hero-subtitle {
          font-size: 0.74rem !important;
          margin: 2px 0 14px !important;
  }
}

/* 58-E : Body offset pour nav fixed */
@media (max-width: 768px) {
    html body {
          padding-top: 0 !important;
  }
}

/* END FIX 58 */


/* ============================================================
   FIX 58.1 — PATCH HERO MOBILE (correction structure flex)
   ============================================================ */

@media (max-width: 768px) {
    /* Masquer .hero-lines (element vertical decoratif desktop qui pousse le contenu) */
    html body section.hero .hero-lines {
          display: none !important;
          visibility: hidden !important;
          height: 0 !important;
          width: 0 !important;
  }
    /* Hero contraint a la hauteur viewport — pas d'expansion infinie */
    html body section.hero {
          min-height: 100vh !important;
          height: auto !important;
          max-height: none !important;
          padding: 80px 16px 24px !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-start !important;
  }
    /* hero-content : bloc principal qui contient pretitle + titre + subtitle + form */
    html body section.hero .hero-content {
          width: 100% !important;
          max-width: 100% !important;
          height: auto !important;
          min-height: 0 !important;
          margin: 0 auto !important;
          padding: 0 !important;
          display: block !important;
          text-align: center !important;
  }
    /* Forcer la hauteur naturelle des elements de texte (pas d'heritage geant) */
    html body section.hero .hero-pretitle,
    html body section.hero .hero-subtitle,
    html body section.hero .hero-title,
    html body section.hero .hero-title-places,
    html body section.hero h1.hero-title {
          height: auto !important;
          min-height: 0 !important;
          max-height: none !important;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
  }
    /* Pretitle compact */
    html body section.hero .hero-pretitle {
          display: block !important;
          font-size: 0.78rem !important;
          line-height: 1.2 !important;
          letter-spacing: 0.18em !important;
          margin: 0 0 8px !important;
          padding: 0 !important;
          text-align: center !important;
          color: #ffffff !important;
          text-transform: uppercase !important;
  }
    /* Titre principal */
    html body section.hero .hero-title,
    html body section.hero .hero-title-places,
    html body section.hero h1.hero-title {
          font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
          line-height: 1.05 !important;
          margin: 0 0 6px !important;
          padding: 0 !important;
          text-align: center !important;
          display: block !important;
  }
    /* Subtitle */
    html body section.hero .hero-subtitle {
          display: block !important;
          font-size: 0.82rem !important;
          line-height: 1.3 !important;
          letter-spacing: 0.06em !important;
          margin: 0 0 16px !important;
          padding: 0 !important;
          text-align: center !important;
          color: #ffffff !important;
  }
    /* Formulaire de reservation : marge top reduite pour rester visible */
    html body section.hero .hero-booking-form {
          margin: 12px auto 0 !important;
          width: calc(100% - 8px) !important;
          max-width: 100% !important;
  }
}

@media (max-width: 480px) {
    html body section.hero {
          padding: 76px 10px 16px !important;
  }
    html body section.hero .hero-pretitle {
          font-size: 0.7rem !important;
          margin-bottom: 6px !important;
  }
    html body section.hero .hero-title,
    html body section.hero .hero-title-places,
    html body section.hero h1.hero-title {
          font-size: clamp(1.7rem, 9vw, 2.1rem) !important;
          line-height: 1.05 !important;
  }
    html body section.hero .hero-subtitle {
          font-size: 0.74rem !important;
          margin-bottom: 12px !important;
  }
}

/* END FIX 58.1 */


/* ============================================================
   FIX 60 — RAFFINEMENTS MOBILE
   - 60-A : Hamburger minimaliste (3 traits seuls, pas de cadre)
   - 60-B : Booking form scroll fluide sur mobile
   - 60-C : Cartes vehicules empilees, hauteur uniforme
   ============================================================ */

/* ===== 60-A : Hamburger minimaliste ===== */
@media (max-width: 768px) {
    #fix59-burger {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          border-radius: 0 !important;
          width: 36px !important;
          height: 36px !important;
          top: 16px !important;
          right: 16px !important;
  }
    #fix59-burger:hover,
    #fix59-burger:focus,
    #fix59-burger:active {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          outline: none !important;
  }
    #fix59-burger span {
          width: 26px !important;
          height: 2px !important;
          background: #ffffff !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
          border-radius: 0 !important;
  }
}

/* ===== 60-B : Booking form scroll fluide sur mobile ===== */
@media (max-width: 768px) {
    /* Supprimer la limitation interne qui bloquait le scroll */
    html body section.hero .hero-booking-form {
          overflow: visible !important;
          overflow-y: visible !important;
          max-height: none !important;
          height: auto !important;
          -webkit-overflow-scrolling: touch !important;
  }
    /* La section hero peut deborder en hauteur, le scroll page reprend la main */
    html body section.hero {
          overflow: visible !important;
          height: auto !important;
          min-height: 0 !important;
  }
    /* Champs du formulaire : zone de touch plus grande, font-size 16px (anti-zoom iOS) */
    html body section.hero .hero-booking-form input,
    html body section.hero .hero-booking-form select,
    html body section.hero .hero-booking-form textarea {
          font-size: 16px !important;
          min-height: 44px !important;
          -webkit-appearance: none !important;
          appearance: none !important;
  }
    /* Body global : scroll fluide */
    html, body {
          -webkit-overflow-scrolling: touch !important;
          overscroll-behavior-y: auto !important;
  }
}

/* ===== 60-C : Cartes vehicules — empilees + uniformes ===== */
@media (max-width: 768px) {
    /* Conteneur de la flotte : passage en colonne */
    html body #flotte .vehicle-options,
    html body #flotte .fleet-grid,
    html body #flotte > div,
    html body section#flotte > div {
          display: flex !important;
          flex-direction: column !important;
          gap: 18px !important;
          grid-template-columns: 1fr !important;
          width: 100% !important;
          padding: 0 14px !important;
          box-sizing: border-box !important;
  }
    /* Carte vehicule : largeur totale, centree */
    html body #flotte .flotte-card,
    html body #flotte .vehicle-card,
    html body #flotte .fleet-item {
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 auto !important;
          padding: 18px 16px 22px !important;
          box-sizing: border-box !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          background: rgba(15, 15, 20, 0.85) !important;
          border: 1px solid rgba(212, 175, 112, 0.18) !important;
          border-radius: 14px !important;
          box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  }
    /* Image du vehicule : taille uniforme, bien visible */
    html body #flotte .flotte-card img,
    html body #flotte .vehicle-card img,
    html body #flotte .fleet-item img {
          width: 100% !important;
          max-width: 320px !important;
          height: 200px !important;
          max-height: 200px !important;
          object-fit: contain !important;
          object-position: center !important;
          display: block !important;
          margin: 0 auto 14px !important;
          border-radius: 8px !important;
  }
    /* Titre du vehicule */
    html body #flotte .flotte-card h3,
    html body #flotte .flotte-card h2,
    html body #flotte .vehicle-card h3,
    html body #flotte .vehicle-card h2 {
          text-align: center !important;
          width: 100% !important;
          margin: 8px 0 6px !important;
          font-size: 1.25rem !important;
          line-height: 1.2 !important;
          color: #ffffff !important;
  }
    /* Sous-titres / descriptifs */
    html body #flotte .flotte-card p,
    html body #flotte .flotte-card .vehicle-desc,
    html body #flotte .flotte-card .vehicle-features,
    html body #flotte .vehicle-card p {
          text-align: center !important;
          width: 100% !important;
          margin: 4px auto !important;
          font-size: 0.9rem !important;
          line-height: 1.5 !important;
          color: rgba(255, 255, 255, 0.85) !important;
  }
    /* Listes d'equipements */
    html body #flotte .flotte-card ul,
    html body #flotte .flotte-card .features-list,
    html body #flotte .vehicle-card ul {
          text-align: center !important;
          list-style: none !important;
          padding: 0 !important;
          margin: 8px auto !important;
          width: 100% !important;
  }
    html body #flotte .flotte-card ul li,
    html body #flotte .vehicle-card ul li {
          text-align: center !important;
          padding: 4px 0 !important;
          font-size: 0.85rem !important;
          color: rgba(255, 255, 255, 0.8) !important;
  }
    /* Bouton CTA */
    html body #flotte .flotte-card .btn,
    html body #flotte .flotte-card a.cta,
    html body #flotte .flotte-card button,
    html body #flotte .vehicle-card .btn {
          display: inline-block !important;
          margin: 14px auto 0 !important;
          padding: 12px 28px !important;
          text-align: center !important;
  }
}

@media (max-width: 480px) {
    html body #flotte .flotte-card img,
    html body #flotte .vehicle-card img,
    html body #flotte .fleet-item img {
          height: 180px !important;
          max-height: 180px !important;
  }
}

/* END FIX 60 */

/* ============================================ */
/* FIX 62 - Anti-doublon croix + Cartes 1 col   */
/* ============================================ */

/* A) Masquer le burger (3 traits / X) quand le drawer est ouvert */
@media (max-width: 1024px) {
    html body.fix59-open #fix59-burger {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          pointer-events: none !important;
  }
}

/* B) Forcer 1 colonne pour les cartes vehicules sur mobile/tablette */
@media (max-width: 1024px) {
    html body #flotte .flotte-grid,
    html body #flotte .flotte-grid.cols-3,
    html body #flotte .flotte-grid.cols-2,
    html body .flotte-grid,
    html body .flotte-grid.cols-3,
    html body .flotte-grid.cols-2 {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 18px !important;
          width: 100% !important;
  }
    html body #flotte .flotte-card,
    html body .flotte-card {
          width: 100% !important;
          max-width: 100% !important;
  }
}

/* END FIX 62 */
/* ============================================ */
/* FIX 63 - Booking 1col + Badge 24/7 + Cartes  */
/* ============================================ */

@media (max-width: 1024px) {
    /* 1) Booking etape 2 : vehicules verticaux */
    html body .vehicle-options,
    html body #bookingVehicles .vehicle-options {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 12px !important;
          width: 100% !important;
  }
    html body .vehicle-card {
          width: 100% !important;
          max-width: 100% !important;
  }
  
    /* 2) Badge 'Disponibles 24/7' lisible (charte or) */
    html body .flotte-badge.flotte-badge-live,
    html body .flotte-badge-live {
          background: rgba(212, 175, 112, 0.15) !important;
          color: #d4af70 !important;
          border: 1px solid rgba(212, 175, 112, 0.55) !important;
          font-weight: 600 !important;
          padding: 8px 16px !important;
          font-size: 12px !important;
          letter-spacing: 0.5px !important;
          border-radius: 999px !important;
  }
  
    /* 3) Cartes vehicules : style desktop (clair, lisible) */
    html body #flotte .flotte-card,
    html body .flotte-card {
          background: #ffffff !important;
          background-color: #ffffff !important;
          color: #333333 !important;
          border: 1px solid rgba(0, 0, 0, 0.08) !important;
          border-radius: 14px !important;
          overflow: hidden !important;
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
  }
    /* Titres cartes en noir */
    html body #flotte .flotte-card h2,
    html body #flotte .flotte-card h3,
    html body #flotte .flotte-card h4,
    html body #flotte .flotte-card .flotte-title,
    html body .flotte-card h2,
    html body .flotte-card h3,
    html body .flotte-card h4,
    html body .flotte-card .flotte-title {
          color: #0a0a0a !important;
  }
    /* Texte courant en gris fonce lisible */
    html body #flotte .flotte-card p,
    html body #flotte .flotte-card li,
    html body #flotte .flotte-card span:not(.flotte-badge):not(.flotte-badge-live),
    html body .flotte-card p,
    html body .flotte-card li {
          color: #555555 !important;
  }
    /* Sous-titre / accroche en or */
    html body #flotte .flotte-card .flotte-subtitle,
    html body .flotte-card .flotte-subtitle {
          color: #d4af70 !important;
  }
    /* Image : remplit le cadre comme desktop */
    html body #flotte .flotte-card .flotte-media,
    html body .flotte-card .flotte-media {
          width: 100% !important;
          height: 220px !important;
          background: #f1ede5 !important;
          overflow: hidden !important;
          display: block !important;
          position: relative !important;
  }
    html body #flotte .flotte-card .flotte-media img,
    html body #flotte .flotte-card img,
    html body .flotte-card .flotte-media img,
    html body .flotte-card img {
          width: 100% !important;
          height: 100% !important;
          max-height: 100% !important;
          object-fit: cover !important;
          object-position: 50% 50% !important;
          display: block !important;
  }
}

/* END FIX 63 */
/* ============================================ */
/* FIX 64 - Lisibilite textes cartes flotte     */
/* ============================================ */

@media (max-width: 1024px) {
    /* Texte courant et listes en gris fonce lisible */
    html body #flotte .flotte-card ul li,
    html body #flotte .vehicle-card ul li,
    html body #flotte .flotte-card ol li,
    html body #flotte .flotte-card li,
    html body #flotte .flotte-card p,
    html body #flotte .flotte-card .vehicle-desc,
    html body #flotte .flotte-card .vehicle-features,
    html body #flotte .flotte-card .flotte-sub,
    html body #flotte .vehicle-card p,
    html body .flotte-card ul li,
    html body .flotte-card ol li,
    html body .flotte-card li,
    html body .flotte-card p,
    html body .flotte-card .vehicle-desc,
    html body .flotte-card .vehicle-features {
          color: #555555 !important;
  }
    /* Titres cartes : noir */
    html body #flotte .flotte-card h2,
    html body #flotte .flotte-card h3,
    html body #flotte .flotte-card h4,
    html body #flotte .flotte-card .flotte-title,
    html body #flotte .vehicle-card h2,
    html body #flotte .vehicle-card h3,
    html body .flotte-card h2,
    html body .flotte-card h3,
    html body .flotte-card h4 {
          color: #0a0a0a !important;
  }
    /* Tag categorie (Berline/SUV/etc) en or */
    html body #flotte .flotte-card .flotte-tag,
    html body .flotte-card .flotte-tag {
          color: #d4af70 !important;
          background: rgba(212, 175, 112, 0.12) !important;
  }
}

/* END FIX 64 */
/* ============================================ */
/* FIX 65 - Liste atouts + mention image card  */
/* ============================================ */

@media (max-width: 1024px) {
    /* 1) Liste atouts : alignement gauche, puce or, plus de chevauchement */
    html body #flotte .flotte-card ul,
    html body .flotte-card ul {
          text-align: left !important;
          padding-left: 4px !important;
          margin: 12px 4px !important;
          list-style: none !important;
  }
    html body #flotte .flotte-card ul li,
    html body #flotte .vehicle-card ul li,
    html body .flotte-card ul li {
          text-align: left !important;
          padding-left: 18px !important;
          padding-right: 4px !important;
          position: relative !important;
          line-height: 1.5 !important;
          margin-bottom: 6px !important;
          color: #555555 !important;
  }
    html body #flotte .flotte-card ul li::before,
    html body #flotte .vehicle-card ul li::before,
    html body .flotte-card ul li::before {
          position: absolute !important;
          left: 0 !important;
          top: 0.6em !important;
          width: 6px !important;
          height: 6px !important;
          border-radius: 50% !important;
          background: #d4af70 !important;
          background-color: #d4af70 !important;
          color: transparent !important;
          content: "" !important;
          display: block !important;
  }
  
    /* 2) Mention sur image (Berline / SUV / Limousine) lisible */
    html body #flotte .flotte-card .flotte-tag,
    html body .flotte-card .flotte-tag,
    html body .flotte-media .flotte-tag {
          background: rgba(10, 10, 10, 0.78) !important;
          background-color: rgba(10, 10, 10, 0.78) !important;
          color: #d4af70 !important;
          border: 1px solid rgba(212, 175, 112, 0.55) !important;
          padding: 6px 14px !important;
          font-size: 11px !important;
          font-weight: 700 !important;
          letter-spacing: 1.2px !important;
          text-transform: uppercase !important;
          border-radius: 999px !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
          z-index: 5 !important;
          top: 12px !important;
          left: 12px !important;
          right: auto !important;
  }
}

/* END FIX 65 */

/* ============================================ */
/* FIX 65-A - Override couleur tag (or)         */
/* ============================================ */
@media (max-width: 1024px) {
    /* Selecteur ultra-specifique pour battre la regle qui force gris */
    html body section#flotte div.flotte-card span.flotte-tag,
    html body section#flotte div.flotte-card div.flotte-media span.flotte-tag,
    html body div.flotte-card span.flotte-tag {
          color: #d4af70 !important;
  }
}
/* END FIX 65-A */

/* ============================================ */
/* FIX 65-B - Tag or (article.flotte-card)      */
/* ============================================ */
@media (max-width: 1024px) {
    /* Le .flotte-card est un <article>, pas un <div> */
    html body section#flotte article.flotte-card span.flotte-tag,
    html body section#flotte article.flotte-card .flotte-media span.flotte-tag,
    html body article.flotte-card span.flotte-tag,
    html body article.flotte-card .flotte-tag {
          color: #d4af70 !important;
  }
}
/* END FIX 65-B */

/* ============================================ */
/* FIX 65-C - Tag or - specificite max          */
/* ============================================ */
@media (max-width: 1024px) {
    /* Specificite super haute pour battre :not(.flotte-badge):not(.flotte-badge-live) */
    html body section#flotte article.flotte-card .flotte-media span.flotte-tag:not(.x):not(.y):not(.z),
    html body section#flotte article.flotte-card span.flotte-tag:not(.x):not(.y):not(.z) {
          color: #d4af70 !important;
  }
}
/* END FIX 65-C */

/* ============================================ */
/* FIX 66 - Badges Flotte (Disponibles 24/7 & Selon disponibilité) lisibilité */
/* ============================================ */
html body section#flotte span.flotte-badge,
html body section#flotte span.flotte-badge.flotte-badge-live,
html body section#flotte span.flotte-badge.flotte-badge-req {
      color: #ffffff !important;
      background: #1a1a1a !important;
}
/* END FIX 66 */

/* === FIX HERO MOBILE ZOOM (ajoute le 04/05/2026) === */
@media (max-width: 768px){
  .hero{ height: 65vh !important; min-height: 480px !important; }
  .hero-bg{ background-position: center 30% !important; }
}


/* ============================================ */
/* FIX 63 - Harmoniser couleur menu mobile (Services/Destinations/Flotte) */
/* ============================================ */
/* Les <button> .fix59-toggle apparaissent plus sombres que les <a> a cause */
/* du rendu natif (appearance:auto). On force appearance:none et la meme couleur */
#fix59-list .fix59-toggle{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
}
#fix59-list a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
}
/* END FIX 63 */