/* ─────────────────────────────────────────────────────────────────────────
 * styles.css — pages EJS (login / signup / me / admin / etc.)
 * Design Apple (light/dark) — cohérent avec la SPA index.html.
 * ───────────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#ff4422; --accent-2:#ffb800; --gold:#f5a623;
  --green:#19c37d; --bad:#ff3b30; --teamA:#0a84ff; --teamB:#ff375f;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font-sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Helvetica Neue',system-ui,sans-serif;
  --font-mono:'SF Mono','JetBrains Mono',ui-monospace,'Menlo',monospace;
}
:root, [data-theme="dark"]{
  --bg:#000000; --bg-2:#1c1c1e; --bg-3:#2c2c2e;
  --ink:#f5f5f7; --ink-dim:#98989d; --ink-mute:#636366;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.06);
  --shadow:0 4px 24px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --glass:rgba(28,28,30,.72);
}
[data-theme="light"]{
  --bg:#f2f2f7; --bg-2:#ffffff; --bg-3:#e9e9ec;
  --ink:#1d1d1f; --ink-dim:#6e6e73; --ink-mute:#aeaeb2;
  --border:rgba(0,0,0,.10); --border-2:rgba(0,0,0,.05);
  --shadow:0 4px 24px rgba(0,0,0,.08); --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --glass:rgba(255,255,255,.72);
}
html,body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sf); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s var(--ease),color .4s var(--ease);
}

/* ─── HEADER (nav partial) ─── */
header.lnsh-header{
  padding:16px 24px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--glass);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); z-index:50;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.brand-logo{
  font-family:var(--font-sf); font-weight:700; font-size:clamp(20px,4vw,26px);
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.brand-logo span{color:var(--accent);}
.brand-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--ink-dim);
}

/* user bar */
.user-bar{display:flex; align-items:center; gap:10px; font-family:var(--font-sf); font-size:13px; flex-wrap:wrap;}
.user-bar img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--border);}
.user-bar a, .user-bar button{
  background:none; border:none; color:var(--ink-dim); font-family:var(--font-sf);
  font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; padding:0; transition:color .2s;
}
.user-bar a:hover, .user-bar button:hover{color:var(--accent);}
.user-bar .sep{color:var(--ink-mute);}

/* badges grade */
.grade-badge{
  font-family:var(--font-sf); font-weight:600; padding:3px 10px; border-radius:100px;
  background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); font-size:11px; display:inline-block;
}
.grade-R5{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent);}
.grade-R4{background:color-mix(in srgb,var(--accent-2) 16%,transparent); color:var(--accent-2);}
.grade-R1,.grade-R2,.grade-R3{background:var(--bg-3); color:var(--ink-dim);}

main{max-width:1200px; margin:0 auto; padding:30px 20px 80px;}

/* ─── CARTES AUTH ─── */
.auth-wrap{
  min-height:calc(100vh - 100px);
  display:flex; align-items:center; justify-content:center; padding:30px 20px;
}
.auth-card{
  background:var(--bg-2); border:1px solid var(--border-2); padding:40px 36px;
  width:100%; max-width:440px; border-radius:var(--r-xl); box-shadow:var(--shadow);
}
.auth-card .auth-title{
  font-family:var(--font-sf); font-weight:800; font-size:40px; letter-spacing:-.03em;
  color:var(--ink); text-align:center; margin-bottom:6px;
}
.auth-card .auth-title span{color:var(--accent);}
.auth-card .auth-sub{
  font-family:var(--font-sf); font-size:14px; color:var(--ink-dim);
  text-align:center; margin-bottom:30px;
}
form.auth-form{display:flex; flex-direction:column; gap:18px;}
form.auth-form label{
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--font-sf); font-size:12px; font-weight:600;
  color:var(--ink-dim);
}

