.app-loading-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:transparent;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s ease;pointer-events:none}
.app-loading-overlay.visible{opacity:1;visibility:visible;pointer-events:none}
.app-loading-mark{width:66px;height:66px;display:grid;place-items:center;position:relative;isolation:isolate;flex:0 0 auto}
.app-loading-mark:before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,#18a5ff,#7657ff,#e44fbc,#ff9b42,#18d2a2,#18a5ff);animation:app-logo-spin 2.2s linear infinite;z-index:-1}
.app-loading-mark:after{content:"";position:absolute;inset:0;border-radius:50%;background:transparent;z-index:-1}
.app-loading-mark img{width:52px;height:52px;object-fit:contain;border-radius:15px;filter:drop-shadow(0 2px 5px rgba(49,95,180,.25))}
.app-loading-orbit-dot,.app-loading-shimmer{display:none}
.app-loading-mark[data-style="ring"] img{animation:none}.app-loading-mark[data-style="ring"] .app-loading-orbit-dot{display:none}
.app-loading-mark[data-style="rotate"]:before,.app-loading-mark[data-style="rotate"]:after,.app-loading-mark[data-style="shine"]:before,.app-loading-mark[data-style="shine"]:after,.app-loading-mark[data-style="pulse"]:after{display:none}
.app-loading-mark[data-style="rotate"] img{animation:app-logo-turn-color 5.2s ease-in-out infinite}
.app-loading-mark[data-style="shine"] .app-loading-shimmer{display:block;position:absolute;inset:7px;overflow:hidden;border-radius:17px;pointer-events:none}.app-loading-mark[data-style="shine"] .app-loading-shimmer:after{content:"";position:absolute;inset:-20% -70%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.95) 51%,rgba(89,235,241,.45) 54%,transparent 61%);transform:translateX(-85%);animation:app-logo-shine 2.6s ease-in-out infinite}
.app-loading-mark[data-style="pulse"]:before{inset:-12px;border-radius:27px;background:linear-gradient(130deg,#16b9c7,#7364ec,#ef72b4);filter:blur(13px);opacity:.36;animation:app-logo-glow 2.4s ease-in-out infinite}.app-loading-mark[data-style="pulse"] img{animation:app-logo-breathe-color 4.4s ease-in-out infinite}
.app-loading-mark[data-style="orbit"] .app-loading-orbit-dot{display:block;position:absolute;top:-8px;left:28px;width:10px;height:10px;border-radius:50%;background:#ffad55;box-shadow:0 0 13px rgba(255,151,65,.9);transform-origin:5px 41px;animation:app-logo-spin 2.2s linear infinite}.app-loading-mark[data-style="orbit"] img{animation:app-logo-tint 4.6s ease-in-out infinite alternate}
.settings-loading-preview{width:85px;height:74px;display:grid;place-items:center;border:1px solid var(--border,#dbe3ee);border-radius:12px;background:var(--surface,#f7f9fc);flex:0 0 auto}.settings-loading-preview .app-loading-mark{transform:scale(.7)}.loading-style-control{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.loading-style-control select{min-width:230px}
@keyframes app-logo-spin{to{transform:rotate(360deg)}}@keyframes app-logo-turn-color{0%,100%{transform:rotateY(0) scale(1);filter:hue-rotate(0) saturate(1)}50%{transform:rotateY(180deg) scale(.93);filter:hue-rotate(170deg) saturate(1.28)}}@keyframes app-logo-shine{0%,15%{transform:translateX(-85%)}78%,100%{transform:translateX(85%)}}@keyframes app-logo-glow{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:.52;transform:scale(1.12)}}@keyframes app-logo-breathe-color{0%,100%{transform:scale(.97);filter:hue-rotate(0) saturate(1)}50%{transform:scale(1.05);filter:hue-rotate(115deg) saturate(1.25)}}@keyframes app-logo-tint{from{filter:hue-rotate(0) saturate(1)}to{filter:hue-rotate(105deg) saturate(1.2)}}

/* 6 — gentle 3D tilt */
.app-loading-mark[data-style="tilt"]:before,.app-loading-mark[data-style="tilt"]:after{display:none}.app-loading-mark[data-style="tilt"] img{animation:app-logo-tilt 2.7s ease-in-out infinite}
/* 7 — two counter-rotating gradient rings */
.app-loading-mark[data-style="double"]:before{inset:-5px;border-radius:50%;background:conic-gradient(#31c5d0 0 20%,transparent 25% 42%,#7669f2 48% 70%,transparent 78% 88%,#31c5d0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:app-logo-spin 2.8s linear infinite}.app-loading-mark[data-style="double"]:after{display:block;inset:-10px;border:2px dotted #d26cce;border-radius:50%;background:transparent;animation:app-logo-spin-reverse 5s linear infinite}
/* 8 — expanding light ripples */
.app-loading-mark[data-style="ripple"]:before{inset:-3px;border:2px solid #35c5ce;border-radius:50%;background:transparent;animation:app-logo-ripple 1.9s ease-out infinite}.app-loading-mark[data-style="ripple"]:after{display:block;inset:-3px;border:2px solid #8972ed;border-radius:50%;background:transparent;animation:app-logo-ripple 1.9s ease-out .95s infinite}.app-loading-mark[data-style="ripple"] img{animation:app-logo-tint 4s ease-in-out infinite alternate}
/* 9 — a vertical scanner beam across the mark */
.app-loading-mark[data-style="scan"]:before,.app-loading-mark[data-style="scan"]:after{display:none}.app-loading-mark[data-style="scan"] .app-loading-shimmer{display:block;position:absolute;inset:7px;overflow:hidden;border-radius:17px;pointer-events:none}.app-loading-mark[data-style="scan"] .app-loading-shimmer:after{content:"";position:absolute;inset:-70% 0;background:linear-gradient(180deg,transparent 38%,rgba(82,225,235,.12) 46%,rgba(255,255,255,.96) 50%,rgba(143,110,255,.42) 54%,transparent 63%);transform:translateY(-80%);animation:app-logo-scan 2.3s ease-in-out infinite}
/* 10 — three sparkling satellites */
.app-loading-mark[data-style="sparkles"]:before,.app-loading-mark[data-style="sparkles"]:after{display:none}.app-loading-mark[data-style="sparkles"] img{animation:app-logo-tint 5.2s ease-in-out infinite alternate}.app-loading-mark[data-style="sparkles"] .app-loading-particle{display:block;position:absolute;left:30px;top:-2px;width:6px;height:6px;border-radius:50%;background:#27c5d4;box-shadow:0 0 10px currentColor;transform-origin:3px 35px;animation:app-logo-spin 2.1s linear infinite}.app-loading-mark[data-style="sparkles"] .particle-b{color:#e76fc4;background:currentColor;transform-origin:3px 37px;animation-duration:2.8s;animation-direction:reverse}.app-loading-mark[data-style="sparkles"] .particle-c{color:#ffb154;background:currentColor;transform-origin:3px 32px;animation-duration:1.65s;animation-delay:-.5s}
.app-loading-particle{display:none}
@keyframes app-logo-spin-reverse{to{transform:rotate(-360deg)}}@keyframes app-logo-tilt{0%,100%{transform:perspective(240px) rotateY(-13deg) rotateX(5deg);filter:hue-rotate(0) saturate(1)}50%{transform:perspective(240px) rotateY(13deg) rotateX(-5deg);filter:hue-rotate(95deg) saturate(1.2)}}@keyframes app-logo-ripple{0%{transform:scale(.8);opacity:.85}100%{transform:scale(1.43);opacity:0}}@keyframes app-logo-scan{0%,8%{transform:translateY(-80%)}88%,100%{transform:translateY(80%)}}
@media(prefers-reduced-motion:reduce){.app-loading-mark:before,.app-loading-mark img,.app-loading-mark:after,.app-loading-mark:after,.app-loading-orbit-dot,.app-loading-shimmer:after,.app-loading-particle{animation:none!important}}

/* Transition MFA : attachée à html pour rester visible lorsque le thème masque body. */
html[data-startup-loading="true"] body{visibility:hidden!important;pointer-events:none!important}
.app-startup-screen{position:fixed!important;inset:0!important;z-index:2147483646!important;display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;background:var(--surface,#f5f7fa);color:var(--text,#17365d);padding:20px;box-sizing:border-box;overflow:hidden}
.app-startup-panel{display:flex;align-items:center;flex-direction:column;gap:18px;text-align:center;width:min(360px,100%);box-sizing:border-box;padding:36px 24px;border:1px solid var(--border,#dbe3ee);border-radius:20px;background:var(--panel,#fff);box-shadow:0 18px 60px rgba(15,23,42,.12);font-family:var(--app-font,system-ui,sans-serif)}
.app-startup-panel strong{font-size:23px;color:var(--navy,#17365d)}
.app-startup-panel p{margin:0;font-size:15px;line-height:1.5}
.app-startup-panel small{opacity:.75;font-size:12px}
.app-startup-panel .app-loading-mark{margin:10px 0 12px;transform:scale(1.15)}
@media(prefers-reduced-motion:reduce){.app-startup-screen *,.app-startup-screen *:before,.app-startup-screen *:after{animation:none!important}}