/* Rempart, panel web de l'anticheat Kayz. Même DA que le panel en jeu (web/src/interfaces/acpanel/rempart.css) :
   nuit presque noire, une seule nappe bleue derrière l'en-tête, cartes arrondies à filet blanc très léger,
   Schibsted Grotesk grasse et serrée, bouton principal en pilule blanche, une seule touche manuscrite (Yellowtail).
   La pièce forte est le mur d'écrans : tout le reste reste calme. */
:root {
  --nuit: #07080c; --c1: #0d0f15; --c2: #12151d; --c3: #191d27;
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14);
  --blanc: #fff; --texte: #eef2fa; --gris: #c4cee2; --gris2: #8892a8;
  --bleu: #78b6ff; --bleu2: #3b82f6; --glace: #a9d4ff;
  --crit: #ff5d5d; --haut: #ffa54a; --moyen: #f3d35b; --ok: #3fd49a;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--nuit); color: var(--texte); font: 400 14.5px/1.5 var(--sans);
  font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.boot { display: grid; place-items: center; min-height: 100vh; }
.boot-msg { color: var(--gris2); }

/* ---------------------------------------------------------------- squelette */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px 14px;
  border-right: 1px solid var(--line); background: var(--nuit); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(120,182,255,.35)); }
.brand b { display: block; font: 700 20px/1 var(--sans); letter-spacing: -.6px; color: var(--blanc); }
.brand small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gris2); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .g { margin: 18px 10px 6px; font-size: 12.5px; font-weight: 500; color: var(--gris2); }
.nav button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 11px;
  background: none; color: var(--gris); font-weight: 500; text-align: left; cursor: pointer; }
.nav button:hover { color: var(--blanc); }
.nav button.on { color: var(--blanc); font-weight: 600; background: rgba(255, 255, 255, .07); border-color: var(--line); }
.nav button svg { width: 17px; height: 17px; flex: none; color: var(--gris2); }
.nav button.on svg { color: var(--bleu); }
.nav .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--crit); color: #fff;
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--c1); border: 1px solid var(--line); }
.me img { width: 32px; height: 32px; border-radius: 50%; }
.me b { display: block; font-size: 13.5px; }
.me span { font-size: 12px; color: var(--gris2); }

.main { position: relative; min-width: 0; overflow: hidden; }
.main::before { content: ''; position: absolute; top: -380px; left: -10%; width: 120%; height: 620px; pointer-events: none;
  background: radial-gradient(60% 60% at 40% 40%, rgba(37, 99, 235, .28), rgba(30, 64, 175, .08) 55%, transparent 75%); }
.top { position: relative; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font: 600 16px var(--sans); letter-spacing: -.3px; }
.top .grow { flex: 1; }
.status { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; font-weight: 600;
  background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .25); color: #4ade80; }
