/* Accueil et pages de contenu */
.night{background:radial-gradient(900px 420px at 15% -10%,rgba(124,92,255,.35),transparent 60%),radial-gradient(700px 380px at 95% 10%,rgba(232,79,208,.22),transparent 60%),#0b0d1a;color:#e8eaf3}
.night h1,.night h2,.night h3{color:#fff}
.night p{color:#b9bed2}
.night .lead{color:#cfd3e8}
.hero2{padding:44px 0 64px}
.hero2 h1{font-size:clamp(2rem,4.4vw,3.3rem);max-width:24ch;margin-bottom:.35em;line-height:1.1}
.hero2 .hero-sub{font-size:clamp(1rem,1.7vw,1.2rem);color:#c9cde0;max-width:46ch;margin:0 0 1em;line-height:1.4}
.qq{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 28px}
.qq div{border:1.5px solid #2a2f52;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.03);animation:qlit 8s infinite;opacity:.55}
.qq div:nth-child(2){animation-delay:2s}.qq div:nth-child(3){animation-delay:4s}.qq div:nth-child(4){animation-delay:6s}
.qq b{display:block;font:800 1.5rem var(--f-head);letter-spacing:-.02em}
.qq span{color:#cfd3e8;font-size:.95rem}
.qq div:nth-child(1) b{color:#b9a8ff}.qq div:nth-child(2) b{color:#ffd36b}.qq div:nth-child(3) b{color:#7de3d6}.qq div:nth-child(4) b{color:#ff9d86}
@keyframes qlit{0%,28%{opacity:1;border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-3px)}34%,100%{opacity:.55;border-color:#2a2f52;background:rgba(255,255,255,.03);transform:none}}
.hero-demo{padding:6px 0 70px}
.sec-tight{padding:56px 0}
.tint{background:#e9eaf3}
/* 4 panneaux */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pan{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pan .vis{height:170px;background:#0e1124;position:relative;overflow:hidden;display:grid;place-items:center}
.pan .txt{padding:16px 18px 20px}
.pan h3{margin:0 0 .35em;font-size:1.15rem}
.pan p{font-size:.95rem;color:var(--ink2);margin:0}
.pan .k{display:inline-block;font:800 1.9rem var(--f-head);letter-spacing:-.02em;margin-bottom:2px}
.pan:nth-child(1) .k{color:#6a4cf0}.pan:nth-child(2) .k{color:#c88a10}.pan:nth-child(3) .k{color:#0f8f82}.pan:nth-child(4) .k{color:#e0553a}
/* visuels animés : tournent seulement quand visibles */
.vis *{animation-play-state:paused!important}.on .vis *,.vis.on *{animation-play-state:running!important}
.stack{position:relative;width:224px;height:78px}
.stack .c{position:absolute;inset:0;background:#171b36;border:1px solid #2f3560;border-radius:12px;display:flex;align-items:center;gap:10px;padding:10px;color:#fff;font-weight:700;white-space:nowrap;animation:cyc 9s infinite;opacity:0}
.stack .c:nth-child(2){animation-delay:3s}.stack .c:nth-child(3){animation-delay:6s}
.stack .c small{display:block;color:#9aa1c4;font-weight:500}
@keyframes cyc{0%{opacity:0;transform:translateY(14px) rotate(-2deg)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-14px) rotate(2deg)}}
.mq{display:grid;gap:8px;position:absolute;left:0;top:50%;margin-top:-38px;height:76px}
.mq .row{display:flex;align-items:flex-start;height:34px;gap:8px;width:max-content;animation:mq 22s linear infinite}
.mq .row:nth-child(2){animation-direction:reverse;animation-duration:28s}
.mq span{background:#171b36;border:1px solid #2f3560;color:#e8eaf3;border-radius:99px;padding:4px 14px;font-weight:600;font-size:.9rem;white-space:nowrap}
.mq span:nth-child(4n+1){border-color:#7c5cff}.mq span:nth-child(4n+2){border-color:#f5b841}.mq span:nth-child(4n+3){border-color:#1fb5a5}.mq span:nth-child(4n){border-color:#e84fd0}
@keyframes mq{to{transform:translateX(-50%)}}
.tl{width:86%;position:relative;height:70px}
.tl .bk{position:absolute;top:22px;height:26px;border-radius:7px;background:#2a2f52;animation:bl 8s infinite}
.tl .bk:nth-child(1){left:0;width:24%;animation-delay:0s;--c:#7c5cff}.tl .bk:nth-child(2){left:28%;width:30%;animation-delay:2.2s;--c:#f5b841}.tl .bk:nth-child(3){left:62%;width:38%;animation-delay:4.6s;--c:#e84fd0}
@keyframes bl{0%,5%{background:#2a2f52}12%,30%{background:var(--c);box-shadow:0 0 18px var(--c)}40%,100%{background:#2a2f52;box-shadow:none}}
.tl .now{position:absolute;top:8px;bottom:6px;width:3px;border-radius:2px;background:#fff;box-shadow:0 0 12px #fff;animation:nw 8s linear infinite}
@keyframes nw{from{left:0}to{left:100%}}
.tl .lbl{position:absolute;top:-4px;left:0;right:0;display:flex;justify-content:space-between;color:#8a8fa8;font-size:.72rem}
.wh{width:92%;height:150px}
.wh .pa{fill:none;stroke:#ffd36b;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:3 9;animation:dash 1s linear infinite}
.wh .tag{animation:tg 4s infinite}
@keyframes tg{0%,20%{opacity:0}30%,90%{opacity:1}100%{opacity:0}}
/* services */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sv-t{background:#171b36;border:1px solid #2a2f52;border-radius:14px;padding:14px;color:#e8eaf3;display:grid;gap:6px;justify-items:start}
.sv-t .sq{width:38px;height:38px;border-radius:10px;background:#d7dbef;color:#13172e;display:grid;place-items:center;animation:sq 6s infinite}
.sv-t:nth-child(2) .sq{animation-delay:.6s}.sv-t:nth-child(3) .sq{animation-delay:1.2s}.sv-t:nth-child(4) .sq{animation-delay:1.8s}.sv-t:nth-child(5) .sq{animation-delay:2.4s}.sv-t:nth-child(6) .sq{animation-delay:3s}.sv-t:nth-child(7) .sq{animation-delay:3.6s}.sv-t:nth-child(8) .sq{animation-delay:4.2s}.sv-t:nth-child(9) .sq{animation-delay:4.8s}
@keyframes sq{0%,10%,100%{box-shadow:none;transform:none}4%{box-shadow:0 0 0 8px rgba(255,255,255,.18);transform:scale(1.08)}}
.sv-t b{font-weight:700}.sv-t small{color:#9aa1c4}
.infos3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.infos3 div{border-left:4px solid var(--c);background:rgba(255,255,255,.04);border-radius:0 12px 12px 0;padding:12px 16px}
.infos3 b{display:block;color:#fff}.infos3 span{color:#b9bed2;font-size:.95rem}
/* flux organisateur */
.flow{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:stretch;gap:0}
.fnode{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.fnode h3{margin:0 0 .3em;font-size:1.1rem}.fnode p{font-size:.94rem;color:var(--ink2);margin:0}
.fnode ul{margin:.6em 0 0;padding-left:1.1em;font-size:.93rem;color:var(--ink2)}
.farrow{position:relative;display:flex;align-items:center}
.farrow::before{content:'';height:3px;background:repeating-linear-gradient(90deg,var(--violet) 0 8px,transparent 8px 14px);width:100%;animation:fl 1s linear infinite;background-size:14px 3px}
.farrow::after{content:'';position:absolute;right:0;border-left:11px solid var(--violet);border-top:7px solid transparent;border-bottom:7px solid transparent}
@keyframes fl{to{background-position:14px 0}}
/* exemples */
.ex{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.exc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.exc:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(14,16,24,.5)}
.exc svg{display:block;width:100%;height:auto;background:#14172e}
.exc .t{padding:14px 16px 18px}.exc h3{margin:0 0 .25em;font-size:1.1rem}.exc p{margin:0;font-size:.92rem;color:var(--ink2)}
.exc .go{display:inline-block;margin-top:8px;font-weight:700;color:var(--violet-d)}
.exc svg .p{animation:pp 3.2s ease-in-out infinite}.exc svg .p:nth-child(2n){animation-delay:.8s}.exc svg .p:nth-child(3n){animation-delay:1.6s}
@keyframes pp{50%{opacity:.35}}
/* planification */
.pl{background:#0b0d1a;border:1px solid #2a2f52;border-radius:16px;padding:16px;color:#cfd3e3}
.pl-h{display:grid;grid-template-columns:110px repeat(8,1fr);font:600 .74rem var(--f-body);color:#7f86a0;padding-bottom:8px}.pl-h span{border-left:1px solid #262a3b;padding-left:5px}
.pl-l{display:grid;grid-template-columns:110px 1fr;border-top:1px solid #1d2132;align-items:center}
.pl-n{font:600 .82rem var(--f-body);color:#aab0c8}
.pl-t{position:relative;height:56px;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),#1d2132 calc(12.5% - 1px) 12.5%)}
.pb{position:absolute;top:10px;height:36px;border-radius:7px;padding:4px 8px;font:700 .78rem/1.15 var(--f-body);color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pb small{display:block;font-weight:500;opacity:.85;font-size:.68rem}
.pb.v{background:#7c5cff}.pb.g{background:#d49420;color:#201600}.pb.t{background:#1fb5a5;color:#06231f}.pb.p{background:#e84fd0}
.pb.m1{left:37.5%;width:17%;background:var(--coral);color:#2a0d05;box-shadow:0 0 0 2px #0b0d1a,0 0 0 4px var(--coral);animation:m1 9s infinite}
.pb.m2{left:43.75%;width:15%;background:var(--coral);color:#2a0d05;box-shadow:0 0 0 2px #0b0d1a,0 0 0 4px var(--coral);animation:m2 9s infinite}
@keyframes m1{0%,40%{background:var(--coral);box-shadow:0 0 0 2px #0b0d1a,0 0 0 4px var(--coral)}55%,100%{background:#3b82f6;color:#fff;box-shadow:none}}
@keyframes m2{0%,40%{left:43.75%;background:var(--coral);box-shadow:0 0 0 2px #0b0d1a,0 0 0 4px var(--coral)}58%,100%{left:62.5%;background:#3b82f6;color:#fff;box-shadow:none}}
.pl-cap{position:relative;height:26px;margin-top:10px;font-size:.9rem}
.pl-cap span{position:absolute;left:0}
.pl-cap .a{color:#ff9d86;animation:ca 9s infinite}.pl-cap .b{color:#4ee0a8;animation:cb 9s infinite}
@keyframes ca{0%,45%{opacity:1}52%,100%{opacity:0}}@keyframes cb{0%,52%{opacity:0}60%,100%{opacity:1}}
.pl-cap{} .vis-pl *{animation-play-state:paused}.on.vis-pl *{animation-play-state:running}
.two-col{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center}
.ticks{list-style:none;margin:0 0 1em;padding:0}.ticks li{padding:6px 0 6px 28px;position:relative;max-width:52ch}
.ticks li::before{content:'';position:absolute;left:2px;top:.9em;width:14px;height:8px;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-45deg) translateY(-50%)}
.night .ticks li{color:#cfd3e8}
.badge-gold{display:inline-block;background:var(--gold);color:#201600;font-weight:700;font-size:.8rem;padding:2px 12px;border-radius:99px;margin-bottom:10px}
/* production */
.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ref{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.ref h3{margin:0 0 .6em;font-size:1.05rem}
.docc{display:flex;gap:10px;align-items:center;background:#f4f5fa;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;animation:docin .6s both}
.docc i{width:26px;height:32px;border-radius:4px;background:var(--coral);flex:none;position:relative}.docc i::after{content:'PDF';position:absolute;inset:auto 0 3px 0;text-align:center;font:800 .55rem var(--f-body);color:#fff}
.docc b{display:block;font-size:.92rem}.docc small{color:var(--mute)}
.on .docc:nth-child(2){animation-delay:.15s}.on .docc:nth-child(3){animation-delay:.3s}.on .docc:nth-child(4){animation-delay:.45s}
@keyframes docin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.shrow{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;padding:7px 0;border-top:1px solid var(--line)}
.shrow span{color:var(--mute)}
/* langues + types */
.langs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.langs span{background:#fff;border:1.5px solid var(--ink);border-radius:99px;padding:3px 14px;font-weight:700}
.bigmq{overflow:hidden;margin-top:26px;display:grid;gap:10px}
.bigmq .row{display:flex;gap:10px;width:max-content;animation:mq 60s linear infinite}.bigmq .row:nth-child(2){animation-direction:reverse;animation-duration:70s}
.bigmq span{background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:6px 18px;font-weight:600;white-space:nowrap}
/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:'+';font:700 1.4rem var(--f-head);line-height:1}.faq details[open] summary::after{content:'−'}
.faq p{margin:0 0 14px;color:var(--ink2)}
.stack-gap>*+*{margin-top:0}
@media (max-width:980px){.four,.ex{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:1fr;gap:10px}.farrow{height:34px;justify-content:center}.farrow::before{width:3px;height:100%;background:repeating-linear-gradient(180deg,var(--violet) 0 8px,transparent 8px 14px)}.farrow::after{right:auto;bottom:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--violet);border-bottom:0}.two-col{grid-template-columns:1fr}.refs{grid-template-columns:1fr}.infos3{grid-template-columns:1fr}.qq{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.four,.ex{grid-template-columns:1fr}.pl-h,.pl-l{grid-template-columns:70px 1fr}.pl-n{font-size:.72rem}.pb small{display:none}}
@media (prefers-reduced-motion:reduce){.qq div{opacity:1;animation:none!important}.mq .row,.bigmq .row{animation:none!important}.vis *{animation-play-state:running!important}}

.cl-vis{background:rgba(255,255,255,.04);border:1px solid #2a2f52;border-radius:16px;padding:14px}
.cl-vis svg{display:block;width:100%;height:auto}
.net .ln{stroke:#4a4f86;stroke-width:1.2;stroke-dasharray:3 5;animation:dash 1.4s linear infinite;animation-play-state:paused}
.net .ph{fill:#d7dbef;opacity:.35;animation:phl 3s ease-in-out infinite;animation-play-state:paused}
.net .core{fill:#7c5cff;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 12px rgba(124,92,255,.8))}
.net .ct{fill:#fff;font:800 11px var(--f-body)}.net .ct.s{font-size:8.5px;font-weight:600}
@keyframes phl{50%{opacity:1}}
.curves .ax{stroke:#3a4070;stroke-width:1.5}
.curves .cu{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.4s ease forwards;animation-play-state:paused}
.curves .bad{stroke:#ff7a59;fill:none}.curves .good{stroke:#4ee0a8;fill:none;animation-delay:.6s}
.curves text.bad{fill:#ff9d86;stroke:none}.curves text.good{fill:#4ee0a8;stroke:none}
.curves .al{fill:#aeb4d0;font:600 9.5px var(--f-body)}
@keyframes draw{to{stroke-dashoffset:0}}
.cloud.on .net .ln,.cloud.on .net .ph,.cloud.on .curves .cu{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.curves .cu{stroke-dashoffset:0;animation:none}.net .ph{opacity:1;animation:none}}