:root{ --fg:#111; --muted:#6b7280; --panel:#fff; --radius:18px; --shadow:0 6px 30px rgba(0,0,0,.08) }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f7f7f8;color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto}
.head{max-width:1120px;margin:10px auto 0;padding:0 12px}
.brand{display:flex;align-items:center;gap:14px}
.logo{height:36px;width:auto;object-fit:contain}

/* Pills calibrées + responsive */
.steps{display:flex;gap:16px;align-items:center;margin-left:auto;flex-wrap:wrap}
.step{display:flex;flex-direction:column;align-items:center;min-width:60px}
.step span{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-weight:800;font-size:15px;margin-bottom:4px}
.step em{font-style:normal;font-size:.82rem;color:#6b6b6b;line-height:1;text-align:center}
.step.active em{color:#111;font-weight:700}

.cols{max-width:1120px;margin:10px auto;padding:12px;display:grid;grid-template-columns:1fr;gap:16px}
.right{order:2}
.left{order:1}

.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
label{display:block;font-weight:700;margin:0 0 .25rem}
input,select{width:100%;padding:0.85rem;border-radius:12px;border:1px solid #ddd;background:#fff;font-size:16px;line-height:1.2}
.select-flat{padding:0.85rem .95rem}

/* Champs adresse avec icônes droite/gauche sans débordement */
.poi-wrap{position:relative}
.poi-wrap .poi-icon{position:absolute;left:50px;top:50%;transform:translateY(-50%);opacity:.85;width:16px;height:16px;background-size:contain;background-repeat:no-repeat;pointer-events:none}
.poi-wrap input{width:100%;padding:0.78rem 44px 0.78rem 66px;border-radius:12px;border:1px solid #ddd;background:#fff;font-size:16px;line-height:1.2;min-height:44px} /* espace pour clear + geo */
.poi-wrap .clear{position:absolute;right:8px;top:0;bottom:0;margin:auto 0;width:28px;height:28px;border-radius:9999px;border:none;background:#f2f2f3;cursor:pointer;line-height:28px;text-align:center}
.poi-wrap .geo{
  position:absolute;left:0;top:0;bottom:0;width:40px;
  border:1px solid #ddd;border-right:none;border-radius:12px 0 0 12px;
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background-image:none;
}
.poi-wrap .geo::before{
  content:"";display:block;width:18px;height:18px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"/><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>');
  background-repeat:no-repeat;background-position:center;background-size:18px;
}

/* Bloc vol: grille stable et mobile-first */
.flight-head{display:flex;align-items:center;gap:.5rem;margin:0 0 .2rem}
.ico-plane{width:20px;height:20px;background-size:contain;background-repeat:no-repeat;display:inline-block;filter:grayscale(1)}
.flight-sub{font-weight:700;margin:0 0 .35rem}
.flight-grid{
  display:grid;
  grid-template-columns:220px 1fr 160px;
  gap:12px;
  align-items:end;
  margin-bottom:.6rem;
}

/* Écrans intermédiaires / iframe sur mobile : 2 colonnes,
   mais l'heure prend toute la largeur sous la date */
@media (max-width:1100px){
  .flight-grid{
    grid-template-columns:1fr 1fr;
  }
  .cell-cal{
    order:3;
  }
  .cell-time{
    order:4;
    grid-column:1 / -1; /* l'heure = toute la ligne sous la date */
  }
}

/* Petits écrans : 1 colonne, plus de bouton calendrier */
@media (max-width:640px){
  .flight-grid{
    grid-template-columns:1fr;
  }
  .cell-cal{
    display:none;
  }
}

/* Sécurité : l'input heure occupe 100 % de la cellule */
.cell-time .date-flat,
#flight-time{
  width:100%;
  max-width:100%;
  min-width:6em;
  box-sizing:border-box;
  text-align:center;
}

.return-cta.is-active{
  background:#16a34a; /* un peu plus foncé que #22c55e */
}


.cell{position:relative}
.cell-select{background:#eceeef;border-radius:10px;border:1px solid #d9dbdf;padding:0;min-height:48px}
.cell-select .select-flat{border:none;background:transparent;padding:.95rem 2.2rem .95rem .95rem;font-weight:700}
.cell-select .chev{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-size:16px;opacity:.8}
.cell-date .date-flat{border:1px solid #d9dbdf;border-radius:10px;padding:.95rem .95rem;font-weight:700;min-height:48px}
.cell-cal{height:48px;border-radius:10px;border:1px solid #d9dbdf;background:#fff url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>') no-repeat center}
.cell-time{display:flex;align-items:center;gap:6px}
.cell-time input{width:80px;max-width:96px;text-align:center;padding:.9rem .6rem;border:1px solid #d9dbdf;border-radius:10px;font-weight:700;min-height:48px}
.cell-time .sep{font-weight:800;opacity:.9;transform:translateY(-1px)}

/* Cartes véhicules et CTA */
#vehicle-cards{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Carte véhicule : image en haut, puis ligne prix + meta + bouton */
.vehicle-card{
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Voiture */
.vehicle-card img{
  width:100%;
  max-width:360px;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  background:#fafafa;
  margin:4px auto 8px;
}

/* Titre du véhicule */
.vehicle-card .title{
  font-weight:800;
  margin-bottom:4px;
}

/* Ligne du bas : prix | passagers/bagages | bouton */
.vehicle-card .footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* Prix à gauche */
.vehicle-card .price{
  font-weight:800;
  white-space:nowrap;
}
.vehicle-card .price .num{
  font-size:1.05rem;
}
.vehicle-card .price .cur{
  opacity:.8;
  font-size:.9rem;
  margin-left:.15rem;
}

/* Badges passagers / bagages au centre */
.vehicle-card .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.vehicle-card .meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f5f5f7;
  border-radius:9999px;
  padding:4px 12px;
  font-size:.9rem;
  color:var(--muted);
}

/* Icônes style “pastille claire” */
.vehicle-card .meta-icon{
  width:32px;
  height:32px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4ff;
  color:#111827;
  font-size:16px;
  flex-shrink:0;
}
.vehicle-card .meta-icon img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}

/* Bouton à droite */
.vehicle-card .cta{
  margin-left:auto;
}
.vehicle-card .btn{
  background:#000;
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:.7rem 1.1rem;
  font-weight:800;
  cursor:pointer;
}

/* Icônes sans fond noir, style comme ton visuel */
.vehicle-card .meta-icon{
  width:32px;
  height:32px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4ff;      /* pastille très claire */
  color:#111827;
  font-size:16px;
  flex-shrink:0;
}

.vehicle-card .meta-icon img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}

.vehicle-card .meta-label{
  white-space:nowrap;
}

/* Prix à gauche */
.vehicle-card .price{
  grid-area:price;
  justify-self:flex-start;
  font-weight:800;
}

.vehicle-card .price .num{
  font-size:1.05rem;
}

.vehicle-card .price .cur{
  opacity:.8;
  font-size:.9rem;
  margin-left:.15rem;
}

/* Bouton à droite */
.vehicle-card .cta{
  grid-area:btn;
  justify-self:flex-end;
}

.vehicle-card .btn{
  background:#000;
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:.7rem 1.1rem;
  font-weight:800;
  cursor:pointer;
}


/* Récap & map */
.right .map{width:100%;height:280px;border-radius:14px;overflow:hidden;background:#f6f6f6;margin-top:10px}
.muted{color:var(--muted)}
.estimate{font-weight:800;margin:6px 0 10px}

/* Boutons */
.actions{display:flex;gap:10px;margin-top:.6rem;flex-wrap:wrap}
.actions-bottom{margin-top:18px}
.next,.prev,.pay{background:#000;color:#fff;border:none;border-radius:9999px;padding:.78rem 1.2rem;font-weight:800;cursor:pointer}
.next-wide{width:100%}
.prev{background:#fff;color:#000;border:1px solid #000}

/* Form grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:720px){ .grid2{grid-template-columns:1fr} }

/* Aides texte */
.lead{margin:.25rem 0 .5rem}
.lead p{margin:.25rem 0;color:#333;font-size:15px}

/* iOS zoom fix on inputs */
@supports (-webkit-touch-callout: none) {
  input, select { font-size: 16px; }
}

/* Accessibilité: masquer visuellement tout en restant lisible par lecteurs d'écran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cell,.cell *{min-height:0}
.cell-select,.cell-date,.cell-time{min-height:48px}

/* Input row wrapper so left box doesn't overlay labels */
.poi-wrap .input-row{position:relative}
.poi-wrap .input-row input{width:100%;padding:0.78rem 44px 0.78rem 66px;border-radius:12px;border:1px solid #ddd;background:#fff;font-size:16px;line-height:1.2;min-height:44px}
.poi-wrap .input-row .geo{
  position:absolute;left:0;top:0;bottom:0;width:40px;
  border:1px solid #ddd;border-right:none;border-radius:12px 0 0 12px;
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;background-image:none;
}
.poi-wrap .input-row .geo::before{
  content:"";display:block;width:18px;height:18px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"/><circle cx=\"12\" cy=\"12\" r=\"9\"/></svg>');
  background-repeat:no-repeat;background-position:center;background-size:18px;
}
.poi-wrap .input-row .poi-icon{position:absolute;left:50px;top:50%;transform:translateY(-50%);opacity:.85;width:16px;height:16px;background-size:contain;background-repeat:no-repeat;pointer-events:none}
.poi-wrap .input-row .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9999px;border:none;background:#f2f2f3;cursor:pointer;line-height:28px;text-align:center}

/* Remove legacy calendar box column */
.cell-cal{display:none !important}

/* CGV checkbox before text, aligned */
label.terms{display:flex;align-items:center;gap:.55rem;font-weight:600}
label.terms input[type="checkbox"]{width:18px;height:18px;appearance:auto;margin:0}
label.terms span{line-height:1.2}

/* --- CGV alignment hard fix --- */
label.terms{display:flex !important; align-items:center !important; gap:.6rem; font-weight:700; line-height:1.25; margin:.6rem 0;}
label.terms input[type="checkbox"]{
  order:0 !important; /* ensure left */
  float:none !important;
  position:relative !important;
  width:18px;height:18px;
  margin:0 !important;
  transform:none !important;
  align-self:center !important;
}
label.terms span{order:1 !important; display:inline-block;}

/* --- CGV row (input left, text right) --- */
.terms-row{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 .4rem}
.terms-row input[type="checkbox"]{
  width:20px;height:20px;appearance:auto;margin:0;flex:0 0 auto;
}
.terms-row label{margin:0;font-weight:700;line-height:1.25}
.terms-row a{color:#111;text-decoration:underline}

/* --- Smartphones: steps above logo and centered --- */
@media (max-width: 640px){
  .head{display:flex;flex-direction:column-reverse;align-items:center;gap:10px}
  .brand{order:2}
  .steps{order:1; width:100%; display:grid; grid-template-columns:repeat(2, minmax(80px,1fr)); justify-items:center; gap:14px 18px; margin-top:4px}
  .step{min-width:auto}
}

/* Numéro de vol toujours affiché en majuscule */
#flight-number{
  text-transform: uppercase;
}

/* ===== CGV align + link (stable) ===== */
#app .agree.agree--cgv{
  display:flex !important;
  align-items:center !important;
  gap:.6rem !important;
  flex-wrap:nowrap !important;
  margin-top:6px !important;
}
#app .agree.agree--cgv input[type="checkbox"]{
  order:0 !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  appearance:auto !important;
  position:relative;
  top:1px;
}
#app .agree.agree--cgv label{
  order:1 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  line-height:1.35;
}
#app .agree.agree--cgv a{
  color:inherit;
  text-decoration:underline;
}

/* ===== Mobile date/time/select ===== */
@media (max-width: 768px){
  #app input[type="date"],
  #app input[type="time"],
  #app select{
    font-size:16px !important;
    height:52px !important;
    line-height:52px !important;
    padding:0 14px !important;
    border-radius:12px !important;
    border:1px solid #dedede !important;
    -webkit-appearance:none !important;
            appearance:none !important;
    width:100%;
  }
  #app input[type="date"]::-webkit-date-and-time-value{
    min-height:52px; line-height:52px;
  }
  #app input[type="date"]::-webkit-calendar-picker-indicator{
    padding:0 12px; opacity:.9;
  }
}

/* ===== Icone calendrier ===== */
#app input[type="date"]{
  padding-right:42px !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")
    no-repeat right 12px center / 18px 18px !important;
}

/* ===== Pills sous le logo (mobile) + alignement ===== */
@media (max-width: 768px){
  #app .tspdv-head,
  #app .booking-head,
  #app .header,
  #app .head,
  #app header.booking-header{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
  #app .tspdv-head .brand,
  #app .booking-head .brand,
  #app .head .brand,
  #app .branding,
  #app .logo{
    order:1 !important;
    width:100% !important;
    display:block !important;
    float:none !important;
  }
  #app .tspdv-steps,
  #app .booking-steps,
  #app .steps,
  #app .stepper{
    order:2 !important;
    width:100% !important;
    float:none !important;
    clear:both !important;
    margin-top:8px !important;
    display:grid !important;
    grid-template-columns:repeat(4, 56px) !important;
    justify-content:center !important;
    gap:10px 12px !important;
    list-style:none !important;
    padding:0 !important;
    text-align:initial !important;
  }
  #app .tspdv-steps > *,
  #app .booking-steps > *,
  #app .steps > li,
  #app .stepper > *{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:0 !important;
    min-height:92px !important;
    vertical-align:top !important;
  }
  #app .tspdv-steps .pill,
  #app .booking-steps .pill,
  #app .steps .pill,
  #app .stepper .pill,
  #app .tspdv-steps .dot,
  #app .booking-steps .dot,
  #app .steps .dot,
  #app .stepper .dot{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
    background:#000 !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:700 !important;
    font-size:18px !important;
    margin:0 !important;
  }
  #app .tspdv-steps .label,
  #app .booking-steps .label,
  #app .steps .label,
  #app .stepper .label,
  #app .steps .step-label{
    text-align:center !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    margin:6px 0 0 !important;
    padding:0 2px !important;
    min-height:34px !important;
    white-space:normal !important;
    word-break:keep-all;
    hyphens:auto;
  }
}
/* ===== Ajustements mobile : date + heure de vol visibles ===== */
@media (max-width: 640px){

  /* La grille "Détail de vol" passe vraiment en une seule colonne */
  #app .flight-grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }

  /* Bloc DATE : pleine largeur et bien visible */
  #app .flight-grid .cell-date{
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  #app .flight-grid .cell-date .date-flat{
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Bouton calendrier : déjà masqué dans ton CSS, on garde ce comportement */
  #app .flight-grid .cell-cal{
    display: none !important;
  }

  /* Bloc HEURE (hh:mm) : bien en ligne, sans déborder */
  #app .flight-grid .cell-time{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 6px !important;
    gap: 6px !important;
  }
  #app .flight-grid .cell-time input{
    width: 48px !important;
    min-height: 40px !important;
    text-align: center !important;
    font-size: 15px !important;
  }
  #app .flight-grid .cell-time .sep{
    margin: 0 2px !important;
  }
}
/* ===== Steps 1–2–3–4 sous le logo : alignement mobile ===== */
@media (max-width: 768px){

  /* Le header devient une colonne : logo en haut, steps dessous */
  #app .head{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #app .head .brand{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* La barre d’étapes devient une grille régulière */
  #app .steps{
    order: 2 !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #app .steps .step{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 92px !important;
  }

  /* Le rond avec le numéro */
  #app .steps .step span{
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  /* Le texte en dessous : même hauteur pour tout le monde */
  #app .steps .step em{
    display: block !important;
    text-align: center !important;
    font-style: normal !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    margin: 2px 0 0 !important;
    padding: 0 2px !important;
    min-height: 32px !important;  /* évite que les pills se décallent */
    white-space: normal !important;
  }
}
/* ===== Hard fix mobile : bloc date / heure toujours visible ===== */
@media (max-width: 768px){

  /* Titre "Détail de vol" toujours visible */
  #app .flight-head{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:10px !important;
  }
  #app .flight-sub{
    display:block !important;
  }

  /* La grille du bloc vol : une seule colonne, bien visible */
  #app .flight-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:flex-start !important;
    width:100% !important;
  }

  /* Cellule DATE : pleine largeur */
  #app .flight-grid .cell-date{
    display:block !important;
    width:100% !important;
    margin-top:4px !important;
  }
  #app .flight-grid .cell-date .date-flat{
    display:block !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    line-height:48px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-left:.95rem !important;
    padding-right:.95rem !important;
    text-align:center !important;
    border-radius:10px !important;
    border:1px solid #d9dbdf !important;
    font-weight:700 !important;
  }

  /* On s’assure que le bouton calendrier (ancienne colonne) reste bien caché */
  #app .flight-grid .cell-cal{
    display:none !important;
  }

  /* Cellule HEURE : visible et sur une ligne */
  #app .flight-grid .cell-time{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    width:100% !important;
    margin-top:4px !important;
  }
  #app .flight-grid .cell-time input{
    width:52px !important;
    min-height:42px !important;
    text-align:center !important;
    font-size:15px !important;
    border-radius:10px !important;
    border:1px solid #d9dbdf !important;
    font-weight:700 !important;
  }
  #app .flight-grid .cell-time .sep{
    margin:0 2px !important;
    font-weight:800 !important;
  }
}
#step-1 .help-text{
  font-size: 9px;
  color: #b91c1c;    /* rouge d’erreur */
  margin-top: 4px;
  display: none;     /* caché par défaut */
}
/* Masquer l'icône calendrier native du champ date,
   on garde seulement le bouton .cell-cal à gauche */
