/* Digital Education v6 — mode « Animations ». Tout est limité à html.fx : interrupteur sur Off = rendu identique à la v5. */

.fxsw-unused{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font:600 .78rem system-ui,sans-serif;color:var(--mut);user-select:none}

.fxsw input{position:absolute;opacity:0;width:0;height:0}

.fxsw .trk{position:relative;width:2.5rem;height:1.35rem;border-radius:999px;background:var(--line);border:1px solid var(--line);transition:background .25s,border-color .25s}

.fxsw .trk::after{content:"";position:absolute;top:.1rem;left:.12rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--card);box-shadow:0 1px 3px #0004;transition:transform .28s cubic-bezier(.3,1.4,.5,1)}

.fxsw input:checked+.trk{background:linear-gradient(90deg,var(--acc),#8e44ad);border-color:transparent}

.fxsw input:checked+.trk::after{transform:translateX(1.12rem)}

.fxsw input:focus-visible+.trk{outline:2px solid var(--acc);outline-offset:2px}

html:not(.fx) #fxbg,html:not(.fx) #fxtop,html:not(.fx) #fxconf{display:none}

html.fx #fxbg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}

html.fx #fxconf{position:fixed;inset:0;z-index:60;pointer-events:none}

html.fx #fxtop{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),#8e44ad,#d9731a);box-shadow:0 0 10px var(--acc)}

html.fx body{background-image:radial-gradient(60rem 40rem at 10% -10%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%),radial-gradient(50rem 36rem at 100% 10%,color-mix(in srgb,#8e44ad 12%,transparent),transparent 60%),radial-gradient(46rem 30rem at 50% 110%,color-mix(in srgb,#d9731a 10%,transparent),transparent 60%);background-attachment:fixed}

html.fx header#top{backdrop-filter:blur(10px) saturate(1.3);background:color-mix(in srgb,var(--bg) 82%,transparent)}

html.fx .brand img{transition:transform .6s cubic-bezier(.3,1.5,.5,1),filter .3s}
html.fx .brand:hover img{transform:rotate(360deg) scale(1.12);filter:drop-shadow(0 0 8px var(--acc))}

html.fx .brand .bn{background:linear-gradient(90deg,var(--fg),var(--acc),var(--fg));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 6s linear infinite}

html.fx nav a{position:relative;transition:color .2s,background .2s,transform .2s}

html.fx nav a:hover{transform:translateY(-2px)}

html.fx header#top nav a.on{box-shadow:none}

html.fx nav a.on::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.12rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),#8e44ad);animation:fxGrow .45s ease both}

@keyframes fxShine{to{background-position:-200% 0}}

@keyframes fxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* entrée de page et révélation au défilement */

html.fx #app.fx-page>*{animation:fxPage .55s cubic-bezier(.2,.8,.2,1) both}

@keyframes fxPage{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

html.fx .fx-rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}

html.fx .fx-rv.fx-in{opacity:1;transform:none}

/* cartes : relief, halo qui suit le curseur */

html.fx .pt,html.fx .grid>div,html.fx .card,html.fx .box,html.fx .row{position:relative}

html.fx .pt,html.fx .grid>div,html.fx .card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s;transform-style:preserve-3d}
html.fx .pt::before,html.fx .grid>div::before,html.fx .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(22rem circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 16%,transparent),transparent 55%)}

html.fx .pt:hover::before,html.fx .grid>div:hover::before,html.fx .card:hover::before{opacity:1}

html.fx .pt:hover,html.fx .card:hover,html.fx .grid>div:hover{box-shadow:0 14px 34px #0002,0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}

html.fx .row{transition:background .25s,padding-left .25s}

html.fx .row:hover{background:color-mix(in srgb,var(--acc) 7%,transparent);padding-left:.5rem;border-radius:6px}

/* boutons */

html.fx button{transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;position:relative;overflow:hidden}

html.fx button:active{transform:scale(.95)}

html.fx button.p:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 45%,transparent);transform:translateY(-2px)}

