/* ==========================================================================
   theme.css — socle M0 Simulator (repris des tokens cockpit PRICING).
   SOMBRE par défaut ; clair via <html data-theme="light">.
   Les graphes Chart.js lisent ces tokens au rendu (getComputedStyle).
   ========================================================================== */
/* Couleurs de marque Cappanera Energy (violet -> magenta). --teal = couleur primaire/action. */
:root {
  --bg:#0c0a16; --panel:#15121f; --panel2:#100d18; --raise:#1c1728;
  --line:#2a2440; --line2:#382f54;
  --ink:#ece9f6; --dim:#9a93b5; --faint:#655d80;
  --teal:#a855f7; --amber:#f59e0b; --accent:#c084fc; --ok:#34d399; --err:#f87171; --violet:#b478ff;
  --brand1:#6d28d9; --brand2:#c026d3;
  --chart-ink:#9a93b5; --chart-grid:#2a2440; --chart-text:#ece9f6;
  --accent-2:#d8b4fe; --amber-2:#d97706;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
  --r-sm:8px; --r-md:10px; --r-lg:14px;
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
[data-theme="light"] {
  --bg:#f7f5fb; --panel:#ffffff; --panel2:#f3f0fa; --raise:#ffffff;
  --line:#e7e2f2; --line2:#d6cdea;
  --ink:#241a3a; --dim:#5f5676; --faint:#938aa8;
  --teal:#7c3aed; --amber:#b45309; --accent:#7c3aed; --ok:#059669; --err:#dc2626; --violet:#7c3aed;
  --brand1:#6d28d9; --brand2:#c026d3;
  --chart-ink:#5f5676; --chart-grid:#ece7f6; --chart-text:#241a3a;
  --accent-2:#a855f7; --amber-2:#92400e;
  --shadow:0 1px 2px rgba(45,20,88,.06), 0 8px 24px rgba(45,20,88,.08);
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-font-smoothing:antialiased; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:13.5px/1.5 "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings:"tnum" 1, "cv08" 1; }
::selection { background:color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:6px; }
::-webkit-scrollbar { height:10px; width:10px; }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }
a { color:var(--accent); text-decoration:none; }

/* ---------- Panneaux / cartes ---------- */
.panel, .carte { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow); }

/* ---------- Tables ---------- */
table { border-collapse:collapse; font-size:12.5px; }
th, td { padding:7px 10px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-weight:650; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Formulaires & boutons ---------- */
label { display:block; font-size:12px; color:var(--dim); margin:0 0 4px; }
input, select, button, textarea { background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:7px 11px; font:inherit; font-size:13px;
  transition:border-color .12s, background .12s; }
input:hover, select:hover, textarea:hover { border-color:var(--line2); }
input[type=file] { padding:5px; }
button { cursor:pointer; font-weight:550; }
button:hover { background:var(--raise); border-color:var(--line2); }
button.primary { background:var(--teal); border-color:transparent; color:#fff; font-weight:700; }
button.primary:hover { filter:brightness(1.08); background:var(--teal); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.tiny { padding:5px 10px; font-size:11.5px; }
button.danger { color:var(--err); }

/* ---------- Badges ---------- */
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
  border:1px solid var(--line); color:var(--dim); }
.badge.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent);
  background:color-mix(in srgb, var(--ok) 8%, transparent); }
.badge.warn { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent);
  background:color-mix(in srgb, var(--amber) 8%, transparent); }
.badge.err { color:var(--err); border-color:color-mix(in srgb, var(--err) 35%, transparent);
  background:color-mix(in srgb, var(--err) 8%, transparent); }
.badge.info { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- Carte de connexion ---------- */
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; width:100%; max-width:400px; box-shadow:var(--shadow); }
.card h1 { margin:0 0 4px; font-size:20px; color:var(--ink); }
.card p.sub { margin:0 0 20px; color:var(--dim); font-size:13px; }
.card label { display:block; margin:12px 0 4px; }
.card input { width:100%; padding:11px 12px; font-size:14px; border-radius:var(--r-md); }
.card button.primary { width:100%; margin-top:20px; padding:12px; font-size:14px; border-radius:var(--r-md); }
.err { color:var(--err); font-size:13px; margin-top:12px; min-height:18px; }
.ok-msg { color:var(--ok); font-size:13px; margin-top:12px; min-height:18px; }
.theme-coin { position:fixed; top:14px; right:16px; z-index:30; }