.status.off { background: rgba(255, 93, 93, .1); border-color: rgba(255, 93, 93, .3); color: var(--crit); }
.status.test { background: rgba(243, 211, 91, .1); border-color: rgba(243, 211, 91, .3); color: var(--moyen); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
select.pick { height: 34px; padding: 0 12px; border-radius: 11px; background: var(--c1); border: 1px solid var(--line2); }
.view { position: relative; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------- éléments */
.card { border-radius: 18px; background: var(--c1); border: 1px solid var(--line); }
.card > header { display: flex; align-items: center; gap: 10px; padding: 16px 20px 6px; }
.card > header h3 { margin: 0; font: 600 15px var(--sans); letter-spacing: -.3px; }
.card > header p { margin: 0; color: var(--gris2); font-size: 13px; }
.card .body { padding: 10px 20px 18px; }
.heads h2 { margin: 0; font: 700 30px/1.05 var(--sans); letter-spacing: -1.1px; color: var(--blanc); }
.heads p { margin: 6px 0 0; color: var(--gris); max-width: 72ch; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid2 > *, .grid3 > *, .sheet > *, .view > * { min-width: 0; } /* les tableaux défilent dans leur carte au lieu d'élargir la page */
.muted { color: var(--gris2); }
.btn { height: 36px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--line2); background: transparent; color: var(--texte);
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: rgba(255, 255, 255, .06); }
.btn.primary { border-radius: 18px; background: var(--blanc); color: #0a0d14; border-color: var(--blanc); }
.btn.primary:hover { background: #dfe7f5; }
.btn.danger { color: var(--crit); border-color: rgba(255, 93, 93, .35); }
.btn.danger:hover { background: rgba(255, 93, 93, .1); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
input.in, select.in, textarea.in { height: 38px; padding: 0 12px; border-radius: 11px; background: var(--nuit); border: 1px solid var(--line2); min-width: 0; }
textarea.in { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; width: 100%; }
.search { flex: 1; min-width: 200px; height: 42px; border-radius: 12px; background: var(--c1); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--gris); }
.chip.crit { color: var(--crit); border-color: rgba(255, 93, 93, .3); background: rgba(255, 93, 93, .08); }
.chip.haut { color: var(--haut); border-color: rgba(255, 165, 74, .3); background: rgba(255, 165, 74, .08); }
.chip.ok { color: var(--ok); border-color: rgba(63, 212, 154, .3); background: rgba(63, 212, 154, .08); }
.chip.bleu { color: var(--bleu); border-color: rgba(120, 182, 255, .3); background: rgba(120, 182, 255, .08); }
.empty { padding: 26px 20px; color: var(--gris2); text-align: center; }

/* ---------------------------------------------------------------- en-tête du tableau de bord */
.hero { position: relative; overflow: hidden; border-radius: 22px; min-height: 190px; padding: 28px 32px;
  background: linear-gradient(115deg, #0f2a5c 0%, #0b1a38 45%, #0a0f1c 100%); border: 1px solid rgba(120, 182, 255, .18);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.hero h2 { margin: 0; font: 700 40px/1.02 var(--sans); letter-spacing: -1.6px; color: var(--blanc); }
.hero .script { display: block; font: 400 46px/1 'Yellowtail', cursive; color: var(--glace); text-shadow: 0 0 22px rgba(120, 182, 255, .55); padding-left: 4px; }
.hero p { margin: 10px 0 0; color: var(--gris); max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 28px; }
.facts b { display: block; font: 700 28px/1.05 var(--sans); letter-spacing: -.8px; color: var(--blanc); }
.facts span { font-size: 12.5px; color: var(--gris2); }

/* histogramme 24 h */
.bars { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 4px; height: 120px; }
.bars i { display: block; min-height: 3px; border-radius: 4px 4px 2px 2px; background: rgba(120, 182, 255, .35); }
.bars i.hot { background: var(--bleu); }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--gris2); }
.kinds { display: flex; flex-direction: column; gap: 8px; }
.kind { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.kind .lbl { font-size: 13.5px; }
.kind .n { font-weight: 700; }
.kind .meter { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.kind .meter i { display: block; height: 100%; background: var(--bleu); border-radius: 2px; }

/* ---------------------------------------------------------------- tableaux */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--gris2); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: rgba(255, 255, 255, .025); }
.table .name b { display: block; color: var(--blanc); }
.table .name span { font-size: 12.5px; color: var(--gris2); }
.wrap { overflow-x: auto; }

/* niveau de risque : anneau */
.ring { --v: 0; --c: var(--ok); position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, .07) 0); }
.ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c1); }
.ring b { position: relative; font-size: 11.5px; }

