/* Chorégraphies ATLIS : décors, tracés et micro-interactions séparables. */
:root { --motion-pace:1; }
html[data-motion="standard"] { --motion-pace:1.6; }
.motion-atmosphere { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; opacity:calc(var(--visual-glow) * .75); }
.motion-halo { position:absolute; width:min(66vw,760px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 19%,transparent),transparent 65%); opacity:.65; }
.motion-halo-one { right:-16%; top:-27%; animation:motion-drift-one calc(19s * var(--motion-pace)) ease-in-out infinite alternate; }
.motion-halo-two { left:-19%; bottom:-26%; background:radial-gradient(circle,color-mix(in srgb,var(--visual-accent2) 18%,transparent),transparent 68%); animation:motion-drift-two calc(23s * var(--motion-pace)) ease-in-out infinite alternate; }
.motion-scene { position:absolute; right:-6%; top:18%; width:min(66vw,900px); transform:rotate(-13deg); opacity:.19; }
.motion-scene svg { width:100%; height:auto; overflow:visible; }
.motion-drawing { fill:none; stroke:var(--accent2); stroke-width:.7; stroke-linecap:round; stroke-linejoin:round; }
.motion-drawing .motion-ball { fill:var(--accent2); stroke:none; transform-box:fill-box; transform-origin:center; animation:motion-tennis-ball calc(9s * var(--motion-pace)) ease-in-out infinite; }
.motion-tracer { stroke-width:1.4; stroke-dasharray:24 480; animation:motion-trace calc(9s * var(--motion-pace)) linear infinite; }
.motion-breath { transform-box:fill-box; transform-origin:center; animation:motion-breathe calc(7s * var(--motion-pace)) ease-in-out infinite; }
.motion-breath-outer { animation-delay:-3s; }
.motion-beacon { transform-box:fill-box; transform-origin:center; animation:motion-beacon calc(4s * var(--motion-pace)) ease-in-out infinite; }
.motion-dust i { position:absolute; display:block; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:var(--accent2); opacity:.2; animation:motion-dust calc(var(--duration) * var(--motion-pace)) var(--delay) ease-in-out infinite alternate; }
.motion-dust i:nth-child(3n) { width:6px; height:6px; background:transparent; border:1px solid var(--accent2); }
html[data-motion="standard"] .motion-dust i:nth-child(n+7) { display:none; }
html[data-backdrop="plain"] .motion-atmosphere { display:none; }
html[data-motion-scene="home"] .motion-scene { top:23%; opacity:.24; }
html[data-motion-scene="calendar"] .motion-scene { transform:rotate(-8deg); top:28%; opacity:.13; }
html[data-motion-scene="physical"] .motion-halo-one { top:8%; right:-4%; }
html[data-motion-scene="physical"] .motion-scene { transform:rotate(0); opacity:.17; }
html[data-motion-scene="stats"] .motion-scene { top:32%; transform:rotate(-5deg); }
html[data-motion-scene="progress"] .motion-scene { top:21%; transform:rotate(-3deg); opacity:.16; }
html[data-motion-scene="notes"] .motion-scene { transform:rotate(12deg); opacity:.12; }
html[data-mode="light"] .motion-atmosphere { opacity:calc(var(--visual-glow) * .5); }
html[data-motion-background="on"]:not([data-motion="reduced"]) .hero .visual-court { animation:motion-home-court calc(12s * var(--motion-pace)) ease-in-out infinite alternate; }
html[data-motion-background="on"]:not([data-motion="reduced"]) .hero .court-ball { animation:motion-tennis-ball calc(8s * var(--motion-pace)) ease-in-out infinite; }
html[data-motion-background="on"]:not([data-motion="reduced"]) .hero::before { animation:motion-hero-light calc(9s * var(--motion-pace)) ease-in-out infinite alternate; }
.page-head { position:relative; }
.motion-heading { position:absolute; width:115px; right:0; top:-22px; height:67px; opacity:.37; pointer-events:none; }
.motion-heading svg { width:100%; height:100%; }
.motion-heading .motion-drawing { stroke-width:3; }
html[data-motion-pages="on"] .motion-heading .motion-drawing > path { stroke-dasharray:1100; animation:motion-heading-draw 1.4s var(--ease-out) both; }
html[data-motion-background="off"] .motion-heading .motion-drawing * { animation:none!important; }
.motion-card { position:relative; }
.motion-card::before { content:""; position:absolute; z-index:2; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(230px circle at var(--motion-x,50%) var(--motion-y,50%),color-mix(in srgb,var(--accent2) 10%,transparent),transparent 75%); transition:opacity .3s ease; }
html[data-motion-interactions="on"] .motion-card.motion-spotlit::before { opacity:1; }
html[data-motion-interactions="on"] .bottom .nav.active b { animation:motion-nav-arrive .48s var(--ease-out); }
html[data-motion-interactions="on"] .tab.active::after,html[data-motion-interactions="on"] .setting-tab.active::after { content:""; position:absolute; left:24%; right:24%; bottom:3px; height:1px; background:currentColor; border-radius:99px; animation:motion-tab-line .35s var(--ease-out); }
.tab,.setting-tab { position:relative; }
html[data-motion-pages="on"] .sheet-bg.open .sheet-item { animation:motion-menu-item .45s var(--ease-out) both; }
html[data-motion-pages="on"] .sheet-bg.open .sheet-item:nth-of-type(2) { animation-delay:35ms; }
html[data-motion-pages="on"] .sheet-bg.open .sheet-item:nth-of-type(3) { animation-delay:70ms; }
html[data-motion-pages="on"] .sheet-bg.open .sheet-item:nth-of-type(4) { animation-delay:105ms; }
html[data-motion-pages="on"] .sheet-bg.open .sheet-item:nth-of-type(n+5) { animation-delay:140ms; }
html[data-motion-charts="on"][data-motion="expressive"] .bar i { position:relative; overflow:hidden; }
html[data-motion-charts="on"][data-motion="expressive"] .bar i::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 25%,#ffffff65 48%,transparent 70%); transform:translateX(-110%); animation:motion-bar-light 7s 1s ease-in-out infinite; }
html[data-motion-background="on"][data-motion="expressive"] .ring::before,html[data-motion-background="on"][data-motion="expressive"] .phys-ring::before,html[data-motion-background="on"][data-motion="expressive"] .timer-ring::before { content:""; position:absolute; inset:-7px; border:1px solid color-mix(in srgb,var(--accent2) 26%,transparent); border-radius:50%; pointer-events:none; animation:motion-ring-halo 5s ease-in-out infinite; }
html[data-motion-background="on"] .month-day.today { position:relative; }
html[data-motion-background="on"] .month-day.today::after { content:""; position:absolute; right:7px; top:7px; width:4px; height:4px; border-radius:50%; background:var(--accent2); animation:motion-today 4s ease-in-out infinite; pointer-events:none; }
html[data-motion-interactions="on"] .check.done { animation:motion-check .5s var(--ease-out); }
html[data-motion-interactions="on"] .note-pin:active { animation:motion-pin .45s ease; }
.motion-celebration { position:fixed; z-index:105; pointer-events:none; width:1px; height:1px; left:50%; bottom:128px; }
.motion-celebration i { position:absolute; width:5px; height:9px; border-radius:2px; background:var(--accent); opacity:0; animation:motion-confetti .95s var(--delay) cubic-bezier(.12,.6,.35,1) both; }
.motion-celebration i:nth-child(2n) { background:var(--visual-accent2); height:5px; border-radius:50%; }
.motion-celebration i:nth-child(3n) { background:var(--text); width:3px; height:7px; }
.motion-saved i { width:4px; height:4px; border-radius:50%; }
.studio-effect-switch { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.studio-effect-switch:last-child { border:0; }
.studio-effect-switch b { display:block; font-size:11px; font-weight:600; }
.studio-effect-switch small { display:block; font-size:10px; margin-top:5px; color:var(--muted); line-height:1.4; }
.studio-effect-switch input { accent-color:var(--accent); width:20px; height:20px; flex:0 0 20px; margin:0; cursor:pointer; }
#motionToggle { position:relative; }
#motionToggle[aria-pressed="true"] { color:var(--accent2); }
#motionToggle[aria-pressed="true"]::after { content:""; position:absolute; right:6px; top:6px; width:3px; height:3px; border-radius:50%; background:currentColor; }
.topbar { grid-template-columns:36px minmax(0,1fr) 120px; }
.top-actions { gap:6px; }
.topbar .icon-btn { width:36px; height:36px; }
.brand svg { flex:0 0 28px; width:28px; height:28px; }
.brand span { font-size:14px; letter-spacing:.16em; }

/* Désactiver une catégorie arrête aussi les effets de la version précédente. */
html[data-motion-background="off"] .motion-atmosphere { display:none; }
html[data-motion-background="off"] .app::before,html[data-motion-background="off"] .hero::before,html[data-motion-background="off"] .visual-court,html[data-motion-background="off"] .court-ball { animation:none!important; }
html[data-motion-pages="off"] .sheet-bg,html[data-motion-pages="off"] .sheet,html[data-motion-pages="off"] .sheet-item,html[data-motion-pages="off"] .court-lines,html[data-motion-pages="off"] .motion-heading .motion-drawing > path { animation:none!important; }
html[data-motion-pages="off"] .story-cinematic *,html[data-motion-pages="off"] .story-cinematic::before { animation:none!important; }
html[data-motion-pages="off"] .story-final-logo,html[data-motion-pages="off"] .story-final-title,html[data-motion-pages="off"] .story-final-slogan { opacity:1;transform:none; }
html[data-motion-charts="off"] .bar i,html[data-motion-charts="off"] .bar i::after { animation:none!important; }
html[data-motion-interactions="off"] button,html[data-motion-interactions="off"] .switch i,html[data-motion-interactions="off"] .toast { transition:none!important; }
html[data-motion-interactions="off"] button:active,html[data-motion-interactions="off"] .studio-palette:hover { transform:none!important; filter:none!important; }
html[data-motion-interactions="off"] .visual-ripple,html[data-motion-interactions="off"] .motion-card::before { display:none; }
html[data-motion="reduced"] .motion-atmosphere,html[data-motion="reduced"] .motion-celebration { display:none; }
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html[data-visual-paused="true"] *,html[data-visual-paused="true"] *::before,html[data-visual-paused="true"] *::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .motion-atmosphere,.motion-celebration { display:none; } }
@media(min-width:900px) { .topbar { grid-template-columns:40px minmax(0,1fr) 135px; }.topbar .icon-btn { width:39px;height:39px; }.brand span { font-size:16px; }.motion-celebration { left:calc(50% + 112px);bottom:60px; } }
@media(max-width:600px) { .motion-scene { width:110vw;right:-36%;top:28%;opacity:.14; }.motion-halo { width:110vw; }.motion-dust i:nth-child(n+7) { display:none; }.motion-heading { width:68px;right:0;top:-6px;height:40px;opacity:.24; } }
@media(hover:hover) { html[data-motion-interactions="on"] .nav:hover svg { transform:translateY(-2px);transition:transform .18s ease; } }
@keyframes motion-drift-one { to { transform:translate3d(-16%,22%,0) scale(1.12); } }
@keyframes motion-drift-two { to { transform:translate3d(22%,-16%,0) scale(.87); } }
@keyframes motion-dust { 0% { transform:translate3d(0,12px,0);opacity:.12; } 50% { opacity:.45; } 100% { transform:translate3d(var(--drift),-70px,0);opacity:.12; } }
@keyframes motion-trace { to { stroke-dashoffset:-504; } }
@keyframes motion-tennis-ball { 0%,100% { transform:translate(0,0); } 30% { transform:translate(70px,-95px); } 68% { transform:translate(-45px,-30px); } }
@keyframes motion-breathe { 0%,100% { transform:scale(.94);opacity:.55; } 50% { transform:scale(1.06);opacity:1; } }
@keyframes motion-beacon { 0%,100% { transform:scale(.8);opacity:.45; } 50% { transform:scale(1.25);opacity:1; } }
@keyframes motion-home-court { from { transform:rotate(-22deg) translate3d(0,0,0); } to { transform:rotate(-19deg) translate3d(-6px,8px,0); } }
@keyframes motion-hero-light { to { transform:translate3d(-35px,25px,0) scale(1.2);opacity:.65; } }
@keyframes motion-heading-draw { from { stroke-dashoffset:1100;opacity:0; } to { stroke-dashoffset:0;opacity:1; } }
@keyframes motion-nav-arrive { from { transform:translateY(5px) scale(.82); } to { transform:translateY(0) scale(1); } }
@keyframes motion-tab-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes motion-menu-item { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:translateY(0); } }
@keyframes motion-bar-light { 0%,65% { transform:translateX(-110%); } 88%,100% { transform:translateX(110%); } }
@keyframes motion-ring-halo { 0%,100% { transform:scale(1);opacity:.3; } 50% { transform:scale(1.045);opacity:.75; } }
@keyframes motion-today { 0%,100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 12%,transparent); } }
@keyframes motion-check { 0% { transform:scale(.8); } 65% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes motion-pin { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-14deg); } 70% { transform:rotate(9deg); } }
@keyframes motion-confetti { 0% { opacity:0;transform:translate(0,0) scale(.2); } 15% { opacity:.9; } 85% { opacity:.5; } 100% { opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--twist)) scale(.55); } }