/* ═══════════════════════════════════════════════════════════════════
   Module de réservation — habillage RentSmart
   ═══════════════════════════════════════════════════════════════════

   Le module arrive de FlexiRent en thème clair (fond blanc, accent orange).
   RentSmart est une nuit bleutée : #050C14, bleu ciel #38BDF8, Sora + Inter.
   Tout le module étant écrit avec des variables, l'habillage tient dans la
   redéfinition ci-dessous — pas une ligne du module n'est touchée.

   Chargé APRÈS tunnel-public.css.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Fonds, du plus profond au plus clair */
  --bg:#050C14;          /* la nuit du site */
  --bg2:#0A1622;         /* panneaux */
  --card:#0E1B29;        /* cartes */
  --card2:#132434;       /* champs, zones enfoncées */
  --chip:#16283A;        /* pastilles */
  --fxline:#1E3448;      /* filets */

  /* Texte */
  --fxtxt:#E8F2FA;       /* texte principal, sur fond nuit */
  --mut:#93AABF;         /* texte secondaire — 6,1:1 sur #0E1B29 */

  /* Accent : le bleu ciel de la marque */
  --acc:#38BDF8;
  --acc2:#7DD3FC;        /* liens et mentions sur fond sombre : le --sky-ink
                            du site (#0369A1) serait illisible ici */

  /* États */
  --ok:#34D399;
  --warn:#FBBF24;
  --bad:#F87171;
}

/* Sur le bleu ciel, le texte doit être sombre — c'est déjà la règle du site
   pour .btn-sky (color:#04121C). Sans ça, blanc sur #38BDF8 tombe à 1,9:1. */
#wzov .btn, #edlz .btn, .fxcal-pop .btn, #fxBubbleMount .btn,
#wzov .btn:hover, #edlz .btn:hover{ color:#04121C; }
#wzov .btn.sec, #edlz .btn.sec, .fxcal-pop .btn.sec, #fxBubbleMount .btn.sec{
  color:var(--fxtxt); background:transparent; border-color:var(--fxline);
}
#wzov .btn.sec:hover, #edlz .btn.sec:hover, #fxBubbleMount .btn.sec:hover{
  border-color:var(--acc); color:var(--acc);
}

/* Les polices du site, pour que le module ne détonne pas. */
#wzov, #edlz, .fxcal-pop, #fxBubbleMount, #booking-mount{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
#wzov h1, #wzov h2, #wzov h3, #wzov h4, #wzov h5,
#edlz h1, #edlz h2, #edlz h3, #edlz h4,
#fxBubbleMount h1, #fxBubbleMount h2, #fxBubbleMount h3{
  font-family:"Sora","Inter",system-ui,sans-serif; letter-spacing:-.015em;
}

/* Le panneau du tunnel : verre sombre plutôt que carte blanche. */
#wzsheet{ background:var(--bg2); border:1px solid var(--fxline);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85); }
#wzov{ background:rgba(5,12,20,.72); backdrop-filter:blur(6px); }

/* Les cartes véhicule : la photo doit rester la vedette, le cadre s'efface. */
#wzov .sxcard{ background:var(--card); border-color:var(--fxline); }
#wzov .sxcard:hover{ border-color:var(--acc); }

/* Le calendrier vit dans <body> : il n'hérite pas du conteneur, on le
   rhabille explicitement. */
