/* EduOne design system – une seule feuille pour toutes les interfaces.
   Amélioration progressive : couleurs hex d'abord (vieux téléphones), puis oklch + light-dark() si le navigateur sait. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
:root { color-scheme: light dark; --r: 18px;
  --bg:#eef2fa; --card:rgba(255,255,255,.82); --solid:#fff; --tx:#0d1a3a; --mu:#5a6a8e; --bd:#d6dff0; --pr:#0241ab; --prt:#fff;
  --ok:#15803d; --wa:#b45309; --er:#b91c1c; --soft:#e8eefb; --sh:0 1px 2px rgba(13,26,58,.08),0 10px 30px rgba(13,26,58,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#0a1226; --card:rgba(17,28,56,.78); --solid:#111c38; --tx:#e8eeff; --mu:#93a3c8; --bd:#22325a;
  --pr:#7ea2ff; --prt:#06122e; --ok:#4ade80; --wa:#fbbf24; --er:#f87171; --soft:#16264b; } }
@supports (color: light-dark(red, blue)) and (color: oklch(.5 .1 200)) { :root {
  --bg: light-dark(oklch(.975 .01 262), oklch(.16 .035 262)); --card: light-dark(oklch(1 0 0 / .78), oklch(.23 .045 262 / .72));
  --solid: light-dark(#fff, oklch(.23 .045 262)); --tx: light-dark(oklch(.22 .05 262), oklch(.95 .012 262));
  --mu: light-dark(oklch(.5 .05 262), oklch(.76 .05 262)); --bd: light-dark(oklch(.91 .02 262), oklch(.33 .06 262));
  --pr: light-dark(oklch(.42 .19 262), oklch(.76 .14 262)); --prt: light-dark(#fff, oklch(.18 .05 262));
  --ok: light-dark(oklch(.55 .15 150), oklch(.8 .17 150)); --wa: light-dark(oklch(.6 .14 65), oklch(.84 .15 85));
  --er: light-dark(oklch(.55 .21 25), oklch(.76 .17 25)); --soft: light-dark(oklch(.95 .025 262), oklch(.27 .07 262)); } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; color: var(--tx); background: var(--bg);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  font: clamp(14px, .4vw + 13px, 16px)/1.5 "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; }
@supports (background: color-mix(in srgb, red, blue)) { body {
  background: radial-gradient(1100px 560px at 8% -8%, color-mix(in srgb, var(--pr) 17%, transparent), transparent 62%),
              radial-gradient(800px 460px at 100% 0, color-mix(in srgb, var(--pr) 9%, transparent), transparent 58%), var(--bg); background-attachment: fixed; } }
.glass { background: var(--card); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh); }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--soft); color: var(--pr); }
.btn { padding: 10px 16px; border: 0; border-radius: 12px; background: var(--pr); color: var(--prt); font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.97); }
.btn.alt { background: var(--soft); color: var(--tx); border: 1px solid var(--bd); }
input, select { width: 100%; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px; background: var(--solid); color: var(--tx); font: inherit; }
:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); overflow-x: auto; max-width: 100%; }
.seg button { padding: 8px 14px; border: 0; border-radius: 10px; background: none; color: var(--mu); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--solid); color: var(--pr); box-shadow: var(--sh); }
.ringw { position: relative; width: var(--s, 160px); aspect-ratio: 1; flex: none; }
.ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c, var(--pr)) calc(var(--p) * 1%), var(--soft) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  transition: --p 1.2s cubic-bezier(.2, .8, .2, 1); }
.ringv { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ringv b { font-size: calc(var(--s, 160px) * .24); letter-spacing: -.03em; line-height: 1; } .ringv small { color: var(--mu); }
.mu { color: var(--mu); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.rv { animation: rise .5s both cubic-bezier(.2, .8, .2, 1); }
@supports (animation-timeline: view()) { .rv { animation: rise both linear; animation-timeline: view(); animation-range: entry 0% cover 28%; } }
@media (prefers-reduced-motion: reduce) { *, .rv { animation: none !important; transition: none !important; } }