html.fx .fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;transform:scale(0);animation:fxRip .6s ease-out forwards}

@keyframes fxRip{to{transform:scale(1);opacity:0}}

html.fx .m.on{animation:fxPop .5s cubic-bezier(.3,1.6,.5,1)}

@keyframes fxPop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* barres et graphiques */

html.fx .bar i{transform-origin:left;animation:fxBar 1s cubic-bezier(.2,.8,.2,1) both;background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 50%,var(--acc)))}

@keyframes fxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

html.fx .chart .ln{stroke-dasharray:1400;stroke-dashoffset:1400;animation:fxDraw 1.6s ease-out .15s forwards}
html.fx .chart .dot{transform-box:fill-box;transform-origin:center;animation:fxDot .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.2s + var(--i,0)*.12s)}

html.fx .chart svg{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c) 28%,transparent))}

@keyframes fxDraw{to{stroke-dashoffset:0}}

@keyframes fxDot{from{transform:scale(0)}to{transform:scale(1)}}

/* panneaux (vidéos, exercices) */

html.fx .vpanel:not([hidden]){animation:fxDrop .4s cubic-bezier(.2,.8,.2,1)}

@keyframes fxDrop{from{opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top}to{opacity:1;transform:none}}

html.fx .vbtn svg{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}

html.fx .vbtn:hover svg{transform:scale(1.25) rotate(-6deg)}

html.fx ul.vl li,html.fx ul.xl li{transition:padding-left .2s,background .2s}

html.fx ul.vl li:hover,html.fx ul.xl li:hover{padding-left:.4rem;background:color-mix(in srgb,var(--acc) 6%,transparent)}

html.fx .stars .on{text-shadow:0 0 8px #e0a20066}

/* QCM */

html.fx .qlist .qo{animation:fxPage .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.07s)}

html.fx .qo:hover:not(:disabled){transform:translateX(6px);box-shadow:0 6px 18px #0002}

html.fx .qo.ok{animation:fxOk .7s ease both}
html.fx .qo.ko{animation:fxShake .5s ease both}

@keyframes fxOk{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 18px transparent}}

@keyframes fxShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

html.fx .qtbar i{background:linear-gradient(90deg,var(--ok),#e0a200,var(--warn));box-shadow:0 0 12px var(--warn)}

html.fx .qscore b{background:linear-gradient(90deg,var(--acc),#8e44ad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

@media (prefers-reduced-motion:reduce){html.fx *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html.fx #fxbg{display:none}}

/* ---- v9 : barre du haut (mode interactif) : fermeture vive, ouverture rebondissante, onglets qui apparaissent en cascade ---- */

html.fx header#top{transform-origin:50% 0;filter:blur(5px);transition:transform .22s cubic-bezier(.55,0,.9,.45),opacity .18s linear,filter .2s ease-in}

html.fx body.bar-open header#top,html.fx body.pin header#top{filter:none;transition:transform .5s cubic-bezier(.2,1.25,.35,1),opacity .22s linear,filter .3s ease-out}

html.fx body:not(.bar-open):not(.pin) header#top{transform:translateY(-105%) scaleY(.92)}

html.fx body.bar-opening #nav a,html.fx body.bar-opening .hi>*,html.fx body.bar-opening .hr>*{animation:fxNavIn .5s cubic-bezier(.2,1.3,.35,1) both;animation-delay:calc(var(--i,0) * 32ms)}

@keyframes fxNavIn{from{opacity:0;transform:translateY(-12px) scale(.9)}to{opacity:1;transform:none}}

html.fx .back{transition:background .2s,transform .2s}

html.fx .back:hover{transform:translateX(-3px)}

html.fx #gate .gcard{animation:fxPage .6s cubic-bezier(.2,.8,.2,1) both}

html.fx .brand .bn .ver{-webkit-text-fill-color:#fff;color:#fff;background-clip:border-box;-webkit-background-clip:border-box}