input[type="date"].date-flat::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}
/* Bloc "Données de facturation" en étape 3 */
.billing-toggle{
  width:100%;
  margin:12px 0 8px;
  padding:0.6rem 0.9rem;
  border-radius:9999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-size:0.9rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}

.billing-toggle::after{
  content:"▾";
  float:right;
  font-size:0.8rem;
  opacity:0.7;
}

.billing-toggle.open{
  background:#eef2ff;
  border-color:#4f46e5;
}

.billing-toggle.open::after{
  content:"▴";
}

.billing-block{
  padding:8px 0 4px;
  border-top:1px dashed #e5e7eb;
  margin-bottom:8px;
}
/* Mise en forme du module de vérification SMS */
.tspdv-phone-verify button.tspdv-phone-verify-send,
.tspdv-phone-verify button.tspdv-phone-verify-check{
  font-size: 0.8rem;
  padding: 0.45rem 0.7rem;
}
@media (max-width: 480px){
  .tspdv-phone-verify button.tspdv-phone-verify-send,
  .tspdv-phone-verify button.tspdv-phone-verify-check{
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
    min-height: 44px;
  }
}

.tspdv-phone-verify .tspdv-phone-verify-code{
  max-width: 6rem;
}

/* Texte "Numéro vérifié" un peu rapproché mais lisible */
.tspdv-phone-verify .tspdv-phone-verify-status{
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* Sur très petit écran : on laisse respirer un peu */
@media (max-width: 480px){
  .tspdv-phone-verify{
    gap: 0.35rem;
  }

  .tspdv-phone-verify button.tspdv-phone-verify-send,
  .tspdv-phone-verify button.tspdv-phone-verify-check{
    flex: 1 1 auto;
  }

  .tspdv-phone-verify .tspdv-phone-verify-code{
    flex: 0 0 5rem;
  }

  /* Le statut ("Numéro vérifié") peut passer sur la ligne suivante en pleine largeur */
  .tspdv-phone-verify .tspdv-phone-verify-status{
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 0.15rem;
  }
}

/* Ligne de vérification SMS */
.tspdv-phone-verify{
  width: 100%;
}

/* Le champ code s’étire entre les deux boutons */
.tspdv-phone-verify .tspdv-phone-verify-code{
  width: 100%;
}

/* Responsive : sur petit écran on accepte que ça passe sur 2 lignes proprement */
@media (max-width: 480px){
  .tspdv-phone-verify{
    gap: 0.35rem;
  }
  .tspdv-phone-verify button.tspdv-phone-verify-send,
  .tspdv-phone-verify button.tspdv-phone-verify-check{
    flex: 1 1 auto;
  }
  .tspdv-phone-verify .tspdv-phone-verify-code{
    flex: 1 1 100%;
  }
  .tspdv-phone-verify .tspdv-phone-verify-status{
    flex-basis: 100%;
    margin-top: 0.15rem;
  }
}
/* ——— Élargir la colonne du formulaire ——— */
.cols {
  grid-template-columns: 1.4fr 360px !important; /* Augmente largeur formulaire */
  max-width: 1900px !important; /* Permet au container d'être plus large */
}

/* ——— Élargir les cartes dans la colonne gauche ——— */
.left .card {
  max-width: 1900px !important;   /* Ajuste à la largeur désirée */
  width: 100% !important;
}


/* CTA retour minimal pour compatibilité */
.return-cta{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:12px; /* Step A: espace au-dessus du CTA */
}


/* Grille date + heure de retour */
.return-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:flex-end;
}
@media (max-width:640px){
  .return-grid{
    grid-template-columns:1fr;
  }
}


