/* Configurateur de devis — mise en page façon studio de configuration */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 74px);background:var(--paper)}
.cfg-visual{position:sticky;top:74px;height:calc(100vh - 74px);background:var(--ink);color:#fff;display:flex;flex-direction:column;overflow:hidden}
.cfg-visual .stage{flex:1;display:grid;place-items:center;position:relative;padding:40px}
.cfg-visual .stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 60%,rgba(208,2,27,.22),transparent 70%)}
.cfg-visual .car{width:min(78%,620px);position:relative;filter:drop-shadow(0 40px 40px rgba(0,0,0,.6));transition:opacity .4s var(--ease),transform .6s var(--ease)}
.cfg-visual .car.swap{opacity:0;transform:translateX(30px)}
#models .chip{font-size:13px;padding:8px 12px}
#models-wrap .fld{margin-top:16px}
.note-empty{font-size:13.5px;color:var(--steel);background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;font-weight:600}
.cfg-visual .floor{position:absolute;left:10%;right:10%;bottom:18%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.cfg-visual .tag{position:absolute;top:28px;left:32px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#ff5a6b}
.cfg-visual .tag b{display:block;color:#fff;font-size:22px;letter-spacing:-.02em;text-transform:none;margin-top:6px;font-weight:800}
.cfg-visual .tag small{display:block;color:var(--mist);font-weight:600;letter-spacing:0;text-transform:none;font-size:13px;margin-top:2px}
.cfg-sum{background:var(--ink-2);border-top:1px solid var(--line-dark);padding:22px 32px 26px;max-height:46%;display:flex;flex-direction:column}
.cfg-sum ul{list-style:none;margin:0;padding:0;overflow:auto;display:grid;gap:8px;font-size:14px;flex:1}
.cfg-sum li{display:flex;justify-content:space-between;gap:12px;color:#d6d8dd;animation:msgIn .3s var(--ease)}
.cfg-sum li span:last-child{color:#fff;font-weight:700;white-space:nowrap}
.cfg-sum li.empty{color:var(--mist);font-style:normal}
.cfg-sum .tot{display:flex;justify-content:space-between;align-items:end;margin-top:14px;padding-top:16px;border-top:2px solid rgba(255,255,255,.18)}
.cfg-sum .tot small{display:block;font-size:12px;color:var(--mist);font-weight:600}
.cfg-sum .tot b{font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cfg-sum .tot .disc{font-size:11px;color:var(--mist);max-width:200px;text-align:right;line-height:1.35}
.cfg-panel{padding:0 clamp(24px,5vw,72px) 120px;min-width:0}
.cfg-visual{min-width:0}
.rail{position:sticky;top:74px;z-index:5;background:linear-gradient(var(--paper) 80%,transparent);padding:20px 0 14px;display:flex;gap:6px}
.rail a{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.rail a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail a i{height:5px;border-radius:4px;background:var(--paper-2);display:block;overflow:hidden;position:relative}
.rail a i::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.rail a.done i::after{transform:scaleX(1)}
.rail a.cur{color:var(--ink)}.rail a.cur i::after{transform:scaleX(1);background:var(--ink)}
.step{padding:48px 0 20px;scroll-margin-top:120px}
.step h2{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.step .sub{color:var(--steel);margin-bottom:26px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 16px 14px;text-align:left;transition:all .2s;display:grid;gap:4px}
.tile:hover{border-color:var(--mist)}
.tile.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,21,24,.08)}
.tile b{font-size:15px;letter-spacing:-.01em}
.tile small{font-size:12.5px;color:var(--steel);line-height:1.3}
@media(max-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chips .chip{border-color:var(--line);color:var(--ink)}
.chips .chip:hover{border-color:var(--ink)}
.chips .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fld{display:grid;gap:6px;font-size:13px;font-weight:700}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--ink)}
.fld textarea{min-height:100px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.frow.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:600px){.frow,.frow.three{grid-template-columns:1fr}}
.opt{background:#fff;border:2px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.opt.on{border-color:var(--ink);box-shadow:0 14px 34px -24px rgba(20,21,24,.5)}
.opt .oh{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}
.opt .oh .ti{flex:1;min-width:0}
.opt .oh b{display:block;font-size:16.5px;letter-spacing:-.01em}
.opt .oh span{display:block;font-size:13.5px;color:var(--steel);margin-top:2px}
.opt .oh .pr{font-size:14px;font-weight:800;white-space:nowrap;color:var(--ink)}
.opt .oh .pr small{display:block;font-size:11px;color:var(--mist);font-weight:600;text-align:right}
.sw{width:46px;height:27px;border-radius:999px;background:#d3d5d9;position:relative;flex:none;transition:background .25s;border:0;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.opt.on .sw,.urg.on .sw{background:var(--red)}.opt.on .sw::after,.urg.on .sw::after{transform:translateX(19px)}
.opt .ob{display:none;padding:0 18px 16px;border-top:1px solid var(--line)}
.opt.on .ob{display:block}
.var{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);cursor:pointer;font-size:14.5px}
.var:last-of-type{border-bottom:0}
.var i{width:20px;height:20px;border-radius:50%;border:2px solid var(--mist);flex:none;display:grid;place-items:center;transition:all .2s}
.var i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .2s}
.var.on i{border-color:var(--red)}.var.on i::after{transform:scale(1)}
.var span{flex:1}.var b{white-space:nowrap;font-size:14px}
.opt .note{font-size:12.5px;color:var(--steel);padding-top:10px}
.opt textarea{margin-top:10px}
.when{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.when .tile{padding:14px}
.urg{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:14px;cursor:pointer}
.urg.on{border-color:var(--red)}
.urg b{display:block;font-size:15px}.urg span{font-size:13px;color:var(--steel)}
.send{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.send .btn{width:100%;margin-top:12px}
.send .legal{font-size:12px;color:var(--steel);margin-top:12px;text-align:center}
.finish{padding:48px 0;text-align:center;max-width:520px;margin:0 auto}
.finish .ref{display:inline-block;background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;letter-spacing:.06em;margin:18px 0}
.finish .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.mob-sum{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;background:var(--ink);color:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -10px 30px rgba(0,0,0,.3)}
.mob-sum small{display:block;font-size:11px;color:var(--mist);font-weight:600}
.mob-sum b{font-size:20px;letter-spacing:-.02em}
.mob-sum .btn{padding:11px 18px;font-size:14px}
@media(max-width:960px){
  .cfg{grid-template-columns:minmax(0,1fr)}
  .cfg-visual{position:relative;top:0;height:auto}
  .cfg-visual .stage{padding:110px 24px 40px;min-height:300px}
  .cfg-visual .car{width:min(70%,420px)}
  .cfg-sum{display:none}
  .mob-sum{display:flex}
  .cfg-panel{padding-bottom:140px}
  .rail{top:74px}
  .bot-fab,.mobar{bottom:84px}
}
.cfg-drawer{position:fixed;inset:auto 0 0 0;z-index:57;background:var(--ink-2);color:#fff;border-radius:22px 22px 0 0;padding:22px 20px 100px;transform:translateY(110%);transition:transform .4s var(--ease);max-height:70vh;overflow:auto}
.cfg-drawer.open{transform:none}
.cfg-drawer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14px}
.cfg-drawer li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-dark);padding-bottom:8px}
.cfg-drawer h3{margin-bottom:14px;font-size:18px}

/* Simplification : marques, détails repliés, prestations courantes, assistant mobile */
.sel{font:inherit;font-size:14px;font-weight:700;padding:10px 36px 10px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141518' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;color:var(--ink);appearance:none;-webkit-appearance:none;margin-top:-8px}
.sel.on{background-color:var(--ink);color:#fff;border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.more{margin-top:18px;border:1.5px dashed var(--line);border-radius:14px;padding:0 16px}
.more summary{cursor:pointer;list-style:none;padding:14px 0;font-size:14px;font-weight:700;color:var(--steel);display:flex;justify-content:space-between;gap:12px;align-items:center}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:20px;font-weight:600;color:var(--ink)}
.more[open] summary::after{content:"–"}
.more[open]{padding-bottom:16px;border-style:solid}
.more .frow{margin-top:0}
#opts .more-opt{display:none}
#opts.expanded .more-opt{display:block}
.opts-toggle{width:100%;background:#fff;border:1.5px dashed var(--line);border-radius:14px;padding:13px 16px;font-size:14px;font-weight:700;color:var(--ink);margin-top:2px}
.opts-toggle:hover{border-color:var(--ink)}
.step-nav,.rail-mob,.mob-recap{display:none}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:700;z-index:90;opacity:0;transition:all .3s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:960px){
  .cfg-visual .stage{display:flex;align-items:center;gap:14px;padding:12px 18px;min-height:0}
  .cfg-visual .stage::before,.cfg-visual .floor,.cfg-visual .credit{display:none}
  .cfg-visual .tag{position:static;font-size:10.5px;flex:1;min-width:0}
  .cfg-visual .tag b{font-size:17px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cfg-visual .tag small{font-size:12px}
  .cfg-visual .car{order:-1;width:96px;flex:none;filter:none;margin:0}
  .rail{display:none}
  .rail-mob{display:flex;align-items:center;gap:10px;position:sticky;top:74px;z-index:5;background:var(--paper);padding:14px 0 10px;font-size:12px;font-weight:700;color:var(--steel);letter-spacing:.06em;text-transform:uppercase}
  .rail-mob b{color:var(--ink);font-size:14px;letter-spacing:0;text-transform:none}
  .rail-mob i{flex:1;height:5px;border-radius:4px;background:var(--paper-2);position:relative;overflow:hidden}
  .rail-mob i::after{content:"";position:absolute;inset:0;width:var(--p,25%);background:var(--red);transition:width .4s var(--ease)}
  .step{padding:18px 0 8px;scroll-margin-top:110px}
  .step h2{font-size:24px}
  .step .sub{font-size:14.5px;margin-bottom:16px}
  .step-nav{display:flex;justify-content:flex-start;gap:10px;margin-top:22px}
  .step-nav [data-next]{display:none}
  .step-nav .btn{flex:0 0 auto}
  .step-nav .btn{flex:1}
  .step-nav span{flex:1}
  .tiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .tile{padding:12px 12px 10px}
  .tile small{font-size:11.5px}
  .chips{gap:6px;margin:12px 0}
  .chips .chip{padding:8px 12px;font-size:13px}
  .opt .oh{padding:13px 14px;gap:10px}
  .opt .oh b{font-size:15px}
  .opt .oh .ti span{display:none}
  .opt .oh .pr{font-size:13px}
  .opt .oh .pr small{display:none}
  .var{font-size:13.5px;padding:10px 0}
  .when .tile small{display:none}
  .mob-recap{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;font-size:14px}
  .mob-recap ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
  .mob-recap li{display:flex;justify-content:space-between;gap:10px;color:var(--steel)}
  .mob-recap li span:last-child{color:var(--ink);font-weight:700;white-space:nowrap}
  .mob-recap li.empty{color:var(--steel)}
  .mob-recap .rc-tot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:20px;font-weight:800;letter-spacing:-.02em}
  .mob-recap .rc-tot small{font-size:12px;color:var(--steel);font-weight:600}
  .mob-sum{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .mtot-btn{background:transparent;border:0;color:#fff;text-align:left;padding:4px 0;min-width:0}
  .mtot-btn small{display:block;font-size:11px;color:var(--mist);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .mtot-btn b{font-size:18px;letter-spacing:-.02em;white-space:nowrap}
  .mob-sum .btn{padding:12px 20px;font-size:14.5px;flex:none}
  .send{padding:16px}
  .send .btn-lg{padding:14px 20px;font-size:15px}
}

/* Recherche marque + modèle */
.ac{position:relative;margin-top:6px}
.ac input{font:inherit;font-size:17px;font-weight:600;padding:15px 44px 15px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);width:100%}
.ac input:focus{outline:0;border-color:var(--ink)}
.ac-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:var(--paper-2);color:var(--ink);font-size:20px;line-height:1}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:20;overflow:hidden;max-height:min(360px,50vh);overflow-y:auto}
.ac-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;background:#fff;text-align:left;font:inherit;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.on{background:var(--paper)}
.ac-item .carmini{width:64px;height:36px;flex:none}
.ac-item b{display:block;font-size:15px;letter-spacing:-.01em}
.ac-item small{font-size:12.5px;color:var(--steel);font-weight:600}
.hint{font-size:13px;color:var(--steel);margin-top:8px;font-weight:600}
@media(max-width:960px){.ac input{font-size:16px!important;padding:14px 44px 14px 14px}.ac-item .carmini{width:56px;height:32px}}

/* Véhicule électrique */
.opt.na{opacity:.45;border-style:dashed}
.opt.na .oh{cursor:not-allowed}
.opt.na .oh .pr span{text-decoration:line-through}
.opt.na .oh .pr::after{content:"Non applicable";display:block;font-size:11px;font-weight:700;color:var(--red);text-align:right}
.opt.na .oh .pr small{display:none}
.ev-note{background:#eef6ff;border:1px solid #bcd8f5;color:#173a5e;border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px}
.note.ev-only{display:none}
.is-ev .note.ev-only{display:block;color:#173a5e}

/* Schéma véhicule : pièces qui s'allument */
.cfg-visual .car{width:min(92%,640px)}
.carsvg{width:100%;height:auto;overflow:visible;display:block}
.carsvg .body{stroke:rgba(255,255,255,.28);stroke-width:1.2;transition:opacity .35s}
.carsvg .glass{fill:url(#gg);stroke:rgba(255,255,255,.35);stroke-width:1}
.carsvg .pillar{stroke:#1a1c21;stroke-width:3}
.carsvg .sill{stroke:rgba(255,255,255,.12);stroke-width:2;stroke-linecap:round}
.carsvg .lamp{fill:#ffe9b0}.carsvg .tail{fill:#ff3b4a}
.carsvg .tire{fill:#0b0c0f;stroke:#3a3d45;stroke-width:3;transition:stroke .3s,filter .3s}
.carsvg .rim{fill:#1d1f24;stroke:#8a8f98;stroke-width:3}
.carsvg .spokes line{stroke:#6b7078;stroke-width:2.5}
.carsvg .disc{fill:#2a2d34;stroke:#4a4e58;stroke-width:1.5;opacity:.9;transition:all .3s}
.carsvg .caliper{fill:none;stroke:#4a4e58;stroke-width:4;stroke-linecap:round;transition:stroke .3s}
.carsvg .hub{fill:#8a8f98}
.carsvg .part{fill:rgba(255,77,95,.14);stroke:#ff4d5f;stroke-width:1.6;opacity:0;transition:opacity .35s}
.carsvg.on-vidange .p-engine,.carsvg.on-distribution .p-engine,.carsvg.on-decalaminage .p-engine,.carsvg.on-batterie .p-engine{opacity:1}
.carsvg.on-suspension .p-suspension{opacity:1;fill:none}
.carsvg.on-freins .disc{fill:#ff4d5f;stroke:#ff8a95;filter:drop-shadow(0 0 6px rgba(255,77,95,.9))}
.carsvg.on-freins .caliper{stroke:#ff4d5f}
.carsvg.on-pneus .tire{stroke:#ff4d5f;filter:drop-shadow(0 0 8px rgba(255,77,95,.8))}
.carsvg.on-expertise .body{stroke:#ff4d5f;stroke-width:2;filter:drop-shadow(0 0 10px rgba(255,77,95,.6))}
.carsvg.xray .body{opacity:.62}
.carsvg .hs{opacity:0;transition:opacity .3s}
.carsvg .hs.on{opacity:1}
.carsvg .hs .halo{fill:none;stroke:#ff4d5f;stroke-width:1.5;opacity:.6;transform-origin:center;transform-box:fill-box;animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.carsvg .hs .dot{fill:#141518;stroke:#ff4d5f;stroke-width:2}
.carsvg .hs .glyph{transform:scale(.62)}
.carsvg .p-fill{fill:#ff4d5f}.carsvg .p-ring{fill:none;stroke:#ff4d5f;stroke-width:2.4}.carsvg .p-ink{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.carsvg .p-ink2{fill:none;stroke:#141518;stroke-width:2;stroke-linecap:round}
.carsvg .lbl{fill:#fff;font:700 11px Manrope,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#141518;stroke-width:3;stroke-linejoin:round}
.carsvg.ev .lamp{fill:#7ee0ff}
.carmini{display:block}
@media(max-width:960px){
  .cfg-visual .stage{gap:10px;padding:10px 14px}
  .cfg-visual .car{width:150px}
  .carsvg .lbl{display:none}
  .carsvg .hs .glyph{transform:scale(.9)}
  .carsvg .hs .dot{r:12}
}

.price-for{font-size:14px;color:var(--steel);background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:-8px 0 16px;font-weight:600}
.price-for b{color:var(--ink)}

/* Téléphone : le configurateur suit le reste du site — titres et choix centrés,
   champs de saisie laissés à gauche pour rester confortables à remplir. */
@media(max-width:640px){
  /* Bandeau du haut : voiture centrée au-dessus du titre, comme le reste du site */
  .cfg-visual .stage{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:18px 18px 16px}
  .cfg-visual .car{order:-1;width:150px;flex:none;margin:0 auto}
  .cfg-visual .tag{flex:none;width:100%}
  .cfg-visual .tag b{white-space:normal;overflow:visible;text-overflow:clip}
  .cfg-panel{padding-left:22px;padding-right:22px}
  .step h2,.step .sub{text-align:center}
  .tile{text-align:center;justify-items:center}
  .chips{justify-content:center}
  .note-empty{text-align:center}
  .step-nav{justify-content:center}
  .step-nav .btn{flex:1;max-width:220px}
  .more summary{justify-content:center;gap:8px}
  .ev-note,.disc-note{text-align:center}
  .finish{text-align:center}
  .finish .fld{text-align:left}
}