/* ============================================================
   Dashboard "Cockpit" — claude-multimedia
   Layout : toolbar + hero + 3-col actions + 2-col état + host strip + timeline
   Glass dark, palette --p-* (jaune), VLAN colors --v1..v6
   ============================================================ */

.dashboard-tab { padding: 0; height: 100%; display: flex; flex-direction: column; }

/* ===== Toolbar ============================================== */
.dash-toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px) saturate(180%);
  flex-shrink: 0;
}
.dash-toolbar .dash-title { color: var(--p-base); font-weight: 600; font-size: .85rem; font-family: 'Menlo', 'Consolas', monospace; text-transform: uppercase; letter-spacing: .12em; }
.dash-toolbar .dash-generated { color: #64748b; font-size: .72rem; font-family: 'Menlo', 'Consolas', monospace; }
.dash-toolbar .dash-spacer { flex: 1; }
.dash-toolbar .dash-live-lbl { font-size: .78rem; color: #d4d4d8; display: flex; align-items: center; gap: .35rem; }
.dash-toolbar button { background: rgba(39, 39, 42, .45); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: .22rem .55rem; font-size: .78rem; cursor: pointer; }
.dash-toolbar button:hover { background: rgba(63, 63, 70, .65); border-color: rgba(var(--p-base-rgb), .3); }

/* ===== Scrollable area ===================================== */
.dashboard-tab > *:not(.dash-toolbar) {
  /* containers all participate in flex flow */
}
.dashboard-tab {
  /* reserve scroll on body of section by wrapping content */
}

.dashboard-tab .dash-hero,
.dashboard-tab .dash-row,
.dashboard-tab .dash-card,
.dashboard-tab .dash-kpis {
  margin: 0 1rem;
}
.dashboard-tab .dash-kpis { margin-top: .9rem; }
.dashboard-tab .dash-kpis + .dash-card { margin-top: .65rem; }  /* gap apres strip KPI (carte suivante = synthese/feedback) */
.dashboard-tab .dash-hero { margin-top: .9rem; }
.dashboard-tab > .dash-card:last-child { margin-bottom: 1.5rem; }

/* Wrapper scroll */
.dashboard-tab {
  overflow-y: auto;
}

/* ===== KPI strip (cartes synthétiques par domaine) ========== */
/* 6 cards sur la largeur complète (1 ligne) — toujours afficher les 6 KPI alignés */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;
}
@media (max-width: 1400px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .7rem .55rem;
  background: linear-gradient(135deg, rgba(39, 39, 42, .35), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid #475569;
  border-radius: 8px;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-width: 0;
}
.kpi-card:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(63, 63, 70, .45), rgba(24, 24, 27, .65)); }
.kpi-card.lvl-ok   { border-left-color: #4ade80; }
.kpi-card.lvl-warn { border-left-color: #fb923c; background: linear-gradient(135deg, rgba(251, 146, 60, .08), rgba(24, 24, 27, .55)); }
.kpi-card.lvl-crit { border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239, 68, 68, .12), rgba(24, 24, 27, .55)); }
.kpi-card.lvl-crit .kpi-value { color: #ef4444; }
.kpi-card.lvl-warn .kpi-value { color: #fb923c; }

.kpi-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding-bottom: .3rem;
}

.kpi-head .kpi-score { margin-left: auto; }
.kpi-icon { font-size: 1.4rem; flex-shrink: 0; color: var(--p-base); display: inline-flex; align-items: center; }
.kpi-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #e4e4e7;
  letter-spacing: .01em;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Menlo', 'Consolas', monospace;
}