/* --- Forçage mise en page smartphone : 1 colonne sous 900px --- */
@media (max-width:900px){
  .cols{
    grid-template-columns:1fr !important;
  }
  .right{order:2;}
  .left{order:1;}
}


/* --- Forçage mise en page smartphone : 1 colonne sous 900px --- */
@media (max-width:900px){
  .cols{
    grid-template-columns:1fr !important;
  }
  .right{order:2;}
  .left{order:1;}
}



/* === CUSTOM LAYOUT: DATE & TIME FIELDS (FLIGHT + RETURN) === */

/* 1. ALLER SIMPLE : date + heure de prise en charge */
#app .flight-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: flex-end;
}

#app .flight-grid .cell-select{
  grid-column: 1 / -1;
}

#app .flight-grid .cell-cal{
  grid-column: 1 / -1;
}

/* label au-dessus du champ heure */
#app .flight-grid .cell-time{
  position: relative;
}

#app .flight-grid .cell-time::before{
  content: "Heure réservation (aller simple)";
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

#app .flight-grid .cell-date .date-flat,
#app .flight-grid .cell-time .date-flat{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px){
  #app .flight-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 768px){
  #app .flight-grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start;
  }

  #app .flight-grid .cell-date{
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 6px;
  }

  #app .flight-grid .cell-date .date-flat{
    width: 100%;
    min-height: 44px;
  }

  #app .flight-grid .cell-time{
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 6px;
  }

  #app .flight-grid .cell-time .date-flat{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    text-align: center;
  }

  #app .flight-grid .cell-cal{
    display: none;
  }
}

