/* Animations Prisma : sobres, désactivées si l'utilisateur réduit les mouvements */
#app > div > header{position:sticky !important;top:0;transition:background .35s ease, box-shadow .35s ease}
html.pz-scrolled #app > div > header{background:rgba(246,244,240,.94) !important;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 6px 24px rgba(20,16,10,.08)}
@media (prefers-reduced-motion: no-preference){
  #app{animation:pzFade .5s ease both}
  @keyframes pzFade{from{opacity:0}to{opacity:1}}
  .pz-rv{opacity:0;transform:translateY(54px) scale(.97);filter:blur(6px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.16,.8,.24,1),filter 1s ease;transition-delay:var(--pz-d,0ms)}
  .pz-rv.pz-in{opacity:1;transform:none;filter:none}
  .pz-rv.pz-now{transition:none}
  .pz-hero{opacity:0;animation:pzUp 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--pz-d,0ms)}
  @keyframes pzUp{from{opacity:0;transform:translateY(44px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
  img[src="img/prisme.png"]{animation:pzPrismIn 1.5s cubic-bezier(.16,.8,.24,1) .5s both, pzFloat 6s ease-in-out 2s infinite}
  @keyframes pzPrismIn{from{opacity:0;transform:translateY(60px) scale(.82) rotate(-4deg)}to{opacity:1;transform:none}}
  @keyframes pzFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(-1.4deg)}}
  a[href^="vehicule?id"],a[href^="location-vehicule?id"]{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease !important}
  a[href^="vehicule?id"]:hover,a[href^="location-vehicule?id"]:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(20,16,10,.18)}
  a[href^="vehicule?id"] img,a[href^="location-vehicule?id"] img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  a[href^="vehicule?id"]:hover img,a[href^="location-vehicule?id"]:hover img{transform:scale(1.09)}
  [style*="background: #D4A55A"]{position:relative;overflow:hidden}
  [style*="background: #D4A55A"]::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);pointer-events:none}
  a[style*="background: #D4A55A"]:hover::after,button[style*="background: #D4A55A"]:hover::after{animation:pzShine .9s ease}
  @keyframes pzShine{to{left:130%}}
  .pz-hero [style*="background: #D4A55A"]::after{animation:pzShine 1.1s ease 2.1s}
}

