/* ============================================================
   Fiche véhicule V3 (étape Options) — Figma 1091:8060 · 1098:8205
   ============================================================ */
.lv-fv *{box-sizing:border-box;}
.lv-fv h1,.lv-fv h2,.lv-fv h3,.lv-fv p,.lv-fv ul,.lv-fv ol{margin:0;padding:0;font-family:var(--lv-font);letter-spacing:0;}
.lv-fv li{list-style:none;margin:0;}
.lv-fv a{text-decoration:none;}
.lv-fv img{display:block;max-width:none;}
.lv-fv button{font-family:var(--lv-font);box-shadow:none;text-transform:none;letter-spacing:0;}
.lv-fv input[type=radio],.lv-fv input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}

/* fil d'ariane */
.lv-fv__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;padding-bottom:18px;font-size:12px;line-height:normal;color:var(--lv-muted);}
.lv-fv__crumb a{color:var(--lv-muted);}
.lv-fv__crumb a:hover{color:var(--lv-green);}
.lv-fv__crumb strong{font-weight:600;color:var(--lv-ink);}

/* fil d'étapes (variante fiche : pastilles 22, liaisons pleines) */
.lv-fv__steps{padding-top:22px;}
.lv-st{display:flex;align-items:center;}
.lv-st__s{display:flex;align-items:center;gap:9px;flex:none;}
.lv-st__dot{width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;background:#fff;border:1px solid var(--lv-line);color:var(--lv-muted);}
.lv-st__lbl{font-size:13px;font-weight:500;color:var(--lv-muted);white-space:nowrap;}
.lv-st__s--done .lv-st__dot{background:var(--lv-green);border-color:var(--lv-green);color:#fff;}
.lv-st__s--done .lv-st__lbl{color:var(--lv-ink);}
.lv-st__s--cur .lv-st__dot{background:var(--lv-ink);border-color:var(--lv-ink);color:#fff;}
.lv-st__s--cur .lv-st__lbl{color:var(--lv-ink);font-weight:700;}
.lv-st__link{flex:none;width:70px;height:2px;display:flex;justify-content:center;}
.lv-st__link::before{content:"";width:44px;height:2px;background:var(--lv-line);}
.lv-st__link.is-done::before{background:var(--lv-green);}
.lv-fv__mention{margin-top:10px!important;padding-bottom:22px;border-bottom:1px solid var(--lv-line);font-size:12.5px;line-height:1.45;color:var(--lv-muted);}

/* galerie + titre */
.lv-fv__head{padding-top:10px;padding-bottom:30px;}
.lv-fv__gal{display:flex;gap:10px;}
.lv-fv__main{flex:0 0 790px;height:420px;border-radius:14px;overflow:hidden;background:var(--lv-warm);}
.lv-fv__gal--one .lv-fv__main{flex:1 1 auto;}
.lv-fv__main img,.lv-fv__thumb img{width:100%;height:100%;object-fit:cover;}
.lv-fv__gal--one .lv-fv__main img{object-fit:contain;}
.lv-fv__thumbs{flex:1;display:flex;flex-direction:column;gap:10px;}
.lv-fv__thumb{display:block;height:133px;border-radius:12px;overflow:hidden;background:var(--lv-warm);}
.lv-fv__photonote{margin-top:10px!important;font-size:12px;color:var(--lv-muted);}
.lv-fv__puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px!important;}
.lv-puce{display:inline-block;background:var(--lv-warm);color:var(--lv-txt);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;line-height:normal;white-space:nowrap;vertical-align:middle;}
.lv-puce--green{background:var(--lv-green-lt);color:var(--lv-green-dk);}
.lv-puce--sand{background:var(--lv-sand-lt);color:var(--lv-terra);}
.lv-fv__title{font-size:38px;font-weight:700;line-height:1.18;color:var(--lv-ink);margin-top:12px!important;}
.lv-fv__sub{font-size:15px;line-height:1.5;color:var(--lv-txt);margin-top:10px!important;}

/* rappel */
.lv-fv__recall{padding-bottom:36px;}
.lv-fv__rcard{display:flex;align-items:center;border:1px solid var(--lv-line);border-radius:12px;}
.lv-fv__rcol{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px 24px;}
.lv-fv__rl{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--lv-muted);line-height:normal;}
.lv-fv__rz{font-size:15px;font-weight:600;color:var(--lv-ink);margin-top:8px;line-height:normal;}
.lv-fv__rd{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:14px;line-height:normal;}
.lv-fv__rd span{font-weight:500;color:var(--lv-txt);}
.lv-fv__rd i{width:1px;height:14px;background:var(--lv-line);}
.lv-fv__rd strong{font-weight:600;color:var(--lv-ink);}
.lv-fv__rsep{width:1px;height:64px;background:var(--lv-line);flex:none;}
.lv-fv__ract{flex:none;padding:18px 24px;}
.lv-fv__modify{display:inline-block;border:1px solid var(--lv-line);border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--lv-ink);}
.lv-fv__modify:hover{border-color:var(--lv-green);}