/* 2. ALLER-RETOUR : date du retour + heure du retour */
#app .return-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: flex-end;
}

#app .return-grid .cell input.date-flat{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px){
  #app .return-grid{
    grid-template-columns: 1fr;
  }
}



/* ===== V21 – Harmonisation "Heure de réservation" & layout date/heure ===== */
#app .flight-grid{
  /* 2 colonnes 50/50 pour date / heure sur les grands écrans */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: flex-end;
}

/* Le sélecteur de mode et le bouton calendrier occupent toute la largeur */
#app .flight-grid .cell-select,
#app .flight-grid .cell-cal{
  grid-column: 1 / -1;
}

/* Bloc heure avec libellé visuel au-dessus, comme pour "Heure du retour" */
#app .flight-grid .cell-time{
  position: relative;
  display: block;
}

#app .flight-grid .cell-time::before{
  content: "Heure de réservation";
  display: block;
  margin: 0 0 .25rem;
  font-weight: 700;
}

/* Inputs date / heure en pleine largeur dans leur cellule */
#app .flight-grid .cell-date .date-flat,
#app .flight-grid .cell-time .date-flat{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Champ heure pleine largeur, centré */
#app .flight-grid .cell-time input{
  width: 100%;
  max-width: 100%;
  height: 48px;
  min-height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 10px;
}

