/* Page /status — état des services (préfixe st-, s'appuie sur pages.css).
 * Salle de contrôle : radar d'état global, cartes de service avec historique
 * des sondes, matrice de la cascade principal → secours → public.
 */
.st { --ok: #34d399; --warn: #FFA726; --ko: #ff5a3c; --idle: #7d8ca3; --maint: #4FC3F7; }
.st .is-ok, .st .is-up { --sc: var(--ok); }
.st .is-backup, .st .is-degraded, .st .is-pending { --sc: var(--warn); }
.st .is-public, .st .is-down { --sc: var(--ko); }
.st .is-unknown, .st .is-none, .st .is-idle { --sc: var(--idle); }
.st .is-maint { --sc: var(--maint); }
.st-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes st-blink { 50% { opacity: .35; } }
@keyframes st-rot { to { transform: rotate(360deg); } }
@keyframes st-wave { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes st-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes st-flow { to { background-position: 28px 0; } }
@keyframes st-flowv { to { background-position: 0 28px; } }
@keyframes st-beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc) 60%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }

/* ── Héro ── */
.st-hero { padding-bottom: 30px; }
.st-dot { --sc: var(--idle); width: 9px; height: 9px; border-radius: 50%; background: var(--sc); animation: st-beat 1.8s infinite; }
.st-dot.is-ok { --sc: var(--ok); } .st-dot.is-degraded { --sc: var(--warn); } .st-dot.is-down { --sc: var(--ko); }
.st-kpis .pg-kpi .v small { color: var(--text-muted); }
.st-meta em { font-style: normal; }
.st-meta .st-refresh { display: inline-flex; align-items: center; gap: 8px; padding-right: 5px; }
.st-refresh[hidden] { display: none !important; }
.st-ring { --p: 1; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--f) calc(var(--p) * 360deg), rgba(255,255,255,.1) 0); -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px); }
.st-pause { font: 600 11.5px Inter, sans-serif; color: var(--text-muted); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; cursor: pointer; }
.st-pause:hover, .st-pause[aria-pressed="true"] { color: #fff; border-color: var(--f); }
.st-pause:focus-visible { outline: 2px solid var(--f); outline-offset: 2px; }
.st.is-loading .st-ring { animation: st-rot .8s linear infinite; }

/* Radar d'état global */
.st-orb { --sc: var(--idle); position: relative; width: min(380px, 78vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; isolation: isolate;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--sc) 22%, transparent) 0 18%, transparent 46%),
    repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--sc) 22%, transparent) calc(12.5% - 1px) 12.5%),
    rgba(7, 17, 31, .72);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--sc) 25%, transparent), inset 0 0 40px color-mix(in srgb, var(--sc) 12%, transparent); }
.st-orb.is-ok { --sc: var(--ok); } .st-orb.is-degraded { --sc: var(--warn); } .st-orb.is-down { --sc: var(--ko); }
.st-orb::before, .st-orb::after { content: ""; position: absolute; background: color-mix(in srgb, var(--sc) 20%, transparent); z-index: -1; }
.st-orb::before { left: 50%; top: 4%; bottom: 4%; width: 1px; }
.st-orb::after { top: 50%; left: 4%; right: 4%; height: 1px; }
.st-rings { position: absolute; inset: 0; pointer-events: none; }
.st-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sc) 55%, transparent); animation: st-wave 3.6s ease-out infinite; opacity: 0; }
.st-rings i:nth-child(2) { animation-delay: 1.2s; } .st-rings i:nth-child(3) { animation-delay: 2.4s; }
.st-orb.is-down .st-rings i { animation-duration: 1.8s; }
.st-sweep { position: absolute; inset: 2%; border-radius: 50%; animation: st-rot 5s linear infinite;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--sc) 45%, transparent), transparent 22%, transparent); }
.st-blip { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--sc);
  box-shadow: 0 0 12px var(--sc); z-index: 2; }
