/* Console Yvia CI — charte reprise du dépôt Yv-ia/landing (Inter + Cal Sans, marine #0B172B, bleu #0571ED). */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cal Sans"; src: url("/assets/fonts/cal-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --navy: #0b172b;
  --blue: #0571ed;
  --blue-hover: #0f5bb3;
  --slate: #52698f;
  --slate-2: #33435c;
  --canvas: #f5f7fb;
  --surface: #fff;
  --line: #e3ebf7;
  --line-2: #e6edf7;
  --blue-soft: #edf4ff;
  --ok: #0d9488;
  --ok-soft: #e0f5f3;
  --warn: #b45309;
  --warn-soft: #fef3e2;
  --bad: #c62b3c;
  --bad-soft: #fde8ea;
  --indigo: #6366f1;
  --cyan: #0891b2;
  --amber: #f59e0b;
  --shadow: 0 18px 48px -24px rgb(11 23 43 / 0.18);
  --radius: 24px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  font-family: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--navy); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
::selection { background: rgb(5 113 237 / 0.25); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid rgb(5 113 237 / 0.4); outline-offset: 3px; border-radius: 8px; }
h1, h2 { font-family: "Cal Sans", "Inter", sans-serif; font-weight: 400; letter-spacing: 0.3px; margin: 0; }
h1 { font-size: 34px; line-height: 1.15; }
h2 { font-size: 19px; line-height: 1.3; }
.quiet { color: var(--slate); font-size: 12.5px; }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.skip { position: fixed; top: -80px; left: 20px; padding: 12px; background: var(--surface); z-index: 10; }
.skip:focus { top: 12px; }

/* En-tête */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 32px; background: rgb(255 255 255 / 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px -4px rgb(11 23 43 / 0.06); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 24px; width: auto; display: block; }
.brand-ci { padding: 2px 9px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { padding: 8px 14px; border-radius: 999px; color: var(--slate-2); font-weight: 500; }
.site-nav a:hover { background: var(--blue-soft); color: var(--navy); }
.site-nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.live { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 12.5px; min-width: 0; }
.live span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.live[data-state="ok"] .live-dot { background: var(--ok); box-shadow: 0 0 0 4px rgb(13 148 136 / 0.15); animation: pulse 2s infinite; }
.live[data-state="stale"] .live-dot { background: var(--amber); }
.live[data-state="error"] .live-dot { background: var(--bad); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(13 148 136 / 0.05); } }
.pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); color: var(--slate-2); white-space: nowrap; }
.pill-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.pill-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.pill-bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.account { display: flex; align-items: center; gap: 14px; color: var(--slate-2); font-size: 13px; }
.account form { margin: 0; }
.account button, .segmented button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--navy); border-radius: 999px; padding: 7px 14px; }
.account button:hover, .segmented button:hover { border-color: var(--blue); color: var(--blue); }

main { max-width: 1320px; margin: 0 auto; padding: 44px 32px 32px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-footer { margin-top: 40px; text-align: center; color: var(--slate); font-size: 12px; }
.banner { padding: 14px 18px; border-radius: 16px; background: var(--warn-soft); color: var(--warn); }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi-label { color: var(--slate); font-size: 12.5px; font-weight: 500; }
.kpi-value { font-family: "Cal Sans", "Inter", sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; }
.kpi-value .of { font-size: 20px; color: var(--slate); }
.kpi-bad .kpi-value { color: var(--bad); }
.kpi-warn .kpi-value { color: var(--warn); }

/* Mac */
.hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 20px; align-items: start; }
.host { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow); }
.host header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.host h2 { font-size: 22px; }
.host header .quiet { margin: 2px 0 0; }
.host-offline { background: linear-gradient(180deg, var(--bad-soft), var(--surface) 70%); }
.offline-reason { margin: 0; color: var(--bad); font-weight: 500; }
.host-foot { margin: 16px 0 0; }
.badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--blue-soft); color: var(--slate-2); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.gauge-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--slate); }
.gauge-top strong { color: var(--navy); font-weight: 600; }
.gauge .quiet { margin: 6px 0 0; font-size: 11.5px; }
.bar { height: 8px; margin-top: 8px; background: var(--blue-soft); border-radius: 999px; overflow: hidden; }
.fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.6s ease; }
.fill-ok { background: var(--blue); }
.fill-warn { background: var(--amber); }
.fill-bad { background: var(--bad); }
.slots { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.slot { min-height: 92px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--canvas); }
.slot-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.slot-index { font-family: var(--mono); color: var(--slate); }
.slot-state { font-weight: 600; }
.slot-head > :last-child:not(.slot-state) { margin-left: auto; }
.slot p { margin: 6px 0 0; }
.slot-ready { background: var(--blue-soft); border-color: transparent; }
.slot-ready .slot-state { color: var(--blue); }
.slot-busy { background: var(--navy); border-color: transparent; color: #fff; }
.slot-busy .quiet, .slot-busy .slot-index { color: #93a8c6; }
.slot-busy a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); }
.slot-busy .elapsed { font-family: var(--mono); font-size: 12px; color: #fff; }
.job-title { font-weight: 600; word-break: break-word; }
.slot-metrics { display: flex; gap: 10px; font-size: 11.5px; color: #93a8c6; }
.slot-starting, .slot-stopping { border-style: dashed; }
.slot-starting .slot-state, .slot-stopping .slot-state { color: var(--slate); }
.slot-backoff { background: var(--bad-soft); border-color: transparent; }
.slot-backoff .slot-state, .slot-backoff .error { color: var(--bad); }
.slot-drained { background: var(--warn-soft); border-color: transparent; }
.slot-drained .slot-state { color: var(--warn); }

/* Historique */
.segmented { display: flex; gap: 6px; }
.segmented button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
#history-status:empty { display: none; }
.panel { margin-bottom: 20px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.legend { display: flex; gap: 14px; color: var(--slate); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-succeeded { background: var(--blue); } .lg-failed { background: var(--bad); } .lg-other { background: #93a8c6; }
.lg-occupancy { background: var(--blue); } .lg-cpu { background: var(--amber); }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--slate); font-size: 11px; font-family: "Inter", sans-serif; }
.bar-succeeded { fill: var(--blue); } .bar-failed { fill: var(--bad); } .bar-other { fill: #93a8c6; }
.line-occupancy, .line-cpu { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line-occupancy { stroke: var(--blue); } .line-cpu { stroke: var(--amber); stroke-dasharray: 5 4; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--slate); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Connexion */
.login-page { display: grid; place-items: center; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, var(--blue-soft), var(--canvas)); }
.login-card { max-width: 440px; margin: 24px; padding: 48px 44px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 40px; box-shadow: 0 24px 64px -16px rgb(11 23 43 / 0.12); }
.login-card img { height: 40px; width: auto; }
.login-card h1 { margin-top: 22px; }
.login-card p { color: var(--slate); }
.button { display: block; margin-top: 26px; padding: 14px 22px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; }
.button:hover { background: var(--blue-hover); color: #fff; }

@media (max-width: 900px) {
  .topbar { height: auto; flex-wrap: wrap; gap: 10px 16px; padding: 12px 20px; }
  .live { order: 5; flex-basis: 100%; }
  main { padding: 28px 18px; }
  .hosts { grid-template-columns: 1fr; }
  .gauges { grid-template-columns: 1fr; }
  .two-cols { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
}