/* ADR Motors, nouvelle accueil simple. Clair : blanc, noir, gris, pilules noires, grandes photos arrondies.
   La recherche sur mesure d'abord. Animations en transform et opacity seulement (fluides). Jamais de fond bleu. */
:root{
  --bg:#fff;--grey:#f5f5f7;--grey-2:#e8e8ed;--ink:#1d1d1f;--ink-2:#424245;--muted:#6e6e73;--faint:#a1a1a6;
  --line:rgba(13,14,16,.09);--line-2:rgba(13,14,16,.16);
  --marine:#0B1638;--accent:#1F4BFF;--wa:#25D366;
  --r:28px;--r-s:18px;--maxw:1320px;--hd:76px;
  --ease:cubic-bezier(.22,1,.36,1);--snap:cubic-bezier(.76,0,.24,1);
  --h:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 10px);scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}
::selection{background:var(--ink);color:#fff}

/* ---------- Typo ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h2{margin:0;font-family:var(--h);font-weight:600;font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.04;letter-spacing:-.045em}
.blue{color:var(--faint)}
.lead{color:var(--muted);font-size:1.05rem;margin:18px 0 0;max-width:460px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font-weight:600;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-black{background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px rgba(13,14,16,.7)}
.btn-black:hover{background:#26282d;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-text{background:transparent;color:var(--ink);padding:0 10px}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn.wide{width:100%}
.btn-wa{background:var(--wa);color:#fff}

/* ---------- En-tête ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);transition:background .3s,box-shadow .3s,transform .5s var(--ease)}
.hd.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 var(--line)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:36px}
.hd-logo img{height:34px;width:auto}
.hd-nav{display:flex;gap:6px;margin-right:auto}
.hd-nav a{padding:9px 14px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.hd-nav a:hover,.hd-nav a.on{background:var(--grey);color:var(--ink)}
.hd-r{display:flex;align-items:center;gap:10px}
.hd-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--ink);transition:background .2s,color .2s}
.hd-ico svg{width:19px;height:19px}
.hd-ico:hover{background:var(--wa);color:#fff}
.hd-cta{height:44px;padding:0 20px;font-size:.9rem}
.nav-lang{position:relative}
.nav-lang-btn{height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;border-radius:999px;border:0;background:var(--grey);cursor:pointer;font-weight:600;font-size:.82rem}
.nav-lang-btn svg{width:16px;height:16px}
.nav-lang-menu{display:none!important;position:absolute;right:0;top:52px;flex-direction:column;background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:6px!important;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.nav-lang.open .nav-lang-menu{display:flex!important}
.nav-lang-menu button{opacity:1!important;gap:8px;padding:9px 12px!important;border-radius:12px!important;font-size:.85rem;font-weight:500;color:var(--ink)}
.nav-lang-menu button:hover{background:var(--grey)!important}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.menu-open .burger i:first-child{top:21px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:21px;transform:rotate(-45deg)}
.mnav{display:none}

/* ---------- 1. Héros ---------- */
.hero{padding:calc(var(--hd) + 18px) 0 36px}
.hero-t{margin:0;font-family:var(--h);font-weight:600;font-size:clamp(2.7rem,5.4vw,5rem);line-height:1;letter-spacing:-.055em}
.hero-p{margin:26px 0 0;max-width:430px;color:var(--ink-2);font-size:1.06rem}
.proof{display:flex;align-items:center;gap:14px;margin-top:56px}
.proof-ava{display:flex}
.proof-ava img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-12px;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.proof-ava img:first-child{margin-left:0}
.proof-t{display:flex;flex-direction:column;line-height:1.3}
.proof-t b{font-size:.92rem;font-weight:600}
.proof-t small{color:var(--muted);font-size:.8rem}
  clip-path:inset(0 0 0 0 round var(--r));animation:photoIn 1.4s var(--snap) both}
  transform:translate3d(0,calc(var(--hp,0) * 50px),0) scale(1.06);animation:photoZoom 2.4s var(--ease) both;will-change:transform}
@keyframes up{from{opacity:0;transform:translateY(24px)}}

/* ---------- Sections ---------- */
.sec{padding:110px 0}
.sec.grey{background:var(--grey)}
.sec-head{margin-bottom:44px}
.sec-head.row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}

