body{margin:0;background:#F6F8F8}
html{scroll-behavior:smooth}
a{color:#1D5FAD}a:hover{color:#0F2430}
.btn{transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px);background:#174E8F;color:#FFFFFF}
.btn:focus-visible,.lnk:focus-visible,.lang:focus-visible{outline:2px solid #1D5FAD;outline-offset:2px}
.lnk{text-decoration:none;color:#4E6370;transition:color .2s}
.lnk:hover{color:#0F2430}
.lang{cursor:pointer;transition:background .2s,color .2s}
.lang:hover{color:#0F2430}
button.btn{border:0;cursor:pointer;font-family:inherit}
.inp{width:100%;box-sizing:border-box;height:48px;padding:0 14px;border:1px solid #D9E1E5;border-radius:8px;font:inherit;font-size:16px;color:#0F2430;background:#FFFFFF}
.inp:focus{outline:2px solid #1D5FAD;outline-offset:2px;border-color:#1D5FAD}
.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#0F2430}
.x:hover{background:#F6F8F8;color:#0F2430}
.x:focus-visible{outline:2px solid #1D5FAD;outline-offset:2px}
.pop{animation:pop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.fade{animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.rise{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.stroke{transform-origin:left center;transform:scaleX(0);animation:draw 1s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{transform:scaleX(1)}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,165,36,.55)}60%{box-shadow:0 0 0 7px rgba(245,165,36,0)}}
.disc{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* chat loop, 18s */
.m1{animation:m1 18s infinite}.m2{animation:m2 18s infinite}.m3{animation:m3 18s infinite}
.m4{animation:m4 18s infinite}.m5{animation:m5 18s infinite}.typing{animation:typing 18s infinite}
@keyframes m1{0%,3%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes m2{0%,14%{opacity:0;transform:translateY(10px)}17%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes m3{0%,26%{opacity:0;transform:translateY(10px)}29%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes typing{0%,34%{opacity:0}36%,47%{opacity:1}49%,100%{opacity:0}}
@keyframes m4{0%,48%{opacity:0;transform:translateY(10px)}51%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes m5{0%,56%{opacity:0;transform:translateY(10px)}59%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.dot{animation:dot 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-3px);opacity:1}}
.wv{display:block;width:3px;border-radius:2px;background:#0F2430;transform-origin:center;animation:wave 1.1s ease-in-out infinite}
.wv:nth-child(3n){animation-delay:.2s}.wv:nth-child(3n+1){animation-delay:.45s}.wv:nth-child(4n){animation-delay:.7s}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

.bar1{animation:bar1 9s infinite}.bar2{animation:bar2 9s infinite}.bar3{animation:bar3 9s infinite}
@keyframes bar1{0%{transform:scaleX(0)}28%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes bar2{0%,30%{transform:scaleX(0)}58%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes bar3{0%,60%{transform:scaleX(0)}88%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pg{transform-box:fill-box;transform-origin:left center;animation:pg 3s ease-in-out infinite}
.pg2{animation-delay:.3s}.pg3{animation-delay:.6s}
@keyframes pg{0%,15%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.chk{stroke-dasharray:30;stroke-dashoffset:30;animation:chk 3s ease-in-out infinite}
@keyframes chk{0%,20%{stroke-dashoffset:30}55%,100%{stroke-dashoffset:0}}

.rays{transform-box:view-box;transform-origin:300px 250px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.halo{transform-box:view-box;transform-origin:300px 250px;animation:halo 6s ease-out infinite}
.halo2{animation-delay:2s}.halo3{animation-delay:4s}
@keyframes halo{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.sun{transform-box:view-box;animation:sunrise 4s cubic-bezier(.2,.7,.2,1) both}
@keyframes sunrise{from{transform:translateY(80px)}to{transform:none}}

/* tablet */
@media (max-width: 900px){
.hide-sm{display:none}
#top,#haut{padding-top:40px !important;padding-bottom:88px !important;gap:48px !important}
}
/* phone */
@media (max-width: 640px){
header{padding:16px 20px !important}
header nav{gap:10px !important}
#top,#haut{padding:24px 20px 72px !important;gap:40px !important}
#top h1,#haut h1{line-height:1.02 !important}
#top p.d3,#haut p.d3{font-size:18px !important;line-height:27px !important}
#how>div,#comment>div{padding:72px 20px !important;gap:40px !important}
#vision>div,#vision-fr>div{padding:72px 20px 0 !important}
#pricing,#tarifs{padding:72px 20px 0 !important;gap:28px !important}
#join,#essayer{padding:96px 20px !important}
[role="dialog"]{padding:24px 20px !important;border-radius:20px !important}
}
/* very small phones */
@media (max-width: 380px){
header .lang{padding:6px 9px !important}
header .btn{padding:10px 12px !important;font-size:13px !important}
}

@media (prefers-reduced-motion: reduce){
*{animation:none !important}
.rise{opacity:1}.stroke{transform:none}.typing{opacity:0}
}

/* ---- standalone-site additions ---- */
*{box-sizing:border-box}
[hidden]{display:none !important}
.seg{border:0;font:inherit;font-size:14px;font-weight:600;padding:10px 16px;min-height:44px;border-radius:9999px;cursor:pointer;background:transparent;color:#4E6370;transition:background .2s,color .2s}
.seg[aria-pressed="true"]{background:#0F2430;color:#FFFFFF}
.seg:focus-visible{outline:2px solid #1D5FAD;outline-offset:2px}
body.modal-open{overflow:hidden}