/* ==========================================================================
   EXCARRA V10 — Mouvement, fluidité et interactions
   Chargé sur la landing et l'espace client. Tout est désactivé si le visiteur
   a demandé « réduire les animations » dans son système.
   ========================================================================== */

/* 1. Transitions entre pages (navigateurs compatibles : Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:v10-fade-out .2s ease both}
::view-transition-new(root){animation:v10-fade-in .34s cubic-bezier(.2,.8,.2,1) both}
::view-transition-group(v10-vehicle){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(v10-vehicle),::view-transition-new(v10-vehicle){height:100%;object-fit:cover}
.apphead{view-transition-name:v10-header}
.vehicle-gallery-main img[data-gallery-main]{view-transition-name:v10-vehicle}
@keyframes v10-fade-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes v10-fade-in{from{opacity:0;transform:translateY(10px)}}

/* Barre de chargement dorée lors d'un changement de page */
.v10-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#a98049,#e2bc84,#fff3d6);box-shadow:0 0 12px rgba(226,188,132,.7);opacity:0}
.v10-leaving .v10-progress{opacity:1;animation:v10-progress 2.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes v10-progress{0%{transform:scaleX(0)}40%{transform:scaleX(.55)}100%{transform:scaleX(.92)}}

/* 2. Squelettes de chargement (photos) */
.ph:not(:has(img.is-loaded)){background:linear-gradient(100deg,#0d203a 30%,#173253 50%,#0d203a 70%) #0d203a!important;background-size:300% 100%!important;animation:v10-shimmer 1.5s linear infinite}
@keyframes v10-shimmer{from{background-position:100% 0}to{background-position:-200% 0}}
.ph img{transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}

/* 3. Micro-interactions */
.btn,.chip,.cattab,.hx-btn,.icon-button,.compare-button,.favorite-button{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s,border-color .2s,color .2s,box-shadow .25s}
.btn:active,.chip:active,.cattab:active,.hx-btn:active,.icon-button:active,.compare-button:active{transform:scale(.96)}
.btn-p:hover,.hx-btn-light:hover{box-shadow:0 10px 30px rgba(255,255,255,.12)}
.chip.on,.cattab.on{box-shadow:0 0 0 1px rgba(226,188,132,.4),0 8px 24px rgba(226,188,132,.12)}
.vehicle-card,.similar-vehicle-card,.hx-card,a.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.vehicle-card:hover,.similar-vehicle-card:hover,.hx-card:hover{transform:translateY(-4px);border-color:rgba(226,188,132,.4)!important;box-shadow:0 22px 50px rgba(0,0,0,.35)!important}
.vehicle-card:hover .ph img,.similar-vehicle-card:hover .ph img{transform:scale(1.045)}
.vehicle-card.v10-hot{border-color:rgba(226,188,132,.75)!important;box-shadow:0 0 0 1px rgba(226,188,132,.5),0 22px 50px rgba(0,0,0,.35)!important}
.v10-pop{animation:v10-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes v10-pop{40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Verre dépoli */
.card,.booking-panel,.map-panel,.messages-layout{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* 4. Apparition au défilement */
.v10-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--v10-i,0) * 70ms)}
.v10-reveal.is-in{opacity:1;transform:none}

/* 5. Landing vivante */
.hx-hero-media{overflow:hidden}
.hx-hero-media img{will-change:transform;transform:scale(1.08)}
.hx-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,232,190,.14) 46%,rgba(255,255,255,.26) 50%,rgba(255,232,190,.14) 54%,transparent 64%);mix-blend-mode:screen;transform:translateX(-120%);animation:v10-sweep 8s ease-in-out 1.4s infinite}
@keyframes v10-sweep{0%{transform:translateX(-120%)}38%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.hx-hero-inner>*{animation:v10-rise .9s cubic-bezier(.2,.8,.2,1) both}
.hx-hero-inner>*:nth-child(2){animation-delay:.12s}
.hx-hero-inner>*:nth-child(3){animation-delay:.24s}
.hx-hero-inner>*:nth-child(4){animation-delay:.36s}
@keyframes v10-rise{from{opacity:0;transform:translateY(22px)}}
.hx-brand img,.hx-final-logo,.auth-visual-brand img{animation:v10-compass 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes v10-compass{0%{opacity:0;transform:rotate(-140deg) scale(.55);filter:brightness(2)}60%{opacity:1;filter:brightness(1.4)}100%{transform:none;filter:none}}
.hx-search{transition:box-shadow .4s,border-color .4s}
.hx-search:focus-within{box-shadow:0 0 0 1px rgba(226,188,132,.55),0 20px 60px rgba(226,188,132,.14)}
.hx-card .hx-icon{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.hx-card:hover .hx-icon{transform:translateY(-3px) rotate(-6deg);box-shadow:0 10px 30px rgba(226,188,132,.25)}

/* 6. Recherche immersive : carte sombre + marqueurs dorés */
.vehicle-map{background:#010b17}
.vehicle-map .leaflet-tile-pane{filter:invert(1) hue-rotate(190deg) brightness(.82) contrast(.92) saturate(.55)}
.vehicle-map .leaflet-control-zoom a{background:#04172e;color:#fff;border-color:#23405f}
.vehicle-map .leaflet-control-attribution{background:rgba(1,11,23,.7);color:#8ea2ba}
.vehicle-map .leaflet-control-attribution a{color:#e2bc84}
.excarra-map-marker{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:linear-gradient(180deg,#f3dcae,#c79b5c)!important;color:#0b1a33!important;border:0!important;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 3px rgba(226,188,132,.18)!important;font:600 13px/1 var(--font-body);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .2s}
.excarra-map-marker b{color:inherit}
.excarra-map-marker-wrap.is-hot .excarra-map-marker{transform:scale(1.18) translateY(-3px);background:#fff!important;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 6px rgba(226,188,132,.3)!important}
.excarra-map-popup .leaflet-popup-content-wrapper,.excarra-map-popup .leaflet-popup-tip{background:#04172e;color:#fff;border:1px solid #23405f;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.excarra-map-popup .map-popup-card{color:#fff}
.excarra-map-popup .map-popup-card strong{color:#e2bc84}

/* Aperçu rapide */
.v10-qv-btn{position:absolute;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(1,11,23,.72);color:#fff;font:500 12.5px var(--font-body);cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s,background .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v10-qv-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vehicle-card:hover .v10-qv-btn,.v10-qv-btn:focus-visible{opacity:1;transform:none}
.v10-qv-btn:hover{background:#fff;color:#0b1a33}
@media (hover:none){.v10-qv-btn{opacity:1;transform:none}}
.v10-qv{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px}
.v10-qv[hidden]{display:none}
.v10-qv-backdrop{position:absolute;inset:0;background:rgba(1,11,23,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:v10-fade-in .25s both}
.v10-qv-card{position:relative;width:min(880px,100%);max-height:calc(100dvh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:26px;border:1px solid rgba(226,188,132,.3);background:linear-gradient(180deg,#0d203a,#04172e);box-shadow:0 40px 120px rgba(0,0,0,.6);animation:v10-zoom .4s cubic-bezier(.2,.8,.2,1) both;color:#fff}
@keyframes v10-zoom{from{opacity:0;transform:translateY(16px) scale(.97)}}
.v10-qv-media{min-height:320px;background:#0a1b32}
.v10-qv-media img{width:100%;height:100%;object-fit:cover;display:block}
.v10-qv-body{display:flex;flex-direction:column;gap:14px;padding:30px 28px}
.v10-qv-body .eyebrow{color:#e2bc84}
.v10-qv-body h2{margin:0;font:500 26px/1.15 var(--font-display);color:#fff}
.v10-qv-body p{margin:0;color:#a9b8ca;font-weight:300;font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.v10-qv-chips{display:flex;flex-wrap:wrap;gap:8px}
.v10-qv-chips span{padding:7px 11px;border-radius:999px;border:1px solid #23405f;background:rgba(13,32,58,.7);color:#c9d3df;font-size:12.5px}
.v10-qv-price{display:flex;align-items:baseline;gap:6px;margin-top:auto}
.v10-qv-price b{font:300 34px/1 var(--font-display);color:#fff}
.v10-qv-price small{color:#a9b8ca}
.v10-qv-actions{display:flex;flex-wrap:wrap;gap:10px}
.v10-qv-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(1,11,23,.7);color:#fff;display:grid;place-items:center;cursor:pointer}
.v10-qv-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.v10-qv-loading .v10-qv-body>*{opacity:.35}
@media (max-width:720px){.v10-qv{padding:0;align-items:end}.v10-qv-card{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:92dvh}.v10-qv-media{min-height:220px;max-height:260px}}

/* 7. Réservation en étapes */
.booking-panel{container-type:inline-size}
.v10-steps{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:6px}
.v10-steps li{display:flex;align-items:center;gap:8px;font-size:12px;color:#6f829b;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v10-steps li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid #2a4a6c;font-style:normal;font-size:11px;transition:all .35s}
.v10-steps li.is-on{color:#fff}
.v10-steps li.is-on i{background:#e2bc84;border-color:#e2bc84;color:#0b1a33}
.v10-steps li.is-done i{background:rgba(226,188,132,.16);border-color:rgba(226,188,132,.55);color:#e2bc84}
.v10-steps-bar{height:3px;border-radius:3px;background:#1a3352;overflow:hidden}
.v10-steps-bar i{display:block;height:100%;width:var(--v10-step,33%);background:linear-gradient(90deg,#a98049,#e2bc84);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.booking-form.v10-stepper [data-v10-step]{display:none}
.booking-form.v10-s1 [data-v10-step="1"],.booking-form.v10-s2 [data-v10-step="2"],.booking-form.v10-s3 [data-v10-step="3"]{display:flex;animation:v10-rise .45s cubic-bezier(.2,.8,.2,1) both}
.booking-form.v10-s1 .date-grid[data-v10-step="1"]{display:grid}
.booking-form.v10-s2 .price-breakdown[data-v10-step="2"]{display:flex;flex-direction:column}
.v10-next,.v10-back{width:100%;justify-content:center}
.v10-back{background:none!important;border:0!important;color:#a9b8ca!important;min-height:36px!important;font-size:13px}
.v10-back:hover{color:#fff!important}
.v10-ex-live{align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(226,188,132,.35);background:linear-gradient(120deg,rgba(226,188,132,.14),rgba(226,188,132,.04))}
.v10-ex-live span{font-size:13px;color:#dfe6ef}
.v10-ex-live b{font:400 24px/1 var(--font-display);color:#e2bc84;font-variant-numeric:tabular-nums}
.v10-done{flex-direction:column;align-items:center;gap:10px;padding:26px 10px;text-align:center}
.v10-done svg{width:76px;height:76px}
.v10-done circle{fill:none;stroke:#e2bc84;stroke-width:2;stroke-dasharray:226;stroke-dashoffset:226;animation:v10-draw .7s ease forwards}
.v10-done path{fill:none;stroke:#e2bc84;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:v10-draw .45s ease .55s forwards}
.v10-done b{font:500 19px var(--font-display);color:#fff}
.v10-done small{color:#a9b8ca}
@keyframes v10-draw{to{stroke-dashoffset:0}}

@container (max-width:360px){.v10-steps li:not(.is-on) span{display:none}}

/* 8. EX Rewards en jeu */
.v10-fill-wait{width:0!important;transition:none!important}
.v10-fill-go{transition:width 1.6s cubic-bezier(.2,.8,.2,1)!important}
.v10-grow-wait{height:0!important;min-height:0!important;transition:none!important}
.v10-grow-go{transition:height 1.1s cubic-bezier(.2,.8,.2,1)!important;transition-delay:calc(var(--v10-i,0) * 60ms)!important}
.trust-meter span,.ex-level-progress span,.quality-score span,.quality-progress span,.referral-progress-mini span{position:relative;overflow:hidden}
.trust-meter span::after,.ex-level-progress span::after,.quality-score span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:v10-sheen 3.2s ease-in-out 1.6s infinite}
@keyframes v10-sheen{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.ex-tier-card.unlocked.v10-unlock{animation:v10-unlock 1.1s cubic-bezier(.2,.8,.2,1) both}
.ex-tier-card.unlocked{position:relative;overflow:hidden}
.ex-tier-card.unlocked.v10-unlock::after{content:"";position:absolute;inset:-40% -10%;background:linear-gradient(110deg,transparent 40%,rgba(255,236,200,.35) 50%,transparent 60%);transform:translateX(-100%);animation:v10-sheen 1.4s ease .3s 1 both;pointer-events:none}
@keyframes v10-unlock{0%{transform:scale(.94);box-shadow:0 0 0 0 rgba(226,188,132,.6)}60%{transform:scale(1.02);box-shadow:0 0 0 14px rgba(226,188,132,0)}100%{transform:none}}
.plate-showcase,.shop-hero-preview{perspective:900px}
.plate-showcase .plate,.shop-hero-preview .plate{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform-style:preserve-3d;will-change:transform}
.plate-showcase.v10-tilting .plate,.shop-hero-preview.v10-tilting .plate{transition:transform .08s linear;box-shadow:0 30px 60px rgba(0,0,0,.45)}

/* 9. Tableaux de bord / messagerie */
.message-bubble{animation:v10-rise .4s cubic-bezier(.2,.8,.2,1) both}

/* 10. EXI contextuel */
.v10-exi-nudge{position:fixed;right:20px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:1200;width:min(320px,calc(100vw - 40px));padding:16px 16px 14px;border-radius:20px 20px 6px 20px;border:1px solid rgba(226,188,132,.35);background:linear-gradient(160deg,rgba(13,32,58,.96),rgba(4,23,46,.96));color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:v10-zoom .45s cubic-bezier(.2,.8,.2,1) both}
.v10-exi-nudge[hidden]{display:none}
.v10-exi-nudge p{margin:0 26px 12px 0;font-size:14.5px;line-height:1.45}
.v10-exi-nudge small{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.22em;color:#e2bc84}
.v10-exi-nudge-actions{display:flex;gap:8px}
.v10-exi-nudge-actions button{height:36px;padding:0 14px;border-radius:999px;font:500 13px var(--font-body);cursor:pointer}
.v10-exi-yes{background:#fff;color:#0b1a33;border:1px solid #fff}
.v10-exi-later{background:transparent;color:#c9d3df;border:1px solid #2a4a6c}
.v10-exi-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:#8ea2ba;cursor:pointer;font-size:18px;line-height:1}
@media (max-width:640px){.v10-exi-nudge{right:12px;bottom:calc(150px + env(safe-area-inset-bottom))}}

/* Réduire les animations : tout revient à l'état final, sans mouvement */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hx-hero-media::after,.trust-meter span::after,.ex-level-progress span::after,.quality-score span::after{display:none}
  .v10-reveal{opacity:1;transform:none}
  .hx-hero-media img{transform:none!important}
}