/* ---------- Frise du dépôt-vente ---------- */
.pz-tl{position:relative;margin-top:56px;padding:34px 28px 30px;background:#141414;border-radius:18px;color:#F6F4F0;overflow:hidden}
.pz-tl::before{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;height:140%;background:radial-gradient(closest-side,rgba(212,165,90,.18),transparent);pointer-events:none}
.pz-tl-track{position:absolute;left:12.5%;right:12.5%;top:70px;height:3px;background:rgba(246,244,240,.14);border-radius:3px}
.pz-tl-car{position:absolute;top:-39px;left:100%;width:110px;margin-left:-55px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.pz-tl-car img{display:block;width:110px;height:auto}
.pz-tl-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#B07A34,#D4A55A,#F0D49A);border-radius:3px;transform-origin:left center}





.pz-tl-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pz-tl-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.pz-tl-ico{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#1E1B17;border:2px solid #D4A55A;color:#D4A55A;box-shadow:0 0 0 6px rgba(212,165,90,.12),0 10px 26px rgba(0,0,0,.4)}
.pz-tl-ico svg{width:32px;height:32px}
.pz-tl-txt b{display:block;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pz-tl-txt span{display:block;margin-top:4px;font-size:13px;color:#BDB2A2}
.pz-tl-end{position:relative;margin-top:26px;text-align:center;font-size:15px;color:#D4A55A;font-weight:500;letter-spacing:.02em}
@media (max-width: 760px){
  .pz-tl{padding:26px 20px}
  .pz-tl-nodes{grid-template-columns:1fr;gap:26px}
  .pz-tl-node{flex-direction:row;text-align:left;gap:18px}
  .pz-tl-ico{width:58px;height:58px;flex:none}
  .pz-tl-ico svg{width:26px;height:26px}
  .pz-tl-track{left:48px;right:auto;top:56px;bottom:110px;width:3px;height:auto}
  .pz-tl-fill{width:auto;right:0;height:100%;background:linear-gradient(180deg,#B07A34,#D4A55A,#F0D49A);transform-origin:center top}
  .pz-tl-car{display:none !important}
  .pz-tl-end{text-align:left;padding-left:78px}
}
@media (prefers-reduced-motion: no-preference){
  .pz-tl .pz-tl-fill{transform:scaleX(0)}
  .pz-tl .pz-tl-car{left:0}
  .pz-tl .pz-tl-ico{transform:scale(.82);opacity:.45;filter:grayscale(1);transition:none}
  .pz-tl .pz-tl-txt,.pz-tl .pz-tl-end{opacity:.35}
  .pz-tl.pz-play .pz-tl-fill{animation:pzTlFill 9s linear infinite}
  .pz-tl.pz-play .pz-tl-car{animation:pzTlCar 9s linear infinite}
  .pz-tl.pz-play .pz-tl-node:nth-child(1) .pz-tl-ico,.pz-tl.pz-play .pz-tl-node:nth-child(1) .pz-tl-txt{animation:pzTlN0 9s ease infinite}
  .pz-tl.pz-play .pz-tl-node:nth-child(2) .pz-tl-ico,.pz-tl.pz-play .pz-tl-node:nth-child(2) .pz-tl-txt{animation:pzTlN1 9s ease infinite}
  .pz-tl.pz-play .pz-tl-node:nth-child(3) .pz-tl-ico,.pz-tl.pz-play .pz-tl-node:nth-child(3) .pz-tl-txt{animation:pzTlN2 9s ease infinite}
  .pz-tl.pz-play .pz-tl-node:nth-child(4) .pz-tl-ico,.pz-tl.pz-play .pz-tl-node:nth-child(4) .pz-tl-txt{animation:pzTlN3 9s ease infinite}
  .pz-tl.pz-play .pz-tl-end{animation:pzTlEnd 9s ease infinite}
  @keyframes pzTlFill{0%{transform:scale(0,1);opacity:1}72%,90%{transform:scale(1,1);opacity:1}100%{transform:scale(1,1);opacity:0}}
  @keyframes pzTlCar{0%{left:0;opacity:1}72%,90%{left:100%;opacity:1}96%{left:100%;opacity:0}97%{left:0;opacity:0}100%{left:0;opacity:1}}
  @keyframes pzTlN0{0%,1%{opacity:.4;transform:scale(.82);filter:grayscale(1)}6%,90%{opacity:1;transform:scale(1);filter:none}100%{opacity:.4;transform:scale(.82);filter:grayscale(1)}}
  @keyframes pzTlN1{0%,22%{opacity:.4;transform:scale(.82);filter:grayscale(1)}28%,90%{opacity:1;transform:scale(1);filter:none}100%{opacity:.4;transform:scale(.82);filter:grayscale(1)}}
  @keyframes pzTlN2{0%,46%{opacity:.4;transform:scale(.82);filter:grayscale(1)}52%,90%{opacity:1;transform:scale(1);filter:none}100%{opacity:.4;transform:scale(.82);filter:grayscale(1)}}
  @keyframes pzTlN3{0%,70%{opacity:.4;transform:scale(.82);filter:grayscale(1)}76%,90%{opacity:1;transform:scale(1);filter:none}100%{opacity:.4;transform:scale(.82);filter:grayscale(1)}}
  @keyframes pzTlEnd{0%,74%{opacity:.25;transform:translateY(6px)}80%,90%{opacity:1;transform:none}100%{opacity:.25}}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px){
  .pz-tl .pz-tl-fill{transform:scaleY(0)}
  .pz-tl .pz-tl-car{top:0}
  .pz-tl.pz-play .pz-tl-fill{animation-name:pzTlFillV}
  .pz-tl.pz-play .pz-tl-car{animation-name:pzTlCarV}
  @keyframes pzTlFillV{0%{transform:scale(1,0);opacity:1}72%,90%{transform:scale(1,1);opacity:1}100%{transform:scale(1,1);opacity:0}}
  @keyframes pzTlCarV{0%{top:0;opacity:1}72%,90%{top:100%;opacity:1}96%{top:100%;opacity:0}97%{top:0;opacity:0}100%{top:0;opacity:1}}
}

/* ---------- Animation des services (accueil) ---------- */
.pz-sv{position:relative;margin-top:44px;padding:34px 28px 28px;background:#141414;border-radius:18px;color:#F6F4F0;overflow:hidden}
.pz-sv::before{content:"";position:absolute;inset:-60% auto auto -10%;width:55%;height:140%;background:radial-gradient(closest-side,rgba(212,165,90,.16),transparent);pointer-events:none}
.pz-sv-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pz-sv-it{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.pz-sv-stage{width:170px;height:114px;border-radius:16px;background:#1E1B17;border:1px solid rgba(212,165,90,.55);box-shadow:0 0 0 6px rgba(212,165,90,.08),0 14px 30px rgba(0,0,0,.45)}
.pz-sv-stage svg{display:block;width:100%;height:100%}
.pz-sv-stage .b{fill:#E2B66A}.pz-sv-stage .w{fill:#141414}.pz-sv-stage .t{fill:#141414;stroke:#F0D49A;stroke-width:1.4}
.pz-sv-cell{fill:#D4A55A}
.pz-sv-mag{transform:translate(64px,40px)}
.pz-sv-txt b{display:block;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pz-sv-txt span{display:block;margin-top:4px;font-size:13px;color:#BDB2A2}
.pz-sv-bar{width:120px;height:3px;border-radius:3px;background:rgba(246,244,240,.14);overflow:hidden}
.pz-sv-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#B07A34,#F0D49A);border-radius:3px}
.pz-sv-end{position:relative;margin-top:24px;text-align:center;font-size:15px;color:#D4A55A;font-weight:500}
@media (max-width: 760px){
  .pz-sv{padding:24px 18px}
  .pz-sv-row{grid-template-columns:1fr;gap:20px}
  .pz-sv-it{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;text-align:left;column-gap:16px;row-gap:8px;align-items:center}
  .pz-sv-stage{width:120px;height:80px;grid-row:1 / span 2}
  .pz-sv-bar{width:100%;align-self:start}
}
@media (prefers-reduced-motion: no-preference){
  .pz-sv .pz-sv-stage,.pz-sv .pz-sv-txt{opacity:.45;transform:scale(.95);filter:grayscale(1)}
  .pz-sv .pz-sv-bar i{transform:scaleX(0);transform-origin:left center}
  .pz-sv .pz-sv-pop{opacity:0}
  .pz-sv .pz-sv-tag{opacity:0}
  .pz-sv .pz-sv-cell{opacity:.12}
  .pz-sv .pz-sv-mag{opacity:0}
  .pz-sv.pz-play .pz-sv-stage,.pz-sv.pz-play .pz-sv-txt{animation:pzSvOn 9s ease infinite;animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-it .pz-sv-stage,.pz-sv.pz-play .pz-sv-it .pz-sv-txt{animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-bar i{animation:pzSvBar 9s linear infinite;animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-mag{animation:pzSvMag 9s ease-in-out infinite;animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-pop{animation:pzSvPop 9s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-tag{animation:pzSvTag 9s cubic-bezier(.3,1.5,.5,1) infinite;animation-delay:calc(var(--i) * 3s)}
  .pz-sv.pz-play .pz-sv-cell{animation:pzSvCell 9s ease infinite;animation-delay:calc(var(--i) * 3s + var(--c) * .22s)}
  .pz-sv-pop,.pz-sv-tag{transform-box:fill-box;transform-origin:center}
  @keyframes pzSvOn{0%{opacity:.45;transform:scale(.95);filter:grayscale(1)}5%,30%{opacity:1;transform:scale(1);filter:none}36%,100%{opacity:.45;transform:scale(.95);filter:grayscale(1)}}
  @keyframes pzSvBar{0%{transform:scaleX(0);opacity:1}31%{transform:scaleX(1);opacity:1}36%,100%{transform:scaleX(1);opacity:0}}
  @keyframes pzSvMag{0%{opacity:0;transform:translate(22px,42px)}4%{opacity:1;transform:translate(22px,42px)}20%{opacity:1;transform:translate(98px,40px)}24%,100%{opacity:0;transform:translate(98px,40px)}}
  @keyframes pzSvPop{0%,20%{opacity:0;transform:scale(0)}25%,31%{opacity:1;transform:scale(1)}35%,100%{opacity:0;transform:scale(1)}}
  @keyframes pzSvTag{0%,6%{opacity:0;transform:translateY(-14px) scale(1.8)}12%,31%{opacity:1;transform:none}35%,100%{opacity:0}}
  @keyframes pzSvCell{0%,3%{opacity:.12}6%,31%{opacity:1}35%,100%{opacity:.12}}
}
