/* SupervisionAtHome V4 : feuille unique, écrite de zéro. Aucune feuille V3 n'est chargée à côté.
   Grammaire du comparateur de forfaits : une colonne de lecture, onglets texte, Geist, filets fins,
   chiffres en mono, une seule couleur d'accent ; vert / ambre / rouge réservés à l'état. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/geist.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/geist-mono.woff2) format("woff2"); }

:root {
  --bg: #ffffff; --soft: #f6f7f9; --ink: #0f1115; --ink-2: #5b6170; --ink-3: #9096a3; --line: #e7e9ee;
  --accent: #2f4de0; --accent-soft: #eef1fd;
  --good: #11804f; --good-soft: #e7f6ee; --warn: #b26a00; --warn-soft: #fff4e0; --bad: #c62a2f; --bad-soft: #fdecec;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --col: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d0e11; --soft: #16181d; --ink: #eef0f4; --ink-2: #a3a9b6; --ink-3: #6b7180; --line: #23262d;
  --accent: #8ea0ff; --accent-soft: #1b2040; --good: #4fd19a; --good-soft: #10241b; --warn: #f0b04a; --warn-soft: #2a2112; --bad: #ff7a7f; --bad-soft: #2c1517; color-scheme: dark;
}}
:root[data-theme="dark"] {
  --bg: #0d0e11; --soft: #16181d; --ink: #eef0f4; --ink-2: #a3a9b6; --ink-3: #6b7180; --line: #23262d;
  --accent: #8ea0ff; --accent-soft: #1b2040; --good: #4fd19a; --good-soft: #10241b; --warn: #f0b04a; --warn-soft: #2a2112; --bad: #ff7a7f; --bad-soft: #2c1517; color-scheme: dark;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img, canvas, svg { max-width: 100%; }
/* Sans la V3, les icônes SVG n'ont plus de taille : 18 px par défaut, toute règle de classe l'emporte */
:where(svg:not([width])) { width: 18px; height: 18px; flex: none; }
:where(svg.noc-icon, svg[fill="none"]) { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--ink-3); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 300; font-size: clamp(34px, 5.6vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
h1 em, h2 em { font-style: normal; font-weight: 600; }
h2 { font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-weight: 550; font-size: 15px; letter-spacing: -.01em; }
h4 { font-weight: 550; font-size: 14px; }
p { margin: 0; }
small { font-size: 12px; color: var(--ink-3); }
strong, b { font-weight: 550; }
code, kbd, pre, samp { font-family: var(--mono); font-size: 13px; }
pre { margin: 0; padding: 12px 14px; overflow: auto; background: var(--soft); border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-3); font-size: 11px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
ol, ul { margin: 0; padding-left: 20px; }
li + li { margin-top: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }
.hidden, [hidden] { display: none !important; }
.mono, time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow, .ck-kicker { margin: 0; color: var(--ink-3); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }

/* Boutons : pilules à filet ; l'action principale est pleine à l'encre */
button, .button, a.proxmox-access-link, .ck-home-link, .adm-shortcuts button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 450 13px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
button:hover, .button:hover, a.proxmox-access-link:hover { color: var(--ink); border-color: var(--ink-3); }
button:disabled { opacity: .45; cursor: default; }
button[type="submit"], .primary-action, #prepareUpdates, #createPairing, #compareRun, #passkeyRegister, #pushEnable, .adm-welcome button, .feedback-hero-actions button, #oltForm>button, #speedRunNow {
  background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500;
}
button[type="submit"]:hover, .primary-action:hover, #prepareUpdates:hover, #compareRun:hover { color: var(--bg); opacity: .88; }
.danger-action, .update-danger, #orangeRevoke, #revokeAgent { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.danger-action:hover, .update-danger:hover { color: var(--bad); border-color: var(--bad); }
button svg, .button svg { width: 15px; height: 15px; flex: none; }

/* Champs */

:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea) {
  width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: 400 14px/1.4 var(--sans); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink-3); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
label { display: block; color: var(--ink-2); font-size: 13px; }
form label + input, form label + select, form label + textarea { margin-top: 6px; }
label:has(> input[type="checkbox"], > input[type="radio"]) { display: flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; }
/* Interrupteur, comme le comparateur */
.switch-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink); cursor: pointer; }
.switch-line input[type="checkbox"] { appearance: none; position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .2s; }
.switch-line input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.switch-line input[type="checkbox"]:checked { background: var(--accent); }
.switch-line input[type="checkbox"]:checked::after { transform: translateX(12px); }
.switch-line small { display: block; color: var(--ink-3); }
.field-help, .message, .ops-note, .update-disclaimer, .share-retention-note, .access-log-policy, .adm-read-note, .olt-message { margin-top: 6px; color: var(--ink-3); font-size: 12px; }
.message:empty, .olt-message:empty { display: none; }

/* Détails repliables */
details > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; color: var(--ink-2); font-size: 14px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: 12px; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink-3); font-weight: 400; font-size: 12px; letter-spacing: .02em; }
td { color: var(--ink); }
.update-packages, .route-table-wrap, .route-changes-scroll, .capture-table { overflow-x: auto; }

/* Statuts : un point et un mot, jamais une boîte */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status.online, .online > .status { color: var(--good); }
.status.degraded, .status.maintenance { color: var(--warn); }
.status.offline { color: var(--bad); }
.badge, .certificate-badge, .anomaly-badge, .network-path-badge, .shared-probe-badge, .integration-state, .ip-badge, .feedback-ticket-status, .release-version, .ck-badge, .speed-run-state, .olt-summary-verdict, .secondary-path-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 11px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
:is(.certificate-badge, .integration-state, .ip-badge, .ck-badge).ok, .integration-state.configured, .ip-badge.online, .olt-summary-healthy .olt-summary-verdict { background: var(--good-soft); color: var(--good); }
.anomaly-badge, .certificate-badge.warning, .certificate-badge.expiring, .ip-badge.degraded { background: var(--warn-soft); color: var(--warn); }
.certificate-badge.invalid, .ip-badge.offline, .olt-summary-collective .olt-summary-verdict, .olt-summary-individual .olt-summary-verdict { background: var(--bad-soft); color: var(--bad); }
.network-path-badge, .shared-probe-badge { background: var(--accent-soft); color: var(--accent); }

