/* LinkBoost — système visuel de l'application */
/* --------------------------------------------------------------------------
   Thèmes de l'application. --surf1/2/3 sont les surfaces : toujours passer par
   elles plutôt que par du blanc translucide, sinon rien ne survit au mode clair.
   -------------------------------------------------------------------------- */
:root{
  --bg:#07050d; --bg2:#0c0918; --card:rgba(255,255,255,.032); --line:rgba(255,255,255,.09);
  --surf1:rgba(255,255,255,.045); --surf2:rgba(255,255,255,.08); --surf3:rgba(255,255,255,.13);
  --ink:#f2f2f7; --ink2:#a5a5bd; --ink3:#6f6f8a;
  --c1:#a855f7; --c2:#ec4899;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --r:14px; --shadow:0 24px 60px -30px rgba(0,0,0,.85);
  --glow1:26%; --glow2:20%;
  color-scheme:dark;
}
html[data-ui="ardoise"]{
  --bg:#0b1220; --bg2:#111c30; --card:rgba(255,255,255,.04); --line:rgba(148,163,184,.18);
  --ink:#e8eef7; --ink2:#9db0c9; --ink3:#6b7f99;
  --c1:#38bdf8; --c2:#818cf8;
}
html[data-ui="nuit"]{
  --bg:#0a0a0f; --bg2:#12121c; --card:rgba(255,255,255,.035); --line:rgba(255,255,255,.1);
  --ink:#f5f5f7; --ink2:#a1a1aa; --ink3:#71717a;
  --c1:#f59e0b; --c2:#ef4444;
}
html[data-ui="clair"], html[data-ui="creme"]{
  color-scheme:light;
  --bg:#f6f5f9; --bg2:#ffffff; --card:#ffffff; --line:rgba(20,18,30,.12);
  --surf1:rgba(20,18,30,.04); --surf2:rgba(20,18,30,.07); --surf3:rgba(20,18,30,.12);
  --ink:#17141f; --ink2:#55516a; --ink3:#8b87a0;
  --shadow:0 20px 45px -28px rgba(20,18,30,.35);
  --glow1:12%; --glow2:9%;
}
html[data-ui="creme"]{ --bg:#f7f3ec; --bg2:#fffdf9; --card:#fffdf9; --c1:#b45309; --c2:#d97706; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100svh; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
body::before{
  content:''; position:fixed; inset:0 0 auto 0; height:70vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 52% at 12% 0%, color-mix(in srgb, var(--c1) var(--glow1), transparent), transparent 72%),
    radial-gradient(42% 46% at 88% 4%, color-mix(in srgb, var(--c2) var(--glow2), transparent), transparent 72%);
}
a{ color:inherit; }
img{ max-width:100%; }
h1,h2,h3{ letter-spacing:-.02em; line-height:1.15; margin:0; }

.wrap{ width:100%; max-width:1140px; margin:0 auto; padding:0 20px; }
.grad{ background:linear-gradient(115deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ------------------------------- en-tête ------------------------------- */
.top{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px); }
.top .row{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:800; font-size:16px; }
.brand .logo{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 8px 22px -10px var(--c2); }
.nav{ display:flex; align-items:center; gap:8px; }
.nav a.link{ padding:8px 12px; border-radius:9px; text-decoration:none; color:var(--ink2); font-size:14px; font-weight:600; }
.nav a.link:hover{ color:var(--ink); background:var(--surf1); }
.nav a.link[aria-current]{ color:var(--ink); background:var(--surf2); }

/* ------------------------------- boutons ------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
  border-radius:11px; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), filter .16s, background .16s, border-color .16s; white-space:nowrap; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:linear-gradient(115deg,var(--c1),var(--c2)); color:#fff; box-shadow:0 10px 28px -12px var(--c2); }
.btn-primary:hover{ filter:brightness(1.09); transform:translateY(-2px); }
.btn-ghost{ background:var(--surf1); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--surf2); transform:translateY(-1px); }
.btn-danger{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.32); color:#fca5a5; }
.btn-danger:hover{ background:rgba(248,113,113,.2); }
.btn-lg{ padding:15px 26px; font-size:15.5px; border-radius:13px; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* -------------------------------- cartes -------------------------------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.card h3{ font-size:15px; margin-bottom:8px; }
.muted{ color:var(--ink2); }
.dim{ color:var(--ink3); }
.small{ font-size:13px; }
.tiny{ font-size:11.5px; }

/* ------------------------------ formulaires ------------------------------ */
label.lb{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:7px; }
.in{ width:100%; background:var(--surf1); border:1px solid var(--line); border-radius:11px;
  padding:12px 14px; color:var(--ink); font-size:14.5px; font-family:inherit; outline:none; transition:.16s; }
.in:focus{ border-color:color-mix(in srgb,var(--c1) 65%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 18%,transparent); background:var(--surf1); }
.in::placeholder{ color:var(--ink3); }
.field{ margin-bottom:16px; }
.hint{ font-size:12px; color:var(--ink3); margin-top:6px; }
.msg{ border-radius:11px; padding:11px 14px; font-size:13.5px; margin-bottom:16px; display:none; }
.msg[data-show]{ display:block; }
.msg.err{ background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:#fca5a5; }
.msg.ok{ background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); color:#6ee7b7; }

/* ------------------------------- tableaux ------------------------------- */
table.tb{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tb th{ text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink3);
  font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.tb td{ text-align:right; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.045); white-space:nowrap; }
table.tb th:first-child,table.tb td:first-child{ text-align:left; white-space:normal; }
table.tb tr:last-child td{ border-bottom:0; }
table.tb tbody tr:hover td{ background:var(--surf1); }
.num{ font-variant-numeric:tabular-nums; font-weight:700; }
.scroll{ overflow-x:auto; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--surf2); color:var(--ink2); }
.badge.on{ background:color-mix(in srgb,var(--ok) 18%,transparent); color:#6ee7b7; }
.badge.off{ background:var(--surf2); color:var(--ink3); }

footer.ft{ border-top:1px solid var(--line); margin-top:80px; padding:32px 0; color:var(--ink3); font-size:13px; }
footer.ft a{ color:var(--ink2); text-decoration:none; }
footer.ft a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }