/* Module de réservation : carte blanche posée sur le héros indigo, mêmes jetons que le thème Mistral. */
.resa{--rb:#fff;--rl:#E2DDF3;--ri:#221C46;--rv:#5B3FC4;--rm:#5E5A78;--rbr:#F1EEFB;
  background:var(--rb);color:var(--ri);border-radius:20px;padding:clamp(18px,3vw,28px);box-shadow:0 30px 60px -30px rgba(10,6,40,.6);
  display:grid;gap:16px;font-family:Manrope,ui-sans-serif,system-ui,sans-serif;position:relative;min-width:0;scroll-margin-top:90px}
.resa-titre{font:800 22px/1.15 Syne,ui-sans-serif,sans-serif;color:var(--ri);margin:0 0 4px}
.resa-sous{margin:0;font-size:14px;color:var(--rm)}
.resa .champ{display:grid;gap:6px;position:relative;min-width:0}
.resa label{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ri)}
.resa input[type=text],.resa input[type=date],.resa input[type=time],.resa select{width:100%;min-height:50px;border:1.5px solid var(--rl);border-radius:12px;
  padding:0 14px;font:600 16px/1.2 Manrope,ui-sans-serif,sans-serif;color:var(--ri);background:#fff;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.resa select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3FC4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;padding-right:36px}
.resa input:focus,.resa select:focus{outline:none;border-color:#7C5CE0;box-shadow:0 0 0 4px rgba(124,92,224,.18)}
.resa input[aria-invalid=true]{border-color:#C2410C}
.resa [hidden]{display:none!important}
/* départ et arrivée l'un sous l'autre ; le bouton d'inversion est posé à droite, entre les deux champs */
.resa-trajet{display:grid;grid-template-columns:1fr;gap:10px;position:relative}
.resa-trajet .lieu input{padding-right:58px}
.inverser{position:absolute;right:10px;top:calc(50% + 2px);z-index:2;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--rl);background:var(--rbr);color:var(--rv);cursor:pointer;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.inverser:hover{transform:rotate(180deg)}
.resa-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.resa-bas{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.case{display:inline-flex;align-items:center;gap:10px;font-size:15px!important;font-weight:600!important;cursor:pointer}
.case input{width:22px;height:22px;accent-color:#7C5CE0}
.resa-go{min-width:200px}
@media (max-width:560px){.resa-go{width:100%}}
.resa-msg{margin:0;font-size:14px;color:var(--rm);min-height:0}
.resa-msg.err{color:#B4380A;font-weight:600}
.resa-msg:empty{display:none}

/* suggestions */
.suggestions{position:absolute;left:0;right:0;top:100%;z-index:30;margin:6px 0 0;padding:6px;list-style:none;background:#fff;border:1px solid var(--rl);border-radius:14px;
  box-shadow:0 24px 40px -20px rgba(34,28,70,.45);max-height:300px;overflow:auto}
.suggestions li{padding:11px 12px;border-radius:10px;cursor:pointer;font-size:15px;line-height:1.35;display:flex;gap:10px;align-items:flex-start}
.suggestions li[aria-selected=true],.suggestions li:hover{background:var(--rbr)}
.suggestions li svg{flex:none;margin-top:2px;color:#7C5CE0}
.suggestions li.vide{color:var(--rm);cursor:default;background:none}

/* résultats */
.resa-resultats{display:grid;gap:10px}
.resa-info{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--rm);font-weight:600}
.veh-choix{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;border:1.5px solid var(--rl);border-radius:14px;padding:14px 16px;
  animation:mat-in .45s cubic-bezier(.2,.8,.2,1) both}
.veh-choix:nth-child(3){animation-delay:.06s}.veh-choix:nth-child(4){animation-delay:.12s}
@keyframes mat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.veh-choix h3{font:800 17px/1.2 Syne,ui-sans-serif,sans-serif;margin:0;color:var(--ri)}
.veh-choix .m{font-size:13px;color:var(--rm);margin:2px 0 0}
.veh-choix .cap{font-size:13px;font-weight:700;color:var(--rv);margin:4px 0 0}
.veh-choix .px{font:800 26px/1 Syne,ui-sans-serif,sans-serif;color:var(--ri);text-align:right;font-variant-numeric:tabular-nums}
.veh-choix .btn{grid-column:1/-1;min-height:46px}
.veh-choix.non{opacity:.55}
.veh-choix.non .btn{display:none}
.veh-choix .trop{grid-column:1/-1;font-size:13px;color:#B4380A;font-weight:600;margin:0}
.veh-choix.choisi{border-color:#7C5CE0;box-shadow:0 0 0 4px rgba(124,92,224,.15)}
@media (min-width:561px){.veh-choix .btn{grid-column:auto;grid-row:1/span 2;grid-column-start:3;min-width:120px}.veh-choix{grid-template-columns:minmax(0,1fr) auto auto}}
.resa-suite{border-top:1px solid var(--rl);padding-top:16px;display:grid;gap:12px}
.resa-suite h3{font:800 18px/1.2 Syne,ui-sans-serif,sans-serif;margin:0;color:var(--ri)}
.resa-suite p{margin:0;font-size:15px;color:var(--rm)}
.resa-suite .btns{display:flex;flex-wrap:wrap;gap:10px}
.btn-wa{background:#1F8A5B;color:#fff}.btn-wa:hover{background:#18744C;color:#fff}
@media (prefers-reduced-motion:reduce){.veh-choix{animation:none}.inverser{transition:none}}

/* ---------- réservation complète (page Réserver) ---------- */
.resa-complet{box-shadow:0 30px 60px -40px rgba(10,6,40,.45);border:1px solid var(--rl)}
.resa-etapes{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:e}
.resa-etapes li{position:relative}
.resa-etapes li:not(:last-child)::after{content:"";position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:var(--rl)}
.resa-etapes li.fait:not(:last-child)::after{background:#7C5CE0}
.resa-etapes button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:8px;width:100%;text-align:center}
.resa-etapes button:disabled{cursor:default}
.resa-etapes button:focus-visible .num{outline:3px solid #7C5CE0;outline-offset:3px}
.resa-etapes .num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--rbr);color:var(--rm);font:800 16px/1 Syne,ui-sans-serif,sans-serif;transition:background .25s,color .25s}
.resa-etapes .lbl{font-size:13px;font-weight:700;color:var(--rm)}
.resa-etapes li[aria-current] .num{background:#221C46;color:#B7A6E8}
.resa-etapes li[aria-current] .lbl{color:var(--ri)}
.resa-etapes li.fait .num{background:#B7A6E8;color:#221C46}
@media (max-width:560px){.resa-etapes .lbl{font-size:11px}.resa-etapes li:not(:last-child)::after{left:calc(50% + 22px);right:calc(-50% + 22px)}}
.etape{display:grid;gap:16px;animation:mat-in .35s cubic-bezier(.2,.8,.2,1) both}
.etape-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.etape-grille{grid-template-columns:1fr}}
.etape-champs{display:grid;gap:12px;min-width:0}
.onglets{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--rbr);border-radius:999px;padding:4px;gap:4px;justify-self:start}
.onglets button{border:0;background:none;padding:10px 18px;border-radius:999px;font:700 14px/1 Manrope,ui-sans-serif,sans-serif;color:var(--rm);cursor:pointer}
.onglets button[aria-selected=true]{background:#221C46;color:#fff}
.etape-carte{display:grid;gap:10px;min-width:0;position:sticky;top:90px}
.carte{height:340px;border-radius:16px;overflow:hidden;background:var(--rbr);border:1px solid var(--rl);z-index:0}
@media (max-width:860px){.carte{height:220px}.etape-carte{position:static}}
.carte-chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.carte-chiffres div{background:var(--rbr);border-radius:12px;padding:10px 14px}
.carte-chiffres dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rm)}
.carte-chiffres dd{margin:2px 0 0;font:800 20px/1.2 Syne,ui-sans-serif,sans-serif;color:var(--ri);font-variant-numeric:tabular-nums}
.petit{font-size:13px;color:var(--rm);margin:0}
.etape-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rl);padding-top:16px}
.nav-droite{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}
.total-mini{font:800 18px/1 Syne,ui-sans-serif,sans-serif;color:var(--ri);font-variant-numeric:tabular-nums}
.resa .btn-line{background:#fff;color:var(--ri);box-shadow:inset 0 0 0 1.5px var(--rl)}
.vehicules{display:grid;gap:10px}
.veh-choix .btn[aria-pressed=true]{pointer-events:none}
.sous-titre{font:800 17px/1.2 Syne,ui-sans-serif,sans-serif;color:var(--ri);margin:8px 0 0}
.options{display:grid;gap:8px}
.option{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--rl);border-radius:12px;padding:10px 12px 10px 16px}
.o-nom{font-weight:600;font-size:15px}.o-nom small{color:var(--rm);font-weight:600;margin-left:6px}
.pas{display:inline-flex;align-items:center;gap:6px}
.pas button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--rl);background:#fff;color:var(--ri);font:700 20px/1 Manrope,sans-serif;cursor:pointer}
.pas button:hover{border-color:#7C5CE0}
.pas output{min-width:22px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.resa textarea{width:100%;border:1.5px solid var(--rl);border-radius:12px;padding:12px 14px;font:500 16px/1.5 Manrope,ui-sans-serif,sans-serif;color:var(--ri);resize:vertical}
.resa textarea:focus{outline:none;border-color:#7C5CE0;box-shadow:0 0 0 4px rgba(124,92,224,.18)}
.resa input[type=email],.resa input[type=tel]{width:100%;min-height:50px;border:1.5px solid var(--rl);border-radius:12px;padding:0 14px;font:600 16px/1.2 Manrope,ui-sans-serif,sans-serif;color:var(--ri);background:#fff}
.resa input[type=email]:focus,.resa input[type=tel]:focus{outline:none;border-color:#7C5CE0;box-shadow:0 0 0 4px rgba(124,92,224,.18)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.recap dl{margin:0;display:grid;gap:0;border:1px solid var(--rl);border-radius:14px;overflow:hidden}
.recap dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rl)}
.recap dl div:last-child{border-bottom:0}
.recap dt{color:var(--rm);font-size:14px}.recap dd{margin:0;font-weight:600;font-size:15px;overflow-wrap:anywhere}
@media (max-width:560px){.recap dl div{grid-template-columns:1fr;gap:2px}}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 0;padding:14px 16px;background:#221C46;color:#fff;border-radius:14px}
.recap-total span{font-weight:700}.recap-total strong{font:800 28px/1 Syne,ui-sans-serif,sans-serif;color:#B7A6E8}
.paiements{border:0;margin:0;padding:0;display:grid;gap:8px}
.paiements legend{font:800 17px/1.2 Syne,ui-sans-serif,sans-serif;color:var(--ri);margin-bottom:8px}
.paiement{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--rl);border-radius:14px;padding:14px 16px;cursor:pointer}
.paiement:has(input:checked){border-color:#7C5CE0;box-shadow:0 0 0 4px rgba(124,92,224,.12)}
.paiement input{width:20px;height:20px;margin-top:2px;accent-color:#7C5CE0;flex:none}
.paiement span{display:grid;gap:2px}.paiement small{color:var(--rm);font-size:13px}
.case.cgv{align-items:flex-start;line-height:1.5}.case.cgv input{flex:none;margin-top:2px}
.case.cgv a{color:var(--rv)}
#mat-envoyer{min-width:240px}
.leaflet-container{font-family:Manrope,ui-sans-serif,sans-serif}

/* ---------- page de suivi ---------- */
.resa-suivi{display:grid;gap:18px;max-width:760px}
.suivi-tete{display:flex;gap:14px;align-items:flex-start;background:#F1EEFB;border-radius:16px;padding:18px}
.resa-suivi .suivi-tete h2{font:800 22px/1.2 Syne,ui-sans-serif,sans-serif;margin:0 0 6px;color:#221C46}
.suivi-tete p{margin:0;color:#5E5A78}
.pastille{width:14px;height:14px;border-radius:50%;margin-top:7px;flex:none;background:#1F8A5B;box-shadow:0 0 0 5px rgba(31,138,91,.18)}
.etat-attente .pastille{background:#C2780C;box-shadow:0 0 0 5px rgba(194,120,12,.18)}
.etat-annule .pastille{background:#B4380A;box-shadow:0 0 0 5px rgba(180,56,10,.18)}
.resa-suivi .resa-msg:empty{display:none}
