@font-face{font-family:'Sharp Sans';src:url(fonts/sharp-sans-20bb13d7.woff) format('woff');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Sharp Sans';src:url(fonts/sharp-sans-9f0fc47c.woff) format('woff');font-weight:600 800;font-style:normal;font-display:swap}
body{margin:0;background:#FFFFFF}
a{color:#5B45E0}a:hover{color:#4632C2}
h1,h2,h3,p{margin:0}
@keyframes recblink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.rec-dot{animation:recblink 1.5s infinite}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(-50px,22px)}}
.drift{animation:drift 14s ease-in-out infinite alternate}
.drift2{animation:drift 18s ease-in-out infinite alternate-reverse}
.scr-3,.scr-2,.scr-1,.scr-r{opacity:0}
@keyframes scrA{0%,27%{opacity:1}30%,97%{opacity:0}100%{opacity:1}}
@keyframes scr3{0%,29%{opacity:0}30%,38%{opacity:1}39%,100%{opacity:0}}
@keyframes scr2{0%,38%{opacity:0}39%,47%{opacity:1}48%,100%{opacity:0}}
@keyframes scr1{0%,47%{opacity:0}48%,56%{opacity:1}57%,100%{opacity:0}}
@keyframes scrR{0%,56%{opacity:0}57%,96%{opacity:1}100%{opacity:0}}
@keyframes bar{0%,57%{transform:scaleX(0)}96%,100%{transform:scaleX(1)}}
.scr-a{animation:scrA 10s infinite}.scr-3{animation:scr3 10s infinite}.scr-2{animation:scr2 10s infinite}.scr-1{animation:scr1 10s infinite}.scr-r{animation:scrR 10s infinite}
.bar{transform-box:fill-box;transform-origin:left center;animation:bar 10s infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.marq{display:flex;width:max-content;animation:marq 40s linear infinite}
.marq-slow{animation-duration:55s}
.marq-rev{animation-direction:reverse}
.marq-wrap:hover .marq{animation-play-state:paused}
@keyframes intro{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.in1{animation:intro .9s cubic-bezier(.2,.7,.2,1) both}.in2{animation:intro .9s .12s cubic-bezier(.2,.7,.2,1) both}.in3{animation:intro .9s .24s cubic-bezier(.2,.7,.2,1) both}.in4{animation:intro .9s .36s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
.rv,.rv2,.rv3{animation:rise linear both;animation-timeline:view()}
.rv{animation-range:entry 0% cover 24%}
.rv2{animation-range:entry 6% cover 30%}
.rv3{animation-range:entry 12% cover 36%}
}
.kb{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floaty{animation:floaty 5s ease-in-out infinite}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.vblab{display:flex!important;flex-direction:column;gap:6px}
.vbin{height:48px;min-height:48px!important;line-height:48px;appearance:none;-webkit-appearance:none;margin:0}
select.vbin{padding-right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B4093' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;cursor:pointer}
textarea.vbin{height:auto;line-height:1.5}
.vbin:focus{outline:2px solid #4B4093;outline-offset:1px;border-color:#4B4093!important}
@media (max-width:860px){.navlink,.navsep{display:none!important}}
@media (max-width:760px){
.sec{padding-left:20px!important;padding-right:20px!important}
.sec[style*="padding: 104px"],.sec[style*="padding: 88px"]{padding-top:64px!important;padding-bottom:64px!important}
.sec > div[style*="padding: 104px 32px"]{padding:64px 0!important}
.heroIn{padding:64px 20px 140px!important}
.heroShade{background:linear-gradient(180deg,rgba(14,12,29,.75),rgba(14,12,29,.9))!important}
.heroCard{right:auto!important;left:20px;bottom:28px!important}
.ben{border-right:none!important}
.devcap{position:static!important;padding:18px 18px 22px;background:#111018}
.formgrid{grid-template-columns:minmax(0,1fr)}
#vb-form{padding:22px!important}
nav{padding-left:20px!important;padding-right:20px!important}
nav img{height:32px!important}
.marq-wrap ~ *{}
}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid4{grid-template-columns:minmax(0,1fr)}}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.grid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.grid5{grid-template-columns:minmax(0,1fr)}}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid3{grid-template-columns:minmax(0,1fr)}}
.lift{transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.lift:hover{translate:0 -6px;box-shadow:0 20px 44px rgba(21,19,43,.22)}
.zoom{transition:scale .7s cubic-bezier(.2,.7,.2,1)}
.lift:hover .zoom{scale:1.06}
.btn{transition:filter .2s ease}
.btn:hover{filter:brightness(1.1)}
.btn svg{transition:translate .25s ease}
.btn:hover svg{translate:4px 0}
@media (prefers-reduced-motion: reduce){
.kb,.floaty,.rec-dot,.drift,.drift2,.marq,.bar,.in1,.in2,.in3,.in4,.rv,.rv2,.rv3,.scr-a,.scr-3,.scr-2,.scr-1,.scr-r{animation:none!important}
.scr-a{opacity:1}.marq-wrap{overflow-x:auto}
.lift,.zoom,.btn svg{transition:none}
}
.heroMedia{position:absolute;top:0;bottom:0;right:0;width:64%;overflow:hidden}
.heroMedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroAlt{opacity:0;animation:kb 22s ease-in-out infinite alternate,heroFade 16s ease-in-out infinite}
@keyframes heroFade{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media (max-width:760px){.heroMedia{width:100%}}
@media (prefers-reduced-motion: reduce){.heroAlt{animation:none!important}}
.capSm{text-transform:none}
@media (max-width:760px){
.topnav{flex-wrap:nowrap!important;gap:10px!important;padding-top:12px!important;padding-bottom:12px!important}
.topnav .brand{gap:8px!important;min-width:0}
.topnav .brand img{height:24px!important}
.vbBadge{font-size:10px!important;letter-spacing:.08em!important;padding:5px 9px!important;gap:5px!important}
.vbBadge .rec-dot{width:6px!important;height:6px!important}
.topnav .btn{min-height:38px!important;padding:0 14px!important;font-size:13px;gap:6px!important;white-space:nowrap}
.topnav .btn svg{width:13px;height:13px}
.hideSm{display:none}
.capSm{text-transform:capitalize}
.heroMedia{position:relative!important;width:100%!important;aspect-ratio:2752/1536}
.heroMedia .kb{animation:none!important;transform:none!important}
.heroMedia .heroAlt{animation:heroFade 16s ease-in-out infinite!important}
.heroMedia .heroShade{background:linear-gradient(0deg,#0E0C1D 0%,rgba(14,12,29,0) 28%)!important}
.heroCard{display:none!important}
.heroIn{padding:24px 20px 56px!important}
div:has(> .logoRow){flex-direction:column;align-items:center!important;text-align:center}
.logoRow{justify-content:center;gap:18px 24px!important}
.logoRow img{height:auto!important;max-height:34px;max-width:72px;object-fit:contain}
.logoRow img[alt="Veolia"],.logoRow img[alt="Union des Entreprises de Moselle"]{max-width:110px;max-height:28px}
.infoRow{flex-direction:column}
.infoRow > span{display:block!important}
.infoRow > span svg{vertical-align:-3px;margin-right:8px}
}
@media (max-width:360px){.vbBadge{display:none!important}}