/*
 * Feuille de style unique d'Arx One Status.
 * Les variables ci-dessous portent l'identité visuelle et les couleurs métier.
 * Important : orange = marque/maintenance, vert = OK, rouge = panne.
 */
:root {
  --orange: #f47721;
  --orange-dark: #d85d0b;
  --ink: #171717;
  --muted: #6e6e73;
  --line: #e8e8ed;
  --surface: #f7f7f8;
  --green: #20a464;
  --amber: #e69a17;
  --red: #db3d4b;
  --radius: 20px;
  --shadow: 0 18px 60px rgba(20, 20, 20, .055);
}
[hidden] { display: none !important; }

/* Base, typographie et en-tête partagé */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.site-header { height: 76px; max-width: 1160px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(232,232,237,.8); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 14px; letter-spacing: .08em; font-weight: 700; }
.brand b { color: var(--orange); font-weight: 800; }
.brand > #brand-visual { display: flex; align-items: center; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--orange); font-size: 16px; letter-spacing: 0; }
.brand-logo { display: block; width: auto; max-width: 155px; height: 34px; object-fit: contain; }
.brand-logo-dark { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav a, .text-button, .site-info-button, .report-problem-button { padding: 9px 14px; border: 0; background: none; color: var(--muted); border-radius: 10px; font-size: 14px; transition: .2s; }
.site-header nav a:hover, .site-header nav a[aria-current="page"], .text-button:hover, .site-info-button:hover { color: var(--ink); background: var(--surface); }
.site-info-button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.site-info-button i { width: 17px; height: 17px; display: grid; place-items: center; color: var(--orange-dark); border: 1.5px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 11px; font-weight: 700; font-style: normal; }
.report-problem-button { margin-left: 5px; color: #fff; background: var(--orange); font-weight: 700; }
.report-problem-button:hover { background: var(--orange-dark); }
.theme-toggle { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; font-size: 18px; line-height: 1; transition: .18s ease; }
.theme-toggle:hover { color: var(--orange-dark); border-color: #efc5a8; transform: translateY(-1px); }
/* Page d'état publique : annonce et synthèse globale */
.page-shell { width: min(960px, calc(100% - 48px)); margin: 72px auto 110px; }
.hero { display: grid; gap: 18px; }
.announcement { padding: 15px 18px; display: flex; gap: 18px; align-items: center; background: #fff7f1; border: 1px solid #ffe1cd; border-radius: 14px; }
.announcement-label { flex: 0 0 auto; color: var(--orange-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.announcement p { margin: 0; color: #71401e; font-size: 14px; line-height: 1.5; }
.announcement-incident { background: #fff3f4; border-color: #ffd6da; }
.announcement-incident .announcement-label, .announcement-incident p { color: #a21e2b; }
.announcement-info { background: #f2f7ff; border-color: #d9e8ff; }
.announcement-info .announcement-label, .announcement-info p { color: #285f9e; }
.upcoming-maintenance { padding: 14px 16px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 13px; background: #fffaf4; border: 1px solid #f3dcc7; border-radius: 14px; }
.upcoming-maintenance-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--orange-dark); background: #fff0e3; border-radius: 10px; font-size: 18px; }
.upcoming-maintenance > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.upcoming-maintenance > div > span { color: var(--orange-dark); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.upcoming-maintenance strong { font-size: 13px; }
.upcoming-maintenance p { margin: 0; color: var(--muted); font-size: 11px; }
.upcoming-maintenance-actions { display: flex; align-items: center; gap: 6px; }
.upcoming-maintenance-actions a { padding: 8px 10px; color: var(--orange-dark); background: #fff; border: 1px solid #efcfb6; border-radius: 8px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.upcoming-maintenance-actions a:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
.global-card { min-height: 215px; padding: 38px 44px; display: flex; align-items: center; gap: 30px; border-radius: 26px; background: linear-gradient(135deg, #fff8f2 0%, #fff 62%); border: 1px solid #f4e6da; box-shadow: var(--shadow); overflow: hidden; position: relative; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.global-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -130px; border: 40px solid rgba(244,119,33,.07); border-radius: 50%; }
.global-card > * { position: relative; z-index: 1; }
.global-card-linked { cursor: pointer; }
.global-card-linked:hover { transform: translateY(-2px); border-color: #edc4a9; box-shadow: 0 22px 70px rgba(20,20,20,.09); }
.global-card-linked:focus-visible { outline: 3px solid rgba(244,119,33,.35); outline-offset: 4px; }
.status-orb { flex: 0 0 auto; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgba(32,164,100,.12); }
.status-orb span { width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(32,164,100,.10); }
.global-card.status-outage .status-orb, .global-card.status-partial_outage .status-orb { background: rgba(219,61,75,.11); }
.global-card.status-outage .status-orb span, .global-card.status-partial_outage .status-orb span { background: var(--red); box-shadow: 0 0 0 7px rgba(219,61,75,.1); }
.global-card.status-degraded .status-orb span, .global-card.status-maintenance .status-orb span { background: var(--amber); box-shadow: 0 0 0 7px rgba(230,154,23,.1); }
.eyebrow { margin: 0 0 11px; color: var(--orange-dark); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.global-card h1 { margin: 0; font-size: clamp(25px, 4vw, 38px); line-height: 1.12; letter-spacing: -.035em; }
.global-event-context { margin-top: 15px; display: grid; gap: 9px; }
.global-event-context > p { margin: 0; color: #8f2630; font-size: 13px; font-weight: 750; line-height: 1.45; }
.global-affected-services { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.global-affected-services > span { color: var(--muted); font-size: 11px; }
.global-affected-services > strong { padding: 5px 8px; color: #9f2531; background: #fff0f2; border: 1px solid #f5ced2; border-radius: 7px; font-size: 10px; }
.global-event-link { width: fit-content; color: var(--orange-dark); font-size: 11px; font-weight: 750; }
.global-event-link i { margin-left: 3px; font-style: normal; transition: margin-left .15s ease; }
.global-card-linked:hover .global-event-link i { margin-left: 7px; }
.updated-at { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
/* Recherche et filtres temporaires par groupe */
.service-search { min-height: 58px; margin-top: 34px; padding: 0 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(20,20,20,.035); transition: .18s; }
.service-search:focus-within { border-color: #f2b58d; box-shadow: 0 0 0 4px rgba(244,119,33,.09); }
.service-search input { flex: 1; min-width: 0; min-height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 14px; }
.service-search input:focus { border: 0; box-shadow: none; }
.search-icon { width: 16px; height: 16px; position: relative; flex: 0 0 auto; border: 1.8px solid #8e8e93; border-radius: 50%; }
.search-icon::after { content: ""; width: 6px; height: 1.8px; position: absolute; right: -5px; bottom: -2px; background: #8e8e93; transform: rotate(45deg); border-radius: 2px; }
.search-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
.clear-search { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); font-size: 17px; }
.service-group-filters { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.service-group-filters button { min-height: 34px; padding: 7px 12px; color: #66666b; background: #fff; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 650; transition: .16s ease; }
.service-group-filters button:hover { color: var(--orange-dark); border-color: #efc5a8; }
.service-group-filters button[aria-pressed="true"] { color: #fff; background: var(--orange); border-color: var(--orange); box-shadow: 0 5px 16px rgba(244,119,33,.18); }
.search-empty { margin-top: 16px; }
.sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-heading { margin: 65px 0 20px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.legend { color: var(--muted); font-size: 12px; }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; background: var(--green); }
/* Cartes de service, états, historique et détail des grappes */
.service-group { margin-bottom: 36px; }
.service-group > h3 { margin: 0 0 12px 4px; color: var(--muted); font-size: 12px; font-weight: 650; }
.service-stack { display: grid; gap: 12px; }
.service-card { padding: 26px 28px 22px; border: 1px solid var(--line); border-radius: var(--radius); transition: .22s ease; }
.service-card:hover { border-color: #dadade; box-shadow: 0 12px 40px rgba(20,20,20,.05); transform: translateY(-1px); }
.service-card.has-maintenance { border-color: #f1d5a8; }
.service-card.has-incident { border-color: #eab7bc; box-shadow: inset 3px 0 0 rgba(219,61,75,.72); }
.service-topline { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.cluster-service-card .service-topline { cursor: pointer; }
.service-topline h4 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.service-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cluster-badge { min-height: 25px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; color: #7a5a12; background: #fff7e9; border: 1px solid transparent; border-radius: 99px; font-size: 9px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.cluster-badge:hover, .cluster-badge[aria-expanded="true"] { border-color: #f1d5a8; background: #fff3d9; }
.cluster-badge i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .18s ease; }
.cluster-badge[aria-expanded="true"] i { transform: rotate(225deg) translate(-1px, -1px); }
.service-topline p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.status-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 99px; color: #14794a; background: #eefaf4; font-size: 11px; font-weight: 650; }
.status-pill i, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status-pill.status-outage, .status-pill.status-partial_outage { color: #a51f2c; background: #fff1f2; }
.status-pill.status-outage i, .status-pill.status-partial_outage i, .status-dot.status-outage, .status-dot.status-partial_outage { background: var(--red); }
.status-pill.status-degraded, .status-pill.status-maintenance { color: #8d5b05; background: #fff7e9; }
.status-pill.status-degraded i, .status-pill.status-maintenance i, .status-dot.status-degraded, .status-dot.status-maintenance { background: var(--amber); }
.service-maintenance-notice { margin-top: 18px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; color: #755119; background: #fff8eb; border: 1px solid #f5dfb8; border-radius: 11px; }
.service-maintenance-notice > span { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; color: #fff; background: var(--amber); border-radius: 50%; font-size: 12px; font-weight: 800; }
.service-maintenance-notice > div { display: grid; gap: 3px; }
.service-maintenance-notice strong { font-size: 12px; }
.service-maintenance-notice p { margin: 0; color: #8a6b37; font-size: 11px; line-height: 1.45; }
.service-incident-notice { margin-top: 18px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; color: #8e202b; background: #fff3f4; border: 1px solid #f3cbd0; border-radius: 11px; }
.service-incident-notice > span { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 50%; font-size: 12px; font-weight: 800; }
.service-incident-notice > div { display: grid; gap: 3px; }
.service-incident-notice strong { font-size: 12px; }
.service-incident-notice p { margin: 0; color: #a4424b; font-size: 11px; line-height: 1.45; }
.service-incident-notice a { width: fit-content; margin-top: 3px; color: #8e202b; font-size: 10px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.probe-sources { margin-top: 18px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 7px 18px; background: var(--surface); border-radius: 11px; }
.probe-source { min-width: 190px; flex: 1; display: grid; grid-template-columns: 8px auto 1fr auto; align-items: center; gap: 7px; }
.probe-source i { width: 7px; height: 7px; background: #aaaab0; border-radius: 50%; }
.probe-source.status-operational i { background: var(--green); }
.probe-source.status-degraded i, .probe-source.status-partial_outage i { background: var(--amber); }
.probe-source.status-outage i { background: var(--red); }
.probe-source span, .probe-source small { color: var(--muted); font-size: 10px; }
.probe-source strong { color: var(--ink); font-size: 10px; font-weight: 700; text-align: right; }
.probe-source.stale { opacity: .62; }
.metrics-row { margin-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric { display: flex; flex-direction: column; gap: 5px; }
.metric span { color: var(--muted); font-size: 11px; }
.metric strong { font-size: 14px; font-weight: 650; }
.uptime-bars { height: 28px; margin-top: 23px; display: flex; align-items: stretch; gap: 2px; }
.uptime-bars .uptime-bar { min-width: 1px; min-height: 28px; flex: 1 1 2px; padding: 0; border: 0; border-radius: 2px; background: var(--green); cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.uptime-bars .uptime-bar:hover, .uptime-bars .uptime-bar:focus-visible { z-index: 1; filter: brightness(.85); transform: scaleY(1.2); outline: 2px solid #fff; box-shadow: 0 0 0 3px var(--orange); }
.uptime-bars .bar-degraded { background: var(--amber); }
.uptime-bars .bar-outage { background: var(--red); }
.uptime-bars .bar-unknown { background: #ececef; }
.bar-labels { margin-top: 7px; display: flex; justify-content: space-between; color: #96969a; font-size: 9px; }
.cluster-nodes { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--line); }
.cluster-node { min-height: 54px; padding: 8px 4px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px; }
.cluster-node + .cluster-node { border-top: 1px solid #f0f0f2; }
.cluster-node-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; }
.cluster-node-dot.status-operational { background: var(--green); box-shadow: 0 0 0 4px rgba(32,164,100,.09); }
.cluster-node-dot.status-outage { background: var(--red); box-shadow: 0 0 0 4px rgba(219,61,75,.08); }
.cluster-node > div { display: grid; gap: 3px; }
.cluster-node strong { font-size: 12px; }
.cluster-node small { color: var(--muted); font-size: 10px; }
.cluster-node-latency { color: var(--muted); font-size: 11px; font-weight: 650; }
.empty-state, .empty-line { padding: 28px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 14px; }
.site-footer { max-width: 960px; margin: 0 auto 35px; padding-top: 24px; display: flex; justify-content: space-between; color: #939397; border-top: 1px solid var(--line); font-size: 11px; }
.footer-live { display: inline-flex; align-items: center; gap: 7px; }
.pulse-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* Fenêtres modales communes : support et détail journalier */
.modal { width: min(680px, calc(100% - 32px)); max-height: min(820px, calc(100vh - 40px)); padding: 30px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 100px rgba(20,20,20,.22); }
.modal::backdrop { background: rgba(17,17,18,.42); backdrop-filter: blur(4px); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.035em; }
.modal-close { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; color: var(--muted); background: var(--surface); border: 0; border-radius: 50%; font-size: 20px; }
.modal-close:hover { color: var(--ink); background: var(--line); }
.modal-intro { margin: 10px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.support-modal { width: min(540px, calc(100% - 32px)); }
.support-choices { display: grid; gap: 10px; }
.support-choices a { min-height: 75px; padding: 14px 16px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 14px; transition: .16s ease; }
.support-choices a:hover { border-color: #efc19f; background: #fff8f2; transform: translateY(-1px); }
.support-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--orange-dark); background: #fff0e4; border-radius: 11px; font-size: 15px; font-weight: 800; }
.support-choices a > span:nth-child(2) { display: grid; gap: 4px; }
.support-choices strong { font-size: 13px; }
.support-choices small { color: var(--muted); font-size: 11px; }
.support-choices i { color: var(--orange-dark); font-style: normal; }
.info-modal { width: min(620px, calc(100% - 32px)); }
.info-intro { max-width: 510px; margin-bottom: 20px; }
.info-intro strong { color: var(--ink); }
.info-explanations { display: grid; gap: 9px; }
.info-explanations section { padding: 15px 16px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; background: var(--surface); border: 1px solid transparent; border-radius: 13px; }
.info-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--orange-dark); background: #fff0e4; border-radius: 10px; font-size: 12px; font-weight: 800; }
.info-explanations h3 { margin: 1px 0 5px; font-size: 13px; }
.info-explanations p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.history-modal { width: min(840px, calc(100% - 32px)); }
.history-summary { margin-bottom: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.history-summary div { padding: 14px; display: grid; gap: 6px; background: var(--surface); border-radius: 11px; }
.history-summary span { color: var(--muted); font-size: 10px; }
.history-summary strong { font-size: 17px; }
.history-loading, .history-empty { min-height: 160px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 13px; font-size: 12px; }
.history-chart-wrap { padding: 13px 13px 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.history-chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.history-legend { min-height: 30px; padding: 2px 4px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.history-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.history-legend-swatch { width: 18px; height: 3px; display: inline-block; border-radius: 99px; }
.history-legend-swatch.availability-swatch { height: 0; background: transparent; border-top: 3px dashed var(--green); border-radius: 0; }
.history-grid-line { stroke: #e6e6ea; stroke-width: 1; }
.history-axis-label { fill: #8e8e93; font-family: inherit; font-size: 10px; }
.history-latency-line { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.history-point { fill: #fff; stroke: var(--orange); stroke-width: 2; }
.history-availability-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; }
.history-availability-point { fill: #fff; stroke: var(--green); }
.history-availability-axis { fill: var(--green); }
.history-chart-axis { margin: -8px 15px 0 43px; display: flex; justify-content: space-between; color: #8e8e93; font-size: 9px; }
.history-chart-help { margin: 14px 5px 2px; color: var(--muted); text-align: center; font-size: 10px; }

/* Page publique des événements et fil chronologique */
.maintenance-page { width: min(820px, calc(100% - 48px)); }
.page-intro { margin-bottom: 70px; }
.page-intro h1 { margin: 0; font-size: clamp(36px, 6vw, 58px); line-height: 1; letter-spacing: -.055em; }
.page-intro > p:last-child { max-width: 580px; margin: 22px 0 0; color: var(--muted); line-height: 1.6; }
.event-section { margin-bottom: 60px; }
.section-heading.compact { margin: 0 0 18px; justify-content: flex-start; align-items: center; }
.section-heading.compact h2 { font-size: 19px; }
.history-window { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.count { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 11px; }
.quiet-card { padding: 25px; display: flex; align-items: center; gap: 17px; border: 1px solid #dcefe5; background: #f8fcfa; border-radius: 16px; }
.quiet-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.check-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.event-card { display: grid; grid-template-columns: 25px 1fr; gap: 12px; margin-bottom: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; scroll-margin-top: 24px; transition: border-color .2s ease, box-shadow .2s ease; }
.event-card:target { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(244,119,33,.13), var(--shadow); }
.event-card.event-incident:target { border-color: var(--red); box-shadow: 0 0 0 4px rgba(219,61,75,.12), var(--shadow); }
.calendar-button { width: fit-content; margin: 14px 0 2px; padding: 9px 12px; display: inline-flex; color: var(--orange-dark); background: #fff8f2; border: 1px solid #f4c7a7; border-radius: 9px; font-size: 11px; font-weight: 750; }
.calendar-button:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
.event-marker { padding-top: 3px; }
.event-marker span { display: block; width: 10px; height: 10px; border: 3px solid var(--orange); border-radius: 50%; }
.event-incident .event-marker span { border-color: var(--red); }
.event-meta { display: flex; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.event-body > h3 { margin: 10px 0 8px; font-size: 19px; }
.event-body > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.event-badges { margin-top: 18px; display: flex; gap: 7px; }
.impact-badge, .state-badge, .type-chip { padding: 6px 9px; color: var(--muted); background: var(--surface); border-radius: 7px; font-size: 10px; text-transform: capitalize; }
.impact-badge.impact-minor, .impact-label.impact-minor { color: #6e6e73; }
.impact-badge.impact-major, .impact-label.impact-major { color: #8d5b05; background: #fff7e9; }
.impact-badge.impact-critical, .impact-label.impact-critical { color: #a51f2c; background: #fff1f2; }
.impact-badge.impact-blocking, .impact-label.impact-blocking { color: #fff; background: #a51f2c; }
.affected-services { margin-top: 18px; display: grid; gap: 8px; }
.affected-services > strong { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.affected-services > div { display: flex; flex-wrap: wrap; gap: 6px; }
.affected-services span { padding: 6px 9px; color: #755119; background: #fff8eb; border-radius: 7px; font-size: 10px; }
.timeline { margin: 25px 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 62px 1fr; gap: 15px; padding: 0 0 20px 13px; border-left: 1px solid var(--line); position: relative; }
.timeline li::before { content: ""; width: 7px; height: 7px; position: absolute; left: -4px; top: 5px; border-radius: 50%; background: var(--orange); }
.timeline time { color: var(--muted); font-size: 11px; }
.timeline strong { font-size: 12px; }
.timeline p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Historique public : résumé replié, palette neutre et détail à la demande. */
.event-card.event-history { display: block; padding: 0; overflow: hidden; color: #4f4f55; background: #fafafa; border-color: #dedee3; box-shadow: none; }
.event-history summary { list-style: none; }
.event-history summary::-webkit-details-marker { display: none; }
.event-history-summary { min-height: 82px; padding: 18px 20px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 14px; align-items: center; gap: 13px; cursor: pointer; transition: background .18s ease; }
.event-history-summary:hover { background: #f4f4f6; }
.event-history-summary:focus-visible { outline: 3px solid rgba(110,110,115,.24); outline-offset: -3px; }
.history-event-marker { align-self: stretch; display: grid; place-items: center; }
.history-event-marker i { width: 8px; height: 8px; display: block; background: #a8a8ae; border-radius: 50%; }
.history-event-main { min-width: 0; display: grid; gap: 7px; }
.history-event-main > strong { overflow: hidden; color: #3e3e43; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.event-history .event-meta { color: #8a8a91; }
.event-history .impact-badge { color: #73737a; background: #ededf0; filter: none; opacity: 1; }
.history-chevron { width: 8px; height: 8px; border-right: 1.5px solid #8c8c92; border-bottom: 1.5px solid #8c8c92; transform: rotate(45deg) translate(-2px, 2px); transition: transform .18s ease; }
.event-history[open] .history-chevron { transform: rotate(225deg) translate(-2px, 2px); }
.event-history-content { padding: 22px 45px 25px; background: #fff; border-top: 1px solid #e5e5e9; }
.event-history-content > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.event-history-content .event-badges { margin-top: 14px; }
.event-card.event-history:target { border-color: #aaaab1; box-shadow: 0 0 0 4px rgba(110,110,115,.11), var(--shadow); }

/* Documentation de l'API publique */
.api-page { max-width: 960px; }
.api-hero { max-width: 760px; }
.api-hero h1 { margin-bottom: 14px; }
.api-base-url { width: fit-content; max-width: 100%; margin-top: 25px; padding: 10px 13px; display: flex; align-items: center; gap: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; font-size: 11px; }
.api-base-url span { flex: 0 0 auto; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.api-base-url code { overflow-wrap: anywhere; color: var(--ink); font-size: 13px; }
.api-access-note { margin: 38px 0 64px; padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; background: #f0faf5; border: 1px solid #cfeadb; border-radius: 16px; }
.api-access-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 9px; font-size: 13px; font-weight: 800; }
.api-access-note h2 { margin: 1px 0 7px; font-size: 16px; }
.api-access-note p { margin: 0; color: #47705a; font-size: 13px; line-height: 1.6; }
.api-section { margin-top: 58px; }
.api-section .section-heading { margin-bottom: 18px; }
.api-endpoint-list { display: grid; gap: 12px; }
.api-endpoint { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px rgba(20,20,20,.025); }
.api-endpoint-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.api-endpoint-heading > code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; font-weight: 700; }
.http-method { padding: 5px 8px; color: #14794a; background: #eaf8f1; border-radius: 7px; font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.api-format { color: var(--muted); font-size: 10px; font-weight: 700; }
.api-endpoint > p { margin: 14px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.api-page pre { margin: 0; padding: 14px 16px; overflow-x: auto; color: #e9e9ed; background: #181a1f; border: 1px solid #292c33; border-radius: 10px; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-page code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-page p code, .api-page li code { padding: 2px 5px; color: var(--ink); background: var(--surface); border-radius: 5px; font-size: .93em; }
.api-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.api-reference-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.api-reference-card h2 { margin: 6px 0 20px; font-size: 21px; letter-spacing: -.025em; }
.api-status-list { margin: 0; display: grid; gap: 12px; }
.api-status-list > div { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.api-status-list dt { display: flex; align-items: center; gap: 8px; }
.api-status-list dd { margin: 0; color: var(--muted); text-align: right; font-size: 11px; }
.api-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #a6a6ae; border-radius: 50%; }
.api-dot.status-operational { background: var(--green); }
.api-dot.status-degraded, .api-dot.status-maintenance { background: var(--amber); }
.api-dot.status-partial_outage, .api-dot.status-outage { background: var(--red); }
.api-conventions { margin: 0; padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.75; }

/* Abonnements publics et rapport SLA hebdomadaire */
.compact-intro { max-width: 760px; margin-bottom: 44px; }
.subscriptions-page { max-width: 760px; }
.subscription-result { margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; }
.subscription-result strong { font-size: 14px; }
.subscription-result p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.subscription-result.success { background: #f0faf5; border-color: #cfeadb; }
.subscription-result.error { background: #fff3f4; border-color: #f3cbd0; }
.subscription-result.neutral { background: var(--surface); }
.subscription-card { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.subscription-card h2 { margin: 0 0 24px; font-size: 24px; }
.subscription-card form { display: grid; gap: 17px; }
.subscription-scopes { padding: 0; border: 0; }
.subscription-scopes legend { margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.subscription-scopes > div { max-height: 270px; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.subscription-card .primary-button { margin-top: 4px; justify-content: center; }
.subscription-privacy { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.sla-page { max-width: 1060px; }
.sla-toolbar { padding: 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.sla-toolbar > div { display: grid; gap: 3px; text-align: center; }
.sla-toolbar > div strong { font-size: 16px; }
.sla-toolbar > div span, .sla-toolbar > div small { color: var(--muted); font-size: 10px; }
.sla-toolbar > a:last-child { justify-self: end; }
.sla-actions { margin: 18px 0 0; display: flex; justify-content: flex-end; }
.sla-actions .primary-button { width: fit-content; }
.sla-table-card { margin-top: 34px; padding: 0 24px 20px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.sla-table-card .section-heading { margin-top: 28px; }
.table-scroll { overflow-x: auto; }
.sla-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sla-table th { padding: 11px 12px; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sla-table td { padding: 15px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sla-table tbody tr:last-child td { border-bottom: 0; }
.sla-table td:first-child { min-width: 205px; white-space: normal; }
.sla-table td strong, .sla-table td small { display: block; }
.sla-table td small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.sla-value { font-weight: 800; }
.sla-value.good { color: var(--green); }
.sla-value.warning { color: var(--amber); }
.sla-value.bad { color: var(--red); }
.sla-value.unknown { color: var(--muted); }
.sla-footnote { margin: 16px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Connexion, formulaires et tableau de bord d'administration */
.secure-label { color: var(--muted); font-size: 12px; }
.login-page { background: #fafafa; }
.login-wrap { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 40px 20px 90px; }
.login-card { width: min(420px, 100%); padding: 44px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.lock-mark { width: 42px; height: 42px; margin-bottom: 28px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 13px; font-size: 22px; }
.login-card h1 { margin: 0; font-size: 32px; letter-spacing: -.04em; }
.login-copy { margin: 12px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.form-stack { display: grid; gap: 18px; }
.optional-label { color: var(--muted); font-size: 10px; font-weight: 500; }
label { display: grid; gap: 7px; color: #4d4d50; font-size: 12px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #dcdce1; border-radius: 10px; outline: none; transition: .15s; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,119,33,.12); }
.primary-button, .secondary-button, .danger-button { min-height: 40px; padding: 10px 15px; border-radius: 10px; border: 0; font-size: 12px; font-weight: 700; }
.primary-button { display: flex; justify-content: space-between; align-items: center; color: white; background: var(--orange); }
.primary-button:hover { background: var(--orange-dark); }
.secondary-button { color: #4b4b4e; background: var(--surface); border: 1px solid var(--line); }
.danger-button { color: #b52130; background: #fff1f2; }
.form-error { margin: -10px 0 20px; padding: 10px 12px; color: #9f2631; background: #fff3f4; border-radius: 9px; font-size: 12px; }
.admin-page { background: #fafafa; }
.admin-page .site-header { background: #fff; max-width: none; padding-inline: 38px; }
.admin-page .site-header form { margin: 0; }
.admin-shell { width: min(1220px, calc(100% - 56px)); margin: 46px auto 100px; display: grid; grid-template-columns: 190px 1fr; gap: 55px; }
.admin-nav { position: sticky; top: 30px; height: fit-content; display: grid; gap: 3px; }
.admin-nav .eyebrow { padding-left: 11px; margin-bottom: 13px; }
.admin-nav a { padding: 10px 11px; color: var(--muted); border-radius: 9px; font-size: 13px; }
.admin-nav a:hover { color: var(--ink); background: #fff; }
.admin-content { min-width: 0; }
.admin-intro { min-height: 220px; padding: 38px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; color: white; background: #191919; border-radius: 24px; }
.admin-intro .eyebrow { color: #ff9d5d; }
.admin-intro h1 { margin: 0; font-size: 39px; letter-spacing: -.05em; }
.admin-intro p:last-child { color: #aaa; }
.admin-stats { display: flex; gap: 12px; }
.admin-stats div { min-width: 95px; padding: 18px; background: #262626; border-radius: 14px; }
.admin-stats strong, .admin-stats span { display: block; }
.admin-stats strong { font-size: 26px; }
.admin-stats span { margin-top: 5px; color: #999; font-size: 10px; }
.admin-section { padding-top: 80px; scroll-margin-top: 30px; }
.subscriber-row { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.subscriber-row > div { min-width: 0; display: grid; gap: 5px; }
.subscriber-row small { color: var(--muted); font-size: 10px; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.scope-chips span { padding: 4px 7px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; font-size: 9px; }
.totp-setup { margin-bottom: 16px; padding: 20px; border-color: #e8c09f; background: #fff8f2; }
.totp-setup p { color: var(--muted); font-size: 11px; }
.totp-setup code { display: block; padding: 10px; overflow-wrap: anywhere; color: var(--orange-dark); background: #fff; border-radius: 8px; }
.audit-list { padding: 0 20px; overflow: hidden; }
.audit-row { border-bottom: 1px solid var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-row summary { padding: 14px 0; display: grid; grid-template-columns: 150px 130px minmax(160px, 1fr) minmax(180px, 1fr); gap: 12px; align-items: center; cursor: pointer; font-size: 11px; }
.audit-row time, .audit-row small { color: var(--muted); }
.audit-values { padding: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.audit-values pre { max-height: 240px; margin: 6px 0 0; padding: 10px; overflow: auto; color: var(--muted); background: var(--surface); border-radius: 8px; font-size: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-heading { margin-bottom: 20px; display: flex; align-items: end; justify-content: space-between; }
.admin-heading h2 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
.panel { margin-bottom: 20px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.branding-panel { display: grid; gap: 20px; }
.branding-help { max-width: 780px; }
.logo-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logo-variant { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.logo-variant h3 { margin: 16px 0 0; font-size: 14px; }
.logo-preview { min-height: 140px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface); border-radius: 14px; }
.logo-preview-light { color: #171717; background: #f7f7f8; border: 1px solid #e8e8ed; }
.logo-preview-dark { color: #f4f4f6; background: #0f1115; border: 1px solid #30333b; }
.logo-preview img { display: block; max-width: 100%; max-height: 90px; }
.logo-preview p { color: var(--muted); font-size: 12px; }
.logo-form { margin: 16px 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.form-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.admin-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.wide { grid-column: 1 / -1; }
.service-choice-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.service-choice-panel > button { min-height: 105px; padding: 20px; display: grid; align-content: center; gap: 7px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.service-choice-panel > button:hover { background: #fff8f2; border-color: #f2c7a9; }
.service-choice-panel strong { font-size: 15px; }
.service-choice-panel span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.cluster-builder { margin: 2px 0 0; }
.cluster-node-editor-list { margin-bottom: 12px; display: grid; gap: 9px; }
.cluster-node-editor { padding: 11px; display: grid; grid-template-columns: 28px minmax(130px, .7fr) minmax(220px, 1.3fr) 30px; align-items: end; gap: 10px; background: var(--surface); border-radius: 11px; }
.node-number { width: 27px; height: 27px; align-self: center; display: grid; place-items: center; color: #805025; background: #ffead9; border-radius: 8px; font-size: 11px; font-weight: 800; }
.cluster-node-editor .icon-button { margin-bottom: 7px; }
.add-node { margin-bottom: 10px; }
.check-label { display: flex; align-items: center; align-self: end; min-height: 42px; flex-direction: row; }
.check-label input { width: 16px; min-height: auto; accent-color: var(--orange); }
fieldset { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.admin-list { display: grid; gap: 9px; }
.admin-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.admin-item summary { min-height: 70px; padding: 14px 18px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.admin-item summary::-webkit-details-marker { display: none; }
.admin-item summary:hover { background: #fdfdfd; }
.admin-item summary > span:nth-child(2) { display: grid; gap: 4px; }
.admin-item summary strong { font-size: 13px; }
.admin-item summary small { color: var(--muted); font-size: 10px; }
.visibility, .impact-label { color: var(--muted); font-size: 10px; }
.admin-item > .admin-form, .event-admin-body { padding: 22px; border-top: 1px solid var(--line); }
.form-actions { display: flex; justify-content: space-between; }
.form-danger-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.message-admin-row { margin-top: 9px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.message-admin-row p { margin: 0; color: #4d4d50; font-size: 12px; }
.message-admin-row form { margin: 0; }
.message-admin-copy { display: grid; gap: 5px; }
.message-admin-copy small { color: var(--muted); font-size: 9px; }
.message-state { font-weight: 750; }
.state-active { color: var(--green); }
.state-scheduled { color: #7a5a12; }
.state-expired, .state-disabled { color: #929297; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.icon-button { width: 28px; height: 28px; border: 0; color: var(--muted); background: var(--surface); border-radius: 7px; }
.event-kind { width: 27px; height: 27px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 8px; font-size: 11px; font-weight: 800; }
.event-kind.kind-incident { background: var(--red); }
.event-admin-item summary { grid-template-columns: 27px 1fr auto; }
.event-admin-body { display: grid; gap: 20px; }
.event-admin-body > p { margin: 0; color: var(--muted); font-size: 13px; }
.inline-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; }
.sub-panel { padding: 18px; background: var(--surface); border-radius: 12px; }
.affected-services-form > p { margin: -10px 0 0; color: var(--muted); font-size: 11px; }
.affected-services-form .secondary-button { justify-self: start; }
.cluster-admin-detail { margin: 0; padding: 11px 13px; color: #71522d; background: #fff8ee; border-radius: 10px; font-size: 11px; line-height: 1.5; }
.monitoring-source-admin { padding: 12px 13px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.monitoring-source-admin > strong { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.monitoring-source-admin > div { display: flex; flex-wrap: wrap; gap: 7px; }
.monitoring-source-admin span { padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
.monitoring-source-admin span i { width: 6px; height: 6px; background: #aaaab0; border-radius: 50%; }
.monitoring-source-admin span.status-operational i { background: var(--green); }
.monitoring-source-admin span.status-degraded i { background: var(--amber); }
.monitoring-source-admin span.status-outage i { background: var(--red); }
.probe-diagnostics { padding: 13px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.probe-diagnostics > strong { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.probe-diagnostic { padding: 9px 0; display: grid; grid-template-columns: minmax(100px, .7fr) minmax(155px, 1fr); gap: 4px 12px; border-top: 1px solid var(--line); }
.probe-diagnostic > span { color: var(--muted); font-size: 11px; }
.probe-diagnostic > strong { font-size: 11px; }
.probe-diagnostic > small { grid-column: 2; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.tls-certificate-list { display: grid; gap: 10px; }
.tls-certificate { padding: 18px; border-left: 3px solid var(--green); }
.tls-certificate.tls-warning { border-left-color: var(--amber); }
.tls-certificate.tls-critical { border-left-color: var(--red); }
.tls-certificate-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tls-certificate-heading > div { display: grid; gap: 5px; }
.tls-certificate-heading strong { font-size: 14px; }
.tls-certificate-heading small { color: var(--muted); font-size: 11px; }
.tls-certificate-fields { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; }
.tls-certificate-fields span { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.tls-certificate-fields strong { margin-left: 4px; color: var(--ink); font-weight: 600; }
.tls-certificate-error { margin: 13px 0 0; color: var(--red); font-size: 11px; overflow-wrap: anywhere; }
.event-admin-group { margin-top: 30px; }
.event-admin-heading { margin-bottom: 11px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.event-admin-heading h3 { margin: 0; font-size: 16px; }
.event-admin-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.event-admin-heading > span { min-width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.history-group { margin-top: 48px; }
.admin-empty { margin: 0; padding: 17px 18px; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 12px; font-size: 12px; }
.quick-update-panel { padding: 18px; background: #fff8f2; border: 1px solid #ffe1ca; border-radius: 13px; }
.quick-update-panel > strong { font-size: 13px; }
.quick-update-panel > p { margin: 5px 0 14px; color: var(--muted); font-size: 11px; }
.quick-update-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.quick-update-actions form { margin: 0; }
.quick-update-button { min-height: 34px; padding: 8px 11px; color: #71421d; background: #fff; border: 1px solid #f1c9a8; border-radius: 9px; font-size: 11px; font-weight: 700; }
.quick-update-button:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
.quick-update-button.quick-close { color: #9f2631; border-color: #efc6ca; }
.quick-update-button.quick-close:hover { color: #fff; background: var(--red); border-color: var(--red); }
.admin-thread { padding: 18px 18px 0; border: 1px solid var(--line); border-radius: 13px; }
.admin-thread > strong { font-size: 13px; }
.admin-thread .timeline { margin-top: 18px; }
.event-correction-form { padding-top: 18px; border-top: 1px solid var(--line); }
.notification-delivery { padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.notification-delivery > strong { margin-right: auto; font-size: 12px; }
.notification-delivery > span { padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 750; }
.delivery-sent { color: #14794a; background: #eaf8f1; }
.delivery-failed { color: #a51f2c; background: #fff0f2; }
.delivery-disabled { color: #6e6e73; background: #eaeaed; }
.delivery-pending, .delivery-processing, .delivery-retrying { color: #8a541c; background: #fff3e8; }
.delivery-cancelled { color: #6e6e73; background: #eaeaed; }

/* Santé interne : six indicateurs courts, lisibles sans ouvrir les journaux. */
.health-state { padding: 7px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.health-healthy { color: #14794a; background: #eaf8f1; }
.health-warning, .health-disabled { color: #8a541c; background: #fff3e8; }
.health-critical { color: #a51f2c; background: #fff0f2; }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.health-card { min-height: 116px; padding: 18px; display: flex; flex-direction: column; }
.health-card > span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.health-card > strong { margin-top: 11px; font-size: 19px; }
.health-text-healthy { color: var(--green); }
.health-text-warning, .health-text-disabled { color: var(--amber); }
.health-text-critical { color: var(--red); }
.health-card > small { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.health-error { margin-top: 10px; padding: 15px 18px; }
.health-error summary { cursor: pointer; font-size: 11px; font-weight: 700; }
.health-error code { margin-top: 12px; display: block; color: var(--red); overflow-wrap: anywhere; }

/* Chaque ligne correspond à un job persistant, y compris après un redémarrage. */
.notification-job-list { padding: 0; overflow: hidden; }
.notification-job { padding: 13px 15px; display: grid; grid-template-columns: 145px minmax(180px, 1fr) 70px 190px auto; align-items: center; gap: 12px; }
.notification-job + .notification-job { border-top: 1px solid var(--line); }
.notification-job > span { width: fit-content; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.notification-job > div { min-width: 0; display: grid; gap: 4px; }
.notification-job strong { font-size: 11px; }
.notification-job small, .notification-job time { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.notification-job form { margin: 0; }
.notification-job .secondary-button { min-height: 32px; padding: 7px 9px; }
.notification-job > p { grid-column: 2 / -1; margin: -5px 0 2px; color: var(--red); font-size: 9px; }

/* Écran à usage unique pour l'enrôlement TOTP et les codes de secours. */
.recovery-wrap { width: min(100% - 36px, 760px); margin: 70px auto; }
.recovery-card { padding: clamp(24px, 5vw, 48px); }
.recovery-card h1 { margin: 8px 0 24px; font-size: clamp(25px, 4vw, 38px); }
.recovery-card h2 { margin: 26px 0 9px; font-size: 16px; }
.recovery-warning { padding: 15px 17px; color: #7a4718; background: #fff3e8; border: 1px solid #ffd8b6; border-radius: 12px; }
.recovery-warning p, .totp-setup p { margin: 6px 0 0; line-height: 1.55; font-size: 11px; }
.totp-setup code { margin-top: 10px; display: block; padding: 11px; color: var(--orange-dark); background: var(--surface); border-radius: 8px; overflow-wrap: anywhere; }
.totp-setup details { margin-top: 10px; color: var(--muted); font-size: 11px; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.recovery-code-grid code { padding: 11px 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: 14px; letter-spacing: .08em; }
.recovery-done { margin-top: 22px; display: inline-flex; text-decoration: none; }

/*
 * Thème sombre explicite. Les couleurs d'état restent identiques pour que vert,
 * orange et rouge gardent exactement la même signification métier.
 */
[data-theme="dark"] {
  --orange-dark: #ff9a57;
  --ink: #f4f4f6;
  --muted: #a6a6ae;
  --line: #30333b;
  --surface: #1b1e24;
  --shadow: 0 20px 70px rgba(0, 0, 0, .32);
}
[data-theme="dark"] body,
[data-theme="dark"] .login-page,
[data-theme="dark"] .admin-page { background: #0f1115; }
[data-theme="dark"] .site-header { background: #0f1115; border-bottom-color: rgba(48, 51, 59, .9); }
[data-theme="dark"] .admin-page .site-header { background: #0f1115; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }
[data-theme="dark"] .login-wrap { background: #0f1115; }
[data-theme="dark"] .login-card { background: #15171c; border-color: #30333b; box-shadow: 0 24px 80px rgba(0, 0, 0, .38); }
[data-theme="dark"] .global-card { background: linear-gradient(135deg, #241a15 0%, #15171c 65%); border-color: #3a2c24; }
[data-theme="dark"] .global-card-linked:hover { border-color: #65432e; box-shadow: 0 24px 80px rgba(0,0,0,.42); }
[data-theme="dark"] .global-event-context > p { color: #ff9ba4; }
[data-theme="dark"] .global-affected-services > strong { color: #ff9ba4; background: #2b181c; border-color: #54262d; }
[data-theme="dark"] .service-search,
[data-theme="dark"] .service-group-filters button,
[data-theme="dark"] .service-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .panel,
[data-theme="dark"] .admin-item,
[data-theme="dark"] .message-admin-row,
[data-theme="dark"] .event-admin-heading > span,
[data-theme="dark"] .admin-empty,
[data-theme="dark"] .quick-update-button { background: #15171c; }
[data-theme="dark"] .service-group-filters button { color: var(--muted); }
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .admin-item summary:hover,
[data-theme="dark"] .admin-nav a:hover { background: #191c22; border-color: #3a3d46; }
[data-theme="dark"] .announcement { background: #271d17; border-color: #4c3324; }
[data-theme="dark"] .announcement p { color: #f2b98f; }
[data-theme="dark"] .announcement-info { background: #151f2d; border-color: #263b55; }
[data-theme="dark"] .announcement-info .announcement-label,
[data-theme="dark"] .announcement-info p { color: #86bafa; }
[data-theme="dark"] .announcement-incident { background: #2b181c; border-color: #54262d; }
[data-theme="dark"] .announcement-incident .announcement-label,
[data-theme="dark"] .announcement-incident p { color: #ff8e99; }
[data-theme="dark"] .upcoming-maintenance { background: #211a16; border-color: #4c3324; }
[data-theme="dark"] .upcoming-maintenance-icon { color: #edbd98; background: #322219; }
[data-theme="dark"] .upcoming-maintenance-actions a { color: #edbd98; background: #15171c; border-color: #59402e; }
[data-theme="dark"] .upcoming-maintenance-actions a:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
[data-theme="dark"] .cluster-badge,
[data-theme="dark"] .status-pill.status-degraded,
[data-theme="dark"] .status-pill.status-maintenance { color: #f2bd58; background: #2b2417; }
[data-theme="dark"] .cluster-badge:hover,
[data-theme="dark"] .cluster-badge[aria-expanded="true"] { background: #342918; border-color: #5d4825; }
[data-theme="dark"] .status-pill { color: #61d59a; background: #14271e; }
[data-theme="dark"] .status-pill.status-outage,
[data-theme="dark"] .status-pill.status-partial_outage { color: #ff8994; background: #2b181c; }
[data-theme="dark"] .service-maintenance-notice,
[data-theme="dark"] .affected-services span { color: #ecc57e; background: #282218; border-color: #4d4026; }
[data-theme="dark"] .service-maintenance-notice p { color: #c4a66e; }
[data-theme="dark"] .service-card.has-incident { border-color: #63303a; box-shadow: inset 3px 0 0 rgba(255,98,112,.72); }
[data-theme="dark"] .service-incident-notice { color: #ff9ba4; background: #2b181c; border-color: #54262d; }
[data-theme="dark"] .service-incident-notice p { color: #dc828b; }
[data-theme="dark"] .service-incident-notice a { color: #ff9ba4; }
[data-theme="dark"] .impact-badge.impact-minor,
[data-theme="dark"] .impact-label.impact-minor { color: #b9b9c0; }
[data-theme="dark"] .impact-badge.impact-major,
[data-theme="dark"] .impact-label.impact-major { color: #f2bd58; background: #2b2417; }
[data-theme="dark"] .impact-badge.impact-critical,
[data-theme="dark"] .impact-label.impact-critical { color: #ff8994; background: #2b181c; }
[data-theme="dark"] .impact-badge.impact-blocking,
[data-theme="dark"] .impact-label.impact-blocking { color: #fff; background: #b42332; }
[data-theme="dark"] .uptime-bars .bar-unknown { background: #363941; }
[data-theme="dark"] .uptime-bars .uptime-bar:hover,
[data-theme="dark"] .uptime-bars .uptime-bar:focus-visible { outline-color: #15171c; }
[data-theme="dark"] .cluster-node + .cluster-node { border-top-color: #282b32; }
[data-theme="dark"] .quiet-card { background: #14221b; border-color: #274534; }
[data-theme="dark"] .event-card.event-history { color: #b8b8c0; background: #17191e; border-color: #383b43; }
[data-theme="dark"] .event-history-summary:hover { background: #1e2127; }
[data-theme="dark"] .history-event-main > strong { color: #d1d1d6; }
[data-theme="dark"] .history-event-marker i { background: #73737c; }
[data-theme="dark"] .event-history .impact-badge { color: #b6b6be; background: #292c33; }
[data-theme="dark"] .event-history-content { background: #13151a; border-top-color: #343740; }
[data-theme="dark"] .event-card.event-history:target { border-color: #73737c; box-shadow: 0 0 0 4px rgba(166,166,174,.10), var(--shadow); }
[data-theme="dark"] .calendar-button { color: #edbd98; background: #2b211a; border-color: #59402e; }
[data-theme="dark"] .calendar-button:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
[data-theme="dark"] .support-choices a:hover,
[data-theme="dark"] .service-choice-panel > button:hover { background: #251b15; border-color: #59402e; }
[data-theme="dark"] .support-icon { background: #2b211a; }
[data-theme="dark"] .info-icon { background: #2b211a; }
[data-theme="dark"] .info-explanations section { background: #1b1e24; border-color: #30333b; }
[data-theme="dark"] .history-grid-line { stroke: #30333b; }
[data-theme="dark"] .history-axis-label { fill: #a6a6ae; }
[data-theme="dark"] .history-point,
[data-theme="dark"] .history-availability-point { fill: #15171c; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { color: var(--ink); background: #111318; border-color: #383b44; }
[data-theme="dark"] label,
[data-theme="dark"] .message-admin-row p { color: #d7d7dc; }
[data-theme="dark"] .secondary-button { color: #d7d7dc; }
[data-theme="dark"] .danger-button { color: #ff929c; background: #2b181c; }
[data-theme="dark"] .delivery-sent { color: #61d59a; background: #14271e; }
[data-theme="dark"] .delivery-failed { color: #ff929c; background: #2b181c; }
[data-theme="dark"] .delivery-disabled { color: #a6a6ae; background: #25282f; }
[data-theme="dark"] .delivery-pending,
[data-theme="dark"] .delivery-processing,
[data-theme="dark"] .delivery-retrying { color: #edbd98; background: #2b211a; }
[data-theme="dark"] .delivery-cancelled { color: #a6a6ae; background: #25282f; }
[data-theme="dark"] .health-healthy { color: #61d59a; background: #14271e; }
[data-theme="dark"] .health-warning,
[data-theme="dark"] .health-disabled { color: #edbd98; background: #2b211a; }
[data-theme="dark"] .health-critical { color: #ff929c; background: #2b181c; }
[data-theme="dark"] .recovery-warning { color: #edbd98; background: #2b211a; border-color: #59402e; }
[data-theme="dark"] .form-error { color: #ff9ca5; background: #2d191d; }
[data-theme="dark"] .admin-intro { background: #17191e; border: 1px solid var(--line); }
[data-theme="dark"] .admin-stats div { background: #22252c; }
[data-theme="dark"] .node-number { color: #f0b889; background: #302219; }
[data-theme="dark"] .cluster-admin-detail,
[data-theme="dark"] .quick-update-panel { color: #e8c494; background: #261d17; border-color: #4a3324; }
[data-theme="dark"] .monitoring-source-admin span { background: #15171c; }
[data-theme="dark"] .probe-diagnostics { background: #1b1e24; }
[data-theme="dark"] .quick-update-button { color: #edbd98; border-color: #57402f; }
[data-theme="dark"] .api-access-note { background: #14271e; border-color: #294b38; }
[data-theme="dark"] .api-access-note p { color: #8fc4a5; }
[data-theme="dark"] .api-endpoint { background: #15171c; box-shadow: none; }
[data-theme="dark"] .api-reference-card { background: #15171c; }
[data-theme="dark"] .subscription-card,
[data-theme="dark"] .sla-table-card { background: #15171c; }
[data-theme="dark"] .totp-setup { background: #251d18; border-color: #5a3b25; }
[data-theme="dark"] .totp-setup code { background: #15171c; }
[data-theme="dark"] .subscription-result.success { background: #14271e; border-color: #294b38; }
[data-theme="dark"] .subscription-result.error { background: #2b181c; border-color: #54262d; }
[data-theme="dark"] .api-page pre { background: #0b0d10; border-color: #30333b; }
[data-theme="dark"] .http-method { color: #61d59a; background: #14271e; }

/* Adaptation mobile : les grilles deviennent verticales et les filtres défilent. */
@media (max-width: 760px) {
  .site-header { height: auto; min-height: 70px; padding: 14px 20px; align-items: flex-start; gap: 14px; }
  .site-header nav { overflow-x: auto; }
  .site-header nav a { padding: 8px 9px; white-space: nowrap; font-size: 12px; }
  .site-info-button { padding: 8px 9px; flex: 0 0 auto; font-size: 11px; }
  .report-problem-button { margin-left: 0; padding: 8px 10px; flex: 0 0 auto; white-space: nowrap; font-size: 11px; }
  .header-actions { max-width: calc(100% - 55px); align-items: flex-start; }
  .theme-toggle { margin-top: 1px; }
  .brand { margin-top: 5px; }
  .brand > #brand-title { display: none; }
  .brand-logo { max-width: 118px; height: 30px; }
  .page-shell, .maintenance-page { width: min(100% - 30px, 960px); margin-top: 42px; }
  .api-access-note { margin: 28px 0 45px; padding: 18px; }
  .api-grid { grid-template-columns: 1fr; }
  .api-endpoint { padding: 18px; }
  .api-endpoint-heading { grid-template-columns: auto 1fr; }
  .api-format { display: none; }
  .api-status-list > div { align-items: flex-start; }
  .global-card { min-height: 190px; padding: 28px 23px; gap: 18px; }
  .status-orb { width: 46px; height: 46px; }
  .status-orb span { width: 14px; height: 14px; }
  .global-card h1 { font-size: 24px; }
  .global-event-context { margin-top: 12px; }
  .global-affected-services { align-items: flex-start; }
  .section-heading { margin-top: 48px; }
  .service-card { padding: 21px 18px; }
  .service-topline { flex-direction: column; }
  .metrics-row { grid-template-columns: repeat(3, 1fr); }
  .probe-sources { display: grid; }
  .sla-toolbar { grid-template-columns: 1fr 1fr; }
  .sla-toolbar > div { grid-column: 1 / -1; grid-row: 1; }
  .sla-toolbar > a { grid-row: 2; font-size: 10px; }
  .uptime-bars { gap: 1px; }
  .announcement { align-items: flex-start; flex-direction: column; gap: 6px; }
  .upcoming-maintenance { grid-template-columns: 34px 1fr; }
  .upcoming-maintenance-actions { grid-column: 1 / -1; padding-left: 47px; }
  .service-group-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .service-group-filters button { flex: 0 0 auto; }
  .page-intro { margin-bottom: 50px; }
  .event-card { padding: 21px 17px; }
  .event-history-summary { min-height: 86px; padding: 16px; grid-template-columns: 10px minmax(0, 1fr) 12px; gap: 10px; }
  .event-history-summary .impact-badge { display: none; }
  .history-event-main .event-meta { flex-wrap: wrap; row-gap: 3px; }
  .history-event-main > strong { white-space: normal; }
  .event-history-content { padding: 20px 18px 23px; }
  .site-footer { margin-inline: 15px; }
  .login-card { padding: 30px 24px; }
  .admin-page .site-header { padding-inline: 20px; }
  .admin-shell { width: min(100% - 30px, 900px); margin-top: 25px; display: block; }
  .admin-nav { position: static; margin-bottom: 25px; display: flex; overflow-x: auto; }
  .admin-nav .eyebrow { display: none; }
  .admin-nav a { white-space: nowrap; background: #fff; }
  .admin-intro { padding: 28px; align-items: flex-start; flex-direction: column; }
  .admin-stats { width: 100%; }
  .admin-stats div { flex: 1; min-width: 0; }
  .form-grid, .check-grid, .inline-form, .service-choice-panel { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .form-danger-actions { justify-content: stretch; }
  .form-actions button, .form-danger-actions button { width: 100%; justify-content: center; }
  .cluster-node-editor { grid-template-columns: 28px 1fr 30px; }
  .cluster-node-editor label:nth-of-type(2) { grid-column: 2 / -1; }
  .logo-variant-grid, .logo-form { grid-template-columns: 1fr; }
  .message-admin-row { align-items: start; grid-template-columns: auto 1fr; }
  .message-admin-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .modal { padding: 23px 18px; }
  .info-explanations section { padding: 14px; grid-template-columns: 30px 1fr; gap: 10px; }
  .info-icon { width: 29px; height: 29px; }
  .history-summary { grid-template-columns: 1fr; }
  .subscription-scopes > div { grid-template-columns: 1fr; }
  .subscriber-row { align-items: flex-start; flex-direction: column; }
  .tls-certificate-fields, .probe-diagnostic { grid-template-columns: 1fr; }
  .probe-diagnostic > small { grid-column: 1; }
  .audit-row summary { grid-template-columns: 1fr; gap: 4px; }
  .audit-values { grid-template-columns: 1fr; }
  .admin-section { padding-top: 55px; }
  .health-grid { grid-template-columns: 1fr; }
  .notification-job { grid-template-columns: 1fr auto; }
  .notification-job > span { grid-column: 1; }
  .notification-job > div { grid-column: 1 / -1; }
  .notification-job .notification-attempt, .notification-job time { grid-column: auto; }
  .notification-job > p { grid-column: 1 / -1; margin-top: 0; }
  .recovery-code-grid { grid-template-columns: 1fr; }
}

/* Respecter le réglage d'accessibilité du système sans exception décorative. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }