
/* ============================================================
   RENTSMART — design system clair de FlexiLoc.
   Fond blanc, encre noire, accent orange : l'ergonomie du site
   RentSmart (thème clair, cohérent avec l'appli d'origine).
   Les noms de classes sont inchangés : seul le style bouge.
   ============================================================ */
:root{
  --bg:#f5f6f8; --bg2:#ffffff; --card:#ffffff; --card2:#f1f3f6; --line:#e4e7ed;
  --txt:#15181e; --mut:#68707f; --acc:#ff5000; --acc2:#c2410c; --ok:#0a8a4a;
  --warn:#b45309; --bad:#dc2626; --chip:#eef0f4;
}
/* Ce fichier est une copie de rentsmart.css (l'appli FlexiRent OS complète),
   mais le tunnel public n'utilise QUE la fenêtre plein écran #wzov/#wzsheet
   (et #edlz pour un éventuel état des lieux) — jamais la coquille de l'appli
   (barre latérale <aside>, <main> décalé, .topbar, .savebadge). Ces règles-là
   étaient globales (sélecteurs *, body, aside, main) : chargées sur une vraie
   page du site public, elles écrasaient le <body>/<main> du site lui-même
   (ex. la page /reservation/) et cassaient toute la mise en page. Supprimées
   ici et remplacées par un reset scopé aux seuls conteneurs du tunnel. */
/* :where() met la spécificité de ce reset à ZÉRO. C'est décisif : écrit
   `#wzov *`, il avait une spécificité d'ID et écrasait silencieusement le
   `padding` de TOUS les composants du tunnel, qui sont écrits en simples
   classes (.wzradio, .wzprot, .wzopt2, .sxhead, .sect...). Résultat : chaque
   écran s'affichait tassé, texte collé aux bords, alors que le CSS prévoyait
   partout des marges confortables. Le reset continue de normaliser (il reste
   prioritaire sur les styles par défaut du navigateur), mais n'importe quelle
   classe peut désormais le surcharger, comme prévu à l'origine.
   Diagnostiqué le 22/08/2026. */
