:root{
  --c-prod:#FF5B2E; --c-log:#12B886; --c-qual:#12B886; --c-mag:#2F6BFF; --c-out:#F5A524;
  --c-prod-g:color-mix(in srgb, var(--c-prod) 22%, transparent);
  --c-log-g:color-mix(in srgb, var(--c-log) 22%, transparent);
  --c-qual-g:color-mix(in srgb, var(--c-qual) 22%, transparent);
  --c-mag-g:color-mix(in srgb, var(--c-mag) 22%, transparent);
  --c-out-g:color-mix(in srgb, var(--c-out) 22%, transparent);
}
body{margin:0;background:#0A0D13}
html{scroll-behavior:smooth}
a{color:#F4F5F7;text-decoration:none}a:hover{color:#FFFFFF}
a[x-apple-data-detectors],a[href^="tel:"]{color:inherit !important;text-decoration:none !important;font:inherit !important}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.navlinks a{color:#B4BBC8;transition:color .2s}.navlinks a:hover{color:#FFFFFF}
.lift{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
@media (hover:hover){.lift:hover{transform:translateY(-2px)}}
.card-h{transition:transform .35s ease,box-shadow .35s ease}
@media (hover:hover){.card-h:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(16,21,31,.14)}}
.lg-l{width:0.791em;height:0.931em;vertical-align:-0.193em;margin-right:0.03em;overflow:visible}
.ql-q{width:0.923em;height:0.923em;vertical-align:-0.159em;margin-right:0.01em;overflow:visible}
.ot-o{width:0.865em;height:0.904em;vertical-align:-0.139em;margin-right:0.02em;overflow:visible}
.mg-m{width:0.878em;height:0.738em;vertical-align:0;margin-right:0.03em;overflow:visible}
.spin{animation:spin 90s linear infinite}
.spin-r{animation:spin 90s linear infinite reverse}
.spin-a{animation:spin 8s linear infinite}
.spin-b{animation:spin 13s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.breathe{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(244,245,247,0),0 0 60px rgba(244,245,247,.08)}50%{box-shadow:0 0 0 18px rgba(244,245,247,.04),0 0 110px rgba(244,245,247,.16)}}
.ee{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;background-size:300% 100%;font-weight:700;padding:0 0.01em;animation:eeShine 5s linear infinite,eeIn 1.1s cubic-bezier(.2,1.6,.4,1) both,eeFloat 3.2s ease-in-out 1.2s infinite;filter:drop-shadow(0 0 22px rgba(255,91,46,.35))}
.ee2{animation-delay:-2.5s,.15s,2.8s}
@keyframes eeShine{to{background-position:300% 0}}
@keyframes eeIn{from{opacity:0;transform:translateY(-0.6em) scale(1.4) rotate(-12deg)}}
@keyframes eeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.08em)}}
.caret{display:inline-block;width:2px;height:1.05em;background:#F4F5F7;vertical-align:-0.18em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.truck{animation:truck 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes truck{0%{left:0%}45%,55%{left:50%}100%{left:100%}}
.blip{animation:blip 2.4s ease-out infinite}
@keyframes blip{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.step{transition:opacity .5s ease,transform .5s ease}
.chip{transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.field{background:#0A0D13;border:1px solid #2A3243;border-radius:12px;color:#F4F5F7;font:inherit;font-size:15px;padding:13px 14px;box-sizing:border-box;width:100%;outline:none;transition:border-color .2s}
.field:focus{border-color:#8A93A3}
@media (max-width:820px){.navlinks{display:none !important}.flow-wrap{height:auto !important}.flow-pin{position:static !important;height:auto !important;padding-top:120px !important;padding-bottom:120px !important}}
@supports (animation-timeline: view()){
.rv,.rv2,.rv3,.rv4{animation:rv linear both;animation-timeline:view()}
.rv{animation-range:entry 0% cover 28%}
.rv2{animation-range:entry 10% cover 34%}
.rv3{animation-range:entry 20% cover 40%}
.rv4{animation-range:entry 30% cover 46%}
@media (max-width:820px){.rv2,.rv3,.rv4{animation-range:entry 0% cover 28%}}
@keyframes rv{from{opacity:0;transform:translateY(64px)}}
.rl{animation:rl linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
@keyframes rl{from{opacity:0;transform:translateX(-90px)}}
.rr{animation:rr linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
@keyframes rr{from{opacity:0;transform:translateX(90px)}}
.zoom{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
@keyframes zoom{from{opacity:0;transform:perspective(1400px) rotateX(18deg) scale(.86) translateY(80px)}}
.gx,.gx2,.gx3,.gx4{animation:gx linear both;animation-timeline:view();transform-origin:left center}
.gx{animation-range:entry 40% cover 48%}.gx2{animation-range:entry 55% cover 56%}.gx3{animation-range:entry 70% cover 62%}.gx4{animation-range:entry 85% cover 68%}
@keyframes gx{from{transform:scaleX(0)}}
.gy,.gy2,.gy3{animation:gy linear both;animation-timeline:view();transform-origin:center bottom}
.gy{animation-range:entry 50% cover 50%}.gy2{animation-range:entry 65% cover 56%}.gy3{animation-range:entry 80% cover 62%}
@keyframes gy{from{transform:scaleY(0)}}
.ck,.ck2,.ck3,.ck4{animation:ck linear both;animation-timeline:view()}
.ck{animation-range:entry 60% cover 44%}.ck2{animation-range:entry 75% cover 50%}.ck3{animation-range:entry 90% cover 56%}.ck4{animation-range:cover 40% cover 64%}
@keyframes ck{from{opacity:0;transform:scale(.3) rotate(-20deg)}}
.hero{view-timeline-name:--hero}
.hero-out{animation:heroOut linear both;animation-timeline:--hero;animation-range:exit 0% exit 85%}
@keyframes heroOut{to{opacity:0;transform:translateY(-90px) scale(.94);filter:blur(10px)}}
.orbit-out{animation:orbitOut linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes orbitOut{to{opacity:0;transform:scale(1.45) rotate(25deg)}}
.band{view-timeline-name:--band}
.slide{animation:slide linear both;animation-timeline:--band;animation-range:cover 0% cover 100%}
@keyframes slide{from{transform:translateX(4%)}to{transform:translateX(-38%)}}
.slide-r{animation:slideR linear both;animation-timeline:--band;animation-range:cover 0% cover 100%}
@keyframes slideR{from{transform:translateX(-38%)}to{transform:translateX(4%)}}
.flow-wrap{view-timeline-name:--flow}
.ln,.nd{animation-timeline:--flow;animation-fill-mode:both;animation-timing-function:linear}
.ln{animation-name:ln}
@keyframes ln{from{opacity:.14;filter:blur(1.5px)}}
.nd{animation-name:nd}
@keyframes nd{from{opacity:.25;transform:translateX(24px) scale(.92);filter:grayscale(1)}}
.r1{animation-range:contain 0% contain 12%}.r2{animation-range:contain 12% contain 28%}.r3{animation-range:contain 28% contain 44%}.r4{animation-range:contain 44% contain 60%}.r5{animation-range:contain 60% contain 76%}.r6{animation-range:contain 76% contain 90%}
.rail{animation:rail linear both;animation-timeline:--flow;animation-range:contain 6% contain 76%;transform-origin:center top}
@keyframes rail{from{transform:scaleY(0)}}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* Intégration 2eSolutions : bouton « Espace client » et en-tête sur petit écran */
.client-link:hover{border-color:#8A93A3}
@media (max-width:560px){.demo-cta{display:none !important}}