/* bandeaux Dépannage et Point relais : plus compacts, illustrations animées */
.dpx-hero{padding:26px 30px 24px;gap:18px;grid-template-columns:1.25fr .75fr;border-radius:24px}
.dpx-hero h2{font-size:clamp(1.55rem,3vw,2.15rem);margin:10px 0 8px}
.dpx-lede{font-size:.98rem;margin-bottom:12px}
.dpx-chips{margin-bottom:14px;gap:6px}.dpx-chips li{font-size:.84rem;padding:6px 10px}
.dpx-b{padding:11px 15px;font-size:.92rem;border-radius:12px}
.dpx-art{width:min(270px,100%)}
.dpx-stamp{font-size:clamp(1.05rem,2.2vw,1.35rem);padding:4px 12px 5px;left:0;bottom:2px}
.rlx-hero{padding:26px 30px;gap:18px;grid-template-columns:1.25fr .75fr;border-radius:24px}
.rlx-hero h2{font-size:clamp(1.55rem,3vw,2.15rem);margin:10px 0 8px}
.rlx-tx>p{font-size:.98rem;margin-bottom:10px}
.rlx-live .pstat{margin-bottom:10px;padding:6px 12px;font-size:.9rem}
.rlx-chips{margin-bottom:14px;gap:6px}.rlx-chips span{font-size:.84rem;padding:6px 10px}
.rlx-b{padding:11px 15px;font-size:.92rem;border-radius:12px}
.rlx-art svg{max-width:290px;overflow:hidden!important}
/* --- imprimante : erreur → inspection → réparée → elle imprime (cycle de 7 s) --- */
.dpx-pr{transform-box:fill-box;transform-origin:center bottom;animation:dpxShake 7s linear infinite}
@keyframes dpxShake{0%,2%,6%,10%,14%{transform:translateX(0)}1%,5%,9%,13%{transform:translateX(-3px) rotate(-.6deg)}3%,7%,11%{transform:translateX(3px) rotate(.6deg)}15%,58%{transform:none}62%,66%,70%,74%,78%,82%{transform:translateY(-1.5px)}64%,68%,72%,76%,80%,84%{transform:translateY(0)}}
.dpx-e1{animation:dpxE1 7s steps(1,end) infinite}@keyframes dpxE1{0%{opacity:1}6%{opacity:.2}12%{opacity:1}18%{opacity:.2}24%{opacity:1}52%{opacity:0}100%{opacity:0}}
.dpx-e2{opacity:0;animation:dpxE2 7s steps(1,end) infinite}@keyframes dpxE2{0%,51%{opacity:0}52%,100%{opacity:1}}
.dpx-l1{animation:dpxL1 7s steps(1,end) infinite}@keyframes dpxL1{0%,8%,16%,24%,32%,40%{opacity:1}4%,12%,20%,28%,36%,44%{opacity:.15}52%,100%{opacity:0}}
.dpx-l2{opacity:0;animation:dpxE2 7s steps(1,end) infinite}
.dpx-loupe{animation:dpxLoupe2 7s cubic-bezier(.45,0,.3,1) infinite}
@keyframes dpxLoupe2{0%,12%{transform:translate(300px,30px) scale(.6);opacity:0}18%{transform:translate(250px,60px) scale(1);opacity:1}28%{transform:translate(112px,128px)}38%{transform:translate(210px,126px)}46%{transform:translate(150px,104px)}52%{transform:translate(150px,104px) scale(1.12)}58%{transform:translate(270px,40px) scale(.6);opacity:0}100%{transform:translate(270px,40px) scale(.6);opacity:0}}
.dpx-ok{transform-box:fill-box;transform-origin:center;opacity:0;animation:dpxOk 7s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes dpxOk{0%,51%{opacity:0;transform:scale(.2)}56%{opacity:1;transform:scale(1.15)}60%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.6)}}
.dpx-in{animation:dpxFeed2 7s ease-in-out infinite}@keyframes dpxFeed2{0%,58%{transform:translateY(0)}86%,100%{transform:translateY(44px)}}
.dpx-out{animation:dpxPrint2 7s ease-in-out infinite}@keyframes dpxPrint2{0%,60%{transform:translateY(-84px)}88%{transform:translateY(0)}96%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.dpx-ln{transform-box:fill-box;transform-origin:left;animation:dpxLn 7s ease-out infinite}
.dpx-ln.l2{animation-name:dpxLn2}.dpx-ln.l3{animation-name:dpxLn3}.dpx-ln.l4{animation-name:dpxLn4}
@keyframes dpxLn{0%,64%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes dpxLn2{0%,69%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes dpxLn3{0%,74%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes dpxLn4{0%,79%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
.dpx-sh{transform-box:fill-box;transform-origin:center;animation:dpxSh 7s linear infinite}@keyframes dpxSh{0%,14%{transform:scaleX(.96)}7%{transform:scaleX(1.02)}}
/* --- point relais : la camionnette livre, le colis rejoint l'étagère (cycle de 6 s) --- */
.rlx-van{animation:rlxVan 6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes rlxVan{0%{transform:translateX(-170px)}22%,58%{transform:translateX(0)}60%{transform:translateX(-4px)}84%,100%{transform:translateX(-190px)}}
.rlx-van{opacity:1}
.rlx-wh{transform-box:fill-box;transform-origin:center;animation:rlxWh 6s linear infinite}
@keyframes rlxWh{0%{transform:rotate(-540deg)}22%,58%{transform:rotate(0)}84%,100%{transform:rotate(-600deg)}}
.rlx-pk{animation:rlxPk 6s cubic-bezier(.4,0,.3,1) infinite}
@keyframes rlxPk{0%,24%{transform:translate(40px,160px);opacity:0}27%{transform:translate(40px,150px);opacity:1}38%{transform:translate(170px,22px)}46%{transform:translate(252px,108px)}50%{transform:translate(252px,100px)}54%,88%{transform:translate(252px,112px);opacity:1}94%,100%{transform:translate(252px,112px);opacity:0}}
.rlx-qr{transform-box:fill-box;transform-origin:20% 100%;animation:rlxQr 6s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes rlxQr{0%,50%{transform:scale(0);opacity:0}56%{transform:scale(1.08);opacity:1}60%,90%{transform:scale(1);opacity:1}96%,100%{transform:scale(.4);opacity:0}}
.rlx-s2{transform-box:fill-box;transform-origin:center bottom;animation:rlxS2 6s ease-in-out infinite}@keyframes rlxS2{0%,52%,62%,100%{transform:none}56%{transform:scaleY(.94)}}
.rlx-sp circle{animation:rlxTw 2.4s ease-in-out infinite}
@media (max-width:960px){.dpx-hero,.rlx-hero{grid-template-columns:1fr;padding:20px 18px 18px}.dpx-art{width:min(210px,70%);margin:-4px auto -6px}.rlx-art svg{max-width:220px;margin:-6px auto -8px}}
@media (max-width:560px){.dpx-hero,.rlx-hero{border-radius:20px}.dpx-hero h2,.rlx-hero h2{font-size:1.5rem}.dpx-lede,.rlx-tx>p{font-size:.93rem}.dpx-chips,.rlx-chips{display:grid;grid-template-columns:1fr 1fr}.dpx-chips li,.rlx-chips span{font-size:.78rem;padding:6px 8px;justify-content:flex-start}.dpx-cta,.rlx-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dpx-cta .dpx-b,.rlx-cta .rlx-b{justify-content:center;padding:11px 8px;font-size:.86rem;text-align:center}.dpx-cta .dpx-b.pri,.rlx-cta .rlx-b.pri{grid-column:1/-1}.dpx-art{width:min(190px,62%)}.rlx-art svg{max-width:200px}}