/* Page de statut Billora (#1157) — aucune police ni image externe (CSP : style-src 'self'). */
:root {
  --bg: #ffffff; --bg-soft: #eff6ff; --fg: #0f172a; --muted: #64748b; --line: #e2e8f0; --card: #ffffff;
  --primary: #1d4ed8; --accent: #0ea5e9;
  --ok-bg: #f0fdf4; --ok-bd: #bbf7d0; --ok-fg: #166534; --ok-bar: #22c55e;
  --maint-bg: #eff6ff; --maint-bd: #bfdbfe; --maint-fg: #1d4ed8; --maint-bar: #60a5fa;
  --deg-bg: #fffbeb; --deg-bd: #fde68a; --deg-fg: #92400e; --deg-bar: #fbbf24;
  --part-bg: #fff7ed; --part-bd: #fed7aa; --part-fg: #9a3412; --part-bar: #f97316;
  --maj-bg: #fef2f2; --maj-bd: #fecaca; --maj-fg: #b91c1c; --maj-bar: #ef4444;
  --neu-bg: #f8fafc; --neu-bd: #e2e8f0; --neu-fg: #475569; --neu-bar: #cbd5e1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --bg-soft: #0f1b33; --fg: #e2e8f0; --muted: #94a3b8; --line: #1e293b; --card: #101a2e;
    --primary: #60a5fa; --accent: #38bdf8;
    --ok-bg: #052e16; --ok-bd: #166534; --ok-fg: #86efac;
    --maint-bg: #172554; --maint-bd: #1e40af; --maint-fg: #93c5fd;
    --deg-bg: #422006; --deg-bd: #92400e; --deg-fg: #fde68a;
    --part-bg: #431407; --part-bd: #9a3412; --part-fg: #fdba74;
    --maj-bg: #450a0a; --maj-bd: #991b1b; --maj-fg: #fca5a5;
    --neu-bg: #111827; --neu-bd: #1f2937; --neu-fg: #cbd5e1; --neu-bar: #334155;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-wrap: anywhere; }
a { color: var(--primary); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
main, .topbar, .hero, .foot { max-width: 48rem; margin-inline: auto; padding-inline: 1rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-block: .75rem; font-size: .875rem; }
.topbar .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: inherit; text-decoration: none; }
.topbar .brand img { display: block; }
.langs { display: inline-flex; gap: .25rem; }
.langs a { padding: .25rem .5rem; border-radius: .375rem; text-decoration: none; color: var(--muted); }
.langs a[aria-current] { background: var(--primary); color: #fff; }
.hero { max-width: none; background: var(--bg-soft); padding: 1.5rem 1rem 2rem; text-align: center; }
.hero > * { max-width: 48rem; margin-inline: auto; }
.hero > * + * { margin-top: .75rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xsmall { font-size: .75rem; }
.grow { flex: 1 1 0; min-width: 0; }
.prewrap { white-space: pre-line; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.hero .eyebrow { color: var(--primary); }
.banner { display: block; border: 1px solid var(--neu-bd); border-radius: 1rem; padding: 1rem 1.25rem; font-size: 1.25rem; font-weight: 700; }
main { padding-block: 2rem 1rem; }
.group { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.pill { display: inline-block; border: 1px solid var(--neu-bd); border-radius: 999px; padding: .15rem .65rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.components { padding: 0; overflow: hidden; }
.components > li { padding: 1rem; }
.components > li + li { border-top: 1px solid var(--line); }
.comphead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .75rem; }
.compname { font-weight: 600; }
.incident > header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; }
.incident h3 { font-size: 1rem; }
.updates { margin-top: 1rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--line); }
.updates > li + li { margin-top: 1rem; }
.incident > footer { margin-top: 1rem; }
.pasttitle { font-size: 1.25rem; margin-bottom: .25rem; }
.pastday { margin-top: 1.5rem; }
.pastday h3 { font-size: .875rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .75rem; }
.emergency { border-width: 2px; }
.emergency .eyebrow { color: inherit; }
.bar { display: flex; gap: 1px; height: 2rem; }
.bar .d { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--neu-bar); }
.barlegend { display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.barlegend .short { display: none; }
.foot { padding-block: 1rem 3rem; }
.foot p + p { margin-top: .5rem; }

/* Couleurs par état (bandeau, pastille, trait de barre, niveau du message d'urgence) */
.st-operational.banner, .st-operational.pill, .impact-none { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.st-maintenance.banner, .st-maintenance.pill, .em-info { background: var(--maint-bg); border-color: var(--maint-bd); color: var(--maint-fg); }
.st-degraded.banner, .st-degraded.pill, .impact-minor, .em-minor { background: var(--deg-bg); border-color: var(--deg-bd); color: var(--deg-fg); }
.st-partial_outage.banner, .st-partial_outage.pill, .impact-major { background: var(--part-bg); border-color: var(--part-bd); color: var(--part-fg); }
.st-major_outage.banner, .st-major_outage.pill, .impact-critical, .em-major { background: var(--maj-bg); border-color: var(--maj-bd); color: var(--maj-fg); }
.st-pending.banner, .st-pending.pill, .st-unknown.banner, .st-unknown.pill { background: var(--neu-bg); border-color: var(--neu-bd); color: var(--neu-fg); }
.pill.impact-none, .pill.impact-minor, .pill.impact-major, .pill.impact-critical { border-color: transparent; }
.d.st-operational { background: var(--ok-bar); }
.d.st-maintenance { background: var(--maint-bar); }
.d.st-degraded { background: var(--deg-bar); }
.d.st-partial_outage { background: var(--part-bar); }
.d.st-major_outage { background: var(--maj-bar); }
.d.st-pending, .d.st-unknown, .d.nodata { background: var(--neu-bar); }
.bar .d.lead { visibility: hidden; } /* jours précédant le début du suivi */

/* 375 px : 30 derniers jours seulement, aucun débordement horizontal */
@media (max-width: 40rem) {
  .bar .d:nth-last-child(n+31) { display: none; }
  .barlegend .long { display: none; }
  .barlegend .short { display: inline; }
  .barlegend span:nth-child(3) { display: none; }
  .banner { font-size: 1.1rem; }
}

/* Page d'urgence */
.admin { padding-block: 2rem; }
.admin h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.admin h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.admin .card { margin-bottom: 1rem; }
.form label { display: block; margin-top: .75rem; font-weight: 600; font-size: .875rem; }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: .25rem; padding: .6rem .75rem; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: .5rem; }
button { margin-top: 1rem; padding: .6rem 1.1rem; font: inherit; font-weight: 600; color: #fff; background: var(--primary); border: 0; border-radius: .5rem; cursor: pointer; }
button.secondary { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.alert { padding: .75rem 1rem; border-radius: .5rem; margin-bottom: 1rem; border: 1px solid; }
.alert.err { background: var(--maj-bg); border-color: var(--maj-bd); color: var(--maj-fg); }
.alert.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.log li + li { margin-top: .25rem; }