/* ============================================================
   SJR Elite — Design system (repris du prototype)
   ============================================================ */
:root{
  --bg: #09090B;
  --surface: #18181B;
  --surface-2: #27272A;
  --surface-3: #3F3F46;
  --line: #27272A;
  --red: #E11D48;
  --red-dim: #BE123C;
  --red-soft: rgba(225, 29, 72, 0.12);
  --white: #FAFAFA;
  --gray: #A1A1AA;
  --text-muted: #52525B;
  --success: #10B981;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--white); font-family:var(--font); min-height:100%; }
body{ -webkit-font-smoothing:antialiased; }
::selection{ background:var(--red); color:#fff; }
a{ color:var(--red); }

/* ---------- brand ---------- */
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:40px; width:auto; display:block; }
.brand-mark{ font-weight:800; font-size:20px; letter-spacing:-0.02em; }
.brand-mark span{ color:var(--red); }
.brand-sub{ font-size:11px; letter-spacing:3px; color:var(--gray); text-transform:uppercase; margin-top:2px; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font); font-weight:600; font-size:14px; letter-spacing:.3px;
  padding:12px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--line);
  background:var(--surface-2); color:var(--white); transition:all .15s ease; width:100%;
}
.btn:hover{ border-color:var(--gray); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dim); border-color:var(--red-dim); }
.btn-ghost{ background:transparent; width:auto; padding:8px 12px; font-size:13px; }

/* ---------- form fields ---------- */
.field{ margin-bottom:14px; text-align:left; }
.field label{
  display:block; font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gray); margin-bottom:6px;
}
.field input{
  width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--white);
  padding:11px 13px; font-family:var(--font); font-size:14px; border-radius:10px;
}
.field input::placeholder{ color:var(--text-muted); }
.field input:focus{ outline:none; border-color:var(--red); }

/* ---------- auth layout ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:30px 28px; text-align:center;
}
.auth-card .brand{ justify-content:center; margin-bottom:22px; }
.auth-card h1{ font-size:19px; font-weight:700; margin-bottom:4px; }
.auth-card .subtitle{ font-size:13px; color:var(--gray); margin-bottom:22px; }
.auth-msg{
  font-size:13px; border-radius:10px; padding:10px 12px; margin-bottom:14px; display:none; text-align:left;
}
.auth-msg.error{ display:block; background:var(--red-soft); border:1px solid var(--red-dim); color:#fecdd3; }
.auth-msg.ok{ display:block; background:rgba(16,185,129,.12); border:1px solid var(--success); color:#a7f3d0; }
.auth-foot{ font-size:12px; color:var(--text-muted); margin-top:18px; line-height:1.5; }

/* ---------- simple authed page ---------- */
.page{ max-width:640px; margin:0 auto; padding:40px 24px; }
.page .topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:16px;
}
.card h2{ font-size:15px; font-weight:700; margin-bottom:12px; }
.kv{ display:flex; justify-content:space-between; font-size:14px; padding:7px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv span:first-child{ color:var(--gray); }
.badge{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:8px; background:var(--red-soft); color:var(--red); border:1px solid var(--red-dim);
}

/* ---------- mini graphique (chart.js) ---------- */
.chart-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; }
.chart{ width:100%; height:auto; display:block; }
.chart .grid{ stroke:var(--line); stroke-width:1; }
.chart .ylab{ fill:var(--text-muted); font-size:10px; text-anchor:end; }
.chart .xlab{ fill:var(--gray); font-size:10px; }
.chart .area{ fill:var(--red-soft); stroke:none; }
.chart .line{ fill:none; stroke:var(--red); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .dot{ fill:var(--red); stroke:var(--bg); stroke-width:1.5; }
.chart-last{ font-size:12px; color:var(--gray); margin-top:8px; }
.chart-empty{ color:var(--text-muted); font-size:13px; padding:24px 0; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; }

/* ---------- selecteur de langue (i18n.js) ---------- */
.lang-toggle{ display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:9px; padding:2px; background:var(--surface); }
.lang-toggle button{
  border:none; background:transparent; color:var(--text-muted); cursor:pointer;
  font-family:var(--font, inherit); font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 9px; border-radius:7px; line-height:1;
}
.lang-toggle button:hover{ color:var(--gray); }
.lang-toggle button.active{ background:var(--surface-2); color:var(--white); }
.auth-foot .lang-toggle{ margin-top:10px; }