/* Digital Education v7 — mode « Gamifié ». Tout ce qui est visuel est limité à html.gm ou à des éléments que le JS n'écrit que si le mode est actif. */

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

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

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

.gmsw .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)}

.gmsw input:checked+.trk{background:linear-gradient(90deg,#f59e0b,#ef4444);border-color:transparent}

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

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

.gchip{display:inline-flex;align-items:center;gap:.5rem;font:700 .78rem system-ui,sans-serif;text-decoration:none;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:.22rem .7rem;background:var(--card)}

.gchip[hidden]{display:none}.gchip:hover{border-color:#f59e0b}

.gc-f.lit{animation:gFlick 1.6s ease-in-out infinite}

.gc-b{width:42px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.gc-b i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444)}

.gc-x{color:var(--mut);font-weight:600}
@keyframes gFlick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(1.05) rotate(5deg)}}

/* carte « QCM du jour » */

.gm-hero{border-radius:16px;padding:1.4rem 1.6rem;margin:0 0 2rem;color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#ef4444 52%,#a855f7 100%);box-shadow:0 18px 44px #ef444440;position:relative;overflow:hidden}

.gm-hero.done{background:linear-gradient(135deg,#10b981 0%,var(--acc-base) 60%,#8b5cf6 100%);box-shadow:0 18px 44px #3b82f640}

.gm-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#fff3,transparent 65%);pointer-events:none}

.gm-hero h2{margin:.1rem 0 .3rem;font-size:2rem;line-height:1.1;color:#fff}.gm-hero p{margin:.2rem 0 .8rem;font:500 1.02rem/1.45 system-ui,sans-serif;max-width:34rem}

.gm-main{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center}

@media(max-width:820px){.gm-main{grid-template-columns:1fr}}

.gm-flame{display:flex;flex-direction:column;align-items:center;min-width:7.5rem;font-family:system-ui,sans-serif}

.gm-flame .fl{font-size:3.6rem;line-height:1;filter:grayscale(.85) brightness(1.3)}.gm-flame.lit .fl{filter:none;animation:gFlick 1.6s ease-in-out infinite}

.gm-flame b{font-size:3rem;line-height:1;margin-top:.1rem}.gm-flame small{opacity:.9;font-weight:600}

.gm-go{background:#fff!important;color:#b91c1c!important;border:0!important;font:800 1.05rem system-ui,sans-serif!important;padding:.75rem 1.5rem!important;border-radius:999px!important;box-shadow:0 8px 20px #0003}

.gm-hero.done .gm-go{color:var(--acc-base)!important}

.gm-go:hover:not(:disabled){transform:translateY(-2px) scale(1.03);box-shadow:0 12px 26px #0004}

.gm-hero .meta{color:#fff;opacity:.9}.gm-side{display:flex;flex-direction:column;gap:.9rem;min-width:13rem;font-family:system-ui,sans-serif}
.gm-lv{font-size:.95rem;line-height:1.35}.gm-lv .gm-t{margin-left:.2rem}.gm-lv small,.gm-lvbig small{display:block;opacity:.9;margin-top:.15rem}

.gm-xpbar{height:10px;border-radius:5px;background:#0003;overflow:hidden;margin:.3rem 0}.gm-xpbar i{display:block;height:100%;background:#fff;border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.2,1)}

.gm-xpbar.big{height:14px;background:var(--line)}.gm-xpbar.big i{background:linear-gradient(90deg,#f59e0b,#ef4444)}

.gm-goal{display:flex;align-items:center;gap:.7rem}.gm-goal small{font-weight:600;line-height:1.3}

.gm-goal .gringt{fill:#fff}.gm-hero .gring circle:first-child{stroke:#fff4}

.gm-week{display:flex;gap:.55rem;align-items:center;margin-top:1.1rem;flex-wrap:wrap;font-family:system-ui,sans-serif}

.gm-week a{margin-left:auto;color:#fff;text-decoration:underline}

.gday{display:flex;flex-direction:column;align-items:center;width:2.6rem;padding:.25rem 0;border-radius:10px;background:#fff2;font-size:.7rem;font-weight:700}

.gday b{font-size:1.15rem;line-height:1.4}.gday.ok{background:#fff3}.gday.now{outline:2px dashed #fff9;animation:gPulse 1.8s ease-in-out infinite}

@keyframes gPulse{50%{background:#fff4}}

.glost{background:#0004;border-radius:10px;padding:.5rem .9rem;margin-bottom:1rem;font:600 .95rem system-ui,sans-serif}

/* résultats */

.gm-res{border-radius:16px;padding:1.6rem;text-align:center;margin:1rem 0;border:2px solid var(--line);background:var(--card)}

.gm-res.win{border-color:#10b981;background:linear-gradient(180deg,color-mix(in srgb,#10b981 14%,var(--card)),var(--card))}.gm-res.lose{border-color:#f59e0b}

.gm-score{font:800 4.5rem/1 system-ui,sans-serif;background:linear-gradient(90deg,#f59e0b,#ef4444);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.gm-score small{font-size:1.6rem;-webkit-text-fill-color:var(--mut);background:none}

/* statistiques, badges, anneaux, calendrier */

.gstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem;margin:1rem 0}

.gstats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem;text-align:center}

.gstats b{display:block;font:800 1.7rem system-ui,sans-serif;background:linear-gradient(90deg,#f59e0b,#ef4444);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.gstats small{font:600 .72rem system-ui,sans-serif;color:var(--mut)}

.gbadges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}

.gb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:.8rem .5rem;border-radius:12px;border:1px solid var(--line);background:var(--card);opacity:.55;filter:grayscale(1);transition:transform .2s}

.gb.got{opacity:1;filter:none;border-color:#f59e0b;box-shadow:0 4px 14px #f59e0b30}.gb.got:hover{transform:translateY(-3px) rotate(-1deg)}

.gb span{font-size:2rem}.gb b{font:700 .85rem system-ui,sans-serif}.gb small{font:.7rem system-ui,sans-serif;color:var(--mut)}

.gring .gr{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}.gringt{fill:var(--fg);font:800 14px system-ui,sans-serif}

.grings{display:flex;gap:1.2rem;flex-wrap:wrap}.grings div{display:flex;flex-direction:column;align-items:center;font-family:system-ui,sans-serif}

.gm-lvbig{display:flex;gap:1.2rem;align-items:center;margin:.6rem 0}.gm-lvbig>div{flex:1;font-family:system-ui,sans-serif}

.gheat{display:flex;gap:3px;overflow-x:auto;padding:.3rem 0}.gheat>div{display:flex;flex-direction:column;gap:3px}

.gh{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--line)}.gh.v1{background:color-mix(in srgb,#10b981 35%,var(--line))}.gh.v2{background:color-mix(in srgb,#10b981 65%,var(--line))}.gh.v3{background:#f59e0b}.gh.vx{background:transparent}
.gleg{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

.gpool{list-style:none;padding:0}.gpool li{padding:.45rem 0;border-bottom:1px solid var(--line)}

/* notifications */

#gtoasts{position:fixed;right:1rem;bottom:1rem;z-index:90;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;pointer-events:none}

.gt{background:var(--fg);color:var(--bg);padding:.6rem 1rem;border-radius:12px;font:600 .9rem/1.35 system-ui,sans-serif;box-shadow:0 10px 30px #0005;transform:translateX(30px);opacity:0;transition:all .4s cubic-bezier(.2,.9,.3,1.3);max-width:20rem}

.gt.in{transform:none;opacity:1}.gt.gbig{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:1rem}.gt.warn{background:var(--warn);color:#fff}.gt span{font-weight:500;opacity:.9}

.gfx{position:fixed;z-index:95;pointer-events:none;font:800 1.2rem system-ui,sans-serif;color:#f59e0b;text-shadow:0 2px 8px #0006;transform:translate(-50%,-50%);animation:gUp 1.2s ease-out forwards}

@keyframes gUp{to{transform:translate(-50%,-190%);opacity:0}}

#gconf{position:fixed;inset:0;z-index:92;pointer-events:none}

/* en mode gamifié : points de cours plus vivants */

html.gm .m.on{animation:gPop .45s cubic-bezier(.3,1.6,.5,1)}

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

html.gm .bar i{background:linear-gradient(90deg,#10b981,var(--acc))}

@media (prefers-reduced-motion:reduce){.gm-flame.lit .fl,.gc-f.lit,.gday.now,.gfx{animation:none}}

/* v10 : résultat d'un QCM du jour affiché par js/qcm.js (mêmes classes .gm-res / .gm-score qu'avant) */

.gm-res+.qkey{margin-top:1rem}