.fxcal-pop{ background:var(--card); border:1px solid var(--fxline); color:var(--fxtxt); }
.fxcal-pop .fxcal-day:hover{ background:var(--chip); }
.fxcal-pop .fxcal-day.on, .fxcal-pop .fxcal-day.dans{ background:var(--acc); color:#04121C; }

/* La bulle de recherche de l'accueil. Elle arrive en blanc (elle se pose sur
   une photo claire côté FlexiRent) ; ici elle est sur la nuit du site, et ses
   libellés — écrits en gris secondaire — tombaient à 2,4:1 sur ce blanc.
   On la passe donc en verre sombre, et le gris redevient lisible. */
.fx-bubble{ background:rgba(10,22,34,.92); border:1px solid var(--fxline);
  backdrop-filter:blur(10px); box-shadow:0 30px 70px -30px rgba(0,0,0,.85); }
.fx-bubble .fx-bfield{ border-right-color:var(--fxline); }
.fx-bubble .fx-bfield select, .fx-bubble .fx-datebtn{ color:var(--fxtxt); }
.fx-bubble .fx-bfield select option{ background:#0E1B29; color:var(--fxtxt); }
/* Onglets « Voiture / Utilitaire » : l'actif prend l'accent, avec du texte
   sombre dessus — jamais du blanc sur bleu ciel. */
.fx-bubble .fx-bt{ color:var(--mut); border-color:var(--fxline); }
.fx-bubble .fx-bt.on{ background:var(--acc); color:#04121C; border-color:var(--acc); }
.fx-bubble .fx-balt{ color:var(--acc2); }

/* ═══ Les endroits du site où le module se pose ═══════════════════════ */

/* Accueil : la bulle de recherche remplace le cadre blanc. Plus de hauteur
   réservée — les résultats n'apparaissent qu'après une recherche, une réserve
   laisserait un trou au milieu de la page. */
.book-live{ display:block; }
.book-live #booking-mount{ position:relative; margin-top:22px; }

/* Page réservation */
.resa-titre{ font-family:"Sora","Inter",sans-serif; font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:-.02em; margin:0 0 6px; }
.resa-sous{ color:var(--mut); max-width:58ch; margin:0 0 26px; }
.resa-full{ padding:48px 0 72px; }

/* Retour de Stripe */
.conf-card{ max-width:560px; margin:0 auto; background:var(--card);
  border:1px solid var(--fxline); border-radius:18px; padding:34px 30px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9); text-align:center; }
.conf-attente{ color:var(--mut); padding:18px 0; }
.conf-ok{ font-size:52px; line-height:1; color:var(--ok); }
.conf-card h1,.conf-card h2{font-size:1.5rem; font-family:"Sora","Inter",sans-serif; margin:12px 0 4px; }
.conf-sub{ color:var(--mut); font-size:.95rem; margin:6px 0 0; }
.conf-detail{ border-top:1px solid var(--fxline); margin-top:18px; padding-top:18px;
  text-align:left; line-height:1.7; }
.conf-dates{ color:var(--mut); }
.conf-montant{ color:var(--acc); }
.conf-btn{ width:100%; margin-top:20px; }

/* Paiement abandonné : le bandeau qui rassure. Rien n'a été débité, et ça
   doit se lire sans avoir à chercher. */
.fx-annule-note{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:var(--card); border:1px solid var(--fxline); border-left:4px solid var(--warn);
  color:var(--fxtxt); border-radius:12px; padding:14px 46px 14px 16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9); font-size:.94rem; max-width:520px;
  margin:0 auto; }
.fx-annule-note button{ position:absolute; top:8px; right:10px; border:0; background:none;
  color:var(--mut); font-size:1.4rem; line-height:1; cursor:pointer; }
.fx-annule-note button:hover{ color:var(--fxtxt); }


/* ═══════════════════════════════════════════════════════════════════
   Les surfaces du tunnel
   ═══════════════════════════════════════════════════════════════════
   tunnel-public.css pose une trentaine de « background:#fff » en dur, plus
   des teintes chaudes (#fff6f1, #fff1ea, #fff3d6…) héritées de l'orange
   FlexiRent. Les variables ne les atteignent pas : il faut les nommer.

   Les classes visées (.wz*, .sx*, .fxcal-*) n'existent que dans le module —
   vérifié : styles.css n'en définit aucune. Les sélecteurs génériques
   (.mut, .chip) sont eux portés par les conteneurs du module.

   Contrastes obtenus, mesurés : texte principal 15,3:1 · texte secondaire
   7,2:1 · accent 8,1:1 · texte sombre sur accent 8,8:1.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cartes et panneaux ─────────────────────────────────────────── */
.wzradio, .wzslide, .wzprot, .wzopt2, .sxmini, .wzsug, .wzcalnav,
.wzage, .tkslot, .atile{
  background:var(--card); border-color:var(--fxline); color:var(--fxtxt);
}
.wzinfo, .wzapercu, .wzopt2 .h .icn{ background:var(--card2); color:var(--fxtxt); }
.wzsug-i:hover, .wzcd[data-iso]:hover, .wzradio:hover{ background:var(--chip); }
.wzradio:hover, .wzprot:hover, .wzopt2:hover{ border-color:var(--acc); }

/* L'état sélectionné : une teinte bleutée, plus le liseré d'accent.
   Le rose orangé de FlexiRent (#fff6f1) devient #132E42. */
.wzradio.on, .wzprot.on, .wzopt2.on, .wzopt2.large.on, .wzinfobox{
  background:rgba(56,189,248,.12); border-color:var(--acc);
}
.wzopt2.large{ background:rgba(56,189,248,.05); border-color:var(--fxline); }
.wzopt2.on .h .icn{ background:rgba(56,189,248,.20); }
.wzopt2 .h .sw{ background:var(--fxline); }
.wzopt2 .h .sw .kn{ background:var(--fxtxt); }
.wzopt2.large .f{ border-top-color:var(--fxline); }

/* ── Le fil des étapes ──────────────────────────────────────────── */
/* La pastille active portait du blanc sur bleu ciel : 2,14:1. Sur ce bleu,
   le texte doit être sombre — même règle que les boutons du site. */
.wzstep .n{ background:var(--chip); color:var(--mut); }
.wzstep.on .n{ background:var(--acc); color:#04121C; }
.wzstep.done .n{ background:rgba(52,211,153,.15); color:#6EE7B7; }
.wzstep.done{ color:#6EE7B7; }
.wzstep{ color:var(--mut); }
.wzsep{ background:var(--fxline); }

/* ── Le calendrier ──────────────────────────────────────────────── */
/* Les flèches ‹ › étaient un glyphe presque blanc sur un rond blanc :
   littéralement invisibles. C'est le « blanc sur blanc » signalé. */
.wzcalnav{ background:var(--card2); color:var(--fxtxt); border-color:var(--fxline); }
.wzcalnav:hover{ background:var(--chip); border-color:var(--acc); color:var(--acc); }
.wzcd.on, .wzcd.today.on{ background:var(--acc); color:#04121C; }
.wzcd.mid{ background:rgba(56,189,248,.14); color:var(--fxtxt); }
/* Jours passés : gris, mais lisibles. #c7cbd3 sur la nuit du calendrier
   donnait un gris clair sur fond sombre inversé ; ce ton-ci tient 5,3:1
   tout en restant nettement en retrait des jours cliquables. */
.wzcd.off, .wzcd.dis, .wzcd.past{ color:#748EA3; }

/* ── Âge du conducteur ──────────────────────────────────────────── */
.wzage{ color:var(--fxtxt); }
.wzage.on{ background:rgba(56,189,248,.12); border-color:var(--acc); color:var(--acc2); }

/* ── Pastilles et bandeaux ──────────────────────────────────────── */
/* Le jaune paille de FlexiRent sur fond nuit : on garde l'idée (attirer
   l'œil) avec une ambre qui tient le contraste. */
.wzreco, .wzpop, .chip.chip-warn, .ezwarn{
  background:rgba(251,191,36,.14); color:#FCD34D; border-color:rgba(251,191,36,.3);
}
.wzbar{ background:rgba(251,191,36,.3); }
/* #wzov .sxribbon est plus spécifique dans tunnel-public.css : on reprend
   la même spécificité, sinon la règle ne s'applique pas. */
#wzov .sxribbon, #booking-mount .sxribbon{ background:var(--acc); color:#04121C; }
.sxpanel-t, .sx25-name{ color:#fff; }

/* ── Boutons ronds d'information, puces radio ───────────────────── */
.wzinfo button, button.wzinfo, .wzinfobtn{
  background:var(--card2); color:var(--acc); border-color:var(--acc);
}
.wzinfo button:hover, button.wzinfo:hover{ background:var(--acc); color:#04121C; }

/* ── Champs de saisie ───────────────────────────────────────────── */
#wzov input, #wzov select, #wzov textarea,
#booking-mount input, #booking-mount select, #booking-mount textarea,
.wzsug input, input.inline, select.inline{
  background:var(--card2); border:1px solid var(--fxline); color:var(--fxtxt);
}
#wzov input::placeholder, #booking-mount input::placeholder{ color:#6E869C; }
#wzov select option, #booking-mount select option{ background:#0E1B29; color:var(--fxtxt); }
#wzov input:focus, #booking-mount input:focus,
#wzov select:focus, #booking-mount select:focus{ border-color:var(--acc); outline:none; }

/* ── Boutons secondaires (blancs à l'origine) ───────────────────── */
#wzov .btn.sec, #booking-mount .btn.sec, .fxcal-pop .btn.sec{
  background:var(--card2); border-color:var(--fxline); color:var(--fxtxt);
}
#wzov .btn.danger, #booking-mount .btn.danger{
  background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.4); color:#FCA5A5;
}

/* ── Liens ──────────────────────────────────────────────────────── */
/* --acc2 (#7DD3FC) plutôt que --acc : 10,4:1 sur la carte, et les liens
   restent distincts du texte courant. */
#wzov a, #booking-mount a{ color:var(--acc2); }

/* ── Le blanc résiduel ──────────────────────────────────────────── */
/* Garde-fou : quelques éléments du module (aperçus, zones de dépôt) sont
   peints en blanc par des règles trop spécifiques pour être toutes
   nommées. Ils sont dans le module, donc sur fond nuit. */
#wzov .pwrap, #wzov .totbar, #wzov .droparea, #wzov .phitem, #wzov .phadd,
#booking-mount .pwrap, #booking-mount .totbar, #booking-mount .droparea{
  background:var(--card2); color:var(--fxtxt); border-color:var(--fxline);
}


/* ── Le bandeau « reprendre votre réservation » ──────────────────
   Posé en bas d'écran, comme le bandeau d'annulation : visible sans
   recouvrir le contenu, et refermable en un clic. Sur mobile il passe
   en colonne, sinon les deux boutons se marchent dessus. */
.fx-reprise{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9998;
  max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--fxline);
  border-left:4px solid var(--acc); border-radius:12px; padding:14px 16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  font-family:"Inter",system-ui,sans-serif; color:var(--fxtxt);
}
.fx-reprise-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 220px; }
.fx-reprise-txt b{ font-size:.95rem; }
.fx-reprise-txt span{ font-size:.85rem; color:var(--mut);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-reprise-act{ display:flex; gap:8px; flex:0 0 auto; }
.fx-reprise button{ border-radius:9px; padding:9px 15px; font-size:.86rem;
  font-weight:600; cursor:pointer; font-family:inherit; border:1px solid transparent; }
.fx-reprise-go{ background:var(--acc); color:#04121C; }
.fx-reprise-go:hover{ background:var(--acc2); }
.fx-reprise-no{ background:transparent; color:var(--mut); border-color:var(--fxline); }
.fx-reprise-no:hover{ color:var(--fxtxt); border-color:var(--acc); }
@media (max-width:480px){
  /* En colonne, le bloc de texte ne doit pas s'étirer : avec flex:1 il
     poussait les boutons tout en bas et le bandeau occupait un tiers de
     l'écran du téléphone. */
  .fx-reprise{ flex-direction:column; align-items:stretch; gap:12px; }
  .fx-reprise-txt{ flex:0 0 auto; }
  .fx-reprise-act{ justify-content:flex-end; }
  .fx-reprise button{ flex:1 1 0; }
}