/* Mobile : 1 seule colonne, sans bouton calendrier */
@media (max-width: 768px){
  #app .flight-grid{
    grid-template-columns: 1fr;
  }
  #app .flight-grid .cell-cal{
    display: none;
  }
}

/* V21 – Espacement sous le sélecteur de passagers avant le CTA retour */
#app .field.field-return-cta{
  margin-top: 12px;
}


/* ===== V22 – Ajustements Date / Heure réservation ===== */

/* Desktop : 2 colonnes 50/50 pour Date / Heure de prise en charge */
@media (min-width: 1024px){
  .flight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:flex-end;
  }
  .flight-grid .cell-date{
    grid-column:1 / 2;
  }
  .flight-grid .cell-time{
    grid-column:2 / 3;
  }
  /* Le bouton calendrier dédié peut être masqué si présent en 3e colonne */
  .flight-grid .cell-cal{
    display:none;
  }
}

/* Label virtuel "Heure de réservation" au-dessus du champ heure */
.flight-grid .cell-time{
  position:relative;
}
.flight-grid .cell-time::before{
  content:"Heure de réservation";
  display:block;
  margin:0 0 .25rem;
  font-weight:700;
}

/* Mobile : empilement type "Date du retour / Heure du retour" */
@media (max-width: 640px){
  .flight-grid{
    grid-template-columns:1fr;
  }
  .flight-grid .cell-time{
    display:block !important;
    grid-column:1 / -1 !important;
  }
  .flight-grid .cell-time input,
  #flight-time{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    line-height:48px !important;
    text-align:center !important;
    border-radius:10px !important;
    box-sizing:border-box;
  }
}