/* ---------- 3. Stock ---------- */
.tabs{display:flex;gap:6px;background:#fff;border-radius:999px;padding:5px}
.tab{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-weight:500;font-size:.9rem;color:var(--ink-2);transition:background .25s,color .25s}
.tab b{font-size:.74rem;font-weight:600;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:var(--grey);color:var(--ink)}
.tab.on{background:var(--ink);color:#fff}
.tab.on b{background:rgba(255,255,255,.16);color:#fff}
.tab-note{margin:-24px 0 30px;color:var(--muted);font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.skel{height:420px;border-radius:var(--r-s);background:linear-gradient(100deg,#fff 30%,#f5f5f7 50%,#fff 70%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.stock-more{display:flex;justify-content:center;margin-top:44px}

.card{position:relative;background:#fff;border-radius:var(--r-s);padding:10px;cursor:pointer;transition:transform .45s var(--ease),box-shadow .45s var(--ease);transform-style:preserve-3d}
.card:hover{box-shadow:0 30px 60px -36px rgba(13,14,16,.45)}
.card.enter{opacity:0;transform:translateY(26px)}
.card-media{position:relative}
.card-media>img,.card-ph{width:100%;aspect-ratio:16/10.5;object-fit:cover;border-radius:12px;background:var(--grey)}
.card-ph{display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted);font-size:.8rem}
.card-ph img{width:64px;opacity:.25;filter:invert(1)}
.card:hover .card-media>img{transform:scale(1.03)}
.card-media>img{transition:transform .8s var(--ease)}
.card-media{overflow:hidden;border-radius:12px}
.badge,.video-badge{position:absolute;z-index:2;top:10px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:.72rem;font-weight:600;background:#fff;color:var(--ink)}
.badge{left:10px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fb35a}
.badge.reserve::before{background:#8b6cff}.badge.commande::before{background:var(--accent)}.badge.vendu::before{background:var(--faint)}
.video-badge{right:10px}
.video-badge svg{width:12px;height:12px}
.card-title-over{padding:16px 8px 0}
.card-marque{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card-title{font-family:var(--h);font-weight:600;font-size:1.25rem;letter-spacing:-.03em;line-height:1.2}
.card-body{padding:4px 8px 6px}
.card-version{font-size:.84rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-specs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.card-specs span{font-size:.76rem;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--grey);color:var(--ink-2)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.price{font-family:var(--h);font-weight:600;font-size:1.2rem;letter-spacing:-.03em;display:flex;flex-direction:column;line-height:1.2}
.price.soft{font-size:1rem}
.price small{display:flex;align-items:center;gap:6px;font:500 .74rem 'Inter',sans-serif;color:var(--muted);letter-spacing:0;margin-top:3px}
.price small img,.price small svg{width:18px;height:12px;flex:none;border-radius:2px}
.card-arrow{width:42px;height:42px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .35s var(--ease)}
.card-arrow svg{width:18px;height:18px}
.card:hover .card-arrow{transform:rotate(-45deg)}
.card-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;height:40px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--grey);transition:background .2s,color .2s}
.card-cta svg{width:15px;height:15px;color:var(--wa)}
.card-cta:hover{background:var(--wa);color:#fff}
.card-cta:hover svg{color:#fff}
.grid.n1{grid-template-columns:minmax(0,860px)}
.grid.n1 .card{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.grid.n1 .card-media>img,.grid.n1 .card-ph{aspect-ratio:auto;height:100%;min-height:300px}
.grid.n1 .card-media{display:flex;flex-direction:column}
.grid.n1 .card-title-over{position:absolute;left:10px;bottom:10px;padding:12px 16px;background:#fff;border-radius:12px}
.grid.n1 .card-body{display:flex;flex-direction:column;justify-content:flex-end;padding:16px 12px 8px}
.grid.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}

/* ---------- 5. Configurateur ---------- */
.form-card{background:#fff;border-radius:var(--r);padding:34px;box-shadow:0 40px 80px -60px rgba(13,14,16,.5)}
.p-top{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--muted)}
.p-label{color:var(--ink)}
.p-bar{height:4px;border-radius:4px;background:var(--grey);margin:12px 0 18px;overflow:hidden}
.p-bar i{display:block;height:100%;width:25%;border-radius:4px;background:var(--ink);transition:width .6s var(--ease)}
.p-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.p-steps li{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:12px;background:var(--grey);font-size:.78rem;font-weight:500;color:var(--muted);transition:background .3s,color .3s}
.p-steps b{font-size:.7rem;font-weight:600}
.p-steps li.on{background:var(--ink);color:#fff}
.p-steps li.done{color:var(--ink)}
.f-step{border:0;margin:0;padding:0;min-width:0}
.f-step.leave{opacity:0;transform:translateX(-24px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.f-step.enter{opacity:0;transform:translateX(30px)}
.back .f-step.enter{transform:translateX(-30px)}
.back .f-step.leave{transform:translateX(24px)}
.f-step.enter-active{opacity:1;transform:none;transition:opacity .34s var(--ease),transform .38s var(--ease)}
.f-title{font-family:var(--h);font-weight:600;font-size:1.35rem;letter-spacing:-.03em;margin-bottom:18px}
.field{margin-bottom:20px}
.field>label{display:block;font-size:.84rem;font-weight:600;margin-bottom:8px}
.field input:not([type=radio]):not([type=hidden]),.field textarea{width:100%;height:52px;border-radius:14px;border:1.5px solid transparent;background:var(--grey);padding:0 16px;font:500 1rem 'Inter',sans-serif;color:var(--ink);outline:0;transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea{height:96px;padding:14px 16px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:var(--ink);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.in-eur{position:relative}
.in-eur::after{content:"€";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.qchip{height:38px;padding:0 14px;border-radius:999px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font-size:.84rem;font-weight:500;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.qchip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.qchip.on{background:var(--ink);color:#fff;box-shadow:none}
.qchip:active{transform:scale(.97)}
.tiles .qchip{flex:1 1 0;height:46px;border-radius:14px}
.f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.h-opt{cursor:pointer}
.h-opt input{position:absolute;opacity:0;pointer-events:none}
.h-opt span{display:flex;align-items:center;height:46px;padding:0 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:.88rem;font-weight:500;transition:background .2s,color .2s}
.h-opt input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.f-err-msg{display:none;color:#d23b3b;font-size:.78rem;margin-top:7px;line-height:1.4}
.field.err .f-err-msg,.consent-wrap.err .f-err-msg{display:block}
.field.err input,.field.err textarea{border-color:#e05555}
.field.err .qchip,.field.err .h-opt span{box-shadow:inset 0 0 0 1px #e05555}
.field.cue input{animation:cue 1.1s var(--ease) 3}
@keyframes cue{50%{box-shadow:0 0 0 6px rgba(13,14,16,.12)}}
.consent-txt{font-size:.8rem;color:var(--muted);margin:2px 0 8px}
.consent-txt a{text-decoration:underline}
.f-proof{font-size:.8rem;color:var(--ink-2);margin:0 0 8px}
.f-wa{display:inline-block;font-size:.84rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.f-error{display:none;margin:4px 0 0;padding:12px 14px;border-radius:12px;background:#fdeeee;color:#b42f2f;font-size:.86rem}
.f-error.show{display:block}
.f-nav{display:flex;align-items:center;gap:10px;margin-top:24px}
.f-nav>span{flex:1}
.f-back,.f-skip{border:0;background:transparent;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--ink-2);padding:10px 8px}
.f-skip{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
#fNext{background:var(--ink);color:#fff;min-width:160px}
.f-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--muted);font-size:.8rem}
.f-note .lock{width:14px;height:14px;flex:none}
.f-done{display:none;text-align:center;padding:30px 0}
.f-done.show{display:block;animation:up .6s var(--ease)}
.f-done .ico{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.f-done .ico svg{width:28px;height:28px;stroke:#fff}
.f-done h3{font-family:var(--h);font-weight:600;font-size:1.6rem;letter-spacing:-.03em;margin:0 0 10px}
.f-done p{color:var(--ink-2);max-width:420px;margin:0 auto 22px}
.f-done .btn-wa svg{width:20px;height:20px}
.f-done .f-note{justify-content:center}

/* ---------- 6. Avis ---------- */
.rev-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.rev-card{background:var(--grey);border-radius:var(--r);padding:30px;margin:0}
.av-who{display:flex;align-items:center;gap:12px}
.av-who b{display:block;font-weight:600}
.av-who small{color:var(--muted);font-size:.8rem}
.av-ava{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.86rem}
img.av-ava{flex:none;object-fit:cover;background:var(--grey-2)}
.av-q{margin:22px 0 6px;font-family:var(--h);font-weight:500;font-size:1.35rem;letter-spacing:-.025em;line-height:1.3}
.av-src{margin:0 0 18px;color:var(--muted);font-size:.8rem}
.vc-list{display:flex;flex-direction:column;gap:8px}
.vc-play{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px 0 8px;border:0;border-radius:999px;background:#fff;cursor:pointer;width:100%}
.vc-ic{width:38px;height:38px;flex:none;border-radius:50%;background:var(--ink);position:relative}
.vc-ic::before{content:"";position:absolute;left:15px;top:12px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.playing .vc-ic::before{left:13px;top:12px;width:4px;height:14px;border:0;background:#fff;box-shadow:8px 0 0 #fff}
.vc-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px}
.vc-wave i{flex:1;height:var(--h);min-height:3px;border-radius:2px;background:#d4d6da;transition:background .2s}
.vc-wave i.on{background:var(--ink)}
.vc-time{font-size:.78rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.arrow-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;font-size:.88rem}
.arrow-link svg{width:16px;height:16px}
.av-quote{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.av-mark{font-family:Georgia,serif;font-size:5rem;line-height:.6;color:var(--faint)}
.av-quote blockquote{margin:0;font-family:var(--h);font-weight:500;font-size:1.7rem;letter-spacing:-.03em;line-height:1.25}
.av-tr{margin:0;color:var(--muted);font-size:.9rem}
.av-tr:empty{display:none}
.lv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.lv{position:relative;display:block;margin:0;border-radius:var(--r-s);overflow:hidden;aspect-ratio:3/4;background:var(--grey)}
.lv img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.lv:hover img{transform:scale(1.05)}
.lv-cap{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;line-height:1.25}
.lv-tag{font-size:.68rem;font-weight:600;color:#1a9a4f;text-transform:uppercase;letter-spacing:.06em}
.lv-cap b{font-size:.9rem;font-weight:600}
.lv-cap small{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--muted);margin-top:2px}
.lv-cap small svg{width:12px;height:12px}

/* ---------- Pied de page ---------- */
.ft{padding:0;border-top:1px solid var(--line)}
.ft-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding-top:14px;padding-bottom:14px;font-size:.76rem;color:var(--muted)}
.ft-nav{display:flex;gap:16px}
.ft-nav a{color:var(--muted)}
.ft-nav a:hover{color:var(--ink)}
.ft .lang-switch{background:var(--grey)!important;border:0!important}
.ft .lang-switch button{opacity:.5}
.ft .lang-switch button.on,.ft .lang-switch button[aria-pressed=true]{background:#fff!important;opacity:1}

/* ---------- Barre du bas (téléphone) ---------- */
.mbar{display:none}

/* ---------- Apparitions ---------- */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
[data-split] .w{display:inline-block;opacity:0;transform:translate3d(0,.45em,0);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i) * 50ms)}
[data-split].in .w{opacity:1;transform:none}
.hero-t .w{transition-delay:calc(.2s + var(--i) * 65ms)}

/* ---------- Tablette ---------- */
@media (max-width:1100px){
  .hd-nav{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg-grid{grid-template-columns:1fr;gap:36px}
  .lv-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Téléphone ---------- */
@media (max-width:760px){
  :root{--hd:64px;--r:22px}
  .wrap,.hd-in{padding:0 16px}
  .hd-in{gap:10px}
  .hd-logo{margin-right:auto}
  .hd-logo img{height:28px}
  .hd-cta,.nav-lang-btn span{display:none}
  .nav-lang-btn{width:44px;padding:0;justify-content:center}
  .burger{display:block}
  .mnav{display:flex;flex-direction:column;position:fixed;inset:var(--hd) 0 auto;background:#fff;padding:10px 16px 22px;box-shadow:0 30px 40px -30px rgba(0,0,0,.35);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
  .mnav a{padding:16px 4px;border-bottom:1px solid var(--line);font-family:var(--h);font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
  .mnav a:last-child{border:0;margin-top:12px;background:var(--ink);color:#fff;border-radius:999px;text-align:center;font-size:1rem;padding:15px}
  .menu-open .mnav{opacity:1;transform:none;pointer-events:auto}
  .menu-open .hd{background:#fff}
  .hero{padding-top:calc(var(--hd) + 8px)}
  .hero-t{font-size:clamp(2.6rem,12.5vw,3.6rem)}
  .hero-p{font-size:1rem;margin-top:18px}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:30px}
  .tabs{width:100%}
  .tab{flex:1;justify-content:center;padding:0 8px;font-size:.8rem;gap:5px}
  .tab b{min-width:19px;height:19px;font-size:.68rem}
  .tab-note{margin-top:-14px}
  .grid,.grid.n2{grid-template-columns:1fr}
  .grid.n1 .card{grid-template-columns:1fr}
  .grid.n1 .card-media>img{min-height:0;aspect-ratio:16/11}
  .grid.n1 .card-title-over{position:static;padding:16px 8px 0}
  .form-card{padding:22px 18px;border-radius:22px}
  .p-steps{display:none}
  .f-nav{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));background:#fff;padding:10px 0;margin-top:14px}
  #fNext{flex:1;min-width:0}
  .tiles .qchip{flex:1 1 30%}
  .rev-grid{grid-template-columns:1fr}
  .rev-card{padding:22px}
  .lv-grid{gap:10px}
  .mbar{display:flex;gap:8px;position:fixed;z-index:45;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:6px;border-radius:999px;background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 34px -14px rgba(0,0,0,.4),inset 0 0 0 1px var(--line);
    transform:translateY(140%);transition:transform .5s var(--ease)}
  .mbar.show{transform:none}
  .mbar a{flex:1;height:48px;display:grid;place-items:center;border-radius:999px;font-weight:600;font-size:.9rem}
  .mbar a.on{background:var(--ink);color:#fff}
}

/* Configurateur : une question par écran sur téléphone (configurateur.js pose .q-off) */
.q-off{display:none!important}
@media (max-width:760px){
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap;padding:0 14px}
}

@media (max-width:760px){.f-nav>span{display:none}}

/* ================= Version simple (06/11) ================= */
/* Apparition au chargement du héros */
.ld{opacity:0;transform:translate3d(0,18px,0);animation:ld .9s var(--ease) var(--d,0s) both}
@keyframes ld{to{opacity:1;transform:none}}
.hero-t{font-size:clamp(2.8rem,5.6vw,5.4rem)}

/* En-têtes de section centrés */
.sec-head.center{text-align:center;max-width:940px;margin-left:auto;margin-right:auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto;max-width:560px}

/* 2. Comment ça marche : 3 cartes */
.how{padding-bottom:90px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{position:relative;background:var(--grey);border-radius:var(--r);padding:10px 10px 28px}
.step-ph{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--grey-2)}
.step-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s var(--ease)}
.step.in .step-ph img{transform:scale(1)}
.step:hover .step-ph img{transform:scale(1.04)}
.step-n{position:absolute;top:22px;left:22px;height:34px;padding:0 13px;border-radius:999px;background:#fff;display:grid;place-items:center;font-weight:600;font-size:.82rem;font-variant-numeric:tabular-nums}
.step h3{margin:22px 16px 0;font-family:var(--h);font-weight:600;font-size:1.32rem;line-height:1.22;letter-spacing:-.03em}
.step p{margin:10px 16px 0;color:var(--ink-2);font-size:.96rem}
.how-go{display:flex;justify-content:center;margin-top:44px}

/* 3. Recherche sur mesure */
.reass{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.reass li{display:flex;align-items:center;gap:9px}
.reass li::before{content:""}
.cfg-box{max-width:880px;margin:0 auto}
.form-card{padding:40px}
.cfg .sec-head{margin-bottom:38px}

/* 4. Stock */
.stock .lead{max-width:520px}

@media (max-width:1100px){
  .steps{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .proof{margin-top:30px}
}
@media (max-width:760px){
  .proof{order:3;margin-top:0;padding-top:4px}
  .how{padding-bottom:64px}
  .steps{gap:14px}
  .step{padding:8px 8px 22px}
  .step h3{margin:18px 12px 0;font-size:1.22rem}
  .step p{margin:8px 12px 0;font-size:.92rem}
  .how-go{margin-top:30px}
  .how-go .btn{width:100%}
  .reass{flex-direction:column;align-items:center;gap:8px;margin-top:18px}
  .form-card{padding:22px 18px}
  .sec-head.row .btn{width:100%}
}
.h2,.hero-t{text-wrap:balance}

/* ================= En-tête blanc + menus déroulants (d'après drive-turismo.fr, 06/11) ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd{background:#fff;box-shadow:0 1px 0 var(--line)}
.hd-in{gap:26px}
.hd-logo{display:block;flex:none}
.hd-logo img{height:32px;width:auto}
.hd-nav2{display:flex;gap:2px;margin-right:auto}
.nd{position:relative}
.nd-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.nd-btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.nd-btn:hover,.nd.open .nd-btn{background:var(--grey);color:var(--ink)}
.nd-link{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.nd-link:hover{background:var(--grey);color:var(--ink)}
.nd.open .nd-btn svg{transform:rotate(180deg)}
.nd-pop{position:absolute;top:calc(100% + 14px);left:-6px;display:grid;grid-template-columns:232px 264px;gap:8px;padding:8px;background:#fff;border-radius:20px;
  box-shadow:0 0 0 1px var(--line),0 28px 60px -26px rgba(13,14,16,.38);opacity:0;visibility:hidden;transform:translate3d(0,-6px,0) scale(.985);transform-origin:18% 0;
  transition:opacity .18s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.nd-pop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nd-pop.one{grid-template-columns:250px}
.nd.open .nd-pop{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .45s var(--ease),visibility 0s}
.nd-list{display:flex;flex-direction:column;padding:2px 0}
.nd-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:.9rem;color:var(--ink);transition:background .2s}
.nd-list a:hover{background:var(--grey)}
.nd-g{margin:0;padding:10px 12px 4px;font-size:.72rem;font-weight:600;color:var(--faint)}
.nd-g~.nd-g{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.nd-list hr{width:calc(100% - 24px);border:0;border-top:1px solid var(--line);margin:6px 12px}
.ni{width:18px;height:18px;flex:none;color:var(--ink-2)}
.nd-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:270px;padding:18px;border-radius:14px;overflow:hidden;background:#0a0b0d;color:#fff;isolation:isolate}
.nd-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2;transition:transform .9s var(--ease)}
.nd-feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,13,0) 0%,rgba(10,11,13,0) 30%,rgba(10,11,13,.92) 72%)}
.nd-feat:hover img{transform:scale(1.05)}
.nd-feat-k{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.72)}
.nd-feat-k .ni{width:14px;height:14px;color:inherit}
.nd-feat b{font-size:1.02rem;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.nd-feat small{font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.45}
.nd-feat-go{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.82rem;font-weight:600}
.nd-feat-go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.nd-feat:hover .nd-feat-go svg{transform:translateX(3px)}
.hd .hd-ico{background:var(--grey)}
.hd-burger{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:background .2s}
.hd-burger span{position:relative;display:block;width:20px;height:14px}
.hd-burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease),opacity .2s}
.hd-burger i:nth-child(1){top:0}.hd-burger i:nth-child(2){top:6px}.hd-burger i:nth-child(3){top:12px}
.mm-open .hd-burger{background:var(--grey)}
.mm-open .hd-burger i:nth-child(1){top:6px;transform:rotate(45deg)}
.mm-open .hd-burger i:nth-child(2){opacity:0}
.mm-open .hd-burger i:nth-child(3){top:6px;transform:rotate(-45deg)}
.mm{display:none}
.drop-veil{display:none}
body .lang-switch button[aria-pressed=true]{background:var(--ink)}
.ft .lang-switch button[aria-pressed=true]{background:#fff!important}

/* Menu téléphone et tablette : plein écran sous l'en-tête, groupes, icônes, chevrons, langue en bas */
@media (max-width:1000px){
  .hd-nav2{display:none}
  .hd-logo{margin-right:auto}
  .hd-burger{display:grid}
  .mm{display:block;position:fixed;left:0;right:0;top:var(--hd);height:calc(100dvh - var(--hd));background:#fff;overflow-y:auto;overscroll-behavior:contain;box-shadow:inset 0 1px 0 var(--line);
    opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);transition:opacity .2s var(--ease),transform .4s var(--ease),visibility 0s .4s}
  .mm-open .mm{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .45s var(--ease),visibility 0s}
  .mm-in{max-width:560px;margin:0 auto;padding:4px 16px calc(28px + env(safe-area-inset-bottom))}
  .mm-g{padding:4px 0 8px;border-bottom:1px solid var(--line)}
  .mm-g p{margin:0;padding:14px 8px 4px;font-size:.76rem;font-weight:600;color:var(--faint)}
  .mm-g a{display:flex;align-items:center;gap:14px;padding:13px 8px;border-radius:12px;font-size:1rem;color:var(--ink);transition:background .2s}
  .mm-g a:active,.mm-g a:hover{background:var(--grey)}
  .mm-g .ni{width:20px;height:20px}
  .mm-g .nc{width:16px;height:16px;margin-left:auto;color:var(--faint)}
  .mm-g,.mm-lang,.mm-cta{opacity:0;transform:translate3d(0,10px,0);transition:opacity .3s var(--ease),transform .5s var(--ease)}
  .mm-open .mm-g,.mm-open .mm-lang,.mm-open .mm-cta{opacity:1;transform:none}
  .mm-open .mm-g:nth-child(2){transition-delay:.05s}.mm-open .mm-lang{transition-delay:.1s}.mm-open .mm-cta{transition-delay:.14s}
  .mm-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 8px;border-bottom:1px solid var(--line);font-size:1rem}
  .mm-lang .lang-switch{background:none;border:0;padding:0;gap:6px}
  .mm-lang .lang-switch button{opacity:1;gap:6px;padding:8px 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
  .mm-lang .lang-switch button span{display:inline;font-size:.82rem;font-weight:600;color:var(--ink-2)}
  .mm-lang .lang-switch button[aria-pressed=true]{background:var(--grey);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .mm-cta{width:100%;height:54px;margin-top:20px}
}

/* ================= Héros : fond noir, vrai Cayenne Turbo GT à droite, une seule recherche ================= */
.hero{--hb:10,11,13;position:relative;min-height:100svh;display:flex;flex-direction:column;padding:0;color:#fff;background:rgb(var(--hb));overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:var(--hd) 0 0 auto;width:64%;z-index:-1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:8% 62%;transform:translate3d(0,calc(var(--hp,0) * 70px),0) scale(1.04);animation:heroZoom 2.8s var(--ease) both;will-change:transform}
@keyframes heroZoom{from{transform:scale(1.14)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--hb),.75) 0%,rgba(var(--hb),0) 32%)}
.hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hd) + 40px);padding-bottom:56px}
.eyebrow.light{color:rgba(255,255,255,.6)}
.hero .hero-t{color:#fff;font-size:clamp(3rem,6.2vw,6rem);line-height:.98;max-width:860px}
.hero .blue{color:rgba(255,255,255,.42)}
.hero .hero-p{color:rgba(255,255,255,.78);max-width:500px;font-size:1.1rem;margin:24px 0 0}
.hbar{display:flex;align-items:center;max-width:560px;height:66px;margin-top:34px;padding:7px;border-radius:999px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.hbar-f{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:100%;padding:0 18px;color:rgba(255,255,255,.75);cursor:text}
.hbar-f svg{width:20px;height:20px;flex:none}
.hbar input{width:100%;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;font:500 1rem 'Inter',sans-serif}
.hbar input::placeholder{color:rgba(255,255,255,.6)}
.hbar-go{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;font-weight:600;font-size:.95rem;white-space:nowrap;transition:background .25s,transform .3s var(--ease)}
.hbar-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.hbar-go:hover{background:#3a62ff}
.hbar-go:hover svg{transform:translateX(3px)}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;font-size:.88rem}
.hero-how{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#fff}
.hero-how svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.hero-how:hover svg{transform:translateY(3px)}
.hero-sub .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.hero .proof{margin:0;padding:0;gap:10px}
.hero .proof-ava img{width:30px;height:30px;border:2px solid rgba(255,255,255,.9);margin-left:-9px;box-shadow:none}
.hero .proof-ava img:first-child{margin-left:0}
.hero .proof-t{display:block}
.hero .proof-t b{color:#fff;font-size:.88rem}
.hero .proof-t small{color:rgba(255,255,255,.6);font-size:.84rem}
.hero-facts{position:relative;background:rgba(var(--hb),.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1)}
.facts-in{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px 28px;padding-top:20px;padding-bottom:20px;font-size:.88rem}
.facts-in span{display:flex;align-items:center;gap:10px;color:#fff}
.facts-in svg{width:20px;height:20px;flex:none;color:rgba(255,255,255,.75)}
.facts-in b{font-weight:500}
.facts-in small{color:rgba(255,255,255,.5);font-size:.8rem}
.hero .ld{animation-duration:1s}
@media (max-width:1100px){
  .facts-in{grid-template-columns:1fr 1fr}
}
/* Téléphone (d'après la version mobile de drive-turismo.fr) : texte et recherche en haut, la voiture dessous */
@media (max-width:760px){
  .hero{min-height:0}
  .hero-in{order:1;flex:none;justify-content:flex-start;padding-top:calc(var(--hd) + 30px);padding-bottom:0}
  .hero-bg{order:2;position:relative;inset:auto;width:100%;height:42svh;min-height:280px;margin-top:-4svh;-webkit-mask-image:none;mask-image:none}
  .hero-bg img{object-position:58% 72%}
  .hero-bg::after{background:linear-gradient(180deg,rgb(var(--hb)) 0%,rgba(var(--hb),0) 30%,rgba(var(--hb),0) 80%,rgb(var(--hb)) 100%)}
  .hero-facts{order:3}
  .hero .hero-t{font-size:clamp(2.6rem,12.2vw,3.4rem)}
  .eyebrow.light{font-size:.66rem;letter-spacing:.06em;margin-bottom:14px}
  .hero .hero-p{font-size:1rem;margin-top:14px}
  .hbar{flex-direction:column;align-items:stretch;height:auto;gap:8px;padding:8px;border-radius:20px;margin-top:22px}
  .hbar-f{height:50px;padding:0 12px}
  .hbar-go{height:52px;border-radius:14px}
  .hero-sub{margin-top:18px;gap:10px 12px;font-size:.82rem}
  .hero .proof-t small{display:block}
  .hero-sub .dot{display:none}
  .hd .hd-ico,.hd .nav-lang-btn{background:transparent}
  .facts-in{gap:12px 14px;padding:16px;font-size:.76rem}
  .facts-in svg{width:17px;height:17px}
  .facts-in small{display:none}
}

/* Menu de l'en-tête : une simple icône à trois traits (07/11, Alan : « pas beau, le bouton Menu ») */
.hd-logo{margin-right:auto}
.hd .nd-btn{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;background:var(--grey)}
.hd .nd-btn:hover{background:var(--grey-2)}
.hd .nd.open .nd-btn{background:var(--ink)}
.nd-ic{position:relative;display:block;width:18px;height:12px}
.nd-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease),opacity .2s,background .2s}
.nd-ic i:nth-child(1){top:0}.nd-ic i:nth-child(2){top:5px}.nd-ic i:nth-child(3){top:10px}
.nd.open .nd-ic i{background:#fff}
.nd.open .nd-ic i:nth-child(1){top:5px;transform:rotate(45deg)}
.nd.open .nd-ic i:nth-child(2){opacity:0}
.nd.open .nd-ic i:nth-child(3){top:5px;transform:rotate(-45deg)}
.hd-r .nd-pop{left:auto;right:-6px;transform-origin:92% 0}
@media (max-width:1000px){.hd-r .nd{display:none}}

/* ================= Passe « apple-design » (07/11) =================
   Réaction dès l'appui, ressorts sans rebond (amortissement 1,0), menus qui naissent de leur bouton,
   en-tête en verre sous lequel le contenu défile. Le site joue toujours ses animations (choix d'Alan). */
:root{--spring:var(--ease)}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0, .0751, .2266, .3895, .5357, .656, .75, .821, .8734, .9113, .9383, .9574, .9707, .98, .9864, .9908, .9938, .9958, .9972, .9981, .9987, .9992, .9994, .9996, 1)}
}
a,button,label,input,summary{touch-action:manipulation}

/* 1. Réaction à l'appui, immédiate (100 ms), sur tout ce qu'on touche */
.btn:active,.hbar-go:active,.hd-ico:active,.nav-lang-btn:active,.hd-burger:active,.hd .nd-btn:active,.mbar a:active,.qchip:active,.card-cta:active,.nd-feat:active{transform:scale(.97);transition:transform .1s ease-out}
.h-opt:active span{transform:scale(.97);transition:transform .1s ease-out}
.card:active{transform:scale(.985);transition:transform .12s ease-out}
.nd-list a:active,.mm-g a:active{background:var(--grey-2);transition:none}
.btn,.hbar-go,.hd-ico,.nav-lang-btn,.hd-burger,.hd .nd-btn{transition-timing-function:var(--spring)}

/* 2. En-tête en verre : le héros commence sous l'en-tête, le contenu défile dessous, ombre douce au lieu d'un trait */
.hd{background:rgba(255,255,255,.8);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:none;transition:box-shadow .35s}
.hd.over{box-shadow:0 10px 30px -22px rgba(13,14,16,.45),0 1px 0 rgba(13,14,16,.05)}
.mm-open .hd{background:#fff}
.hero{margin-top:var(--hd);min-height:calc(100svh - var(--hd))}
.hero-bg{top:0}
.hero-in{padding-top:40px}

/* 3. Menu déroulant : naît de l'icône (origine sur le bouton), se matérialise (flou + échelle), ressort sans rebond, même chemin à la fermeture */
.hd-r .nd-pop{transform-origin:calc(100% - 28px) -8px;background:rgba(255,255,255,.92);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  transform:scale(.94);filter:blur(6px);transition:opacity .16s ease-out,transform .32s var(--spring),filter .2s ease-out,visibility 0s .32s}
.hd-r .nd.open .nd-pop{transform:none;filter:none;transition:opacity .2s ease-out,transform .5s var(--spring),filter .3s ease-out,visibility 0s}
.nd-ic i{transition:transform .5s var(--spring),top .5s var(--spring),opacity .15s,background .2s}

/* 4. Menu du téléphone : descend de l'en-tête et y remonte, même chemin */
@media (max-width:1000px){
  .mm{transform:translate3d(0,-14px,0);transition:opacity .18s ease-out,transform .35s var(--spring),visibility 0s .35s}
  .mm-open .mm{transition:opacity .22s ease-out,transform .55s var(--spring),visibility 0s}
  .hd-burger i{transition:transform .5s var(--spring),top .5s var(--spring),opacity .15s}
}
@media (max-width:760px){ .hero-in{padding-top:30px} }

/* 5. Recherche du héros : on voit qu'on écrit dedans */
.hbar{transition:background .25s,box-shadow .25s}
.hbar:focus-within{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 4px rgba(255,255,255,.08)}

/* 6. Typo : petits libellés un peu plus espacés pour la lisibilité */
.nd-g,.mm-g p{letter-spacing:.01em}

/* 7. Transparence réduite (réglage du téléphone) : verre remplacé par du blanc plein */
@media (prefers-reduced-transparency:reduce){
  .hd,.hd-r .nd-pop{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hbar{background:#26272b;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Téléphone, accueil (06/11, Alan : « la photo de la Porsche en haut, le texte et la recherche en bas, ça épouse le bas du téléphone »).
   La photo occupe le haut de l'écran et se fond dans le noir ; titre, recherche et liens sont posés en bas du premier écran. */
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero-bg{position:absolute;top:0;left:0;right:0;width:100%;height:64svh;min-height:0;margin:0;-webkit-mask-image:none;mask-image:none}
  .hero-bg img{object-position:50% 50%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(var(--hb),.35) 0%,rgba(var(--hb),0) 18%,rgba(var(--hb),0) 58%,rgba(var(--hb),.85) 84%,rgb(var(--hb)) 100%)}
  .hero-in{position:relative;min-height:calc(100svh - var(--hd));display:flex;flex-direction:column;justify-content:flex-end;padding-top:46svh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .hero .eyebrow.light,.hero .hero-p{display:none}
  .hero .hero-t{font-size:clamp(2.4rem,11.4vw,3.2rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hbar{margin-top:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .hero-sub{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 22px}
  .hero-sub .proof{grid-column:1 / -1}
  /* icônes de l'en-tête à la même taille (le globe était plus petit) */
  .hd .nav-lang-btn{width:44px;padding:0;justify-content:center}
  .hd .nav-lang-btn svg,.hd .hd-ico svg{width:22px;height:22px}
}
@media (max-width:760px) and (max-height:700px){
  .hero-in{padding-top:36svh}
  .hero .proof{display:none}
}

/* Pied de page minimal (06/11) : une ligne ; place pour la barre du bas sur téléphone */
@media (max-width:760px){.ft-row{justify-content:center;gap:4px 12px;font-size:.72rem;padding-bottom:calc(84px + env(safe-area-inset-bottom))}.ft-nav{gap:12px}}

/* Héros ordinateur (06/11) : la ligne des voitures livrées passe sous les liens, dans la colonne du texte (elle touchait le pare-chocs du Cayenne) */
@media (min-width:761px){
  .hero-sub{max-width:560px}
  .hero-sub .dot:last-of-type{display:none}
  .hero-sub .proof{flex-basis:100%;margin-top:4px}
}

/* Page /avis en version simple (06/11) */
.av-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.av-jump a{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:999px;background:var(--grey);font-weight:600;font-size:.86rem}
.av-jump a:hover{background:#e8e8ed}
.av-s{padding-top:30px;padding-bottom:30px;scroll-margin-top:calc(var(--hd) + 16px)}
.av-s .an-lead{margin:0 0 6px}
.av-vids{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.av-card{display:flex;flex-direction:column;gap:16px;padding:14px 14px 22px;border-radius:var(--r);background:var(--grey)}
.av-card .av-who{padding:0 8px}
.av-vid{position:relative;display:flex;align-items:center;justify-content:center;min-height:460px;border-radius:18px;overflow:hidden;background:#fff}
.av-vid.on{display:block;min-height:0}
.av-vid .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.av-vid iframe{display:block;border-radius:0!important}
.av-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 24px}
.av-gate-ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;margin-bottom:6px}
.av-gate-ic svg{width:24px;height:24px;margin-left:3px}
.av-gate b{font-weight:600;font-size:1.05rem}
.av-gate p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5;max-width:270px}
.av-gate .btn{height:44px;padding:0 20px;font-size:.86rem;background:var(--ink);color:#fff}
.av-gate .btn svg{width:15px;height:15px}
.av-gate a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;text-decoration:underline;text-underline-offset:4px}
.av-gate a svg{width:16px;height:16px}
.av-ig{margin-top:20px}
.av-ig b{display:block}
.av-ig small{color:var(--muted);font-size:.86rem}
.av-ig .btn{height:46px}
.av-ig .btn svg{color:var(--ink)}
.av-last{padding-bottom:90px}
.av-last .f-sold h2 .blue{color:rgba(255,255,255,.5)}
.av-leave{display:inline-block;margin-top:14px;color:rgba(255,255,255,.72);font-size:.86rem;text-decoration:underline;text-underline-offset:4px}
.av-leave:hover{color:#fff}
@media (max-width:760px){
  .av-vids{grid-template-columns:1fr}
  .av-vid{min-height:380px}
  .av-s{padding-top:20px;padding-bottom:20px}
  .av-last{padding-bottom:40px}
  .av-ig .btn{width:100%}
}
.av-s .h2{margin-bottom:12px}

/* Page /avis (11/11) : titre sans césure (« Écoutez- / les. »), galerie des voitures livrées en mosaïque.
   Détails des voitures (.lv-x) : 2 colonnes pour .lv-wide ; grid-auto-flow:dense bouche les trous sur 2 colonnes. */
.av-page .an-h1 .blue{white-space:nowrap}
.lv-grid{grid-auto-flow:dense}
.lv-wide{grid-column:span 2;aspect-ratio:auto}
.lv-x img{position:absolute;inset:0}
.lv-pill{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);height:32px;padding:0 12px;border-radius:999px;background:#fff;font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-pill svg{width:12px;height:12px;flex:none;color:var(--muted)}
@media (max-width:1100px){ .lv-wide{aspect-ratio:3/2} }
@media (max-width:760px){ .lv-pill{left:8px;bottom:8px;height:28px;padding:0 10px;font-size:.7rem} }

/* Vidéos clients hébergées sur le site (11/11) : vidéo 9:16 à gauche, citation à droite ; empilées sur téléphone */
.av-vc{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:26px;align-items:center;padding:14px 26px 14px 14px}
.av-vc .av-who{padding:0}
.av-vc .av-vid{display:block;min-height:0;aspect-ratio:9/16;background:#111;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.av-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.av-snd{position:absolute;z-index:2;top:12px;right:12px;width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;transition:transform .1s ease-out,background .2s,color .2s}
.av-snd:active{transform:scale(.92)}
.av-snd svg{width:20px;height:20px}
.av-snd.on{background:#fff;color:var(--ink)}
.av-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
.av-play svg{width:26px;height:26px;margin-left:3px}
.av-vid.paused .av-play{opacity:1}
.av-bar{position:absolute;left:14px;right:14px;bottom:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden;pointer-events:none}
.av-bar i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.av-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.av-info .av-q{margin:20px 0 8px;font-size:1.22rem;text-wrap:pretty}
.av-info .av-tr,.av-info .av-src{margin:0 0 4px}
.av-seek{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 6px;margin-top:16px;border:0;border-radius:999px;background:#fff;font:inherit;font-weight:600;font-size:.88rem;color:var(--ink);cursor:pointer;transition:transform .1s ease-out}
.av-seek:active{transform:scale(.97)}
.av-seek small{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.av-info .arrow-link{margin-top:16px}
@media (max-width:1100px){ .av-vids{grid-template-columns:1fr} .av-vc{grid-template-columns:minmax(0,290px) minmax(0,1fr)} }
@media (max-width:600px){
  .av-vc{grid-template-columns:1fr;gap:18px;padding:12px 12px 22px}
  .av-vc .av-vid{max-height:76svh}
  .av-info{padding:0 8px}
  .av-info .av-q{margin-top:16px;font-size:1.12rem}
}

/* Souris animée (06/11) : invite à faire défiler, disparaît dès qu'on descend */
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:88px;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:56px;transition:opacity .4s,transform .4s var(--ease);animation:scIn .8s 1.4s both}
.scroll-cue.gone{opacity:0;pointer-events:none;transform:translate(-50%,10px)}
.sc-mouse{position:relative;width:26px;height:40px;border:2px solid rgba(255,255,255,.85);border-radius:14px;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.sc-mouse i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scWheel 1.7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes scWheel{0%{transform:translateY(0);opacity:0}15%{opacity:1}70%{transform:translateY(13px);opacity:0}100%{transform:translateY(13px);opacity:0}}
@keyframes scIn{from{opacity:0}to{opacity:1}}
/* Pas de souris sur téléphone (08/11, Alan : « enlève la souris qui scroll vers le bas sur mobile ») */
@media (max-width:760px){ .scroll-cue{display:none} }

/* Recherche sur mesure : « Votre dossier » à côté du formulaire (js/cfg-dossier.js) */
.cfg.sec{overflow-x:clip}
.cfg-box.has-dos{max-width:1180px;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:40px;align-items:start}
.dos{position:sticky;top:calc(var(--hd) + 24px);padding:22px 18px 30px 10px}
.dos-stage{position:relative}
.dos-folder{position:absolute;inset:0;border-radius:24px;background:var(--grey-2);transform:rotate(2.4deg) translate(12px,10px);box-shadow:0 30px 60px -50px rgba(13,14,16,.45)}
.dos-tab{position:absolute;top:-16px;left:30px;width:132px;height:30px;border-radius:14px 14px 0 0;background:var(--grey-2)}
.dos-paper{position:relative;background:#fff;border-radius:20px;padding:30px 30px 24px;transform:rotate(-1.2deg);box-shadow:0 1px 0 rgba(13,14,16,.04),0 40px 80px -56px rgba(13,14,16,.55)}
.dos-paper.shake{animation:dosShake .42s cubic-bezier(.3,.7,.4,1)}
@keyframes dosShake{0%{transform:rotate(-1.2deg)}30%{transform:rotate(-.4deg) translate(2px,4px) scale(.992)}60%{transform:rotate(-1.6deg) translate(-1px,-1px)}100%{transform:rotate(-1.2deg)}}
.dos-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(13,14,16,.08)}
.dos-hd img{width:96px;height:auto;display:block}
.dos-hd-t{text-align:right;min-width:0}
.dos-hd-t b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dos-hd-t small{display:block;font-size:12.5px;color:var(--muted)}
.dos-l,.dos-r dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dos-car{padding:20px 0 18px;border-bottom:1px solid rgba(13,14,16,.08)}
.dos-cv{margin-top:6px;min-height:1.2em;font-size:clamp(24px,2.3vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere}
.dos-cv.empty{color:var(--faint);font-weight:600}
.dos-cv.typing::after{content:"";display:inline-block;width:2px;height:.92em;margin-left:3px;vertical-align:-.08em;background:#1F4BFF;animation:dosCaret 1s steps(1) infinite}
@keyframes dosCaret{50%{opacity:0}}
.dos-rows{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.dos-r{padding:13px 0 10px;min-width:0}
.dos-r dt{margin-bottom:4px}
.dos-r dd{margin:0;position:relative;display:flex;align-items:center;gap:7px;min-height:28px;padding-bottom:3px;border-bottom:1.5px dotted rgba(13,14,16,.18);font-size:16px;font-weight:600;color:var(--ink)}
.dos-ink{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dos-r.on .dos-ink{animation:dosInk .55s cubic-bezier(.22,1,.36,1) both}
@keyframes dosInk{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.dos-ok{flex:none;width:16px;height:16px;color:#1F4BFF;transform:scale(0);opacity:0}
.dos-r.on .dos-ok{animation:dosOk .4s .38s cubic-bezier(.22,1,.36,1) both}
@keyframes dosOk{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.dos-ft{display:flex;align-items:center;gap:14px;padding-top:18px;font-size:13px;color:var(--muted)}
.dos-bands{display:flex;flex-direction:column;gap:4px;flex:none}
.dos-bands i{display:block;height:5px;border-radius:2px;background:rgba(13,14,16,.1);transform:skewX(-18deg);transition:background-color .5s ease,box-shadow .5s ease}
.dos-bands i:nth-child(1){width:24px;margin-left:12px}.dos-bands i:nth-child(2){width:36px}.dos-bands i:nth-child(3){width:18px;margin-left:8px}
.dos-bands i.on{background:#1F4BFF;box-shadow:0 0 12px rgba(31,75,255,.45)}
/* Tampon et clé, à l'envoi */
.dos-stamp{position:absolute;right:30px;bottom:74px;padding:10px 16px;border:3px solid #1F4BFF;border-radius:10px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #1F4BFF;color:#1F4BFF;font-size:19px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;background:rgba(255,255,255,.72);opacity:0;transform:rotate(-12deg) scale(2.4);pointer-events:none}
.dos.done .dos-stamp{animation:dosStamp .5s .12s cubic-bezier(.2,.9,.3,1) both}
@keyframes dosStamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}70%{opacity:1;transform:rotate(-12deg) scale(.96)}100%{opacity:.94;transform:rotate(-12deg) scale(1)}}
.dos.done .dos-paper{animation:dosShake .42s .48s cubic-bezier(.3,.7,.4,1)}
.dos-key{position:absolute;right:-6px;bottom:-34px;width:104px;opacity:0;transform:translateY(-460px) rotate(-60deg);transform-origin:50% 30%;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(13,14,16,.28))}
.dos-key svg{display:block;width:100%;height:auto;overflow:visible}
.dos.done .dos-key{animation:dosKey 1.05s .95s both}
@keyframes dosKey{0%{opacity:1;transform:translateY(-460px) rotate(-60deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  55%{transform:translateY(0) rotate(-16deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  70%{transform:translateY(-30px) rotate(-11deg);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  82%{transform:translateY(0) rotate(-17deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  90%{transform:translateY(-8px) rotate(-15deg)}
  100%{opacity:1;transform:translateY(0) rotate(-16deg)}}
.dk-ring{transform-box:view-box;transform-origin:100px 96px}
.dos.done .dk-ring{animation:dosRing 1.4s 1.55s cubic-bezier(.3,.6,.4,1) both}
@keyframes dosRing{0%{transform:rotate(0)}20%{transform:rotate(26deg)}42%{transform:rotate(-16deg)}62%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.dos-kshadow{position:absolute;right:4px;bottom:-40px;width:96px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(13,14,16,.32),rgba(13,14,16,0));opacity:0;transform:scale(.2)}
.dos.done .dos-kshadow{animation:dosKs 1.05s .95s both}
@keyframes dosKs{0%{opacity:0;transform:scale(.2)}55%{opacity:1;transform:scale(1)}70%{opacity:.6;transform:scale(.8)}82%,100%{opacity:1;transform:scale(1)}}
@media (max-width:999px){
  .cfg-box.has-dos{display:block;max-width:880px}
  .dos{position:relative;top:auto;padding:12px 6px 18px 2px;margin-bottom:22px}
  .dos-folder{transform:rotate(1.4deg) translate(6px,6px);border-radius:20px}
  .dos-tab{top:-11px;left:20px;width:96px;height:22px}
  .dos-paper{transform:rotate(-.6deg);padding:18px 18px 14px;border-radius:18px}
  @keyframes dosShake{0%{transform:rotate(-.6deg)}30%{transform:rotate(0) translate(1px,3px) scale(.994)}60%{transform:rotate(-.9deg)}100%{transform:rotate(-.6deg)}}
  .dos-hd{padding-bottom:10px}.dos-hd img{width:70px}.dos-hd-t b{font-size:13px}.dos-hd-t small{display:none}
  .dos-car{padding:10px 0 4px;border-bottom:0}
  .dos-cv{font-size:20px;margin-top:2px}
  .dos-rows{grid-template-columns:repeat(3,auto);justify-content:space-between;column-gap:10px}
  .dos-r.x{display:none}
  .dos-r{padding:10px 0 2px}
  .dos-r dt{font-size:10px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dos-r dd{font-size:13.5px;min-height:24px;gap:3px}
  .dos-r dd:empty{min-width:84px}
  .dos-ok{width:12px;height:12px}
  .dos-ft{padding-top:10px;font-size:12px}
  .dos-stamp{bottom:6px;right:70px;font-size:13px;padding:6px 10px;border-width:2.5px}
  .dos-key{width:58px;right:-10px;bottom:-40px}
  .dos-kshadow{width:54px;right:-8px;bottom:-44px;height:12px}
}

/* Recherche sur mesure : 3 points sur une ligne, séparés par des points, jamais empilés (07/11) */
.reass{gap:6px 0;font-size:.84rem}
.reass li+li::before{content:"·";margin:0 12px;color:var(--muted)}
@media (max-width:640px){
  .cfg .sec-head .lead{font-size:.95rem}
  .reass{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-top:14px;font-size:.76rem}
  .reass li+li::before{margin:0 7px}
}
.reass li{gap:0}
@media (max-width:640px){.reass{gap:4px 16px}.reass li+li::before{content:none}}

/* =========================================================
   Finition premium (07/11, Alan : « enlève tout le beige, rends le plus premium », d'après drive-turismo.com)
   Gris froids façon Apple (#f5f5f7, texte #1d1d1f, gris #6e6e73, réglés dans :root), titres plus pleins
   et moins serrés, coins un peu plus petits, ombres douces en couches, plus d'air entre les sections.
   ========================================================= */
:root{--r:22px;--r-s:16px;--line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14)}
body{text-rendering:optimizeLegibility}
.h2{letter-spacing:-.035em;line-height:1.06}
.hero-t{letter-spacing:-.045em;line-height:1.02}
.card-title,.f-title,.step h3{letter-spacing:-.022em}
.eyebrow{font-size:.74rem;letter-spacing:.12em;color:var(--muted)}
.lead{color:var(--muted);line-height:1.55}
.sec{padding:128px 0}
.btn-black{background:var(--ink);box-shadow:none}
.btn-black:hover{background:#000}
.card{box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.05)}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.04),0 22px 44px -18px rgba(0,0,0,.18)}
.form-card{box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 34px rgba(0,0,0,.06)}
.step{background:var(--grey)}
.step-n{box-shadow:0 1px 2px rgba(0,0,0,.06)}
@media (max-width:760px){.sec{padding:88px 0}}

/* Langue : le code (FR / EN / RO) est affiché aussi sur téléphone et tablette, et dans le menu */
.nav-lang .nav-lang-menu button span{display:inline;font-weight:600;font-size:.82rem;color:var(--ink)}
.nav-lang .nav-lang-menu{min-width:104px}
.nav-lang .nav-lang-menu button{justify-content:flex-start}
body .nav-lang .nav-lang-menu button[aria-pressed=true]{background:var(--grey)!important}
@media (max-width:1000px){
  .hd .nav-lang-btn{width:auto;padding:0 12px 0 10px;gap:6px}
  .hd .nav-lang-btn span{display:inline;font-size:.82rem;font-weight:600;letter-spacing:.02em}
  .hd .nav-lang-btn svg{width:19px;height:19px}
}

/* Formulaire (08/11, Alan : « Oui, corrige ») : WhatsApp en premier sur l'écran du contact,
   et « Passer au contact » sous les boutons sur téléphone (le bouton « Continuer » était écrasé). */
.f-wa-box{margin:4px 0 6px}
.f-wa-main{width:100%;height:56px;gap:10px;font-size:1rem;box-shadow:none}
.f-wa-main svg{width:22px;height:22px;flex:none}
.f-wa-main:hover{filter:brightness(1.06)}
.f-wa-sub{margin:10px 0 0;font-size:.8rem;color:var(--muted);text-align:center;text-wrap:balance}
.f-or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;font-size:.8rem;color:var(--muted);text-align:center}
.f-or::before,.f-or::after{content:"";flex:1;height:1px;background:var(--line-2)}
@media (max-width:760px){
  .f-nav{flex-wrap:wrap;row-gap:2px}
  #fNext{white-space:nowrap}
  #fSkip{order:5;flex:1 0 100%;text-align:center;padding:8px}
}

/* ---------- Accueil, « Imports réalisés » : un texte sous chaque voiture (13/11) ----------
   .lv-rev = avis réel du client (mot pour mot) ; sinon « Le mot d'ADR Motors » (faits de l'annonce). Rendu par armLivrees() dans site.js. */
.lv-item{display:flex;flex-direction:column;gap:12px;min-width:0}
.lv-say{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.04)}
.lv-by{font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lv-say p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5;text-wrap:pretty}
.lv-rev blockquote{margin:0;font-family:var(--h);font-weight:500;font-size:.98rem;letter-spacing:-.015em;line-height:1.42;color:var(--ink);text-wrap:pretty}
.lv-rev .av-tr{font-size:.82rem;color:var(--muted)}
.lv-say .lv-who{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-size:.8rem;color:var(--muted)}
.lv-who img{width:28px;height:28px;flex:none;border-radius:50%;object-fit:cover;background:var(--grey-2)}
.lv-who b{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .lv-item{gap:8px}
  .lv-say{padding:12px 12px 14px;border-radius:14px;gap:6px}
  .lv-by{font-size:.62rem}
  .lv-say p{font-size:.8rem;line-height:1.45}
  .lv-rev blockquote{font-size:.86rem}
  .lv-say .lv-who{flex-wrap:wrap;gap:4px 6px;font-size:.74rem}
  .lv-who img{width:24px;height:24px}
}
/* Avis : la voiture du client sous son nom (lien vers l'annonce) */
.av-who small a{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px}
.av-who small a:hover{color:var(--ink)}
/* Vocaux de Matis sous son avis (accueil, « Imports réalisés », 13/11) : lecteur de /avis en plus compact, sur fond gris (la carte est blanche) */
.lv-voice{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lv-voice .vc-list{gap:6px}
.lv-say .vc-play{height:44px;padding:0 12px 0 5px;gap:8px;background:var(--grey)}
.lv-say .vc-ic{width:34px;height:34px}
.lv-say .vc-ic::before{left:13px;top:10px}
.lv-say .playing .vc-ic::before{left:11px;top:10px}
.lv-say .vc-wave{height:24px;gap:1.5px}
.lv-say .vc-play:active{transform:scale(.97);transition:transform .1s ease-out}
@media (max-width:760px){
  .lv-say .vc-play{height:38px;padding:0 8px 0 4px;gap:6px}
  .lv-say .vc-ic{width:30px;height:30px}
  .lv-say .vc-ic::before{left:11px;top:8px}
  .lv-say .playing .vc-ic::before{left:9px;top:8px}
  .lv-say .vc-wave i:nth-child(even){display:none}
  .lv-say .vc-time{font-size:.7rem}
}
.lv-say .lv-voice .lv-by{margin:0;font-size:.68rem;line-height:1.35;color:var(--muted)}
@media (max-width:760px){ .lv-say .lv-voice .lv-by{font-size:.62rem} }

/* =========================================================
   Passe « apple-design » de l'accueil (13/11, Alan : « sur toute la landing, tu refais tout comme il se doit, même les animations »).
   Réaction dès l'appui partout, ressorts sans rebond (amortissement 1) pour tout ce qui bouge sous la main,
   apparitions plus douces, menus qui naissent de leur bouton et repartent par le même chemin, survols réservés à la souris.
   Les animations jouent pour tout le monde (règle d'Alan : aucune coupure en « Réduire les animations »).
   ========================================================= */
:root{--spring-s:.55s}
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:transparent}

/* 1. Réaction immédiate à l'appui (100 ms), sur ce qui n'en avait pas encore */
.hero-how:active,.hero .proof:active,.lv-fo:active,.ft-nav a:active,.fo-faq:active,#fSkip:active,.f-wa-main:active,.arrow-link:active,.av-jump a:active,.nav-lang-menu button:active,.mm-lang button:active,.hd-logo:active{transform:scale(.97);transition:transform .1s ease-out}
.hero-how,.hero .proof,.lv-fo,.ft-nav a,.arrow-link,.hd-logo,#fSkip{transition:transform var(--spring-s) var(--spring),color .2s,opacity .2s}
.lv:active{transform:scale(.985);transition:transform .12s ease-out}

/* 2. Ressorts : tout ce qui suit la main repart de sa position et se pose sans rebond */
.btn,.btn svg,.hbar-go,.hbar-go svg,.hero-how svg,.card,.card-arrow,.card-media>img,.lv img,.qchip,.nd-feat img,.nd-feat-go svg,.arrow-link svg,.lv-cap small svg{transition-timing-function:var(--spring)}
.btn svg,.hbar-go svg,.hero-how svg,.arrow-link svg,.lv-cap small svg,.nd-feat-go svg{transition-property:transform;transition-duration:var(--spring-s)}
.card,.card-arrow{transition-duration:var(--spring-s)}
.lv img,.card-media>img{transition-duration:1s}
.qchip{transition:background .2s,color .2s,box-shadow .2s,transform var(--spring-s) var(--spring)}
.tilting{transition:box-shadow var(--spring-s) var(--spring)!important;will-change:transform}

/* 3. Survols : seulement avec une souris (sur téléphone, un survol resté « collé » après un appui trompe) */
@media (hover:none){
  .btn-black:hover,.btn-white:hover{transform:none}
  .lv:hover img,.card:hover .card-media>img{transform:none}
  .card:hover .card-arrow{transform:none}
  .btn:hover svg,.hbar-go:hover svg,.hero-how:hover svg{transform:none}
}
/* Indice dans le sens du geste : la flèche part là où mène le lien */
@media (hover:hover){
  .lv:hover .lv-cap small svg,.arrow-link:hover svg{transform:translateX(3px)}
  .lv-fo:hover b{background:var(--ink);color:#fff;box-shadow:none}
  .ft-nav a:hover{color:var(--ink)}
  .hero .proof:hover .proof-t b{text-decoration:underline;text-underline-offset:3px}
}

/* 4. Apparitions : plus courtes et plus douces (18 px au lieu de 28, ressort), titres mot à mot plus serrés */
.rv{transform:translate3d(0,18px,0);transition:opacity .8s var(--ease),transform .9s var(--spring)}
[data-split] .w{transform:translate3d(0,.32em,0);transition:opacity .7s var(--ease),transform .85s var(--spring);transition-delay:calc(var(--i) * 40ms)}
@keyframes ld{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.ld,.hero .ld{animation-duration:.85s;animation-timing-function:var(--spring)}
/* Photo du héros : un zoom d'arrivée plus léger (1,1 au lieu de 1,14), le Cayenne se pose sans à-coup */
@keyframes heroZoom{from{transform:scale(1.1)}}
.hero-bg img{animation-duration:2.2s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* 5. Menus : naissent de leur bouton, repartent par le même chemin */
.nav-lang-menu{display:flex!important;visibility:hidden;opacity:0;pointer-events:none;transform-origin:calc(100% - 22px) -6px;transform:scale(.92);filter:blur(4px);
  transition:opacity .14s ease-out,transform .3s var(--spring),filter .18s ease-out,visibility 0s .3s}
.nav-lang.open .nav-lang-menu{visibility:visible;opacity:1;pointer-events:auto;transform:none;filter:none;transition:opacity .18s ease-out,transform .45s var(--spring),filter .25s ease-out,visibility 0s}
.nav-lang-menu button{transition:background .15s}
@media (max-width:760px){
  .mbar{transition:transform var(--spring-s) var(--spring),opacity .25s ease-out;opacity:0}
  .mbar.show{opacity:1}
}

/* 6. Formules de l'accueil : la carte se soulève sous la souris (ressort), le bouton répond à l'appui */
.fo-home .fo-card{transition:opacity .8s var(--ease),transform .9s var(--spring),box-shadow var(--spring-s) var(--spring)}
@media (hover:hover){
  .fo-home .fo-card.in:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(0,0,0,.05),0 28px 56px -30px rgba(0,0,0,.3)}
  .fo-home .fo-card.main.in:hover{box-shadow:0 2px 6px rgba(0,0,0,.08),0 40px 80px -34px rgba(0,0,0,.62)}
}

/* 7. Recherche sur mesure : étapes qui entrent avec un ressort et sortent vite, barre de progression animée par transform */
.f-step.leave{transition:opacity .16s ease-in,transform .2s ease-in}
.f-step.enter-active{transition:opacity .28s ease-out,transform var(--spring-s) var(--spring)}
.p-bar i{width:100%;transform-origin:0 50%;transform:scaleX(var(--p,.25));transition:transform .6s var(--spring)}
/* « Peu importe » ne passe plus sur 2 lignes : chaque bouton prend la place de son texte */
.tiles .qchip{flex:1 1 auto;white-space:nowrap;padding:0 12px}
.field input,.field textarea{transition:border-color .2s,background .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(29,29,31,.06)}

/* 8. Imports réalisés : formule de la voiture, puis la réponse d'ADR Motors sous l'avis */
.lv-fo{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;align-self:flex-start;font-size:.74rem;font-weight:500;color:var(--muted);letter-spacing:.01em}
.lv-fo span{margin-right:2px}
.lv-fo b{height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:.76rem;letter-spacing:-.005em;
  box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s,color .2s,box-shadow .2s}
.lv-fo i{font-style:normal;font-weight:600;color:var(--faint)}
.lv-re{margin-top:6px;padding:12px 12px 13px;border-radius:12px;background:var(--grey)}
.lv-say .lv-re-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lv-re-h img{width:22px;height:22px;flex:none;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.lv-say .lv-re p:last-child{font-size:.84rem;line-height:1.48;color:var(--ink-2)}
@media (max-width:760px){
  .lv-fo{font-size:.66rem;gap:5px 4px}
  .lv-fo span{flex-basis:100%;margin:0}
  .lv-fo b{height:24px;padding:0 8px;font-size:.68rem}
  .lv-re{padding:10px}
  .lv-say .lv-re-h{font-size:.6rem;gap:6px}
  .lv-re-h img{width:18px;height:18px}
  .lv-say .lv-re p:last-child{font-size:.76rem}
}

/* 9. Typographie : interlettrage selon la taille, lignes équilibrées, chiffres alignés */
.h2,.fo-name,.hero .hero-t{text-wrap:balance}
.lead,.fo-for,.lv-say p,.f-sub{text-wrap:pretty}
.lv-cap b{letter-spacing:-.01em}
.lv-cap small,.facts-in small,.hero .proof-t small{letter-spacing:.005em}
.vc-time,.fo-pay dd,.dos-r dd{font-variant-numeric:tabular-nums}

/* 10. Clavier : anneau de focus visible, jamais au clic */
a:focus-visible,button:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hbar input:focus-visible,.field input:focus-visible{outline:none}
.hero a:focus-visible,.hero button:focus-visible{outline-color:#fff}

/* 11. Réglages d'accessibilité du téléphone : transparence réduite = verre plein, contraste élevé = bords nets et gris plus foncés */
@media (prefers-reduced-transparency:reduce){
  .mbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-facts{background:rgb(var(--hb));backdrop-filter:none;-webkit-backdrop-filter:none}
  .btn-glass{background:#2a2b30;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-lang-menu{filter:none}
}
@media (prefers-contrast:more){
  :root{--muted:#48484c;--faint:#6e6e73;--line:rgba(0,0,0,.22);--line-2:rgba(0,0,0,.4)}
  .hd,.mbar,.hd-r .nd-pop,.nav-lang-menu{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 1px #000}
  .hbar{background:#1d1d1f;box-shadow:inset 0 0 0 1.5px #fff}
  .lv-say,.fo-card,.lv-fo b{box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
  .hero .hero-p,.eyebrow.light,.hero .proof-t small{color:#fff}
}

/* Arrivée du Cayenne sur le héros (13/11, Alan : « animer la Porsche pour qu'elle arrive de la droite en roulant ») :
   vidéo posée sur la photo, même cadrage et même zoom d'arrivée ; la photo reste cachée tant que la vidéo joue (classe hv). */
.hero-bg .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:8% 62%;background:rgb(var(--hb));
  transform:translate3d(0,calc(var(--hp,0) * 70px),0) scale(1.04);animation:heroZoom 2.2s cubic-bezier(.16,1,.3,1) both;will-change:transform;
  transition:opacity .6s var(--ease);pointer-events:none}
.hero-bg .hero-vid.off{opacity:0}
.hero-bg img{transition:opacity .6s var(--ease)}
.hv .hero-bg img{opacity:0}
@media (max-width:760px){.hero-bg .hero-vid{object-position:50% 50%}}