.st-orb .st-blip { transform: rotate(var(--a)) translateY(calc(min(380px, 78vw) * -.34)); }
.st-blip.is-public, .st-blip.is-backup { animation: st-blink 1.1s infinite; }
.st-core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 3; pointer-events: none; }
.st-core b { font: 800 clamp(40px, 6vw, 62px)/1 Inter, sans-serif; letter-spacing: -.02em; color: var(--sc); text-shadow: 0 0 30px color-mix(in srgb, var(--sc) 55%, transparent); }
.st-orb.is-degraded .st-core b, .st-orb.is-unknown .st-core b { font-size: clamp(30px, 4.4vw, 44px); }
.st-core span { margin-top: 8px; font: 600 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-muted); letter-spacing: .04em; }
.st-verdict { margin: 18px auto 0; max-width: 420px; text-align: center; display: grid; gap: 6px; }
.st-verdict strong { font-size: 20px; color: var(--sc); }
.st-verdict span { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.st-verdict.is-ok strong { color: #7ff0c4; }
.st-incident small { color: var(--text-dim); }

/* ── Cartes de service ── */
.st-wide { grid-column: 1 / -1; margin: 0; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.st-svc { --sc: var(--idle); display: flex; flex-direction: column; gap: 4px; border-color: color-mix(in srgb, var(--sc) 25%, var(--border)); }
.st-svc.is-public { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ko) 45%, transparent), 0 18px 50px rgba(255,90,60,.12); }
.st-svc-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.st-svc-h .ic { margin: 0; }
.st-svc-h h3 { margin: 0; font-size: 17px; }
.st-tech { font: 500 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-dim); }
.st-led { width: 7px; height: 7px; border-radius: 50%; background: var(--sc, var(--idle)); display: inline-block; flex: none; }
.st-svc .pg-chip .st-led { animation: st-beat 1.8s infinite; }

.st-path { list-style: none; display: flex; gap: 14px; padding: 0 !important; margin: 14px 0 4px; }
.st-path li { position: relative; flex: 1; text-align: center; font: 700 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 7px 4px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-dim); background: rgba(255,255,255,.02); }
.st-path li + li::before { content: "›"; position: absolute; left: -7px; top: 50%; transform: translate(-50%, -52%); color: var(--text-dim); font-size: 14px; }
.st-path li.on { color: #fff; border-color: color-mix(in srgb, var(--sc) 60%, transparent); background: color-mix(in srgb, var(--sc) 16%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sc) 22%, transparent); }
.st-path li.skip { color: #ffb4a8; border-color: rgba(255,90,60,.3); text-decoration: line-through; text-decoration-color: rgba(255,90,60,.6); }

.st-tier { margin-top: 10px; }
.st-tier-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font: 500 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-muted); margin-bottom: 6px; }
.st-tier-h .n { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 700; }
.st-tier-h .v { text-align: right; }
.st-tier-h b { color: #fff; }
.st-tier.is-down .st-tier-h .v { color: #ffb4a8; }
.st-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; padding: 3px; border-radius: 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.04);
  animation: st-wipe 1.3s cubic-bezier(.2,.8,.2,1) both; }
.st-bars i { flex: 1 1 0; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--ok); opacity: .78; transition: opacity .15s, transform .15s; transform-origin: bottom; }
.st-bars i:hover { opacity: 1; transform: scaleY(1.08); }
.st-bars i.down { background: var(--ko); opacity: 1; }
.st-bars i.pend { background: var(--idle); }
.st-bars i.maint { background: var(--maint); }
.st-bars i:last-child { opacity: 1; box-shadow: 0 0 8px currentColor; color: var(--ok); }
.st-bars i.down:last-child { color: var(--ko); }
.st-bars.empty { align-items: center; justify-content: center; font: 500 11.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-dim); animation: none; }
.st-msg { margin-top: 6px; font: 500 11.5px/1.45 'JetBrains Mono', ui-monospace, monospace; color: #ffb4a8; overflow-wrap: anywhere; }
.st-why { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); display: grid; gap: 8px; }
.st-why p { font-size: 14px; }
.st-why b { color: var(--text); }

/* ── Cascade ── */
.st-flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; margin: 8px 0 18px; }
.st-node { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); }
.st-node svg { color: var(--c); }
.st-node b { font-size: 14.5px; }
.st-node span { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.st-node.t0 { border-color: rgba(52,211,153,.35); } .st-node.t0 svg { color: var(--ok); }
.st-node.t1 { border-color: rgba(255,167,38,.3); } .st-node.t1 svg { color: var(--warn); }
.st-node.t2 svg { color: var(--v); }
.st-link { height: 2px; position: relative; }
.st-link i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--f) 0 6px, transparent 6px 14px); background-size: 28px 2px;
  animation: st-flow .9s linear infinite; opacity: .8; }