/* Espacement sous le sélecteur de passagers avant le CTA vert */
.field.field-return-cta{
  margin-top:12px;
}


/* ===== Patch V22.1 – Date / Heure aller + espacement Passagers ===== */

/* Desktop (>= 1024px) : Date et Heure de prise en charge en 2 colonnes 50/50 */
@media (min-width: 1024px){
  #app .flight-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: flex-end;
  }
  #app .flight-grid .cell-date{
    grid-column: 1 / 2 !important;
  }
  #app .flight-grid .cell-time{
    grid-column: 2 / 3 !important;
  }
}

/* Mobile (<= 640px) : même logique que les champs Date/Heure du retour */
@media (max-width: 640px){
  #app .flight-grid{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }
  #app .flight-grid .cell-date,
  #app .flight-grid .cell-time{
    display: block !important;
    width: 100% !important;
  }
  #app .flight-grid .cell-time input,
  #app #flight-time{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    text-align: center !important;
    border-radius: 10px !important;
    box-sizing: border-box;
  }
}

/* Espacement net entre "Passagers" et le CTA vert "Rentez avec le sourire..." */
#app .field-return-cta,
#app .field.field-return-cta,
.field-return-cta{
  margin-top: 12px !important;
}



/* ===== V23 – Date et heure de prise en charge sur une même ligne (desktop) ===== */
@media (min-width: 900px){
  #app .flight-grid{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 12px !important;
    align-items: flex-end !important;
  }
  #app .flight-grid .cell-select,
  #app .flight-grid .cell-cal{
    grid-column: 1 / -1 !important;
  }
  #app .flight-grid .cell-date{
    grid-column: 1 / 2 !important;
  }
  #app .flight-grid .cell-time{
    grid-column: 2 / 3 !important;
  }
}