@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Work+Sans:wght@400;500;600&display=swap');

#tb-form-wrap{
  --tb-ink:#10151c;
  --tb-navy:#1b2a3d;
  --tb-snow:#f6f7f9;
  --tb-brass:#b98d4a;
  --tb-ice:#8fb4d1;
  --tb-muted:#69737e;
  --tb-border:#e2e5ea;
  --tb-green:#166534;
  --tb-green-bg:#f0fdf4;

  font-family:'Work Sans',sans-serif;
  color:var(--tb-ink);
  max-width:1180px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--tb-border);
  border-radius:16px;
  padding:36px 34px 30px;
  box-shadow:0 18px 40px -24px rgba(16,21,28,.35);
}
#tb-form-wrap, #tb-form-wrap *, #tb-form-wrap *::before, #tb-form-wrap *::after{
  box-sizing:border-box; /* fiabilise width:100% + padding + border partout dans le widget,
                             quel que soit le reset CSS du thème WordPress hôte */
}

#tb-form-wrap h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:24px;
  color:var(--tb-navy);
  margin:0 0 14px;
}
.tb-intro{font-size:14px;color:var(--tb-muted);margin:0 0 22px;line-height:1.5}
.tb-intro-sub{display:block;font-size:13px;font-weight:400;color:var(--tb-muted);margin-top:4px}
.tb-intro-question strong{color:var(--tb-navy);font-size:16px;font-weight:600}

/* ── Fil d'étapes ── */
.tb-tabs{display:flex;align-items:center;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.tb-tab{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--tb-muted);padding:6px 9px;border-radius:100px;background:var(--tb-snow);white-space:nowrap}
.tb-tab.active{color:#fff;background:var(--tb-navy)}
.tb-tab-sep{color:var(--tb-border);font-size:12px}

/* ── Étapes ── */
.tb-step{display:none}
.tb-step.active{display:block}
#tb-step-resa{max-width:640px;margin:0 auto} /* l'étape 1 profite de la largeur pour les lignes de trajet ; l'étape 2 reste resserrée, plus lisible */
.tb-back{background:none;border:none;color:var(--tb-muted);font-size:13px;font-weight:500;cursor:pointer;padding:0 0 18px;display:inline-flex;align-items:center;gap:4px}
.tb-back:hover{color:var(--tb-navy)}

/* ── Champs ── */
.tb-field{margin-bottom:16px}
.tb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tb-field label{display:block;font-size:12px;font-weight:500;color:var(--tb-navy);margin-bottom:5px}
.tb-field input[type=text],
.tb-field input[type=email],
.tb-field input[type=tel],
.tb-field input[type=number],
.tb-field input[type=date],
.tb-field input[type=time],
.tb-field select,
.tb-field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--tb-border);border-radius:8px;
  font-family:inherit;font-size:13.5px;color:var(--tb-ink);background:var(--tb-snow);
  transition:border-color .15s, box-shadow .15s;
  appearance:auto;
}
.tb-field input:focus,.tb-field select:focus,.tb-field textarea:focus{
  outline:none;border-color:var(--tb-brass);box-shadow:0 0 0 3px rgba(185,141,74,.18);background:#fff;
}
.tb-checkbox label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--tb-ink)}
.tb-checkbox input{width:16px;height:16px;accent-color:var(--tb-brass)}

/* ── Blocs Aller / Retour (étape 1) : tous les champs sur une ligne, plus légers ── */
.tb-leg-block{border:1px solid var(--tb-border);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.tb-leg-block-retour{border-style:dashed}
.tb-leg-heading{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--tb-navy);margin-bottom:14px}
.tb-leg-heading-optional{font-family:'Work Sans',sans-serif;font-weight:400;font-size:12px;color:var(--tb-muted)}

