/* ══════════════════════════════════════════════════════
   THEMES — Dark / Neon / Matrix
   Surcharge les tokens CSS de style.css via data-theme
══════════════════════════════════════════════════════ */

/* Transition douce sur le body lors du changement de thème */
body { transition: background-color .5s; }
.card { transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.22,1,.36,1), background .4s; }

/* ── Dark (par défaut) ────────────────────────────── */
[data-theme="dark"] {
  --p:    #8200d9;
  --pl:   #a535ff;
  --pll:  #c47fff;
  --pd:   #5500a0;
  --pg:   rgba(130,0,217,.4);
  --pdim: rgba(130,0,217,.1);
  --pb:   rgba(130,0,217,.22);
  --pbh:  rgba(130,0,217,.42);
  --cyan: #00d4ff;
  --pink: #ff2d78;
  --green:#3dffa0;
  --bg:   #06000e;
  --tx:   #eeeaff;
  --tx2:  rgba(238,234,255,.5);
  --tx3:  rgba(238,234,255,.26);
  --glass-bg:    rgba(255,255,255,.04);
  --glass-bd:    rgba(255,255,255,.075);
  --glass-bdhov: rgba(255,255,255,.16);
  --grad:  linear-gradient(135deg,#8200d9 0%,#a535ff 45%,#00d4ff 100%);
  --grad2: linear-gradient(135deg,#8200d9,#ff2d78);
}

/* ── Neon — violet électrique + cyan vif ──────────── */
[data-theme="neon"] {
  --p:    #c400ff;
  --pl:   #e040fb;
  --pll:  #f580ff;
  --pd:   #8800b3;
  --pg:   rgba(196,0,255,.5);
  --pdim: rgba(196,0,255,.13);
  --pb:   rgba(196,0,255,.22);
  --pbh:  rgba(196,0,255,.5);
  --cyan: #00ffea;
  --pink: #ff0066;
  --green:#39ff14;
  --bg:   #050008;
  --tx:   #fff5ff;
  --tx2:  rgba(255,245,255,.5);
  --tx3:  rgba(255,245,255,.26);
  --glass-bg:    rgba(196,0,255,.05);
  --glass-bd:    rgba(196,0,255,.18);
  --glass-bdhov: rgba(196,0,255,.4);
  --grad:  linear-gradient(135deg,#c400ff 0%,#00ffea 100%);
  --grad2: linear-gradient(135deg,#c400ff,#ff0066);
}

[data-theme="neon"] body::before {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(5,0,8,.8) 100%);
}

/* ── Matrix — fond noir + vert terminal ───────────── */
[data-theme="matrix"] {
  --p:    #00c853;
  --pl:   #00e676;
  --pll:  #69ff47;
  --pd:   #00701e;
  --pg:   rgba(0,200,83,.4);
  --pdim: rgba(0,200,83,.1);
  --pb:   rgba(0,200,83,.18);
  --pbh:  rgba(0,200,83,.4);
  --cyan: #76ff03;
  --pink: #ff6d00;
  --green:#00e676;
  --bg:   #010d01;
  --tx:   #ccffcc;
  --tx2:  rgba(204,255,204,.5);
  --tx3:  rgba(204,255,204,.26);
  --glass-bg:    rgba(0,200,83,.04);
  --glass-bd:    rgba(0,200,83,.14);
  --glass-bdhov: rgba(0,200,83,.35);
  --grad:  linear-gradient(135deg,#00c853 0%,#76ff03 100%);
  --grad2: linear-gradient(135deg,#00c853,#ff6d00);
}

[data-theme="matrix"] body::before {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(1,13,1,.85) 100%);
}

/* Fond matrix — rain scanline subtle */
[data-theme="matrix"] body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,200,83,.018) 2px,
    rgba(0,200,83,.018) 4px
  );
  animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}