/* L'avantage n°1 d'une fonctionnalité : une phrase, et une scène qui la démontre (avantages.py).
   La scène se mesure sur 40 × 29 em, 1 em valant 1/40 de sa largeur. Sans .pv-go, tout est à son état final. */
.av{padding-block:clamp(80px,10vw,150px)}
.av__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,84px);align-items:center}
.av__h{font-size:clamp(38px,4.4vw,64px);line-height:1.03;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.av__h span{color:var(--glacier)}
.av__t .chapo{margin-top:22px;max-width:30em}
.av__v{position:relative;aspect-ratio:40/29;container-type:inline-size}
.av .av-sc{display:block;overflow:visible;background:none;font-size:calc(100cqw / 40);perspective:80em;line-height:1.25}
.av .av-sc i{display:block;font-style:normal}
.av .av-sc > *{position:absolute}
.av .av-sc::before{content:"";position:absolute;inset:4% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(78,129,238,.3),rgba(78,129,238,.08) 60%,transparent);pointer-events:none}
@media (max-width:900px){.av__g{grid-template-columns:minmax(0,1fr)}}

/* le temps */
.pv-anim:not(.pv-go) .ai,.pv-anim:not(.pv-go) .vol{opacity:0}
.pv-go .ai{animation:av-in var(--t,.8s) var(--e,cubic-bezier(.16,1,.3,1)) calc(var(--a,0) * 1s) both}
.av-rs{--e:cubic-bezier(.34,1.56,.64,1)}
@keyframes av-in{from{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(var(--s,1)) rotate(var(--r,0deg))}}
.av .aio{opacity:0}
.pv-go .aio{animation:av-io var(--t,2s) ease calc(var(--a,0) * 1s) both}
@keyframes av-io{0%{opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(var(--s,1))}14%,86%{opacity:1;transform:none}100%{opacity:0}}
.pv-go .vol{animation:av-vol var(--t,3s) cubic-bezier(.6,0,.2,1) calc(var(--a,0) * 1s) both}
@keyframes av-vol{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.92)}16%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}58%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}100%{opacity:1;transform:none}}
.av-dr{stroke-dasharray:100}
.pv-anim:not(.pv-go) .av-dr{stroke-dashoffset:100}
.pv-go .av-dr{animation:av-dr var(--t,1s) ease-in-out calc(var(--a,0) * 1s) both}
@keyframes av-dr{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.pv-anim:not(.pv-go) .av-w{clip-path:inset(0 100% 0 0)}
.pv-go .av-w{animation:av-w .5s ease calc(var(--a,0) * 1s) both}
@keyframes av-w{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* les pièces communes */
.av-g{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2.4em 4em -1.6em rgba(2,6,20,.95);border-radius:1.3em}
.av-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.av .av-p{position:absolute;display:inline-flex;align-items:center;gap:.6em;padding:.74em 1.26em;border-radius:999px;background:rgba(13,18,32,.88);color:#F0EEE7;font-weight:700;letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1em 2em -.8em rgba(0,0,0,.9);z-index:6}
.av .av-p > span{font-size:1.2em}
.av-p--v{color:#7EE2A4}.av .av-p--v{box-shadow:inset 0 0 0 1px rgba(126,226,164,.4),0 0 2.2em -.5em rgba(34,197,94,.75),0 1em 2em -.8em rgba(0,0,0,.9);color:#7EE2A4}
.av .av-p--o{color:#F4A86E;box-shadow:inset 0 0 0 1px rgba(234,131,60,.55),0 0 2.2em -.5em rgba(234,131,60,.8),0 1em 2em -.8em rgba(0,0,0,.9)}
.av .av-p--b{color:#90B8FD;box-shadow:inset 0 0 0 1px rgba(144,184,253,.45),0 1em 2em -.8em rgba(0,0,0,.9)}
.av-co{width:1.4em;height:1.4em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.av-eq{position:absolute;pointer-events:none;z-index:4}
.av-eq::before,.av-eq::after{content:"";position:absolute;width:2.1em;height:2.1em;max-width:60%;max-height:60%;border:.3em solid var(--c,var(--orange));filter:drop-shadow(0 0 .5em var(--c,rgba(234,131,60,.8)))}
.av-eq::before{left:-.55em;top:-.55em;border-right:0;border-bottom:0;border-top-left-radius:.5em}
.av-eq::after{right:-.55em;bottom:-.55em;border-left:0;border-top:0;border-bottom-right-radius:.5em}
.av-cu{width:2.5em;height:2.5em;z-index:7}
.av-cu svg{width:100%;height:100%;fill:#fff;stroke:#0B101E;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 .4em .6em rgba(0,0,0,.6))}

/* navigateur */
.vn-g{left:50%;translate:-50% 0;top:1.6em;height:23.4em;border-radius:1.3em;box-shadow:inset 0 0 0 1px rgba(144,184,253,.16)}
.vn-p{left:50%;translate:-50% 0;top:1.6em;width:34em;height:23.4em;background:linear-gradient(170deg,#1B2438,#11172A)}
.pv-go .vn-p{animation:vn-w 10s cubic-bezier(.65,0,.25,1) .5s both}
@keyframes vn-w{0%,20%{width:34em}35%,74%{width:13em}90%,100%{width:34em}}
.vn-b{display:flex;align-items:center;gap:.4em;height:2.5em;padding:0 1em;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap;overflow:hidden}
.av .av-sc .vn-b i{width:.65em;height:.65em;border-radius:50%;background:rgba(255,255,255,.3);flex:none}
.vn-b span{margin-left:.6em;font-size:.95em;color:#A8A49C}
.vn-c{display:flex;flex-direction:column;gap:.7em;padding:1em}
.vn-h{height:1.2em;width:42%;border-radius:.3em;background:rgba(255,255,255,.26)}
.vn-im{height:6em;border-radius:.8em;background:linear-gradient(115deg,#2F5CC4,#90B8FD 55%,#EA833C)}
.vn-l{height:.7em;width:100%;border-radius:.3em;background:rgba(255,255,255,.14)}
.vn-t{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.35em;width:100%;padding:.5em;border-radius:.7em;background:#222C43;flex:none}
.av .av-sc .vn-t > i:not(.av-eq){height:2em;border-radius:.3em;background:rgba(255,255,255,.14)}
.pv-go .vn-t{animation:vn-t 10s cubic-bezier(.65,0,.25,1) .5s both}
@keyframes vn-t{0%,20%{width:100%;box-shadow:0 0 0 .16em rgba(234,131,60,0)}35%,62%{width:24em;box-shadow:0 0 0 .16em #EA833C}74%,100%{width:100%;box-shadow:0 0 0 .16em rgba(126,226,164,0)}}
.vn-bt{align-self:flex-start;padding:.5em 1.1em;border-radius:.6em;background:#4E81EE;color:#fff;font-weight:800;font-size:1.05em}
.vn-cu{left:6.4em;top:22.2em}

/* coffre */
.vc-v{left:.6em;top:5em;width:19em;height:19em;border-radius:50%;background:radial-gradient(circle at 34% 28%,#2E3A58,#10162A 72%);box-shadow:inset 0 0 0 .22em rgba(144,184,253,.3),inset 0 0 3em rgba(0,0,0,.8),0 3em 5em -2em rgba(2,6,20,.95),0 0 5em -1em rgba(78,129,238,.55)}
.vc-gr{position:absolute;inset:.8em;border-radius:50%;background:repeating-conic-gradient(rgba(190,210,255,.5) 0 1.4deg,transparent 1.4deg 12deg);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);mask:radial-gradient(closest-side,transparent 88%,#000 89%)}
.vc-po{position:absolute;inset:3.1em;border-radius:50%;background:linear-gradient(150deg,#39486C,#141B30);box-shadow:inset 0 0 0 .12em rgba(255,255,255,.2),0 1em 2em rgba(0,0,0,.6)}
.pv-go .vc-gr{animation:vc-gr 2.6s cubic-bezier(.3,.6,.2,1) .2s both}
@keyframes vc-gr{from{transform:rotate(120deg)}}
.vc-de{position:absolute;inset:.8em;border-radius:50%}
.pv-go .vc-de{animation:vc-de 2.3s cubic-bezier(.5,0,.15,1) .4s both}
@keyframes vc-de{from{transform:rotate(-240deg)}}
.av .av-sc .vc-de i{position:absolute;left:50%;top:0;bottom:0;width:.8em;margin-left:-.4em;border-radius:.4em;background:linear-gradient(180deg,#90B8FD,rgba(144,184,253,.15) 30%,rgba(144,184,253,.15) 70%,#90B8FD)}
.vc-ca{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:4.8em;height:4.8em;border-radius:50%;background:#0F1526;box-shadow:inset 0 0 0 .12em rgba(144,184,253,.5),0 0 2.4em rgba(78,129,238,.8);color:#90B8FD}
.vc-ca svg{width:2.4em;height:2.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vc-tu{left:18.6em;top:13.7em;width:11.6em;height:1.6em;border-radius:1em;background:rgba(144,184,253,.08);box-shadow:inset 0 0 0 1px rgba(144,184,253,.35);overflow:hidden;z-index:2}
.vc-tl{position:absolute;inset:0;background:linear-gradient(90deg,rgba(78,129,238,.55),rgba(144,184,253,.1))}
.av .av-sc .vc-d{position:absolute;left:0;top:50%;width:.65em;height:.65em;margin-top:-.32em;border-radius:50%;background:#fff;box-shadow:0 0 .8em #90B8FD;opacity:0}
.pv-go .vc-d{animation:vc-d 1.5s linear calc(var(--a) * 1s) both}
@keyframes vc-d{0%{opacity:0;transform:translateX(0)}18%,82%{opacity:1}100%{opacity:0;transform:translateX(11em)}}
.vc-s{left:30em;top:8.8em;width:9.4em;height:11.4em;padding:.9em;display:flex;flex-direction:column;gap:.7em}
.vc-r{flex:1;display:flex;align-items:center;gap:.6em;padding:0 .7em;border-radius:.6em;background:rgba(5,9,20,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.av .av-sc .vc-led{width:.8em;height:.8em;border-radius:50%;background:#7EE2A4;box-shadow:0 0 1em #22C55E;flex:none}
.vc-tr{flex:1;height:.42em;border-radius:.3em;background:rgba(255,255,255,.14)}
.vc-b{left:13.4em;top:1.4em;display:flex;align-items:center;gap:.7em;padding:.9em 1.2em;font-size:1.2em;font-weight:700;color:#F0EEE7;border-radius:1.1em 1.1em 1.1em .3em;white-space:nowrap;font-size:1.15em}
.vc-av{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#4E81EE;color:#fff;flex:none}
.vc-av svg{width:1.2em;height:1.2em;fill:currentColor}

/* agent */
.va-t path{stroke:rgba(144,184,253,.35);stroke-width:1.1}
.va-t .va-fl{stroke:#EAF1FF;stroke-width:2;stroke-dasharray:6 94;stroke-linecap:round;filter:drop-shadow(0 0 3px #90B8FD);opacity:0}
.pv-go .va-fl{animation:va-fl 2.6s linear calc(var(--a) * 1s + 2.2s) infinite}
@keyframes va-fl{0%{stroke-dashoffset:6;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-94;opacity:0}}
.va-or{left:10.4em;top:9.5em;width:19.2em;height:9em;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(144,184,253,.3);transform:rotate(-16deg)}
.va-or--2{transform:rotate(22deg);width:16em;left:12em;top:9.8em;height:8.4em;box-shadow:inset 0 0 0 1px rgba(234,131,60,.3)}
.pv-go .va-or{animation:va-or 12s linear infinite}
@keyframes va-or{to{transform:rotate(344deg)}}
.pv-go .va-or--2{animation:va-or2 16s linear infinite}
@keyframes va-or2{from{transform:rotate(22deg)}to{transform:rotate(-338deg)}}
.va-o{left:15.2em;top:9.2em;width:9.6em;height:9.6em;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 34% 26%,#90B8FD,#4E81EE 42%,#1A3376 90%);box-shadow:0 0 5em rgba(78,129,238,.95),inset 0 0 1.4em rgba(255,255,255,.3);color:#fff;z-index:3}
.va-o svg{width:4.6em;height:4.6em;fill:currentColor}
.va-h{position:absolute;inset:-1.4em;border-radius:50%;box-shadow:0 0 0 1px rgba(144,184,253,.5)}
.pv-go .va-h{animation:va-h 2.6s ease-out infinite}
@keyframes va-h{from{transform:scale(.8);opacity:.9}to{transform:scale(1.5);opacity:0}}
.av .av-p--n{color:#F0EEE7}

/* projets */
.vp-fb{left:3.8em;top:6em;width:32.4em;height:19.6em;border-radius:1.2em;background:linear-gradient(180deg,#1A2440,#0E1426);box-shadow:inset 0 0 0 1px rgba(144,184,253,.2)}
.vp-c{width:11em;height:9em;padding:.8em 1em;display:flex;align-items:center;gap:.5em;align-items:flex-start;background:linear-gradient(160deg,#2A3656,#18203A);font-weight:800;color:#F0EEE7}
.av .av-sc .vp-c i{width:.8em;height:.8em;margin-top:.22em;border-radius:50%;flex:none}
.vp-c b{font-size:1.1em}
.vp-ff{left:2.8em;top:14.6em;width:34.4em;height:11em;padding:1.6em 2em;display:flex;flex-direction:column;justify-content:space-between;border-radius:1.2em;background:linear-gradient(140deg,#4E81EE,#2F5CC4 60%,#203149);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2.5em 4em -1.6em rgba(2,6,20,.95);z-index:4}
.vp-ff b{font-size:2.3em;letter-spacing:-.04em;color:#fff;font-weight:800}
.vp-eq{display:flex}
.av .av-sc .vp-eq i{display:grid;place-items:center;width:2.5em;height:2.5em;margin-right:-.5em;border-radius:50%;box-shadow:0 0 0 .18em #2F5CC4;color:#fff;font-weight:800}
.av .av-sc .vp-eq .vp-ag{background:#0B101E;margin-left:.6em;color:#90B8FD}
.vp-fi{position:absolute;right:1.6em;top:50%;translate:0 -50%;width:7.6em;height:7.6em;color:rgba(255,255,255,.17)}
.vp-fi svg{width:100%;height:100%;fill:currentColor}
.vp-ag svg{width:1.5em;height:1.5em;fill:currentColor}

/* studio */
.vs-st{inset:0;transform-style:preserve-3d;transform:rotateY(24deg) rotateX(5deg)}
.vs-c{position:absolute;left:17.4em;top:6.8em;width:21em;height:15.4em;padding:1.3em;border-radius:1em;transform:translate3d(calc(var(--n) * -2.4em),calc(var(--n) * -1.3em),calc(var(--n) * -5em));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2.4em 3em -1.4em rgba(2,6,20,.9);display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.vs-1{background:#1A1F2E}.vs-2{background:#232C45}.vs-3{background:linear-gradient(140deg,#6B4A2F,#2A2230)}.vs-4{background:radial-gradient(14em 11em at 76% 20%,#F4A86E,#B4531F 56%,#3C1A0B)}
.vs-l{height:.8em;border-radius:.3em;background:rgba(255,255,255,.2)}
.vs-bx{flex:1;border-radius:.6em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.vs-bx--b{background:linear-gradient(120deg,#4E81EE,#90B8FD)}
.vs-t2{height:1.4em;width:50%;border-radius:.3em;background:rgba(255,255,255,.4)}
.vs-ti{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:3.5em;line-height:.98;letter-spacing:-.03em;color:#FFF5EA;font-weight:400}
.vs-fl{position:absolute;right:1.5em;bottom:2.2em;width:4.2em;height:6.4em;border-radius:.8em .8em 1em 1em;background:linear-gradient(170deg,rgba(255,240,220,.9),rgba(255,180,120,.55));box-shadow:0 1em 2em rgba(60,20,0,.5)}
.vs-tag{position:absolute;left:1.3em;bottom:.8em;font-size:.92em;font-weight:700;color:rgba(255,255,255,.75)}

/* 3D */
.v3-cam{left:9em;top:6.4em;width:22em;height:16em;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-26deg)}
.pv-go .v3-cam{animation:v3-cam 13s cubic-bezier(.4,0,.3,1) 0s both}
@keyframes v3-cam{0%,20%{transform:rotateX(0) rotateZ(0) scale(1.08)}36%{transform:rotateX(58deg) rotateZ(-42deg)}100%{transform:rotateX(58deg) rotateZ(-26deg)}}
.v3-sol{position:absolute;inset:0;border-radius:.3em;background:linear-gradient(135deg,rgba(144,184,253,.2),rgba(47,92,196,.14)),repeating-linear-gradient(0deg,rgba(144,184,253,.14) 0 1px,transparent 1px 2em),repeating-linear-gradient(90deg,rgba(144,184,253,.14) 0 1px,transparent 1px 2em);box-shadow:0 0 4em rgba(78,129,238,.5)}
.v3-pl path{stroke:#EAF1FF;stroke-width:1.4;stroke-linejoin:round}
.av .av-sc .v3-b{position:absolute;border-radius:.3em;background:linear-gradient(135deg,#F4A86E,#B4531F);transform:translateZ(.9em);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.av .av-sc .v3-m{position:absolute;transform-style:preserve-3d;background:linear-gradient(0deg,rgba(144,184,253,.95),rgba(78,129,238,.7));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.av .av-sc .v3-mx{height:5em;transform-origin:0 0;transform:rotateX(90deg)}
.av .av-sc .v3-my{width:5em;transform-origin:0 0;transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(47,92,196,.95),rgba(144,184,253,.7))}
.pv-anim:not(.pv-go) .v3-m{opacity:0}
.pv-go .v3-mx{animation:v3-mx 8.2s var(--courbe,cubic-bezier(.16,1,.3,1)) calc(2.6s + var(--k) * .07s) both}
.pv-go .v3-my{animation:v3-my 8.2s var(--courbe,cubic-bezier(.16,1,.3,1)) calc(2.6s + var(--k) * .07s) both}
@keyframes v3-mx{0%{transform:rotateX(90deg) scaleY(0)}10%,52%{transform:rotateX(90deg) scaleY(.68)}66%,100%{transform:rotateX(90deg) scaleY(1)}}
@keyframes v3-my{0%{transform:rotateY(-90deg) scaleX(0)}10%,52%{transform:rotateY(-90deg) scaleX(.68)}66%,100%{transform:rotateY(-90deg) scaleX(1)}}

/* cutter */
.vk-tl{left:1em;top:6.6em;width:38em;padding:1.1em 0;transform:rotateX(14deg) rotateZ(-2deg);transform-style:preserve-3d}
.vk-pi{display:flex;gap:.28em;height:8.4em;justify-content:center}
.vk-pi--s{height:4.4em;margin-top:.6em}
.vk-c{position:relative;flex:none;border-radius:.7em;background-size:100% 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1.6em 2.6em -1.2em rgba(2,6,20,.95)}
.vk-c::after{content:"";position:absolute;inset:.45em;border-radius:.4em;background:repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0 2.2em,rgba(255,255,255,.04) 2.2em 2.3em)}
.vk-o{flex:none;border-radius:.6em;background:rgba(144,184,253,.07);box-shadow:inset 0 0 0 1px rgba(144,184,253,.2);overflow:hidden;padding:.3em}
.vk-o svg{width:100%;height:100%;fill:#90B8FD;display:block}
.vk-x{width:0;opacity:0;margin-right:-.28em}
.pv-anim:not(.pv-go) .vk-x{width:var(--w);opacity:1;margin-right:0}
.pv-go .vk-c.vk-x{animation:vk-x 11s cubic-bezier(.65,0,.25,1) 0s both}
.pv-go .vk-o.vk-x{animation:vk-y 11s cubic-bezier(.65,0,.25,1) 0s both}
@keyframes vk-x{0%,50%{width:var(--w);opacity:1;transform:none;margin-right:0}58%{width:var(--w);opacity:.9;transform:translateY(-8em) rotate(5deg);margin-right:0}68%,100%{width:0;opacity:0;transform:translateY(-10em) rotate(7deg);margin-right:-.28em}}
@keyframes vk-y{0%,54%{width:var(--w);opacity:1;margin-right:0}68%,100%{width:0;opacity:0;margin-right:-.28em}}
.av .av-sc .vk-f{position:absolute;left:-.95em;top:50%;width:1.6em;height:1.6em;margin-top:-.8em;background:#fff;border-radius:.35em;transform:rotate(45deg);box-shadow:0 0 1.6em #90B8FD;z-index:3}
.pv-go .vk-f{animation-name:vk-f}
@keyframes vk-f{from{opacity:0;transform:rotate(45deg) scale(.1)}}
.vk-ph{position:absolute;top:0;bottom:0;left:64%;width:.2em;background:#EA833C;box-shadow:0 0 1em #EA833C;border-radius:.2em;z-index:4}
.vk-ph::before{content:"";position:absolute;left:50%;top:-.3em;width:1em;height:1em;margin-left:-.5em;background:#EA833C;border-radius:.2em .2em 50% 50%}
.pv-go .vk-ph{animation:vk-ph 11s linear both}
@keyframes vk-ph{from{left:6%}to{left:64%}}

/* message */
.vm-m{left:.6em;width:15.6em;height:4.1em;display:flex;align-items:center;gap:.7em;padding:0 .8em;border-radius:.9em}
.vm-m--on{box-shadow:inset 0 0 0 1px rgba(144,184,253,.8),0 0 2.4em -.4em rgba(78,129,238,.9)}
.av .av-sc .vm-av{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;color:#fff;font-weight:800;flex:none}
.vm-li{flex:1;display:flex;flex-direction:column;gap:.35em;min-width:0}
.av .av-sc .vm-li i{height:.45em;border-radius:.3em;background:rgba(255,255,255,.22)}
.vm-tg{padding:.22em .55em;border-radius:999px;background:rgba(144,184,253,.18);color:#BBD3FE;font-size:.82em;font-weight:800}
.vm-d{left:17.6em;top:1.8em;width:21.8em;height:21.6em;padding:1.5em;display:flex;flex-direction:column;gap:.85em;background:linear-gradient(160deg,#1F2A45,#10172A)}
.vm-e{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4em;font-size:1.25em;color:#F0EEE7}
.av .av-sc .vm-et{left:50%;translate:-50% 0;bottom:5.6em;color:#90B8FD}
.vm-d{position:absolute}
.av .vm-et > span{font-size:1.05em}
.vm-l{height:.72em;width:100%;border-radius:.3em;background:rgba(255,255,255,.2)}
.vm-bt{position:relative;margin-top:auto;display:grid;place-items:center;height:3.5em;border-radius:1em;background:#4E81EE;color:#fff;font-size:1.25em;font-weight:800;box-shadow:0 1.2em 2.4em -.8em rgba(78,129,238,1)}
.av .av-sc .vm-bt i{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(144,184,253,.75)}
.pv-go .vm-bt i{animation:vm-ha 1.5s ease-out 3.4s 3}
@keyframes vm-ha{to{box-shadow:0 0 0 1.3em rgba(144,184,253,0)}}
.pv-go .vm-bt{animation:vm-ap .36s ease 6.75s both}
@keyframes vm-ap{50%{transform:scale(.94)}}
.vm-cu{left:29em;top:18.9em}
.vm-av2{left:28em;top:9em;width:3em;height:3em;color:#fff}
.vm-av2 svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 .7em #90B8FD)}
.pv-go .vm-av2{animation:vm-vo 1.3s cubic-bezier(.3,.1,.5,1) 6.85s both}
@keyframes vm-vo{0%{opacity:0;transform:translate(0,9em) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(10em,-9em) scale(1.3)}}

/* agenda */
.vg-gr{left:2.4em;top:3.2em;width:35.2em;height:21.6em;transform:rotateX(13deg) rotateY(-11deg);overflow:hidden;background:linear-gradient(160deg,#1B2540,#10172A)}
.vg-j{display:grid;grid-template-columns:repeat(5,1fr);height:2.6em;align-items:center;text-align:center;font-weight:800;font-size:1em;color:#C9C6BE;border-bottom:1px solid rgba(255,255,255,.1)}
.vg-li{position:absolute;inset:2.6em 0 0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3.15em),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 20%)}
.av .av-sc .vg-e{position:absolute;width:calc(20% - .6em);border-radius:.5em;z-index:1}
.av .av-sc .vg-b{background:linear-gradient(160deg,rgba(78,129,238,.5),rgba(47,92,196,.3));box-shadow:inset .26em 0 0 #90B8FD,inset 0 0 0 1px rgba(144,184,253,.28)}
.av .av-sc .vg-o{background:linear-gradient(160deg,rgba(234,131,60,.5),rgba(180,83,31,.3));box-shadow:inset .26em 0 0 #F4A86E,inset 0 0 0 1px rgba(244,168,110,.3)}
.vg-e::before,.vg-e::after{content:"";position:absolute;left:.8em;top:.6em;width:56%;height:.42em;border-radius:.2em;background:rgba(255,255,255,.8)}
.vg-e::after{top:1.25em;width:36%;background:rgba(255,255,255,.4)}
.av .av-sc .vg-l{position:absolute;width:calc(20% - .6em);height:calc(3.15em - .3em);border-radius:.5em;background:rgba(144,184,253,.2);box-shadow:inset 0 0 0 .14em #BBD3FE,0 0 1.8em rgba(144,184,253,.9);z-index:2}
.av .av-sc .vg-l--c{display:grid;place-items:center;background:#7EE2A4;color:#04240F;box-shadow:inset 0 0 0 .14em #fff,0 0 2.2em rgba(34,197,94,.95)}
.av .av-sc .vg-sc{position:absolute;top:0;bottom:0;width:5em;background:linear-gradient(90deg,transparent,rgba(144,184,253,.5));border-right:.18em solid #EAF1FF;z-index:3}
.pv-go .vg-sc{animation:vg-sc 2.1s linear 2.6s both}
@keyframes vg-sc{0%{left:-5em;opacity:0}8%,92%{opacity:1}100%{left:100%;opacity:0}}

/* note */
.vo-p{left:1.6em;top:1.8em;width:19.6em;height:25.2em;padding:1.8em;border-radius:1em;background:linear-gradient(170deg,#FBFAF6,#ECE9E0);color:#1A1A18;transform:rotateY(16deg) rotateZ(-2.5deg);box-shadow:0 3em 5em -2em rgba(2,6,20,.95);display:flex;flex-direction:column;gap:.72em}
.vo-ti{font-size:1.9em;font-weight:800;letter-spacing:-.04em;line-height:1}
.vo-so{font-size:1.05em;color:#6B6760;margin:-.2em 0 .4em}
.vo-l{height:.58em;width:100%;border-radius:.3em;background:rgba(26,26,24,.15)}
.vo-hl{position:relative;display:block;padding:.45em .5em;margin:.1em -.5em;font-size:1.2em;font-weight:800;letter-spacing:-.02em;line-height:1.22}
.vo-mk{position:absolute;inset:0;z-index:-1;border-radius:.4em;background:#BBD3FE}
.vo-p{isolation:isolate}
.pv-anim:not(.pv-go) .vo-mk{clip-path:inset(0 100% 0 0)}
.pv-go .vo-mk{animation:av-w .7s ease 2.1s both}
.vo-tr{stroke:#90B8FD;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #4E81EE)}
.vo-m{left:24.6em;top:4em;width:14.8em;padding:1.3em;display:flex;flex-direction:column;gap:.7em;color:#F0EEE7}
.vo-m b{font-size:1.25em;font-weight:800;letter-spacing:-.02em}
.vo-or{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;background:radial-gradient(circle at 34% 26%,#90B8FD,#4E81EE 50%,#1A3376);color:#fff;box-shadow:0 0 1.8em rgba(78,129,238,.9)}
.vo-or svg{width:1.6em;height:1.6em;fill:currentColor}
.vo-it{display:flex;align-items:center;gap:.55em;padding:.48em .6em;border-radius:.6em;background:rgba(255,255,255,.06);font-size:1em;font-weight:600;color:#C9C6BE;white-space:nowrap}
.av .av-sc .vo-it i{width:.55em;height:.55em;border-radius:50%;background:rgba(255,255,255,.3);flex:none}
.vo-it--on{background:#BBD3FE;color:#0E1526;font-weight:800}
.av .av-sc .vo-it--on i{background:#2F5CC4}

/* aperçu */
.vu-bp{left:2.4em;top:3em;width:35.2em;height:22em;border-radius:1.3em;background:linear-gradient(160deg,#16213F,#0D1428);box-shadow:inset 0 0 0 1px rgba(144,184,253,.25),0 2.4em 4em -1.6em rgba(2,6,20,.95);overflow:hidden}
.vu-gr{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(144,184,253,.1) 0 1px,transparent 1px 1.6em),repeating-linear-gradient(90deg,rgba(144,184,253,.1) 0 1px,transparent 1px 1.6em)}
.vu-pl{mix-blend-mode:screen}
.vu-pl path{stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.vu-a path{stroke:#90B8FD;filter:drop-shadow(0 0 3px rgba(144,184,253,.8))}
.vu-b path{stroke:#EA833C;filter:drop-shadow(0 0 3px rgba(234,131,60,.8))}
.vu-pl .vu-pt{stroke-width:1.5;opacity:.8}
.vu-eq{left:42.6%;top:7%;width:15.6%;height:86%;--c:#fff;opacity:1}
.av .av-sc .vu-fl b{position:absolute;left:50%;translate:-50% 0;bottom:.5em;padding:.15em .55em;border-radius:.5em;background:#0D1428;color:#fff;font-size:1.15em;font-weight:800;white-space:nowrap}
.vu-fl{position:absolute;left:44.2%;width:11.7%;top:80%;height:.2em;background:#fff;box-shadow:0 0 .7em #fff;z-index:4}
.av .av-sc .vu-fl::before,.av .av-sc .vu-fl::after{content:"";position:absolute;top:-.35em;width:.2em;height:.9em;background:#fff}
.vu-fl::before{left:0}.vu-fl::after{right:0}

/* tâches */
.vt-co{top:1.2em;width:12.4em;height:25.6em;padding:1.1em;font-size:1em;color:#C9C6BE;background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.vt-co b{font-size:1.15em;font-weight:800}
.vt-c{width:11em;min-height:5.4em;padding:.85em;border-radius:.85em;background:linear-gradient(160deg,#27334F,#182036);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1.4em 2em -1em rgba(2,6,20,.95);color:#F0EEE7}
.vt-c b{display:block;font-size:1.02em;font-weight:800;line-height:1.2;padding-right:2.2em}
.av .av-sc .vt-pe,.av .av-sc .vt-ag{position:absolute;right:.6em;top:.6em;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;font-weight:800;color:#fff}
.av .av-sc .vt-ag{background:#4E81EE;box-shadow:0 0 1.2em rgba(78,129,238,.95)}
.vt-ag svg{width:1.2em;height:1.2em;fill:currentColor}
.vt-p{left:14.5em;top:11.4em}
.pv-go .vt-p{animation:vt-p 1.1s cubic-bezier(.65,0,.25,1) 1.1s both}
.pv-anim:not(.pv-go) .vt-p{transform:translate(-13.2em,0)}
@keyframes vt-p{from{transform:translate(-13.2em,0)}}
.vt-a{left:27.7em;top:5em;min-height:7.6em;z-index:5;box-shadow:inset 0 0 0 1px rgba(144,184,253,.7),0 0 2.6em -.4em rgba(78,129,238,.9),0 1.4em 2em -1em rgba(2,6,20,.95)}
.pv-anim:not(.pv-go) .vt-a{transform:translate(-26.4em,6.4em)}
.pv-go .vt-a{animation:vt-a 8.6s cubic-bezier(.65,0,.25,1) 0s both}
@keyframes vt-a{0%,44%{transform:translate(-26.4em,12.8em)}56%,80%{transform:translate(-13.2em,12.8em)}93%,100%{transform:none}}
.vt-bt{position:absolute;left:.8em;right:.8em;bottom:.7em;padding:.4em 0;border-radius:.55em;background:#4E81EE;color:#fff;font-size:.95em;font-weight:800;text-align:center}
.vt-e{position:absolute;left:.85em;bottom:.8em;display:flex;align-items:center;gap:.45em;font-size:.95em;font-weight:700;color:#90B8FD;white-space:nowrap}
.av .av-sc .vt-e i{width:1em;height:1em;border-radius:50%;box-shadow:inset 0 0 0 .18em rgba(144,184,253,.25);border-top:.18em solid #90B8FD;box-sizing:border-box}
.pv-go .vt-e i{animation:vt-t .9s linear infinite}
@keyframes vt-t{to{transform:rotate(360deg)}}
.vt-ok{position:absolute;left:.85em;bottom:.8em;padding:.25em .65em;border-radius:999px;background:rgba(126,226,164,.18);color:#7EE2A4;font-size:.95em;font-weight:800}
.vt-cu{left:9em;top:19.2em}

/* demandes */
.vd-po,.vd-eq{top:1.2em;width:18.2em;height:23.2em;padding:1.2em;border-radius:1.2em;display:flex;flex-direction:column;gap:.8em}
.vd-po{left:.4em;background:linear-gradient(170deg,#FBFAF6,#ECE9E0);color:#1A1A18;box-shadow:0 3em 5em -2em rgba(2,6,20,.95)}
.vd-eq{left:21.4em;color:#F0EEE7;background:linear-gradient(170deg,#1D2843,#10172A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 3em 5em -2em rgba(2,6,20,.95)}
.vd-te{display:flex;align-items:center;gap:.6em;font-size:1.15em;margin-bottom:.2em}
.av .av-sc .vd-lo{width:1.7em;height:1.7em;border-radius:.5em;background:linear-gradient(140deg,#EA833C,#B4531F)}
.av .av-sc .vd-av{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;font-weight:800;color:#fff;font-size:.9em}
.vd-bu{padding:.85em 1em;border-radius:1em 1em .25em 1em;background:#fff;box-shadow:0 .7em 1.4em -.6em rgba(26,26,24,.4);font-size:1.08em;font-weight:700;line-height:1.25}
.vd-bu span{display:block}
.vd-bu em,.vd-tk span{display:flex;align-items:center;gap:.35em;margin-top:.45em;font-style:normal;font-size:.85em;font-weight:600;color:#6B6760}
.vd-bu svg,.vd-tk svg,.vd-in svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vd-st{align-self:flex-end;padding:.3em .8em;border-radius:999px;background:#E3EBFD;color:#2F5CC4;font-weight:800;font-size:.95em}
.vd-st--r{position:absolute;right:1.2em;top:10.5em;background:#ECE9E0;color:#4A4842}
.vd-re{padding:.8em 1em;border-radius:1em 1em 1em .25em;background:#1A1A18;color:#fff;font-size:1.02em;font-weight:600}
.vd-mu{left:19.45em;top:.6em;width:.14em;height:24.4em;border-radius:.2em;background:linear-gradient(180deg,transparent,#90B8FD 20%,#90B8FD 80%,transparent);box-shadow:0 0 1.4em #4E81EE}
.vd-tk{position:relative;padding:.9em 1em;border-radius:.85em;background:linear-gradient(160deg,#2F5CC4,#203149);box-shadow:inset 0 0 0 1px rgba(144,184,253,.7),0 0 2.4em -.4em rgba(78,129,238,.95);font-size:1.05em;z-index:7}
.vd-tk b{display:block;font-weight:800;line-height:1.25}
.vd-tk span{color:#BBD3FE}
.av .av-sc .vd-tk i{display:inline-flex}
.pv-anim:not(.pv-go) .vd-tk{opacity:0}
.pv-go .vd-tk{animation:vd-tk 1.9s cubic-bezier(.6,0,.2,1) 1.9s both}
@keyframes vd-tk{0%{opacity:0;transform:translate(-21em,1.4em) scale(.92);border-radius:1em 1em .25em 1em}16%{opacity:1;transform:translate(-21em,1.4em) scale(.92)}100%{opacity:1;transform:none;border-radius:.85em}}
.vd-in{display:flex;align-items:center;gap:.5em;padding:.7em .8em;border-radius:.75em;background:rgba(255,255,255,.07);font-size:.98em;font-weight:600;color:#C9C6BE;line-height:1.2}
.vd-in i{color:#F4A86E}

/* sites */
.vi-m{left:1.4em;top:7em;width:20.6em;display:grid;grid-template-columns:repeat(7,1fr);gap:.55em;transform:rotateX(50deg) rotateZ(-30deg);transform-style:preserve-3d}
.av .av-sc .vi-t{aspect-ratio:1;border-radius:.5em;background:rgba(126,226,164,.34);box-shadow:inset 0 0 0 1px rgba(126,226,164,.5),0 0 1.2em -.3em rgba(34,197,94,.7)}
.pv-go .vi-t{animation:vi-o 2.8s ease-in-out calc(var(--w) * .1s) infinite}
@keyframes vi-o{0%,28%,100%{background:rgba(126,226,164,.26)}12%{background:#9FF0BF;box-shadow:0 0 1.6em rgba(126,226,164,.95)}}
.pv-go .vi-al{animation:vi-al 8.4s cubic-bezier(.3,.8,.3,1) 0s both}
@keyframes vi-al{0%,30%{background:rgba(126,226,164,.34);transform:none;box-shadow:inset 0 0 0 1px rgba(126,226,164,.5)}36%,84%{background:#EA833C;transform:translateZ(2.6em) scale(1.05);box-shadow:0 0 2.8em #EA833C}92%,100%{background:rgba(126,226,164,.34);transform:none;box-shadow:inset 0 0 0 1px rgba(126,226,164,.5)}}
.vi-c{left:24.2em;top:5em;width:15.2em;padding:1.2em;display:flex;flex-direction:column;gap:.7em;color:#F0EEE7;min-height:14.8em;background:linear-gradient(160deg,#1F2A45,#10172A)}
.vi-c b{font-size:1.18em;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.vi-et{align-self:flex-start;padding:.25em .7em;border-radius:999px;background:rgba(126,226,164,.18);color:#7EE2A4;font-weight:800;font-size:.98em}
.vi-et--o{position:absolute;background:rgba(234,131,60,.2);color:#F4A86E;top:3.5em}
.vi-ecg{width:100%;height:3.8em;overflow:visible;fill:none}
.vi-e1{stroke:#7EE2A4;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 2px #22C55E)}
.vi-qu{display:flex;align-items:center;gap:.5em;font-size:1em;font-weight:600;color:#C9C6BE;white-space:nowrap}
.av .av-sc .vi-qu i{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;color:#fff;font-weight:800;font-size:.9em}

/* tableur */
.vb-d{left:.4em;width:8.4em;height:5.6em;padding:.6em .7em;border-radius:.6em;background:linear-gradient(170deg,#FBFAF6,#E7E4DB);color:#1A1A18;box-shadow:0 1.2em 2em -1em rgba(2,6,20,.95);display:flex;flex-direction:column;gap:.34em}
.vb-d b{font-weight:800;font-size:.98em}
.av .av-sc .vb-d i{height:.36em;border-radius:.2em;background:rgba(26,26,24,.2)}
.av .av-sc .vb-d--o i{background:rgba(180,83,31,.35);filter:blur(.12em)}
.vb-d--o{box-shadow:0 0 0 .14em #EA833C,0 0 2em -.3em #EA833C}
.vb-s{left:10.4em;top:1.6em;width:29.2em;padding:.5em;color:#F0EEE7;background:linear-gradient(160deg,#1E2842,#10172A)}
.vb-tr{display:grid;grid-template-columns:1.5fr 1fr 1.2fr .8fr;align-items:center;gap:.4em;min-height:3.05em;padding:0 .7em;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.05em;font-weight:600}
.vb-tr > span{white-space:nowrap}
.vb-tr--t{min-height:2.5em;color:#A8A49C;font-size:.95em;font-weight:800}
.vb-tr--f{border-bottom:0;color:#F4A86E;font-weight:800}
.vb-q{position:relative;display:grid;place-items:center;width:4.6em;height:2.2em;color:#F4A86E;font-weight:800;font-size:1.1em}
.vb-so{justify-self:start;padding:.1em .5em;border-radius:.35em;background:rgba(144,184,253,.16);color:#BBD3FE;font-size:.86em;font-weight:800}

/* fichier */
.vf-w{left:.4em;top:4.6em;width:32em;display:grid;grid-template-columns:repeat(8,1fr);gap:.5em;transform:rotateY(20deg) rotateX(5deg)}
.av .av-sc .vf-t{position:relative;height:3.9em;display:grid;place-items:end start;padding:.35em .45em;border-radius:.5em;background:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:.92em;font-weight:800;color:var(--c);opacity:.2}
.pv-anim:not(.pv-go) .vf-t{opacity:1}
.pv-go .vf-t{animation:vf-dim .6s ease calc(var(--a) * 1s) both}
@keyframes vf-dim{from{opacity:1}}
.av .av-sc .vf-t--on{opacity:1;background:#3A2415;box-shadow:inset 0 0 0 .12em #EA833C,0 0 1.8em rgba(234,131,60,.9)}
.pv-go .vf-t--on{animation:none}
.vf-d{left:19em;top:7.2em;width:20.6em;padding:1.4em;display:flex;flex-direction:column;gap:.72em;border-radius:1em;background:linear-gradient(170deg,#FBFAF6,#ECE9E0);color:#1A1A18;box-shadow:0 0 0 .14em #EA833C,0 3em 5em -1.6em rgba(2,6,20,.95),0 0 4em -1em rgba(234,131,60,.7);z-index:5}
.vf-d b{font-size:1.18em;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.vf-l{height:.55em;width:100%;border-radius:.3em;background:rgba(26,26,24,.15)}
.vf-hl{font-size:1.08em;font-weight:600;line-height:1.3}
.vf-hl u{text-decoration:none;font-weight:800;background:#FAD9BF;border-radius:.25em;padding:.05em .2em}

/* transfert */
.vr-arc{stroke:rgba(144,184,253,.32);stroke-width:1.2;stroke-dasharray:2 5}
.av .av-sc .vr-pt{left:20em;top:10.2em;width:1em;height:1.25em;margin-left:-.5em;border-radius:.2em;background:linear-gradient(170deg,#fff,#BBD3FE);box-shadow:0 0 1em #90B8FD;transform-origin:50% 20em;opacity:0;z-index:3}
.pv-go .vr-pt{animation:vr-pt 2.8s cubic-bezier(.45,.05,.55,.95) calc(var(--a) * 1s) 2 both}
@keyframes vr-pt{0%{opacity:0;transform:rotate(-37deg) scale(.6)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(37deg) scale(.9)}}
.vr-f{left:.8em;top:13.6em;width:12.6em;height:9.8em}
.vr-on{position:absolute;left:0;top:0;width:5.4em;height:1.8em;border-radius:.7em .7em 0 0;background:#2F5CC4}
.vr-co{position:absolute;inset:1.1em 0 0;padding:1.2em 1em;border-radius:0 .9em .9em .9em;background:linear-gradient(150deg,#4E81EE,#2F5CC4 70%,#203149);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2em 3em -1.4em rgba(2,6,20,.95);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:.25em}
.vr-co b{font-size:1.15em;font-weight:800;letter-spacing:-.02em}
.vr-co span{font-size:.92em;font-weight:600;color:#DCE7FE;white-space:nowrap}
.vr-c{left:27em;top:14.2em;width:12.4em;height:9.2em;padding:1.1em;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;color:#F0EEE7}
.av .av-sc .vr-av{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:#EA833C;color:#fff;font-weight:800;margin-bottom:.1em}
.vr-c b{font-size:1.1em;font-weight:800}
.vr-et{padding:.15em .6em;border-radius:999px;background:rgba(126,226,164,.18);color:#7EE2A4;font-weight:800;font-size:.92em}
.vr-r{left:14.8em;top:11.8em;width:10.4em;height:10.4em;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.vr-r svg{position:absolute;inset:0;width:100%;height:100%;fill:none;transform:rotate(-90deg);overflow:visible}
.vr-fo{stroke:rgba(144,184,253,.2);stroke-width:5}
.vr-pr{stroke:#90B8FD;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 4px #4E81EE)}
.vr-r b{font-size:3.6em;line-height:1;font-weight:800;letter-spacing:-.05em}
.vr-r span{font-size:1em;font-weight:700;color:#BBD3FE}
.av .av-sc .vr-ic{width:.8em;height:.8em;border-radius:50%;background:#7EE2A4;box-shadow:0 0 .8em #22C55E}

/* automation */
.vz-an{left:8.5em;top:3em;width:23em;height:23em;border-radius:50%;box-shadow:inset 0 0 0 .14em rgba(144,184,253,.22)}
.vz-co{left:8.5em;top:3em;width:23em;height:23em;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(144,184,253,.15) 76%,#90B8FD 98%,#fff 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - .55em),#000 calc(100% - .5em));mask:radial-gradient(closest-side,transparent calc(100% - .55em),#000 calc(100% - .5em));filter:drop-shadow(0 0 .7em #4E81EE)}
.pv-go .vz-co{animation:vz-co 6s linear infinite}
@keyframes vz-co{to{transform:rotate(360deg)}}
.vz-ce{left:14em;top:9.8em;width:12em;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:.3em}
.vz-ce b{font-size:2.3em;line-height:1;font-weight:800;letter-spacing:-.05em;white-space:nowrap}
.vz-ce span{font-size:1.05em;font-weight:600;color:#BBD3FE;line-height:1.25}
.vz-ce em{margin-top:.4em;font-style:normal;font-size:.98em;font-weight:700;color:#F4A86E}

/* votre application */
.vy-w{left:5em;top:4.2em;width:30em;height:17.4em;border-radius:1.1em;background:linear-gradient(170deg,#1B2540,#10172A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 3em 5em -2em rgba(2,6,20,.95);overflow:hidden}
.pv-anim:not(.pv-go) .vy-w{outline:1px dashed rgba(144,184,253,.5)}
.vy-b{display:flex;align-items:center;gap:.4em;height:2.4em;padding:0 1em;border-bottom:1px solid rgba(255,255,255,.1);color:#C9C6BE;font-size:.98em;font-weight:700}
.av .av-sc .vy-b i{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.28)}
.vy-b span{margin-left:.6em}
.vy-co{position:absolute;left:.7em;top:3.1em;bottom:.7em;width:6em;padding:.8em;border-radius:.7em;background:rgba(78,129,238,.2);display:flex;flex-direction:column;gap:.7em}
.av .av-sc .vy-co i{height:.6em;border-radius:.3em;background:rgba(190,210,255,.5)}
.vy-kp{position:absolute;left:7.5em;top:3.1em;width:6.9em;height:4.9em;padding:.6em .8em;border-radius:.7em;background:linear-gradient(150deg,#4E81EE,#2F5CC4);color:#fff}
.vy-kp--2{left:15.1em;background:linear-gradient(150deg,#EA833C,#B4531F)}
.vy-kp b{display:block;font-size:1.9em;line-height:1;font-weight:800;letter-spacing:-.04em}
.vy-kp span{font-size:.9em;font-weight:600;white-space:nowrap}
.vy-ch{position:absolute;left:22.7em;top:3.1em;width:6.6em;height:4.9em;border-radius:.7em;background:rgba(255,255,255,.07);overflow:hidden}
.vy-ch path{stroke:#90B8FD;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vy-li{position:absolute;left:7.5em;right:.7em;top:8.7em;bottom:.7em;padding:1em;border-radius:.7em;background:rgba(255,255,255,.07);display:flex;flex-direction:column;gap:.85em}
.av .av-sc .vy-li i{height:.7em;width:100%;border-radius:.3em;background:rgba(255,255,255,.2)}
.vy-do{left:50%;translate:-50% 0;top:23em;display:flex;align-items:center;gap:.7em;padding:.7em .9em;border-radius:1.4em;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:6}
.vy-ap{position:relative;display:block}
.vy-ic{display:grid;place-items:center;align-content:center;gap:.22em;width:3.2em;height:3.2em;border-radius:.86em;background:linear-gradient(150deg,#4E81EE,#EA833C);box-shadow:0 0 2em rgba(78,129,238,.95)}
.av .av-sc .vy-ic i{width:1.5em;height:.32em;border-radius:.2em;background:#fff}
.vy-ne em{position:absolute;right:-.7em;top:-.7em;padding:.1em .45em;border-radius:999px;background:#fff;color:#2F5CC4;font-style:normal;font-size:.82em;font-weight:800}

/* Sur un téléphone, la scène prend toute la largeur de l'écran */
@media (max-width:560px){
  .av__v{margin-inline:-16px}
  /* cette feuille passe après les règles de page : ses petites étiquettes grandissent ici, rien sous 9,5 px */
  .vs-tag,.vm-tg,.vg-j span,.vb-so,.vb-tr span,.vy-ap em,.vy-kp span,.vd-tk span,.vd-bu em,.vd-st,.vr-et,.vr-co span,.vt-ok,.vn-b span{font-size:9.5px}
}