/* Tutoriel animé de Fusion — storyboard léger, lisible hors-ligne et sans fichier vidéo. */
.sfg-overlay{position:fixed;inset:0;z-index:9700;display:flex;align-items:flex-end;justify-content:center;padding:18px 10px calc(16px + env(safe-area-inset-bottom));background:rgba(5,3,12,.86);backdrop-filter:blur(8px);}
.sfg-panel{position:relative;width:min(100%,480px);padding:22px 16px 16px;color:#f7f1ff;text-align:center;border:1px solid rgba(127,227,255,.35);border-radius:24px;background:radial-gradient(90% 50% at 50% 0,rgba(122,75,214,.34),transparent),linear-gradient(180deg,#190d29,#0d0816);box-shadow:0 20px 65px rgba(0,0,0,.65);}
.sfg-close{position:absolute;top:9px;right:9px;width:42px;height:42px;color:#eee5ff;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.07);font-size:18px;}
.sfg-kicker{color:#70e6a4;font-size:9px;font-weight:900;letter-spacing:1px;}
.sfg-panel h2{margin:5px 34px 15px;font-family:var(--display);font-size:20px;}
.sfg-frame{min-height:235px;padding:14px;border:1px solid rgba(147,112,219,.28);border-radius:18px;background:rgba(255,255,255,.035);}
.sfg-scene{display:flex;height:118px;align-items:center;justify-content:center;gap:11px;overflow:hidden;border-radius:13px;background:radial-gradient(circle,rgba(127,227,255,.12),transparent 68%);}
.sfg-soul,.sfg-orb,.sfg-mat,.sfg-rune,.sfg-egg{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(127,227,255,.34);border-radius:16px;background:rgba(122,75,214,.25);font-size:29px;box-shadow:0 0 18px rgba(127,227,255,.12);animation:sfg-float 1.8s ease-in-out infinite alternate;}
.sfg-orb{color:#ffe28a;border-radius:50%;background:radial-gradient(circle,#fff7c2,#be7fff 45%,#233b78);box-shadow:0 0 25px rgba(190,127,255,.55);}
.sfg-mat{width:42px;height:42px;color:#8fe3ff;font-size:20px;}
.sfg-mat.hi{color:#ffe28a;transform:scale(1.12);}
.sfg-rune{width:62px;height:62px;color:#fff;font-size:31px;}
.sfg-egg{border-radius:50% 50% 50% 50% / 60% 60% 42% 42%;font-size:30px;}
.sfg-link{color:#c9a7ff;font-size:22px;font-weight:900;}
.sfg-button{padding:12px 10px;border-radius:11px;background:linear-gradient(90deg,#7a4bd6,#39d0ff);color:#0a0416;font-size:9px;font-weight:900;letter-spacing:.5px;}
.sfg-button.gold{background:linear-gradient(90deg,#f1c75b,#ff9d3f);}
.sfg-step{display:flex;align-items:flex-start;gap:10px;margin-top:13px;text-align:left;}
.sfg-step>span{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;color:#0b0a12;border-radius:50%;background:#70e6a4;font-weight:900;}
.sfg-step b{color:#ffe28a;font-family:var(--display);font-size:14px;}
.sfg-step p{margin:4px 0 0;color:rgba(247,241,255,.76);font-size:11px;line-height:1.45;}
.sfg-dots{display:flex;justify-content:center;gap:6px;margin:12px 0;}
.sfg-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.2);}
.sfg-dots button.on{width:24px;border-radius:999px;background:#70e6a4;}
.sfg-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.sfg-controls button{min-height:42px;padding:7px;color:#eee5ff;border:1px solid rgba(147,112,219,.34);border-radius:11px;background:rgba(122,75,214,.16);font-size:10px;font-weight:800;}
.sfg-foot{margin:11px 0 0;color:var(--muted);font-size:9.5px;}
@keyframes sfg-float{from{transform:translateY(3px)}to{transform:translateY(-4px)}}
@media (min-width:700px){.sfg-overlay{align-items:center;}}
@media (prefers-reduced-motion:reduce){.sfg-soul,.sfg-orb,.sfg-mat,.sfg-rune,.sfg-egg{animation:none;}}