.tb-leg-fields{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;position:relative}
.tb-leg-fields > div{flex-basis:25%}
.tb-leg-trajet-wrap{flex:1 1 280px;max-width:440px;min-width:0}
.tb-leg-datetime{flex:1 1 150px;max-width:190px;min-width:0}
.tb-leg-field-pax{flex:0 0 120px;margin-bottom:0;min-width:0}
.tb-leg-field-vol{flex:0 0 130px;margin-bottom:0;min-width:0}
.tb-leg-fields > .tb-leg-field-vol{flex-basis:130px}
.tb-leg-fields > .tb-leg-field-pax{flex-basis:120px}

/* Prix + bouton supprimer : sortis du flux flex (en haut à droite du bloc), pour que
   les 3 vraies colonnes (trajet / date+heure / passagers) se répartissent proprement
   sur toute la largeur sans être gênées par leur présence. */
.tb-leg-price-group{
  position:absolute;right:10px;top:-51px;
  display:flex;align-items:center;gap:10px;
  background:var(--tb-snow);border:1px solid var(--tb-border);border-radius:100px;
  padding:6px 6px 6px 16px;
}
.tb-leg-price-amount{font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--tb-navy);white-space:nowrap}
.tb-price-before{font-family:'Work Sans',sans-serif;font-weight:400;font-size:12px;color:var(--tb-muted);text-decoration:line-through;margin-right:2px}
.tb-price-after{color:#166534}
.tb-leg-delete{
  flex:0 0 auto;height:26px;padding:0 10px 0 8px;border-radius:100px;border:none;background:transparent;
  color:var(--tb-muted);font-size:12px;cursor:pointer;transition:background .15s,color .15s;
  display:flex;align-items:center;gap:4px;line-height:1;white-space:nowrap;
}
.tb-leg-delete-label{font-size:12px;font-weight:500}
.tb-leg-delete:hover{background:#fee2e2;color:#991b1b}

/* ── Bloc trajet vertical (Lieu de prise en charge en haut, Destination en bas) ──
   UN SEUL conteneur flex en colonne : libellé-haut / boîte / swap / libellé-bas / boîte.
   Les libellés ont un `order` FIXE (1 et 4) — ils ne bougent jamais. Seul l'`order`
   des deux boîtes s'échange (2 ↔ 5) au clic sur ⇅, via .tb-trajet-swapped. Chaque
   libellé reste ainsi juste au-dessus de sa boîte, aligné avec Date/Heure. */
.tb-trajet-v{display:flex;flex-direction:column;gap:4px;min-width:0}
.tb-trajet-v-label{font-size:12px;font-weight:500;color:var(--tb-navy);line-height:1.2}
.tb-trajet-v-label-top{order:1;margin-bottom:12px}
.tb-trajet-v-label-bottom{order:4;margin-top:1px}
.tb-trajet-v > .tb-combo:first-of-type{order:2}
.tb-trajet-v > .tb-swap{order:3}
.tb-trajet-v > .tb-combo:last-of-type{order:5}
.tb-trajet-v.tb-trajet-swapped > .tb-combo:first-of-type{order:5}
.tb-trajet-v.tb-trajet-swapped > .tb-combo:last-of-type{order:2}

.tb-swap{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--tb-border);background:var(--tb-snow);
  color:var(--tb-navy);font-size:11px;cursor:pointer;transition:background .15s, transform .15s;
  align-self:center;flex-shrink:0;margin:1px 0;
}
.tb-swap:hover{background:#fff;border-color:var(--tb-brass)}
.tb-swap:active{transform:scale(.9)}

@keyframes tbSwapPulse{
  0%   { background:rgba(185,141,74,.16); }
  100% { background:transparent; }
}
.tb-trajet-swap-pulse .tb-combo-field{ animation: tbSwapPulse .4s ease; border-radius:9px; }
.tb-sens-resume{font-size:11px;color:var(--tb-muted);margin:0 0 10px;min-height:13px}

.tb-autre-destination{margin-top:-2px;margin-bottom:8px}

/* ── Menu déroulant avec recherche + pictos ──
   Le panneau est positionné en `fixed` et recalculé en JS (voir booking.js),
   pour ne jamais se faire couper par un conteneur du thème en overflow:hidden
   ni par le clavier virtuel sur mobile. Couleurs en dur (pas de var()) car le
   panneau est déplacé dans <body>, hors de la portée des variables CSS de
   #tb-form-wrap. */
.tb-combo-field{position:relative}
.tb-combo-search{
  display:block;width:100%;padding:9px 30px 9px 11px;border:1px solid #e2e5ea;border-radius:8px;
  font-family:inherit;font-size:13.5px;color:#10151c;background:#f6f7f9;text-align:left;
  cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .15s, box-shadow .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-combo-search:focus{outline:none;border-color:#b98d4a;box-shadow:0 0 0 3px rgba(185,141,74,.18);background:#fff}
.tb-combo-search-placeholder{color:#69737e}
.tb-combo-caret{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#69737e;font-size:10px;pointer-events:none}
.tb-combo-panel{
  position:fixed;z-index:99999;box-sizing:border-box;
  background:#fff;border:1px solid #e2e5ea;border-radius:12px;
  box-shadow:0 14px 32px -12px rgba(16,21,28,.35);
  overflow-y:auto;padding:6px;
  font-family:'Work Sans',sans-serif;
  -webkit-overflow-scrolling:touch;
}
.tb-combo-panel *{box-sizing:border-box}
.tb-combo{position:relative}
.tb-combo-filter{
  width:100%;margin-bottom:4px;padding:9px 10px;border:1px solid #e2e5ea;border-radius:8px;
  font-family:inherit;font-size:14px;color:#10151c;background:#f6f7f9;box-sizing:border-box;
}
.tb-combo-filter:focus{outline:none;border-color:#b98d4a;background:#fff}
.tb-combo-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#69737e;padding:8px 10px 6px}
.tb-combo-item{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.tb-combo-item:hover,.tb-combo-item:active{background:#f6f7f9}
.tb-combo-icon{width:20px;text-align:center;flex-shrink:0;font-size:15px}
.tb-combo-name{flex:1;color:#10151c}
.tb-combo-flag{flex-shrink:0;font-size:15px}
.tb-combo-item-autre .tb-combo-name{color:#69737e}

/* ── Note de prix (mode nuit/samedi, sous la ligne d'actions) ── */
.tb-price-note{margin:10px 0 0;font-size:12px;color:var(--tb-muted);text-align:right}

/* ── Récapitulatif (étape 2) ── */
.tb-recap{background:var(--tb-snow);border:1px solid var(--tb-border);border-radius:12px;padding:16px 20px;margin-bottom:20px}
.tb-recap-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--tb-border);font-size:14px}
.tb-recap-row:last-child{border-bottom:none}
.tb-recap-row .label{color:var(--tb-muted)}
.tb-recap-row .value{font-weight:500;text-align:right}
.tb-recap-prix .value{color:var(--tb-navy);font-weight:600}
.tb-recap-delete-btn{
  border:none;background:transparent;color:var(--tb-muted);font-size:11px;cursor:pointer;
  width:18px;height:18px;border-radius:50%;line-height:1;vertical-align:middle;margin-left:2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.tb-recap-delete-btn:hover{background:#fee2e2;color:#991b1b}

/* ── Informations voyage (toujours visible, destination requise) ── */
.tb-travel-info{margin-bottom:20px}
.tb-travel-info-title{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--tb-navy);margin:0 0 12px}

/* ── Options repliables ── */
.tb-options{margin-bottom:20px;border:1px solid var(--tb-border);border-radius:10px;padding:2px 16px}
.tb-options summary{cursor:pointer;padding:12px 0;font-size:14px;font-weight:500;color:var(--tb-navy);list-style:none}
.tb-options summary::-webkit-details-marker{display:none}
.tb-options summary::after{content:'+';float:right;font-size:18px;color:var(--tb-muted)}
.tb-options[open] summary::after{content:'–'}
.tb-options[open] summary{padding-bottom:6px}
.tb-options > div, .tb-options > .tb-field{margin-top:14px}

/* ── Sièges enfant : intro + compteurs +/- ── */
.tb-child-seats{padding-bottom:6px;border-bottom:1px solid var(--tb-border);margin-bottom:6px}
.tb-child-seats-title{font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--tb-navy);margin:0 0 6px}
.tb-child-seats-intro{font-size:12px;color:var(--tb-muted);line-height:1.5;margin:0 0 14px}
.tb-other-options{padding-bottom:6px;border-bottom:1px solid var(--tb-border);margin-bottom:6px}

.tb-counter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--tb-border)}
.tb-counter-row:first-of-type{border-top:none}
.tb-counter-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tb-counter-label{font-size:13.5px;font-weight:500;color:var(--tb-ink)}
.tb-counter-sub{font-size:11.5px;color:var(--tb-muted)}
.tb-counter-control{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-counter-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--tb-border);background:var(--tb-snow);
  color:var(--tb-navy);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.tb-counter-btn:hover{background:#fff;border-color:var(--tb-brass)}
.tb-counter-btn:active{transform:scale(.92)}
.tb-counter-value{min-width:16px;text-align:center;font-size:14px;font-weight:600;color:var(--tb-ink)}

/* ── Actions ── */
.tb-actions{margin-top:8px}
.tb-actions-with-total{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.tb-actions-split{display:flex;gap:10px}
.tb-actions-split .tb-btn{width:auto;flex:1}
.tb-btn{font-family:inherit;font-size:15px;font-weight:600;padding:13px 22px;border-radius:9px;border:none;cursor:pointer;transition:transform .1s, background .15s;width:100%}
.tb-btn-auto{width:auto}
.tb-btn:active{transform:scale(.98)}
.tb-btn-primary{background:var(--tb-navy);color:#fff}
.tb-btn-primary:hover{background:var(--tb-ink)}
.tb-btn-ghost{background:var(--tb-snow);color:var(--tb-navy);border:1px solid var(--tb-border)}
.tb-btn-ghost:hover{background:#fff;border-color:var(--tb-muted)}
.tb-btn:disabled{opacity:.6;cursor:default}

.tb-total-box{background:var(--tb-navy);color:#fff;border-radius:9px;padding:11px 22px;display:flex;align-items:baseline;gap:12px}
.tb-total-label{font-size:13px;color:#cbd5e1}
.tb-total-amount{font-family:'Fraunces',serif;font-weight:600;font-size:23px;white-space:nowrap}

/* ── Champ Date + Heure combiné (déclencheur + panneau calendrier) ── */
.tb-datetime-search{font-variant-numeric:tabular-nums}
.tb-datetime-panel{
  position:fixed;z-index:99999;box-sizing:border-box;
  background:#fff;border:1px solid #e2e5ea;border-radius:12px;
  box-shadow:0 14px 32px -12px rgba(16,21,28,.35);
  padding:14px;font-family:'Work Sans',sans-serif;overflow-y:auto;
}
.tb-datetime-panel *{box-sizing:border-box}

/* Calendrier à gauche, heures à droite (côte à côte) par défaut — empilés sur mobile
   via le media query plus bas. */
.tb-datetime-body{display:flex;align-items:flex-start;gap:16px}
.tb-datetime-cal{flex:0 0 auto;width:220px}
.tb-datetime-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tb-datetime-cal-title{font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:#1b2a3d}
.tb-datetime-nav{
  width:26px;height:26px;border-radius:50%;border:1px solid #e2e5ea;background:#f6f7f9;
  color:#1b2a3d;font-size:15px;cursor:pointer;line-height:1;
}
.tb-datetime-nav:hover{background:#fff;border-color:#b98d4a}
.tb-datetime-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.tb-datetime-cal-weekdays span{text-align:center;font-size:10.5px;font-weight:600;color:#69737e;text-transform:uppercase}
.tb-datetime-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tb-datetime-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:7px;font-size:12.5px;color:#10151c;
  cursor:pointer;font-family:inherit;
}
.tb-datetime-day:hover{background:#f6f7f9}
.tb-datetime-day-muted{color:#c7cbd1;cursor:default;pointer-events:none}
.tb-datetime-day-today{font-weight:700;color:#b98d4a}
.tb-datetime-day-selected{background:#1b2a3d;color:#fff;font-weight:600}
.tb-datetime-day-selected:hover{background:#1b2a3d}
.tb-datetime-time-row{flex:0 0 auto;width:140px;padding-left:16px;border-left:1px solid #e2e5ea}
.tb-datetime-time-label{display:block;font-size:11px;font-weight:600;color:#69737e;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.tb-datetime-time-cols{display:flex;align-items:stretch;gap:6px}
.tb-datetime-time-col{
  flex:1;max-height:230px;overflow-y:auto;border:1px solid #e2e5ea;border-radius:8px;
  background:#f6f7f9;padding:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.tb-datetime-time-btn{
  display:block;width:100%;padding:7px 0;margin-bottom:2px;border:none;border-radius:6px;
  background:transparent;color:#10151c;font-family:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;
  cursor:pointer;text-align:center;
}
.tb-datetime-time-btn:hover{background:#fff}
.tb-datetime-time-btn-selected{background:#1b2a3d;color:#fff;font-weight:600}
.tb-datetime-time-btn-selected:hover{background:#1b2a3d}
.tb-datetime-time-sep{font-weight:600;color:#69737e;align-self:center}

.tb-politique{font-size:12px;color:var(--tb-muted);margin:0 0 18px}

/* ── États ── */
.tb-success{text-align:center;padding:30px 10px}
.tb-success-icon{font-size:38px;margin-bottom:10px}
.tb-success h2{font-family:'Fraunces',serif;color:var(--tb-navy);margin-bottom:8px}
.tb-error{background:#fee2e2;color:#991b1b;border-radius:9px;padding:12px 16px;font-size:14px;margin-top:16px}

@media(max-width:640px){
  #tb-form-wrap{padding:26px 20px 22px;border-radius:12px}
  .tb-field-row{grid-template-columns:1fr}

  /* Bloc Aller/Retour : on repasse en pile verticale, chaque champ pleine largeur.
     Le badge prix+supprimer redevient un bloc normal dans le flux (plus d'absolute),
     placé en dernier sous les champs. */
  .tb-leg-block{padding:14px 14px 14px}
  .tb-leg-fields{flex-direction:column;align-items:stretch}
  .tb-leg-fields > div{flex-basis:auto}
  .tb-leg-trajet-wrap{max-width:none;width:100%}
  .tb-leg-datetime{max-width:none;width:100%}
  .tb-leg-field-pax{flex-basis:auto;width:100%}
  .tb-leg-field-vol{flex-basis:auto;width:100%}
  .tb-leg-price-group{position:static;top:auto;right:auto;margin-top:6px;justify-content:flex-start;width:fit-content}

  .tb-actions-with-total{flex-direction:column;align-items:stretch}
  .tb-btn-auto{width:100%}
  .tb-total-box{justify-content:center}
  .tb-price-note{text-align:left}

  .tb-datetime-panel{width:calc(100vw - 24px) !important;max-width:300px}
  .tb-datetime-body{flex-direction:column}
  .tb-datetime-cal{width:100%}
  .tb-datetime-time-row{width:100%;padding-left:0;border-left:none;margin-top:12px;padding-top:12px;border-top:1px solid #e2e5ea}
  .tb-datetime-time-col{max-height:150px}
}