/* HUB — cockpit sombre façon Xeneon Edge : tuiles teintées par famille, titres condensés, données en mono. */
:root {
  --bg: oklch(0.15 0.015 265);
  --rail: oklch(0.13 0.015 265);
  --panel: oklch(0.19 0.018 265);
  --panel-2: oklch(0.23 0.02 265);
  --line: oklch(0.29 0.02 265);
  --fg: oklch(0.96 0.008 265);
  --mute: oklch(0.70 0.02 265);
  --faint: oklch(0.52 0.02 265);
  --accent: oklch(0.80 0.13 190);
  --ok: oklch(0.80 0.16 150);
  --warn: oklch(0.84 0.15 80);
  --bad: oklch(0.70 0.19 25);
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased }
a { color: inherit }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }

/* ---------- pages d'accès ---------- */
body.gate { display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 500px at 15% 0%, oklch(0.30 0.07 190 / .45), transparent 60%), radial-gradient(700px 500px at 100% 100%, oklch(0.30 0.08 300 / .35), transparent 60%), var(--bg) }
.gatebox { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px }
.gatebox h1 { font: 700 40px/1 var(--display); margin: 10px 0 18px; text-wrap: balance }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
.lead { color: var(--mute); margin: 0 0 16px }
.f { display: grid; gap: 8px }
.f label { font-size: 13px; color: var(--mute); margin-top: 6px }
.f input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--fg); font: inherit; width: 100% }
.f input.code { font: 600 24px var(--mono); letter-spacing: .3em; text-align: center }
.btn { display: inline-block; margin-top: 14px; background: var(--accent); color: oklch(0.18 0.03 220); border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center }
.err { background: oklch(0.70 0.19 25 / .15); color: var(--bad); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px }
.tiny { font-size: 13px; color: var(--faint); margin-top: 16px }
.qr { display: grid; place-items: center; margin: 12px 0 }
.qr img { border-radius: 12px; max-width: 100% }