.kpi-main {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}
.kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4ade80;
  line-height: 1;
  font-family: 'Menlo', 'Consolas', monospace;
  letter-spacing: -.02em;
}
.kpi-label {
  font-size: .62rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Menlo', 'Consolas', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .12rem .55rem;
}
.kpi-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .65rem;
  color: #94a3b8;
}
.kpi-lines .kl-k { color: #64748b; text-transform: lowercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-lines .kl-v { color: #d4d4d8; font-weight: 600; }
.kpi-lines li.lvl-warn .kl-v { color: #fb923c; }
.kpi-lines li.lvl-crit .kl-v { color: #ef4444; }

/* ===== Score KPI cards (v.33+) — refonte pour 6 KPI domaine ===== */
.kpi-score-card { display: flex; flex-direction: column; }
.kpi-score {
  display: flex; align-items: baseline; gap: .05rem;
  font-family: 'Menlo','Consolas',monospace;
  line-height: 1;
  flex-shrink: 0;
}
.kpi-score .ks-value { font-size: 1.85rem; font-weight: 700; color: inherit; }
.kpi-score .ks-unit  { font-size: 1rem; font-weight: 600; color: inherit; opacity: .75; }
.kpi-score.score-ok   { color: #4ade80; }
.kpi-score.score-warn { color: #fb923c; }
.kpi-score.score-crit { color: #ef4444; }

/* Carte teintée selon score — bordure ENTIÈRE 4 côtés cohérente, dégradé glass, frosted blur */
.kpi-card.kpi-score-card {
  --card-rgb: var(--p-base-rgb);
  border: 1px solid rgba(var(--card-rgb), .4) !important;
  border-left: 2px solid rgba(var(--card-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--card-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--card-rgb), .1) 0%, rgba(var(--card-rgb), .03) 50%, rgba(24, 24, 27, .5) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: inset 8px 0 14px -8px rgba(var(--card-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 18px rgba(0, 0, 0, .28);
  transition: border .2s, background .2s, box-shadow .2s;
}
.kpi-card.kpi-score-card:hover {
  border-color: rgba(var(--card-rgb), .65) !important;
  border-left-color: rgba(var(--card-rgb), 1) !important;
  box-shadow: inset 8px 0 16px -8px rgba(var(--card-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 24px rgba(var(--card-rgb), .25), 0 4px 18px rgba(0, 0, 0, .3);
}
/* Couleur = score, via token d'etat (UI-STATECOLORS point 13) : plus aucun hex en dur */
.kpi-score-card.score-ok   { --card-rgb: var(--c-state-notif-rgb); }
.kpi-score-card.score-warn { --card-rgb: var(--c-state-alert-rgb); }
.kpi-score-card.score-crit { --card-rgb: var(--c-state-alarm-rgb); }
/* Ligne de 5 badges fixes (crit/Alarm/Warn/ok/Info) — toujours affichés, grid 5 cols compact */
.kpi-badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .2rem;
  margin: .35rem 0 0;
  width: 100%;
}
.kpi-badge {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: .2rem;
  background: rgba(0, 0, 0, .35);
  border: 1px solid;
  border-radius: 4px;
  padding: .12rem .15rem;
  font-family: 'Menlo','Consolas',monospace;
  cursor: pointer;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  transition: background .12s, transform .12s, opacity .12s;
}
.kpi-badge:hover:not(:disabled):not(.kb-empty) { transform: translateY(-1px); }
.kpi-badge .kb-v { font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.kpi-badge .kb-k { font-size: .52rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-badge:disabled { cursor: default; }
.kpi-badge.kb-empty { opacity: .4; }

/* Couleurs par niveau (alignées sur badges sidebar tc-b) */
.kpi-badge.kb-crit  { color: var(--v2);   border-color: var(--v2);   background: rgba(var(--v2-rgb), .12); }
.kpi-badge.kb-alarm { color: #f87171;     border-color: #f87171;     background: rgba(248, 113, 113, .1); }
.kpi-badge.kb-warn  { color: #fb923c;     border-color: #fb923c;     background: rgba(251, 146, 60, .12); }
.kpi-badge.kb-ok    { color: var(--v4);   border-color: var(--v4);   background: rgba(var(--v4-rgb), .1); }
.kpi-badge.kb-info  { color: #94a3b8;     border-color: #475569;     background: rgba(100, 116, 139, .1); }

.kpi-foot {
  font-size: .6rem;
  color: #64748b;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: auto;
  padding-top: .3rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Hero (bandeau santé globale) ========================= */
.dash-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, rgba(39, 39, 42, .42), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.hero-status { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.hero-led {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, .6), inset 0 1px 1px rgba(255,255,255,.3);
  flex-shrink: 0;
  transition: background .25s, box-shadow .25s;
}
.hero-led.lvl-warn { background: #fb923c; box-shadow: 0 0 14px rgba(251, 146, 60, .7), inset 0 1px 1px rgba(255,255,255,.3); }
.hero-led.lvl-crit { background: #ef4444; box-shadow: 0 0 16px rgba(239, 68, 68, .8), inset 0 1px 1px rgba(255,255,255,.3); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(239, 68, 68, .6), inset 0 1px 1px rgba(255,255,255,.3); }
  50%      { box-shadow: 0 0 22px rgba(239, 68, 68, 1),   inset 0 1px 1px rgba(255,255,255,.3); }
}
.hero-text { min-width: 0; }
.hero-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e4e4e7;
  line-height: 1.25;
  font-family: 'Menlo', 'Consolas', monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hero-sub {
  font-size: .72rem;
  color: #94a3b8;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: .15rem;
}

/* Hero cluster strip (5 mini VMs) */
.hero-cluster { display: flex; gap: .35rem; flex-wrap: wrap; }
.cluster-vm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .7rem;
  color: #d4d4d8;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cluster-vm:hover { background: rgba(63, 63, 70, .55); }
.cluster-vm .cv-led { width: 7px; height: 7px; border-radius: 50%; background: #475569; flex-shrink: 0; }
.cluster-vm.st-up   .cv-led { background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, .8); }
.cluster-vm.st-down .cv-led { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, .8); }
.cluster-vm.st-up.vlan-1 { border-left-color: var(--v1); }
.cluster-vm.st-up.vlan-2 { border-left-color: var(--v2); }
.cluster-vm.st-up.vlan-3 { border-left-color: var(--v3); }
.cluster-vm.st-up.vlan-4 { border-left-color: var(--v4); }
.cluster-vm.st-down { background: rgba(239, 68, 68, .08); border-left-color: #ef4444; }

/* Hero counter pills */
.hero-counters { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .65rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  color: #d4d4d8;
  font-size: .72rem;
  font-family: 'Menlo', 'Consolas', monospace;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hero-pill:hover { background: rgba(63, 63, 70, .65); }
.hero-pill.lvl-ok   { color: #4ade80; border-color: rgba(74, 222, 128, .3); }
.hero-pill.lvl-warn { color: #fb923c; border-color: rgba(251, 146, 60, .35); background: rgba(251, 146, 60, .06); }
.hero-pill.lvl-crit { color: #ef4444; border-color: rgba(239, 68, 68, .4);  background: rgba(239, 68, 68, .08); }

/* ===== Rows ================================================== */
.dash-row { display: grid; gap: .85rem; margin-top: .85rem; }
.dash-row-3 { grid-template-columns: repeat(3, 1fr); }
.dash-row-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .dash-row-3 { grid-template-columns: 1fr; }
  .dash-row-2 { grid-template-columns: 1fr; }
}

/* ===== Card générique ======================================== */
/* ---------------------------------------------------------------------------
   E42 — declaration unique de .dash-card.
   Deux blocs se disputaient cette classe : le second gagnait le fond, la bordure et le
   flou par l'ordre, le rayon et le remplissage par `!important` ; le premier gardait
   l'ombre, l'espacement et la marge haute. Le rendu etait donc la somme des deux, et
   aucun des deux ne le decrivait. Voici les valeurs reellement appliquees, en une seule
   declaration — sans `!important`, qui n'arbitre plus rien.
   --------------------------------------------------------------------------- */
.dash-card {
  background: rgba(24, 24, 27, .42);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: .85rem 1rem;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .85rem;
  height: 100%;                  /* remplit la cellule de grille → hauteurs egales par rangee */
  box-sizing: border-box;
}
.dash-card .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding-bottom: .4rem;
}
.dash-card .card-head h3 {
  margin: 0;
  font-size: .78rem;
  color: #e4e4e7;
  letter-spacing: .04em;
  font-weight: 600;
}
.dash-card .card-hint {
  font-size: .65rem;
  color: #64748b;
  font-family: 'Menlo', 'Consolas', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-card .card-hint.ok   { color: #4ade80; }
.dash-card .card-hint.warn { color: #fb923c; }
.dash-card .card-hint.crit { color: #ef4444; }

.dash-card .card-list { display: flex; flex-direction: column; gap: .25rem; }
.dash-card .card-section { display: flex; flex-direction: column; gap: .25rem; }
.dash-card .cs-label {
  font-size: .62rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'Menlo', 'Consolas', monospace;
  margin-top: .25rem;
}
.dash-card .cs-label.warn { color: #fb923c; }

.dash-card .card-empty {
  color: #64748b;
  font-size: .72rem;
  font-style: italic;
  text-align: center;
  padding: .8rem .4rem;
}
.dash-card .card-empty.crit { color: #ef4444; font-style: normal; }

.dash-card .card-foot {
  margin-top: auto;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.dash-card .card-foot a {
  color: #64748b;
  font-size: .68rem;
  font-family: 'Menlo', 'Consolas', monospace;
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .15s;
}
.dash-card .card-foot a:hover { color: var(--p-base); }

/* ===== Row wrapper + expand inline =========================== */
.row-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ===== Row item (cards alerts/findings/backlog/tasks) ======== */

/* ===== Expand block (rx-*) ==================================== */
.row-expand {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .04);
  border-top: none;
  border-left: 3px solid rgba(var(--p-base-rgb), .35);
  border-radius: 0 0 5px 5px;
  padding: .55rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .7rem;
  margin-bottom: .25rem;
}

.rx-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .5rem;
  align-items: start;
}
.rx-k {
  color: #64748b;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: .12rem;
}
.rx-v {
  color: #d4d4d8;
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.rx-v code {
  background: rgba(255, 255, 255, .06);
  padding: .04rem .25rem;
  border-radius: 3px;
  font-size: .68rem;
}
.rx-v .lvl-ok   { color: #4ade80; }
.rx-v .lvl-warn { color: #fb923c; }
.rx-v .lvl-crit { color: #ef4444; }
.rx-pre {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  padding: .35rem .5rem;
  margin: .15rem 0 0;
  font-size: .66rem;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.rx-output { max-height: 240px; }
.rx-empty { color: #64748b; font-style: italic; font-size: .7rem; }

/* Actions inside finding expand */
.rx-actions { display: flex; flex-direction: column; gap: .35rem; }
.rx-action {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 2px solid rgba(148, 163, 184, .4);
  border-radius: 4px;
  padding: .35rem .5rem;
}
.rx-action.risk-safe   { border-left-color: #4ade80; }
.rx-action.risk-low    { border-left-color: #4ade80; }
.rx-action.risk-medium { border-left-color: #fb923c; }
.rx-action.risk-high   { border-left-color: #ef4444; }
.rx-action.risk-destructive { border-left-color: #b91c1c; }
.rx-act-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.rx-act-label { color: #e4e4e7; font-size: .7rem; flex: 1 1 auto; min-width: 200px; }
.rx-act-risk {
  font-size: .56rem;
  padding: .08rem .3rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.rx-act-risk.r-safe, .rx-act-risk.r-low { background: rgba(74, 222, 128, .15); color: #86efac; border: 1px solid rgba(74, 222, 128, .35); }
.rx-act-risk.r-medium                   { background: rgba(251, 146, 60, .18); color: #fed7aa; border: 1px solid rgba(251, 146, 60, .35); }
.rx-act-risk.r-high                     { background: rgba(239, 68, 68, .18);  color: #fecaca; border: 1px solid rgba(239, 68, 68, .35); }
.rx-act-risk.r-destructive              { background: rgba(185, 28, 28, .25);  color: #fecaca; border: 1px solid rgba(185, 28, 28, .5); }
.rx-act-rev {
  font-size: .56rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rx-act-exec {
  margin-left: auto;
  font-size: .62rem;
  padding: .15rem .5rem;
  background: rgba(59, 130, 246, .15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, .4);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .12s, color .12s;
}
.rx-act-exec:hover:not(:disabled) {
  background: rgba(59, 130, 246, .3);
  color: #dbeafe;
}
.rx-act-exec:disabled {
  opacity: .6;
  cursor: wait;
}
.rx-act-cmd {
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 3px;
  padding: .3rem .45rem;
  margin: .25rem 0 0;
  font-size: .66rem;
  color: var(--p-light);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 700px) {
  .rx-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* ===== VLAN grid ============================================ */
.vlan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem; }
.vlan-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
}
.vlan-row.ok   { border-left-color: #4ade80; }
.vlan-row.warn { border-left-color: #fb923c; }
.vlan-row.crit { border-left-color: #ef4444; background: rgba(239, 68, 68, .06); }
.vlan-row .vl-tag {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  padding: .1rem .35rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.vlan-row.vlan-1 .vl-tag { color: var(--v1); border-color: rgba(var(--v1-rgb), .4); }
.vlan-row.vlan-2 .vl-tag { color: var(--v2); border-color: rgba(var(--v2-rgb), .4); }
.vlan-row.vlan-3 .vl-tag { color: var(--v3); border-color: rgba(var(--v3-rgb), .4); }
.vlan-row.vlan-4 .vl-tag { color: var(--v4); border-color: rgba(var(--v4-rgb), .4); }
.vlan-row.vlan-5 .vl-tag { color: var(--v5); border-color: rgba(var(--v5-rgb), .4); }
.vlan-row.vlan-6 .vl-tag { color: var(--v6); border-color: rgba(var(--v6-rgb), .4); }
.vlan-row .vl-name { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlan-row .vl-counts { display: inline-flex; gap: .3rem; align-items: baseline; }
.vlan-row .vc       { font-size: .72rem; }
.vlan-row .vc.up    { color: #4ade80; font-weight: 600; }
.vlan-row .vc-sep   { color: #64748b; }
.vlan-row .vc.tot   { color: #94a3b8; }
.vlan-row .vc.dn    { color: #ef4444; font-weight: 600; }
.vlan-row .vc.unk   { color: #64748b; }

/* ===== Host strip (CPU/RAM/Disk + meta) — card couleur principale --p-base ===== */
.dash-host {
  padding: .85rem 1rem !important;
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
  border-radius: 8px;
  min-height: auto;
  height: auto;
  overflow: visible;
}
.host-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, 1fr);
  gap: 1.1rem;
  align-items: center;
}
@media (max-width: 1000px) {
  .host-strip { grid-template-columns: 1fr; }
}
.host-info { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hi-name { color: var(--p-base); font-weight: 600; font-size: .85rem; font-family: 'Menlo', 'Consolas', monospace; }
.hi-meta { color: #94a3b8; font-size: .68rem; font-family: 'Menlo', 'Consolas', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-meta.sub { color: #64748b; font-size: .65rem; }
.hi-meta .lvl-ok   { color: #4ade80; }
.hi-meta .lvl-warn { color: #fb923c; }

.host-gauge { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hg-line { display: flex; justify-content: space-between; align-items: baseline; }
.hg-name { color: #94a3b8; font-size: .7rem; font-family: 'Menlo', 'Consolas', monospace; letter-spacing: .04em; }
.hg-val  { color: var(--p-base); font-family: 'Menlo', 'Consolas', monospace; font-size: .82rem; font-weight: 600; }
.hg-val.warn { color: #fb923c; }
.hg-val.crit { color: #ef4444; }
.hg-bar  { height: 5px; background: rgba(0, 0, 0, .35); border-radius: 3px; overflow: hidden; }
.hg-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--p-base), var(--p-glow)); transition: width .4s; }
.hg-bar.warn > span { background: linear-gradient(90deg, #fb923c, #f97316); }
.hg-bar.crit > span { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.hg-detail { color: #64748b; font-size: .62rem; font-family: 'Menlo', 'Consolas', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Timeline (activité 6h) =============================== */
.dash-timeline { padding-bottom: .55rem; }
.timeline {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: .35rem;
}
.tl-row {
  display: grid;
  grid-template-columns: 48px 22px 64px 110px 1fr;
  gap: .5rem;
  align-items: center;
  padding: .25rem .45rem;
  border-left: 2px solid #475569;
  border-radius: 3px;
  background: rgba(0, 0, 0, .18);
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .68rem;
}
.tl-row.lvl-crit { border-left-color: #ef4444; background: rgba(239, 68, 68, .06); }
.tl-row.lvl-warn { border-left-color: #fb923c; background: rgba(251, 146, 60, .04); }
.tl-row.lvl-info { border-left-color: #22d3ee; }
.tl-time   { color: #94a3b8; font-size: .65rem; }
.tl-kind   { font-size: .9rem; text-align: center; }
.tl-tag    { font-size: .56rem; padding: .08rem .3rem; border-radius: 3px; text-align: center; letter-spacing: .04em; background: rgba(255,255,255,.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,.08); text-transform: uppercase; }
.tl-tag.tag-crit, .tl-tag.tag-critical { background: rgba(239, 68, 68, .22); color: #fecaca; border-color: rgba(239, 68, 68, .4); }
.tl-tag.tag-error                       { background: rgba(239, 68, 68, .2);  color: #fecaca; border-color: rgba(239, 68, 68, .35); }
.tl-tag.tag-warn                        { background: rgba(251, 146, 60, .2); color: #fed7aa; border-color: rgba(251, 146, 60, .35); }
.tl-source { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; }
.tl-msg    { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 800px) {
  .tl-row { grid-template-columns: 44px 20px 1fr; }
  .tl-row > .tl-tag, .tl-row > .tl-source { display: none; }
}

/* ===== Ping matrix (carte optionnelle) ====================== */
.dash-ping { padding-bottom: .65rem; }
.pingmatrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .35rem;
}
.pingcell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem;
  align-items: center;
  padding: .35rem .55rem;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .06);
  border-left: 3px solid #475569;
  border-radius: 5px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
}
.pingcell .pc-info { min-width: 0; }
.pingcell .p-name { color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pingcell .p-ip { color: #64748b; font-size: .62rem; }
.pingcell .p-rtt { font-weight: 600; font-size: .76rem; }
.pingcell.up   { border-left-color: #4ade80; }
.pingcell.up   .p-rtt { color: #4ade80; }
.pingcell.down { border-left-color: #ef4444; background: rgba(239, 68, 68, .08); }
.pingcell.down .p-rtt { color: #ef4444; }
.pingcell.unknown { border-left-color: #64748b; }
.pingcell.unknown .p-rtt { color: #64748b; }
.pingcell.vlan-1 { background: linear-gradient(135deg, rgba(var(--v1-rgb), .1), rgba(0,0,0,.26)); border-left-color: var(--v1); }
.pingcell.vlan-2 { background: linear-gradient(135deg, rgba(var(--v2-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v2); }
.pingcell.vlan-3 { background: linear-gradient(135deg, rgba(var(--v3-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v3); }
.pingcell.vlan-4 { background: linear-gradient(135deg, rgba(var(--v4-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v4); }
.pingcell.vlan-5 { background: linear-gradient(135deg, rgba(var(--v5-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v5); }
.pingcell.vlan-6 { background: linear-gradient(135deg, rgba(var(--v6-rgb), .08), rgba(0,0,0,.26)); border-left-color: var(--v6); }

/* Scrollbar du timeline (cohérent avec portal.css) */
.timeline::-webkit-scrollbar { width: 6px; }
.timeline::-webkit-scrollbar-track { background: rgba(24, 24, 27, .2); }
.timeline::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--p-base-rgb), .35), rgba(var(--p-glow-rgb), .35)); border-radius: 3px; }
.timeline::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--p-base-rgb), .7), rgba(var(--p-glow-rgb), .5)); box-shadow: 0 0 10px rgba(var(--p-glow-rgb), .4); }

/* ============================================================
   KPI Explain — popup pédagogique au survol des cards Dashboard
   ============================================================ */
.kpi-explain-pop {
  position: fixed !important;
  z-index: 99999 !important;
  width: 420px; max-width: calc(100vw - 24px);
  padding: .85rem 1rem;
  background: rgba(20, 20, 23, .98);
  border: 1px solid rgba(var(--p-base-rgb), .5);
  border-radius: 8px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--p-glow-rgb), .15);
  color: #e4e4e7; font-size: .82rem; line-height: 1.5;
  animation: kep-in .18s ease-out;
  pointer-events: auto;
}
.kpi-explain-pop[hidden] { display: none !important; }
.kpi-explain-pop { overflow-y: auto; }

/* ============================================================
   Cards collapsibles + bouton pin (📌)
   Cards exclues : card-host, dash-kpis, dash-hero (toujours visibles)
   ============================================================ */
.dash-card > details.dash-collapse {
  margin: -.6rem -.85rem;     /* compense le padding du parent .dash-card */
  padding: .35rem .85rem;
  border-radius: 8px;
}
.dash-card > details.dash-collapse > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 6px;
  transition: background .12s;
}
.dash-card > details.dash-collapse > summary::-webkit-details-marker { display: none; }
.dash-card > details.dash-collapse > summary:hover { background: rgba(var(--p-base-rgb), .05); }
.dash-card > details.dash-collapse[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .07); margin-bottom: .55rem; padding-bottom: .55rem; }
.dc-chev { color: var(--p-light); opacity: .55; font-size: .85rem; transition: transform .15s; flex-shrink: 0; width: 12px; }
.dash-card > details.dash-collapse[open] > summary .dc-chev { transform: rotate(90deg); color: var(--p-base); opacity: 1; }
.dc-title {
  color: var(--p-base); font-weight: 600; font-size: .95rem;
  flex-shrink: 0;
}
.dc-resume {
  display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  flex: 1; margin-left: .3rem;
}
.dc-resume .dc-b {
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace; font-weight: 600;
  padding: .12rem .4rem; border-radius: 3px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; border-color: rgba(148, 163, 184, .35);
  background: rgba(0, 0, 0, .15);
}
.dc-resume .dc-b.crit { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dc-resume .dc-b.warn { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
.dc-resume .dc-b.ok   { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .1); }

/* Body de la card collapsible */
.dc-body { padding: 0; }

/* ============================================================
   Harmonisation pro du dashboard — alignements, paddings, typo
   ============================================================ */
/* Cards : padding cohérent */

/* Marges entre éléments TOP-LEVEL du tab seulement (pas pour grid items) */
.dashboard-tab > .dash-card + .dash-card,
.dashboard-tab > .dash-card + .dash-row,
.dashboard-tab > .dash-row + .dash-card,
.dashboard-tab > .dash-row + .dash-row { margin-top: .65rem; }

/* Rows : gaps cohérents + stretch explicite (toutes cards = même hauteur) */
.dash-row {
  display: grid;
  gap: .65rem;
  align-items: stretch !important;
}
.dash-row.dash-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row.dash-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .dash-row.dash-row-3, .dash-row.dash-row-2 { grid-template-columns: 1fr; } }

/* Le <details> remplit la card, le body remplit le reste */
.dash-card > details.dash-collapse {
  flex: 1; display: flex; flex-direction: column;
  margin: -.85rem -1rem;            /* compense le padding du parent */
  padding: 0 1rem;                  /* horizontal seulement */
}
.dash-card > details.dash-collapse > summary { flex-shrink: 0; }
.dash-card > details.dash-collapse > .dc-body { flex: 1; padding-bottom: .85rem; }
.dash-card > details.dash-collapse:not([open]) > .dc-body { display: none; }

/* Titres h3 dans cards : tous identiques */
.dash-card h3,
.dsy-head h3,
.dfb-head h3 {
  margin: 0 0 .55rem !important;
  padding: 0 !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: var(--p-base) !important;
  letter-spacing: .005em;
  line-height: 1.3;
}

/* Quand wrappé en collapsible, le h3 disparaît du body — on adapte */
.dash-card > details.dash-collapse .dc-body > h3:first-child { display: none; }
.dash-card > details.dash-collapse .dc-body > .dsy-head:first-child h3,
.dash-card > details.dash-collapse .dc-body > .dfb-head:first-child h3 { display: none; }

/* (v.46) Ancienne règle .dash-host { padding: 0 !important } neutralisée :
 * la card host a maintenant son propre padding/border/background couleur principale --p-base
 * (cf. bloc "Host strip" plus haut). */

/* Hero : alignement uniforme */
.dash-hero {
  padding: .85rem 1rem;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
}

/* KPIs strip : 6 cards sur 1 ligne (largeur complète) */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}
@media (max-width: 1400px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* KPI card : padding et border cohérents */
.kpi-card {
  padding: .65rem .8rem !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(39, 39, 42, .35), rgba(24, 24, 27, .55));
  border: 1px solid rgba(255, 255, 255, .06);
  text-align: left;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.kpi-card .kpi-head { padding-bottom: .35rem !important; margin-bottom: .35rem !important; }
.kpi-card .kpi-value { font-size: 1.6rem !important; font-weight: 700; line-height: 1; font-family: 'Menlo','Consolas',monospace; }
.kpi-card .kpi-label { font-size: .7rem !important; color: #94a3b8; margin-left: .35rem; }
.kpi-card .kpi-lines { margin: .35rem 0 0 !important; padding: 0 !important; list-style: none; display: grid; gap: .15rem; font-size: .7rem; font-family: 'Menlo','Consolas',monospace; }
.kpi-card .kpi-lines li { display: flex; justify-content: space-between; padding: .08rem 0; }
.kpi-card .kpi-lines li .kl-k { color: #94a3b8; }
.kpi-card .kpi-lines li .kl-v { color: #d4d4d8; font-weight: 600; }
.kpi-card .kpi-lines li.lvl-crit .kl-v { color: var(--v2); }
.kpi-card .kpi-lines li.lvl-warn .kl-v { color: #fb923c; }
.kpi-card .kpi-foot { margin-top: .4rem; font-size: .65rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.05); }

/* Summary collapsible — flex avec calage strict :
   GAUCHE : [chev] [titre]
   DROITE  : [badges-resume] [score-bloc] [pin]
   Le titre est à gauche, tout le reste poussé à droite via margin-left:auto
   sur le premier élément à droite. Alignement vertical : flex-end (badges
   collés au bas du score). */
.dash-card > details.dash-collapse > summary {
  display: flex !important;
  align-items: flex-end !important;
  gap: .55rem;
  min-height: 50px;
  padding: .45rem .65rem !important;
}
.dc-chev { align-self: center !important; flex-shrink: 0; }
.dc-title {
  font-size: .92rem !important; line-height: 1.2;
  align-self: center !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.dc-resume {
  font-size: .75rem; line-height: 1.2;
  display: inline-flex; align-items: flex-end; gap: .3rem; flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;            /* PUSH everything droite */
  padding-bottom: .15rem;
  flex-shrink: 1; min-width: 0;
}
.dc-resume:empty { display: none; }
.dc-resume .dc-b { padding: .1rem .4rem !important; line-height: 1.4; white-space: nowrap; }

/* Bloc score à droite (avant le pin) — forme carrée mise en valeur */
.dc-score-slot {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
}
.dc-score-slot > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; height: 38px;
  padding: 0 .55rem;
  border-radius: 6px; border: 1.5px solid;
  font-size: 1.15rem; font-weight: 700;
  font-family: 'Menlo','Consolas',monospace;
  letter-spacing: -.01em;
  white-space: nowrap; line-height: 1;
}
.dc-score-slot > * small {
  font-size: .55em; opacity: .65; margin-left: 1px; font-weight: 600;
  line-height: 1; align-self: center;
}
/* Si pas de score, le resume est suivi directement du pin (gap normal) */
.dc-summary > .dc-resume + .dc-pin { margin-left: 0; }

/* Toolbar : aligné centré */
.dash-toolbar {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: .65rem;
}
.dash-toolbar .dash-title { font-size: 1rem; font-weight: 600; color: var(--p-base); }
.dash-toolbar .dash-generated { font-size: .72rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; }
.dash-toolbar .dash-spacer { flex: 1; }
.dash-toolbar label { font-size: .78rem; color: #d4d4d8; display: flex; align-items: center; gap: .3rem; }

/* Boutons compacts (t-btn et icon-btn) tous alignés */
.dash-toolbar .t-btn,
.dash-toolbar .icon-btn {
  padding: .25rem .55rem;
  font-size: .78rem; line-height: 1.3;
  border-radius: 4px;
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
}
.dash-toolbar .t-btn:hover, .dash-toolbar .icon-btn:hover { background: rgba(63, 63, 70, .7); border-color: rgba(var(--p-base-rgb), .35); }

/* Synthèse / feedback : harmonisation interne */
.dsy-head, .dfb-head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-bottom: .55rem;
}
.dsy-meta { font-size: .7rem; color: #94a3b8; font-family: 'Menlo','Consolas',monospace; flex: 1; }
.dsy-counts, .dsy-actions { gap: .35rem !important; }
.dfb-form textarea { font-size: .82rem; min-height: 56px; }
.dfb-actions button { padding: .35rem .9rem; font-size: .82rem; }

/* (v.42) Anciennes règles `.kpi-card.lvl-*` qui mettaient un border-left coloré selon le niveau d'alerte
 * supprimées : la coloration de la card KPI est désormais portée par `.kpi-score-card.score-*`
 * (bordure 4 côtés selon le score /100), évitant l'incohérence "bord-gauche rouge sur score orange". */

/* Container racine de l'onglet : padding interne propre */
section[data-tab="dashboard"].dashboard-tab,
.dashboard-tab { padding: 0 !important; overflow: auto; }
.dashboard-tab > .dash-toolbar { margin: 0; }
.dashboard-tab > *:not(.dash-toolbar) { margin-left: .8rem; margin-right: .8rem; }
.dashboard-tab > *:not(.dash-toolbar):first-of-type { margin-top: .65rem; }
.dashboard-tab > *:last-child { margin-bottom: .8rem; }
@keyframes kep-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kep-title {
  font-weight: 600; color: var(--p-base);
  font-size: .9rem; margin-bottom: .55rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(var(--p-base-rgb), .25);
}
.kep-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: .5rem; padding: .25rem 0;
  font-size: .78rem;
}
.kep-w {
  color: var(--p-light); font-weight: 600; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding-top: .12rem; font-family: 'Menlo','Consolas',monospace;
}
.kep-t { color: #d4d4d8; line-height: 1.45; }
.kep-row.kep-risk .kep-w { color: #fb923c; }
.kep-row.kep-risk .kep-t { color: #fed7aa; }
.kep-row.kep-enjeu .kep-w { color: var(--v4); }
.kep-row.kep-enjeu .kep-t { color: #bbf7d0; }

/* Hover halo (clic sur la card = navigation vers l'onglet cible) */
.kpi-card { position: relative; }
.kpi-card:hover { box-shadow: 0 0 0 1px rgba(var(--p-base-rgb), .35), 0 0 18px rgba(var(--p-glow-rgb), .25); }

/* Icône ⓘ collée à droite du titre dans le head (plus en absolute) */

/* Score-card : badges poussés en bas (margin-top: auto sur kpi-badges) */
.kpi-score-card .kpi-badges { margin-top: auto; margin-bottom: 0; }
.kpi-score-card .kpi-foot { margin-top: 0; padding-top: 0; border-top: none; }

/* Bouton close du popup */
.kep-close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: #94a3b8; font-size: 1.1rem; cursor: pointer;
  line-height: 1; padding: 0; border-radius: 4px;
}
.kep-close:hover { color: #fecaca; background: rgba(255, 255, 255, .08); }
.kpi-explain-pop { position: relative; padding-right: 2rem !important; }

/* ============================================================
   Synthèse audit Claude (sous host card)
   ============================================================ */
/* Card synthèse audit Claude — pattern card host (couleur principale --p-base, glass épais, tranche gauche) */
.dash-synthesis {
  padding: .85rem 1rem !important;
  margin-top: .65rem !important;          /* espacement avec strip KPI au-dessus */
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28);
  border-radius: 8px;
  overflow: visible;
  min-height: auto; height: auto;
}

/* Score en grand à droite — pattern KPI (pas encadré, gros chiffre + % unit) */
/* Override .dc-score-slot > * (1.15rem + border + height fixe) qui écrasait la taille */
.dash-synthesis .dc-score-slot {
  margin-left: auto;
  align-self: flex-end;            /* aligne le bas du score avec le bas des badges */
  display: inline-flex; align-items: baseline;
}
.dash-synthesis .dc-score-slot > .dsy-score-big {
  display: inline-flex; align-items: baseline; gap: .05rem;
  font-family: 'Menlo','Consolas',monospace; line-height: 1;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  font-size: inherit !important;       /* neutralise .dc-score-slot > * (1.15rem) */
  letter-spacing: 0 !important;
}
.dash-synthesis .dsy-score-big .dsb-value { font-size: 1.85rem !important; font-weight: 700; line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-unit  { font-size: 1rem !important; font-weight: 600; opacity: .75; }
.dash-synthesis .dsy-score-big.score-ok   { color: #4ade80; }
.dash-synthesis .dsy-score-big.score-warn { color: #fb923c; }
.dash-synthesis .dsy-score-big.score-crit { color: #ef4444; }

/* Alignement : titre + badges + score sur la MÊME baseline (ligne du titre) */
.dash-synthesis .dc-summary { align-items: baseline; }
.dash-synthesis .dc-summary .dc-resume { align-self: baseline; }
.dash-synthesis .dc-score-slot { align-self: baseline; }
.dash-synthesis .dc-score-slot > .dsy-score-big { align-items: baseline; line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-value { line-height: 1; }
.dash-synthesis .dsy-score-big .dsb-unit { line-height: 1; }

/* Synthèse texte — pas de troncature CSS, Claude self-limite via le prompt
   (depth_summary_lines). -webkit-line-clamp casse le rendu markdown
   (paragraphes/bullets/bold prennent plus de lignes visuelles). */
.dash-synthesis .dsy-summary {
  display: block;
  overflow: visible;
  white-space: normal;            /* le markdownLite ajoute déjà <br>/<ul> structurés */
  margin-bottom: .55rem;
}

/* Mise en forme markdown du summary : bold, bullets, code inline */
.dash-synthesis .dsy-summary strong {
  color: var(--p-base);
  font-weight: 600;
}
.dash-synthesis .dsy-summary code {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(var(--p-base-rgb), .2);
  border-radius: 3px;
  padding: 0 .3rem;
  font-family: 'Menlo','Consolas',monospace;
  font-size: .82em;
  color: var(--p-light);
}
.dash-synthesis .dsy-summary .dsy-md-ul {
  margin: .25rem 0 .25rem 1.1rem;
  padding: 0;
  list-style: disc;
}
.dash-synthesis .dsy-summary .dsy-md-ul li {
  margin: .15rem 0;
  line-height: 1.5;
}
.dash-synthesis .dsy-summary .dsy-md-ul li::marker {
  color: var(--p-base);
}
/* Séparateur de paragraphe (ligne vide en entrée → demi-interligne d'air) */
.dash-synthesis .dsy-summary .dsy-md-para {
  height: .55rem;
}

/* Combo profondeur d'analyse */
.dash-synthesis .dsy-combo-row {
  display: flex; align-items: center; gap: .55rem;
  margin: .25rem 0 .55rem;
  font-size: .76rem; color: #94a3b8;
}
.dash-synthesis .dsy-depth {
  background: rgba(0, 0, 0, .35); color: #e4e4e7;
  border: 1px solid rgba(var(--p-base-rgb), .35);
  border-radius: 4px; padding: .2rem .5rem;
  font-size: .76rem; font-family: inherit; cursor: pointer;
}
.dash-synthesis .dsy-depth:focus { outline: none; border-color: var(--p-base); }

/* Bandeau d'erreur audit (timeout, parse fail, etc.) */
.dash-synthesis .dsy-error-banner {
  margin: .25rem 0 .55rem;
  padding: .5rem .75rem;
  background: rgba(var(--v2-rgb), .08);
  border: 1px solid rgba(var(--v2-rgb), .35);
  border-left: 3px solid var(--v2);
  border-radius: 5px;
  color: #fecaca;
  font-size: .82rem;
  line-height: 1.5;
  display: flex; align-items: center; gap: .4rem;
}
.dash-synthesis .dsy-error-banner strong { color: var(--v2); }

/* Bouton spinner — toujours visible, statique au repos (cliquable pour lancer audit), tournant si audit en cours */
@keyframes dsy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dash-synthesis .dsy-spinner {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: .45rem;
  background: transparent; border: none; padding: .15rem;
  color: var(--p-base);
  opacity: .45;                                /* éteint / au repos */
  cursor: pointer;
  border-radius: 50%;
  transition: opacity .15s, background .15s, transform .15s;
  vertical-align: middle;
}
.dash-synthesis .dsy-spinner:hover { opacity: 1; background: rgba(var(--p-base-rgb), .15); }
.dash-synthesis .dsy-spinner.is-running {
  opacity: 1;
  cursor: default;
  animation: dsy-spin 1.4s linear infinite;
}
.dash-synthesis .dsy-spinner.is-running:hover { background: transparent; }

/* Sous-section collapsable « Points d'attention » regroupant tous les findings */
.dash-synthesis .dsy-findings-block {
  margin-top: .35rem;
  border: 1px solid rgba(var(--p-base-rgb), .2);
  border-radius: 5px;
  background: rgba(0, 0, 0, .15);
}
.dash-synthesis .dsy-findings-summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .55rem;
  cursor: pointer;
  list-style: none;
  font-size: .8rem;
}
.dash-synthesis .dsy-findings-summary::-webkit-details-marker { display: none; }
.dash-synthesis .dsy-fb-chev {
  display: inline-block;
  color: var(--p-base);
  transition: transform .12s;
  font-size: .8rem;
}
.dash-synthesis .dsy-findings-block[open] .dsy-fb-chev { transform: rotate(90deg); }
.dash-synthesis .dsy-fb-title {
  font-weight: 600; color: var(--p-base);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem;
}
.dash-synthesis .dsy-fb-counts { display: inline-flex; gap: .35rem; margin-left: auto; align-items: center; }
.dash-synthesis .dsy-fb-c {
  font-size: .65rem; padding: .08rem .4rem; border-radius: 3px; border: 1px solid;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600;
}
.dash-synthesis .dsy-fb-c.open  { color: #fb923c; border-color: rgba(251, 146, 60, .4); background: rgba(251, 146, 60, .1); }
.dash-synthesis .dsy-fb-c.acc   { color: var(--v4); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .08); }
.dash-synthesis .dsy-fb-c.total { color: #94a3b8; border-color: rgba(148, 163, 184, .3); background: rgba(100, 116, 139, .08); }

/* Liste findings dans la sous-section (ouverte) */
.dash-synthesis .dsy-findings-block[open] .dsy-top {
  display: block;
  padding: .25rem .55rem .55rem;
  border-top: 1px solid rgba(var(--p-base-rgb), .12);
}
.dash-synthesis .dsy-finding { margin-bottom: .25rem; padding: .25rem .55rem; }
.dash-synthesis .dsy-finding[open] { padding: .25rem .55rem .55rem; }
.dash-synthesis .dsy-finding.is-accepted { opacity: .55; }

/* Override : layout flex pour que le badge "accepté" reste sur la même ligne que axe/level/title */
.dash-synthesis .dsy-finding summary {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}
.dash-synthesis .dsy-finding summary .dsf-axe { flex-shrink: 0; min-width: 90px; }
.dash-synthesis .dsy-finding summary .dsf-level { flex-shrink: 0; min-width: 60px; text-align: center; }
.dash-synthesis .dsy-finding summary .dsf-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-synthesis .dsf-acc-tag {
  flex-shrink: 0;
  margin-right: 1rem;       /* éviter chevauchement avec le chevron ▸ en absolute right .5rem */
  font-size: .6rem;
  color: var(--v4); border: 1px solid rgba(74, 222, 128, .35);
  padding: .05rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace;
}
.dash-synthesis .dsy-actions { padding-top: .55rem; margin-top: .35rem; border-top: 1px solid rgba(var(--p-base-rgb), .15); }

/* Badge target : système concerné par le finding (et per-action si différent) */
.dash-synthesis .dsf-target {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace;
  color: var(--p-light); border: 1px solid rgba(var(--p-base-rgb), .35);
  background: rgba(var(--p-base-rgb), .08);
  padding: .08rem .4rem; border-radius: 3px;
  font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-synthesis .dsf-target svg { opacity: .9; }
.dash-synthesis .dsf-target-sec { color: #94a3b8; font-size: .55rem; margin-left: .15rem; }

.dash-synthesis .dsf-act-target {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .58rem; font-family: 'Menlo','Consolas',monospace;
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, .35);
  background: rgba(251, 146, 60, .08);
  padding: .05rem .3rem; border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

/* Cycle de vie des actions : appliqué (grisé+badge OK) / échec (badge KO) */
.dsf-action.is-applied {
  opacity: .55;
  background: rgba(var(--v4-rgb), .04);
  border-left: 2px solid rgba(var(--v4-rgb), .35);
}

/* Finding où TOUTES les actions sont appliquées — bandeau de fin + tag */
.dsy-finding.is-all-applied .dsf-axe,
.dsy-finding.is-all-applied .dsf-title {
  /* léger surlignage vert pour signaler "presque résolu" */
}
.dsf-allapplied-tag {
  margin-left: auto; font-size: .6rem;
  color: var(--v4); border: 1px solid rgba(var(--v4-rgb), .45);
  padding: .05rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace;
  background: rgba(var(--v4-rgb), .1);
}
.dsf-allapplied-banner {
  margin: .5rem 0;
  padding: .5rem .75rem;
  background: rgba(var(--v4-rgb), .08);
  border: 1px solid rgba(var(--v4-rgb), .35);
  border-left: 3px solid var(--v4);
  border-radius: 5px;
  color: #d4d4d8;
  font-size: .82rem;
  line-height: 1.5;
}
.dsf-allapplied-banner strong { color: var(--v4); }
.t-btn.dsf-resolved.primary {
  background: rgba(var(--v4-rgb), .15) !important;
  color: var(--v4) !important;
  border-color: rgba(var(--v4-rgb), .5) !important;
  font-weight: 600;
}
.t-btn.dsf-resolved.primary:hover {
  background: rgba(var(--v4-rgb), .25) !important;
  box-shadow: 0 0 12px rgba(var(--v4-rgb), .3);
}
.dsf-action.is-failed {
  background: rgba(var(--v2-rgb), .04);
  border-left: 2px solid rgba(var(--v2-rgb), .35);
}
.dsf-act-state {
  font-size: .65rem; font-family: 'Menlo','Consolas',monospace;
  padding: .1rem .4rem; border-radius: 3px; border: 1px solid;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.dsf-act-state.ok { color: var(--v4); border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); }
.dsf-act-state.ko { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; flex-wrap: wrap; }
.dsy-head h3 { margin: 0; font-size: .95rem; color: var(--p-base); flex: 1; }
.dsy-meta { color: #94a3b8; font-size: .72rem; font-family: 'Menlo','Consolas',monospace; }
.dsy-score {
  font-family: 'Menlo','Consolas',monospace; font-weight: 700; font-size: .9rem;
  padding: .2rem .55rem; border-radius: 4px; border: 1px solid; min-width: 70px; text-align: center;
}
.dsy-score.score-excellent { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .1); }
.dsy-score.score-good      { color: #84cc16; border-color: #84cc16; background: rgba(132, 204, 22, .1); }
.dsy-score.score-medium    { color: #eab308; border-color: #eab308; background: rgba(234, 179, 8, .1); }
.dsy-score.score-poor      { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .1); }
.dsy-score.score-bad       { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .1); }

.dsy-summary {
  color: #d4d4d8; font-size: .85rem; line-height: 1.55;
  padding: .5rem .75rem; background: rgba(0, 0, 0, .15);
  border-left: 2px solid rgba(var(--p-base-rgb), .35); border-radius: 0 4px 4px 0;
  margin-bottom: .55rem;
}
.dsy-counts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.dsy-cnt {
  font-size: .68rem; padding: .12rem .45rem; border-radius: 3px; border: 1px solid;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.dsy-cnt.critical { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-cnt.high     { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
.dsy-cnt.medium   { color: #eab308; border-color: #eab308; background: rgba(234, 179, 8, .1); }
.dsy-cnt.low      { color: var(--v3); border-color: var(--v3); background: rgba(var(--v3-rgb), .1); }
.dsy-cnt.accepted { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .08); }
.dsy-cnt.total    { color: #94a3b8; border-color: #64748b; }

.dsy-top { margin-top: .35rem; }
.dsy-top-h { font-size: .7rem; color: var(--p-light); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; font-weight: 600; }
.dsy-finding {
  background: rgba(0, 0, 0, .15); border-radius: 4px;
  border-left: 2px solid transparent;
  margin-bottom: .25rem;
  font-size: .8rem;
  transition: background .12s;
}
.dsy-finding[open] { background: rgba(var(--p-base-rgb), .04); }
.dsy-finding.lvl-critical { border-left-color: var(--v2); }
.dsy-finding.lvl-high     { border-left-color: #fb923c; }
.dsy-finding summary {
  display: grid; grid-template-columns: 90px 60px 1fr;
  gap: .5rem; padding: .35rem .55rem;
  cursor: pointer; user-select: none; list-style: none;
  align-items: center; position: relative; padding-right: 1.4rem;
}
.dsy-finding summary::-webkit-details-marker { display: none; }
.dsy-finding summary::after { content: '▸'; position: absolute; right: .5rem; top: .42rem; color: var(--p-light); opacity: .55; transition: transform .15s; }
.dsy-finding[open] summary::after { transform: rotate(90deg); }
.dsy-finding summary:hover { background: rgba(var(--p-base-rgb), .04); }
.dsy-finding .dsf-axe { color: var(--p-light); font-size: .68rem; font-family: 'Menlo','Consolas',monospace; text-transform: uppercase; letter-spacing: .04em; }
.dsy-finding .dsf-level {
  font-size: .6rem; padding: .05rem .3rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace; font-weight: 700; text-align: center;
}
.dsy-finding.lvl-critical .dsf-level { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsy-finding.lvl-high     .dsf-level { color: #fb923c; border: 1px solid #fb923c; background: rgba(251, 146, 60, .12); }
.dsy-finding.lvl-medium   .dsf-level { color: #eab308; border: 1px solid #eab308; background: rgba(234, 179, 8, .1); }
.dsy-finding.lvl-low      .dsf-level { color: var(--v3); border: 1px solid var(--v3); background: rgba(var(--v3-rgb), .1); }
.dsy-finding .dsf-title { color: #e4e4e7; font-weight: 500; }

/* Détail expandé */
.dsf-body {
  padding: .55rem .85rem .65rem 1.1rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: .5rem;
}
.dsf-row { display: grid; grid-template-columns: 75px 1fr; gap: .5rem; font-size: .78rem; line-height: 1.5; }
.dsf-w { color: var(--p-light); font-weight: 600; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .12rem; font-family: 'Menlo','Consolas',monospace; }
.dsf-t { color: #d4d4d8; }
.dsf-actions-wrap { display: flex; flex-direction: column; gap: .35rem; }
.dsf-action {
  background: rgba(0, 0, 0, .25);
  border-radius: 4px;
  padding: .35rem .55rem;
  border: 1px solid rgba(255, 255, 255, .05);
}
.dsf-act-head { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dsf-act-label { color: #e4e4e7; font-size: .78rem; font-weight: 500; flex: 1; }
.dsf-act-risk {
  font-size: .58rem; padding: .05rem .3rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  font-family: 'Menlo','Consolas',monospace;
}
.dsf-act-risk.r-safe        { color: var(--v4); border: 1px solid var(--v4); background: rgba(var(--v4-rgb), .1); }
.dsf-act-risk.r-medium      { color: #fb923c; border: 1px solid #fb923c; background: rgba(251, 146, 60, .12); }
.dsf-act-risk.r-destructive { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
.dsf-act-rev { color: #94a3b8; font-size: .62rem; font-family: 'Menlo','Consolas',monospace; }
.dsf-act-cmd {
  margin: .2rem 0 0; padding: .35rem .5rem;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .06);
  color: #cbd5e1; font-family: 'Menlo','Consolas',monospace; font-size: .72rem;
  border-radius: 3px; white-space: pre-wrap; word-break: break-all;
}
.dsf-act-exec {
  background: linear-gradient(135deg, rgba(var(--p-base-rgb), .8), rgba(var(--p-glow-rgb), .65));
  color: var(--p-text-on); border: 1px solid rgba(var(--p-soft-rgb), .8);
  border-radius: 4px; padding: .15rem .55rem;
  font-size: .68rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.dsf-act-exec:hover:not(:disabled) { box-shadow: 0 0 8px rgba(var(--p-glow-rgb), .5); }
.dsf-act-exec:disabled { opacity: .5; cursor: not-allowed; }

.dsf-end-actions {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding-top: .45rem; border-top: 1px dashed rgba(255, 255, 255, .07);
}
.dsf-end-actions .t-btn {
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px;
  padding: .25rem .6rem; font-size: .72rem; cursor: pointer;
}
.dsf-end-actions .t-btn:hover { background: rgba(var(--p-base-rgb), .12); border-color: rgba(var(--p-base-rgb), .35); }
.dsf-end-actions .dsf-help { background: linear-gradient(135deg, rgba(var(--p-base-rgb), .7), rgba(var(--p-glow-rgb), .5)); color: var(--p-text-on); }
.dsf-end-actions .dsf-help:hover { box-shadow: 0 0 8px rgba(var(--p-glow-rgb), .4); }

.dsy-empty { color: #64748b; font-style: italic; font-size: .82rem; padding: .5rem 0; }
.dsy-empty small { color: #94a3b8; }
.dsy-empty code { background: rgba(0,0,0,.4); padding: .05rem .3rem; border-radius: 3px; font-size: .75rem; color: var(--p-light); }
.dsy-actions { display: flex; gap: .45rem; margin-top: .5rem; flex-wrap: wrap; }
.dsy-actions .t-btn {
  background: rgba(39, 39, 42, .55); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px;
  padding: .3rem .65rem; font-size: .76rem; cursor: pointer;
}
.dsy-actions .t-btn:hover:not(:disabled) { background: rgba(var(--p-base-rgb), .15); border-color: rgba(var(--p-base-rgb), .35); }

/* ============================================================
   Boîte feedback
   ============================================================ */
.dash-feedback {
  /* Design de référence = .dash-host / .kpi-score-card (couleur principale --p-base).
     Décision Vincent 2026-04-29 : 4 borders + double gradient + blur 28px +
     triple box-shadow (inset glow gauche + highlight haut + ombre extérieure). */
  padding: .85rem 1rem !important;
  border-top: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-right: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .4) !important;
  border-left: 2px solid rgba(var(--p-base-rgb), .9) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--p-base-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--p-base-rgb), .1) 0%, rgba(var(--p-base-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 8px 0 14px -8px rgba(var(--p-base-rgb), .55),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 4px 18px rgba(0, 0, 0, .28) !important;
}
.dfb-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.dfb-head h3 { margin: 0; font-size: .95rem; color: var(--p-light); flex: 1; }
.dfb-info { color: #94a3b8; font-size: .68rem; font-style: italic; cursor: help; }
.dfb-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .65rem; }
.dfb-form textarea {
  width: 100%;
  background: rgba(39, 39, 42, .5); color: #e4e4e7;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px;
  padding: .5rem .65rem; font-size: .85rem; font-family: inherit; line-height: 1.45;
  resize: vertical; min-height: 60px;
}
.dfb-form textarea:focus { outline: none; border-color: var(--v3); box-shadow: 0 0 0 2px rgba(var(--v3-rgb), .18); }
.dfb-form textarea:disabled { opacity: .6; cursor: not-allowed; }
.dfb-actions { display: flex; justify-content: flex-end; }
.dfb-actions button {
  background: linear-gradient(135deg, rgba(var(--p-base-rgb), .85), rgba(var(--p-glow-rgb), .75));
  color: var(--p-text-on); border: 1px solid rgba(var(--p-soft-rgb), .8);
  border-radius: 5px; padding: .35rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.dfb-actions button:disabled { opacity: .4; cursor: not-allowed; background: rgba(39,39,42,.55); }

.dfb-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; padding-right: .25rem; }
.dfb-item {
  padding: .45rem .6rem; background: rgba(0, 0, 0, .15); border-radius: 4px;
  border-left: 2px solid rgba(255, 255, 255, .08);
  font-size: .8rem;
}
.dfb-item.eval-actionable { border-left-color: var(--p-base); }
.dfb-item.eval-noted      { border-left-color: var(--v4); }
.dfb-item.eval-irrelevant { border-left-color: #64748b; opacity: .65; }
.dfb-item.eval-error      { border-left-color: var(--v2); }
.dfb-i-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .25rem; flex-wrap: wrap; }
.dfb-when { color: #64748b; font-size: .7rem; font-family: 'Menlo','Consolas',monospace; }
.dfb-tag {
  font-size: .62rem; padding: .08rem .35rem; border-radius: 3px;
  font-family: 'Menlo','Consolas',monospace; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.dfb-tag.pending     { color: #eab308; border: 1px solid #eab308; background: rgba(234, 179, 8, .1); animation: dfb-pulse 1.4s ease-in-out infinite; }
.dfb-tag.actionable  { color: var(--p-base); border: 1px solid var(--p-base); background: rgba(var(--p-base-rgb), .12); }
.dfb-tag.noted       { color: var(--v4); border: 1px solid var(--v4); background: rgba(var(--v4-rgb), .1); }
.dfb-tag.irrelevant  { color: #64748b; border: 1px solid #64748b; }
.dfb-tag.error       { color: var(--v2); border: 1px solid var(--v2); background: rgba(var(--v2-rgb), .12); }
@keyframes dfb-pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.dfb-content { color: #d4d4d8; line-height: 1.5; }
.dfb-eval {
  margin-top: .25rem; padding-top: .25rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  color: #94a3b8; font-size: .72rem; font-style: italic; line-height: 1.45;
}
.dfb-empty { color: #64748b; font-style: italic; font-size: .8rem; padding: .35rem 0; }

/* ===================================================================
   RESPONSIVE MOBILE (A3a) — strictement scope @media (max-width: 768px)
   AUCUN impact sur PC ≥ 769px.
   =================================================================== */
@media (max-width: 768px) {
  /* Dashboard tab : padding réduit (annulation du padding du PC) */
  .dashboard-tab { padding: .5rem .5rem 1rem; gap: .6rem; height: auto; }
  .dashboard-tab > * { margin: 0; }
  .dashboard-tab > .dash-card,
  .dashboard-tab > .dash-kpis,
  .dashboard-tab > .dash-hero { margin-top: .6rem; }

  /* Toolbar : compacte + wrap */
  .dash-toolbar {
    flex-wrap: wrap;
    padding: .4rem .55rem;
    gap: .5rem;
  }
  .dash-toolbar .dash-title { font-size: .72rem; letter-spacing: .08em; }
  .dash-toolbar .dash-generated { font-size: .65rem; }
  .dash-toolbar .dash-live-lbl { font-size: .7rem; }
  .dash-toolbar button { padding: .2rem .45rem; font-size: .7rem; }

  /* Strip 7 KPI cards : 1 colonne mobile */
  .dash-kpis {
    grid-template-columns: 1fr !important;
    gap: .55rem;
  }
  /* Tablette portrait/intermédiaire : 2 colonnes */
  /* (already handled by ≤700 → 2 cols dans le PC. Ici on force 1 col ≤480) */

  /* KPI cards : compact mobile */
  .kpi-card { padding: .5rem .6rem; }
  .kpi-head { gap: .35rem; padding-bottom: .25rem; }
  .kpi-icon { font-size: 1.1rem; }
  .kpi-title { font-size: .82rem; letter-spacing: .04em; }
  .kpi-score .ks-value { font-size: 1.4rem; }
  .kpi-score .ks-unit  { font-size: .8rem; }

  /* Badges 5 colonnes : OK en mobile (mini), juste réduire padding */
  .kpi-badges { gap: 3px; }
  .kpi-badge { padding: .04rem .25rem; font-size: .58rem; }
  .kpi-badge .kb-v { font-size: .68rem; }
  .kpi-badge .kb-k { font-size: .55rem; }

  /* Host strip : compact + déjà 1fr ≤1000px du PC */
  .host-strip { gap: .65rem; }
  .host-info .hi-name { font-size: .85rem; }
  .host-info .hi-meta { font-size: .65rem; white-space: normal; }

  /* Synthesis card (audit Claude) : compact */
  .dsy-empty { font-size: .8rem; }
  .dsy-combo-row { flex-wrap: wrap; gap: .35rem; }
  .dsy-counts { font-size: .72rem; }

  /* Synthesis fermée (collapsed) : summary line wrap + badges full-width */
  .dash-card > details.dash-collapse > summary {
    flex-wrap: wrap;
    gap: .4rem;
    padding: .45rem .4rem !important;
    min-width: 0;
  }
  .dc-title {
    font-size: .85rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dc-score-slot { font-size: .8rem; flex-shrink: 0; margin-left: auto; }
  .dc-score-slot .ks-value { font-size: 1.25rem; }
  .dc-score-slot .ks-unit  { font-size: .75rem; }
  /* Badges crit/warn/ok : passent à la ligne complète, scrollable horizontal si trop nombreux */
  .dc-resume {
    flex-basis: 100%;
    margin-left: 0;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .dc-resume .dc-b {
    font-size: .6rem;
    padding: .1rem .35rem;
    flex-shrink: 0;
  }
  /* Body de l'audit ouvert : compact */
  .dash-card > details.dash-collapse > .dc-body { padding-bottom: .55rem; }

  /* Findings actionnables : full width sur mobile */
  .dsf-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .dsf-target, .dsf-target-sec { font-size: .7rem; }
  .dsf-actions-wrap { width: 100%; }
  .dsf-action { flex-wrap: wrap; gap: .3rem; }
  .dsf-act-cmd { font-size: .65rem; word-break: break-all; }

  /* Feedback box : compact */
  .dash-feedback { padding: .55rem .65rem; }
  #dfb-input { font-size: .85rem; min-height: 70px; }
}

/* Fix : la card host strict minimum height (compact, ~80px) — propage 2026-05-09 */
.dashboard-tab .dash-host {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: max-content !important;
  padding: .7rem 1rem !important;
  display: block !important;
}
.dashboard-tab .dash-host .host-strip {
  align-items: center !important;
  min-height: 0 !important;
}
.dashboard-tab .dash-host .host-info {
  gap: .12rem !important;
}
.dashboard-tab .dash-host .host-gauge {
  gap: .2rem !important;
}

/* ============================================================================
   STANDARD TOOLBAR — uniforme reference Biometrie sante (Vincent 2026-05-10)
   Principle DB #102 — zone figee + controls coherents inter-tabs et inter-VMs.
   ============================================================================ */
.dash-toolbar {
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
}
.dash-toolbar input[type="search"],
.dash-toolbar input[type="text"],
.dash-toolbar input[type="date"],
.dash-toolbar input[type="number"],
.dash-toolbar select,
.dash-toolbar button.t-btn {
  background: rgba(39, 39, 42, .45);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: .22rem .55rem;
  font-size: .82rem;
  font-family: 'Menlo','Consolas',monospace;
  height: 28px;
  box-sizing: border-box;
  line-height: 1.2;
}
.dash-toolbar button.t-btn:hover:not(:disabled) {
  background: rgba(var(--p-base-rgb), .18);
  color: var(--p-base);
  border-color: rgba(var(--p-base-rgb), .35);
}
.dash-toolbar label {
  font-size: .82rem;
  color: #d4d4d8;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
}

/* ===== Carte conso LLM — format "Flux de traitement" (GED Organisation) ===== */
.llm-today { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 .5rem; }
.llm-big { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1; }
.llm-sub { font-size: .74rem; color: var(--p-light, #9ca3af); opacity: .85; }
.llm-chart-wrap { position: relative; width: 100%; }
.llmov-legend { display: flex; flex-wrap: wrap; gap: .85rem; font-size: .7rem; color: #cbd5e1; margin: .15rem 0 .55rem; }
.llmov-i { display: inline-flex; align-items: center; gap: .32rem; }
.llmov-c { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.llmov-i b { color: #e5e5e3; font-weight: 600; }
.llmov-svg { width: 100%; height: 150px; display: block; }
.llmov-xaxis { position: relative; height: 14px; margin-top: 3px; }
.llmov-xlab { position: absolute; font-size: .6rem; color: #6b7280; white-space: nowrap; transform: translateX(2px); }
.llm-chart-empty { padding: .8rem 0; font-size: .74rem; color: var(--p-light, #9ca3af); opacity: .7; font-style: italic; }

/* ===== Deux indicateurs glissants (24h / 7 jours) cote a cote ===== */
.llm-stats-row { display: flex; gap: 1.2rem; margin: .3rem 0 .5rem; }
.llm-stat { display: flex; flex-direction: column; gap: .1rem; }
.llm-stats-row .llm-big { font-size: 1.3rem; }