/* ================= Ossature : onglets en haut, une colonne ================= */
.shell { display: block; min-height: 100vh; }
.rail { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 0 max(24px, calc((100vw - var(--col)) / 2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.rail-logo { display: flex; align-items: center; flex: none; margin-right: 4px; color: var(--ink); text-decoration: none; }
.rail-logo img { display: none; }
.rail-logo::after { content: "SupervisionAtHome"; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.rail nav { display: flex; gap: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rail nav::-webkit-scrollbar { display: none; }
.rail nav a { display: block; padding: 15px 0 13px; border-bottom: 1.5px solid transparent; color: var(--ink-3); font-size: 14px; text-decoration: none; white-space: nowrap; }
.rail nav a > span, .rail nav a svg { display: none; }
.rail nav a:hover { color: var(--ink); }
.rail nav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.rail-status { display: none; }
.rail .theme-control { margin-left: auto; }
.logout { min-height: 0; padding: 0; border: 0; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line); }
.logout:hover { color: var(--ink); border: 0; }
.content { max-width: calc(var(--col) + 48px); margin: 0 auto; padding: 44px 24px 120px; min-width: 0; }
footer { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 40px 0 0; color: var(--ink-3); font-size: 12px; }
footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
/* Sélecteur de thème */
.theme-control { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: transparent; }
.theme-control-label, .theme-choice small { display: none; }
.theme-choice { width: 28px; min-height: 26px; height: 26px; padding: 0; border: 0; color: var(--ink-3); }
.theme-choice svg { width: 14px; height: 14px; }
.theme-choice.active { background: var(--ink); color: var(--bg); }
body > .theme-control { position: fixed; right: 16px; top: 12px; z-index: 50; }
@media (max-width: 860px) {
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 70; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); }
  .rail-logo, .rail .theme-control, .logout { display: none; }
  .rail nav { width: 100%; gap: 2px; }
  .rail nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 6px 8px; border: 0; border-radius: 10px; font-size: 11px; }
  .rail nav a > span, .rail nav a svg { display: block; width: 18px; height: 18px; }
  .rail nav a.active { background: var(--soft); }
  .content { padding: 28px max(16px, env(safe-area-inset-left, 0px)) 120px; }
}

/* En-tête de page */
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin-bottom: 36px; }
.topbar > div:first-child { display: grid; gap: 12px; min-width: 0; }
.topbar > div:first-child > p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; max-width: 62ch; }
.top-actions, .proxmox-heading-actions, .adm-top-tools, .identity-theme-slot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.topbar .status { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.topbar .theme-control { display: none; }
@media (max-width: 720px) { .topbar { grid-template-columns: 1fr; } .top-actions, .proxmox-heading-actions, .adm-top-tools { justify-content: flex-start; } .topbar .theme-control { display: inline-flex; } }
.maintenance-toggle > span, .maintenance-toggle small { display: none; }
.maintenance-toggle b { font-weight: 450; }
.maintenance-toggle[aria-pressed="true"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.v4-lede { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.v4-pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); vertical-align: 1px; }
#updatedAt { color: var(--ink-2); font-size: 13px; }

/* Bande de chiffres (accueil, admin, proxmox) */
.hero-grid, .adm-stats, .ops-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:is(.hero-grid, .adm-stats, .ops-values) > * { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 18px 20px 16px; }
:is(.hero-grid, .adm-stats, .ops-values) > * + * { border-left: 1px solid var(--line); }
:is(.hero-grid, .adm-stats, .ops-values) > *:first-child { padding-left: 0; }
.hero-card > div:first-child, .summary-card > div { display: contents; }
:is(.hero-card, .summary-card) span, .adm-stats span, .adm-stats p, .ops-values span { order: 1; color: var(--ink-3); font-size: 12px; letter-spacing: .02em; }
:is(.hero-card, .summary-card) em { order: 3; color: var(--ink-3); font-size: 12px; font-style: normal; }
:is(.hero-card, .summary-card) strong, .adm-stats strong, .ops-values strong { order: 2; color: var(--ink); font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.ops-values strong { font-size: 18px; letter-spacing: -.02em; }
:is(.hero-card, .summary-card) strong :is(span, small) { order: 0; }
:is(.hero-card, .summary-card) strong span { color: inherit; font: inherit; letter-spacing: inherit; }
:is(.hero-card, .summary-card) strong small { margin-left: 3px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; }
.summary-card.v4-warn strong { color: var(--warn); } .summary-card.v4-bad strong { color: var(--bad); }
.summary-icon, .signal-bars, .orb, .identity-stat-mark, .adm-stats svg { display: none; }
@media (max-width: 720px) {
  .hero-grid, .adm-stats, .ops-values { grid-template-columns: 1fr 1fr; }
  :is(.hero-grid, .adm-stats, .ops-values) > * { padding: 14px 12px; }
  :is(.hero-grid, .adm-stats, .ops-values) > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  :is(.hero-grid, .adm-stats, .ops-values) > *:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Titres de section */
.section-head, .panel-head, .admin-card-head, .adm-view-head, .proxmox-network > header, .proxmox-history > header, .proxmox-panel > header, .pve-updates > header, .chart-header {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px;
}
:is(.panel-head, .admin-card-head, .proxmox-network > header, .proxmox-history > header, .proxmox-panel > header, .pve-updates > header) > div:first-child, .admin-card-head > div:first-of-type { display: grid; gap: 6px; min-width: 0; }
:is(h2, h3) > svg, :is(h2, h3) > .noc-icon { display: none; }
:is(.panel-head, .admin-card-head) p:not(.eyebrow), .adm-view-head > p:not(.eyebrow), :is(.proxmox-network, .proxmox-history, .pve-updates) > header p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; max-width: 64ch; }
.adm-view-head { display: grid; gap: 8px; margin-bottom: 28px; }
.adm-view-head h2 { font-size: 34px; }

/* Fenêtres */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(2px); overflow: auto; }
.modal > section, .modal > div:not(.chart-tooltip) { position: relative; width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal h2 { font-size: 26px; }
.modal :is(form, .compact-form) { display: grid; gap: 4px; margin-top: 18px; }
.close-button { position: absolute; top: 18px; right: 18px; width: 36px; min-height: 36px; height: 36px; padding: 0; font-size: 18px; line-height: 1; }
.chart-header .close-button, .ck-shell .close-button { position: static; }
/* Fiche sonde, comparaison, débit : panneaux qui montent du bas */
:is(#chartModal, #compareModal, #speedAtHomeModal) { place-items: end center; padding: 0; }
:is(#chartModal, #compareModal, #speedAtHomeModal) > section { width: 100%; max-width: none; max-height: 90vh; padding: 28px max(20px, calc((100vw - var(--col)) / 2)) calc(env(safe-area-inset-bottom, 0px) + 32px); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; animation: v4-up .3s cubic-bezier(.2,.8,.2,1); }
@keyframes v4-up { from { transform: translateY(24px); opacity: 0; } }
.chart-header { position: sticky; top: -28px; z-index: 5; margin: -28px 0 22px; padding: 28px 0 16px; border-bottom: 1px solid var(--line); background: var(--bg); align-items: start; }
.chart-header > div:first-child { display: grid; gap: 6px; min-width: 0; }
.chart-header h2 { font-size: 30px; }
.chart-header p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; }
.chart-header > div:last-child { display: flex; gap: 8px; align-items: center; }

/* ================= Accueil ================= */
/* Bloc cockpit : sources et accès rapides */
.ck-home { margin: 0 0 48px; }
.ck-home-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ck-home-sources { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ck-home-source { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-2); font-size: 13px; text-decoration: none; }
.ck-home-source i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); align-self: center; }
.ck-home-source.degraded i { background: var(--warn); } .ck-home-source.offline i { background: var(--bad); }
.ck-home-source strong { color: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 500; }
.ck-home-source small, .ck-favorite-paths b small { margin-left: 2px; }
.ck-home-link svg:first-child { display: none; }
.ck-home-caption { color: var(--ink-3); font-size: 13px; }
.ck-home-personal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 0 6px; border-bottom: 1px solid var(--line); }
.ck-home-favorite-label { color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ck-home-personal-head select { width: auto; min-height: 30px; }
.ck-home-personal-head a { color: var(--ink-2); font-size: 13px; }
.ck-home-favorites { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.ck-favorite { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ck-favorite header { display: flex; align-items: baseline; gap: 10px; }
.ck-favorite-icon, .ck-favorite footer { display: none; }
.ck-favorite-count { color: var(--ink-3); font-size: 12px; }
.ck-favorite-paths { display: grid; }
.ck-favorite-paths button { display: grid; grid-template-columns: 44px 1fr auto 14px; align-items: baseline; gap: 10px; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; color: var(--ink-2); text-align: left; }
.ck-path-family { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.ck-path-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.ck-path-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.ck-path-state i.online { background: var(--good); } .ck-path-state i.degraded { background: var(--warn); } .ck-path-state i.offline { background: var(--bad); }
.ck-favorite-paths b { color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 500; }
.ck-path-arrow { color: var(--ink-3); }
.ck-home-details { margin-top: 12px; font-size: 13px; }
.ck-home-details > div { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ck-home-details > div span { display: grid; }
.ck-home-details strong { font-family: var(--mono); font-weight: 500; }
.ck-home-details p { margin-top: 8px; color: var(--ink-3); font-size: 12px; max-width: 70ch; }

/* Sondes : titre, recherche, filtres */
.section-head { position: sticky; top: 49px; z-index: 30; display: grid; justify-content: stretch; align-items: stretch; gap: 14px; margin: 0; padding-top: 6px; background: var(--bg); }
.section-head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head > div:first-child .eyebrow { order: 2; }
.section-copy { display: none; }
.probe-tools { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.probe-search { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.probe-search > span { color: var(--ink-3); }
.probe-search input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 17px; }
.probe-search small { font-family: var(--mono); white-space: nowrap; }
.probe-view-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.filters, .layout-switch, .range-tabs, .compare-ranges, .ck-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
:is(.filters, .layout-switch) button, .range-tabs button { min-height: 0; padding: 4px 11px; border-color: transparent; color: var(--ink-2); }
.filters button.active { border-color: var(--ink); color: var(--ink); }
:is(.layout-switch, .range-tabs) button:is(.active, [aria-pressed="true"]) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.layout-switch button > span, .reorder-actions button > span { display: none; }
.reorder-actions { display: flex; gap: 8px; margin-left: auto; }
.reorder-message { color: var(--ink-3); font-size: 12px; }
.reorder-message:empty { display: none; }
@media (max-width: 860px) { .section-head { position: static; } .section-head > div:first-child .eyebrow { display: none; } }

/* Lignes de sondes */
.probe-groups { display: block; }
.probe-grid, .all-probes-grid { display: block; }
.v4-gh { display: flex; justify-content: space-between; gap: 12px; padding: 22px 0 6px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.v4-gh span:last-child { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.v4-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 170px 96px 32px; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.v4-row:hover, .v4-row:focus-visible { background: linear-gradient(to right, transparent, var(--soft) 6%, var(--soft) 94%, transparent); outline: none; }
.v4-tile { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.v4-tile b { font-weight: 500; }
.v4-tile.has-logo { background: #fff; }
.v4-tile img { width: 30px; height: 30px; object-fit: contain; }
.v4-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 2px var(--bg); }
.v4-dot.online { background: var(--good); } .v4-dot.degraded { background: var(--warn); } .v4-dot.offline { background: var(--bad); }
.v4-row.degraded .v4-tile { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.v4-row.offline .v4-tile { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.v4-row.degraded .v4-tile:not(.has-logo) { background: var(--warn-soft); color: var(--warn); }
.v4-row.offline .v4-tile:not(.has-logo) { background: var(--bad-soft); color: var(--bad); }
.v4-who { min-width: 0; }
.v4-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 550; letter-spacing: -.01em; }
.v4-badge { padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 11px; font-weight: 500; }
.v4-badge.degraded { background: var(--warn-soft); color: var(--warn); } .v4-badge.offline { background: var(--bad-soft); color: var(--bad); }
.v4-badge:is(.accent, .paused, .pending) { background: var(--accent-soft); color: var(--accent); }
.v4-addr { overflow: hidden; color: var(--ink-2); font-family: var(--mono); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.v4-tags { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; color: var(--ink-3); font-size: 12px; }
.v4-ip { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 500; }
.v4-ip i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.v4-ip.degraded i { background: var(--warn); } .v4-ip.offline { color: var(--bad); } .v4-ip.offline i { background: var(--bad); } .v4-ip:is(.paused, .pending) i { background: var(--ink-3); }
.v4-speed { color: var(--accent); font-family: var(--mono); cursor: pointer; }
.v4-lat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.v4-spark { display: block; width: 100%; height: 28px; overflow: visible; }
.v4-spark .v4-area { fill: var(--ink-3); opacity: .12; } .v4-spark .v4-line { fill: none; stroke: var(--ink-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .v4-spark .v4-end { fill: var(--ink-3); }
.v4-spark.degraded :is(.v4-area, .v4-end) { fill: var(--warn); } .v4-spark.degraded .v4-line { stroke: var(--warn); }
.v4-spark.offline :is(.v4-area, .v4-end) { fill: var(--bad); } .v4-spark.offline .v4-line { stroke: var(--bad); }
.v4-lat .v4-v { font-family: var(--mono); font-size: 16px; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
:is(.v4-lat, .v4-up) .v4-v small { margin-left: 2px; font-family: var(--sans); font-size: 11px; letter-spacing: 0; }
.v4-lat .v4-s { grid-column: 1 / -1; color: var(--ink-3); font-size: 11px; }
.v4-up { text-align: right; }
.v4-up .v4-v { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.v4-up .v4-s { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.v4-pick { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--ink-3); }
.v4-pick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.v4-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (max-width: 720px) {
  .v4-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "tile who pick" "tile lat up"; gap: 8px 14px; align-items: start; }
  .v4-tile { grid-area: tile; width: 40px; height: 40px; } .v4-who { grid-area: who; } .v4-pick { grid-area: pick; } .v4-lat { grid-area: lat; } .v4-up { grid-area: up; }
}
.search-empty { display: grid; justify-items: center; gap: 6px; padding: 56px 0; color: var(--ink-2); text-align: center; }
.search-empty strong { color: var(--ink); font-size: 18px; font-weight: 400; }
/* Réorganisation : grille compacte de cartes fines (mode d'édition) */
.is-reordering .probe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding-top: 14px; }
.is-reordering .probe-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: grab; }
.is-reordering .probe-card.dragging { opacity: .4; }
.is-reordering .probe-meta, .is-reordering .spark, .is-reordering .speed-card-link { display: none; }
.is-reordering .probe-head { display: flex; justify-content: space-between; gap: 8px; }
.is-reordering .probe-title-line { display: flex; align-items: center; gap: 8px; }
.is-reordering .operator-logo { width: 32px; height: 20px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.is-reordering .operator-logo img { width: 100%; height: 100%; object-fit: contain; }
.drag-handle { color: var(--ink-3); }
/* Mur de santé */
.health-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding-top: 14px; }
.health-tile { position: relative; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.health-tile > i { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.health-tile.degraded { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); } .health-tile.degraded > i { background: var(--warn); }
.health-tile.offline { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); } .health-tile.offline > i { background: var(--bad); }
.health-tile strong { padding-right: 14px; font-size: 13px; }
.health-tile span { color: var(--ink-3); font-size: 11px; }
.health-tile dl { display: flex; gap: 14px; margin: 0; }
.health-tile dt { color: var(--ink-3); font-size: 11px; } .health-tile dd { margin: 0; font-family: var(--mono); font-size: 13px; }
.health-speed, .health-tile > b { position: absolute; bottom: 10px; right: 12px; color: var(--accent); font-size: 11px; }
.ip-badges { display: flex; flex-wrap: wrap; gap: 4px; }
/* Groupes (dispositions Blocs / Liste) */
.probe-group { margin: 0; }
.probe-group > header:not(.v4-gh) { display: flex; justify-content: space-between; padding: 22px 0 6px; border-bottom: 1px solid var(--line); }
/* Plateau de comparaison */
.v4-tray { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 8px 8px 8px 20px; transform: translateX(-50%); border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 14px; white-space: nowrap; }
.v4-tray button { min-height: 0; padding: 8px 16px; border: 0; background: var(--bg); color: var(--ink); font-weight: 500; }
.v4-tray .v4-tray-clear { padding: 8px; background: transparent; color: var(--bg); opacity: .6; }
.modal:not(.hidden) ~ .v4-tray { display: none; }
@media (max-width: 860px) { .v4-tray { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); } }

/* Journal et santé du NOC */
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; margin-top: 64px; }
@media (max-width: 820px) { .lower-grid { grid-template-columns: 1fr; } }
.panel-head { margin-bottom: 6px; align-items: baseline; }
.panel-head .eyebrow { display: none; }
.panel-head h2 svg { display: none; }
.journal-actions { display: flex; align-items: center; gap: 10px; }
.counter, .live-dot { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.incident-list { border-top: 1px solid var(--line); }
.incident { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.incident-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.incident-mark.online { background: var(--good); } .incident-mark.degraded { background: var(--warn); } .incident-mark.offline { background: var(--bad); }
.incident strong { display: block; font-size: 14px; } .incident span { display: block; color: var(--ink-2); font-size: 13px; }
.incident time { color: var(--ink-3); font-size: 12px; }
.empty, .adm-empty, .ck-empty { padding: 18px 0; color: var(--ink-3); font-size: 13px; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.system-grid > div { display: grid; gap: 4px; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.system-grid > div:nth-child(even) { padding: 14px 0 14px 16px; border-left: 1px solid var(--line); }
.system-grid span { color: var(--ink-3); font-size: 12px; }
.system-grid strong { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.system-grid i { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.system-grid b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink); transition: width .3s; }
.system-grid em { color: var(--ink-3); font-size: 12px; font-style: normal; }

/* ================= Fiche sonde ================= */
.chart-loading { display: grid; min-height: 320px; place-items: center; color: var(--ink-3); font-size: 13px; }
.chart-content { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.chart-content > * { min-width: 0; }
.chart-content > section, .chart-content > details, .chart-content > .olt-summary, #freeboxRouteSection, .probe-incident-history, .probe-route-history { grid-column: 1 / -1; }
.chart-panel { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.chart-label { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.chart-label > div { display: grid; gap: 2px; }
.chart-label span, .latency-summary span { color: var(--ink-3); font-size: 12px; }
.chart-label strong, .latency-summary strong { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.chart-label em, .chart-label small { color: var(--ink-3); font-size: 12px; font-style: normal; }
.latency-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; border-top: 1px solid var(--line); }
.latency-summary > div { display: grid; gap: 2px; padding: 10px 12px 10px 0; }
.latency-summary > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.latency-summary strong { font-size: 20px; }
.path-latency-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: var(--ink-3); font-size: 12px; }
.path-latency-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--accent); }
.path-latency-legend i.freebox { background: var(--good); } .path-latency-legend i.fiveg { background: #a46ad8; }
.canvas-wrap { position: relative; height: 260px; margin-top: 14px; }
.canvas-wrap canvas, .compare-canvas-wrap canvas, .public-canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.chart-tooltip, .canvas-tooltip { position: absolute; z-index: 8; pointer-events: none; min-width: 140px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.12); font-size: 12px; }
.chart-tooltip { transform: translate(-50%, -115%); }
.canvas-tooltip { opacity: 0; transition: opacity .1s; } .canvas-tooltip.visible, .canvas-tooltip[data-visible="true"] { opacity: 1; }
.path-graph-controls, .path-graph-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--ink-2); font-size: 12px; }
.path-graph-switch button { min-height: 28px; padding: 3px 11px; }
.path-graph-switch button.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ip-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; color: var(--ink-2); font-size: 13px; }
.ip-selector label { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ip-selector select { width: auto; min-width: 220px; }
.ip-selector small { color: var(--ink-3); }
#chartModal .range-tabs { margin: 0 0 6px; }
/* Corrélation OLT et chemins secondaires */
.olt-summary { display: grid; gap: 12px; margin-bottom: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.olt-summary-head { display: flex; align-items: center; gap: 12px; }
.olt-summary-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--good-soft); color: var(--good); }
.olt-summary-mark svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.olt-summary:not(.olt-summary-healthy) .olt-summary-mark { background: var(--warn-soft); color: var(--warn); }
.olt-summary-heading { display: grid; gap: 2px; flex: 1; }
.olt-summary-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.olt-path-node { display: flex; align-items: center; gap: 10px; }
.olt-path-icon { color: var(--ink-3); }
.olt-path-icon svg { width: 18px; height: 18px; }
.olt-path-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--good); }
.olt-path-offline .olt-path-state { color: var(--bad); }
.olt-summary-connector { color: var(--ink-3); }
.olt-summary-explanation { color: var(--ink-2); font-size: 13px; }
.olt-summary-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 12px; }
.olt-summary-footer summary { font-size: 12px; text-decoration: underline; text-decoration-color: var(--line); }
.secondary-path-card, .freebox-path-card, #secondaryPathSection, #freeboxPathSection, .orange-path { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.secondary-path-card > header, .freebox-path-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.secondary-path-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink-3); }
.secondary-path-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.secondary-path-metrics > div { display: grid; gap: 2px; padding: 10px 12px 10px 0; }
.secondary-path-metrics > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.secondary-path-metrics span { color: var(--ink-3); font-size: 12px; }
.secondary-path-metrics strong { font-family: var(--mono); font-size: 18px; font-weight: 500; }
@media (max-width: 720px) { .chart-content { grid-template-columns: 1fr; } .secondary-path-metrics { grid-template-columns: 1fr 1fr; } }
/* Incidents et route réseau */
.probe-incident-history, .probe-route-history { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.probe-incident-history > header, .probe-route-history > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
.probe-incident-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.probe-incident-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.probe-incident-item.degraded::before { background: var(--warn); } .probe-incident-item.online::before { background: var(--good); }
.probe-incident-item strong { font-size: 14px; } .probe-incident-item span, .probe-incident-item p { color: var(--ink-2); font-size: 13px; }
.probe-incident-duration { color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: right; }
.probe-incident-duration small { display: block; }
.probe-incidents-empty { color: var(--good); font-size: 13px; }
.route-table td, .route-change-table td { font-family: var(--mono); font-size: 12px; }
.route-hop-changed td { color: var(--warn); }
.mtr-fold, .route-collapsible { border-top: 1px solid var(--line); padding-top: 14px; }
.probe-route-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; color: var(--ink-2); font-size: 13px; }
.probe-route-footer select { width: auto; }
.route-empty { color: var(--ink-3); font-size: 13px; }
.route-asn, .route-asn-paths { color: var(--ink-2); font-size: 12px; }
/* Comparaison */
.compare-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.compare-layout > aside { display: grid; align-content: start; gap: 10px; }
.compare-search input { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding-left: 0; }
#compareTargets { display: grid; max-height: 46vh; overflow: auto; border-top: 1px solid var(--line); }
#compareTargets label { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
#compareTargets i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
#compareTargets i.online { background: var(--good); } #compareTargets i.degraded { background: var(--warn); } #compareTargets i.offline { background: var(--bad); }
#compareTargets span { display: grid; } #compareTargets small { font-size: 12px; }
.compare-result { position: relative; min-height: 440px; }
.compare-canvas-wrap { position: relative; height: 360px; margin-top: 12px; }
.compare-empty { display: grid; place-items: center; min-height: 300px; color: var(--ink-3); text-align: center; }
#compareLegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 820px) { .compare-layout { grid-template-columns: 1fr; } }
/* Débit SpeedAtHome */
.speed-grid, .speed-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:is(.speed-grid, .speed-values) > * { display: grid; gap: 2px; padding: 14px 14px 14px 0; }
:is(.speed-grid, .speed-values) > * + * { padding-left: 14px; border-left: 1px solid var(--line); }
:is(.speed-grid, .speed-values) span { color: var(--ink-3); font-size: 12px; }
:is(.speed-grid, .speed-values) strong { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.speed-history { display: grid; gap: 10px; margin-top: 22px; }
.speed-history canvas { display: block; width: 100%; height: 240px; }
.speed-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--accent); font-size: 12px; cursor: pointer; }
.speed-card-link > b { font-family: var(--mono); font-size: 11px; }
.speed-card-link > em { display: none; }
@media (max-width: 720px) { .speed-grid, .speed-values { grid-template-columns: 1fr 1fr; } }
/* Partage, maintenance, nouveautés, prise en main */
.share-dialog, .release-dialog, .onboarding-dialog, .maintenance-dialog { display: grid; gap: 14px; }
.share-row, .share-result { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.share-row code { display: none; }
.release-top { display: flex; align-items: center; gap: 10px; }
.release-top .close-button { margin-left: auto; position: static; }
.release-kicker { color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.release-lead { color: var(--ink-2); }
.release-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--line); }
.release-highlights article { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.release-highlights p { color: var(--ink-2); font-size: 13px; }
.v3-feature-icon { display: none; }
@media (max-width: 720px) { .release-highlights { grid-template-columns: 1fr; } }

/* ================= Administration ================= */
.adm-topbar { grid-template-columns: minmax(0, 1fr) auto; }
.adm-settings-search { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.adm-settings-search kbd { display: inline-flex; white-space: nowrap; }
.adm-settings-search svg { width: 16px; height: 16px; color: var(--ink-3); }
.adm-settings-search input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.adm-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: grid; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.adm-search-results button { justify-content: flex-start; min-height: 0; padding: 8px 10px; border: 0; border-radius: 8px; text-align: left; white-space: normal; }
.adm-search-results button:hover { background: var(--soft); }
.adm-workspace { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
.adm-navigation { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 90px); overflow: auto; }
.admin-menu { display: grid; gap: 18px; }
.adm-nav-group { display: grid; gap: 1px; }
.adm-nav-group > p { margin-bottom: 4px; color: var(--ink-3); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.admin-menu-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; justify-content: stretch; gap: 10px; min-height: 0; padding: 7px 10px; border: 0; border-radius: 8px; color: var(--ink-2); text-align: left; white-space: normal; }
.admin-menu-item:hover { background: var(--soft); color: var(--ink); }
.admin-menu-item.active { background: var(--soft); color: var(--ink); }
.admin-menu-item > span:last-child { display: grid; gap: 1px; }
.admin-menu-item strong { font-size: 14px; font-weight: 500; }
.admin-menu-item small { font-size: 11px; }
.admin-menu-icon { color: var(--ink-3); } .admin-menu-icon svg { width: 16px; height: 16px; }
.admin-menu-item.active .admin-menu-icon { color: var(--ink); }
.adm-mobile-navigation { display: none; }
@media (max-width: 900px) { .adm-workspace { grid-template-columns: 1fr; gap: 20px; } .adm-navigation { display: none; } .adm-mobile-navigation { display: block; } }
.adm-stage { min-width: 0; }
.adm-view-stack { display: grid; gap: 44px; }
.adm-welcome { display: grid; gap: 12px; }
.adm-welcome > div:first-child { display: grid; gap: 12px; justify-items: start; }
.adm-welcome h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.035em; }
.adm-welcome p { color: var(--ink-2); max-width: 56ch; }
.adm-network-art { display: none; }
.adm-stats { margin: 0; }
.adm-stats article { display: grid; gap: 2px; }
.adm-stats article > p:last-child, .adm-stats small { order: 3; }
.adm-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.adm-shortcuts button { display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; align-items: start; gap: 12px; min-height: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); text-align: left; white-space: normal; }
.adm-shortcuts button:hover { background: linear-gradient(to right, transparent, var(--soft) 8%, var(--soft) 92%, transparent); }
.adm-shortcuts button svg { color: var(--ink-3); }
.adm-shortcuts button span { display: grid; gap: 2px; }
.adm-shortcuts button small { font-size: 12px; color: var(--ink-2); }
@media (max-width: 720px) { .adm-shortcuts { grid-template-columns: 1fr; } }
.adm-pending { padding: 12px 0; border-top: 1px solid var(--line); color: var(--warn); }
.adm-guide { padding-top: 14px; border-top: 1px solid var(--line); }
/* Cartes de réglages : des sections à filet, pas des boîtes */
.admin-card, .manager, .manager-panel { display: grid; gap: 16px; min-width: 0; }
.admin-card { padding-top: 18px; border-top: 1px solid var(--ink); }
.admin-card-head { justify-content: flex-start; }
.admin-card-head > div:first-of-type { flex: 1; }
.admin-card-head > button { margin-left: auto; }
.feature-mark { display: none; }
.admin-card-head h2 { font-size: 22px; }
.admin-card-head h3 { font-size: 17px; font-weight: 500; }
.admin-card + .admin-card { margin-top: 12px; }
.compact-form { display: grid; gap: 4px; max-width: 680px; }
.compact-form > label:not(.switch-line) { margin-top: 10px; }
.compact-form > button, .form-actions { margin-top: 14px; }
.compact-form > button { justify-self: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alert-fields, .report-schedule, .free-sms-fields, .speed-mapping-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; }
:is(.alert-fields, .report-schedule, .free-sms-fields, .speed-mapping-fields) label input, :is(.alert-fields, .report-schedule, .free-sms-fields, .speed-mapping-fields) label select { margin-top: 6px; }
.event-options, .report-switches { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.probe-selection-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.intelligence-note, .bitwarden-guide, .adm-context-note, .push-preview, .host-warning, .manager-note, .ops-vpn, .update-safety { padding: 12px 0 12px 14px; border-left: 2px solid var(--line); color: var(--ink-2); font-size: 13px; }
.adm-context-note > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.host-warning { border-left-color: var(--warn); }
/* Listes gérées : sondes, utilisateurs, partages, journaux */
.managed-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 12px; }
.adm-inventory-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.adm-inventory-toolbar label { flex: 1 1 260px; }
.managed-list, .share-list, .access-log-list, .speed-mapping-list, .free-sms-profiles, .notification-accounts-list, #oltAssociations, #userList, #passkeyList { display: grid; border-top: 1px solid var(--line); }
.managed-category { padding: 18px 0 6px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.managed-row, .share-row, .access-log-row, .speed-mapping-row, .free-sms-profile, .notification-account, #oltAssociations > article {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
:is(.managed-row, .share-row, .access-log-row, .speed-mapping-row, .free-sms-profile, #oltAssociations > article) > div:first-child { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
:is(.managed-row, .share-row, .speed-mapping-row, .free-sms-profile) small, :is(.managed-row, .share-row) span { color: var(--ink-3); font-size: 12px; }
.managed-row strong, .share-row strong { font-weight: 550; }
.managed-row :is(button, select) { min-height: 30px; }
.managed-row select { width: auto; }
.managed-row.is-secondary-disabled { color: var(--ink-2); }
.share-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-managed { display: grid; border-bottom: 1px solid var(--line); }
.ip-managed > header, .ip-managed > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0 4px; font-weight: 550; }
.ip-managed .managed-row { padding-left: 16px; border-bottom: 0; border-top: 1px dashed var(--line); }
.adm-pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.adm-create-probe { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adm-create-probe > summary { color: var(--ink); font-weight: 500; }
.adm-create-layout { display: grid; gap: 14px; }
.adm-secondary-settings { padding: 12px 0; border-top: 1px solid var(--line); }
.notification-account header { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 8px; font-weight: 550; }
.notification-service { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; }
.notification-service.configured { color: var(--good); }
.orange-selection { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; max-height: 320px; overflow: auto; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.orange-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.olt-role { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.olt-create { padding: 12px 0; border-top: 1px solid var(--line); }
.report-last { color: var(--ink-2); font-size: 13px; }
.access-log-summary { display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--ink-2); font-size: 13px; }
.access-log-row time { display: inline; color: var(--ink-3); font-size: 12px; }
.tutorial-card { border-top: 0; }

/* ================= Proxmox ================= */
.proxmox-host-selector { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 40px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proxmox-host-selector > div { display: grid; gap: 4px; }
.proxmox-host-selector label { color: var(--ink); font-size: 16px; font-weight: 500; }
.proxmox-host-selector p:not(.eyebrow) { color: var(--ink-2); font-size: 13px; }
.proxmox-host-selector select { width: min(360px, 100%); }
.pve-updates, .proxmox-agent-setup, .proxmox-unavailable { display: grid; gap: 16px; margin-bottom: 48px; padding-top: 18px; border-top: 1px solid var(--ink); }
.pve-updates h2 { font-size: 24px; }
.update-safety { display: flex; flex-wrap: wrap; gap: 6px 16px; border-left-color: var(--good); }
.update-safety span, .update-safety b { color: var(--good); font-size: 12px; font-weight: 500; }
#updateSummary { color: var(--ink-2); font-size: 14px; }
.ops-preflight { display: grid; gap: 14px; }
.ops-preflight h3 { font-size: 17px; font-weight: 500; }
.ops-values { margin: 0; }
.update-actions, .agent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.update-error { color: var(--bad); font-size: 13px; }
.update-packages th { position: sticky; top: 0; background: var(--bg); }
.agent-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.agent-steps article { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.agent-command { display: grid; gap: 8px; }
.agent-security { color: var(--ink-2); font-size: 13px; }
.proxmox-hero { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); margin-bottom: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proxmox-hero > article { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 20px 16px; }
.proxmox-hero > article + article { border-left: 1px solid var(--line); }
.proxmox-hero > article:first-child { padding-left: 0; }
.proxmox-node-card h2 { font-size: 24px; font-weight: 500; }
.proxmox-node-card p:not(.eyebrow) { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.proxmox-mark, .proxmox-node-card svg { display: none; }
.proxmox-metric span { color: var(--ink-3); font-size: 12px; }
.proxmox-metric strong { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -.04em; }
.proxmox-metric small, .proxmox-metric em { color: var(--ink-3); font-size: 12px; font-style: normal; }
.proxmox-metric i { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.proxmox-metric i b { display: block; height: 100%; background: var(--ink); }
@media (max-width: 820px) { .proxmox-hero { grid-template-columns: 1fr 1fr; } .proxmox-hero > article:nth-child(odd) { padding-left: 0; border-left: 0; } .proxmox-hero > article:nth-child(n+3) { border-top: 1px solid var(--line); } }
.proxmox-network, .proxmox-history, .proxmox-columns, .proxmox-panel { display: grid; gap: 16px; margin-bottom: 48px; }
.proxmox-network-grid { display: grid; grid-template-columns: 200px 200px minmax(0, 1fr); gap: 0 28px; border-top: 1px solid var(--line); }
.network-rate { display: grid; align-content: start; gap: 2px; padding: 14px 0; }
.network-rate span { color: var(--ink-3); font-size: 12px; }
.network-rate strong { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.network-chart { position: relative; padding: 14px 0; }
.network-chart canvas { display: block; width: 100%; height: 140px; }
:is(.network-chart, .proxmox-chart-grid article, .guest-chart-grid article) footer { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--ink-3); font-size: 12px; }
:is(.network-chart, .proxmox-chart-grid article, .guest-chart-grid article) footer i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--accent); }
@media (max-width: 820px) { .proxmox-network-grid { grid-template-columns: 1fr 1fr; } .network-chart { grid-column: 1 / -1; } }
.proxmox-chart-grid, .guest-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.proxmox-chart-grid > article, .guest-chart-grid > article { position: relative; min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.proxmox-chart-grid canvas { display: block; width: 100%; height: 220px; margin-top: 8px; }
.guest-chart-grid canvas { display: block; width: 100%; height: 200px; margin-top: 8px; }
.guest-chart-message { display: grid; min-height: 240px; place-items: center; color: var(--ink-3); font-size: 13px; }
@media (max-width: 820px) { .proxmox-chart-grid, .guest-chart-grid { grid-template-columns: 1fr; } }
.guest-grid { display: grid; border-top: 1px solid var(--line); }
.guest-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "state metrics" "name metrics"; align-items: center; gap: 2px 24px; min-height: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); text-align: left; white-space: normal; }
.guest-card:hover { background: linear-gradient(to right, transparent, var(--soft) 6%, var(--soft) 94%, transparent); }
.guest-card header { grid-area: state; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.guest-card header i { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-family: var(--sans); font-style: normal; }
.guest-card header i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.guest-card.stopped header i { color: var(--ink-3); }
.guest-card h3 { grid-area: name; font-size: 15px; }
.guest-card > div { grid-area: metrics; display: flex; gap: 28px; }
.guest-card > div span { display: grid; gap: 1px; min-width: 64px; color: var(--ink-3); font-size: 11px; text-align: right; }
.guest-card > div strong { color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 500; }
@media (max-width: 720px) { .guest-card { grid-template-columns: 1fr; grid-template-areas: "state" "name" "metrics"; } .guest-card > div span { text-align: left; } }
.guest-detail-head { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); background: var(--bg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Administration : inventaire des sondes ---- */
.adm-create-probe > summary { gap: 10px; }
.adm-create-probe > summary svg { width: 16px; height: 16px; }
.adm-create-probe > summary span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adm-create-probe > summary small { font-weight: 400; }
.adm-inventory-toolbar label { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.adm-inventory-toolbar label svg { width: 16px; height: 16px; color: var(--ink-3); }
.adm-inventory-toolbar input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
#admInventoryInfo { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
#managedList > .managed-row, .ip-managed > .managed-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.managed-row > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.managed-row > div { display: grid; gap: 2px; min-width: 0; }
.managed-row > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-row > div small { color: var(--ink-3); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-row > div em { margin-left: 8px; color: var(--warn); font-size: 12px; font-style: normal; font-weight: 400; }
.managed-row.is-secondary-disabled > div small::after { content: ""; }
.ip-managed > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0 6px; }
.ip-managed > header select { width: auto; min-height: 30px; font-family: var(--mono); font-size: 12px; }
.ip-managed > .managed-row { padding-left: 0; border-top: 0; }
/* Menu « Actions » d'une sonde */
.probe-actions-menu { position: relative; }
.probe-actions-menu > summary { min-height: 30px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.probe-actions-menu > summary::before { display: none; }
.probe-actions-menu > summary span { color: var(--ink-3); }
.probe-actions-menu[open] > summary { margin: 0; border-color: var(--ink-3); color: var(--ink); }
.probe-actions-menu > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; width: 330px; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.probe-actions-menu > div button { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; justify-content: stretch; gap: 10px; min-height: 0; padding: 8px; border: 0; border-radius: 8px; color: var(--ink); text-align: left; white-space: normal; }
.probe-actions-menu > div button:hover { background: var(--soft); }
.probe-actions-menu > div button > b { color: var(--ink-3); font-family: var(--mono); font-size: 11px; font-weight: 500; text-align: center; line-height: 1.6; }
.probe-actions-menu > div button > span { display: grid; gap: 1px; }
.probe-actions-menu > div button strong { font-size: 13px; font-weight: 500; }
.probe-actions-menu > div button small { font-size: 12px; }
.probe-actions-menu > div button:is(.reset-history, .delete-target, .danger-action) strong { color: var(--bad); }

/* ================= Changelog ================= */
.changelog { display: grid; }
.changelog-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; margin-bottom: 36px; }
.changelog-hero > div:first-child { display: grid; gap: 12px; }
.changelog-hero h2 { font-size: clamp(34px, 5.6vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
.changelog-hero h2 br + * , .changelog-hero h2 { font-weight: 300; }
.changelog-hero p:not(.eyebrow) { color: var(--ink-2); max-width: 60ch; }
.version-card { display: grid; justify-items: end; gap: 2px; text-align: right; }
.version-card span { color: var(--ink-3); font-size: 12px; letter-spacing: .14em; }
.version-card strong { font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -.04em; }
.version-card small { font-size: 12px; }
.identity-theme-slot:empty { display: none; }
.release { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.release-meta { display: grid; align-content: start; gap: 4px; }
.release-meta span { justify-self: start; padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 11px; font-weight: 500; }
.release-meta time { color: var(--ink); font-size: 13px; }
.release-meta small { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.release-content { display: grid; gap: 8px; max-width: 70ch; }
.release-content h3 { font-size: 17px; font-weight: 550; }
.release-content p, .release-content li { color: var(--ink-2); font-size: 14px; }
@media (max-width: 720px) { .changelog-hero, .release { grid-template-columns: 1fr; } .version-card { justify-items: start; text-align: left; } }

/* ================= Cockpit ================= */
.ck-shell { max-width: calc(var(--col) + 48px); margin: 0 auto; padding: 32px 24px 120px; }
.ck-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 12px; margin-bottom: 32px; }
.ck-hero-copy { display: grid; gap: 12px; }
.ck-back { justify-self: start; color: var(--ink-2); font-size: 13px; text-decoration: none; }
.ck-back:hover { color: var(--ink); }
.ck-hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.ck-private { padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ck-hero-copy > p:last-child { color: var(--ink-2); }
.ck-tabs { display: flex; gap: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ck-tabs button { min-height: 0; padding: 12px 0 11px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; color: var(--ink-3); font-size: 14px; }
.ck-tabs button svg, .ck-tabs small { display: none; }
.ck-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }
.ck-status-line { display: flex; gap: 10px; align-items: baseline; margin: 12px 0 32px; color: var(--ink-3); font-size: 12px; }
.ck-status-label { letter-spacing: .14em; }
.ck-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ck-section-head > div { display: grid; gap: 8px; }
.ck-section-head p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; }
.ck-auto { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.ck-weather { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ck-source { display: grid; align-content: start; gap: 12px; padding: 18px 20px; }
.ck-source + .ck-source { border-left: 1px solid var(--line); }
.ck-source:first-child { padding-left: 0; }
.ck-source > header { display: flex; align-items: center; gap: 10px; }
.ck-source-icon { color: var(--ink-3); }
.ck-source > header > div { display: grid; gap: 2px; }
.ck-badge { justify-self: start; }
.ck-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ck-badge.healthy { background: var(--good-soft); color: var(--good); }
.ck-badge:is(.stale, .partial) { background: var(--warn-soft); color: var(--warn); }
.ck-badge:is(.offline, .failed) { background: var(--bad-soft); color: var(--bad); }
.ck-source-reading { display: grid; gap: 2px; }
.ck-metric-label, .ck-metric-caption { color: var(--ink-3); font-size: 12px; }
.ck-metric { font-family: var(--mono); font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
.ck-metric small { margin-left: 4px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; }
.ck-collection > div:first-child { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; }
.ck-collection strong { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.ck-progress { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--ink); }
.ck-progress span { display: none; }
.ck-source dl { display: grid; gap: 4px; margin: 0; }
.ck-source dl div { display: flex; justify-content: space-between; font-size: 13px; }
.ck-source dt { color: var(--ink-3); } .ck-source dd { margin: 0; font-family: var(--mono); }
.ck-source footer { justify-content: space-between; padding: 0; font-size: 12px; }
.ck-source footer strong { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.ck-context { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 28px; padding-left: 0; color: var(--ink-2); font-size: 13px; }
.ck-context-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); font-size: 12px; }
.ck-context h3 { margin-bottom: 4px; }
.ck-scroll { display: grid; border-top: 1px solid var(--line); }
.ck-scroll > article, .ck-timeline > article, .ck-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ck-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.ck-dot:is(.online, .recovery, .ok) { background: var(--good); } .ck-dot:is(.degraded, .latency, .warning) { background: var(--warn); } .ck-dot:is(.offline, .outage, .failed) { background: var(--bad); }
.ck-scroll p, .ck-timeline p { color: var(--ink-2); font-size: 13px; }
.ck-note { display: flex; gap: 8px; margin-bottom: 14px; }
.ck-settings, .ck-card { display: grid; gap: 16px; }
.ck-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ck-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-inline input, .ck-inline select { flex: 1 1 200px; width: auto; }
.ck-group { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
#ckTargetChoices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; max-height: 300px; overflow: auto; }
.ck-choice span { display: grid; } .ck-choice small { font-size: 11px; }
@media (max-width: 820px) { .ck-hero { grid-template-columns: 1fr; } .ck-weather { grid-template-columns: 1fr; } .ck-source + .ck-source { border-left: 0; border-top: 1px solid var(--line); } .ck-source { padding-left: 0; } }

/* ================= Fiabilité ================= */
.reliability-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reliability-kpis article { display: grid; gap: 2px; padding: 18px 20px 16px; }
.reliability-kpis article + article { border-left: 1px solid var(--line); }
.reliability-kpis article:first-child { padding-left: 0; }
.reliability-kpis span { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }
.reliability-kpis strong { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.reliability-kpis small { font-size: 12px; }
.reliability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.reliability-wide { margin-bottom: 44px; }
.reliability-list, .dr-latest, .dr-list, .slo-list, .ops-links, .ops-audit { display: grid; border-top: 1px solid var(--line); }
.reliability-row, .dr-report, .slo-row, .ops-link, .ops-audit-row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.reliability-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dr-report > header, .ops-link > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-weight: 550; }
.dr-report > div { display: inline-flex; gap: 8px; color: var(--ink-2); }
.dr-report { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dr-report > header { grid-column: 1 / -1; }
.dr-report.failed > header { color: var(--bad); }
.dr-history { padding-top: 12px; }
.dr-list { max-height: 420px; overflow: auto; }
.storage-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.storage-kpis > div { display: grid; gap: 2px; padding: 14px 14px 14px 0; }
.storage-kpis > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.storage-kpis span { color: var(--ink-3); font-size: 12px; } .storage-kpis strong { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.storage-policy, .storage-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.ops-link .ops-values { margin: 6px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops-audit-row pre { max-height: 240px; }
.slo-row { grid-template-columns: minmax(180px, 1fr) 2fr; align-items: center; }
.slo-title { display: grid; gap: 2px; }
.slo-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.slo-windows > div { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); }
meter { width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--line); }
meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 999px; background: var(--line); }
meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--good); }
meter::-webkit-meter-suboptimum-value { border-radius: 999px; background: var(--warn); }
meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--bad); }
@media (max-width: 820px) { .reliability-grid, .slo-row { grid-template-columns: 1fr; } .storage-kpis, .dr-report { grid-template-columns: 1fr 1fr; } .reliability-kpis { grid-template-columns: 1fr; } .reliability-kpis article + article { border-left: 0; border-top: 1px solid var(--line); } .reliability-kpis article { padding-left: 0; } }

/* ================= Rapports ================= */
.report-studio { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 44px; margin-bottom: 48px; }
.report-selector { display: grid; gap: 16px; align-content: start; }
.report-section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.report-section-title > div { display: grid; gap: 6px; }
.report-mode { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.report-mode button { display: grid; grid-template-columns: 22px minmax(0, 1fr); justify-content: stretch; align-items: start; gap: 2px 10px; min-height: 0; padding: 14px 12px; border: 0; border-radius: 0; color: var(--ink-2); text-align: left; white-space: normal; }
.report-mode button + button { border-left: 1px solid var(--line); }
.report-mode button > span { grid-row: 1 / 3; color: var(--ink-3); }
.report-mode button strong { color: var(--ink); font-weight: 500; }
.report-mode button small { font-size: 12px; }
.report-mode button.active { background: var(--soft); }
.report-mode button.active > span { color: var(--ink); }
.report-selection-tools { display: grid; gap: 12px; }
.report-selection-tools.muted-selection { opacity: .5; }
.report-target-search { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.report-target-search input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.report-category-filters { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.report-category-filters button { min-height: 0; padding: 4px 11px; border-color: transparent; }
.report-category-filters button.active { border-color: var(--ink); color: var(--ink); }
.report-select-actions { display: flex; gap: 8px; }
.report-target-list { display: grid; max-height: 420px; overflow: auto; border-top: 1px solid var(--line); }
.report-target-list label { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.report-target-list label span { display: grid; } .report-target-list small { font-size: 12px; }
.report-compose { display: grid; gap: 16px; align-content: start; }
/* L'aperçu de couverture reste une page de document, posée sur la page */
.pdf-cover-preview { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #0f1115; box-shadow: 0 10px 30px rgba(0,0,0,.08); aspect-ratio: 1 / 1.3; align-content: start; }
.pdf-cover-brand { display: flex; align-items: center; gap: 8px; }
.pdf-cover-brand i { width: 10px; height: 10px; border-radius: 3px; background: #2f4de0; }
.pdf-cover-brand strong { font-weight: 600; } .pdf-cover-brand span { color: #2f4de0; }
.pdf-cover-preview p { color: #9096a3; font-size: 11px; letter-spacing: .14em; }
.pdf-cover-preview h2 { color: #0f1115; font-size: 26px; font-weight: 300; }
.pdf-cover-scope { display: grid; color: #5b6170; font-size: 13px; }
.pdf-cover-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e7e9ee; }
.pdf-cover-metrics div { display: grid; gap: 2px; padding: 10px 0; }
.pdf-cover-metrics span { color: #9096a3; font-size: 10px; letter-spacing: .1em; }
.pdf-cover-metrics strong { color: #0f1115; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.pdf-cover-preview footer { justify-content: flex-start; margin-top: auto; padding: 0; color: #9096a3; font-size: 11px; }
.report-telegram-choice span { display: grid; } .report-telegram-choice small { font-size: 12px; }
.report-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
@media (max-width: 860px) { .report-studio, .report-bottom-grid { grid-template-columns: 1fr; } }

/* ================= Feedback ================= */
.feedback-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; margin-bottom: 40px; }
.feedback-hero-copy { display: grid; gap: 12px; }
.feedback-hero-copy > p:not(.eyebrow) { color: var(--ink-2); max-width: 60ch; }
.feedback-hero-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-3); font-size: 12px; }
.feedback-hero-actions { display: grid; justify-items: end; gap: 8px; }
.feedback-hero-count { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.feedback-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.feedback-toolbar > div:first-child { display: grid; gap: 6px; }
.feedback-toolbar p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; }
.feedback-filters { display: flex; align-items: center; gap: 10px; }
.feedback-filters select { width: auto; }
.feedback-workspace { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: 40px; min-height: 420px; }
.feedback-list { display: grid; align-content: start; max-height: 740px; overflow: auto; }
.feedback-list > * { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.feedback-list > button { justify-content: stretch; min-height: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); white-space: normal; }
.feedback-list > :is(.active, [aria-current="true"]) { background: var(--soft); }
.feedback-detail-panel { display: grid; gap: 16px; align-content: start; padding-top: 12px; }
.feedback-empty-state, .feedback-empty { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 260px; color: var(--ink-3); text-align: center; }
.feedback-empty-state h2 { font-size: 22px; }
.feedback-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.feedback-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.feedback-file-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-notice { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: min(380px, calc(100% - 40px)); padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
@media (max-width: 860px) { .feedback-hero, .feedback-workspace, .feedback-form-grid { grid-template-columns: 1fr; } .feedback-hero-actions { justify-items: start; } }

/* ================= Connexion ================= */
.auth-screen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 400px); align-items: center; gap: 64px; max-width: calc(var(--col) + 48px); min-height: 100vh; margin: 0 auto; padding: 48px 24px; }
.auth-intro { display: grid; gap: 28px; }
.auth-intro > div:nth-child(2) { display: grid; gap: 14px; }
.auth-intro h1 br + * { font-weight: 600; }
.auth-intro p:not(.eyebrow) { color: var(--ink-2); max-width: 46ch; }
.auth-logo { display: flex; align-items: center; color: var(--ink); }
.auth-logo img { display: none; }
.auth-logo::after { content: "SupervisionAtHome"; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.auth-points { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-3); font-size: 12px; }
.auth-points span::before { content: "·"; margin-right: 8px; }
.auth-card { display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid var(--ink); }
.auth-card > div:first-child, .auth-card form > div:first-child { display: grid; gap: 8px; }
.auth-card h2 { font-size: 28px; }
.auth-card p:not(.eyebrow) { color: var(--ink-2); font-size: 14px; }
.auth-card form { display: grid; gap: 4px; }
.auth-card form > label:not(.switch-line) { margin-top: 10px; }
.auth-card form > button { width: 100%; min-height: 42px; margin-top: 10px; }
.passkey-button span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.secure-note { color: var(--ink-3); font-size: 12px; }
.auth-card a + a { margin-left: 14px; }
.auth-card p a { color: var(--ink); }
.session-loading { display: grid; min-height: 100vh; place-items: center; color: var(--ink-3); font-size: 13px; }
@media (max-width: 860px) { .auth-screen { grid-template-columns: 1fr; gap: 32px; } }

/* ================= Page publique de partage ================= */
.public-shell { max-width: calc(var(--col) + 48px); margin: 0 auto; padding: 40px 24px 100px; }
.public-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.public-logo { display: flex; color: var(--ink); text-decoration: none; }
.public-logo img { display: none; }
.public-logo::after { content: "SupervisionAtHome"; font-weight: 600; font-size: 15px; }
.public-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin: 40px 0 32px; }
.public-hero > div { display: grid; gap: 10px; }
.share-probe-title { display: flex; align-items: center; gap: 12px; }
.share-probe-logo { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.share-probe-logo img { width: 30px; height: 30px; object-fit: contain; }
.public-chip { padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 12px; }
.public-metrics, .public-latency-summary, .public-speed-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:is(.public-metrics, .public-latency-summary, .public-speed-metrics) > * { display: grid; gap: 2px; padding: 16px 16px 14px 0; }
:is(.public-metrics, .public-latency-summary, .public-speed-metrics) > * + * { padding-left: 16px; border-left: 1px solid var(--line); }
:is(.public-metrics, .public-latency-summary, .public-speed-metrics) span { color: var(--ink-3); font-size: 12px; }
:is(.public-metrics, .public-latency-summary, .public-speed-metrics) strong { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.public-canvas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 20px; }
.public-canvas-grid article, .public-chart { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.public-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.public-canvas-wrap { position: relative; height: 240px; margin-top: 10px; }
.share-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.share-source-card { display: grid; gap: 6px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.share-source-icon { color: var(--ink-3); }
.public-incident-list { display: grid; border-top: 1px solid var(--line); }
.public-incident-list > * { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.public-loading { display: grid; min-height: 60vh; place-items: center; color: var(--ink-3); }
@media (max-width: 720px) { .public-hero, .public-canvas-grid { grid-template-columns: 1fr; } }

/* ================= V4 · nouvelle structure (barre des espaces, phrase d'état, deux colonnes) ================= */
:root { --s-vm: #2f4de0; --s-fb: #11804f; --s-5g: #a24bd3; }
:root[data-theme="dark"] { --s-vm: #8ea0ff; --s-fb: #4fd19a; --s-5g: #d08cf3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s-vm: #8ea0ff; --s-fb: #4fd19a; --s-5g: #d08cf3; } }
.v4-wrap { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.v4-app { min-height: 100vh; }
.v4-app.hidden { display: none; }
.v4-quiet { color: var(--ink-3); }
.v4-btn { min-height: 32px; padding: 5px 14px; font-size: 13px; }
.v4-btn small { display: none; }
.v4-link { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 12px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.v4-link:hover { color: var(--ink); border: 0; }
.v4-mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.v4-mark.up { background: var(--good); } .v4-mark.warn { background: var(--warn); } .v4-mark.down { background: var(--bad); }

/* Barre des espaces */
.v4-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.v4-bar-in { display: flex; align-items: center; gap: 22px; height: 56px; }
.v4-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.v4-brand svg { width: 22px; height: 22px; }
.v4-spaces { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.v4-spaces a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--ink-3); font-size: 14px; text-decoration: none; white-space: nowrap; }
.v4-spaces a:hover { color: var(--ink); }
.v4-spaces a[aria-current="page"] { background: var(--soft); color: var(--ink); }
.v4-spaces small { padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-family: var(--mono); font-size: 10px; }
.v4-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.v4-tools .theme-control { position: static; }
.v4-account { position: relative; }
.v4-account > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; }
.v4-account > summary::before, .v4-account > summary::-webkit-details-marker { display: none; }
.v4-account[open] > summary { margin: 0; }
.v4-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; width: 230px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.v4-menu p { padding: 8px 10px; color: var(--ink-3); font-size: 12px; }
.v4-menu a, .v4-menu button { justify-content: flex-start; min-height: 0; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--ink); font-size: 13px; text-align: left; text-decoration: none; }
.v4-menu a:hover, .v4-menu button:hover { background: var(--soft); }
.v4-menu .hidden { display: none; }
@media (max-width: 760px) {
  .v4-spaces { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; justify-content: space-around; padding: 8px max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
  .v4-brand span { display: none; }
  .v4-app { padding-bottom: 70px; }
}

/* Phrase d'état et ruban 24 h */
.v4-state { display: grid; gap: 22px; padding-block: 44px 28px; }
.v4-state h1 { max-width: 22ch; font-size: clamp(34px, 5.4vw, 58px); }
.v4-state h1 b { font-weight: 600; }
.v4-state h1 .n { font-family: var(--mono); font-weight: 400; letter-spacing: -.06em; }
.v4-state-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: var(--ink-2); font-size: 13px; }
.v4-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); }
.v4-kpi b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.v4-kpi b small { margin-left: 1px; font-family: var(--sans); color: var(--ink-3); }
.v4-sources { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.v4-sources span { display: inline-flex; align-items: baseline; gap: 6px; }
.v4-sources i { width: 8px; height: 2px; border-radius: 2px; align-self: center; }
.v4-sources b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.v4-state-actions { margin-left: auto; display: flex; gap: 8px; }
.v4-state-actions #maintenanceToggle > span { display: none; }
.v4-state-actions #maintenanceToggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.v4-ribbon { display: grid; gap: 6px; }
.v4-ribbon-cells { display: grid; grid-template-columns: repeat(48, 1fr); gap: 2px; height: 30px; }
.v4-ribbon-cells i { border-radius: 2px; background: var(--good); opacity: .85; }
.v4-ribbon-cells i.w { background: var(--warn); } .v4-ribbon-cells i.b { background: var(--bad); }
.v4-ribbon-cells i:hover { opacity: 1; outline: 1px solid var(--ink); }
.v4-ribbon-legend { display: flex; justify-content: space-between; color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
@media (max-width: 640px) { .v4-ribbon-cells { grid-template-columns: repeat(24, 1fr); } .v4-ribbon-cells i:nth-child(odd) { display: none; } }

/* Deux colonnes */
.v4-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-block: 12px 120px; }
.v4-main { min-width: 0; }
@media (max-width: 1000px) { .v4-grid { grid-template-columns: 1fr; } }
.v4-tools-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 20; display: grid; gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.v4-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.v4-find { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.v4-find svg { width: 16px; height: 16px; color: var(--ink-3); }
.v4-find input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.v4-find small { font-family: var(--mono); white-space: nowrap; }
.v4-seg { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.v4-seg button { min-height: 0; padding: 4px 11px; border: 0; color: var(--ink-2); }
.v4-seg button:is(.active, [aria-pressed="true"]) { background: var(--ink); color: var(--bg); }
.v4-seg button[hidden] { display: none; }
.v4-tools-bar .filters button { display: inline-flex; gap: 6px; }
.v4-tools-bar .reorder-actions { margin-left: auto; }
/* Les accès rapides (cockpit.js) deviennent des sondes épinglées */
.v4-main > .ck-home { margin: 0 0 30px; }
@media (max-width: 760px) { .v4-tools-bar { top: env(safe-area-inset-top, 0px); } }

/* Colonne de droite */
.v4-aside { display: grid; gap: 36px; align-content: start; }
.v4-side-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.v4-side-h h2 { font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.v4-side-h h2 svg { display: none; }
.v4-aside .journal-actions { display: inline-flex; gap: 12px; align-items: baseline; }
.v4-aside .incident-list { border-top: 0; }
.v4-aside .incident { grid-template-columns: 10px minmax(0, 1fr) auto; font-size: 13px; }
.v4-aside .incident strong { font-size: 13px; } .v4-aside .incident span { font-size: 12px; }
.v4-speed { display: grid; grid-template-columns: 1fr 1fr; }
.v4-speed div { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.v4-speed div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.v4-speed span { color: var(--ink-3); font-size: 12px; }
.v4-speed b { font-family: var(--mono); font-size: 19px; font-weight: 500; }
.v4-speed b small { margin-left: 3px; font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
.v4-aside .system-grid { grid-template-columns: 1fr; border-top: 0; }
.v4-aside .system-grid > div, .v4-aside .system-grid > div:nth-child(even) { grid-template-columns: 1fr auto; padding: 10px 0; border-left: 0; }
.v4-aside .system-grid span { font-size: 13px; color: var(--ink-2); }
.v4-aside .system-grid strong { font-size: 13px; font-weight: 500; text-align: right; margin: 0; }
.v4-aside .system-grid i { grid-column: 1 / -1; height: 3px; }

/* ================= Fiche sonde : pleine page ================= */
#chartModal { place-items: start stretch; padding: 0; background: var(--bg); backdrop-filter: none; overflow: auto; }
#chartModal > section { width: 100%; max-width: none; max-height: none; min-height: 100vh; padding: 0 0 80px; border: 0; border-radius: 0; box-shadow: none; animation: none; }
#chartModal > section > * { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
#chartModal .chart-header { position: sticky; top: 0; z-index: 6; margin: 0 auto 0; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); }
#chartModal .chart-header > div:first-child::before { content: "Réseau  /  Sonde"; color: var(--ink-3); font-size: 12px; white-space: pre; }
#chartModal .chart-header h2 { font-size: clamp(28px, 4vw, 42px); }
#chartModal .chart-header .eyebrow { display: none; }
#chartModal .close-button { width: auto; height: auto; min-height: 32px; padding: 5px 14px; border-radius: 999px; font-size: 13px; }
#chartModal .close-button::before { content: "← Retour au réseau"; }
#chartModal .close-button { font-size: 0; } #chartModal .close-button::before { font-size: 13px; }
#chartModal .range-tabs { margin: 18px auto 0; padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#chartModal .chart-content { margin-top: 24px; }

.v4-main > .ck-home .ck-home-sources { display: none; }
.v4-main > .ck-home .ck-home-toolbar { justify-content: flex-end; border-bottom: 0; padding-bottom: 0; }

/* ================= Composants communs des espaces ================= */
.v4-page { min-height: 100vh; }
.v4-subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 18; display: flex; gap: 20px; margin: 0 0 6px; border-bottom: 1px solid var(--line); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.v4-subnav button { flex: none; min-height: 0; padding: 11px 0 10px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; color: var(--ink-3); font-size: 14px; }
.v4-subnav button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.v4-subnav button[hidden] { display: none; }
.v4-panel { padding: 18px 0 100px; }
.v4-tools-sub { top: calc(env(safe-area-inset-top, 0px) + 98px); margin-bottom: 4px; }
.v4-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.v4-two > section { min-width: 0; }
@media (max-width: 880px) { .v4-two { grid-template-columns: 1fr; } }
.v4-sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--ink); }
.v4-sec-h h2 { font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.v4-sec-h h2 svg { display: none; }
.v4-gap { margin-top: 36px; }
.v4-note { margin: 8px 0 14px; color: var(--ink-3); font-size: 13px; max-width: 70ch; }
.v4-foot { justify-content: flex-start; padding-bottom: 40px; }
/* Journal */
.v4-day-h { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 8px; border-bottom: 1px solid var(--line); }
.v4-ev { display: grid; grid-template-columns: 52px 10px minmax(0, 1fr) 96px auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.v4-ev time { color: var(--ink-3); font-size: 12px; }
.v4-ev-who { display: grid; gap: 1px; min-width: 0; }
.v4-ev-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.v4-ev-who span { color: var(--ink-2); font-size: 12px; }
.v4-ev-dur { text-align: right; } .v4-ev-dur b { display: block; font-family: var(--mono); font-weight: 500; font-size: 14px; } .v4-ev-dur small { font-size: 11px; }
.v4-ev.live { background: linear-gradient(to right, transparent, var(--soft) 5%, var(--soft) 95%, transparent); }
.v4-ev.live .v4-ev-dur small { color: var(--bad); }
@media (max-width: 720px) { .v4-ev { grid-template-columns: 44px 10px minmax(0, 1fr) auto; } .v4-ev .v4-link { display: none; } }
.v4-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.v4-confirm[hidden] { display: none; }
/* Rubriques réemployées : maintenances, secours, stockage, PDF */
.v4-panel .reliability-form { max-width: none; }
.v4-panel .storage-kpis { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.v4-panel .storage-policy { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; margin-top: 16px; }
.v4-panel .storage-policy label { display: grid; gap: 6px; }
.v4-panel .storage-policy small { color: var(--ink-3); }
.v4-panel .storage-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.v4-panel .reliability-primary { margin: 6px 0 4px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v4-panel .reliability-subtitle { margin: 22px 0 6px; font-size: 14px; font-weight: 550; }
.v4-panel .report-studio { margin-top: 6px; }
.v4-panel .report-bottom-grid .admin-card-head .feature-mark { display: none; }
.v4-panel .report-export-button { width: 100%; justify-content: center; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v4-panel .report-export-button span { display: none; }
.v4-panel .report-badge { padding: 1px 9px; border-radius: 999px; background: var(--soft); font-size: 11px; }

/* ================= Infrastructure ================= */
.v4-subtab { flex: none; padding: 11px 0 10px; border-bottom: 1.5px solid transparent; color: var(--ink-3); font-size: 14px; text-decoration: none; }
.v4-subtab[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.v4-subtab[hidden], .v4-subnav[hidden] { display: none; }
.v4-infra { padding-top: 22px; }
.v4-infra > section + section, .v4-infra #proxmoxDashboard > section + section { margin-top: 0; }
/* Hôte : tout sauf les machines, les mises à jour et le connecteur */
body[data-xtab="host"] .v4-infra :is(#pveUpdates, #proxmoxSetup), body[data-xtab="host"] .proxmox-columns > .proxmox-panel:first-child { display: none !important; }
body[data-xtab="host"] .proxmox-columns { grid-template-columns: 1fr; }
/* Machines : la liste des VM/CT seulement */
body[data-xtab="machines"] .v4-infra :is(#pveUpdates, #proxmoxSetup, .proxmox-hero, .proxmox-network, .proxmox-history), body[data-xtab="machines"] .proxmox-columns > .proxmox-panel:nth-child(2) { display: none !important; }
/* Mises à jour */
body[data-xtab="maj"] .v4-infra :is(#proxmoxDashboard, #proxmoxSetup) { display: none !important; }
/* Connecteur : l'installation de l'agent, toujours visible pour l'admin */
body[data-xtab="connecteur"] .v4-infra :is(#proxmoxDashboard, #pveUpdates, .proxmox-host-selector) { display: none !important; }
body[data-xtab="connecteur"] .v4-infra #proxmoxSetup.hidden { display: grid !important; }
.v4-infra .proxmox-columns { display: grid; grid-template-columns: 1fr; gap: 0; }
.v4-infra .proxmox-panel > header, .v4-infra .proxmox-network > header, .v4-infra .proxmox-history > header, .v4-infra .pve-updates > header { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--ink); }
.v4-infra .eyebrow { display: none; }
.v4-infra h2 { font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.v4-infra .proxmox-node-card > div { display: flex; gap: 10px; }
.v4-infra .pve-mark { display: none; }
.v4-infra .proxmox-node-card strong { font-size: 14px; color: var(--good); }
.v4-infra .proxmox-node-card small { color: var(--ink-3); }
.v4-infra .storage-list { display: grid; border-top: 1px solid var(--line); }
.v4-infra .storage-list > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.v4-access .access-panel, .v4-access .access-section { display: grid; gap: 14px; margin-bottom: 40px; }
.v4-access .access-panel > header, .v4-access .access-section > header { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.v4-access .access-panel .eyebrow, .v4-access .access-section .eyebrow, .v4-access .access-icon { display: none; }
.v4-access h2 { font-size: 18px; font-weight: 550; }
.v4-access .access-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.v4-access .access-fields label { display: grid; gap: 6px; }
.v4-access .permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.v4-access .permission-grid label { padding: 10px 0; border-bottom: 1px solid var(--line); }
.v4-access .permission-grid span { display: grid; } .v4-access .permission-grid small { font-size: 12px; }
.v4-access .access-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-access .access-danger { color: var(--bad); }
.v4-access .access-hint, .v4-access .access-message { color: var(--ink-3); font-size: 12px; }
.v4-access .access-machine-grid, .v4-access .access-scroll { display: grid; border-top: 1px solid var(--line); }
.v4-access .access-machine-grid > *, .v4-access .access-scroll > * { padding: 12px 0; border-bottom: 1px solid var(--line); }
.v4-access dialog { max-width: 520px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); }
.v4-access dialog::backdrop { background: color-mix(in srgb, var(--ink) 30%, transparent); }

.v4-state.topbar { display: grid; grid-template-columns: 1fr; align-items: start; margin: 0 auto; }
.v4-state.topbar > div:last-child:not(.v4-state-sub) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v4-state.topbar .proxmox-access-link { min-height: 32px; padding: 5px 14px; }

/* ================= Réglages ================= */
.v4-admin .shell { display: none; }
.v4-admin:not(.v4-built) #v4SetGroups::before { content: "Chargement…"; color: var(--ink-3); }
.v4-set-find { max-width: 560px; }
.v4-set-group { margin-bottom: 30px; }
.v4-set-group[hidden], .v4-srow[hidden] { display: none; }
.v4-set-gh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.v4-srow { border-bottom: 1px solid var(--line); }
.v4-sline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 20px; padding: 14px 0; }
.v4-sname { font-size: 15px; }
.v4-sval { color: var(--ink-3); font-size: 13px; text-align: right; }
.v4-srow.open .v4-sname { font-weight: 550; }
.v4-sedit { padding: 4px 0 28px; }
.v4-sedit > * { margin: 0; padding: 0; border: 0; }
/* l'en-tête de carte répète le nom de la ligne : on ne garde que ses commandes (ex. « Nouveau profil » SMS) */
.v4-sedit .admin-card-head:not(:has(button, input, select, a)) { display: none; }
.v4-sedit .admin-card-head { justify-content: flex-end; margin-bottom: 8px; }
.v4-sedit .admin-card-head > :not(button, label, select, input, a):not(:has(button, input, select, a)) { display: none; }
.v4-sedit .admin-card, .v4-sedit .manager, .v4-sedit .manager-panel { border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .v4-sline { grid-template-columns: 1fr auto; } .v4-sval { grid-column: 1; grid-row: 2; text-align: left; } .v4-sline .v4-link { grid-row: 1 / 3; grid-column: 2; } }
.v4-card { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--soft); }
.v4-card > header { display: flex; justify-content: space-between; align-items: center; }
.v4-card h2 { font-size: 16px; font-weight: 550; }
.v4-todo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.v4-todo .v4-link { margin-left: auto; }
.v4-todo-empty { color: var(--ink-3); }
.v4-pending { margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bg); color: var(--warn); font-size: 13px; }
.v4-channels { display: grid; gap: 6px; }
.v4-channels div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.v4-channels b { font-weight: 550; } .v4-channels em { color: var(--ink-3); font-size: 12px; font-style: normal; }
.v4-guide .adm-guide { padding: 0; border: 0; }

/* Listes à l'intérieur des éditeurs de réglages : pastille · texte · actions */
.v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row, .share-row) { display: grid; grid-auto-flow: column; grid-template-columns: 32px minmax(0, 1fr); grid-auto-columns: auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row) > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); font-family: var(--mono); font-size: 11px; }
.v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row, .share-row) > div { display: grid; gap: 3px; min-width: 0; }
.v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row, .share-row) > div > :is(strong, small, em) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4-sedit :is(.access-log-row, .speed-mapping-row, .share-row) > div > :is(small, em) { color: var(--ink-3); font-size: 12px; font-style: normal; }
.v4-sedit .access-log-row time { color: var(--ink-3); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.v4-sedit :is(.managed-row, .speed-mapping-row, .share-row) button { min-height: 30px; padding: 0 12px; }
.v4-sedit .share-row > div:first-child { grid-column: 1 / 3; }
.v4-sedit .access-log-summary { gap: 6px 28px; margin-bottom: 8px; }
.v4-sedit .access-log-summary article { display: flex; align-items: baseline; gap: 8px; }
.v4-sedit .access-log-summary strong { color: var(--ink); font-family: var(--mono); font-size: 18px; font-weight: 500; }
@media (max-width: 640px) { .v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row, .share-row) { grid-auto-flow: row; grid-template-columns: 32px minmax(0, 1fr); } .v4-sedit :is(.managed-row, .access-log-row, .speed-mapping-row, .share-row) > :nth-child(n+3) { grid-column: 2; justify-self: start; } }
.v4-sedit .share-row-actions { flex-wrap: nowrap; justify-content: flex-end; }

/* ================= Mon espace : tuiles ================= */
.v4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v4-me .v4-state-sub { flex-wrap: wrap; }
.v4-me-sync { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; color: var(--ink-3); font-size: 12px; }
.v4-me-sync .v4-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.v4-me-sync svg { width: 14px; height: 14px; }
.v4-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 64px; }
.v4-bento > .v4-card { align-content: start; min-width: 0; padding: 20px; }
.v4-bento > .v4-card.wide { grid-column: 1 / -1; }
.v4-bento > .v4-card[hidden] { display: none; }
.v4-bento .v4-card > header { gap: 12px; }
.v4-bento .v4-card h2 { font-size: 17px; letter-spacing: -.01em; }
.v4-bento .v4-note { margin: 0; font-size: 12px; }
.v4-mini-select select { width: auto; min-height: 30px; padding: 3px 28px 3px 10px; font-size: 12px; background-color: var(--bg); }
.v4-me-acts { display: inline-flex; gap: 8px; }
.v4-bento .v4-btn:not(.ink) { background: var(--bg); }
a.v4-btn { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }

/* Sources : trois pastilles sur fond de page, lecture en un coup d'œil */
.v4-me .ck-weather { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
.v4-me .ck-source { gap: 10px; padding: 16px; border-radius: 12px; background: var(--bg); }
.v4-me .ck-source + .ck-source { border-left: 0; }
.v4-me .ck-source:first-child { padding-left: 16px; }
.v4-me .ck-source-icon { display: none; }
.v4-me .ck-source > header { position: relative; padding-left: 18px; }
.v4-me .ck-source > header::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--s-vm); }
.v4-me .ck-source-freebox > header::before { background: var(--s-fb); }
.v4-me .ck-source-5g > header::before { background: var(--s-5g); }
.v4-me .ck-source h3 { font-size: 14px; font-weight: 550; }
.v4-me .ck-kicker { font-size: 10px; letter-spacing: .12em; }
.v4-me .ck-metric { font-size: 34px; }
.v4-me .ck-progress { display: none; }
.v4-me .ck-source dl, .v4-me .ck-source footer { font-size: 12px; }
.v4-me-more { font-size: 13px; }
.v4-me-more > summary { color: var(--ink-2); cursor: pointer; }
.v4-me-more .ck-context { margin-top: 12px; }

/* Notifications et chronologie : listes compactes qui défilent dans la tuile */
.v4-me-scroll { max-height: 340px; overflow: auto; border-top: 0; display: grid; gap: 6px; align-content: start; }
.v4-me-scroll > .ck-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bg); }
.v4-me-scroll > .ck-row:has(.ck-dot) { grid-template-columns: 8px minmax(0, 1fr); }
.v4-me-scroll .ck-row .ck-dot { margin-top: 6px; }
.v4-me-scroll .ck-row > div { display: grid; gap: 2px; min-width: 0; }
.v4-me-scroll .ck-row strong { font-size: 13px; font-weight: 550; }
.v4-me-scroll .ck-row p { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.v4-me-scroll .ck-row small { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.v4-me-scroll .ck-badge { font-size: 11px; white-space: nowrap; }
.ck-badge:is(.blocked) { background: var(--bad-soft); color: var(--bad); }
.ck-badge:is(.queued, .grouped) { background: var(--warn-soft); color: var(--warn); }
.ck-badge:is(.accepted) { background: var(--good-soft); color: var(--good); }
.v4-me .ck-dot.speedtest { background: var(--s-vm); } .v4-me .ck-dot.note { background: var(--ink); } .v4-me .ck-dot.maintenance { background: var(--s-5g); }
.v4-me .ck-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin: 0; }
.v4-me .ck-note label { display: grid; gap: 4px; color: var(--ink-3); font-size: 12px; }
.v4-me .ck-note textarea { min-height: 38px; resize: vertical; background: var(--bg); }
.v4-me .ck-note .ck-help { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: 11px; }

/* Machines et tickets */
.v4-me-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v4-me-list > li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.v4-me-list > li.v4-quiet { display: block; background: none; padding: 4px 0; }
.v4-me-list span:not(.v4-mark) { display: grid; min-width: 0; }
.v4-me-list b { overflow: hidden; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.v4-me-list b a { color: inherit; text-decoration: none; }
.v4-me-list small { color: var(--ink-3); font-size: 12px; }
.v4-me-list em { color: var(--ink-3); font-size: 12px; font-style: normal; }

/* Mon accueil */
.v4-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v4-chip { padding: 5px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; }
.v4-chips-k { margin: 0 4px 0 12px; color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.v4-me-prefs { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.v4-me-prefs[hidden] { display: none; }
.v4-me .ck-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.v4-me .ck-card { padding: 16px; border-radius: 12px; background: var(--bg); }
.v4-me .ck-card h3 { font-size: 14px; font-weight: 550; }
@media (max-width: 900px) { .v4-bento, .v4-me .ck-weather, .v4-me .ck-settings { grid-template-columns: 1fr; } .v4-me-sync { margin-left: 0; } }
.v4-btn.ink, .v4-bento .v4-btn.ink { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.v4-btn.ink:hover { opacity: .88; }
.v4-me #ckSave[hidden] { display: none; }

/* ================= Connexion ================= */
.v4-login { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; gap: 56px; max-width: 1080px; min-height: 100vh; margin: 0 auto; padding: 96px 24px 48px; border: 0; }
.v4-login.hidden { display: none; }
.v4-login-brand { position: absolute; top: 28px; left: 24px; }
.v4-login-copy { display: grid; gap: 20px; }
.v4-login-copy h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 300; line-height: 1.02; letter-spacing: -.04em; }
.v4-login-copy h1 b { font-weight: 600; }
.v4-login-copy p { max-width: 42ch; color: var(--ink-2); font-size: 16px; }
.v4-login-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v4-login-points li { padding: 5px 12px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 12px; }
.v4-login-card { display: grid; gap: 18px; padding: 28px; border-radius: 22px; background: var(--soft); }
.v4-login-card form { display: grid; gap: 6px; }
.v4-login-card form.hidden { display: none; }
.v4-login-card h2 { margin-bottom: 8px; font-size: 22px; font-weight: 550; letter-spacing: -.01em; }
.v4-login-card label { margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.v4-login-card input:not([type="checkbox"]) { min-height: 42px; background: var(--bg); }
.v4-login-remember { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0 6px; color: var(--ink); }
.v4-login-remember small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.v4-login-card .v4-btn { width: 100%; min-height: 44px; justify-content: center; border-radius: 12px; font-size: 14px; }
.v4-login-card .passkey-button.v4-btn { background: var(--bg); }
.v4-login-card .v4-link { justify-self: center; margin-top: 8px; font-size: 13px; }
.v4-login-card .v4-link.hidden { display: none; }
.v4-login-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 8px 0; color: var(--ink-3); font-size: 12px; }
.v4-login-or::before, .v4-login-or::after { content: ""; height: 1px; background: var(--line); }
.v4-login-secure { margin: 0; color: var(--ink-3); font-size: 11px; text-align: center; }
@media (max-width: 860px) { .v4-login { grid-template-columns: 1fr; gap: 32px; padding-top: 88px; align-content: start; } }

/* ================= Changelog ================= */
.v4-releases { display: grid; gap: 10px; padding-bottom: 72px; }
.v4-releases .release { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding: 22px 24px; border: 0; border-radius: 18px; background: var(--soft); }
.v4-releases .release-meta span { background: var(--bg); }
.v4-releases .release-meta time { font-family: var(--mono); font-size: 12px; }
.v4-releases .release-meta small { color: var(--ink-3); font-size: 10px; }
.v4-releases .release-content h3 { font-size: 18px; letter-spacing: -.01em; }
.v4-releases .release-content p { line-height: 1.6; }
@media (max-width: 720px) { .v4-releases .release { grid-template-columns: 1fr; gap: 10px; padding: 18px; } }

/* ================= Feedback ================= */
.v4-fb-acts { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; }
.v4-fb-acts .v4-quiet { font-family: var(--mono); font-size: 12px; }
.v4-fb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v4-fb-tags li { padding: 4px 11px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 12px; }
.v4-fb { display: grid; gap: 16px; padding-bottom: 72px; }
.v4-fb .feedback-toolbar { padding: 0; border: 0; }
.v4-fb .feedback-toolbar .eyebrow { display: none; }
.v4-fb .feedback-toolbar h2 { font-size: 20px; font-weight: 550; }
.v4-fb .feedback-workspace { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.4fr); gap: 16px; }
.v4-fb .feedback-list-panel, .v4-fb .feedback-detail-panel { padding: 14px; border-radius: 18px; background: var(--soft); }
.v4-fb .feedback-detail-panel { padding: 22px; }
.v4-fb .feedback-list { gap: 6px; }
.v4-fb .feedback-list > * { padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); }
.v4-fb .feedback-list > :is(.active, [aria-current="true"]) { outline: 1px solid var(--ink-3); background: var(--bg); }
.v4-feedback #feedbackCompose .feedback-compose-dialog { width: min(640px, calc(100vw - 32px)); padding: 26px; border-radius: 22px; background: var(--soft); }
.v4-feedback .feedback-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.v4-feedback .feedback-consent small { display: block; color: var(--ink-3); font-size: 12px; }
.v4-feedback .feedback-file-picker { padding: 14px; border: 1px dashed var(--ink-3); border-radius: 12px; }
@media (max-width: 860px) { .v4-fb .feedback-workspace { grid-template-columns: 1fr; } .v4-fb-acts { margin-left: 0; } }

/* ================= Partage public ================= */
.v4-public-chip { padding: 4px 11px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 12px; }
.v4-public .v4-bar-in { gap: 16px; }
.v4-public .v4-tools { margin-left: auto; }
.v4-public .public-shell { max-width: none; padding: 0 24px 72px; }
.v4-public .public-hero { margin: 44px 0 26px; }
.v4-public .share-probe-title { gap: 16px; }
.v4-public .share-probe-title .eyebrow { display: none; }
.v4-public #publicName { font-size: clamp(32px, 5vw, 54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.v4-public .share-probe-title p { color: var(--ink-2); font-size: 14px; }
.v4-public .share-hero-state { display: grid; justify-items: end; gap: 6px; }
.v4-public .share-hero-state small { color: var(--ink-3); font-size: 12px; }
.v4-public #publicState { padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.v4-public .public-metrics, .v4-public .share-source-grid, .v4-public .public-speed-metrics { gap: 12px; margin-bottom: 12px; border: 0; }
.v4-public .public-metrics > *, .v4-public .share-source-card, .v4-public .public-speed-metrics > * { padding: 18px; border: 0; border-radius: 16px; background: var(--soft); }
.v4-public .public-metrics > * + * { border-left: 0; padding-left: 18px; }
.v4-public .share-stat-head { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; }
.v4-public .share-stat-head i, .v4-public .share-source-icon { display: none; }
.v4-public .public-metrics strong { font-size: 34px; }
.v4-public .public-metrics em, .v4-public .share-source-card footer { color: var(--ink-3); font-size: 12px; font-style: normal; }
.v4-public .share-source-card header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.v4-public .share-source-card header p { color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
.v4-public .share-source-card h2 { font-size: 15px; font-weight: 550; }
.v4-public .share-source-card > strong { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.v4-public .share-source-card footer { display: flex; justify-content: space-between; padding: 0; }
.v4-public .share-source-status { color: var(--ink-3); font-size: 12px; }
.v4-public .share-source-card[data-source="main"] h2::before, .v4-public .share-source-card[data-source="freebox"] h2::before, .v4-public .share-source-card[data-source="mobile"] h2::before { content: ""; display: inline-block; width: 10px; height: 2px; margin: 0 8px 4px 0; border-radius: 2px; background: var(--s-vm); }
.v4-public .share-source-card[data-source="freebox"] h2::before { background: var(--s-fb); }
.v4-public .share-source-card[data-source="mobile"] h2::before { background: var(--s-5g); }
.v4-public :is(.public-speedathome, .public-chart, .public-incidents, .public-route) { margin-top: 12px; padding: 22px; border: 0; border-radius: 18px; background: var(--soft); }
.v4-public :is(.public-speedathome, .public-incidents, .public-route) > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 14px; }
.v4-public :is(.public-speedathome, .public-chart, .public-incidents, .public-route) .eyebrow { display: none; }
.v4-public :is(.public-speedathome, .public-chart, .public-incidents, .public-route) h2 { font-size: 18px; font-weight: 550; }
.v4-public :is(.public-speedathome, .public-incidents, .public-route) header p { color: var(--ink-3); font-size: 13px; }
.v4-public .public-speed-metrics > * { background: var(--bg); }
.v4-public .public-canvas-grid article { padding: 16px; border: 0; border-radius: 14px; background: var(--bg); }
.v4-public .public-latency-summary { margin-bottom: 4px; border: 0; }
.v4-public .public-latency-summary > * { padding: 0 16px 0 0; }
.v4-public .public-latency-summary strong { font-size: 20px; }
.v4-public .public-incident-list { gap: 6px; border: 0; }
.v4-public .public-incident-list > * { padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); }
.v4-public .public-expiry, .v4-public-foot { margin: 22px 0 0; color: var(--ink-3); font-size: 12px; text-align: center; }
.v4-public-foot { margin-top: 8px; }
@media (max-width: 720px) { .v4-public .public-hero { grid-template-columns: 1fr; } .v4-public .share-hero-state { justify-items: start; } .v4-public-chip { display: none; } }
.v4-fb .feedback-ticket { display: grid; gap: 6px; width: 100%; text-align: left; white-space: normal; }
.v4-fb :is(.feedback-ticket-top, .feedback-ticket-bottom) { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; }
.v4-fb .feedback-ticket strong { font-size: 14px; font-weight: 550; }
.v4-fb .feedback-ticket em { font-style: normal; }
.v4-fb .feedback-ticket-status { padding: 1px 9px; border-radius: 999px; background: var(--soft); font-size: 11px; }
.v4-fb .feedback-ticket-status.open, .v4-fb .feedback-ticket-status.in_progress { background: var(--warn-soft); color: var(--warn); }
.v4-fb .feedback-ticket-status.closed { background: var(--good-soft); color: var(--good); }
.v4-fb .feedback-empty-state > span { display: none; }
.v4-public .share-heading-icon { display: none; }
.v4-public .public-incident { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.v4-public .public-incident > i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.v4-public .public-incident.offline > i { background: var(--bad); }
.v4-public .public-incident > div { display: grid; gap: 2px; }
.v4-public .public-incident > div:last-child { justify-items: end; }
.v4-public .public-incident strong { font-weight: 550; }
.v4-public .public-incident span { color: var(--ink-3); font-size: 12px; }
.v4-public .public-incident > div:last-child strong { font-family: var(--mono); font-weight: 500; }

/* Connexion par SSO (formulaire remplacé par app.js quand /auth/sso/config est actif) */
.v4-login-card .sso-login { display: grid; gap: 16px; }
.v4-login-card .sso-login::before { content: "Connexion"; font-size: 22px; font-weight: 550; letter-spacing: -.01em; }
.v4-login-card .sso-intro { margin: 0; color: var(--ink-2); font-size: 14px; }
.v4-login-card .sso-connect { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border: 1px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 550; }
.v4-login-card .sso-connect svg { width: 18px; height: 18px; }
.v4-login-card .sso-caption { margin: -4px 0 0; color: var(--ink-3); font-size: 12px; text-align: center; }
.v4-login-card .sso-links { display: flex; justify-content: center; gap: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.v4-login-card .sso-links a { color: var(--ink-2); font-size: 13px; text-decoration: none; }
.v4-login-card .sso-links a:hover { color: var(--ink); }
.sso-account-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sso-account-actions :is(a, button) { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font-size: 12px; text-decoration: none; }
.sso-account-actions svg { width: 14px; height: 14px; }

/* Fenêtre « Nouveautés » */
.v4-release { width: min(560px, calc(100vw - 32px)); padding: 28px; border-radius: 22px; background: var(--soft); }
.v4-release h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 300; line-height: 1.08; letter-spacing: -.03em; }
.v4-release h2 b { font-weight: 600; }
.v4-release-spaces { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; }
.v4-release-spaces li { display: grid; grid-template-columns: 28px 120px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; counter-increment: s; }
.v4-release-spaces li::before { content: counter(s, decimal-leading-zero); color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.v4-release-spaces strong { font-weight: 550; }
.v4-release-spaces span { color: var(--ink-2); }
.v4-release .release-actions { display: flex; align-items: center; gap: 18px; }
@media (max-width: 560px) { .v4-release-spaces li { grid-template-columns: 24px minmax(0, 1fr); } .v4-release-spaces span { grid-column: 2; } }

/* Mises à jour : retour après « Préparer la mise à jour » */
.v4-update-note { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.v4-update-note.ok { border-left-color: var(--good); color: var(--ink); }
.v4-update-note.bad { border-left-color: var(--bad); color: var(--bad); }
#prepareUpdates[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Mises à jour : fenêtre de confirmation (installation / redémarrage) en carte */
#updateConfirmDialog > .update-confirm { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 26px 28px 24px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
#updateConfirmDialog .update-confirm > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 0; }
#updateConfirmDialog .update-confirm .eyebrow { display: inline-flex; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
#updateConfirmDialog #updateConfirmTitle { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
#updateConfirmDialog .close-button { position: static; flex: none; width: 32px; height: 32px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font-size: 17px; }
#updateConfirmDialog #updateConfirmWarning { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 1.55; }
#updateConfirmDialog #updateConfirmForm { display: grid; gap: 0; margin-top: 18px; }
#updateConfirmDialog .update-backup { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 13px; line-height: 1.5; cursor: pointer; }
#updateConfirmDialog .update-backup input { margin-top: 2px; }
#updateConfirmDialog .update-backup:has(input:checked) { border-color: var(--good); background: var(--good-soft); }
#updateConfirmDialog label[for="updateConfirmText"] { margin: 18px 0 6px; color: var(--ink-2); font-size: 12.5px; }
#updateConfirmDialog #updateConfirmPhrase { display: block; margin-bottom: 8px; padding: 9px 12px; border: 1px dashed var(--ink-3); border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .04em; user-select: all; }
#updateConfirmDialog #updateConfirmText { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 10px; font-family: var(--mono); font-size: 14px; }
#updateConfirmDialog #updateConfirmError { margin: 10px 0 0; color: var(--bad); font-size: 12.5px; }
#updateConfirmDialog .update-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
#updateConfirmDialog .update-actions button { min-height: 38px; padding: 8px 18px; border-radius: 999px; font-size: 13px; }
#updateConfirmDialog #cancelUpdateConfirm { border: 1px solid var(--line); background: none; color: var(--ink); }
#updateConfirmDialog #submitUpdateConfirm { border: 1px solid var(--bad); background: var(--bad); color: #fff; }
#updateConfirmDialog #submitUpdateConfirm:disabled { opacity: .55; cursor: progress; }
@media (max-width: 560px) { #updateConfirmDialog > .update-confirm { padding: 20px 18px; } #updateConfirmDialog .update-actions button { flex: 1; } }

/* Accès partagés : permissions en cartes à cocher, machines en cartes */
.v4-access .permission-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; border-top: 0; }
.v4-access .permission-grid label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.v4-access .permission-grid label:hover { border-color: var(--ink-3); }
.v4-access .permission-grid label:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.v4-access .permission-grid input { margin-top: 2px; }
.v4-access .permission-grid span { gap: 3px; } .v4-access .permission-grid strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.v4-access .permission-grid small { color: var(--ink-3); line-height: 1.45; }
.v4-access #grantForm { display: grid; gap: 14px; }
.v4-access #grantForm > p { margin: 0; color: var(--ink-2); font-size: 13px; }
.v4-access #grantForm .access-actions button { min-height: 36px; padding: 7px 16px; border-radius: 999px; font-size: 13px; }
.v4-access #revokeGrant { border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: none; }

.v4-access .access-machine-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; border-top: 0; }
.v4-access .access-machine-grid > .access-machine { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta state" "name name" "share share" "tags tags" "acts acts"; align-items: center; gap: 4px 12px; padding: 16px 18px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-align: left; }
.v4-access .access-machine > .eyebrow { display: block; grid-area: meta; margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.v4-access .access-machine > h3 { grid-area: name; margin: 0; font-size: 16px; font-weight: 600; }
.v4-access .access-machine > small { grid-area: share; color: var(--ink-3); font-size: 12px; }
.v4-access .access-machine > [id^="machineState"] { grid-area: state; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; justify-self: end; }
.v4-access .access-machine > [id^="machineState"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.v4-access .access-machine.v4-acc-on > [id^="machineState"]::before { background: var(--good); }
.v4-access .access-machine.v4-acc-off > [id^="machineState"]::before { background: var(--bad); }
.v4-access .access-machine > .access-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v4-access .access-machine > .access-tags span { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 11.5px; }
.v4-access .access-machine.v4-acc-admin > .access-tags { display: none; }
.v4-access .access-machine > .access-actions { grid-area: acts; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.v4-access .access-machine .access-actions button { min-height: 30px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-size: 12px; font-weight: 500; }
.v4-access .access-machine .access-actions button:hover { border-color: var(--ink-3); background: var(--soft); }
.v4-access .access-machine .access-actions [data-action="metrics"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.v4-access .access-machine .access-actions .access-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.v4-access .access-machine .access-actions [data-action="permissions"] { margin-left: auto; }
@media (max-width: 560px) {
  .v4-access .access-machine-grid > .access-machine { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "name" "state" "share" "tags" "acts"; padding: 14px; }
  .v4-access .access-machine > [id^="machineState"] { justify-self: start; margin: 4px 0 2px; white-space: normal; }
  .v4-access .access-machine .access-actions [data-action="permissions"] { margin-left: 0; }
}

/* Graphiques Proxmox : les canvas prennent la police de <html> (sinon Times) */
html { font-family: var(--sans); }
:is(.proxmox-chart-grid, .guest-chart-grid) > article > div:first-child, .network-chart > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
:is(.proxmox-chart-grid, .guest-chart-grid) > article > div:first-child strong, .network-chart > div:first-child > span { color: var(--ink); font-size: 14px; font-weight: 600; }
:is(.proxmox-chart-grid, .guest-chart-grid) > article > div:first-child span, .network-chart > div:first-child small { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
:is(.network-chart, .proxmox-chart-grid article, .guest-chart-grid article) footer { justify-content: flex-start; }
:is(.network-chart, .guest-chart-grid article) footer i.inbound-dot { background: #49c8e8; }
:is(.network-chart, .guest-chart-grid article) footer i.outbound-dot { background: #6ce0b9; }
.proxmox-chart-grid > article, .guest-chart-grid > article { padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: 14px; }
.network-chart { padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 14px; }
.canvas-tooltip { display: grid; gap: 4px; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.canvas-tooltip small { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.canvas-tooltip span { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }
.canvas-tooltip span i { color: var(--ink-2); font-style: normal; }
.canvas-tooltip span strong { font-family: var(--mono); font-weight: 600; }

/* Datastores : une carte par stockage, barre d'utilisation remplie par v4.js (CSP) */
.v4-infra .storage-list { gap: 10px; align-content: start; border-top: 0; }
.v4-infra .storage-list > article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.v4-infra .storage-list > article > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v4-infra .storage-list > article > header > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.v4-infra .storage-list > article > header strong { font-size: 14px; font-weight: 600; }
.v4-infra .storage-list > article > header small { padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.v4-infra .storage-list > article > header > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; }
.v4-infra .storage-list > article > header > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.v4-infra .storage-list > article > header > span.online::before { background: var(--good); }
.v4-infra .storage-list > article > div { height: 6px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.v4-infra .storage-list > article > div > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.v4-infra .storage-list > article.v4-hot > div > i { background: var(--warn); }
.v4-infra .storage-list > article > footer { display: flex; justify-content: space-between; gap: 10px; padding: 0; align-items: baseline; color: var(--ink-3); font-size: 12px; }
.v4-infra .storage-list > article > footer strong { color: var(--ink); font-family: var(--mono); font-weight: 500; }

/* ================= Fiches plein écran : sonde (#chartModal) et SpeedAtHome (#speedAtHomeModal) ================= */
/* Même mise en page pour les deux : en-tête collant, puis des cartes sur fond de page. */
#speedAtHomeModal { place-items: start stretch; padding: 0; background: var(--bg); backdrop-filter: none; overflow: auto; }
#speedAtHomeModal > section { width: 100%; max-width: none; max-height: none; min-height: 100vh; margin: 0; padding: 0 0 80px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; overflow: visible; }
#speedAtHomeModal > section > * { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
#speedAtHomeModal .chart-header { position: sticky; top: 0; z-index: 6; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; padding-top: 18px; padding-bottom: 18px; background: var(--bg); border-bottom: 1px solid var(--line); }
#speedAtHomeModal .chart-header > div:first-child::before { content: "Réseau  /  Débit"; display: block; margin-bottom: 6px; color: var(--ink-3); font-size: 12px; white-space: pre; }
#speedAtHomeModal .chart-header .eyebrow { display: none; }
#speedAtHomeModal .chart-header h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
#speedAtHomeModal .chart-header p:not(.eyebrow) { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
#speedAtHomeModal .close-button { position: static; width: auto; height: auto; min-height: 32px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 0; }
#speedAtHomeModal .close-button::before { content: "← Retour au réseau"; font-size: 13px; }

/* Cartes communes */
:is(#chartModal, #speedAtHomeModal) :is(.olt-summary, .chart-panel, .secondary-path-card, .probe-incident-history, .probe-route-history, .speed-performance, .speed-history, .ops-analysis, .speed-schedule-form, .speed-link-notice, .incident-capture:not(.hidden)) {
  margin-top: 0; padding: 20px; border: 0; border-radius: 18px; background: var(--soft); }
:is(#chartModal, #speedAtHomeModal) .eyebrow { margin: 0 0 2px; color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
:is(#chartModal, #speedAtHomeModal) :is(h3) { font-size: 16px; font-weight: 550; letter-spacing: -.01em; }
:is(#chartModal, #speedAtHomeModal) svg { flex: none; }

/* Pastilles d'état réutilisées partout dans les fiches */
:is(#chartModal, #speedAtHomeModal) :is(.olt-summary-verdict, .secondary-path-status, .speed-run-state, .counter) {
  display: inline-flex; align-items: center; justify-self: end; padding: 3px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
:is(#chartModal, #speedAtHomeModal) :is(.secondary-path-status.online, .speed-run-state.completed, .olt-summary-healthy .olt-summary-verdict) { background: var(--good-soft); color: var(--good); }
:is(#chartModal, #speedAtHomeModal) :is(.secondary-path-status:is(.offline, .error), .speed-run-state.failed) { background: var(--bad-soft); color: var(--bad); }
:is(#chartModal, #speedAtHomeModal) :is(.secondary-path-status:is(.degraded, .stale), .speed-run-state:is(.running, .queued)) { background: var(--warn-soft); color: var(--warn); }

/* Icônes de tête de carte : un carré discret */
:is(#chartModal, #speedAtHomeModal) :is(.olt-summary-mark, .secondary-path-icon, .speed-performance-mark) { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--ink-2); }
:is(#chartModal, #speedAtHomeModal) :is(.olt-summary-mark, .secondary-path-icon, .speed-performance-mark) svg { width: 17px; height: 17px; }
#chartModal .olt-summary-healthy .olt-summary-mark { background: var(--good-soft); color: var(--good); }

/* ---------- Fiche sonde ---------- */
#chartModal .ip-selector { margin: 18px auto 12px; }
#chartModal .ip-selector select { min-height: 34px; }
#chartModal > section > .olt-summary { margin-top: 0; margin-bottom: 12px; }
#chartModal .olt-summary { display: grid; gap: 14px; }
#chartModal .olt-summary-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
#chartModal .olt-summary-heading { display: grid; gap: 0; }
#chartModal .olt-summary-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#chartModal .olt-path-node { display: grid; grid-template-columns: 18px auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg); }
#chartModal .olt-path-node > div { display: grid; gap: 1px; }
#chartModal .olt-path-node strong { font-size: 14px; font-weight: 550; }
#chartModal .olt-path-state { font-size: 12px; }
#chartModal .olt-path-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#chartModal .olt-summary-connector { color: var(--ink-3); }
#chartModal .olt-summary-connector svg { width: 18px; height: 18px; }
#chartModal .olt-summary-explanation { margin: 0; color: var(--ink-2); font-size: 13px; }
#chartModal .olt-summary-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-family: var(--sans); font-size: 12px; }
#chartModal .olt-summary-footer time { font-family: var(--mono); }
#chartModal .olt-summary-footer details[open] { flex-basis: 100%; }
#chartModal .olt-summary-footer details p { margin-top: 8px; color: var(--ink-2); }

#chartModal .range-tabs { display: inline-flex; gap: 2px; width: auto; margin: 6px auto 14px; padding: 3px; border: 0; border-radius: 999px; background: var(--soft); }
#chartModal > section > .range-tabs { display: flex; width: fit-content; max-width: 1180px; margin-left: max(20px, calc((100% - 1180px) / 2 + 20px)); padding: 3px; }
#chartModal .range-tabs button { min-height: 30px; padding: 4px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 13px; }
#chartModal .range-tabs button.active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

#chartModal .chart-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
#chartModal .chart-content > :not(.chart-panel) { grid-column: 1 / -1; }
#chartModal .chart-panel { display: grid; align-content: start; gap: 12px; }
#chartModal .chart-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 6px 12px; }
#chartModal .chart-label > div:not(.latency-summary) { display: grid; gap: 2px; }
#chartModal .chart-label span { color: var(--ink-3); font-size: 12px; }
#chartModal .chart-label strong { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
#chartModal .chart-label em { color: var(--ink-3); font-size: 12px; font-style: normal; }
#chartModal .latency-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; width: 100%; border: 0; }
#chartModal .latency-summary > div { display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--bg); }
#chartModal .latency-summary > div.hidden { display: none; }
#chartModal .latency-summary strong { font-size: 19px; }
#chartModal .canvas-wrap { padding: 10px 6px 4px; border-radius: 12px; background: var(--bg); }
#chartModal .path-graph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; }
#chartModal .path-graph-controls strong { margin-right: 4px; font-weight: 400; }
#chartModal .path-graph-controls button { min-height: 28px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 12px; }
#chartModal .path-graph-controls button.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
#chartModal .path-graph-controls button.hidden { display: none; }

/* Chemins indépendants (Freebox, 5G, Orange) */
#chartModal .secondary-path-card { display: grid; gap: 14px; }
#chartModal .secondary-path-card.hidden { display: none; }
#chartModal .secondary-path-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; }
#chartModal .secondary-path-head > div:not(.secondary-path-icon) { display: grid; gap: 0; }
#chartModal .path-operator { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; }
#chartModal .secondary-path-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 0; }
#chartModal .secondary-path-metrics > div { display: grid; gap: 2px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); }
#chartModal .secondary-path-metrics > div + div { padding-left: 14px; border: 0; }
#chartModal .secondary-path-metrics strong { font-size: 19px; }
#chartModal .path-measurement-footer { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; text-align: left; }
#chartModal .path-freshness:empty { display: none; }
#chartModal .path-freshness[data-fresh="true"] { color: var(--good); }
#chartModal .path-freshness[data-fresh="true"]::before { content: "● "; }
#chartModal .path-measurement-help[open] { flex-basis: 100%; }
#chartModal .path-measurement-help p { margin-top: 8px; color: var(--ink-2); line-height: 1.5; }

/* Incidents de la sonde */
#chartModal .probe-incident-history { display: grid; gap: 14px; }
#chartModal .probe-incident-history > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#chartModal .ops-incident-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#chartModal .ops-incident-actions button { min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; }
#chartModal .probe-incident-list { display: grid; gap: 6px; }
#chartModal .probe-incident-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); text-align: left; }
#chartModal .probe-incident-item::before { display: none; }
#chartModal .probe-incident-item > i { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
#chartModal .probe-incident-item.degraded > i { background: var(--warn); }
#chartModal .probe-incident-item.online > i { background: var(--good); }
#chartModal .probe-incident-item > div:not(.probe-incident-duration) { display: grid; gap: 2px; min-width: 0; }
#chartModal .probe-incident-item strong { font-size: 14px; font-weight: 550; }
#chartModal .probe-incident-item span, #chartModal .probe-incident-item small { color: var(--ink-3); font-size: 12px; }
#chartModal .probe-incident-item .olt-evidence { display: block; color: var(--ink-2); }
#chartModal .probe-incident-duration { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
#chartModal .probe-incident-duration strong { font-family: var(--mono); font-weight: 500; }
#chartModal .probe-incidents-empty { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }

/* Routes MTR repliables */
#chartModal .chart-content > .probe-route-history { padding: 0; gap: 0; border: 0; overflow: hidden; }
#chartModal .probe-route-history.hidden { display: none; }
#chartModal .route-collapsible { --route-dot: #5b8def; }
#chartModal .route-collapsible[data-route-source="freebox"] { --route-dot: #2fb98f; }
#chartModal .route-collapsible[data-route-source="fiveg"] { --route-dot: #a77bf3; }
#chartModal .orange-route { --route-dot: #f08a24; }
#chartModal :is(.mtr-fold, .orange-route > details) { margin: 0; padding: 0; border: 0; }
#chartModal :is(.mtr-fold, .orange-route > details) > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 12px 18px; color: var(--ink); font-size: 14px; font-weight: 550; line-height: 1.35; text-align: left; cursor: pointer; list-style: none; }
#chartModal :is(.mtr-fold, .orange-route > details) > summary::-webkit-details-marker { display: none; }
#chartModal :is(.mtr-fold, .orange-route > details) > summary::before { content: ""; flex: none; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--route-dot); transform: none; transition: none; }
#chartModal :is(.mtr-fold, .orange-route > details) > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 3px auto; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
#chartModal :is(.mtr-fold, .orange-route > details)[open] > summary::after { margin-bottom: -3px; transform: rotate(225deg); }
#chartModal :is(.mtr-fold, .orange-route > details) > summary:hover::after { border-color: var(--ink); }
#chartModal :is(.mtr-fold, .orange-route > details)[open] > summary { border-bottom: 1px solid var(--line); }
#chartModal .mtr-fold-content { display: grid; gap: 12px; padding: 16px 18px 18px; }
#chartModal .orange-route > details[open] { display: grid; gap: 12px; padding-bottom: 18px; }
#chartModal .orange-route > details > :not(summary) { margin: 0 18px; }
#chartModal .orange-route > details > header { margin-top: 4px; }
#chartModal .orange-route > details > p:empty { display: none; }
#chartModal :is(.mtr-fold-content, .orange-route > details) > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
#chartModal :is(.mtr-fold-content, .orange-route > details) > header p:not(.eyebrow) { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; }
#chartModal #orangeRouteRun { min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; }
@media (max-width: 560px) { #chartModal :is(.mtr-fold, .orange-route > details) > summary { padding: 12px 16px; } #chartModal .mtr-fold-content { padding: 14px 16px 16px; } #chartModal .orange-route > details > :not(summary) { margin: 0 16px; } }
#chartModal .probe-route-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#chartModal .probe-route-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 13px; }
#chartModal .probe-route-actions button.hidden { display: none; }
#chartModal .route-run-state:empty, #chartModal .route-error:empty { display: none; }
#chartModal .route-table-wrap { overflow-x: auto; border-radius: 12px; background: var(--bg); }
#chartModal .route-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#chartModal .route-table th { padding: 10px 12px; color: var(--ink-3); font-weight: 500; text-align: left; border-bottom: 1px solid var(--line); }
#chartModal .route-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); }
#chartModal .route-table tr:last-child td { border-bottom: 0; }
#chartModal .probe-route-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px; border-radius: 12px; background: var(--bg); }
#chartModal .probe-route-footer > div:first-child { display: grid; gap: 2px; flex: 1 1 240px; }
#chartModal .probe-route-footer small { color: var(--ink-3); font-size: 12px; }
#chartModal .probe-route-footer .route-sensitivity { display: inline-flex; align-items: center; gap: 8px; }
#chartModal .probe-route-footer select { min-height: 32px; }
#chartModal .probe-route-footer button { min-height: 32px; padding: 4px 16px; border-radius: 999px; }
#chartModal .route-sensitivity-help { margin: 0; color: var(--ink-3); font-size: 12px; }
#chartModal .probe-route-events { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; }

/* ---------- Fiche SpeedAtHome ---------- */
#speedAtHomeModal .speedathome-dialog > :not(.chart-header) + :not(.chart-header) { margin-top: 12px; }
#speedAtHomeModal .speed-link-notice:not(.hidden) { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; background: var(--good-soft); }
#speedAtHomeModal .speed-performance { display: grid; gap: 16px; }
#speedAtHomeModal .speed-performance-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
#speedAtHomeModal .speed-performance-heading { display: grid; gap: 0; }
#speedAtHomeModal .speed-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 0; }
#speedAtHomeModal .speed-metrics > article { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "value value"; align-items: center; gap: 10px 8px; padding: 16px; border: 0; border-radius: 14px; background: var(--bg); }
#speedAtHomeModal .speed-metrics > article + article { padding-left: 16px; border: 0; }
#speedAtHomeModal .speed-metric-icon { grid-area: icon; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--soft); color: var(--ink-2); }
#speedAtHomeModal .speed-metric-icon svg { width: 14px; height: 14px; }
#speedAtHomeModal .speed-metrics > article > span:not(.speed-metric-icon) { grid-area: label; color: var(--ink-3); font-size: 12px; }
#speedAtHomeModal .speed-metrics > article > strong { grid-area: value; display: inline; font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
#speedAtHomeModal .speed-metrics > article > small { grid-area: value; align-self: end; justify-self: end; color: var(--ink-3); font-size: 12px; }
#speedAtHomeModal .speed-metric-0 .speed-metric-icon { color: var(--s-vm); }
#speedAtHomeModal .speed-metric-1 .speed-metric-icon { color: var(--s-fb); }
#speedAtHomeModal .speed-metric-2 .speed-metric-icon, #speedAtHomeModal .speed-metric-3 .speed-metric-icon { color: var(--s-5g); }
#speedAtHomeModal .speed-meta { display: flex; flex-wrap: wrap; gap: 8px; }
#speedAtHomeModal .speed-meta > span:not(.speed-run-state) { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--soft); }
#speedAtHomeModal .speed-meta strong { color: var(--ink-3); font-size: 12px; font-weight: 400; }
#speedAtHomeModal .speed-meta small { color: var(--ink); font-family: var(--mono); font-size: 12px; }
#speedAtHomeModal .speed-history { display: grid; gap: 14px; }
#speedAtHomeModal .speed-history > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
#speedAtHomeModal .speed-history > header > div:first-child { display: grid; gap: 2px; }
#speedAtHomeModal #speedHistoryMeta { color: var(--ink-3); font-size: 12px; }
#speedAtHomeModal .speed-history-controls { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); }
#speedAtHomeModal .speed-history-controls button { min-height: 28px; padding: 3px 13px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 12px; }
#speedAtHomeModal .speed-history-controls button.active { background: var(--ink); color: var(--bg); }
#speedAtHomeModal .speed-history-chart { position: relative; padding: 10px 6px 4px; border-radius: 12px; background: var(--bg); }
#speedAtHomeModal .speed-history canvas { height: 240px; }
#speedAtHomeModal .ops-analysis { display: grid; gap: 10px; }
#speedAtHomeModal .ops-analysis > h3 { font-size: 16px; }
#speedAtHomeModal #speedAnalysisDetails { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
#speedAtHomeModal .speed-analysis-help summary { color: var(--ink-2); font-size: 13px; cursor: pointer; }
#speedAtHomeModal .speed-analysis-help p { margin-top: 6px; color: var(--ink-3); font-size: 12px; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px 14px; }
#speedAtHomeModal #speedAlertForm { margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--bg); }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) > :is(.ops-toggle, .switch-line) { display: flex; align-items: center; gap: 10px; align-self: center; color: var(--ink); font-size: 13px; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) > label:not(.ops-toggle):not(.switch-line) { display: grid; gap: 4px; color: var(--ink-3); font-size: 12px; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) select { width: auto; min-width: 180px; min-height: 34px; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) button { width: auto; min-height: 34px; padding: 5px 16px; border-radius: 999px; font-size: 13px; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) .message:empty { display: none; }
#speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) .message { grid-column: 1 / -1; margin: 0; }
#speedAtHomeModal .speed-schedule-intro { grid-column: 1 / -1; display: grid; gap: 2px; }
#speedAtHomeModal .speed-schedule-intro p:not(.eyebrow) { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
#speedAtHomeModal .speed-schedule-form .form-actions { display: flex; gap: 8px; }
#speedAtHomeModal .speed-schedule-form .form-actions .secondary-action { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
#speedAtHomeModal .shared-readonly-note:not(.hidden) { padding: 12px 16px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }

@media (max-width: 860px) {
  #chartModal .chart-content { grid-template-columns: 1fr; }
  :is(#chartModal .secondary-path-metrics, #speedAtHomeModal .speed-metrics) { grid-template-columns: 1fr 1fr; }
  #speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) { grid-template-columns: 1fr; }
  #speedAtHomeModal :is(#speedAlertForm, .speed-schedule-form) select { width: 100%; }
  #chartModal > section > .range-tabs { margin-left: 20px; }
}

/* ---------- Fenêtre « Partager » une sonde ---------- */
#shareModal .share-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); gap: 10px; padding: 24px; border: 0; border-radius: 22px; background: var(--bg); overflow: auto; }
#shareModal .chart-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; padding: 0; border: 0; }
#shareModal .chart-header h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
#shareModal .chart-header p:not(.eyebrow) { margin-top: 4px; color: var(--ink-2); font-size: 13px; }
#shareModal .eyebrow { margin: 0 0 4px; color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
#shareModal .close-button { position: static; }
#shareModal :is(.internal-share-maker, .share-image-maker, .share-form, .share-result:not(.hidden)) { display: grid; gap: 12px; padding: 18px; border: 0; border-radius: 16px; background: var(--soft); }
#shareModal :is(.internal-share-maker, .share-image-maker) > div:first-child { display: grid; gap: 2px; }
#shareModal :is(.internal-share-maker, .share-image-maker) > div:first-child > span { color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
#shareModal :is(.internal-share-maker, .share-image-maker) > div:first-child > strong { font-size: 15px; font-weight: 550; }
#shareModal :is(.internal-share-maker, .share-image-maker) > div:first-child > p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
#shareModal #internalShareForm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#shareModal :is(input:not([type="checkbox"]), select) { min-height: 38px; background: var(--bg); }
#shareModal :is(.internal-share-maker, .share-image-maker, .share-form, .share-result) button { width: auto; min-height: 38px; padding: 6px 16px; border-radius: 999px; font-size: 13px; }
#shareModal .share-privacy-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
#shareModal .share-privacy-choice span { display: grid; gap: 2px; }
#shareModal .share-privacy-choice strong { font-size: 13px; font-weight: 550; }
#shareModal .share-privacy-choice small { color: var(--ink-3); font-size: 12px; }
#shareModal .message:empty { display: none; }
#shareModal .internal-share-list { display: grid; gap: 6px; }
#shareModal .internal-share-list:empty { display: none; }
#shareModal .internal-share-list > article { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
#shareModal .internal-share-list > article > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--good-soft); color: var(--good); font-size: 12px; }
#shareModal .internal-share-list > article > div { display: grid; gap: 1px; min-width: 0; }
#shareModal .internal-share-list strong { font-size: 13px; font-weight: 550; }
#shareModal .internal-share-list small { color: var(--ink-3); font-size: 12px; }
#shareModal .internal-share-list button { min-height: 30px; padding: 3px 12px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 12px; }
#shareModal .share-separator { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0; color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
#shareModal .share-separator::before, #shareModal .share-separator::after { content: ""; height: 1px; background: var(--line); }
#shareModal .share-image-maker > button { justify-self: start; }
#shareModal .share-image-result:not(.hidden) { display: grid; gap: 10px; }
#shareModal .share-image-result img { width: 100%; border-radius: 12px; }
#shareModal .share-image-result > div { display: flex; flex-wrap: wrap; gap: 8px; }
#shareModal .share-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
#shareModal .share-form > label { grid-column: 1 / -1; margin-bottom: -6px; color: var(--ink-3); font-size: 12px; }
#shareModal .share-form > #shareCustomField:not(.hidden) { grid-column: 1 / -1; display: grid; gap: 4px; }
#shareModal .share-form > .message { grid-column: 1 / -1; margin: 0; }
#shareModal .share-result > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#shareModal .share-result > p { margin: 0; color: var(--ink-3); font-size: 12px; }
@media (max-width: 560px) { #shareModal :is(#internalShareForm, .share-form) { grid-template-columns: 1fr; } #shareModal .internal-share-list > article { grid-template-columns: 26px minmax(0, 1fr); } #shareModal .internal-share-list > article > button { grid-column: 2; justify-self: start; } }

/* ================= Incidents → Rapports PDF ================= */
[data-ipanel="pdf"] .report-studio { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; margin: 6px 0 16px; }
[data-ipanel="pdf"] :is(.report-selector, .report-compose, .report-bottom-grid > .admin-card) { padding: 20px; border: 0; border-radius: 18px; background: var(--soft); }
[data-ipanel="pdf"] .eyebrow { margin: 0 0 2px; color: var(--ink-3); font-size: 10px; letter-spacing: .12em; }
[data-ipanel="pdf"] h2 { font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
[data-ipanel="pdf"] h2 svg { display: none; }
[data-ipanel="pdf"] .counter { padding: 3px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
[data-ipanel="pdf"] .report-section-title { align-items: center; }
/* Périmètre : deux choix en tuiles, recherche, catégories en pastilles, liste des sondes */
[data-ipanel="pdf"] .report-mode { gap: 8px; border: 0; }
[data-ipanel="pdf"] .report-mode button { gap: 2px 10px; padding: 14px; border: 1px solid transparent; border-radius: 14px; background: var(--bg); text-align: left; }
[data-ipanel="pdf"] .report-mode button + button { border-left: 1px solid transparent; }
[data-ipanel="pdf"] .report-mode button.active { border-color: var(--ink); background: var(--bg); }
[data-ipanel="pdf"] .report-mode button small { color: var(--ink-3); }
[data-ipanel="pdf"] .report-target-search { gap: 10px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--bg); color: var(--ink-3); }
[data-ipanel="pdf"] .report-target-search input { min-height: 40px; font-size: 14px; }
[data-ipanel="pdf"] .report-category-filters { flex-wrap: wrap; gap: 6px; overflow: visible; }
[data-ipanel="pdf"] .report-category-filters button { min-height: 28px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 12px; }
[data-ipanel="pdf"] .report-category-filters button.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
[data-ipanel="pdf"] .report-select-actions button { min-height: 30px; padding: 3px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 12px; }
[data-ipanel="pdf"] .report-target-list { gap: 4px; max-height: 440px; padding: 6px; border: 0; border-radius: 14px; background: var(--bg); }
[data-ipanel="pdf"] .report-target-list label { display: grid; grid-template-columns: 18px 8px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; cursor: pointer; }
[data-ipanel="pdf"] .report-target-list label:hover { background: var(--soft); }
[data-ipanel="pdf"] .report-target-list label > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
[data-ipanel="pdf"] .report-target-list label > i.online { background: var(--good); }
[data-ipanel="pdf"] .report-target-list label > i.degraded { background: var(--warn); }
[data-ipanel="pdf"] .report-target-list label > i.offline { background: var(--bad); }
[data-ipanel="pdf"] .report-target-list span { min-width: 0; }
[data-ipanel="pdf"] .report-target-list strong { overflow: hidden; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
[data-ipanel="pdf"] .report-target-list small { overflow: hidden; color: var(--ink-3); font-family: var(--mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* Composition : aperçu de couverture (garde son papier blanc), Telegram, export */
[data-ipanel="pdf"] .report-compose { position: sticky; top: 76px; align-self: start; gap: 14px; }
[data-ipanel="pdf"] .pdf-cover-preview { padding: 24px; border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .08); }
[data-ipanel="pdf"] .report-telegram-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
[data-ipanel="pdf"] .report-telegram-choice span { display: grid; gap: 2px; }
[data-ipanel="pdf"] .report-telegram-choice strong { font-size: 13px; font-weight: 550; }
[data-ipanel="pdf"] .report-telegram-choice small { color: var(--ink-3); font-size: 12px; }
[data-ipanel="pdf"] .report-export-button { min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 550; }
[data-ipanel="pdf"] .report-compose .message:empty { display: none; }
/* Dernier export et planification */
[data-ipanel="pdf"] .report-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; border: 0; }
[data-ipanel="pdf"] .report-bottom-grid > .admin-card { display: grid; align-content: start; gap: 16px; margin: 0; }
[data-ipanel="pdf"] .report-bottom-grid .admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0; padding: 0; border: 0; }
[data-ipanel="pdf"] .report-bottom-grid .admin-card-head > div { display: grid; gap: 2px; }
[data-ipanel="pdf"] .report-bottom-grid .admin-card-head p:not(.eyebrow) { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
[data-ipanel="pdf"] .report-badge { flex: none; padding: 3px 11px; background: var(--bg); color: var(--ink-2); font-size: 12px; }
[data-ipanel="pdf"] .report-badge.active { background: var(--good-soft); color: var(--good); }
[data-ipanel="pdf"] .report-last { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--bg); }
[data-ipanel="pdf"] .report-last > span { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
[data-ipanel="pdf"] .report-last > span strong { color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 550; flex-basis: 100%; }
[data-ipanel="pdf"] .report-last > small { color: var(--good); font-size: 12px; }
[data-ipanel="pdf"] .report-bottom-grid .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
[data-ipanel="pdf"] .report-bottom-grid button { width: auto; height: auto; min-height: 36px; padding: 6px 18px; border-radius: 999px; font-size: 13px; }
[data-ipanel="pdf"] .report-bottom-grid .secondary-action { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
[data-ipanel="pdf"] .reports-form { display: grid; gap: 14px; }
[data-ipanel="pdf"] .report-schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
[data-ipanel="pdf"] .report-schedule label { display: grid; gap: 4px; color: var(--ink-3); font-size: 12px; }
[data-ipanel="pdf"] .report-schedule :is(select, input) { width: 100%; min-height: 38px; background: var(--bg); }
[data-ipanel="pdf"] .report-switches { gap: 8px 22px; margin: 0; }
[data-ipanel="pdf"] .reports-form > button { justify-self: start; }
[data-ipanel="pdf"] .report-bottom-grid .message:empty { display: none; }
@media (max-width: 960px) { [data-ipanel="pdf"] .report-studio, [data-ipanel="pdf"] .report-bottom-grid { grid-template-columns: 1fr; } [data-ipanel="pdf"] .report-compose { position: static; } }
@media (max-width: 560px) { [data-ipanel="pdf"] .report-schedule, [data-ipanel="pdf"] .report-mode { grid-template-columns: 1fr; } }
[data-ipanel="pdf"] #reportDownload, [data-ipanel="pdf"] .reports-form > button { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); }

/* Charge de l'UCG Fiber */
#chartModal .v4-gw.hidden { display: none; }
#chartModal .v4-gw { display: grid; gap: 14px; }
#chartModal .v4-gw-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
#chartModal .v4-gw-head h3 { margin: 0; font-size: 16px; font-weight: 550; }
.v4-gw-state { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-3); font-size: 12px; }
.v4-gw-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v4-gw-state.ok { color: var(--good); }
.v4-gw-state.bad { color: var(--bad); }
.v4-gw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v4-gw-tiles > div { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.v4-gw-tiles span { color: var(--ink-3); font-size: 12px; }
.v4-gw-tiles strong { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.v4-gw-tiles small { color: var(--ink-3); font-size: 11.5px; }
.v4-gw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 12px; }
.v4-gw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.v4-gw-legend span::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.v4-gw-legend .cpu::before { background: #1684a6; }
.v4-gw-legend .mem::before { background: #178a66; }
.v4-gw-legend .limit::before { background: var(--warn); }
html[data-theme="dark"] .v4-gw-legend .cpu::before { background: #49c8e8; }
html[data-theme="dark"] .v4-gw-legend .mem::before { background: #6ce0b9; }
.v4-gw-plot { position: relative; padding: 12px; border-radius: 12px; background: var(--bg); }
.v4-gw-plot canvas { display: block; width: 100%; height: 190px; touch-action: pan-y; }
.v4-gw-tip { position: absolute; top: 6px; z-index: 2; display: grid; gap: 3px; min-width: 110px; margin-left: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); font-size: 12px; pointer-events: none; }
.v4-gw-tip.hidden { display: none; }
.v4-gw-tip b { font-weight: 550; }
.v4-gw-tip span { display: flex; justify-content: space-between; gap: 12px; }
.v4-gw-tip i { color: var(--ink-3); font-style: normal; }
.v4-gw-tip em { font-family: var(--mono); font-style: normal; }
.v4-gw-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-3); font-size: 13px; }
.v4-gw-empty.hidden { display: none; }
@media (max-width: 560px) { .v4-gw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v4-gw-tiles > div:last-child { grid-column: 1 / -1; } }

/* Fiche sonde : Chemin et corrélation */
#chartModal #oltCurrentSummary { display: none; }
.v4-pc { display: grid; grid-column: 1 / -1; min-width: 0; padding: 4px 4px 10px; }
.v4-pc-band { display: flex; gap: 2px; height: 20px; }
.v4-pc-band i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--line); opacity: 1; }
.v4-pc-band i.up { background: var(--good); opacity: .55; }
.v4-pc-band i.warn { background: var(--warn); }
.v4-pc-band i.down { background: var(--bad); }
.v4-pc-band-note { margin: 8px 0 0; color: var(--ink-3); font-size: 12px; }
.v4-pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 28px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
#chartModal .v4-pc-head h2 { margin: 0; font-size: 20px; font-weight: 550; letter-spacing: -.01em; }
.v4-pc-help-toggle { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 13px; text-align: right; cursor: pointer; }
.v4-pc-help-toggle:hover { color: var(--ink); }
.v4-pc-help { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.v4-pc-chain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12px, 56px) minmax(0, 1fr) minmax(12px, 56px) minmax(0, 1fr); align-items: start; padding: 24px 0 20px; }
.v4-pc-node { display: grid; justify-items: center; gap: 6px; min-width: 0; color: var(--good); text-align: center; }
.v4-pc-node.down { color: var(--bad); }
.v4-pc-node.unknown { color: var(--ink-3); }
.v4-pc-ring { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--mono); font-size: 11px; }
.v4-pc-node strong { color: var(--ink); font-size: 14px; font-weight: 450; }
.v4-pc-node small { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.v4-pc-link { height: 1.5px; margin-top: 23px; background: var(--good); opacity: .6; }
.v4-pc-link.down { background: var(--bad); opacity: 1; }
.v4-pc-link.unknown { background: var(--line); opacity: 1; }
.v4-pc-verdict { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 12px 0 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.v4-pc-verdict b { flex: none; color: var(--warn); font-weight: 550; }
.v4-pc-verdict.healthy b { color: var(--good); }
.v4-pc-verdict.individual b, .v4-pc-verdict.collective b { color: var(--bad); }
.v4-pc-paths { display: grid; }
.v4-pc-paths[hidden], .v4-pc-item[hidden] { display: none; }
.v4-pc-path { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 48px 14px; align-items: baseline; gap: 12px; width: 100%; min-height: 0; margin: 0; padding: 11px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
button.v4-pc-path { cursor: pointer; }
.v4-pc-path::after { content: ""; justify-self: end; align-self: center; width: 7px; height: 7px; margin-bottom: 3px; }
button.v4-pc-path::after { border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .18s, margin .18s; }
button.v4-pc-path:hover::after { border-color: var(--ink); }
.v4-pc-item.open button.v4-pc-path::after { margin: 3px 0 0; transform: rotate(225deg); }
.v4-pc-item.open .v4-pc-name { font-weight: 550; }
.v4-pc-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
.v4-pc-item.open .v4-pc-detail { grid-template-rows: 1fr; }
.v4-pc-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility .18s; }
.v4-pc-item.open .v4-pc-inner { visibility: visible; }
#chartModal .v4-pc-detail .secondary-path-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 4px 26px 16px 24px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#chartModal .v4-pc-detail .secondary-path-head { display: contents; }
#chartModal .v4-pc-detail .secondary-path-head > :not(.secondary-path-status) { display: none; }
#chartModal .v4-pc-detail .secondary-path-status { grid-row: 2; grid-column: 1; justify-self: start; }
#chartModal .v4-pc-detail .secondary-path-metrics { grid-row: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 24px; margin: 0; }
#chartModal .v4-pc-detail .secondary-path-metrics > :first-child { display: none; }
#chartModal .v4-pc-detail .secondary-path-metrics > div { display: grid; gap: 2px; align-content: space-between; padding: 0; border: 0; border-radius: 0; background: none; }
#chartModal .v4-pc-detail .secondary-path-metrics span { color: var(--ink-3); font-size: 12px; }
#chartModal .v4-pc-detail .secondary-path-metrics strong { font-family: var(--mono); font-size: 14px; font-weight: 500; }
#chartModal .v4-pc-detail .path-measurement-footer { display: contents; }
#chartModal .v4-pc-detail .path-freshness { grid-row: 2; grid-column: 2; }
#chartModal .v4-pc-detail .path-measurement-help { grid-row: 2; grid-column: 3; justify-self: end; }
#chartModal .v4-pc-detail .path-measurement-help[open] { grid-row: 3; grid-column: 1 / -1; justify-self: stretch; }
#chartModal .v4-pc-detail .path-measurement-help p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .v4-pc-detail, .v4-pc-inner, button.v4-pc-path::after { transition: none; } }
.v4-pc-path i { align-self: center; width: 12px; height: 2px; border-radius: 2px; background: var(--s-vm); }
.v4-pc-item.freebox i { background: var(--s-fb); }
.v4-pc-item.\35 g i { background: var(--s-5g); }
.v4-pc-item.orange i { background: #f08a24; }
.v4-pc-path b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.v4-pc-path small { color: var(--ink-3); font-size: 12.5px; text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .v4-pc-verdict { display: grid; gap: 2px; } .v4-pc-head h2 { font-size: 18px; } #chartModal .v4-pc-detail .secondary-path-card { padding: 4px 0 16px; } #chartModal .v4-pc-detail .path-freshness { white-space: nowrap; } #chartModal .v4-pc-detail .path-measurement-help { grid-row: 3; grid-column: 1 / -1; justify-self: start; } }

/* Ruban 24 h : sondes en cause au survol */
.v4-ribbon { position: relative; }
.v4-ribbon-cells i.one { cursor: pointer; }
.v4-ribbon-tip { position: absolute; z-index: 20; display: grid; gap: 4px; width: max-content; min-width: 180px; max-width: min(340px, 100%); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 12.5px; pointer-events: none; }
.v4-ribbon-tip[hidden] { display: none; }
.v4-ribbon-tip > b { font-family: var(--mono); font-weight: 500; }
.v4-ribbon-tip span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.v4-ribbon-tip span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.v4-ribbon-tip span.b::before { background: var(--bad); }
.v4-ribbon-tip span i { overflow: hidden; color: var(--ink); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.v4-ribbon-tip span em { color: var(--ink-3); font-style: normal; }
.v4-ribbon-tip p { margin: 0; color: var(--good); }
.v4-ribbon-tip small { color: var(--ink-3); font-size: 11.5px; }