:where(#wzov) *, :where(#edlz) *{box-sizing:border-box;margin:0;padding:0}
#wzov, #edlz{box-sizing:border-box;margin:0;padding:0}
/* color:var(--txt) sur le conteneur racine seulement (pas #wzov *) : depuis
   que la bulle d'accueil vit dans <main class="home-bleu"> (texte blanc
   partout, voir style.css), tout élément du tunnel qui ne fixait pas sa
   couleur héritait de ce blanc ambiant et devenait illisible sur fond clair
   (ex. le texte des cartes "Options de paiement" à l'étape Véhicule) —
   invisible sur /reservation/ (pas de fond bleu) mais pas sur l'accueil. En
   ciblant uniquement #wzov/#edlz (et non leurs descendants), ça redevient
   une couleur HÉRITÉE que les panneaux sombres (.sxcard, .sx25-photo, etc.)
   peuvent continuer à écraser normalement — un `#wzov *{color}` aurait au
   contraire (spécificité d'ID) cassé leur texte blanc sur fond sombre. */
#wzov, #edlz{color:var(--txt)}
/* --- boutons : orange plein / blanc borde / danger --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 17px;
  background:var(--acc);border:1px solid var(--acc);color:#fff;border-radius:11px;cursor:pointer;
  font-size:13.5px;font-weight:700;line-height:1;white-space:nowrap;
  box-shadow:0 1px 2px rgba(255,80,0,.25);transition:background .12s,box-shadow .12s,border-color .12s}
.btn:hover{background:#e04600;border-color:#e04600}
.btn.sec{background:#fff;border:1px solid #d4d9e1;color:#2b313c;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn.sec:hover{background:var(--card2);border-color:#c2c8d2}
.btn.danger{background:#fff;border:1px solid #f3b4b4;color:#c02626;box-shadow:none}
.btn.danger:hover{background:#fdf0f0;border-color:#e89a9a}
.btn.small{height:30px;padding:0 12px;font-size:12.5px;border-radius:9px}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .sp{flex:1}
/* --- tuiles d'action de la fiche --- */
.atiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 4px}
.atile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 4px 10px;
  color:#3d4451;cursor:pointer;font-size:11.5px;font-weight:600;text-align:center;line-height:1.25;
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .12s,box-shadow .12s}
.atile:hover{border-color:var(--acc);box-shadow:0 3px 10px rgba(255,80,0,.12)}
.atile .i{font-size:21px}
.atile.main{background:var(--acc);border-color:var(--acc);color:#fff}
.atile.main:hover{background:#e04600}
.atile.danger{color:#c02626}
.atile.danger:hover{border-color:var(--bad);background:#fdf0f0}
.atile .done{color:var(--ok);font-weight:800}
.dfoot{display:flex;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dfoot .btn:first-child{flex:1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kpi .lab{font-size:10.5px;font-weight:700;color:#8a91a0;text-transform:uppercase;letter-spacing:.6px}
.kpi .val{font-size:23px;font-weight:800;letter-spacing:-.4px;margin-top:4px}
.kpi .val.neg{color:var(--bad)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters input,.filters select{background:#fff;border:1px solid #d4d9e1;color:var(--txt);height:38px;padding:0 12px;border-radius:10px;font-size:13px}
.filters input:focus,.filters select:focus{outline:2px solid #ffc7a8;border-color:var(--acc)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:#8a91a0;text-align:left;font-weight:700;padding:8px;border-bottom:1px solid var(--line);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
td{padding:8px;border-bottom:1px solid #eceef3;vertical-align:top}
tr.row:hover{background:#fcf6f2;cursor:pointer}
.chip{display:inline-block;padding:2.5px 10px;border-radius:20px;font-size:11.5px;font-weight:600;background:var(--chip);color:#4b5563;white-space:nowrap}
.chip.c-confirme{background:#e5efff;color:#1d4ed8}
.chip.c-encours{background:#e3f6ec;color:#0a7a42}
.chip.c-termine{background:#eef0f4;color:#5b6472}
.chip.c-expire{background:#fdeaea;color:#b91c1c}
.chip.c-accepte{background:#fff3d6;color:#92500e}
.chip.c-franchise{background:#f1e9ff;color:#6d28d9}
.mut{color:var(--mut)} .neg{color:var(--bad)} .pos{color:var(--ok)}
.right{text-align:right}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:12.5px;color:var(--mut)}
.drawer{position:fixed;top:0;right:-660px;width:630px;max-width:94vw;bottom:0;background:#fff;border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(16,24,40,.14);z-index:50;transition:right .2s;overflow-y:auto;padding:20px}
.drawer.open{right:0}
.drawer h3{margin-bottom:4px;font-size:18px;font-weight:800;letter-spacing:-.2px}
.drawer .sub{color:var(--mut);font-size:12.5px;margin-bottom:12px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;font-size:13px}
.dgrid .k{color:var(--mut)}
.sect{border-top:1px solid var(--line);margin-top:15px;padding-top:11px}
.sect h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--acc2);margin-bottom:9px}
.overlay{position:fixed;inset:0;background:rgba(21,24,30,.35);z-index:40;display:none}
.overlay.on{display:block}
.close{float:right;background:none;border:none;color:#9aa1ae;font-size:18px;cursor:pointer}
.close:hover{color:var(--txt)}
.hint{font-size:12.5px;color:var(--mut);margin:8px 0}
/* Récapitulatif des dates en tête de l'étape Véhicule. C'était un <p class=hint>
   gris clair sur fond clair : illisible (signalé le 22/08/2026). Devient une
   vraie barre contrastée, avec les dates en évidence. */
/* Toutes ces règles sont préfixées #wzov : le reset en tête de fichier
   (`#wzov *{margin:0;padding:0}`) a une spécificité d'ID et écrasait sinon le
   padding de la barre, qui retombait à une simple ligne de 25 px de haut. */
#wzov .sxbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card,#fff);border:1px solid var(--line,#e4e7ed);border-left:4px solid var(--acc);
  border-radius:12px;padding:13px 18px;margin:2px 0 18px;font-size:14.5px;color:var(--txt);
  box-shadow:0 1px 3px rgba(16,24,40,.05)}
#wzov .sxbar b{font-weight:700}
#wzov .sxbar .sxbar-sep{color:#c8ced8}
#wzov .sxbar .sxbar-mut{color:var(--mut)}
#wzov .sxbar .sxbar-cta{margin-left:auto;font-weight:700;color:var(--acc)}
@media (max-width:700px){#wzov .sxbar .sxbar-cta{margin-left:0;width:100%}}
.droparea{border:2px dashed #cfd5de;border-radius:14px;padding:34px;text-align:center;color:var(--mut);margin:10px 0;background:#fafbfc}
.tag{font-size:11px;background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:2px 7px;margin-right:4px;color:#4b5563}
.anom{color:var(--warn);font-size:12.5px}
h5.tsec{margin:14px 0 6px;color:var(--txt);font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:14px;font-weight:800;letter-spacing:-.2px}
input.inline{background:#fff;border:1px solid #d4d9e1;color:var(--txt);padding:5px 8px;border-radius:8px;width:110px}
select.inline{background:#fff;border:1px solid #d4d9e1;color:var(--txt);padding:5px 8px;border-radius:8px}
input.inline:focus,select.inline:focus{outline:2px solid #ffc7a8;border-color:var(--acc)}
/* --- étape "Récap" : formulaire "Qui va conduire ?" façon Sixt (label
   au-dessus du champ, champs plus grands) au lieu du tableau étiquette/valeur
   utilisé ailleurs dans l'app FlexiRent OS — refonte du 22/08/2026. --- */
.wzform{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:2px}
.wzform .wide{grid-column:1 / -1}
.wzfield{display:flex;flex-direction:column;gap:6px}
.wzfield label{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.wzfield input,.wzfield select{height:46px;border:1.5px solid var(--line);border-radius:11px;padding:0 14px;
  font-size:14.5px;color:var(--txt);background:#fff;transition:border-color .12s,box-shadow .12s;width:100%}
.wzfield input:focus,.wzfield select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,80,0,.12)}
/* --- planning --- */
.pwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.prow{display:flex;align-items:stretch;border-bottom:1px solid #eceef3}
.prow.pcat{background:#f8f9fb}
.plab{width:200px;min-width:200px;padding:6px 10px;font-size:12px;border-right:1px solid var(--line);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ptrack{position:relative;flex:none}
.pday{display:inline-block;font-size:9.5px;color:#8a91a0;padding:4px 0;border-right:1px solid #eceef3;text-align:center;vertical-align:top}
.pday.pwe{background:#f3f5f8}
.pday.ptoday{color:#fff;background:var(--acc);font-weight:700}
.pgrid{background-image:repeating-linear-gradient(to right,#eceef3 0 1px,transparent 1px 36px)}
.pnow{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);z-index:5}
.pbar{position:absolute;height:22px;border-radius:7px;font-size:10.5px;font-weight:600;line-height:22px;padding:0 7px;overflow:hidden;white-space:nowrap;cursor:pointer;background:#94a3b8;color:#fff;z-index:4;box-shadow:0 1px 2px rgba(16,24,40,.18)}
.pbar.c-confirme{background:#2563eb;color:#fff}
.pbar.c-encours{background:#16a34a;color:#fff}
.pbar.c-termine{background:#aab2c0;color:#fff}
.pbar.c-expire{background:#e06767;color:#fff}
.pbar.c-accepte{background:#f59e0b;color:#fff}
.pbar.c-immo{background:repeating-linear-gradient(45deg,#fbe3e3 0 6px,#f6d0d0 6px 12px);color:#a33;border:1px dashed #d88}
.prow.dropon{outline:2px solid var(--acc);outline-offset:-2px;background:#fff1ea}
.pbar[data-drag="1"]{user-select:none}
/* --- cartes departs/retours + alertes --- */
.agcard{background:#fff;border:1px solid var(--line);border-left:4px solid #2563eb;border-radius:12px;padding:11px 13px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.agcard.ret{border-left-color:#f59e0b}
.agcard .h{display:flex;gap:10px;align-items:baseline}
.agcard .heure{font-size:17px;font-weight:800}
.iconb{position:relative;padding:6px 11px;font-size:15px}
.badge{position:absolute;top:-7px;right:-7px;background:var(--bad);color:#fff;border-radius:10px;font-size:10px;padding:1px 5px;min-width:16px;text-align:center}
.badge.zero{display:none}
.alcard{background:#fff;border:1px solid var(--line);border-left:4px solid #f59e0b;border-radius:12px;padding:10px 13px;margin-bottom:8px;cursor:pointer;font-size:13px}
.alcard.grave{border-left-color:var(--bad)}
.totbar{position:sticky;top:0;background:#fff;z-index:6;display:flex;gap:16px;justify-content:flex-end;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.totbar b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:16px;font-weight:800}
/* --- EDL : grilles de photos et pieces --- */
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;margin:8px 0}
.phitem{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f8f9fb;aspect-ratio:4/3}
.phitem img{width:100%;height:100%;object-fit:cover;display:block}
.phitem .phx{position:absolute;top:3px;right:3px;background:rgba(21,24,30,.65);color:#fff;border:none;border-radius:7px;width:20px;height:20px;cursor:pointer;font-size:11px;line-height:1}
.phadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed #cfd5de;border-radius:10px;color:#8a91a0;cursor:pointer;aspect-ratio:4/3;font-size:11px;background:#fafbfc;text-align:center;padding:2px}
.phadd:hover{border-color:var(--acc);color:var(--acc)}
/* --- tickets CB / caution --- */
.tkrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.tkslot{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:#fff}
.tkslot img{max-width:100%;max-height:150px;border-radius:8px;margin-top:8px}
/* --- tunnel de reservation en etapes --- */
.wzsteps{display:flex;align-items:center;gap:6px;margin:10px 0 4px}
.wzstep{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#9aa1ae;white-space:nowrap}
.wzstep .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0f4;font-size:11px}
.wzstep.on{color:var(--acc)}
.wzstep.on .n{background:var(--acc);color:#fff}
.wzstep.done{color:#0a8a4a;cursor:pointer}
.wzstep.done .n{background:#e3f6ec;color:#0a8a4a}
.wzsep{flex:1;height:2px;background:#eef0f4;border-radius:2px;min-width:12px}
.wzcat{margin-top:12px}
.wzcat-h{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.wzcat-h b{font-size:13.5px}
.wzdes{margin-left:auto;font-size:12px;font-weight:800;color:var(--acc)}
/* Cartes radio (étape "Véhicule" — options de paiement / kilométrage) :
   agrandies et détachées du style formulaire d'origine pour se rapprocher
   des cartes de sélection Sixt (gros bouton radio, titre en évidence, prix
   net à droite, état sélectionné marqué) — refonte du 22/08/2026. */
/* Cartes-choix ("bulles") : titre en gras, description SOUS le titre et non
   à la suite derrière un tiret, prix aligné à droite. C'est la composition des
   écrans Sixt — elle laisse l'oeil balayer les titres puis les prix, au lieu
   de devoir lire une phrase entière par ligne. */
.wzradio{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;background:#fff;
  border:1.5px solid var(--line);border-radius:16px;padding:17px 19px;margin-bottom:11px;cursor:pointer;font-size:13.5px;
  transition:border-color .12s,box-shadow .12s,background .12s}
.wzradio:hover{border-color:#ffb488}
.wzradio.on{border-color:var(--acc);background:#fff6f1;box-shadow:0 0 0 1px var(--acc)}
.wzradio input[type="radio"]{width:19px;height:19px;accent-color:var(--acc);flex:none;margin-top:1px}
.wzradio .t{line-height:1.45}
.wzradio .t b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:15px;letter-spacing:-.1px}
.wzradio .t .mut{display:block;margin-top:4px;font-size:13px;line-height:1.45}
.wzradio .p{font-family:var(--display,"Archivo",system-ui,sans-serif);font-weight:800;font-size:15px;white-space:nowrap;
  padding-top:1px}
.wzsug{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:0 8px 24px rgba(16,24,40,.14);overflow:hidden}
.wzsug-i{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;gap:8px;align-items:baseline}
.wzsug-i:hover{background:#fcf6f2}
/* --- portail : cartes vehicules facon Sixt ---
   Proportions et police mesurées en direct sur sixt.fr (carte 467x568px,
   soit ~0.82 largeur/hauteur, découpée en 3 zones tête/photo/pied d'environ
   26,5% / 45,5% / 26,5% de la hauteur) — bug remonté par le client le
   21/08/2026 ("problème de proportion... les polices ne sont pas les
   mêmes"). Titre et prix passent sur la police d'affichage du site
   (--display, Archivo) au lieu d'hériter de --body (Inter) par défaut. */
.sxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Au-delà de 1500 px on passe à 4 colonnes : en quasi pleine largeur, 3 cartes
   deviendraient trop larges pour leur photo (ratio 8/5) et la grille aurait
   l'air vide. */
@media (min-width:1500px){.sxgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.sxgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.sxgrid{grid-template-columns:1fr}}
/* ===== Carte véhicule — refonte 22/08/2026 =====================================
   Objectif : la présence visuelle des cartes Sixt. Trois leviers, dans l'ordre
   d'impact réel :
     1. la PHOTO occupe désormais un cadre au ratio exact des fichiers card.jpg
        (800x500 = 8/5), donc plus aucun rognage — avant, une hauteur fixe de
        216 px coupait le haut et le bas du véhicule ;
     2. le PRIX est composé comme chez Sixt : entier en gros, centimes et "/jour"
        en petit, ce qui fait lire le montant d'un coup d'oeil ;
     3. un dégradé et un relief au survol remplacent l'aplat #1a1a1a.
   Volontairement ABSENTES : les étiquettes "très demandé" / "meilleur choix" de
   Sixt. Elles ne reposeraient sur aucune donnée ici — seul "Meilleur prix" est
   conservé, parce qu'il est réellement calculé (voir isBest côté JS). */
#wzov .sxcard{background:linear-gradient(158deg,#252931 0%,#191c21 46%,#111316 100%);
  color:#fff;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 2px 10px rgba(8,14,32,.22);
  transition:transform .14s ease,box-shadow .16s ease,border-color .16s ease}
#wzov .sxcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,14,32,.42);
  border-color:rgba(255,255,255,.16)}
#wzov .sxcard:hover .sxphotowrap img{transform:scale(1.035)}
/* min-height : sans elle, un nom sur deux lignes décalait la photo vers le bas
   et la grille devenait irrégulière d'une carte à l'autre. */
#wzov .sxhead{padding:22px 22px 16px;min-height:130px}
/* Repère "moins cher du groupe" — calculé côté JS (vrai prix, pas un texte
   marketing arbitraire) sur la 1ère carte de la section principale. */
/* Posé SUR la photo (et non au-dessus du nom) : les en-têtes gardent ainsi la
   même hauteur d'une carte à l'autre, et le repère se lit comme le bandeau
   d'angle des cartes Sixt. */
#wzov .sxribbon{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--acc);color:#fff;font-size:10.5px;font-weight:800;
  padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;
  box-shadow:0 3px 12px rgba(8,14,32,.45)}
#wzov .sxname{font-family:var(--display,"Archivo",system-ui,sans-serif);font-weight:800;font-size:25px;
  line-height:1.08;text-transform:uppercase;letter-spacing:-.2px}
@media (min-width:1500px){#wzov .sxname{font-size:23px}}
#wzov .sxsub{font-size:12.5px;color:#a2a8b6;margin:8px 0 0}
#wzov .sxchips{display:flex;gap:6px;margin:13px 0 0;flex-wrap:wrap}
#wzov .sxchips span{font-size:10.5px;font-weight:600;letter-spacing:.2px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:4px 9px;color:#dfe3ea}
#wzov .sxfoot{padding:17px 22px 22px}
#wzov .sxkm{font-size:11.5px;color:#7ee2a8;margin:0 0 10px;display:flex;align-items:center;gap:5px}
/* Prix : l'entier porte le poids visuel, les centimes et l'unité s'effacent —
   c'est la composition qui rend le tarif Sixt lisible en un coup d'oeil.
   gap:0 entre l'entier et les centimes, sinon "41" et ",00 €" se séparent. */
#wzov .sxprixrow{display:flex;align-items:baseline;gap:0;flex-wrap:wrap}
#wzov .sxprix{font-family:var(--display,"Archivo",system-ui,sans-serif);color:var(--acc);
  font-weight:800;font-size:36px;line-height:1;letter-spacing:-1.2px}
#wzov .sxprixc{font-family:var(--display,"Archivo",system-ui,sans-serif);color:var(--acc);
  font-weight:800;font-size:19px;letter-spacing:-.3px}
#wzov .sxprixj{color:#a2a8b6;font-size:12.5px;font-weight:600;margin-left:7px}
#wzov .sxtot{color:#8f96a5;font-size:12px;margin-left:auto}
.sxpanel{background:#1a1a1a;border-radius:14px;overflow:hidden;margin-top:8px}
.sxpanel-t{padding:9px 12px;color:#fff;font-size:13px}
/* Bandeau véhicule en tête de récap, façon Sixt — refonte du 22/08/2026 */
.sxmini{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);
  border-radius:15px;padding:12px 16px;margin-top:8px;font-size:13.5px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sxmini img,.sxmini>div:first-child{width:92px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.sxmini b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:15px}
.sxmini b:last-child{font-size:18px}
/* --- étape "Véhicule" (25) : photo + options en deux colonnes façon Sixt --- */
.sx25{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}
.sx25-photo{position:sticky;top:14px;background:#1a1a1a;border-radius:16px;overflow:hidden}
.sx25-photo img,.sx25-photo>div:first-child{border-radius:0}
.sx25-name{padding:18px 20px 20px;color:#fff}
.sx25-name b{display:block;font-family:var(--display,"Archivo",system-ui,sans-serif);font-weight:700;
  font-size:21px;text-transform:uppercase;letter-spacing:.2px}
.sx25-name .mut{font-size:12.5px;color:#9a9fab;margin-top:4px;display:block}
@media (max-width:900px){
  .sx25{grid-template-columns:1fr}
  .sx25-photo{position:static}
}
/* --- ages --- */
.wzages{display:flex;gap:8px}
.wzage{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;font-size:13px;font-weight:600;background:#fff}
.wzage.on{border-color:var(--acc);background:#fff1ea;color:var(--acc)}
.wzage input{accent-color:var(--acc)}
.wzpop{background:#fff3d6;color:#92500e;font-size:10.5px;font-weight:800;border-radius:6px;padding:1.5px 6px}
/* --- curseur km --- */
/* Le curseur reste (il rend le choix du kilométrage tangible) mais il est
   posé dans une bulle, comme les cartes-choix au-dessus. */
.wzslide{margin:12px 0 2px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 19px 13px}
.wzslide input[type=range]{width:100%;accent-color:var(--acc)}
.wzslide-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut)}
.wzslide-l b{color:var(--txt)}
/* --- protections facon Sixt : cartes agrandies, titre en Archivo, barre de
   couverture arrondie pleine largeur — refonte du 22/08/2026 pour sortir du
   look "formulaire" et se rapprocher du standing Sixt (gros titre noir,
   encadré d'avertissement, cartes cliquables nettes). --- */
.wzinfo{background:#f4f5f7;border-radius:13px;padding:14px 16px;font-size:13px;margin:8px 0 14px;line-height:1.55}
.wzinfo a{color:var(--acc2);font-weight:700}
.wzex{margin-top:8px;font-size:12.5px;color:#4b5563;line-height:1.6}
.wzprot{border:1.5px solid var(--line);border-radius:15px;background:#fff;margin-bottom:11px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.wzprot:hover{border-color:#d7dbe2}
.wzprot.on{border-color:var(--acc);background:#fff6f1;box-shadow:0 0 0 1px var(--acc)}
.wzprot-h{display:grid;grid-template-columns:auto 1fr auto auto;gap:13px;align-items:center;padding:17px 19px}
.wzprot-h .r{font-size:18px;color:var(--acc)}
.wzprot-h .t b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:15px;letter-spacing:-.1px}
.wzprot-h .sh{font-size:13px}
.wzprot-h .sh .off{opacity:.22}
.wzprot-h .p{font-family:var(--display,"Archivo",system-ui,sans-serif);font-weight:800;font-size:14.5px;white-space:nowrap}
.wzprot-h .ch{color:#9aa1ae;cursor:pointer;padding:2px 5px}
.wzreco{background:#fdf1c7;color:#8a6d1a;font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 8px;text-transform:uppercase;letter-spacing:.3px}
.wzprot-d{padding:0 17px 16px;border-top:1px dashed var(--line);margin-top:2px;padding-top:13px;font-size:13px}
.wzbar{height:10px;border-radius:999px;background:#f3d9a8;overflow:hidden;display:flex;justify-content:flex-end}
.wzbar-f{height:100%;background:linear-gradient(90deg,#18a35a,#0a8a4a);border-radius:999px}
.wzchecks{margin-top:9px;line-height:1.8;color:#2b313c}
.wzapercu{background:#f4f5f7;border-radius:13px;padding:14px 16px;font-size:13px;margin-top:14px;line-height:1.8}
.wzapercu b{font-family:var(--display,"Archivo",system-ui,sans-serif)}
/* --- options facon Sixt : icone + titre + description + prix, carte
   recommandée mise en valeur (fond teinté, badge) — refonte du 22/08/2026,
   remplace les simples cases à cocher trop discrètes. --- */
.wzopts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.wzopt2{border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:14px 16px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.wzopt2:hover{border-color:#d7dbe2}
.wzopt2.on{border-color:var(--acc);background:#fff8f4;box-shadow:0 0 0 1px var(--acc)}
.wzopt2.large{grid-column:1 / -1;border-color:#f0c94a;background:#fffbef;padding:16px 18px}
.wzopt2.large.on{border-color:var(--acc);background:#fff6ec;box-shadow:0 0 0 1px var(--acc)}
.wzopt2 .h{display:flex;align-items:center;gap:10px}
.wzopt2 .h .icn{font-size:19px;flex:none;width:30px;height:30px;border-radius:9px;background:#f4f5f7;
  display:flex;align-items:center;justify-content:center}
.wzopt2.on .h .icn{background:#ffe9db}
.wzopt2 .h b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:14px;letter-spacing:-.1px}
.wzopt2 .h .sw{margin-left:auto;width:38px;height:22px;border-radius:999px;background:#d7dbe2;position:relative;transition:background .12s;flex:none}
.wzopt2 .h .sw.on{background:var(--acc)}
.wzopt2 .h .sw .kn{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .12s;box-shadow:0 1px 2px rgba(16,24,40,.25)}
.wzopt2 .h .sw.on .kn{left:18px}
.wzopt2 .f{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);font-size:12.5px}
.wzopt2.large .f{border-top-color:#efe0a8}
.wzopt2 .f b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:14px}

/* ===== chips generiques (suivi des envois, documents) ===== */
.chip.chip-ok{background:#e3f6ec;color:#0a7a42}
.chip.chip-warn{background:#fff3d6;color:#92500e}
.chip.chip-bad{background:#fdeaea;color:#b91c1c}
.chip.chip-info{background:#e5efff;color:#1d4ed8}

/* ===== etat des lieux v2 : assistant plein ecran (mobile + desktop) ===== */
#edlz{position:fixed;inset:0;z-index:340;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
#edlz .ezhead{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
#edlz .ezhead b{font-size:15.5px}
#edlz .ezback{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--txt);font-size:15px;cursor:pointer;flex:none}
#edlz .ezsteps{display:flex;gap:4px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;flex:none;scrollbar-width:none}
#edlz .ezstep{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap;flex:none}
#edlz .ezstep .n{width:18px;height:18px;border-radius:50%;background:var(--chip);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px}
#edlz .ezstep.on{background:var(--acc-soft,#fff1e8);color:var(--acc)}
#edlz .ezstep.on .n{background:var(--acc);color:#fff}
#edlz .ezstep.done{color:var(--ok);cursor:pointer}
#edlz .ezstep.done .n{background:#e3f6ec;color:var(--ok)}
#edlz .ezbody{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
#edlz .ezbody>*{max-width:780px;margin-left:auto;margin-right:auto}
#edlz .ezt{margin:2px auto 8px;font-size:16px}
#edlz .ezfoot{display:flex;justify-content:space-between;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);flex:none}
#edlz .ezfoot .btn{min-height:46px;font-size:15px;padding:10px 22px}
.ezgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:6px auto 12px}
.ezgrid.two{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ezgrid.mini{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));margin:6px 0 0}
.ezslot{position:relative;border:1.6px dashed var(--line);border-radius:12px;background:var(--card);min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;overflow:hidden;text-align:center}
.ezslot .cam{font-size:22px;opacity:.55}
.ezslot .lb{font-size:11px;color:var(--mut);padding:0 4px;position:relative;z-index:2}
.ezslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ezslot.ok{border-style:solid;border-color:var(--ok)}
.ezslot.ok .lb{background:rgba(255,255,255,.88);border-radius:6px;padding:1px 6px;color:#1f2937;position:absolute;bottom:4px;left:4px;right:auto;max-width:calc(100% - 8px)}
.ezslot.req{border-color:var(--acc)}
.ezslot.add{border-style:dashed;color:var(--mut)}
.ezslot.mini{min-height:72px}
.ezslot .ezx{position:absolute;top:4px;right:4px;z-index:3;width:22px;height:22px;border-radius:50%;border:none;background:rgba(17,24,39,.72);color:#fff;font-size:11px;cursor:pointer}
.ezslot .rep{position:absolute;top:4px;left:4px;z-index:3;background:#e5efff;color:#1d4ed8;border-radius:6px;font-size:11px;padding:0 5px}
.ezform label{display:block;margin:10px 0;font-size:13px;font-weight:600}
.ezform input[type=number],.ezform input[type=text],#edlz input:not([type=range]):not([type=file]),#edlz select,#edlz textarea{width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--txt);font-size:15px;box-sizing:border-box}
#edlz input[readonly]{background:var(--card2)}
.ezkm{display:flex;align-items:center;gap:8px}
.ezkm span{font-weight:700}
#edlz input[type=range]{width:100%;margin-top:10px;accent-color:var(--acc)}
.ezrow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ezrow2 label{font-size:13px;font-weight:600}
.ezrep{padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin:6px 0;cursor:pointer;background:var(--card)}
.ezrep:hover{border-color:var(--acc)}
.ezdom{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--card)}
.ezdom .h{display:flex;align-items:center;gap:8px}
.ezdom .h .ezx{margin-left:auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--card2);cursor:pointer}
.ezdom.new{border-style:dashed}
.ezdom .rep{background:#e5efff;color:#1d4ed8;border-radius:6px;font-size:11px;padding:0 5px}
.ezblock{background:#fdeaea;color:#b91c1c;border:1px solid #f5c2c2;border-radius:12px;padding:12px 14px;font-size:14px;margin:8px 0}
.ezok{background:#e3f6ec;color:#0a7a42;border:1px solid #bfe8d2;border-radius:12px;padding:12px 14px;font-size:14px;margin:8px 0}
.ezwarn{background:#fff3d6;color:#92500e;border:1px solid #f2ddb0;border-radius:12px;padding:10px 12px;font-size:13px;margin:8px 0}
.ezpay{border:1px solid var(--line);border-radius:12px;padding:4px 14px 12px;margin:10px 0;background:var(--card)}
.ezrowbtn{display:flex;align-items:center;gap:10px;margin:8px 0}
.ezrowbtn input{flex:1}
.ezregs{margin-top:8px;font-size:13px}
.ezregs div{padding:3px 0;border-top:1px dashed var(--line)}
.ezsigs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.ezsig{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);position:relative}
.ezsig b{font-size:12.5px;display:block;margin-bottom:6px}
.ezsig canvas{width:100%;height:150px;border:1.6px dashed var(--line);border-radius:10px;background:#fff;display:block;cursor:crosshair}
.ezsig .sigprev{position:absolute;left:12px;right:12px;top:34px;height:148px;object-fit:contain;pointer-events:none}
.ezsig .btn{margin-top:8px}
@media (max-width:640px){
  #edlz .ezbody{padding:12px}
  .ezgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .ezslot{min-height:92px}
  .ezrow2{grid-template-columns:1fr}
  .ezsigs{grid-template-columns:1fr}
  #edlz .ezfoot .btn{flex:1}
}

/* ===== portail v3 : #wzov/#wzsheet, affichage INLINE dans le flux de la page.
   Historique : c'était une fenêtre plein écran (position:fixed;inset:0) —
   exactement le pattern que ciblent la plupart des bloqueurs de pubs/popups,
   qui la neutralisaient silencieusement (aucune erreur JS, juste rien à
   l'écran). Passage en conteneur normal le 21/08/2026 pour y échapper. ===== */
#wzov{position:relative;z-index:1;background:none;display:block;padding:0;margin-top:18px}
/* Pas de max-height / scroll interne : le bloc grandit avec son contenu et
   c'est la page qui défile, comme n'importe quelle section normale — sinon,
   à contenu court, il reste un vide en bas de la boîte (mal centrée), et à
   contenu long, une petite fenêtre à ascenseur interne au lieu d'une vraie
   page. Retiré le 21/08/2026 suite au retour du client. */
#wzsheet{width:100%;height:auto;max-width:none;background:var(--bg);border-radius:18px;
  box-shadow:0 14px 40px rgba(16,24,40,.16);display:flex;flex-direction:column;overflow:hidden}
#wzsheet .wzhead{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
#wzsheet .wzhead h3{margin:0;font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:17px;font-weight:800;letter-spacing:-.2px}
#wzsheet .wzhead .wzsub{color:var(--mut);font-size:12px;margin-top:1px}
#wzsheet .wzhead #wzHeadTot{margin-left:auto}
#wzsheet .wzhead #wzHeadTot .totbar{position:static;border-bottom:none;padding:0;gap:12px}
#wzsheet .wzhead .close{font-size:20px}
#wzsheet .wzstepsbar{padding:0 20px;background:var(--card);border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none}
#wzsheet .wzstepsbar .wzsteps{margin:9px 0}
#wzsheet .wzbody{padding:18px 20px}
#wzsheet .wzbody>*{max-width:820px;margin-left:auto;margin-right:auto}
#wzsheet .wzbody>.sxgrid,#wzsheet .wzbody>.sx25,#wzsheet .wzbody>.sxbar{max-width:1760px}
#wzsheet .wzfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--line);flex:none}
#wzsheet .wzfoot:empty{display:none}
.wzfootprix{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.wzfootprix b{font-family:var(--display,"Archivo",system-ui,sans-serif);font-size:18px;font-weight:800;color:var(--txt)}
.wzfoot-btns{display:flex;gap:10px;margin-left:auto}
@media (max-width:560px){
  #wzsheet .wzfoot{flex-wrap:wrap}
  .wzfoot-btns{flex:1}
  .wzfoot-btns .btn{flex:1}
}

/* --- calendrier double mois (étape Dates) --- */
.wzcal{display:flex;align-items:flex-start;gap:6px;justify-content:center}
.wzcalnav{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--txt);font-size:16px;cursor:pointer;margin-top:10px}
.wzcalnav:hover{border-color:var(--acc);color:var(--acc)}
.wzcalmonths{display:grid;grid-template-columns:1fr 1fr;gap:22px;flex:1}
.wzcalmonth h5{text-align:center;font-size:13.5px;font-weight:800;margin:2px 0 8px;text-transform:capitalize}
.wzcalwd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.wzcalwd span{text-align:center;font-size:10.5px;color:var(--mut);font-weight:700}
.wzcalgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.wzcd{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:9px;
  font-size:12.5px;cursor:pointer;color:var(--txt);user-select:none}
.wzcd[data-iso]:hover{background:#fff1ea}
.wzcd.off{cursor:default;visibility:hidden}
.wzcd.past{cursor:not-allowed;color:#c7cbd3;visibility:visible}
.wzcd.today{font-weight:800;color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc)}
.wzcd.mid{background:#fff3d6;border-radius:0}
.wzcd.on{background:var(--acc);color:#fff;font-weight:800}
.wzcalconfirm{display:block;width:100%;margin:14px 0 4px}
@media (max-width:820px){
  .wzcalmonths{grid-template-columns:1fr}
  .wzcalnav{margin-top:0}
  .wzcal{flex-wrap:wrap}
}

/* --- swipe entre véhicules d'une même catégorie --- */
/* Cadre en 4/3 + object-fit:contain, choisi après mesure des 16 card.jpg :
     13 fichiers sur 16 sont exactement en 700x525, soit 4/3 -> ils remplissent
       le cadre bord à bord, sans la moindre bande ;
     ford-fiesta (1.57) et renault-kangoo (1.48) prennent une fine bande en
       haut et en bas ;
     peugeot-208 est en PORTRAIT (700x934) et reste donc encadré de noir.
   'contain' plutôt que 'cover' : avec des ratios aussi hétérogènes, 'cover'
   rognait la voiture (c'est ce que faisait la hauteur fixe de 216 px). Ici
   aucune photo n'est amputée ; le fond sombre prolonge simplement la carte. */
.sxphotowrap{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#20242b 0%,#0e1013 78%)}
.sxphotowrap img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .3s ease}
.sxphotowrap>div:first-child{width:100%;height:100%}
.sxnav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  border:none;background:rgba(17,24,39,.55);color:#fff;font-size:15px;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center}
.sxnav:hover{background:rgba(17,24,39,.82)}
.sxnav.prev{left:6px} .sxnav.next{right:6px}

@media (max-width:820px){
  #wzsheet{border-radius:14px}
}

/* --- Réglages pour le site public flexirent.fr : mêmes styles que dans
   FlexiRent OS, juste l'accent recalé sur l'orange corail du site public
   (au lieu de l'orange interne) pour rester cohérent visuellement. --- */
:root{ --acc:#FF5A2A; --acc2:#E04516; }