/* ---------- coque ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100% }
.rail { background: var(--rail); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; height: 100dvh }
.brand { display: flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); letter-spacing: .04em; padding: 8px 10px 16px }
.brand svg { width: 26px; height: 26px; color: var(--accent) }
.navlabel { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 6px }
.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--mute); font-weight: 500; border: 1px solid transparent }
.nav svg { width: 20px; height: 20px; flex: none }
.nav:hover { background: var(--panel); color: var(--fg) }
.nav[aria-current="page"] { background: var(--panel); color: var(--fg); border-color: var(--line) }
.nav .count { margin-left: auto; font: 500 12px var(--mono); color: var(--faint) }
.search { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--mute); text-align: left }
.search kbd { margin-left: auto; font: 500 11px var(--mono); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--faint) }
.search svg { width: 18px; height: 18px }
.health { margin-top: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14px }
.health b { font: 700 22px/1 var(--display) }
.health .row { display: flex; align-items: center; gap: 8px; color: var(--mute) }
.health button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; text-align: left }
.clock { padding: 14px 10px 0 }
.clock .t { font: 700 64px/0.9 var(--display); letter-spacing: -.01em }
.clock .t small { font-size: 22px; color: var(--faint); margin-left: 2px }
.clock .d { color: var(--mute); margin-top: 6px; text-transform: capitalize }
.logout { font-size: 13px; color: var(--faint); padding: 8px 10px 0; text-decoration: none }
.logout:hover { color: var(--fg) }

main.view { padding: 28px 28px 48px; min-width: 0 }
.vhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.vhead h1 { font: 700 44px/1 var(--display); margin: 0; text-wrap: balance }
.vhead p { margin: 0; color: var(--mute) }
.vhead .back { white-space: nowrap; text-decoration: none; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px }
.vhead .back:hover { color: var(--fg) }

/* ---------- tuiles familles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.tile { --h: 190; position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 20px 22px; border-radius: var(--r); text-decoration: none; border: 1px solid oklch(0.45 0.08 var(--h) / .35);
  background: linear-gradient(150deg, oklch(0.33 0.08 var(--h) / .55) 0%, oklch(0.21 0.03 var(--h) / .6) 45%, var(--panel) 100%); transition: transform .15s ease, border-color .15s ease }
.tile:hover { transform: translateY(-2px); border-color: oklch(0.70 0.12 var(--h) / .7) }
.tile .top { display: flex; align-items: center; gap: 12px }
.tile .top svg { width: 30px; height: 30px; color: oklch(0.82 0.14 var(--h)); flex: none }
.tile h2 { font: 700 38px/1 var(--display); margin: 0 }
.tile .n { margin-left: auto; font: 500 12px var(--mono); color: var(--mute); background: oklch(0 0 0 / .25); border-radius: 999px; padding: 3px 9px }
.tile .bottom { margin-top: auto }
.tile .head { font-size: 22px; font-weight: 600; line-height: 1.2 }
.tile .sub { color: var(--mute); font-size: 15px; margin-top: 4px }
.tile .head.bad { color: var(--bad) }

/* ---------- bandeaux accueil ---------- */
.strips { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; min-width: 0 }
.box h3 { font: 700 22px/1 var(--display); margin: 0 0 12px; display: flex; align-items: center; gap: 8px }
.box h3 a { margin-left: auto; font: 500 13px var(--body); color: var(--accent); text-decoration: none }
.renews { display: grid; gap: 2px }
.renew { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none }
.renew:first-child { border-top: 0 }
.renew .when { font: 600 13px var(--mono); color: var(--accent) }
.renew .when.soon { color: var(--warn) }
.renew .when.now { color: var(--bad) }
.renew .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.renew .what small { color: var(--faint); margin-left: 6px }
.renew .amt { font: 600 14px var(--mono); white-space: nowrap }
.lives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.live { display: grid; gap: 2px; padding: 12px; border-radius: 10px; background: var(--panel-2); text-decoration: none; min-width: 0 }
.live .k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 6px }
.live .v { font-weight: 600; overflow-wrap: anywhere }
.live .s { font-size: 13px; color: var(--mute); overflow-wrap: anywhere }

/* ---------- pastilles d'état ---------- */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint) }
.dot.up, .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px oklch(0.80 0.16 150 / .18) }
.dot.down, .dot.err { background: var(--bad); box-shadow: 0 0 0 3px oklch(0.70 0.19 25 / .2) }
.dot.warn { background: var(--warn) }
.dot.todo { background: transparent; border: 1.5px dashed var(--faint) }

/* ---------- cartes outils ---------- */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px }
.tool { --h: 190; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); text-decoration: none; min-width: 0; transition: border-color .15s ease, background .15s ease }
.tool:hover { border-color: oklch(0.70 0.12 var(--h) / .7); background: var(--panel-2) }
.tool .row1 { display: flex; align-items: center; gap: 10px }
.tool h3 { font: 700 24px/1.05 var(--display); margin: 0; min-width: 0; overflow-wrap: anywhere }
.tool .open { margin-left: auto; font-size: 13px; color: oklch(0.82 0.12 var(--h)); white-space: nowrap }
.tool p { margin: 0; color: var(--mute); font-size: 14.5px }
.tool .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px }
.chip { font: 500 12px var(--mono); padding: 3px 8px; border-radius: 999px; background: var(--panel-2); color: var(--mute); border: 1px solid var(--line); white-space: nowrap }
.chip.cost { color: var(--fg) }
.chip.soon { color: var(--warn); border-color: oklch(0.84 0.15 80 / .4) }
.chip.now { color: var(--bad); border-color: oklch(0.70 0.19 25 / .5) }
.chip.doubt { color: var(--warn) }
.chip.skill { color: var(--accent) }
.tool .livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; background: oklch(0 0 0 / .2); border-radius: 8px; padding: 6px 10px }
.tool .livebar b { font-weight: 600 }
.tool .livebar span { color: var(--mute) }