.st-matrix { display: grid; gap: 8px; margin: 6px 0 22px; --lab: 190px; --gx: 16px; }
.st-mrow { --sc: var(--idle); position: relative; display: grid; grid-template-columns: var(--lab) repeat(3, minmax(0, 1fr)); gap: var(--gx); align-items: center; isolation: isolate; }
.st-mrow:not(.st-mhead)::after { content: ""; position: absolute; z-index: -1; top: 50%; height: 2px; margin-top: -1px;
  left: calc(var(--lab) - 4px); width: calc((100% - var(--lab) - 3 * var(--gx)) / 3 * (var(--to) + .5) + var(--to) * var(--gx) + var(--gx) + 4px); height: 3px;
  background: repeating-linear-gradient(90deg, var(--sc) 0 7px, transparent 7px 14px); background-size: 28px 2px; animation: st-flow .8s linear infinite; opacity: .75; }
.st-mhead span { font: 700 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.st-mname { font-weight: 700; font-size: 14.5px; color: var(--text); }
.st-cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px; border-radius: 10px;
  border: 1px solid var(--border); background: #0c1829; font: 600 12.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-dim); text-align: center; }
.st-cell em { font-style: normal; }
.st-cell.is-up { color: #a7f3d0; }
.st-cell.is-down { color: #ffb4a8; border-color: rgba(255,90,60,.35); }
.st-cell.skip { background: repeating-linear-gradient(135deg, #0c1829 0 8px, #1a1a2a 8px 16px); color: #d98b80; }
.st-mrow.is-ok .st-cell.on { --sc: var(--ok); }
.st-mrow.is-backup .st-cell.on { --sc: var(--warn); }
.st-mrow.is-public .st-cell.on { --sc: var(--v); }
.st-cell.on { color: #fff; border-color: color-mix(in srgb, var(--sc) 70%, transparent); background: color-mix(in srgb, var(--sc) 14%, #0c1829);
  box-shadow: 0 0 22px color-mix(in srgb, var(--sc) 25%, transparent); }
.st-pkt { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); animation: st-beat 1.4s infinite; }

.st-off ul { margin: 0; padding-left: 18px; }
.st-off li { font-size: 14.5px; line-height: 1.65; }
.st .pg-cta a.pg-btn-fire { color: #fff; }
.st .pg-cta a.pg-btn-ghost { color: var(--text); }
.st-cell.skip::before { content: "✕"; color: var(--ko); font-size: 11px; margin-right: 2px; }
.st-src { margin-top: 12px !important; font-size: 13.5px !important; color: var(--text-dim) !important; }
.st-src b { color: var(--text); font-weight: 600; }
.st-watch { margin-top: 6px; }
.st code { font-size: .88em; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .st-hero .pg-hero-grid > div:last-child { order: -1; }
  .st-orb { width: min(300px, 70vw); }
  .st-orb .st-blip { transform: rotate(var(--a)) translateY(calc(min(300px, 70vw) * -.34)); }
}
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .st-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .st-link { width: 2px; height: 22px; justify-self: center; }
  .st-link i { background: repeating-linear-gradient(180deg, var(--f) 0 6px, transparent 6px 14px); background-size: 2px 28px; animation-name: st-flowv; }
  .st-node { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 12px 14px; }
  .st-node svg { grid-row: span 2; }
}
@media (max-width: 640px) {
  .st-matrix { --gx: 6px; gap: 12px; }
  .st-mrow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .st-mrow:not(.st-mhead)::after { display: none; }
  .st-mhead > span:first-child { display: none; }
  .st-mname { grid-column: 1 / -1; font-size: 13.5px; }
  .st-cell { font-size: 11px; padding: 6px 4px; min-height: 36px; }
  .st-pkt { display: none; }
  .st-mhead span { font-size: 9.5px; letter-spacing: .04em; }
  .st-tier-h { flex-direction: column; gap: 2px; }
  .st-tier-h .v { text-align: left; }
  .st-svc-h { grid-template-columns: auto minmax(0, 1fr); }
  .st-svc-h .pg-chip { grid-column: 1 / -1; justify-self: start; }
  .st-orb { width: min(260px, 72vw); }
  .st-orb .st-blip { transform: rotate(var(--a)) translateY(calc(min(260px, 72vw) * -.34)); }
}
@media (prefers-reduced-motion: reduce) {
  .st-bars { clip-path: none; }
  .st-rings i { opacity: 0; }
  .st-sweep { background: conic-gradient(from 20deg, color-mix(in srgb, var(--sc) 30%, transparent), transparent 22%, transparent); }
}

/* H1 orienté requête ; la phrase narrative passe en sous-titre juste dessous (oct. 2026). */
.kd-h1s { font-size: clamp(21px, 2.7vw, 30px); line-height: 1.2; letter-spacing: -.015em; font-weight: 700; color: #e6edf6;
  margin: -4px 0 18px; max-width: 680px; text-wrap: balance; }