@font-face { font-family: Poppins; font-weight: 300 500; font-display: swap; src: url(/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600 900; font-display: swap; src: url(/poppins-600.woff2) format("woff2"); }

:root {
  --c-bg: #1a1d24; --c-surf: #222631; --c-surf2: #2a2f3b; --c-line: #343a47;
  --c-ink: #eef0f3; --c-muted: #9da3ae; --c-ok: #4cc38a; --c-warn: #f47a35; --c-down: #ef6a6a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--c-bg); color: var(--c-ink); }
body { font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

.pc { max-width: 1120px; margin: 0 auto; padding: 18px 16px 28px; min-height: 100vh; }
.pc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pc-top img { width: 28px; height: 28px; }
.pc-top h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.pc-live { font-size: 12px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px rgba(76, 195, 138, .18); }
.pc.w .pc-live::before { background: var(--c-warn); box-shadow: 0 0 0 3px rgba(244, 122, 53, .2); }
.pc.d .pc-live::before { background: var(--c-down); box-shadow: 0 0 0 3px rgba(239, 106, 106, .22); }

.pc h2 { font-size: 12px; font-weight: 500; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 10px; }
.pc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.pc-kpi { background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 11px; min-width: 0; }
.pc-kpi small { display: block; color: var(--c-muted); font-size: 11px; line-height: 1.3; }
.pc-kpi b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.pc-kpi b.w { color: var(--c-warn); }
.pc-kpi b.d { color: var(--c-down); }

.pc-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-ring { background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-ring svg { width: 58px; height: 58px; flex: none; }
.pc-ring .tr { stroke: var(--c-line); }
.pc-ring .vl { stroke: var(--c-ok); transition: stroke-dashoffset .8s ease; }
.pc-ring.w .vl { stroke: var(--c-warn); }
.pc-ring.d .vl { stroke: var(--c-down); }
.pc-ring div { min-width: 0; }
.pc-ring b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pc-ring span { font-size: 12px; color: var(--c-muted); }
.pc-ring.w span { color: var(--c-warn); }
.pc-ring.d span { color: var(--c-down); }

.pc-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pc-tile { background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px; min-width: 0; }
.pc-tile.w { border-color: var(--c-warn); background: rgba(244, 122, 53, .08); }
.pc-tile.d { border-color: var(--c-down); background: rgba(239, 106, 106, .08); }
.pc-tile b { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.pc-tile b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); flex: none; transform: translateY(-1px); }
.pc-tile.w b::before { background: var(--c-warn); }
.pc-tile.d b::before { background: var(--c-down); }
.pc-tile small { color: var(--c-muted); font-size: 11.5px; display: block; margin-top: 2px; }
.pc-tile.w small { color: var(--c-warn); }
.pc-tile.d small { color: var(--c-down); }
.pc-spark { display: block; width: 100%; height: 22px; margin-top: 6px; }
.pc-spark path { fill: none; stroke: var(--c-muted); stroke-width: 1.4; opacity: .7; vector-effect: non-scaling-stroke; }
.pc-tile.w .pc-spark path { stroke: var(--c-warn); opacity: 1; }
.pc-tile.d .pc-spark path { stroke: var(--c-down); opacity: 1; }

.pc-inc { background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 12px; padding: 4px 12px; }
.pc-inc div { padding: 9px 0; font-size: 12.5px; display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.pc-inc div + div { border-top: 1px solid var(--c-line); }
.pc-inc time { color: var(--c-muted); }
.pc-inc .w { color: var(--c-warn); font-weight: 500; }
.pc-inc .d { color: var(--c-down); font-weight: 500; }
.pc-inc .ok { color: var(--c-ok); }

.pc-foot { margin-top: 16px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--c-muted); }
.pc-foot a { color: var(--c-warn); }
.pc-attente, .pc-nojs { color: var(--c-muted); font-size: 13px; }
.pc-nojs { text-align: center; padding: 0 16px 24px; }

@media (max-width: 420px) {
  .pc-ring { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pc-kpi b { font-size: 16px; }
  .pc-inc div { grid-template-columns: 76px 1fr; }
}
@media (min-width: 760px) {
  .pc { padding: 26px 30px 34px; }
  .pc-top h1 { font-size: 18px; }
  .pc-rings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-kpi b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pc-ring .vl { transition: none; } }