/* EV UI — maquettes animées de l'espace conseiller : vrais écrans d'application */
.device .scene{padding:0}
.mq-app{display:grid;grid-template-columns:56px minmax(0,1fr);min-height:456px;background:#f7fafc}
.mq-side{background:var(--navy);display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 0}
.mq-logo{width:34px;height:34px;border-radius:11px;background:var(--acc);display:grid;place-items:center;margin-bottom:8px}.mq-logo svg{width:21px;height:21px}
.mq-side i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-style:normal;color:#8fb3c4;font-size:17px}.mq-side i.on{background:rgba(255,255,255,.15);color:#fff}.mq-side i .i{stroke:currentColor}
.mq-main{padding:15px 17px;min-width:0;display:flex;flex-direction:column;gap:13px}
.mq-top{display:flex;align-items:center;gap:9px}.mq-top b{font-size:1.1rem;color:var(--navy);flex:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:11.5px;color:var(--ink3);font-weight:600;min-width:150px}.mq-search .i{width:14px;height:14px}
.mq-bell,.mq-me{position:relative;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);flex:none}.mq-bell>i{position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--magenta);border:2px solid #fff}.mq-me{background:var(--acc);color:#fff;border:0}.mq-me .i{stroke:#fff}
.mq-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mq-kpi{background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px;display:grid;grid-template-columns:auto 1fr;gap:3px 9px;align-items:center;opacity:0;transform:translateY(10px)}
.scene.on .mq-kpi{animation:rowin .5s forwards}.scene.on .mq-kpi:nth-child(2){animation-delay:.15s}.scene.on .mq-kpi:nth-child(3){animation-delay:.3s}
.mq-kpi b{font-size:1.45rem;color:var(--navy);line-height:1;letter-spacing:-.03em}.mq-kpi small{display:block;font-size:10.5px;color:var(--ink2);font-weight:700;margin-top:2px}.mq-kpi .ico{width:32px;height:32px;font-size:16px;border-radius:11px}
.mq-kpi svg{grid-column:1/-1;width:100%;height:24px}.mq-kpi polyline{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130}.scene.on .mq-kpi polyline{animation:draw 1.4s .5s ease forwards}
.mq-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:11px;align-items:start}
.mq-list{display:grid;gap:8px}
.mq-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 9px 7px 7px;border:1px solid var(--line);border-radius:14px;background:#fff;opacity:0;transform:translateY(10px)}
.scene.on .mq-row{animation:rowin .55s forwards}.scene.on .mq-row.r1{animation-delay:.55s}.scene.on .mq-row.r2{animation-delay:.75s}.scene.on .mq-row.r3{animation-delay:.95s}
.mq-ph{width:48px;height:38px;border-radius:10px;overflow:hidden;background:var(--acc-100)}.mq-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mq-row b{display:block;font-size:12px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mq-row small{font-size:10.5px;color:var(--ink2);font-weight:600}
.st-live.on{opacity:1}
.mq-pane{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;display:grid;gap:9px;justify-items:center;align-content:start}.mq-pane.center{align-content:center;min-height:300px}
.mq-ring{position:relative;width:88px;height:88px}.mq-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.mq-ring circle{fill:none;stroke-width:11}.mq-ring .bg{stroke:var(--acc-100)}.mq-ring .fg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314}
.scene.on .mq-ring .fg{animation:ring 1.8s 1.1s ease forwards}.mq-ring .fg.f62{--to:119}.mq-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.15rem;color:var(--navy)}
.mq-ring.big{width:122px;height:122px}.mq-ring.big b{font-size:1.6rem}
@keyframes ring{to{stroke-dashoffset:var(--to,0)}}
.mq-pt-h{font-weight:800;color:var(--navy);text-align:center;line-height:1.2;font-size:12.5px}.mq-pt-h small{display:block;color:var(--ink2);font-weight:600;font-size:11px}
.mq-pts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.mq-pt{position:relative;width:32px;height:32px;border-radius:50%;background:var(--acc-50);color:var(--acc-700);display:grid;place-items:center;font-size:16px;opacity:.35;transform:scale(.85)}
.mq-pt i{position:absolute;right:-3px;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--green);display:grid;place-items:center;opacity:0;font-style:normal}.mq-pt i .i{stroke:#fff;width:8px;height:8px;stroke-width:3.6}
.scene.on .mq-pt,.scene.on .mq-pt i{animation:ptlight .45s forwards}
.scene.on .mq-pt:nth-child(1),.scene.on .mq-pt:nth-child(1) i{animation-delay:2.2s}.scene.on .mq-pt:nth-child(2),.scene.on .mq-pt:nth-child(2) i{animation-delay:2.5s}.scene.on .mq-pt:nth-child(3),.scene.on .mq-pt:nth-child(3) i{animation-delay:2.8s}
.scene.on .mq-pt:nth-child(4),.scene.on .mq-pt:nth-child(4) i{animation-delay:3.1s}.scene.on .mq-pt:nth-child(5),.scene.on .mq-pt:nth-child(5) i{animation-delay:3.4s}.scene.on .mq-pt:nth-child(6),.scene.on .mq-pt:nth-child(6) i{animation-delay:3.7s}
/* mandat */
.mq-paper{position:relative;background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px;box-shadow:var(--sh1)}
.mq-stamp{position:absolute;right:14px;top:12px;border:2.5px solid var(--green);color:var(--green);font-weight:800;border-radius:10px;padding:3px 10px;opacity:0;transform:rotate(-9deg) scale(1.6);letter-spacing:.06em;font-size:12px}.scene.on .mq-stamp{animation:stamp .5s 4.6s forwards}
.mq-ph2{display:flex;gap:10px;align-items:center;margin-bottom:8px}.mq-logo2{width:32px;height:32px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;flex:none}.mq-logo2 .i{stroke:#fff}.mq-ph2 b{font-size:12px;color:var(--navy);display:block}.mq-ph2 small{font-size:10.5px;color:var(--ink2)}
.mq-field{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line2);font-size:11.5px}.mq-field span{color:var(--ink3);font-weight:700}.mq-field b{color:var(--navy);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.mq-paper .ln{height:7px;border-radius:5px;background:#e9eef2;margin:8px 0}
.mq-paper .sg span{display:block;font-size:10.5px}.mq-paper .sign-row{margin-top:12px}
.mq-steps{display:grid;gap:9px;width:100%}.mq-step{display:flex;gap:10px;align-items:center;opacity:.4}.mq-step i{width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--ink3);display:grid;place-items:center;font-style:normal;flex:none;font-size:15px}
.mq-step b{display:block;font-size:12px;color:var(--navy)}.mq-step small{font-size:10.5px;color:var(--ink2);font-weight:600}
.scene.on .mq-step{animation:stepon .45s forwards}.scene.on .s1{animation-delay:.4s}.scene.on .s2{animation-delay:2s}.scene.on .s3{animation-delay:3.7s}.scene.on .s4{animation-delay:4.6s}
@keyframes stepon{to{opacity:1}}.scene.on .mq-step i{animation:stepdot .45s forwards}.scene.on .s1 i{animation-delay:.4s}.scene.on .s2 i{animation-delay:2s}.scene.on .s3 i{animation-delay:3.7s}.scene.on .s4 i{animation-delay:4.6s}
@keyframes stepdot{to{background:var(--green);color:#fff}}.mq-step i .i{stroke:currentColor}
.mq-prog{width:100%;height:8px;background:var(--acc-100);border-radius:99px;overflow:hidden}.mq-prog span{display:block;height:100%;width:0;background:var(--green);border-radius:99px}.scene.on .mq-prog span{animation:fillbar 4.6s .4s linear forwards;--w:100%}
/* page personnelle */
.mq-site{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;height:372px;position:relative;box-shadow:var(--sh1)}
.scene.on .mq-site-in{animation:pagescroll 11s ease-in-out 2s infinite}@keyframes pagescroll{0%,8%{transform:none}45%,60%{transform:translateY(-92px)}100%{transform:none}}
.mq-url{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:700;color:var(--ink3);background:var(--bg);padding:8px 12px;border-bottom:1px solid var(--line)}.mq-url b{color:var(--navy)}.mq-url .i{width:13px;height:13px}
.mq-hero{position:relative;height:150px;overflow:hidden;background:linear-gradient(120deg,var(--acc-700),var(--acc))}.mq-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mq-hero .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,34,.15),rgba(6,24,34,.82))}
.mq-hero .who{position:absolute;left:14px;bottom:12px;display:flex;gap:10px;align-items:center;color:#fff}.mq-hero .who b{display:block;font-size:13.5px}.mq-hero .who small{font-size:10.5px;opacity:.92}
.mq-hero .av{width:40px;height:40px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;border:2px solid #fff}.mq-hero .av .i{stroke:#fff}
.mq-hero .btns{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}.mq-hero .btns span{display:inline-flex;gap:5px;align-items:center;font-size:10.5px;font-weight:800;border-radius:999px;padding:6px 11px}.mq-hero .b1{background:var(--acc);color:#fff}.mq-hero .b1 .i{stroke:#fff}.mq-hero .b2{background:#fff;color:var(--navy)}
.scene.on .mq-hero .b1{animation:pulse 2s 2s infinite}
.mq-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:9px;border-bottom:1px solid var(--line)}.mq-stats span{font-size:10.5px;color:var(--ink2);font-weight:600}.mq-stats b{display:block;font-size:1.05rem;color:var(--navy)}
.mq-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}.mq-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;opacity:0;transform:scale(.9)}.scene.on .mq-card{animation:popin .5s forwards}.scene.on .mq-card:nth-child(2){animation-delay:.25s}.scene.on .mq-card:nth-child(3){animation-delay:.5s}
.mq-ph3{display:block;height:68px;background:var(--acc-100)}.mq-ph3 img{width:100%;height:100%;object-fit:cover;display:block}.mq-card b{display:block;padding:6px 8px 0;color:var(--navy);font-size:11.5px}.mq-card small{padding:0 8px 6px;display:block;color:var(--ink2);font-size:10.5px}
/* formation */
.mq-cols.learn{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.mq-cert{position:relative;display:inline-flex;gap:7px;align-items:center;background:#fff3dd;color:#a85d00;font-weight:800;border-radius:99px;padding:7px 14px;font-size:11.5px;opacity:0;transform:scale(.7)}.mq-cert .i{stroke:#a85d00}.scene.on .mq-cert{animation:popin .5s 2.9s forwards}
.cf{position:absolute;width:7px;height:7px;border-radius:2px;left:50%;top:50%;opacity:0}.scene.on .cf{animation:confetti 1.3s 3s ease-out forwards}
.cf.c1{background:#33acd3;--dx:-70px;--dy:-44px}.cf.c2{background:#f2901f;--dx:-34px;--dy:-60px}.cf.c3{background:#79bf3c;--dx:10px;--dy:-66px}.cf.c4{background:#e3168c;--dx:48px;--dy:-52px}.cf.c5{background:#8a3f97;--dx:78px;--dy:-30px}.cf.c6{background:#1c6f80;--dx:-84px;--dy:-14px}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
.mq-course{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}.mq-course b{display:block;font-size:12px;color:var(--navy)}.mq-course .pc{font-weight:800;color:var(--acc-700);font-size:12px}
.mq-course .ico{width:34px;height:34px;font-size:16px;border-radius:11px}
.scene.on .mq-course .pbar span{animation:fillbar 1.6s ease forwards}.scene.on .mq-course.c1 .pbar span{animation-delay:.4s}.scene.on .mq-course.c2 .pbar span{animation-delay:.8s}.scene.on .mq-course.c3 .pbar span{animation-delay:1.2s}.scene.on .mq-course.c4 .pbar span{animation-delay:1.6s}
/* contacts */
.mq-msg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;opacity:0;transform:translateX(26px)}
.scene.on .mq-msg{animation:slidein .5s forwards}.scene.on .mq-msg.m1{animation-delay:.4s}.scene.on .mq-msg.m2{animation-delay:1.2s}.scene.on .mq-msg.m3{animation-delay:2s}.scene.on .mq-msg.m4{animation-delay:2.8s}
.mq-msg b{display:block;font-size:12px;color:var(--navy)}.mq-msg small{font-size:10.5px;color:var(--ink2);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mq-msg .tm{font-size:10.5px;color:var(--ink3);font-weight:700}.mq-msg .ico{width:34px;height:34px;font-size:16px;border-radius:11px}
.mq-bars{display:flex;align-items:flex-end;gap:7px;height:130px;width:100%}.mq-bars span{flex:1;height:0;background:linear-gradient(180deg,var(--acc),var(--acc-100));border-radius:8px 8px 3px 3px}
.scene.on .mq-bars span{animation:grow .8s .3s forwards}@keyframes grow{to{height:var(--h)}}
.mq-days{display:flex;gap:7px;width:100%}.mq-days i{flex:1;text-align:center;font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:700}
@media(max-width:700px){.mq-app{grid-template-columns:44px 1fr}.mq-cols,.mq-cols.learn{grid-template-columns:1fr}.mq-kpis{grid-template-columns:1fr 1fr 1fr}.mq-search{display:none}.mq-kpi small{font-size:9.5px}}