/* ============================================================
   Tunnel A — étape 4 « Récapitulatif et coordonnées » — Figma 1160:11569 · 1162:11627
   ============================================================ */
.lv-oc *{box-sizing:border-box;}
.lv-oc h1,.lv-oc h2,.lv-oc h3,.lv-oc p,.lv-oc ol,.lv-oc ul{margin:0;padding:0;font-family:var(--lv-font);letter-spacing:0;}
.lv-oc li{list-style:none;margin:0;}
.lv-oc a{text-decoration:none;}
.lv-oc img{display:block;max-width:none;}
.lv-oc button{font-family:var(--lv-font);box-shadow:none;text-transform:none;letter-spacing:0;}
.lv-oc .lv-fv__steps{padding-top:22px;}

.lv-oc__body{padding-top:36px;padding-bottom:64px;}
.lv-oc__title{font-size:30px;font-weight:700;line-height:1.22;color:var(--lv-ink);}
.lv-oc__lead{font-size:14.5px;line-height:1.5;color:var(--lv-txt);margin-top:8px!important;}
.lv-oc__cols{display:flex;gap:32px;align-items:flex-start;margin-top:28px;}
.lv-oc__main{flex:1;min-width:0;}
.lv-oc__aside{flex:0 0 392px;position:sticky;top:20px;}
.lv-oc__h2{font-size:20px;font-weight:700;color:var(--lv-ink);margin:28px 0 14px!important;}
.lv-oc__main > .lv-oc__h2:first-child{margin-top:0!important;}
.lv-oc__h3{font-size:17px;font-weight:700;color:var(--lv-ink);margin:28px 0 6px!important;}
.lv-oc__sub{font-size:13px;line-height:1.52;color:var(--lv-txt);margin:-6px 0 14px!important;}
.lv-oc__h3 + .lv-oc__sub{margin:0 0 14px!important;color:var(--lv-muted);}

/* votre location */
.lv-oc__car{display:flex;border:1px solid var(--lv-line);border-radius:10px;overflow:hidden;background:#fff;}
.lv-oc__carimg{flex:0 0 280px;min-height:196px;background:var(--lv-warm);}
.lv-oc__carimg img{width:100%;height:100%;object-fit:cover;}
.lv-oc__carinfo{flex:1;min-width:0;padding:20px 22px;}
.lv-oc__carname{font-size:19px;font-weight:700;color:var(--lv-ink);}
.lv-oc__carsub{font-size:13.5px;color:var(--lv-txt);margin-top:4px!important;}
.lv-oc__dates{display:flex;gap:12px;margin-top:14px;}
.lv-oc__date{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;background:var(--lv-warm);border-radius:8px;padding:12px 14px;}
.lv-oc__dl{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--lv-muted);}
.lv-oc__dv{font-size:13.5px;font-weight:600;color:var(--lv-ink);}
.lv-oc__dz{font-size:12px;color:var(--lv-txt);}
.lv-oc__dur{font-size:12.5px;font-weight:500;color:var(--lv-txt);margin-top:12px!important;}