/* ---------- échéances ---------- */
.sum { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px }
.sum .box { flex: 1 1 200px }
.sum b { display: block; font: 700 40px/1 var(--display) }
.sum span { color: var(--mute); font-size: 14px }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
table { border-collapse: collapse; width: 100%; font-size: 14.5px }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap }
th { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); background: var(--panel-2) }
tr:last-child td { border-bottom: 0 }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right }
td a { text-decoration: none }
td a:hover { color: var(--accent) }

/* ---------- palette Ctrl+K ---------- */
.pal { position: fixed; inset: 0; background: oklch(0.05 0.01 265 / .6); backdrop-filter: blur(6px); display: grid; align-items: start; justify-items: center; padding: 12vh 16px 16px; z-index: 20 }
.pal[hidden] { display: none }
.palbox { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px oklch(0 0 0 / .5) }
.palbox input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 18px 20px; color: var(--fg); font: 500 18px var(--body); outline: none }
.palres { max-height: 55vh; overflow-y: auto; padding: 6px }
.palres a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none }
.palres a[aria-selected="true"] { background: var(--panel-2) }
.palres .nm { font-weight: 600 }
.palres .fm { margin-left: auto; font: 500 12px var(--mono); color: var(--faint); white-space: nowrap }
.palres .empty { padding: 16px; color: var(--mute) }

.note { color: var(--faint); font-size: 13px; margin-top: 18px }


/* ---------- actions ---------- */
.tool { position: relative }
.tool .cover { position: absolute; inset: 0; border-radius: var(--r); z-index: 0 }
.tool > *:not(.cover) { position: relative; z-index: 1; pointer-events: none }
.tool .acts, .tool .acts * { pointer-events: auto }
.acts { display: flex; flex-wrap: wrap; gap: 8px }
.act { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--body); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease }
.act:hover { border-color: var(--accent) }
.act:disabled { opacity: .6; cursor: progress }
.act.link { color: var(--mute) }
.act.armed { border-color: var(--warn); color: var(--warn) }
.act.primary { background: var(--accent); color: oklch(0.18 0.03 220); border-color: transparent }
.acts.big .act { padding: 11px 14px; font-size: 14.5px }
.quick { margin-top: 14px }
.remind { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 16px; align-items: center }
.remind label { grid-column: 1 / -1; font-size: 13px; color: var(--mute) }
.remind input, .remind select { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--fg); font: inherit; min-width: 0 }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px }
.list .mono { color: var(--accent); margin-right: 6px; font-size: 12.5px }
.mu { color: var(--mute) }
.box h3.mt { margin-top: 18px }
.bolt { width: 9px; text-align: center; font-size: 12px }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--ok); color: var(--fg); padding: 12px 16px; border-radius: 12px; max-width: min(520px, calc(100vw - 32px)); box-shadow: 0 16px 40px oklch(0 0 0 / .4); transition: opacity .2s ease, transform .2s ease; z-index: 30 }
#toast.show { opacity: 1; transform: translate(-50%, 0) }
#toast.bad { border-left-color: var(--bad) }
@media (max-width: 560px) { .remind { grid-template-columns: minmax(0, 1fr) } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } .strips { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr) }
  .rail { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-right: 0; border-bottom: 1px solid var(--line) }
  .brand { padding: 4px 6px; font-size: 20px }
  .navlabel, .clock, .health, .logout { display: none }
  .nav { padding: 7px 10px; font-size: 14px }
  .nav .count { display: none }
  .search { margin: 0 0 0 auto; padding: 8px 10px }
  .search span, .search kbd { display: none }
  main.view { padding: 18px 16px 40px }
  .vhead h1 { font-size: 34px }
  .tile { min-height: 170px }
  .tile h2 { font-size: 32px }
}
@media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr) } .lives { grid-template-columns: minmax(0, 1fr) } .tools { grid-template-columns: minmax(0, 1fr) } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }