/* Iluguard — composants de l'outil. S'appuie uniquement sur tokens.css (thème sombre et clair). */
:root {
  --ig-btn-primary-bg: #E7EDF0; --ig-btn-primary-fg: #0B1013; --ig-btn-primary-hover: #FFFFFF;
  --ig-danger-solid: #FF6B5E; --ig-danger-solid-fg: #1A0705;
  --ig-banner-crit-bg: repeating-linear-gradient(135deg, rgba(255,107,94,.10) 0 8px, rgba(255,107,94,.05) 8px 16px);
  --ig-banner-crit-bd: rgba(255,107,94,.4); --ig-banner-crit-fg: #FFB3AC;
  --ig-banner-warn-bg: rgba(244,183,64,.07); --ig-banner-warn-bd: rgba(244,183,64,.35); --ig-banner-warn-fg: #F8CF7E;
  --ig-diag-bg: linear-gradient(180deg, #10181C, #0E1316 60%);
  --ig-chart-grid: #1F292F; --ig-chart-area: rgba(127,224,238,.07);
}
[data-theme="light"] {
  --ig-btn-primary-bg: #12181B; --ig-btn-primary-fg: #FFFFFF; --ig-btn-primary-hover: #000000;
  --ig-danger-solid: #C2362B; --ig-danger-solid-fg: #FFFFFF;
  --ig-banner-crit-bg: repeating-linear-gradient(135deg, rgba(194,54,43,.08) 0 8px, rgba(194,54,43,.04) 8px 16px);
  --ig-banner-crit-bd: rgba(194,54,43,.4); --ig-banner-crit-fg: #8E1F16;
  --ig-banner-warn-bg: rgba(143,90,0,.06); --ig-banner-warn-bd: rgba(143,90,0,.35); --ig-banner-warn-fg: #6B4300;
  --ig-diag-bg: linear-gradient(180deg, #F2FAFB, #FFFFFF 60%);
  --ig-chart-grid: #E1E4E0; --ig-chart-area: rgba(10,127,148,.08);
  --ig-glow-down: 0 0 0 1px rgba(194,54,43,.45);
  --ig-glow-degraded: 0 0 0 1px rgba(143,90,0,.35);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; color: var(--ig-text); font: 400 14.5px/22px var(--ig-font-sans);
  background-color: var(--ig-bg);
  background-image: linear-gradient(var(--ig-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ig-grid-line) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
[data-theme="light"] body { --ig-grid-line: rgba(18,24,27,.035); }
a { color: var(--ig-lamp); text-underline-offset: 2px; }
a:hover { color: var(--ig-lamp-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ig-focus); border-radius: 8px; }
.mono { font-family: var(--ig-font-mono); }
.muted { color: var(--ig-text-2); }
.faint { color: var(--ig-text-3); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 500 11px/16px var(--ig-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ig-text-3); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* ---- Logo -------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ig-text); text-decoration: none; }
.logo svg { flex: none; }
/* Le logo s'utilise partout (en-tête, carte Diagnostic, aperçu) : ses couleurs ne dépendent pas du contexte. */
svg .stem { fill: var(--ig-text); }
svg .lamp { fill: var(--ig-lamp); }
svg .beam { stroke: var(--ig-lamp); opacity: .55; }
.logo.live .beam { animation: igBeam 10s ease-in-out infinite; }
.wordmark { font: 600 19px/1 var(--ig-font-sans); letter-spacing: -.025em; }

/* ---- Boutons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--ig-r-btn);
  border: 1px solid var(--ig-border); background: var(--ig-raised); color: var(--ig-text); font: 500 13.5px/1 var(--ig-font-sans); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; text-decoration: none; }
.btn:hover { background: var(--ig-line-soft); }
.btn svg { flex: none; }
.btn-primary { background: var(--ig-btn-primary-bg); border-color: var(--ig-btn-primary-bg); color: var(--ig-btn-primary-fg); font-weight: 600; }
.btn-primary:hover { background: var(--ig-btn-primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ig-text-2); }
.btn-ghost:hover { background: var(--ig-raised); color: var(--ig-text); }
.btn-danger { background: transparent; border-color: rgba(255,107,94,.4); color: var(--ig-down-text); }
.btn-danger:hover { background: rgba(255,107,94,.1); }
.btn-danger-solid { background: var(--ig-danger-solid); border-color: var(--ig-danger-solid); color: var(--ig-danger-solid-fg); font-weight: 600; }
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 36px; padding: 0; }

/* ---- Pastilles d'état ----------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--ig-r-pill); font: 500 12.5px/1 var(--ig-font-sans); white-space: nowrap; border: 1px solid; }
.pill svg { width: 12px; height: 12px; flex: none; }
.st-down { --c: var(--ig-down); } .st-degraded { --c: var(--ig-degraded); } .st-unknown { --c: var(--ig-unknown); }
.st-maintenance { --c: var(--ig-maint); } .st-up { --c: var(--ig-up); } .st-paused { --c: var(--ig-paused); }
.pill[class*="st-"] { color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.pill.confirm { border-style: dashed; border-color: rgba(244,183,64,.6); }
.pill .confirm-tag { color: var(--ig-degraded); font-weight: 400; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ig-up); animation: igPulse 4s ease-in-out infinite; flex: none; }
.state-word { display: inline-flex; align-items: center; gap: 6px; color: var(--c); font-weight: 500; white-space: nowrap; }
.state-word svg { width: 12px; height: 12px; flex: none; }

/* ---- En-tête ---------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--ig-line); background: color-mix(in srgb, var(--ig-bg) 88%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.top .grow { flex: 1; }
.refresh { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--ig-font-mono); color: var(--ig-text-3); white-space: nowrap; }
.hero { padding: 36px 0 20px; }
.verdict { font: 600 48px/52px var(--ig-font-sans); letter-spacing: -.035em; margin: 0 0 18px; }
.verdict.calm { color: var(--ig-text); }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.counters { display: flex; flex-wrap: wrap; gap: 8px; }
.counter { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--ig-line); background: var(--ig-inset); color: var(--ig-text-2); font: 500 13px var(--ig-font-sans); cursor: pointer; white-space: nowrap; }
.counter svg { width: 12px; height: 12px; color: var(--c); }
.counter b { font: 600 13px var(--ig-font-mono); color: var(--ig-text); }
.counter.zero b, .counter.zero { color: var(--ig-text-off); }
.counter.zero svg { opacity: .5; }
.counter[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--ig-inset)); }
.probes-health { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ig-text-2); white-space: nowrap; }

/* ---- Bandeaux système ----------------------------------------------------------- */
.banners { display: grid; gap: 8px; margin: 4px 0 18px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; border: 1px solid; flex-wrap: wrap; }
.banner svg { flex: none; width: 18px; height: 18px; }
.banner .msg { flex: 1; min-width: 220px; }
.banner .msg b { font-weight: 600; margin-right: 8px; }
.banner .msg span { color: var(--ig-text-2); }
.banner.crit { background: var(--ig-banner-crit-bg); border-color: var(--ig-banner-crit-bd); }
.banner.crit b, .banner.crit svg { color: var(--ig-banner-crit-fg); }
.banner.warn { background: var(--ig-banner-warn-bg); border-color: var(--ig-banner-warn-bd); }
.banner.warn b, .banner.warn svg { color: var(--ig-banner-warn-fg); }
.banner .actions { display: flex; gap: 6px; }

/* ---- Barre d'outils ----------------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.search { flex: 1; min-width: 200px; position: relative; }
.search svg { position: absolute; left: 11px; top: 11px; color: var(--ig-text-3); }
.field, .search input { width: 100%; height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ig-border); background: var(--ig-inset); color: var(--ig-text); }
.search input { padding-left: 34px; }
.field::placeholder, .search input::placeholder { color: var(--ig-text-3); }
textarea.field { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.seg { display: inline-flex; border: 1px solid var(--ig-border); border-radius: 8px; overflow: hidden; }
.seg button { height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--ig-text-2); font: 500 13px var(--ig-font-sans); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ig-modal); color: var(--ig-text); }
.seg button + button { border-left: 1px solid var(--ig-border); }

/* ---- Cartes de site ------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; padding-bottom: 48px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--ig-r-card); background: var(--ig-surface); box-shadow: var(--ig-e0); cursor: pointer; text-align: left; border: 0; color: inherit; min-width: 0; }
.card:hover { background: color-mix(in srgb, var(--ig-surface) 70%, var(--ig-raised)); }
.card.h-down { box-shadow: var(--ig-glow-down); }
.card.h-degraded { box-shadow: var(--ig-glow-degraded); }
.card.h-paused { background: var(--ig-inset); }
.card.arrive { animation: igArrive 1.2s ease-out both; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.card-name { font: 600 14.5px/20px var(--ig-font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { font-size: 12.5px; line-height: 18px; color: var(--ig-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head > div { min-width: 0; }
.spark { width: 100%; height: 36px; display: block; }
.spark path { vector-effect: non-scaling-stroke; }
.metrics { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 12.5px/18px var(--ig-font-mono); color: var(--ig-text-2); }
.metrics span { white-space: nowrap; }
.metrics .ago { margin-left: auto; color: var(--ig-text-3); }
.card-problem { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-top: 10px; border-top: 1px solid var(--ig-line-soft); font-size: 13px; line-height: 18px; }
.card-problem.down { color: var(--ig-down-strong); } .card-problem.degraded { color: var(--ig-degraded-text); }
.unack { flex: none; font-size: 12px; padding: 2px 7px; border-radius: 4px; border: 1px solid rgba(255,107,94,.4); color: var(--ig-down-strong); white-space: nowrap; }

/* Vue liste compacte */
.list { display: grid; padding-bottom: 48px; border-radius: var(--ig-r-card); box-shadow: var(--ig-e0); background: var(--ig-surface); overflow: hidden; }
.lrow { display: grid; grid-template-columns: 140px minmax(0, 1.4fr) minmax(0, 1fr) 80px 80px 100px 80px; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border: 0; border-top: 1px solid var(--ig-line-soft); background: transparent; color: inherit; text-align: left; cursor: pointer; font-size: 13.5px; }
.lrow:first-child { border-top: 0; }
.lrow:hover { background: var(--ig-raised); }
.lrow .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .c { color: var(--ig-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .m { font: 500 12.5px var(--ig-font-mono); color: var(--ig-text-2); white-space: nowrap; text-align: right; }
.lrow svg.spark { height: 20px; }

/* ---- États vides --------------------------------------------------------------------------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 64px 24px; border-radius: var(--ig-r-card); border: 1px dashed var(--ig-border); color: var(--ig-text-2); }
.empty svg { color: var(--ig-text-3); }
.empty p { margin: 0; max-width: 420px; }

/* ---- Panneau latéral & modales ------------------------------------------------------------- */
dialog { border: 0; padding: 0; color: var(--ig-text); background: var(--ig-modal); box-shadow: var(--ig-e2); border-radius: 14px; max-width: calc(100vw - 32px); }
dialog::backdrop { background: rgba(3,5,6,.62); backdrop-filter: blur(2px); }
/* La fenêtre prend la largeur de son contenu (560 px par défaut, plus pour Clients ou Alertes),
   jamais plus que l'écran : une largeur fixe ici faisait déborder et défiler les fenêtres larges. */
.modal { width: fit-content; max-width: calc(100vw - 32px); }
.modal-in { padding: 22px; display: grid; gap: 16px; width: 560px; max-width: 100%; box-sizing: border-box; }
.modal h2, .panel h2 { font: 600 17px/24px var(--ig-font-sans); margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.confirm { width: 440px; box-shadow: 0 0 0 1px var(--ig-border), 0 24px 60px -16px rgba(0,0,0,.85); }
.panel { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: 720px; max-width: 100vw; border-radius: 0; background: var(--ig-bg); box-shadow: -1px 0 0 var(--ig-border), -24px 0 60px -16px rgba(0,0,0,.6); }
.panel[open] { animation: panelIn .25s ease-out; }
@keyframes panelIn { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.panel-head { position: sticky; top: 0; z-index: 2; padding: 18px 24px 14px; background: color-mix(in srgb, var(--ig-bg) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--ig-line); }
.panel-body { padding: 20px 24px 64px; display: grid; gap: 28px; }
.panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel-title h2 { font: 600 28px/34px var(--ig-font-sans); letter-spacing: -.02em; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.box { border-radius: var(--ig-r-card); background: var(--ig-surface); box-shadow: var(--ig-e0); padding: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.fl { display: grid; gap: 6px; font: 500 12.5px var(--ig-font-sans); color: var(--ig-text-2); }
.fl small { font-weight: 400; color: var(--ig-text-3); }
.fl > span { display: block; }
.field.mono { font-family: var(--ig-font-mono); }
.err { color: var(--ig-down-text); font-size: 13px; min-height: 0; }
.ok-msg { color: var(--ig-up); font-size: 13px; }

/* Bascule */
.toggle { position: relative; width: 34px; height: 20px; flex: none; appearance: none; border-radius: 999px; background: var(--ig-border); cursor: pointer; transition: background .15s; margin: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ig-text-3); transition: transform .15s, background .15s; }
.toggle:checked { background: var(--ig-up); }
.toggle:checked::after { transform: translateX(14px); background: var(--ig-inset); }
.toggle-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ig-text-2); white-space: nowrap; cursor: pointer; }

/* ---- Tableau des vérifications ------------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { font: 500 11px/16px var(--ig-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ig-text-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ig-line-soft); }
.table td { padding: 12px; border-bottom: 1px solid var(--ig-line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.mono { font-size: 12.5px; color: var(--ig-text-2); white-space: nowrap; }
.table .act { text-align: right; white-space: nowrap; }
.table.checks th:nth-child(1), .table.checks td:nth-child(1) { width: 128px; }
.table.checks th:nth-child(2), .table.checks td:nth-child(2) { width: 112px; }
.table.checks th:nth-child(4), .table.checks td:nth-child(4) { width: 64px; }
.table.checks th:nth-child(5), .table.checks td:nth-child(5) { width: 92px; }
.table.checks td:nth-child(3) { color: var(--ig-text-2); font-size: 13px; overflow-wrap: anywhere; }
.table.checks .act { padding-left: 0; padding-right: 0; }
.table tr.off { opacity: .55; }

/* ---- Carte Diagnostic ------------------------------------------------------------------------------- */
.diag { position: relative; overflow: hidden; border-radius: 14px; background: var(--ig-diag-bg); box-shadow: 0 0 0 1px var(--ig-border); padding: 22px 24px; display: grid; gap: 18px; }
.diag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ig-lamp), transparent); opacity: .7; }
.diag.scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(127,224,238,.18), transparent); animation: igScan 1.4s ease-out both; pointer-events: none; }
.diag.scan .rv { animation: igReveal .6s ease-out both; }
.diag-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.diag-head .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diag-head b { font: 600 14px var(--ig-font-sans); }
.diag-meta { font-size: 12.5px; color: var(--ig-text-3); }
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ig-text-2); white-space: nowrap; }
.bars { display: inline-flex; gap: 3px; }
.bars i { display: block; width: 10px; height: 6px; border-radius: 1px; background: var(--ig-border); }
.bars i.on { background: var(--ig-lamp); }
.diag-sum { font: 600 21px/1.25 var(--ig-font-sans); margin: 0; }
.diag-cause { font-size: 14.5px; line-height: 1.55; color: var(--ig-text-2); margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--ig-line-soft); }
.steps .num { font: 500 13px var(--ig-font-mono); color: var(--ig-lamp); padding-top: 1px; }
.steps .a { font: 600 14px/20px var(--ig-font-sans); }
.steps .d { font-size: 13px; line-height: 19px; color: var(--ig-text-2); grid-column: 2; overflow-wrap: anywhere; }
.risk { grid-row: 1; grid-column: 3; align-self: start; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px; border: 1px solid; font-size: 12px; white-space: nowrap; }
.risk .rb { display: inline-flex; gap: 2px; }
.risk .rb i { display: block; width: 3px; height: 9px; border-radius: 1px; background: currentColor; opacity: .25; }
.risk .rb i.on { opacity: 1; }
.risk.faible { color: var(--ig-up); border-color: color-mix(in srgb, var(--ig-up) 38%, transparent); }
.risk.moyen { color: var(--ig-degraded); border-color: color-mix(in srgb, var(--ig-degraded) 38%, transparent); }
.risk.eleve { color: var(--ig-down-text); border-color: color-mix(in srgb, var(--ig-down) 40%, transparent); }
.client-msg { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--ig-inset); border-radius: 10px; padding: 14px 16px; }
.client-msg p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.diag-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ig-text-3); }
.diag-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Graphiques ------------------------------------------------------------------------------------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--ig-font-mono); font-size: 10.5px; fill: var(--ig-text-3); }
.chart .t-down { fill: var(--ig-down-text); }
.chart .t-maint { fill: var(--ig-maint); }
.chart .t-slow { fill: var(--ig-degraded); }
.band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 12px; }
.band span { height: 30px; border-radius: 2px; background: rgba(61,220,151,.55); }
[data-theme="light"] .band span { background: #7FCBA3; }
.band .slow { background: var(--ig-degraded) !important; }
.band .down { background: var(--ig-down) !important; }
.band .maint { background: repeating-linear-gradient(135deg, var(--ig-maint) 0 2px, color-mix(in srgb, var(--ig-maint) 25%, transparent) 2px 4px) !important; }
.band .nodata, .band .future { background: transparent !important; box-shadow: inset 0 0 0 1px var(--ig-line); }
.band-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11.5px var(--ig-font-mono); color: var(--ig-text-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ig-text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.uptime-big { font: 600 13px var(--ig-font-mono); color: var(--ig-up); }

/* Vote des sondes */
.vote svg { width: 100%; height: auto; display: block; }
.vote text { font-family: var(--ig-font-sans); font-size: 12.5px; fill: var(--ig-text); }
.vote text.r { font-family: var(--ig-font-mono); font-size: 11.5px; }
.verdict-line { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--ig-line); background: var(--ig-inset); font-size: 13.5px; margin-top: 8px; }
.verdict-line svg { width: 12px; height: 12px; flex: none; color: var(--c); }

/* Incidents */
.inc { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--ig-line-soft); }
.inc:first-child { border-top: 0; padding-top: 0; }
.inc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.inc-when { font: 500 12.5px var(--ig-font-mono); color: var(--ig-text-3); }
.note-row { display: flex; gap: 8px; align-items: flex-start; }
.note-row .field { flex: 1; height: 34px; }
details.raw summary { cursor: pointer; color: var(--ig-text-2); font-size: 13.5px; }
details.raw[open] summary { margin-bottom: 10px; }

/* Jeton de sonde */
.token-box { display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--ig-inset); border: 1px solid var(--ig-banner-warn-bd); }
.token-box .fl pre { padding: 8px 10px; border-radius: 6px; background: var(--ig-surface); }
.token-box pre { margin: 0; white-space: pre-wrap; word-break: break-all; font: 500 12.5px/1.6 var(--ig-font-mono); color: var(--ig-text); }

/* Aperçu de rapport */
.preview { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; background: #F4F5F2; }
.preview-bar { background: #0E1316; color: #E7EDF0; border-bottom: 1px solid #1F292F; }
.preview-bar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.preview-bar .cad { font-size: 12.5px; color: #A3B0B8; padding-bottom: 10px; }
.preview iframe { display: block; width: 100%; height: calc(100vh - 100px); border: 0; background: #F4F5F2; }

/* ---- Responsive ------------------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .lrow { grid-template-columns: 130px minmax(0, 1fr) 70px 80px; }
  .lrow .hide-md { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .verdict { font-size: 32px; line-height: 38px; }
  .hero { padding: 24px 0 14px; }
  .top .refresh .txt { display: none; }
  .panel { width: 100vw; }
  .panel-head, .panel-body { padding-left: 16px; padding-right: 16px; }
  .panel-title h2 { font-size: 22px; line-height: 28px; }
  .diag { padding: 18px 16px; }
  .steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .risk { grid-row: auto; grid-column: 2; justify-self: start; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 12px 0; border-bottom: 1px solid var(--ig-line-soft); }
  .table td { border: 0; padding: 3px 0; }
  .table td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 92px; font: 500 11px var(--ig-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ig-text-3); }
  .table .act { text-align: left; padding-top: 8px; }
  .lrow { grid-template-columns: 110px minmax(0, 1fr) 64px; }
  .lrow .hide-sm { display: none; }
  .modal-in { padding: 18px 16px; }
}

/* Clients et rapports : une fiche par client (s'adapte à toute largeur, aucun tableau qui déborde) */
.client-list { display: grid; gap: 10px; }
.client-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--ig-border); border-radius: 10px; background: var(--ig-surface); min-width: 0; }
.client-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.client-head strong { overflow-wrap: anywhere; }
.client-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.client-card .note-row { display: flex; gap: 8px; min-width: 0; }
.client-card .note-row .field { flex: 1; min-width: 0; }
.client-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.client-prefs .label { width: 100%; }