@font-face{font-family:Plex;src:url(/fonts/plex-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/plex-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/plex-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--blue:#2a70c1;--navy:#10223d;--sky:#3d9bff;--ink:#10223d;--muted:#4a5a72;--tint:#f2f6fb;--green:#22b07d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Plex,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
img,video,svg{max-width:100%}
a{color:var(--blue)}
h1,h2,h3{line-height:1.12;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.narrow{max-width:900px}
.center{text-align:center}
.sec{padding:88px 16px}
.wrap.sec{padding:88px 16px}
.sec h2{font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:12px}
.sub{font-size:18px;color:var(--muted);margin:0 0 40px;max-width:640px}
.tint{background:var(--tint)}

.top{background:var(--navy);border-bottom:1px solid #1f3658;position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.brand img{display:block;height:42px;width:auto}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{color:#e3ecf8;text-decoration:none;font-weight:600}
.nav a:hover{color:#fff}
.langs{color:#5a7397;font-size:14px;white-space:nowrap}
.langs a{color:#9fb2cc;text-decoration:none;padding:12px 2px}
.langs a[aria-current]{color:#fff;font-weight:700}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:12px;font-weight:700;text-decoration:none;font-size:17px}
.btn-wa{background:var(--sky);color:var(--navy);font-size:15px;padding:10px 18px}
.btn-light{background:var(--sky);color:var(--navy)}
.btn-ghost{border:1px solid #5a7397;color:#fff}
.btn:hover{filter:brightness(1.08)}

.hero{background:var(--navy);color:#fff;padding:72px 0 64px;text-align:center;overflow:hidden}
.badge{display:inline-block;border:1px solid var(--sky);color:#9cc8ff;padding:6px 14px;border-radius:999px;font-size:14px;margin:0 0 24px}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:700;max-width:920px;margin:0 auto}
.lead{font-size:clamp(17px,2vw,20px);color:#c4d3e8;max-width:700px;margin:24px auto 28px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{background:var(--tint);border-radius:16px;padding:28px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{margin:0;color:var(--muted)}
video{display:block;width:100%;height:auto;border-radius:18px;background:var(--navy);margin-top:24px}
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split>div{flex:1 1 380px}
.split img{flex:1 1 480px;min-width:0;height:auto;border-radius:16px;box-shadow:0 20px 50px rgba(16,34,61,.18)}
details{background:#fff;border-radius:12px;margin-top:12px;padding:0 20px}
summary{cursor:pointer;font-weight:700;font-size:18px;padding:18px 0;min-height:48px}
details p{margin:0 0 18px;color:var(--muted)}
.contact{background:var(--blue);color:#fff}
.contact .big{font-size:20px;margin:16px 0 24px}
.contact .big a{color:#fff}
.contact .btn-light{background:#fff}
.contact .btn-ghost{border-color:#cfe0f5}
.foot{background:var(--navy);color:#9fb2cc;padding:28px 0;text-align:center;font-size:14px}
.foot a{color:#cfe0f5}
.legal h1{font-size:36px;margin-bottom:24px}.legal h2{font-size:22px;margin:28px 0 8px}
.wa-float{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:30}
.wa-float svg{width:32px;height:32px}

@media (max-width:860px){.nav{display:none}.langs{margin-left:auto}.btn-wa span{display:none}.btn-wa{padding:10px 12px}}

/* Bannière animée : scène SVG unique, caméra en CSS (boucle 18 s). Source : site/maquette/banner.* */
.hb{width:100%;max-width:1200px;margin:40px auto 0}
.hb svg{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.hb-cam{animation:hbcam 18s infinite cubic-bezier(.7,0,.3,1)}
.hb-wire{fill:none;stroke:#3d9bff;stroke-opacity:.25;stroke-width:3}
.hb-lit{fill:none;stroke:#3d9bff;stroke-width:3.5;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0}
.hb-head{fill:none;stroke:#e6f2ff;stroke-width:7;stroke-linecap:round;stroke-dasharray:6 200;stroke-dashoffset:6;opacity:0;filter:drop-shadow(0 0 6px #3d9bff) drop-shadow(0 0 14px #3d9bff)}
.hb-a .hb-lit{animation:hblitA 18s infinite linear}.hb-a .hb-head{animation:hbheadA 18s infinite linear}
.hb-b .hb-lit{animation:hblitB 18s infinite linear}.hb-b .hb-head{animation:hbheadB 18s infinite linear}
.hb-c .hb-lit{animation:hblitC 18s infinite linear}.hb-c .hb-head{animation:hbheadC 18s infinite linear}
.hb-tab2{animation:hbtab2 18s infinite}
.hb-tap{fill:rgba(61,155,255,.35);stroke:#cfe6ff;stroke-width:2.5;transform-box:fill-box;transform-origin:center;opacity:0}
.hb-tap1{animation:hbtap1 18s infinite}.hb-tap2{animation:hbtap2 18s infinite}
.hb-toast{animation:hbtoast 18s infinite;opacity:0}
.hb-tkt{animation:hbtkt 18s infinite cubic-bezier(.3,0,.2,1)}
.hb-paid{animation:hbpaid 18s infinite;opacity:0}
.hb-cap{position:relative;height:30px;margin-top:16px;font-weight:600;font-size:18px;color:#fff}
.hb-cap span{position:absolute;left:0;right:0;opacity:0}
.hb-s0{animation:hbs0 18s infinite}.hb-s1{animation:hbs1 18s infinite}.hb-s2{animation:hbs2 18s infinite}.hb-s3{animation:hbs3 18s infinite}.hb-s4{animation:hbs4 18s infinite}
@keyframes hbcam{0%,5%{transform:none}9%,18%{transform:translate(163px,-249px) scale(2.3)}22%,27%{transform:none}31%,40%{transform:translate(-450px,-100px) scale(1.75)}44%,49%{transform:none}53%,62%{transform:translate(-879px,-83px) scale(1.45)}66%,70%{transform:none}74%,87%{transform:translate(-840px,-1030px) scale(2.4)}92%,100%{transform:none}}
@keyframes hblitA{0%,21%{opacity:0;stroke-dashoffset:100}22%{opacity:1}27%{stroke-dashoffset:0;opacity:1}40%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbheadA{0%,21%{opacity:0;stroke-dashoffset:6}22%{opacity:1}27%{opacity:1;stroke-dashoffset:-100}27.5%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes hblitB{0%,43%{opacity:0;stroke-dashoffset:100}44%{opacity:1}49%{stroke-dashoffset:0;opacity:1}62%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbheadB{0%,43%{opacity:0;stroke-dashoffset:6}44%{opacity:1}49%{opacity:1;stroke-dashoffset:-100}49.5%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes hblitC{0%,65%{opacity:0;stroke-dashoffset:100}66%{opacity:1}70%{stroke-dashoffset:0;opacity:1}87%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hbheadC{0%,65%{opacity:0;stroke-dashoffset:6}66%{opacity:1}70%{opacity:1;stroke-dashoffset:-100}70.5%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes hbtab2{0%,12.5%{opacity:0}13.5%,94%{opacity:1}96%,100%{opacity:0}}
@keyframes hbtap1{0%,10.5%{opacity:0;transform:scale(1.4)}11.5%{opacity:1;transform:scale(1)}12.5%{opacity:1;transform:scale(.6)}13.5%,100%{opacity:0;transform:scale(.6)}}
@keyframes hbtap2{0%,15%{opacity:0;transform:scale(1.4)}16%{opacity:1;transform:scale(1)}17%{opacity:1;transform:scale(.6)}18%,100%{opacity:0;transform:scale(.6)}}
@keyframes hbtoast{0%,32%{opacity:0;transform:translateY(-8px)}33.5%,40%{opacity:1;transform:none}42%,100%{opacity:0}}
@keyframes hbtkt{0%,54%{transform:none}59%,92%{transform:translateY(-70px)}96%,100%{transform:none}}
@keyframes hbpaid{0%,78%{opacity:0}80%,90%{opacity:1}93%,100%{opacity:0}}
@keyframes hbs0{0%,4%{opacity:1}7%,90%{opacity:0}93%,100%{opacity:1}}
@keyframes hbs1{0%,7%{opacity:0}9%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes hbs2{0%,29%{opacity:0}31%,41%{opacity:1}43%,100%{opacity:0}}
@keyframes hbs3{0%,51%{opacity:0}53%,63%{opacity:1}65%,100%{opacity:0}}
@keyframes hbs4{0%,72%{opacity:0}74%,88%{opacity:1}90%,100%{opacity:0}}
@media (max-width:600px){.hb-cap{font-size:15px;height:44px}}
@media (prefers-reduced-motion:reduce){.hb *{animation:none!important}.hb-s0{opacity:1}html{scroll-behavior:auto}}