/* Ligne, Scalenet's guide: the mark itself, with eyes (2026-10-11). One sheet for the public page and the workspace. */
.lg{position:fixed;inset-inline-end:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:76px;height:80px;opacity:0;transform:translateY(26px) scale(.8);transition:opacity .5s,transform .7s cubic-bezier(.2,1.3,.3,1);pointer-events:none}
.lg.in{opacity:1;transform:none;pointer-events:auto}
.lg-face{display:block;width:100%;height:100%;padding:0;border:0;border-radius:18px;background:none;cursor:pointer}
.lg-face:focus-visible{outline:2px solid #9cc0ff;outline-offset:4px}
.lg-face svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 18px rgba(41,92,255,.5))}
.lg-a{fill:#295cff;transition:fill .4s}.lg-b{fill:#3d6bff;transition:fill .4s}
.lg-shadow{fill:#02061a;opacity:.45;transform-box:fill-box;transform-origin:center;animation:lg-shade 4.6s ease-in-out infinite}
.lg-body{transform-origin:50px 100px;animation:lg-float 4.6s ease-in-out infinite}
.lg-white{fill:#fff}.lg-pupil{fill:#0a1033}.lg-glint{fill:#fff}
.lg-pupil,.lg-glint{transform:translate(calc(var(--ex,0)*1px),calc(var(--ey,0)*1px));transition:transform .14s ease-out}
.lg-lid{transform-box:fill-box;transform-origin:center;transition:transform .09s,opacity .12s}
.lg.blink .lg-lid{transform:scaleY(.08)}
.lg-arc{fill:none;stroke:#fff;stroke-width:3.8;stroke-linecap:round;opacity:0;transition:opacity .12s}
.lg.happy .lg-lid{opacity:0}.lg.happy .lg-arc{opacity:1}
.lg.hop .lg-body{animation:lg-hop .74s cubic-bezier(.3,.7,.3,1)}
@keyframes lg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lg-shade{0%,100%{transform:scaleX(1);opacity:.45}50%{transform:scaleX(.86);opacity:.3}}
@keyframes lg-hop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(2px) scale(1.08,.9)}48%{transform:translateY(-16px) scale(.96,1.06)}78%{transform:translateY(0) scale(1.05,.94)}100%{transform:translateY(0) scale(1,1)}}
/* At the form it turns white on the blue and steps aside, so it never covers a field. */
.lg[data-on=contact] .lg-a,.lg[data-on=contact] .lg-b{fill:#f4f7ff}
.lg.in[data-on=contact]:not(.open):not(:hover):not(:focus-within){transform:translateX(54%) scale(.92)}
.lg.in[dir=rtl][data-on=contact]:not(.open):not(:hover):not(:focus-within){transform:translateX(-54%) scale(.92)}
.lg-say{position:absolute;inset-inline-end:calc(100% + 8px);bottom:30px;margin:0;padding:9px 14px;border-radius:16px;border-end-end-radius:4px;background:#fff;color:#12276b;font:600 13.5px/1.3 Arial,Helvetica,sans-serif;white-space:nowrap;box-shadow:0 14px 34px #02061a66;opacity:0;transform:translateY(6px) scale(.94);transition:opacity .3s,transform .4s cubic-bezier(.2,1.3,.3,1);pointer-events:none}
.lg-say.on{opacity:1;transform:none}
.lg-panel{position:absolute;inset-inline-end:0;bottom:calc(100% + 14px);width:min(340px,calc(100vw - 28px));padding:24px 24px 20px;border:1px solid #ffffff24;border-radius:22px;background:#0c1638f7;color:#dfe8ff;box-shadow:0 30px 80px #010615cc;font:15px/1.6 Arial,Helvetica,sans-serif;animation:lg-panel .35s cubic-bezier(.2,1.2,.3,1)}
.lg-panel[hidden]{display:none}
.lg-kicker{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#84aeff}
html[lang=ar] .lg-kicker{letter-spacing:0;font-size:13px}
.lg-panel .lg-name{margin:0 0 10px;padding-inline-end:34px;font-size:24px;line-height:1.2;letter-spacing:-.03em;font-weight:600;color:#fff}
html[lang=ar] .lg-panel .lg-name{letter-spacing:0;font-weight:400;font-size:27px}
.lg-line{margin:0 0 16px;color:#c3d2f1}
.lg-actions{display:grid;gap:8px}
.lg-actions a{display:block;padding:11px 16px;border:1px solid #ffffff2e;border-radius:999px;color:#fff;font-size:14px;text-align:center;transition:background .2s,border-color .2s}
.lg-actions a:hover{background:#ffffff12;border-color:#ffffff66}
.lg-actions .lg-go{background:#295cff;border-color:#295cff}
.lg-actions .lg-go:hover{background:#4171ff;border-color:#4171ff}
.lg-limit{margin:14px 0 0;font-size:12px;line-height:1.5;color:#8ea5d6}
.lg-close{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border:1px solid #ffffff2e;border-radius:50%;background:none;color:#fff;font-size:20px;line-height:1}
@keyframes lg-panel{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.motion-paused .lg-body,.motion-paused .lg-shadow{animation:none}

@media(max-width:699px){.lg{width:60px;height:64px;inset-inline-end:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.lg-say{bottom:22px;font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.lg-body,.lg-shadow{animation:none}}