/* choix du véhicule (bloc exemplaire) */
.lv-fv__choice{padding-bottom:40px;}
.lv-fv__h2{font-size:26px;font-weight:700;color:var(--lv-ink);line-height:normal;}
.lv-ex{position:relative;display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--lv-line);border-radius:12px;padding:18px 20px;margin-top:20px;cursor:pointer;}
.lv-ex + .lv-ex{margin-top:12px;}
.lv-ex.is-on{background:var(--lv-green-lt);border:2px solid var(--lv-green);padding:17px 19px;}
.lv-ex__sel{flex:none;width:22px;height:22px;border-radius:999px;border:1.6px solid var(--lv-line);background:#fff;position:relative;}
.lv-ex.is-on .lv-ex__sel{border-color:var(--lv-green);}
.lv-ex.is-on .lv-ex__sel::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--lv-green);}
.lv-ex__ph{flex:none;width:150px;height:96px;border-radius:9px;overflow:hidden;background:var(--lv-warm);}
.lv-ex__ph img{width:100%;height:100%;object-fit:cover;}
.lv-ex__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.lv-ex__name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px;font-weight:700;color:var(--lv-ink);line-height:normal;}
.lv-ex__spec{font-size:13px;color:var(--lv-txt);line-height:normal;}
.lv-ex__meta{font-size:12.5px;font-weight:500;color:var(--lv-txt);line-height:normal;margin-top:2px;}
.lv-ex__price{flex:0 0 250px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.lv-ex__amt{font-size:28px;font-weight:700;color:var(--lv-ink);line-height:normal;white-space:nowrap;}
.lv-ex__per{font-size:12.5px;font-weight:600;color:var(--lv-txt);line-height:normal;}
.lv-ex__tot{font-size:11.5px;line-height:1.45;color:var(--lv-muted);margin-top:8px;}
.lv-fv__small{margin-top:16px!important;font-size:12px;color:var(--lv-muted);}

/* options */
.lv-fv__opts{background:var(--lv-warm);padding:44px 0;}
.lv-opts{display:grid;grid-template-columns:repeat(2,579px);gap:14px;margin-top:20px;}
.lv-opt{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--lv-line);border-radius:12px;padding:16px 18px;cursor:pointer;}
.lv-opt.is-on{border:2px solid var(--lv-green);padding:15px 17px;}
.lv-opt.is-forced{cursor:default;}
.lv-opt__case{flex:none;width:22px;height:22px;border-radius:6px;border:1.6px solid var(--lv-line);background:#fff;display:flex;align-items:center;justify-content:center;}
.lv-opt.is-on .lv-opt__case{background:var(--lv-green);border-color:var(--lv-green);}
.lv-opt.is-on .lv-opt__case::after{content:"✓";color:#fff;font-size:12px;font-weight:700;line-height:1;}
.lv-opt__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.lv-opt__name{font-size:15px;font-weight:600;color:var(--lv-ink);line-height:normal;}
.lv-opt__desc{font-size:12px;line-height:1.45;color:var(--lv-muted);}
.lv-opt__price{flex:0 0 116px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.lv-opt__amt{font-size:15px;font-weight:700;color:var(--lv-ink);line-height:normal;white-space:nowrap;}
.lv-opt__unit{font-size:10px;color:var(--lv-muted);line-height:normal;margin-top:2px;}

/* votre total */
.lv-total{margin-top:24px;background:#fff;border:1.5px solid var(--lv-green);border-radius:12px;padding:26px;}
.lv-total__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;}
.lv-total__h{font-size:20px;font-weight:700;color:var(--lv-ink);}
.lv-total__hint{font-size:12.5px;color:var(--lv-muted);}
.lv-total__lines{display:flex;flex-direction:column;gap:12px;}
.lv-total__line{display:flex;align-items:center;gap:12px;}
.lv-total__line > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.lv-total__l1{font-size:14px;font-weight:500;color:var(--lv-ink);}
.lv-total__l2{font-size:12px;color:var(--lv-muted);}
.lv-total__amt{font-size:14px;font-weight:600;color:var(--lv-ink);white-space:nowrap;}
.lv-total__sep{height:1px;background:var(--lv-line);margin:12px 0 14px;}
.lv-total__sl1{font-size:17px;font-weight:700;color:var(--lv-ink);}
.lv-total__sum{font-size:26px;font-weight:700;color:var(--lv-green-dk);white-space:nowrap;}
.lv-total__res{margin-top:14px;background:var(--lv-green-lt);border-radius:10px;padding:16px 18px;}
.lv-total__resh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--lv-green-dk);}
.lv-total__resh img{width:20px;height:14px;}
.lv-total__resp{font-size:11.5px;line-height:1.5;color:var(--lv-txt);margin-top:4px!important;max-width:560px;}
.lv-total__resl{display:flex;gap:9px;margin-top:6px!important;font-size:13.5px;color:var(--lv-muted);}
.lv-total__resl a{font-weight:600;color:var(--lv-green-dk);}

/* ce qu'il faut savoir */
.lv-fv__know{padding-top:44px;padding-bottom:44px;}
.lv-fv__lead{font-size:14px;line-height:1.55;color:var(--lv-txt);margin-top:8px!important;}
.lv-know{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;}
.lv-know__b{background:#fff;border:1px solid var(--lv-line);border-radius:12px;padding:22px 24px;}
.lv-know__h{font-size:16px;font-weight:700;color:var(--lv-ink);margin-bottom:12px!important;}
.lv-know__b ul{display:flex;flex-direction:column;gap:9px;}
.lv-know__b li{position:relative;padding-left:15px;font-size:13px;line-height:1.55;color:var(--lv-txt);}
.lv-know__b li::before{content:"";position:absolute;left:0;top:7.5px;width:5px;height:5px;border-radius:50%;background:var(--lv-green);}
.lv-fv__discl{margin-top:20px;font-size:12px;color:var(--lv-muted);}

/* barre de prix collante */
.lv-fv__bar{position:sticky;bottom:0;z-index:80;background:var(--lv-ink);padding:24px 0 22px;}
.lv-bar{display:flex;align-items:center;gap:40px;}
.lv-bar__d{flex:1;min-width:0;}
.lv-bar__h{font-size:20px;font-weight:700;color:#fff;}
.lv-bar__p{font-size:13px;line-height:1.5;color:#B9BDC6;margin-top:7px!important;}
.lv-bar__a{flex:0 0 246px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.lv-bar__sum{font-size:30px;font-weight:700;color:#fff;line-height:normal;white-space:nowrap;}
.lv-bar__s{font-size:12px;color:#B9BDC6;}
.lv-bar__btn{margin-top:12px;width:100%;background:var(--lv-green)!important;color:#fff!important;border:0!important;border-radius:10px!important;padding:16px 30px!important;font-size:16px!important;font-weight:600!important;line-height:normal!important;cursor:pointer;}
.lv-bar__btn:hover{background:var(--lv-green-dk)!important;}
.lv-bar__note{margin-top:10px!important;font-size:12.5px;line-height:1.5;color:#B9BDC6;}

/* ============================ MOBILE ============================ */
@media (max-width:960px){
  .lv-fv__crumb{padding-top:12px;padding-bottom:10px;font-size:11px;}
  .lv-fv__crumb > a:nth-of-type(2),.lv-fv__crumb > a:nth-of-type(2) + span{display:none;}
  .lv-fv__steps{padding-top:4px;overflow-x:auto;scrollbar-width:none;}
  .lv-fv__steps::-webkit-scrollbar{display:none;}
  /* La mention est dans le conteneur qui défile horizontalement (le fil d'étapes) : on l'y ancre
     pour qu'elle reste lisible quand on fait défiler les étapes. */
  .lv-fv__steps .lv-fv__mention{position:sticky;left:0;max-width:calc(100vw - 40px);}
  .lv-st__link{width:24px;}
  .lv-st__link::before{width:14px;}
  .lv-st__s{gap:5px;}
  .lv-st__lbl{font-size:11.5px;}
  .lv-fv__mention{font-size:11px;padding-bottom:12px;border-bottom:0;}
  .lv-fv__head{padding-left:0;padding-right:0;padding-top:0;padding-bottom:20px;}
  .lv-fv__gal{display:block;}
  .lv-fv__main{height:220px;border-radius:0;}
  .lv-fv__thumbs{display:none;}
  .lv-fv .lv-fv__photonote,.lv-fv .lv-fv__puces,.lv-fv .lv-fv__title,.lv-fv .lv-fv__sub{padding-left:20px;padding-right:20px;}
  .lv-fv__photonote{font-size:10.5px;}
  .lv-fv__puces{margin-top:12px!important;}
  .lv-fv__title{font-size:27px;}
  .lv-fv__sub{font-size:12.5px;}
  .lv-fv__recall{padding-bottom:28px;}
  .lv-fv__rcard{flex-direction:column;align-items:stretch;}
  .lv-fv__rcol{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 16px 0;}
  .lv-fv__rl{flex:0 0 100%;}
  .lv-fv__rz{font-size:13px;margin:0;}
  .lv-fv__rd{margin:0;font-size:13px;}
  .lv-fv__rsep{display:none;}
  .lv-fv__ract{padding:14px 16px 16px;}
  .lv-fv__modify{display:block;text-align:center;}
  .lv-fv__h2{font-size:22px;}
  .lv-ex{flex-wrap:wrap;gap:12px;padding:14px;}
  .lv-ex.is-on{padding:13px;}
  .lv-ex__sel{position:absolute;top:16px;left:14px;}
  .lv-ex__ph{width:100%;height:150px;order:2;}
  .lv-ex__id{order:1;flex:0 0 100%;padding-left:32px;}
  .lv-ex__price{order:3;flex:0 0 100%;align-items:flex-start;text-align:left;}
  .lv-ex__amt{font-size:26px;}
  .lv-fv__opts{padding:32px 0;}
  .lv-opts{grid-template-columns:1fr;gap:10px;}
  .lv-opt__name{font-size:14px;}
  .lv-opt__price{flex:0 0 auto;}
  .lv-total{padding:18px;}
  .lv-total__head{flex-direction:column;gap:2px;}
  .lv-total__h{font-size:18px;}
  .lv-total__sum{font-size:22px;}
  .lv-know{grid-template-columns:1fr;gap:12px;}
  .lv-know__b{padding:18px;}
  .lv-fv__bar{padding:12px 0 calc(12px + env(safe-area-inset-bottom));}
  .lv-bar{gap:0;}
  .lv-bar__d{display:none;}
  .lv-bar__a{flex:1;display:grid;grid-template-columns:1fr auto;grid-template-areas:"sum btn" "s btn";align-items:center;text-align:left;column-gap:12px;}
  .lv-bar__sum{grid-area:sum;font-size:22px;}
  .lv-bar__s{grid-area:s;font-size:10.5px;line-height:1.3;}
  .lv-bar__btn{grid-area:btn;width:auto;margin:0;padding:13px 18px!important;font-size:14px!important;border-radius:8px!important;white-space:nowrap;}
  .lv-bar__note{display:none;}
}

/* — Pastille de consentement et barre d'action du tunnel —
   La barre collante `.lv-fv__bar` fait 78 px en mobile ; la pastille tarteaucitron, posée
   a 14 px du bas avec un z-index maximal, se posait dessus et masquait la fin du libelle du
   bouton (« Demander ce vehic▒le », « Filtrer et tri▒r », « Appliqu▒r »). Meme correctif que
   sur la fiche (lv-cd.css) et sur l'article (lv-article.css).
   Le `:not(.lv-cd-bar)` evite d'ecraser la valeur propre a la fiche, qui a sa propre barre
   et sa propre hauteur — les deux pages portent la classe `lv-tunnel`. */
@media (max-width:960px){
  body.lv-tunnel:not(.lv-cd-bar) #tarteaucitronIcon.tarteaucitronIconBottomRight{bottom:92px!important;}
}

/* ── Fil d'étapes : montrer qu'il se fait glisser ──
   Les cinq étapes ne tiennent pas en 335 px. La bande glisse déjà (overflow:auto) mais rien
   ne le DIT : un fondu aux deux bords annonce qu'il y a du contenu de chaque côté, et c'est
   ce qui transforme « c'est coupé » en « ça se fait glisser ».
   `mask-image` ne dégrade rien là où il n'est pas compris : la bande reste simplement nette. */
/* ── Étapes faites : la pastille suffit sur téléphone ──
   Cinq libellés font 643 px pour ~360 visibles. On calait l'étape courante au bord, mais la
   bande est BRIDÉE par sa propre fin : passé une certaine largeur d'écran elle ne peut plus
   défiler assez loin, et un bout du libellé précédent reste en vue — « …le » pour « Choix du
   véhicule ». Jouer sur le défilement ne peut pas régler ça, puisque c'est le CONTENU qui est
   trop long. On le raccourcit donc : une étape FAITE garde son ✓, pas son libellé. Plus aucun
   mot avant l'étape courante, à n'importe quelle largeur. Les libellés reviennent dès qu'il y
   a la place. */
@media (max-width:767px){
  .lv-st__s--done .lv-st__lbl,.lv-ps__s--done .lv-ps__lbl{display:none!important;}
}

@media (max-width:767px){
  .lv-fv__steps,.lv-ls__steps{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  .lv-fv__steps::-webkit-scrollbar,.lv-ls__steps::-webkit-scrollbar{display:none;}
}
