/* ==========================================================================
   devis.css — Module de réservation (carte à gauche, formulaire à droite).
   Aligné sur la charte du site : titres Ubuntu, texte Roboto,
   aplats bleu nuit #02182B et rouge #A31621, boutons en pilule.
   Carte : Leaflet + tuiles CARTO. Autocomplétion : Base Adresse Nationale.
   ========================================================================== */

.booking { padding: 50px 0; }

.booking .container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Haut : 2 colonnes (adresses à gauche, infos à droite) */
.booking-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* --- Carte en pleine largeur, sous le formulaire --------------------------- */
.booking-map-full {
  margin-top: 30px;
}

#booking-map {
  width: 100%;
  height: 460px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  z-index: 1; /* reste sous le header / dock flottant */
}

/* Épingles personnalisées (divIcon) — aux couleurs de la marque */
.map-pin {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
}
.map-pin span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 14px; font-family: Ubuntu, sans-serif; }
.map-pin.depart { background: #02182B; }       /* A — bleu nuit */
.map-pin.destination { background: #A31621; }  /* B — rouge */

/* --- Colonne formulaire (droite) ------------------------------------------ */
.booking-form h2.h5 {
  font-family: Ubuntu, sans-serif;
  font-weight: bold;
  color: #02182B;
  font-size: 1.25rem;
  margin: 26px 0 14px;
  text-align: left;
}
.booking-form h2.h5:first-child { margin-top: 0; }

.booking-form .form-group { margin-bottom: 14px; }

.booking-form label.field-label {
  display: block;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #02182B;
  margin-bottom: 5px;
}
.booking-form .optional { font-weight: 400; color: #8a93a2; }

/* --- Lieux populaires (chips condensés) ------------------------------------ */
.poi-block { margin-bottom: 14px; }
.poi-hint { font-size: 12px; color: #6c757d; margin: 0 0 10px; }
.poi-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.poi-group-label {
  flex: 0 0 64px;
  font-family: Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a93a2;
  margin: 0;
  padding-top: 4px;
}
.poi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.poi-chip {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  padding: 5px 11px;
  border-radius: 48px;
  border: 1px solid #02182B;
  background: #fff;
  color: #02182B;
  cursor: pointer;
  transition: .2s all ease-in-out;
}
.poi-chip:hover { background: #02182B; color: #fff; }

/* --- Champ d'adresse + liste de suggestions -------------------------------- */
.address-field { position: relative; }

/* Le champ ciblé par les "lieux populaires" est mis en évidence */
.address-field.targeted input.form-control {
  border-color: #02182B;
  box-shadow: 0 0 0 2px rgba(2, 24, 43, .12);
}

.suggestions {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 2px);
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1200;
}
.suggestions[hidden] { display: none; }
.suggestions li {
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #212529;
}
.suggestions li small { color: #8a93a2; }
.suggestions li:hover,
.suggestions li.active { background: #f1f3f6; }
.suggestions li.empty { color: #8a93a2; cursor: default; }
.suggestions li.empty:hover { background: transparent; }

/* État « adresse validée » */
.address-field.valid input.form-control {
  border-color: #02182B;
  background: #fbfcfd;
}

/* --- Champ piège anti-spam (invisible, hors flux) -------------------------- */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* --- Consentement RGPD ----------------------------------------------------- */
.booking-form .consent { margin-top: 8px; }
.booking-form .consent label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  color: #495057;
  cursor: pointer;
}
.booking-form .consent input { margin-top: 3px; flex: 0 0 auto; }

/* --- Bandeau d'erreur ------------------------------------------------------ */
.booking-error {
  background: #fbe9ea;
  border: 1px solid #A31621;
  color: #A31621;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
}

/* --- Bouton d'action (reprend .button1 rouge du site, en pleine largeur) ---- */
.booking-form .actions { margin-top: 24px; }
.booking-form .actions .button1 {
  width: 100%;
  cursor: pointer;
  text-align: center;
}

/* --- Étapes révélées (véhicule, coordonnées) ------------------------------- */
.booking-step { margin-top: 34px; }
.booking-step[hidden] { display: none; }
.booking-step .step-note { font-size: 14px; color: #6c757d; margin: -4px 0 16px; }

.estimer-hint { margin: 10px 0 0; font-size: 13px; color: #A31621; }
.estimer-hint[hidden] { display: none; }

.paiement-note { font-size: 13px; color: #6c757d; margin: 4px 0 14px; }

/* --- Cartes véhicules ------------------------------------------------------ */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.vehicle-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 2px solid #e6ebf2;
  border-radius: 12px;
  padding: 14px 16px 16px;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vehicle-card:hover { border-color: #b9c3d0; }
.vehicle-card.selected {
  border-color: #A31621;
  box-shadow: 0 0 0 3px rgba(163, 22, 33, .12);
}
.vehicle-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
}
.vehicle-body { display: flex; flex-direction: column; gap: 4px; }
.vehicle-head { display: flex; align-items: baseline; gap: 8px; }
.vehicle-name {
  font-family: Ubuntu, sans-serif;
  font-weight: bold;
  font-size: 17px;
  color: #02182B;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.vehicle-cap {
  font-size: 12px;
  font-weight: 600;
  color: #8a93a2;
  margin-top: 2px;
}
.vehicle-desc { font-size: 12.5px; color: #6c757d; margin: 6px 0 0; line-height: 1.4; min-height: 34px; }
.vehicle-price {
  margin-top: 6px;
  font-family: Ubuntu, sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #A31621;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 800px) {
  .booking-fields { grid-template-columns: 1fr; gap: 8px; }
  .booking-map-full { margin-top: 22px; }
  #booking-map { height: 320px; }
  .poi-group { flex-direction: column; gap: 4px; }
  .poi-group-label { flex-basis: auto; padding-top: 0; }
  .vehicle-grid { grid-template-columns: 1fr; }
}