/* ─── INPUTS ─── */
input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{
  background:var(--bg-3); border:1px solid var(--border-2); color:var(--ink);
  padding:11px 14px; font-family:var(--font-sf); font-size:15px; border-radius:var(--r-sm);
  transition:all .2s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* ─── BOUTONS ─── */
.btn{
  background:var(--bg-3); color:var(--ink); border:1px solid var(--border);
  padding:11px 22px; font-family:var(--font-sf); font-size:15px; font-weight:600;
  letter-spacing:-.01em; cursor:pointer; transition:all .2s var(--ease); text-decoration:none;
  display:inline-block; border-radius:100px;
}
.btn:hover{border-color:var(--ink-mute); transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{filter:brightness(1.08); color:#fff;}
.btn-danger{background:transparent; color:var(--bad); border-color:var(--bad);}
.btn-danger:hover{background:var(--bad); color:#fff;}
.btn-sm{padding:7px 14px; font-size:13px;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.btn-link{
  background:none; border:none; color:var(--ink-dim); font-family:var(--font-sf);
  font-size:13px; font-weight:500; cursor:pointer; padding:0;
}
.btn-link:hover{color:var(--accent);}

/* ─── ALERTES ─── */
.alert{padding:12px 16px; margin-bottom:16px; font-family:var(--font-sf); font-size:14px; border-radius:var(--r-md);}
.alert-error{background:color-mix(in srgb,var(--bad) 10%,transparent); border:1px solid var(--bad); color:var(--bad);}
.alert-success{background:color-mix(in srgb,var(--green) 10%,transparent); border:1px solid var(--green); color:var(--green);}
.alert-info{background:color-mix(in srgb,var(--gold) 10%,transparent); border:1px solid var(--gold); color:var(--gold);}

.muted{color:var(--ink-dim);}
.small{font-size:13px;}
.note{margin-top:14px; font-family:var(--font-sf); font-size:13px; color:var(--ink-mute); text-align:center;}
.auth-footer{margin-top:20px; text-align:center; font-family:var(--font-sf); font-size:13px; color:var(--ink-dim);}
.auth-footer a{color:var(--accent); text-decoration:none; font-weight:500;}
.auth-footer a:hover{text-decoration:underline;}

/* ─── CARTES / GRID ─── */
.card{background:var(--bg-2); border:1px solid var(--border-2); padding:24px; margin-bottom:24px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.card h2{
  font-family:var(--font-sf); font-weight:700; letter-spacing:-.01em; font-size:20px;
  margin-bottom:14px; color:var(--ink);
}
.card h2 span{color:var(--accent);}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.stat{text-align:center; padding:24px;}
.stat-num{font-family:var(--font-sf); font-weight:800; font-size:42px; color:var(--accent); line-height:1; letter-spacing:-.02em;}
.stat-lbl{font-family:var(--font-sf); font-size:13px; color:var(--ink-dim); margin-top:6px;}

/* ─── TABLEAUX ─── */
table.tbl{width:100%; border-collapse:collapse; font-size:14px;}
table.tbl th, table.tbl td{
  padding:11px 12px; border-bottom:1px solid var(--border-2); text-align:left;
}
table.tbl th{
  font-family:var(--font-sf); font-weight:600; color:var(--ink-dim);
  font-size:13px;
}
table.tbl tr:hover td{background:var(--bg-3);}
.actions{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.inline{display:inline-flex; align-items:center; gap:6px;}
code{font-family:var(--font-mono); font-size:12px; color:var(--accent-2); background:var(--bg-3); padding:2px 6px; border-radius:6px;}

/* ─── AVATAR ─── */
.avatar-lg{width:120px; height:120px; border-radius:50%; object-fit:cover; border:2px solid var(--border); display:block; margin-bottom:12px;}
.avatar-sm{width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border); display:inline-block; vertical-align:middle;}
.avatar-placeholder{
  width:120px; height:120px; border-radius:50%; border:2px dashed var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
  font-family:var(--font-mono); font-size:10px; margin-bottom:12px;
}
.avatar-placeholder-sm{
  width:32px; height:32px; border-radius:50%; border:1px dashed var(--border);
  display:inline-block; vertical-align:middle; background:var(--bg-3);
}

/* ─── FILTRES (admin) ─── */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}

/* ─── BADGES STATUT ─── */
.badge{display:inline-block; padding:3px 10px; font-family:var(--font-sf); font-size:11px; font-weight:600; border-radius:100px; background:var(--bg-3); color:var(--ink-dim);}
.badge-pending{color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 16%,transparent);}
.badge-active{color:var(--green); background:color-mix(in srgb,var(--green) 16%,transparent);}
.badge-disabled{color:var(--ink-mute); background:var(--bg-3);}
.badge-admin{color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); margin-left:6px;}