/* tableau de prix */
.lv-oc__table{border:1px solid var(--lv-line);border-radius:10px;overflow:hidden;background:#fff;}
.lv-oc__tr{display:grid;grid-template-columns:1fr 90px 130px;gap:12px;align-items:center;padding:14px 22px;font-size:13.5px;color:var(--lv-ink);}
.lv-oc__tr + .lv-oc__tr{border-top:1px solid var(--lv-line);}
.lv-oc__tr > span:nth-child(2){text-align:right;color:var(--lv-txt);font-size:13px;}
.lv-oc__tr > span:nth-child(3){text-align:right;}
.lv-oc__tr--head{background:var(--lv-warm);}
.lv-oc__tr--head span{font-size:11px!important;font-weight:700;text-transform:uppercase;color:var(--lv-muted)!important;}
.lv-oc__t1{display:block;}
.lv-oc__t2{display:block;font-size:11.5px;color:var(--lv-muted);margin-top:2px;}
.lv-oc__amt{font-weight:600;white-space:nowrap;}
.lv-oc__tr--total{background:var(--lv-warm);font-weight:600;}
.lv-oc__tr--total .lv-oc__amt{font-size:15px;font-weight:700;}
.lv-oc__note{display:flex;gap:14px;background:var(--lv-sand-lt);border-radius:8px;padding:16px;margin-top:14px;}
.lv-oc__notebar{flex:none;width:3px;background:var(--lv-sand);}
.lv-oc__noteh{font-size:13.5px;font-weight:700;color:var(--lv-ink);}
.lv-oc__notep{font-size:12.5px;line-height:1.55;color:var(--lv-txt);margin-top:5px!important;}

/* codes */
.lv-oc__codes{display:flex;gap:20px;margin-top:20px;}
.lv-oc__code{flex:1 1 0;min-width:0;border:1px solid var(--lv-line);border-radius:10px;padding:18px;background:#fff;margin:0;}
.lv-oc__codeh{font-size:14px;font-weight:700;color:var(--lv-ink);margin-bottom:12px!important;}
/* La rangee peut passer a la ligne : le bloc partage sa largeur avec celui du coupon,
   et deux elements non retrecissables faisaient sortir le bouton de son cadre
   (recette du 03/10/2026). Le palier mobile le faisait deja ; il manquait entre les deux. */
.lv-oc__coderow{display:flex;gap:10px;flex-wrap:wrap;}
.lv-in{width:100%;background:#fff!important;border:1px solid var(--lv-line)!important;border-radius:8px!important;padding:13px 16px!important;font-family:var(--lv-font)!important;font-size:13.5px!important;color:var(--lv-ink)!important;box-shadow:none!important;height:auto!important;line-height:normal!important;margin:0!important;}
.lv-in::placeholder{color:var(--lv-muted);}
.lv-in:focus{border-color:var(--lv-green)!important;outline:none;}
.lv-in--pin{flex:1 1 150px;width:auto;min-width:0;}
.lv-in--ta{min-height:88px;resize:vertical;}
.lv-in--sel{appearance:auto;}
.lv-btn2{flex:none;background:var(--lv-warm)!important;border:1px solid var(--lv-line)!important;border-radius:8px!important;padding:13px 18px!important;font-size:12.5px!important;font-weight:600!important;color:var(--lv-ink)!important;cursor:pointer;white-space:nowrap;line-height:normal!important;}
.lv-btn2:hover{border-color:var(--lv-green)!important;}
.vrc-enterpin-response{font-size:13px;margin-top:8px;}
.vrc-enterpin-success{color:var(--lv-green-dk);font-weight:600;}
.vrc-enterpin-error{color:var(--lv-terra);}

/* formulaire conducteur */
.lv-oc__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:1px solid var(--lv-line);border-radius:10px;padding:22px;background:#fff;}
.lv-f{display:flex;flex-direction:column;gap:7px;min-width:0;}
.lv-f--full{grid-column:1 / -1;}
.lv-f__l{font-size:12.5px;font-weight:500;color:var(--lv-ink);}
.lv-f__req{color:var(--lv-terra);font-weight:700;margin-left:4px;}
.lv-f.is-bad .lv-in,.lv-f.is-bad .iti input{border-color:var(--lv-terra)!important;}
.lv-f.is-bad .lv-f__l,.lv-f--cb.is-bad .lv-f__cbt{color:var(--lv-terra);}
.lv-f .iti{width:100%;}
.lv-f .iti input{width:100%;border:1px solid var(--lv-line)!important;border-radius:8px!important;padding-top:13px!important;padding-bottom:13px!important;font-size:13.5px!important;font-family:var(--lv-font)!important;box-shadow:none!important;height:auto!important;}
.lv-f--cb{flex-direction:row;align-items:flex-start;gap:12px;cursor:pointer;position:relative;}
.lv-f--cb input{position:absolute;opacity:0;width:1px;height:1px;}
.lv-f__box{flex:none;width:20px;height:20px;border:1.5px solid var(--lv-line);border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.lv-f--cb input:checked + .lv-f__box{background:var(--lv-green);border-color:var(--lv-green);}
.lv-f--cb input:checked + .lv-f__box::after{content:"✓";color:#fff;font-size:12px;font-weight:700;line-height:1;}
.lv-f--cb input:focus-visible + .lv-f__box{outline:2px solid var(--lv-green);outline-offset:2px;}
.lv-f__cbt{font-size:13px;line-height:1.5;color:var(--lv-txt);}
.lv-f__cbt a{color:var(--lv-green-dk);text-decoration:underline;}
.lv-f__sep{font-size:14px;font-weight:700;color:var(--lv-ink);}

/* moyen de paiement */
.lv-oc__pays{display:flex;flex-direction:column;gap:10px;}
.lv-pay{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--lv-line);border-radius:8px;padding:18px;cursor:pointer;}
.lv-pay.is-on{background:var(--lv-green-lt);border:1.5px solid var(--lv-green);padding:17.5px;}
.lv-pay input{position:absolute;opacity:0;width:1px;height:1px;}
.lv-pay__radio{flex:none;width:20px;height:20px;border-radius:10px;border:2px solid var(--lv-line);background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.lv-pay.is-on .lv-pay__radio{border-color:var(--lv-green);}
.lv-pay.is-on .lv-pay__radio::after{content:"";width:10px;height:10px;border-radius:5px;background:var(--lv-green);}
.lv-pay__t{display:flex;flex-direction:column;gap:6px;min-width:0;}
.lv-pay__name{font-size:15.5px;font-weight:700;color:var(--lv-ink);}
.lv-pay__p{font-size:13.5px;line-height:1.64;color:var(--lv-txt);}
.lv-pay__chips{display:flex;flex-wrap:wrap;gap:7px;}
.lv-pay__chips span{background:#fff;border:1px solid var(--lv-line);border-radius:11px;padding:4px 9px;font-size:11px;font-weight:600;color:var(--lv-txt);}
.lv-pay__s{font-size:11.5px;line-height:1.48;color:var(--lv-muted);}

/* récapitulatif */
.lv-rec{border:1px solid var(--lv-line);border-radius:10px;padding:22px;background:#fff;}
.lv-rec__h{font-size:16px;font-weight:700;color:var(--lv-ink);padding-bottom:12px;border-bottom:1px solid var(--lv-line);}
.lv-rec__car{font-size:14px;font-weight:700;color:var(--lv-ink);margin-top:14px!important;}
.lv-rec__rows{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.lv-rec__rows p{display:flex;gap:10px;align-items:center;font-size:12.5px;}
.lv-rec__rows span{flex:1;min-width:0;color:var(--lv-txt);}
.lv-rec__rows strong{font-weight:600;color:var(--lv-ink);white-space:nowrap;}
.lv-rec__tot span{font-weight:600;color:var(--lv-ink);}
.lv-rec__tot strong{font-weight:700;}
.lv-rec__k{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--lv-muted);margin-top:16px!important;padding-top:14px;border-top:1px solid var(--lv-line);}
.lv-rec__small{font-size:11.5px;line-height:1.5;color:var(--lv-muted);margin-top:8px!important;}
.lv-rec__cta{display:block!important;width:100%!important;margin-top:18px;background:var(--lv-green)!important;color:#fff!important;border:0!important;border-radius:6px!important;padding:16px 20px!important;font-size:14px!important;font-weight:700!important;cursor:pointer;line-height:normal!important;}
.lv-rec__cta:hover{background:var(--lv-green-dk)!important;}
.lv-rec__cta:disabled{opacity:.6;cursor:default;}
.lv-rec__back{display:block;text-align:center;margin-top:10px;border:1px solid var(--lv-line);border-radius:6px;padding:14px 20px;font-size:13px;font-weight:600;color:var(--lv-txt);}
.lv-rec__back:hover{border-color:var(--lv-green);}
.lv-rec__foot{font-size:11.5px;line-height:1.5;color:var(--lv-muted);text-align:center;margin-top:12px!important;}

/* après l'envoi */
.lv-after{background:var(--lv-warm);border-radius:10px;padding:26px;margin-top:40px;}
.lv-after__h{font-size:18px;font-weight:700;color:var(--lv-ink);}
.lv-after__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px!important;}
.lv-after__steps li{background:#fff;border-radius:8px;padding:18px;}
.lv-after__n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:13px;background:var(--lv-green-lt);color:var(--lv-green-dk);font-size:12.5px;font-weight:700;}
.lv-after__t{font-size:14px;font-weight:700;line-height:1.32;color:var(--lv-ink);margin-top:12px!important;}
.lv-after__p{font-size:12.5px;line-height:1.55;color:var(--lv-txt);margin-top:6px!important;}
.lv-oc__alert{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;background:var(--lv-terra);color:#fff;border-radius:8px;padding:12px 18px;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);}
/* jQuery UI datepicker : lisible */
.ui-datepicker{font-family:var(--lv-font)!important;font-size:13px!important;z-index:9999!important;}

@media (max-width:960px){
  .lv-oc__body{padding-top:20px;padding-bottom:40px;}
  .lv-oc__title{font-size:24px;}
  .lv-oc__cols{flex-direction:column;gap:24px;}
  .lv-oc__aside{position:static;flex:none;width:100%;}
  .lv-oc__car{flex-direction:column;}
  .lv-oc__carimg{flex:none;height:170px;min-height:0;}
  .lv-oc__carinfo{padding:16px;}
  .lv-oc__dates{flex-direction:column;gap:8px;}
  .lv-oc__tr{grid-template-columns:1fr 34px 88px;gap:8px;padding:12px 14px;font-size:12.5px;}
  .lv-oc__codes{flex-direction:column;gap:12px;}
  .lv-oc__coderow{flex-wrap:wrap;}
  .lv-in--pin{flex:1 1 100%;width:100%;}
  .lv-oc__form{grid-template-columns:1fr;padding:16px;gap:14px;}
  .lv-after{padding:18px;margin-top:28px;}
  .lv-after__steps{grid-template-columns:1fr;gap:10px;}
}

/* VikRentCar applique display:flex à .vrccustomfields, ce qui annule notre grille : les champs gardent
   alors la largeur de leur contenu (visible surtout en mobile). On rétablit la grille avec la même classe. */
.lv-oc__form.vrccustomfields{display:grid;}
@media (max-width:960px){
  .lv-oc__form.vrccustomfields{grid-template-columns:1fr;}
  .lv-oc__form .lv-f,.lv-oc__form .lv-in,.lv-oc__form .lv-f .iti{width:100%;}
}

/* ---------- Conditions de l'offreur, dans le récapitulatif de commande ---------- */
.lv-cond{background:var(--lv-warm);border-radius:10px;padding:14px 16px;margin:12px 0 18px;}
.lv-cond__t{font-family:var(--lv-font);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--lv-green-dk);line-height:normal;margin:0 0 6px;padding-bottom:0;}
.lv-cond__c p{font-family:var(--lv-font);font-size:13px;line-height:1.55;color:var(--lv-txt);margin:0 0 8px;padding-bottom:0;}
.lv-cond__c p:last-child{margin-bottom:0;}
.lv-cond__c strong{color:var(--lv-ink);}
@media (max-width:767px){ .lv-cond{padding:12px 14px;} }

/* ── Bandeau d'erreur : il s'étirait sur la moitié de l'écran ──
   VikRentCar pose `top:35%` sur `.vrc-alert-container-confirm`, et notre règle posait
   `bottom:24px`. En position:fixed, un élément qui a TOP et BOTTOM sans hauteur s'étire entre
   les deux : 475 px de haut pour une seule ligne de texte. On neutralise `top` et on rend la
   largeur au contenu — VikRentCar imposait aussi `width:30%` et `left:35%`. */
.lv-oc__alert,
.lv-b4 .lv-oc__alert{
  top:auto!important;
  left:50%!important;
  right:auto!important;
  width:auto!important;
  max-width:min(92vw,420px)!important;
  height:auto!important;
  padding:12px 18px!important;
  text-align:center;
}

/* ── Téléphone : l'indicatif doit être HORS de la zone de saisie ──
   Le conteneur du drapeau fait 48 px et se superpose au texte, parce que le `padding-left` de
   l'input retombe à 0 (reset global) : les chiffres s'affichaient sous le drapeau (« 7🇸🇳03918 »).
   On détache visuellement l'indicatif par un filet, et on dégage la zone de saisie. */
.lv-f .iti--allow-dropdown input,
.lv-f .iti input{padding-left:108px!important;}

/* ── DRAPEAU ÉCRASÉ : le conteneur était trop étroit, et c'est le drapeau qui payait ──
   Relevé à la recette du 03/10/2026, étape « Coordonnées » : le drapeau sénégalais faisait
   2,64 px de large au lieu de 20 — on en voyait une tranche verticale, le reste était coupé.

   Ce n'est pas un défaut de l'extension. `.iti__selected-flag` est une boîte flex de 80 px,
   soit 61 px utiles une fois les 8 px de marge intérieure retirés de chaque côté. Ses trois
   enfants en réclamaient 72,4 : drapeau 20 + écart 6 + flèche 6 + écart 6 + marge 6 + « +221 »
   28,4. Onze px de trop, qu'il fallait bien prendre quelque part.

   Flex les prend sur ce qui peut rétrécir. La flèche et l'indicatif ont du CONTENU, donc une
   largeur minimale non nulle : ils ne cèdent rien. Le drapeau est un `<span>` VIDE — son
   minimum vaut zéro — alors il absorbe la totalité du dépassement à lui seul. D'où 20 − 17,4.

   Deux corrections, et pas une seule : rendre le drapeau non rétrécissable NE SUFFIT PAS, le
   dépassement irait alors déborder du filet. On élargit donc aussi la boîte, et on retire la
   marge de `.lv-tel__code` qui faisait double emploi avec l'écart flex. `flex:none` plutôt
   qu'une largeur fixe : chaque pays garde la sienne (le Népal fait 13 px, pas 20). */
.lv-f .iti__flag-container{width:92px;border-right:1px solid var(--lv-line);background:var(--lv-warm,#F7F6F3);border-radius:8px 0 0 8px;}
.lv-f .iti__selected-flag{width:100%;padding:0 8px;gap:6px;}
.lv-f .iti__flag{flex:none;}
.lv-f .iti__selected-dial-code{font-size:13px;color:var(--lv-txt);font-family:var(--lv-font);}
.lv-f.is-bad .iti__flag-container{border-right-color:var(--lv-terra);}

/* La règle `.lv-ls .lv-b4__form .lv-in{padding-left:0}` de lv-pro.css (3 classes) l'emportait
   sur `.lv-f .iti input` (2 classes + 1 élément) : les chiffres repassaient sous le drapeau.
   On remonte la spécificité, sans toucher à l'alignement des autres champs du formulaire. */
.lv-ls .lv-b4__form .iti input.lv-in,
.lv-b4__form .iti input.lv-in,
.lv-f .iti input.lv-in{padding-left:112px!important;}

/* L'indicatif affiché dans le bloc du drapeau, à gauche du filet. */
.lv-f .iti__selected-flag{display:flex;align-items:center;justify-content:flex-start;}
.lv-tel__code{font-size:13px;font-weight:600;color:var(--lv-txt);font-family:var(--lv-font);letter-spacing:.2px;}

/* ---------- Boutons des encarts code PIN et coupon : pleine largeur sur telephone ----------
   Meme famille que la carte du listing : Salient pose width:auto sur tout button[type=submit]
   (specificite 0,1,1), donc une classe seule (0,1,0) ne gagne pas. On passe par le parent.
   La rangee se replie deja au palier mobile ; le bouton y restait a sa largeur de texte,
   seul sur sa ligne et visiblement plus court que le champ (recette du 03/10/2026). */
@media (max-width:782px){
  .lv-oc__code .lv-btn2,
  .lv-oc__coderow .lv-btn2{flex:1 1 100%;width:100%;justify-content:center;}
}

/* ── Encart « Tarif résident appliqué » (maquette 1160:11569) ──
   Posé dans la grille des champs du conducteur, donc il doit occuper toute la largeur : la
   classe `lv-f--full` du gabarit s'en charge, on ne redéfinit pas la colonne ici.
   Chargé par les DEUX tunnels — le particulier (.lv-oc) et le professionnel (.lv-b4) servent
   tous deux cette feuille, et le bloc des champs leur est commun. */
.lv-oc__resok{
  background:var(--lv-green-lt,#EAF6ED);
  border:1px solid rgba(30,158,62,.28);
  border-radius:10px;
  padding:14px 16px;
}
.lv-oc__resok-t{
  margin:0 0 6px!important;
  font-size:13.5px;font-weight:700;line-height:1.35;
  color:var(--lv-green-dk,#15692B);
}
.lv-oc__resok-p{
  margin:0!important;
  font-size:12.5px;line-height:1.6;
  color:var(--lv-txt,#4A4F58);
}
@media (max-width:600px){
  .lv-oc__resok{padding:12px 14px;}
}