/* SYSFLASH — jetons de design & composants communs (clair + sombre) */
:root{
  --bg:#f5f5f7; --bg2:#ffffff; --surface:rgba(255,255,255,.78); --solid:#ffffff; --field:#ffffff;
  --text:#1d1d1f; --muted:#5f6470; --line:rgba(10,20,40,.10); --line2:rgba(10,20,40,.16);
  --brand:#0071e3; --brand-ink:#ffffff; --brand2:#00a3c4; --brand-soft:color-mix(in srgb,var(--brand) 11%,transparent); --logo:#1456a8;
  --ok:#0a8f5b; --warn:#b45309; --err:#c81e3a;
  --shadow:0 1px 2px rgba(10,20,40,.04),0 12px 32px -12px rgba(10,20,40,.14);
  --glow:0 14px 40px -14px color-mix(in srgb,var(--brand) 45%,transparent);
 
  --r-sm:10px; --r:18px; --r-lg:28px;
  --display:"Space Grotesk",-apple-system,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --body:"Manrope",-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f19; --bg2:#0f131d; --surface:rgba(19,27,46,.70); --solid:#131b2e; --field:rgba(14,20,36,.9);
    --text:#f3f6fc; --muted:#a3adc2; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
    --brand:#0099ff; --brand-ink:#001a33; --brand2:#00f0ff; --brand-soft:color-mix(in srgb,var(--brand) 11%,transparent);
    --ok:#4edea3; --warn:#f6b24a; --err:#ff8a8f;
    --shadow:0 20px 40px -18px rgba(0,0,0,.65);
    --glow:0 0 32px color-mix(in srgb,var(--brand) 30%,transparent);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0f19; --bg2:#0f131d; --surface:rgba(19,27,46,.70); --solid:#131b2e; --field:rgba(14,20,36,.9);
  --text:#f3f6fc; --muted:#a3adc2; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --brand:#0099ff; --brand-ink:#001a33; --brand2:#00f0ff; --brand-soft:color-mix(in srgb,var(--brand) 11%,transparent);
  --ok:#4edea3; --warn:#f6b24a; --err:#ff8a8f;
  --shadow:0 20px 40px -18px rgba(0,0,0,.65);
  --glow:0 0 32px color-mix(in srgb,var(--brand) 30%,transparent);
  color-scheme:dark;
}
/* Thème « Cyber Accent » : noir profond, accents néon */
:root[data-theme="cyber"]{
  --bg:#040608; --bg2:#080c10; --surface:rgba(10,16,20,.74); --solid:#0a1014; --field:rgba(4,8,10,.92);
  --text:#eafcff; --muted:#8fb3bb; --line:color-mix(in srgb,var(--brand) 16%,transparent); --line2:color-mix(in srgb,var(--brand) 30%,transparent);
  --brand:#00f0ff; --brand-ink:#001a1d; --brand2:#0099ff; --brand-soft:color-mix(in srgb,var(--brand) 10%,transparent);
  --ok:#4edea3; --warn:#f6b24a; --err:#ff8a8f;
  --shadow:0 20px 44px -18px #000;
  --glow:0 0 28px color-mix(in srgb,var(--brand) 40%,transparent);
  color-scheme:dark;
}
:root[data-theme="cyber"] .btn.primary{color:#001a1d}
:root[data-theme="cyber"] .card{border-radius:14px}
:root[data-theme="cyber"] .logo-l,:root[data-theme="cyber"] .i-sun{display:none}
:root[data-theme="cyber"] .logo-d,:root[data-theme="cyber"] .i-moon{display:block}
.i-play{display:none}
[aria-pressed="true"] .i-play{display:block}[aria-pressed="true"] .i-pause{display:none}
.flip .ico{transform:scaleX(-1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
code,.mono{font-family:var(--mono);font-size:.9em}
.muted{color:var(--muted)} .small{font-size:.84rem} .hide{display:none!important} .center{text-align:center}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.ico{width:20px;height:20px;flex:none}
.eyebrow,.code{font:500 .72rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.code{color:var(--muted)}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:.55em;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);vertical-align:middle}

.logo-chip{display:inline-flex;align-items:center}
.logo-chip img{height:40px;width:auto;max-width:100%;object-fit:contain}
.logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-l{display:none}:root:not([data-theme="light"]) .logo-d{display:block}}
:root[data-theme="dark"] .logo-l{display:none}:root[data-theme="dark"] .logo-d{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.7em 1.35em;border-radius:999px;border:1px solid transparent;
  font:600 .95rem/1 var(--body);cursor:pointer;transition:transform .2s,box-shadow .25s,background .2s,border-color .2s;text-decoration:none!important;white-space:nowrap}
.btn.primary{background:var(--brand);color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.glass{background:var(--surface);color:var(--text);border-color:var(--line2);backdrop-filter:blur(16px)}
.btn.glass:hover{border-color:var(--brand)}
.btn.ghost{background:none;color:var(--muted)} .btn.ghost:hover{color:var(--brand)}
.btn.danger{background:none;color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--err) 10%,transparent)}
.btn.sm{min-height:36px;padding:.45em 1em;font-size:.85rem}
.btn.block{width:100%;margin-top:.6rem}
.btn .ico{width:17px;height:17px;transition:transform .2s} .btn:hover .ico{transform:translateX(2px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(160%)}

label{display:flex;flex-direction:column;gap:.4rem;font:600 .8rem/1.3 var(--body);color:var(--muted);margin-bottom:1rem}
input,select,textarea{width:100%;font:500 1rem/1.4 var(--body);color:var(--text);background:var(--field);border:1px solid var(--line2);border-radius:var(--r-sm);padding:.75em .9em;min-height:46px;transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--brand)}
input[type=file]{padding:.5em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

.notice{padding:.85em 1.1em;border-radius:var(--r-sm);border:1px solid var(--line2);margin-bottom:1rem;font-size:.92rem;background:var(--brand-soft)}
.notice.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok)}
.notice.err{border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 9%,transparent);color:var(--err)}
.notice.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn)}
.chip{display:inline-flex;align-items:center;padding:.3em .8em;border-radius:999px;font:500 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--brand-soft);color:var(--brand)}
.chip.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.chip.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}
.chip.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .9em;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 .8rem/1 var(--body);cursor:pointer;text-decoration:none!important;transition:border-color .2s,background .2s}
.pill-btn:hover,.pill-btn.on{border-color:var(--brand);color:var(--brand)}
.pill-btn.on{background:var(--brand-soft)}
.pill-btn.icon{padding:0;width:40px}
.i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:none}:root:not([data-theme="light"]) .i-moon{display:block}}
:root[data-theme="dark"] .i-sun{display:none}:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}