/* ---------------------------------------------------------------- mur d'écrans (la pièce forte) */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.screen { position: relative; overflow: hidden; border-radius: 18px; background: #000; border: 1px solid var(--line2); aspect-ratio: 16 / 9; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); }
.screen .veil { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gris2); font-size: 13px; }
.screen .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(4, 6, 10, .92), transparent); }
.screen .bar b { color: #fff; font-size: 14px; }
.screen .bar span { color: var(--gris); font-size: 12.5px; }
.screen .bar .grow { flex: 1; }
.screen .rec { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 12px;
  background: rgba(4, 6, 10, .7); color: #fff; font-size: 11.5px; font-weight: 700; }
.screen .rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--crit); }
.screen .rec.stale i { background: var(--gris2); }
.screen .close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(4, 6, 10, .7); color: #fff; font-size: 16px; line-height: 1; }
.screen.big { grid-column: 1 / -1; }
.pickers { display: flex; flex-wrap: wrap; gap: 8px; }
.pickers button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line2); background: transparent; cursor: pointer; color: var(--gris); }
.pickers button.on { background: var(--blanc); color: #0a0d14; border-color: var(--blanc); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .screen .rec i { animation: rec 1.6s ease-in-out infinite; } }
@keyframes rec { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- fiche joueur, réglages */
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 13.5px; }
.kv span { color: var(--gris2); }
.list { display: flex; flex-direction: column; }
.list > div { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.list > div:last-child { border-bottom: 0; }
.list small { color: var(--gris2); }
.field { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 340px); gap: 6px 22px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field b { font-weight: 600; font-size: 14px; }
.field p { margin: 2px 0 0; color: var(--gris2); font-size: 12.5px; max-width: 64ch; }
.field .ctl { display: flex; gap: 8px; justify-content: flex-end; }
.field .ctl .in { flex: 1; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 13px; border: 1px solid var(--line2); background: var(--nuit); cursor: pointer; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gris2); transition: transform .18s var(--ease), background .18s; }
.switch[aria-checked='true'] { background: rgba(120, 182, 255, .25); border-color: rgba(120, 182, 255, .5); }
.switch[aria-checked='true']::after { transform: translateX(18px); background: var(--bleu); }
.dets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 26px; }
.det { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.det span { flex: 1; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line2); background: transparent; color: var(--gris); cursor: pointer; }
.tabs button.on { background: var(--blanc); color: #0a0d14; font-weight: 600; border-color: var(--blanc); }

/* dialogue */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(2, 3, 6, .7); padding: 16px; }
.modal .card { width: min(480px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.modal h3 { margin: 0; font: 700 20px var(--sans); letter-spacing: -.5px; }
.modal .row { justify-content: flex-end; }

/* notifications */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.toast { max-width: 380px; padding: 12px 16px; border-radius: 14px; background: var(--c2); border: 1px solid var(--line2); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); font-size: 13.5px; }
.toast.err { border-color: rgba(255, 93, 93, .4); }
.toast.ok { border-color: rgba(63, 212, 154, .4); }

/* écran de refus */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.gate h1 { margin: 0 0 8px; font: 700 34px/1.05 var(--sans); letter-spacing: -1.2px; }
.gate p { color: var(--gris); max-width: 46ch; margin: 0 auto 18px; }

/* ---------------------------------------------------------------- petits écrans */
@media (max-width: 1100px) { .grid2, .sheet, .grid3 { grid-template-columns: 1fr; } .facts { grid-template-columns: repeat(2, auto); } .hero { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav .g, .me { display: none; }
  .nav button { flex: none; white-space: nowrap; }
  .top { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .top h1, .top .grow { display: none; }
  .status { height: auto; min-height: 26px; }
  .top, .view { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 22px; } .hero h2 { font-size: 30px; }
  .wall { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; }
}
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
tr.clip video { display: block; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; margin: 6px 0; } tr.clip p { margin: 4px 0 10px; }

/* ---------------------------------------------------------------- réglages anticheat en catégories (façon tableau de modules) */
.acgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.accats { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--c1); border: 1px solid var(--line); }
.accats button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 11px;
  background: none; color: var(--gris); font-weight: 500; text-align: left; cursor: pointer; }
.accats button:hover { color: var(--blanc); }
.accats button.on { color: var(--blanc); font-weight: 600; background: rgba(255, 255, 255, .07); border-color: var(--line); }
.accats svg { width: 17px; height: 17px; flex: none; color: var(--gris2); }
.accats button.on svg { color: var(--bleu); }
.accats span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accats small { font-size: 12px; color: var(--gris2); font-variant-numeric: tabular-nums; }
.accat > header { justify-content: space-between; align-items: flex-start; padding: 18px 20px 4px; }
.accat > header p { margin-top: 2px; }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 14px; }
.mod { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--nuit); border: 1px solid var(--line); }
.mod.off { opacity: .55; }
.mod-t { flex: 1; min-width: 0; }
.mod-t b { display: block; font-size: 14px; color: var(--blanc); }
.mod-t p { margin: 3px 0 9px; font-size: 12.5px; line-height: 1.45; color: var(--gris2); }
@media (max-width: 900px) {
  .acgrid { grid-template-columns: minmax(0, 1fr); }
  .accats { position: static; flex-direction: row; overflow-x: auto; }
  .accats button { flex: none; }
}