/*
 * SHIELD — feuille de style unique.
 *
 * Variables CSS pour la thématisation. Pas de framework (Tailwind/Bootstrap).
 * Mise en page : Grid pour le shell, Flexbox pour les composants.
 */

:root {
  --bg:           #F8FAFC;
  --bg-alt:       #FFFFFF;
  --bg-soft:      #F1F5F9;
  --text:         #0B1744;
  --text-muted:   #667085;
  --text-faint:   #94A3B8;
  --accent:       #F6B400;
  --accent-soft:  #FFF6DC;
  --accent-dark:  #B98700;
  --critique:     #EF4444;
  --critique-soft:#FEE2E2;
  --eleve:        #F97316;
  --eleve-soft:   #FFEDD5;
  --moyen:        #EAB308;
  --moyen-soft:   #FEF3C7;
  --faible:       #22C55E;
  --faible-soft:  #DCFCE7;
  --info:         #2563EB;
  --info-soft:    #DBEAFE;
  --border:       #E5E7EB;
  --border-strong:#CBD5E1;
  --shadow-sm:    0 1px 2px rgba(11, 23, 68, 0.05);
  --shadow:       0 1px 3px rgba(11, 23, 68, 0.06), 0 1px 2px rgba(11, 23, 68, 0.04);
  --radius:       12px;
  --radius-lg:    16px;

  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Pont palette PULSE/PILOT → SHIELD : alias pour les composants portés
     verbatim (IAM « Accès & Sécurité », mire passkey…). Évite de réécrire
     leurs `var(--brand…)` / `var(--text2)` etc. Valeurs alignées sur les
     tokens SHIELD + charte SECALYS (navy/jaune, bleu inc-badge). */
  --brand:      #0B1744;
  --brand-2:    #1D4ED8;
  --brand-soft: #EFF6FF;
  --text2:      #667085;
  --text3:      #94A3B8;
  --bg2:        #FFFFFF;
  --bg3:        #F1F5F9;
  --border2:    #CBD5E1;
  --radius-sm:  8px;
  --shadow-lg:  0 10px 30px rgba(11, 23, 68, 0.12);
}

* { box-sizing: border-box; }

/* Filet de sécurité (#43) : aucune règle plus spécifique ne doit ré-afficher un
 * élément masqué via l'attribut HTML `hidden`. Une règle `#id`/`.classe` posant
 * `display: …` (spécificité ≥ 1,0,0) écrase sinon silencieusement la règle UA
 * `[hidden] { display: none }` (0,1,0) — bug réel post-mortem #41. À garder en
 * début de fichier, avant les composants. Toutes les règles `[hidden]` du projet
 * posent déjà `display: none`, donc ce `!important` ne casse aucun override. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; }

.muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }

/* -------------------------------------------------------------------- */
/* App shell                                                            */
/* -------------------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-areas:
    "topbar  topbar"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 228px 1fr;
  grid-template-rows: 60px 1fr auto;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  grid-area: sidebar;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  position: relative;
  overflow: visible; /* scroll géré par .sidebar-main-nav */
}

.sidebar-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 6px 18px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--text);
}
.brand-tagline {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.sidebar-nav a.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 0 10px 10px 0;
  margin-left: -10px;
  padding-left: 22px; /* 12px + 10px pour compenser le margin */
}
.sidebar-nav a.active svg { color: var(--accent); }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.btn-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
}
.btn-collapse:hover { background: var(--bg-soft); color: var(--text); }
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-faint);
  padding: 0 6px;
}
.footer-version {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dot-online {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faible);
}

/* Sidebar collapsed (toggle by .collapsed class on .app-shell) */
.app-shell.collapsed { grid-template-columns: 64px 1fr; }
.app-shell.collapsed .sidebar-nav span { display: none; }
.app-shell.collapsed .sidebar-nav a { justify-content: center; padding: 10px; margin-left: 0; }
.app-shell.collapsed .nav-badge { display: none; }
.app-shell.collapsed .btn-collapse { justify-content: center; }
.app-shell.collapsed .sidebar-footer { right: -18px; }

/* .main-area conservé pour compatibilité ascendante (plus utilisé) */
.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Topbar                                                               */
/* -------------------------------------------------------------------- */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(11, 23, 68, 0.04);
  z-index: 100;
  flex-shrink: 0;
}
/* Bandeau fédéré <secalys-topbar> (remplace .topbar) : zone de grille topbar +
   contexte d'empilement élevé pour que ses menus déroulants (grille 3x3, menu
   profil) surplombent le contenu (sous les modales, z-index 1200+). */
secalys-topbar { grid-area: topbar; position: relative; z-index: 1000; }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-brand-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* Switcher ORBIT — widget inter-applications partagé (PULSE/PILOT/SHIELD).
   Markup/classes identiques entre apps ; SHIELD marque sa propre ligne active. */
.orbit-switcher { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.orbit-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .7rem .38rem .55rem;
  background: transparent; color: var(--text);
  border: none; border-radius: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .15s, transform .08s;
}
.orbit-btn:hover { background: var(--bg-soft); }
.orbit-btn:active { transform: scale(.97); }
.orbit-btn-logo { width: 18px; height: 18px; flex-shrink: 0; }
.orbit-chevron { width: 13px; height: 13px; opacity: .65; transition: transform .2s; flex-shrink: 0; }
.orbit-btn[aria-expanded="true"] { background: var(--bg-soft); }
.orbit-btn[aria-expanded="true"] .orbit-chevron { transform: rotate(180deg); }

.orbit-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 195px;
  background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 300; padding: 4px;
}
.orbit-dropdown[hidden] { display: none; }
.orbit-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .8rem; border-radius: 8px;
  text-decoration: none; color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s;
}
.orbit-item:hover { background: var(--bg-soft); }
.orbit-item--active {
  background: var(--brand-soft); color: var(--brand-2);
  font-weight: 600; cursor: default;
}
.orbit-item--active:hover { background: var(--brand-soft); }
.orbit-item-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
}
.orbit-item-icon svg { width: 16px; height: 16px; }
.orbit-item-icon--orbit  { background: #1e293b; color: #fff; }
.orbit-item-icon--pulse  { background: #dcfce7; color: #16a34a; }
.orbit-item-icon--shield { background: #fef9c3; color: #a16207; }
.orbit-item-icon--pilot  { background: var(--brand-soft); color: var(--brand-2); }
.orbit-item-icon--alive  { background: #dbeafe; color: #1d4ed8; }
.orbit-item-label { line-height: 1; }

/* Cloche + engrenage — boutons icône carré-arrondi 38px (pattern PILOT/PULSE) */
.topbar-bell,
.topbar-gear {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.topbar-bell:hover,
.topbar-gear:hover { background: var(--bg-soft); color: var(--text); }
.bell-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--critique);
  border: 2px solid var(--bg-alt);
}

/* Menu utilisateur topbar — pill compact repris de PILOT/PULSE : avatar
   tonal (--brand-soft fond, --brand-2 texte), nom seul dans le bouton
   (1 ligne), rôle déplacé dans le dropdown. */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu-btn {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  cursor: pointer; font: inherit; color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.user-menu-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.user-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-menu-av {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 10px;
  background: var(--brand-soft); color: var(--brand-2);
  text-transform: uppercase;
}
.user-menu-av--lg { width: 40px; height: 40px; font-size: 14px; }
.user-menu-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.user-menu-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.user-menu-role { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: capitalize; }
.user-menu-chevron { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.user-menu-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 230px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 1200;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.55rem 0.65rem; }
.user-menu-head .user-menu-name { font-size: 14px; }
.user-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
.user-menu-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  border: none; background: none; padding: 0.55rem 0.6rem; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.user-menu-item:hover { background: var(--bg-soft); }
.user-menu-item--danger { color: var(--critique); }
.user-menu-item--danger:hover { background: var(--critique-soft); }
.user-menu-item svg { flex-shrink: 0; }

/* -------------------------------------------------------------------- */
/* Content                                                              */
/* -------------------------------------------------------------------- */

.content {
  grid-area: content;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  padding: 24px 28px 28px;
}
.view { display: block; }
.view[hidden] { display: none; }

.page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.page-header-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.page-header h1 { font-size: 26px; font-weight: 700; margin: 0; }
.page-header .subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.view-header h2 { font-size: 22px; margin: 0; font-weight: 700; }
.view-header .subtitle { color: var(--text-muted); font-size: 13px; }

/* -------------------------------------------------------------------- */
/* Fil d'ariane (Breadcrumb)                                            */
/* -------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-bottom: 16px;
}
.bc-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
a.bc-item:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.bc-current {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.bc-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.bc-sep {
  display: flex;
  align-items: center;
  color: var(--text-faint);
  padding: 0 1px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* Cards & layout                                                       */
/* -------------------------------------------------------------------- */

.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- */
/* KPI cards (with icon)                                                */
/* -------------------------------------------------------------------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.kpi-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-icon.icon-gold     { background: var(--accent-soft);    color: var(--accent-dark); }
.kpi-icon.icon-critique { background: var(--critique-soft);  color: var(--critique); }
.kpi-icon.icon-info     { background: var(--info-soft);      color: var(--info); }
.kpi-icon.icon-eleve    { background: var(--eleve-soft);     color: var(--eleve); }
.kpi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-trend {
  font-size: 12px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}
.kpi-trend.up   { color: var(--critique); }
.kpi-trend.down { color: var(--faible); }
.kpi-trend.flat { color: var(--text-faint); }
.kpi-trend strong { font-weight: 600; }

/* -------------------------------------------------------------------- */
/* Grids                                                                */
/* -------------------------------------------------------------------- */

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.grid-3-spread {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3-spread { grid-template-columns: 1fr; }
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.section-link {
  font-size: 12.5px;
  color: var(--info);
  font-weight: 500;
}
.section-link:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */

/* Base bouton générique `.btn` (sans variante) — utilisée par la console IAM.
   Sans elle, les boutons class="btn" tombent en rendu natif. Alignée sur .btn-ghost. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--bg-soft); border-color: var(--text-muted); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-danger { color: #dc2626; border-color: #f3c2c2; }
.btn-danger:hover { background: #fef2f2; border-color: #dc2626; }

.btn-primary, .btn-ghost {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--text);
}
.btn-primary:hover { background: var(--accent-dark); color: #FFF; }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }

button[disabled] { opacity: 0.5; cursor: not-allowed; }
button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* -------------------------------------------------------------------- */
/* Tables                                                               */
/* -------------------------------------------------------------------- */

.table-wrap {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--bg-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .id-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--info);
  font-weight: 500;
  white-space: nowrap;
}
.data-table .actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* -------------------------------------------------------------------- */
/* Pilot avatar (initials)                                              */
/* -------------------------------------------------------------------- */

.pilot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pilot-avatar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #FFF;
  background: var(--text-muted);
}

/* -------------------------------------------------------------------- */
/* Risk dots                                                            */
/* -------------------------------------------------------------------- */

.risk-dots {
  display: inline-flex;
  gap: 4px;
}
.risk-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.risk-dot.lit-1 { background: var(--faible); }
.risk-dot.lit-2 { background: var(--moyen); }
.risk-dot.lit-3 { background: var(--eleve); }
.risk-dot.lit-4 { background: var(--critique); }

/* -------------------------------------------------------------------- */
/* Source / status bars                                                 */
/* -------------------------------------------------------------------- */

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bar-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
}
.bar-rank {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}
.bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text);
}
.bar-label .name { font-weight: 500; }
.bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--info);
}
.bar-fill.fill-1 { background: var(--info); }
.bar-fill.fill-2 { background: #3B82F6; }
.bar-fill.fill-3 { background: #60A5FA; }
.bar-fill.fill-4 { background: #93C5FD; }
.bar-fill.fill-5 { background: #BFDBFE; }
.bar-percent {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 36px;
  text-align: right;
}

/* Status bars : variant with colored fills per status */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.status-row {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: 10px;
  align-items: center;
}
.status-row .name { font-size: 12.5px; color: var(--text); }
.status-row .meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.status-track {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.status-fill {
  height: 100%;
  border-radius: 999px;
}
.status-fill.col-investigation { background: var(--info); }
.status-fill.col-remediation   { background: var(--faible); }
.status-fill.col-surveillance  { background: var(--moyen); }
.status-fill.col-resolu        { background: var(--text-muted); }
.status-fill.col-nouveau       { background: var(--text-faint); }

/* -------------------------------------------------------------------- */
/* Stat list (vue d'ensemble)                                           */
/* -------------------------------------------------------------------- */

.stat-list {
  display: flex;
  flex-direction: column;
}
.stat-list .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.stat-list .row:last-child { border-bottom: none; }
.stat-list .row .label { color: var(--text-muted); }
.stat-list .row .value {
  color: var(--text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-list .row .value .crit-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.crit-dot.crit-Critique { background: var(--critique); }
.crit-dot.crit-Élevé    { background: var(--eleve); }
.crit-dot.crit-Moyen    { background: var(--moyen); }
.crit-dot.crit-Faible   { background: var(--faible); }

/* -------------------------------------------------------------------- */
/* Pressure gauge                                                       */
/* -------------------------------------------------------------------- */

.pressure-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pressure-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pressure-gauge {
  flex-shrink: 0;
  width: 120px; height: 70px;
  position: relative;
}
.pressure-gauge svg { width: 100%; height: 100%; display: block; }
.pressure-numeric {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
}
.pressure-numeric .small { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.pressure-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.pressure-meta .level { color: var(--text-muted); }
.pressure-meta .level strong { color: var(--text); font-weight: 600; }
.pressure-meta .delta { color: var(--text-muted); }
.pressure-meta .delta.up { color: var(--critique); }
.pressure-meta .delta.down { color: var(--faible); }

/* -------------------------------------------------------------------- */
/* Alerts panel                                                         */
/* -------------------------------------------------------------------- */

.alerts-list {
  display: flex;
  flex-direction: column;
}
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.alert-item:last-child { border-bottom: none; }
.alert-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.alert-icon.kind-event { background: var(--info-soft); color: var(--info); }
.alert-icon.kind-surge { background: var(--moyen-soft); color: var(--moyen); }
.alert-icon.kind-risk  { background: var(--critique-soft); color: var(--critique); }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; color: var(--text); }
.alert-detail { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.alert-time {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}

/* -------------------------------------------------------------------- */
/* Badges                                                               */
/* -------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-critique  { background: var(--critique-soft); color: #991B1B; }
.badge-eleve     { background: var(--eleve-soft);    color: #9A3412; }
.badge-moyen     { background: var(--moyen-soft);    color: #92400E; }
.badge-faible    { background: var(--faible-soft);   color: #14532D; }

.badge-status-nouveau         { background: #DBEAFE; color: #1E3A8A; }
.badge-status-investigation   { background: #E0E7FF; color: #3730A3; }
.badge-status-remediation     { background: var(--faible-soft); color: #14532D; }
.badge-status-surveillance    { background: var(--moyen-soft);  color: #92400E; }
.badge-status-resolu          { background: var(--bg-soft);     color: var(--text-muted); }

.badge-prio-urgente { background: var(--critique-soft); color: #991B1B; }
.badge-prio-haute   { background: var(--moyen-soft);    color: #92400E; }
.badge-prio-normale { background: var(--bg-soft);       color: var(--text-muted); }

/* Référence incident (SH-2026-XXX) — pill gris unifié partout dans l'app */
.inc-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  background: #F3F4F6;
  color: #6B7280;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.5;
}
button.inc-badge, a.inc-badge { cursor: pointer; text-decoration: none; }
button.inc-badge { appearance: none; -webkit-appearance: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 4px; padding: 2px 8px; line-height: 1.5; }
button.inc-badge:hover, a.inc-badge:hover { background: #E9EAEC; border-color: #D1D5DB; }

/* -------------------------------------------------------------------- */
/* Filters                                                              */
/* -------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-bar input[type="search"], .filter-bar select, .filter-bar input[type="text"] {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  min-width: 180px;
}
.filter-bar input[type="search"]:focus, .filter-bar select:focus, .filter-bar input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* -------------------------------------------------------------------- */
/* Forms (modal)                                                        */
/* -------------------------------------------------------------------- */

.modal-root {
  position: fixed;
  inset: 0;
  background: rgba(11, 23, 68, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Au-dessus du drawer de détail du journal (z 1300) — les modales priment. */
  z-index: 1400;
  padding: 16px;
}
.modal-root[hidden] { display: none; }
.modal {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.modal h3 { margin: 0 0 16px; font-size: 18px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-error {
  background: var(--critique-soft);
  color: #991B1B;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.form-row.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* -------------------------------------------------------------------- */
/* Login page                                                           */
/* -------------------------------------------------------------------- */

body.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #F7F8FA;
  padding: 0;
  overflow-x: hidden;
}

/*
 * SPA unifiée : #auth-view est désormais le container vertical réel de la mire
 * (le body englobe aussi #app-view en mode app). Reproduit le layout que le
 * body assurait quand login.html était une page autonome.
 */
#auth-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100vh;
  width: 100%;
}

/*
 * Bypass de la cascade : `#auth-view { display: flex }` ci-dessus a une
 * spécificité (1,0,0) qui écrase la règle UA `[hidden] { display: none }`
 * (spécificité 0,1,0). Sans ça, `authView.hidden = true` côté JS ne masque
 * pas réellement la mire, qui reste visible par-dessus #app-view (cf. #41).
 * On force le masquage via une règle compound de spécificité (1,1,0).
 */
#auth-view[hidden],
#app-view[hidden] {
  display: none !important;
}

/* Skip link (a11y) */
.login-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: #FFF;
  padding: 8px 12px;
  border-radius: 0 0 8px 0;
  font-size: 13px;
  z-index: 100;
}
.login-skip:focus { left: 0; }

/* Topbar */
.login-topbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(11, 23, 68, 0.02);
}
.login-topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.login-brand-mark { display: inline-flex; }
.login-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}
.login-brand-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}
.login-brand-baseline {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  font-weight: 500;
}
.login-acro {
  color: var(--accent-dark);
  font-weight: 700;
}
.login-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-lang,
.login-bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.login-lang:hover,
.login-bell:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.login-bell { position: relative; padding: 8px; }
.login-bell-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #FFFFFF;
}

/* Main grid */
.login-main {
  flex: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 32px 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
}

/* Hero : flex column qui remplit la ligne grid pour permettre photo en bas
   + contenu centré verticalement dans l'espace au-dessus de la photo. */
.login-hero {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.login-hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 110px;
  padding-left: 70px;
}
.login-hero-decor {
  position: absolute;
  top: -40px;
  left: -90px;
  opacity: 0.7;
  pointer-events: none;
}
.login-hero-title {
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 20px;
}
.login-hero-dot { color: var(--accent); }
.login-hero-lede {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4B5563;
  max-width: 460px;
  margin: 0 0 32px;
}
.login-hero-lede strong { color: var(--accent-dark); font-weight: 700; }

/* Pillars */
.login-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 560px;
}
.login-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.login-pillar-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.login-pillar-label {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}

/* Mountain illustration : photo alpine en position absolute pour sortir
   la photo du flux grid. La ligne grid se dimensionne sur hero-content +
   card, plus sur la photo → fini les scrollbars sur viewport tassé.
   La photo se cale au bas du hero, bleed à gauche, touche le footer
   via bottom: -32px qui annule le padding bas de .login-main. */
.login-hero-mountain {
  position: absolute;
  bottom: -32px;
  left: calc(50% - 50vw + 80px);
  right: -32px;
  height: 340px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.login-hero-mountain img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  opacity: 0.92;
  /* Fondu doux sur les 4 côtés. Mask horizontal léger (2%/97%) pour ne pas
     manger la photo + mask vertical plus marqué (haut 8%, bas s'efface à 70%) */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 2%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 2%, #000 97%, transparent 100%);
          mask-composite: intersect;
}

/* Login card */
.login-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  box-shadow: 0 24px 48px -12px rgba(11, 23, 68, 0.08), 0 4px 12px rgba(11, 23, 68, 0.04);
  position: relative;
  align-self: start;
}
.login-card-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.login-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-card-titles h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.login-card-titles p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.login-error {
  background: var(--critique-soft);
  color: #991B1B;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid #FCA5A5;
}

/* Erreur terminale SSO (code non réessayable) : message seul, centré, sans
   bouton. Couvre l'écran d'amorçage ; on n'invite PAS à réessayer (l'action
   échouerait à l'identique). Aligné SHIELD/PULSE/PILOT/ALIVE.
   `[hidden]` (spécificité 0,2,0) l'emporte sur la règle d'affichage. */
.sso-terminal-error[hidden] { display: none; }
.sso-terminal-error {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: #f1f5f9;
  color: #991B1B;
  font: 500 0.95rem/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tabs : style underline simple, pas de segmented control */
.login-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.login-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 14px 8px;
  margin-bottom: -1px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.login-tab:hover { color: var(--text); }
.login-tab.is-active { color: var(--text); }
.login-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Form */
.login-tab-panel { display: block; }
.login-tab-panel[hidden] { display: none; }
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.login-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #FFFFFF;
  transition: border-color .15s, box-shadow .15s;
}
.login-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 180, 0, 0.15);
}
.login-input-icon {
  position: absolute;
  left: 12px;
  display: inline-flex;
  color: var(--text-faint);
  pointer-events: none;
}
.login-input input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 12px 11px 38px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  border-radius: 10px;
}
.login-input input::placeholder { color: var(--text-faint); }
.login-input-toggle {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-input-toggle:hover { color: var(--text-muted); background: var(--bg-soft); }
.login-input-toggle svg[hidden] { display: none; }

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 16px;
}
.login-forgot {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.login-forgot:hover { color: var(--text); text-decoration: underline; }
.login-submit {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
}

/* Lien d'accès panel */
.login-link-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.login-link-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--text-faint);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* SSO */
.login-sso {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.login-sso:hover:not([disabled]) { background: var(--bg-soft); border-color: var(--border-strong); }
.login-sso[disabled] { cursor: not-allowed; opacity: 0.55; }

.login-help {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.login-help a { color: var(--accent-dark); font-weight: 500; }
.login-help a:hover { text-decoration: underline; }

/* Footer */
.login-footer {
  border-top: 1px solid var(--border);
  background: #FFFFFF;
  margin-top: auto;
}
.login-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* App footer : pleine largeur, pas de centrage */
.app-footer .login-footer-inner {
  max-width: none;
  margin: 0;
  padding: 10px 28px;
}
.login-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.login-footer-brand strong {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.06em;
  display: block;
  font-size: 12px;
}
.login-footer-tagline {
  display: block;
  line-height: 1.35;
  margin-top: 1px;
}
.login-footer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-footer-mark img { display: block; width: 28px; height: auto; }
.login-footer-text { display: flex; flex-direction: column; }
.login-footer-copy {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .login-main {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }
  .login-hero { min-height: auto; padding-bottom: 8px; }
  .login-hero-title { font-size: 36px; }
  .login-hero-mountain { display: none; }
  .login-hero-decor { display: none; }
  .login-card { margin-left: 0; max-width: 480px; }
}
@media (max-width: 640px) {
  .login-topbar-inner { padding: 12px 16px; gap: 12px; }
  .login-brand-divider, .login-brand-baseline { display: none; }
  .login-main { padding: 24px 16px; }
  .login-hero-title { font-size: 30px; }
  .login-hero-lede { margin-bottom: 32px; }
  .login-pillars { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .login-card { padding: 24px 20px; border-radius: 14px; }
  .login-footer-inner { flex-direction: column; padding: 16px; align-items: flex-start; gap: 12px; }
}

/* -------------------------------------------------------------------- */
/* Charts (SVG)                                                         */
/* -------------------------------------------------------------------- */

.chart-container { width: 100%; height: 220px; position: relative; }
.chart-container svg { width: 100%; height: 100%; display: block; }
.chart-axis { fill: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.chart-grid { stroke: var(--border); stroke-dasharray: 2 3; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--accent); }
.chart-area { fill: var(--accent); fill-opacity: 0.1; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

.chart-tip {
  position: fixed;
  background: rgba(11,23,68,.93);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 7px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity .1s;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.chart-tip.visible { opacity: 1; }

.donut-with-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.donut-with-legend .chart-container { width: 140px; height: 140px; flex-shrink: 0; }
.donut-with-legend .donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.donut-legend .row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.donut-legend .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend .name { flex: 1; }
.donut-legend .meta { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- */
/* Score bar                                                            */
/* -------------------------------------------------------------------- */

.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-bar-track {
  flex: 1;
  background: var(--border);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  min-width: 80px;
}
.score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}
.score-bar-fill.score-high { background: var(--critique); }
.score-bar-fill.score-mid  { background: var(--eleve); }
.score-bar-fill.score-low  { background: var(--faible); }
.score-bar-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}

/* -------------------------------------------------------------------- */
/* Timeline (journal)                                                   */
/* -------------------------------------------------------------------- */

.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-entry {
  position: relative;
  padding-bottom: 18px;
}
.timeline-entry::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--info);
  border: 2px solid var(--bg-alt);
  box-shadow: 0 0 0 1px var(--border);
}
.timeline-entry.type-escalade::before  { background: var(--critique); }
.timeline-entry.type-resolution::before { background: var(--faible); }
.timeline-entry.type-analyse::before    { background: var(--moyen); }
.timeline-entry.type-action::before     { background: var(--info); }
.timeline-entry.type-creation::before   { background: var(--text-muted); }

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.timeline-id { font-family: var(--font-mono); color: var(--info); font-weight: 500; }
.timeline-description { font-size: 13.5px; color: var(--text); }
.timeline-author { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

/* -------------------------------------------------------------------- */
/* Journal vue enrichie                                                 */
/* -------------------------------------------------------------------- */

.jnl-layout { display: flex; flex-direction: column; gap: 16px; }
.jnl-stats  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.jnl-stat       { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.jnl-stat-text  { flex: 1; min-width: 0; }
.jnl-stat-icon  { width: 40px; height: 40px; background: var(--bg-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }
.jnl-stat-label { font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.jnl-stat-value { font-size: 28px; font-weight: 700; color: var(--text); margin: 0; line-height: 1; }
.jnl-stat-sub   { font-size: 11px; color: var(--text-faint); margin: 6px 0 0; }
/* Barre inline (sans carte) : champs blancs uniformes, comme les autres écrans. */
.jnl-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.jnl-filters select, .jnl-filters input { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; padding: 0 10px; font-size: 13px; color: var(--text); height: 30px; }
.jnl-filters select:focus, .jnl-filters input:focus { outline: none; border-color: var(--info); }
/* ui-select : trigger du filtre type aligné sur les champs de la barre (30px/7px). */
.jnl-filters .ui-select-trigger { height: 30px; padding: 0 28px 0 10px; border-radius: 7px; font-size: 13px; color: var(--text); background: var(--bg-alt); }
.jnl-filters .ui-select-chev { right: 10px; }
.jnl-filters .shd-dr-btn { background: var(--bg-alt); }
.jnl-filters-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.jnl-filters-reset { width: 30px; height: 30px; padding: 0; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jnl-filters-reset:hover { color: var(--accent-dark); border-color: var(--border-strong); }
/* Barre journal fusionnée : recherche + filtres + bascule de vue sur une ligne. */
.jnl-filters-row .filter-search-wrap { flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.jnl-filters-row .jnl-viewtoggle { margin-left: auto; height: 30px; border-radius: 7px; flex-shrink: 0; }
.jnl-filters-row .jnl-vt-btn { padding: 0 12px; font-size: 12.5px; display: inline-flex; align-items: center; }
.jnl-filters-label { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.jnl-filters-badge { background: var(--accent, #F6B400); color: #000; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; min-width: 18px; text-align: center; line-height: 16px; }
.jnl-filters-date-label { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
/* Table journal */
.jnl-table-wrap { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin-top: 12px; }
.jnl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jnl-table thead { background: transparent; }
.jnl-table th { padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.jnl-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); vertical-align: middle; transition: background 0.12s; }
.jnl-table tbody tr:last-child td { border-bottom: none; }
.jnl-table tbody tr:hover td { background: var(--bg-soft); }
.jnl-table tbody tr.is-active td,
.jnl-table tbody tr.is-selected td,
.jnl-table tbody tr.is-active:hover td,
.jnl-table tbody tr.is-selected:hover td { background: var(--accent-soft); }
.jnl-group-table tr.jnl-row-click { cursor: pointer; } /* #90 — ligne ouvre le drawer */
.jnl-col-check    { width: 36px; }
.jnl-col-icon     { width: 46px; }
.jnl-col-event    { width: 148px; white-space: nowrap; }
.jnl-col-incident { width: 112px; }
.jnl-col-author   { max-width: 180px; }
.jnl-col-time     { width: 130px; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.jnl-table-check  { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent, #F6B400); }
.jnl-row-icon-cell { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jnl-event-badge   { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; display: inline-block; }
.jnl-event-inclink { background: none; border: none; padding: 0; }
.jnl-author-cell   { display: flex; align-items: center; gap: 8px; }
.jnl-author-av     { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.jnl-author-name   { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jnl-row-actions-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px 6px; border-radius: 4px; display: flex; align-items: center; }
.jnl-row-actions-btn:hover { background: var(--bg-soft); color: var(--text); }
/* Pagination */
.jnl-pagination     { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); font-size: 13px; gap: 12px; }
.jnl-page-info      { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.jnl-page-nav       { display: flex; gap: 4px; align-items: center; }
.jnl-page-btn       { min-width: 32px; height: 32px; padding: 0 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; gap: 2px; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.jnl-page-btn:hover:not(:disabled):not(.active) { background: var(--bg-soft); border-color: var(--text-faint); color: var(--text); }
.jnl-page-btn.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); font-weight: 600; cursor: default; }
.jnl-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jnl-per-page-wrap  { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.jnl-per-page       { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 13px; color: var(--text); cursor: pointer; }
/* Icon background colors */
.jni-creation   { background: #DCFCE7; color: #166534; }
.jni-update     { background: #FEF9C3; color: #854D0E; }
.jni-action     { background: #DBEAFE; color: #1D4ED8; }
.jni-escalade   { background: #FEE2E2; color: #991B1B; }
.jni-resolution { background: #D1FAE5; color: #065F46; }
.jni-analyse    { background: #F3E8FF; color: #6B21A8; }
.jni-comm       { background: #ECFDF5; color: #065F46; }
.jni-delete     { background: #FEE2E2; color: #991B1B; }
.jni-default    { background: var(--bg-soft); color: var(--text-muted); }
/* Badge colors */
.jnb-creation   { background: #DCFCE7; color: #166534; }
.jnb-update     { background: #FEF9C3; color: #854D0E; }
.jnb-action     { background: #DBEAFE; color: #1D4ED8; }
.jnb-escalade   { background: #FEE2E2; color: #991B1B; }
.jnb-resolution { background: #D1FAE5; color: #065F46; }
.jnb-analyse    { background: #F3E8FF; color: #6B21A8; }
.jni-comm       { background: #ECFDF5; color: #065F46; }
.jnb-comm       { background: #ECFDF5; color: #065F46; }
.jnb-delete     { background: #FEE2E2; color: #991B1B; }
.jnb-default       { background: var(--bg-soft); color: var(--text-muted); }
.jni-investigation { background: #EDE9FE; color: #5B21B6; }
.jni-isolation     { background: #DBEAFE; color: #1E40AF; }
.jni-contention    { background: #CCFBF1; color: #0F766E; }
.jnb-investigation { background: #EDE9FE; color: #5B21B6; }
.jnb-isolation     { background: #DBEAFE; color: #1E40AF; }
.jnb-contention    { background: #CCFBF1; color: #0F766E; }
@media (max-width: 900px) { .jnl-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jnl-stats { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* #90 — Journal : vue timeline + panneau de détail                     */
/* -------------------------------------------------------------------- */
.jnl-chrono { margin-top: 12px; }

/* Barre d'onglets + regroupement */
.jnl-tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.jnl-tl-tabs { display: flex; gap: 4px; }
.jnl-tl-tab { background: none; border: none; padding: 10px 4px; margin-right: 16px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.jnl-tl-tab:hover { color: var(--text); }
.jnl-tl-tab.active { color: var(--text); border-bottom-color: var(--text); }
.jnl-tl-group-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.jnl-tl-group-toggle input { accent-color: var(--accent-dark); }

/* Groupe par période */
.jnl-tl-group { margin-bottom: 6px; }
.jnl-tl-group-head { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; margin: 10px 0 6px; }

/* Timeline : axe vertical + entrées */
.jnl-timeline { position: relative; }
.jnl-tl-entry { display: grid; grid-template-columns: 54px 28px minmax(0, 1fr); align-items: stretch; gap: 8px; cursor: pointer; border-radius: 10px; padding: 6px 8px 6px 0; transition: background 0.12s; }
.jnl-tl-entry:hover { background: var(--bg-soft); }
.jnl-tl-entry.is-selected { background: var(--accent-soft); }
.jnl-tl-time { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; padding-top: 10px; }
.jnl-tl-axis { position: relative; display: flex; justify-content: center; }
.jnl-tl-axis::before { content: ""; position: absolute; top: 0; bottom: -12px; left: 50%; width: 2px; background: var(--border); transform: translateX(-50%); }
.jnl-tl-entry:last-child .jnl-tl-axis::before { display: none; }
.jnl-tl-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px var(--bg-alt); }
.jnl-tl-card { min-width: 0; padding: 6px 0; }
/* Colonnes alignées : libellé (flex) | incident (fixe, fin de colonne) | auteur (fixe) */
.jnl-tl-row1 { display: flex; align-items: center; gap: 12px; }
.jnl-tl-head { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.jnl-tl-type { font-size: 14px; font-weight: 700; background: transparent !important; padding: 0 !important; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.jnl-tl-inc-col { flex: 0 0 116px; display: flex; justify-content: flex-end; }
.jnl-tl-inc-col .inc-badge { font-size: 11px; }
.jnl-tl-author { flex: 0 0 210px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.jnl-tl-author .jnl-author-name { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jnl-tl-spacer { flex: 1 1 auto; }
.jnl-tl-desc { font-size: 13px; color: var(--text); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jnl-tl-clip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-muted); }

/* Badge MAJEUR */
.jnl-major-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: #B91C1C; background: #FEE2E2; border: 1px solid #FECACA; border-radius: 5px; padding: 2px 6px; }

/* Couleurs saturées des points (icône blanche), par type */
.jnl-tl-dot.jni-creation      { background: #22C55E; }
.jnl-tl-dot.jni-update        { background: #A855F7; }
.jnl-tl-dot.jni-action        { background: #3B82F6; }
.jnl-tl-dot.jni-escalade      { background: #EF4444; }
.jnl-tl-dot.jni-resolution    { background: #10B981; }
.jnl-tl-dot.jni-analyse       { background: #8B5CF6; }
.jnl-tl-dot.jni-comm          { background: #14B8A6; }
.jnl-tl-dot.jni-delete        { background: #EF4444; }
.jnl-tl-dot.jni-investigation { background: #6366F1; }
.jnl-tl-dot.jni-isolation     { background: #2563EB; }
.jnl-tl-dot.jni-contention    { background: #0D9488; }
.jnl-tl-dot.jni-default       { background: #94A3B8; }

/* Drawer de détail — overlay glissant depuis la droite, collé au bord, au-dessus de tout */
.jnl-detail-backdrop {
  position: fixed; inset: 0; background: rgba(11, 23, 68, 0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1200;
}
.jnl-detail-backdrop.is-open { opacity: 1; visibility: visible; }
.jnl-detail-drawer {
  position: fixed; top: 50%; right: 0; width: 420px; max-width: 92vw;
  max-height: calc(100vh - 32px); /* hauteur = contenu, capée à la fenêtre */
  background: var(--bg-alt); border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: -12px 0 36px rgba(11, 23, 68, 0.22);
  transform: translate(100%, -50%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1300; display: flex; flex-direction: column; overflow: hidden;
}
.jnl-detail-drawer.is-open { transform: translate(0, -50%); }
.jnl-dt-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.jnl-dt-head .jnl-tl-dot { margin-top: 0; }
.jnl-dt-title { font-size: 15px; font-weight: 700; color: var(--text); }
.jnl-dt-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: 8px; display: inline-flex; transition: background 0.12s, color 0.12s; }
.jnl-dt-close:hover { background: var(--bg-soft); color: var(--text); }
.jnl-dt-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 18px; }
.jnl-dt-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.jnl-dt-row:last-child { border-bottom: none; }
.jnl-dt-label { font-size: 12.5px; color: var(--text-muted); }
.jnl-dt-value { font-size: 13px; color: var(--text); min-width: 0; word-wrap: break-word; }
.jnl-dt-desc { line-height: 1.5; }
.jnl-dt-clip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.jnl-dt-clip:hover { border-color: var(--text-faint); }
.jnl-dt-foot { flex: 0 0 auto; padding: 16px 18px; border-top: 1px solid var(--border); display: flex; justify-content: center; }
.jnl-dt-goinc { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .jnl-detail-drawer, .jnl-detail-backdrop { transition: none; }
}

@media (max-width: 600px) {
  .jnl-tl-entry { grid-template-columns: 44px 24px minmax(0, 1fr); }
  .jnl-tl-author { flex-basis: auto; }
  .jnl-tl-author .jnl-author-name { display: none; }
  .jnl-tl-inc-col { flex-basis: 90px; }
}

/* -------------------------------------------------------------------- */
/* Settings                                                             */
/* -------------------------------------------------------------------- */


/* -------------------------------------------------------------------- */
/* Settings — layout avec sous-menu latéral                            */
/* -------------------------------------------------------------------- */

.settings-layout {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  min-height: 480px;
}

.settings-subnav {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 12px 0;
  overflow-y: auto;
}

.settings-subnav-group {
  margin-bottom: 4px;
}

.settings-subnav-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 16px 4px;
}

.settings-subnav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.settings-subnav-item:hover {
  background: var(--bg);
  color: var(--text);
}
.settings-subnav-item.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

.settings-panel {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  overflow-y: auto;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.settings-section-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}


/* -------------------------------------------------------------------- */
/* Settings — onglets horizontaux (remplace sidebar)                   */
/* -------------------------------------------------------------------- */

.settings-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
}

.settings-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.settings-tab:hover  { color: var(--text); }
.settings-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------------- */
/* Onglet Application — coque master-détail (epic #204)                  */
/* -------------------------------------------------------------------- */
.appset {
  display: grid;
  grid-template-columns: 252px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  min-height: 580px;
}
.appset-nav {
  border-right: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appset-nav-head { display: flex; gap: 10px; align-items: center; padding: 4px 8px 14px; }
.appset-nav-head-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: #EFF3FF; color: #2563EB; display: flex; align-items: center; justify-content: center; }
.appset-nav-head strong { display: block; font-size: 14px; color: var(--text); }
.appset-nav-head span { font-size: 11.5px; color: var(--text-muted); }
.appset-nav-list { display: flex; flex-direction: column; gap: 2px; }
.appset-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: none; background: none; border-radius: 8px;
  font-family: var(--font-ui); font-size: 13px; color: var(--text-muted);
  cursor: pointer; text-align: left; width: 100%; transition: background .12s, color .12s;
}
.appset-nav-item:hover { background: var(--bg-alt); color: var(--text); }
.appset-nav-item.active { background: #EFF3FF; color: #2563EB; font-weight: 600; }
.appset-nav-item.active .appset-nav-ic { color: #2563EB; }
.appset-nav-ic { flex-shrink: 0; display: inline-flex; }
.appset-nav-item > span:nth-child(2) { flex: 1; min-width: 0; }
.appset-nav-soon { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-alt); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; }
.appset-nav-item.active .appset-nav-soon { background: #fff; }
.appset-reset {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt);
  font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); cursor: pointer;
}
.appset-reset:hover { color: var(--text); border-color: var(--border-strong); }

.appset-main { display: flex; flex-direction: column; min-width: 0; }
.appset-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: 1px solid var(--border); }
.appset-head-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #EFF3FF; color: #2563EB; display: flex; align-items: center; justify-content: center; }
.appset-head-txt { flex: 1; min-width: 0; }
.appset-head-txt h3 { font-size: 18px; font-weight: 700; margin: 0; }
.appset-head-txt p { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.appset-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }

.appset-body { padding: 26px; overflow-y: auto; }
.appset-body > .card:last-child, .appset-body > .pset-card:last-child { margin-bottom: 0; }

.appset-soon { text-align: center; padding: 52px 24px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.appset-soon-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--bg-soft); color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
.appset-soon h4 { font-size: 16px; color: var(--text); margin: 4px 0 0; }
.appset-soon p { font-size: 13px; margin: 0; max-width: 46ch; }
.appset-soon-note { font-size: 12px; color: var(--text-faint); margin-top: 8px; }

@media (max-width: 900px) {
  .appset { grid-template-columns: 1fr; }
  .appset-nav { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Statut header (dirty) */
.appset-status-dirty { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }

/* Footer unifié */
.appset-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--border); background: var(--bg-alt); }
.appset-foot .btn-primary { display: inline-flex; align-items: center; gap: 7px; }

/* -------------------------------------------------------------------- */
/* Page Notifications (epic #204, étape 2)                              */
/* -------------------------------------------------------------------- */
.notif { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.notif-main { min-width: 0; }
.notif-preview { border-left: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; gap: 18px; }

.notif-sec { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.notif-main .notif-sec:first-child { padding-top: 0; }
.notif-main .notif-sec:last-child { border-bottom: none; padding-bottom: 0; }
.notif-sec-head h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.notif-sec-head p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.45; }
.notif-sec-body { min-width: 0; }

/* Cartes de canaux */
.notif-chans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.notif-chan {
  position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto;
  gap: 2px 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  background: var(--bg-alt); transition: border-color .12s, box-shadow .12s;
}
.notif-chan:hover { border-color: #BFD3FF; }
.notif-chan.on { border-color: #2563EB; box-shadow: 0 0 0 1px #2563EB inset; }
.notif-chan-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.notif-chan-check {
  position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff;
}
.notif-chan-check svg { opacity: 0; }
.notif-chan-cb:checked + .notif-chan-check { background: #2563EB; border-color: #2563EB; }
.notif-chan-cb:checked + .notif-chan-check svg { opacity: 1; }
.notif-chan-ic { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 8px; background: #EFF3FF; color: #2563EB; display: flex; align-items: center; justify-content: center; }
.notif-chan-name { font-size: 13px; font-weight: 600; color: var(--text); align-self: end; }
.notif-chan-sub { font-size: 11px; color: var(--text-muted); }
.notif-integr { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }

/* Libellés de champ */
.notif-flabel { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.notif-flabel-mt { margin-top: 18px; }

/* Destinataires (tags + select) */
.notif-recip { display: flex; gap: 8px; align-items: flex-start; }
.notif-recip-box {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: var(--bg-alt); min-height: 40px;
}
.notif-recip-select { border: none; background: none; flex: 1; min-width: 120px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); cursor: pointer; outline: none; }
.notif-recip-add { flex-shrink: 0; white-space: nowrap; }
.notif-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text); }
.notif-tag-av { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.notif-av-0 { background: #F6B400; } .notif-av-1 { background: #2563EB; } .notif-av-2 { background: #DC2626; }
.notif-av-3 { background: #059669; } .notif-av-4 { background: #7C3AED; }
.notif-tag-x { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 14px; line-height: 1; padding: 0 2px; }
.notif-tag-x:hover { color: var(--critique); }

/* Cases à cocher (contenu + options) */
.notif-contenu { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.notif-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.notif-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.notif-check-box { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.notif-check-box svg { opacity: 0; }
.notif-check input:checked + .notif-check-box { background: #2563EB; border-color: #2563EB; }
.notif-check input:checked + .notif-check-box svg { opacity: 1; }
.notif-check-block { align-items: flex-start; }
.notif-check-txt { display: flex; flex-direction: column; gap: 2px; }
.notif-check-txt strong { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-check-txt span { font-size: 12px; color: var(--text-muted); }

.notif-row2 { display: grid; grid-template-columns: 1fr 140px; gap: 14px; }
.notif-row2 .form-select, .notif-row2 .form-input { width: 100%; }

/* Panneau d'aperçu */
.notif-prev-head strong { display: block; font-size: 13.5px; color: var(--text); }
.notif-prev-head span { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.notif-prev-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg-alt); }
.notif-prev-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #DC2626; margin-bottom: 8px; }
.notif-prev-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.notif-prev-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.notif-prev-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.notif-prev-row b { color: var(--text); font-weight: 600; }
.notif-prev-pill { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.notif-prev-crit { color: #DC2626; font-weight: 700; }
.notif-prev-desc { border-top: 1px solid var(--border); padding-top: 10px; }
.notif-prev-desc span { font-size: 11px; color: var(--text-faint); }
.notif-prev-desc p { font-size: 12.5px; color: var(--text); margin: 4px 0 0; line-height: 1.5; }
.notif-prev-btn { margin-top: 12px; width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.notif-prev-btn:hover { background: var(--bg-soft); }
.notif-prev-canaux > span { font-size: 11.5px; color: var(--text-muted); }
.notif-prev-chans { display: flex; gap: 10px; margin-top: 8px; color: #2563EB; }
.notif-prev-chan { display: inline-flex; }
.notif-prev-none { font-size: 12px; color: var(--text-faint); }

@media (max-width: 1100px) {
  .notif { grid-template-columns: 1fr; }
  .notif-preview { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .notif-sec { grid-template-columns: 1fr; gap: 12px; }
  .notif-chans { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- */
/* Escalade — config de décision (epic #204, étape 3)                   */
/* -------------------------------------------------------------------- */
.escfg .notif-sec:first-child { padding-top: 0; }
.escfg-grid-tbl { border-collapse: separate; border-spacing: 6px; }
.escfg-grid-tbl th { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 2px 6px; text-align: center; }
.escfg-rowh { text-align: right !important; white-space: nowrap; }
.escfg-cell {
  width: 100%; min-width: 92px; padding: 12px 8px; border: none; border-radius: 9px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer; color: #fff;
  transition: transform .08s, box-shadow .12s; opacity: .92;
}
.escfg-cell:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); transform: translateY(-1px); opacity: 1; }
.escfg-cell.esc-zone-incident  { background: var(--faible); }
.escfg-cell.esc-zone-challenge { background: var(--eleve); }
.escfg-cell.esc-zone-crise     { background: var(--critique); }
.escfg-axis-x { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px 66px; }
.escfg-axis-y { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-top: 6px; }

.escfg-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.escfg-role { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text); }
.escfg-role-av { width: 20px; height: 20px; border-radius: 50%; background: #2563EB; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.escfg-role-x { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 14px; line-height: 1; padding: 0 2px; }
.escfg-role-x:hover { color: var(--critique); }
.escfg-role-add { display: flex; gap: 8px; }
.escfg-role-add .form-input { flex: 1; }

.escfg-thrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.escfg-thr { display: flex; flex-direction: column; gap: 4px; }
.escfg-thr label { font-size: 12px; color: var(--text-muted); }
.escfg-thr label span { color: var(--text-faint); font-size: 11px; }
.escfg-thr-input { width: 100%; }
@media (max-width: 720px) { .escfg-thrs { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Intégrations — connecteurs externes (epic #204, étape 4)             */
/* -------------------------------------------------------------------- */
.integr { display: flex; flex-direction: column; gap: 12px; }
.integr-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); overflow: hidden; transition: border-color .12s; }
.integr-card.on { border-color: #BFD3FF; }
.integr-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.integr-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: #EFF3FF; color: #2563EB; display: flex; align-items: center; justify-content: center; }
.integr-meta { flex: 1; min-width: 0; }
.integr-meta strong { display: block; font-size: 13.5px; color: var(--text); }
.integr-meta span { font-size: 12px; color: var(--text-muted); }
.integr-body { padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.integr-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.integr-field { display: flex; flex-direction: column; gap: 4px; }
.integr-field label { font-size: 12px; color: var(--text-muted); }
.integr-test { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .integr-fields { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Automatisation — règles déclencheur → action (epic #204, étape 5)    */
/* -------------------------------------------------------------------- */
.auto { display: flex; flex-direction: column; gap: 14px; }
.auto-list { display: flex; flex-direction: column; gap: 10px; }
.auto-rule { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); flex-wrap: wrap; }
.auto-rule.off { opacity: .55; }
.auto-toggle { flex-shrink: 0; }
.auto-clause { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-kw { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.auto-clause select, .auto-clause input { font-family: var(--font-ui); font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); }
.auto-clause input { width: 130px; }
.auto-arrow { color: #2563EB; display: inline-flex; flex-shrink: 0; }
.auto-noval { color: var(--text-faint); font-size: 12.5px; }
.auto-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.auto-del:hover { color: var(--critique); background: var(--bg-soft); }
.auto-empty { padding: 28px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-muted); font-size: 13px; }
.auto-add { align-self: flex-start; }

/* -------------------------------------------------------------------- */
/* API · Archivage · IA (epic #204, étapes 6-8)                         */
/* -------------------------------------------------------------------- */
.apik-top { margin: 14px 0; }
.apik-table code { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; }
.apik-revoked { opacity: .55; }
.apik-st { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.apik-st-on { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.apik-st-off { background: #F1F5F9; color: var(--text-muted); border: 1px solid var(--border); }
.apik-token { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 10px 0; }
.apik-token code { flex: 1; min-width: 0; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12.5px; word-break: break-all; color: var(--text); }

.ia-thr { display: flex; align-items: center; gap: 14px; max-width: 420px; }
.ia-thr input[type=range] { flex: 1; accent-color: #2563EB; }
.ia-thr-val { font-size: 13px; font-weight: 700; color: #2563EB; min-width: 48px; text-align: right; }

.settings-hero-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.settings-hero-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--accent-soft);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.settings-hero-stat {
  text-align: right;
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-hero-stat-val {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.settings-hero-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.settings-icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.settings-icon-btn:hover { background: var(--bg-soft); color: var(--text); }

.settings-content-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.settings-content-item-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.settings-content-item-body { flex: 1; min-width: 0; }
.settings-content-item-label { font-size: 13px; font-weight: 600; }
.settings-content-item-desc  { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.settings-content-item-count { font-size: 20px; font-weight: 700; flex-shrink: 0; align-self: center; }

.settings-info-item {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.settings-info-item:last-child { border-bottom: none; }

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.settings-section-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.settings-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { color: var(--text-muted); }
.settings-row .value { font-weight: 500; }

/* -------------------------------------------------------------------- */
/* Misc                                                                 */
/* -------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 24px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: #FFF;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 200;
  animation: toast-in 0.2s ease-out;
}
.toast.toast-error   { background: var(--critique); }
.toast.toast-success { background: var(--faible); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* -------------------------------------------------------------------- */
/* Modal wide — create incident (two-column layout)                     */
/* -------------------------------------------------------------------- */

.modal-wide {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.modal-wide-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  overflow: hidden;
}

.modal-form-panel {
  padding: 28px 28px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-qual-panel {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-wide-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.modal-header-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--accent-soft);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
}

.modal-header-text { display: flex; flex-direction: column; gap: 2px; }
.modal-header-text h3 { font-size: 18px; font-weight: 700; margin: 0; }
.modal-header-text .subtitle { font-size: 13px; color: var(--text-muted); }
.modal-header-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.modal-header-close:hover { background: var(--bg-soft); color: var(--text); }

.modal-wide-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-wide-footer .spacer { flex: 1; }

/* Form section label */
.form-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 10px;
}
.form-section-label:first-child { margin-top: 0; }

/* Source pills (radio group) */
.source-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.source-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text-muted);
  user-select: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.source-pill:hover { border-color: var(--accent); color: var(--text); }
.source-pill.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.source-pill svg { flex-shrink: 0; }

/* Type chips (icon selection) */
.type-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.type-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text-muted);
  user-select: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.type-chip:hover { border-color: var(--accent); color: var(--text); }
.type-chip.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.type-chip-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.type-chip-icon.tc-red    { background: var(--critique-soft); color: var(--critique); }
.type-chip-icon.tc-blue   { background: var(--info-soft);     color: var(--info); }
.type-chip-icon.tc-purple { background: #F3E8FF;              color: #7C3AED; }
.type-chip-icon.tc-teal   { background: #CCFBF1;              color: #0F766E; }

/* Criticité dot buttons */
.crit-btns {
  display: flex;
  gap: 8px;
}
.crit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text-muted);
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.crit-btn .cdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.crit-btn:hover { border-color: currentColor; }
.crit-btn.selected-faible   { border-color: var(--faible);   background: var(--faible-soft);   color: #14532D; }
.crit-btn.selected-moyen    { border-color: var(--moyen);    background: var(--moyen-soft);    color: #92400E; }
.crit-btn.selected-eleve    { border-color: var(--eleve);    background: var(--eleve-soft);    color: #9A3412; }
.crit-btn.selected-critique { border-color: var(--critique); background: var(--critique-soft); color: #991B1B; }

/* Textarea with counter */
.textarea-wrap { position: relative; }
.textarea-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
  resize: vertical;
  min-height: 90px;
}
.textarea-wrap textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.char-counter {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 4px;
}
.char-counter.near-limit { color: var(--moyen); }
.char-counter.at-limit   { color: var(--critique); }

/* Pilot selector row */
.pilot-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  cursor: pointer;
}
.pilot-selector select {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.pilot-selector select:focus { outline: none; }
.pilot-selector:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.pilot-clear {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.pilot-clear:hover { color: var(--critique); }

/* Drop zone */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg-soft);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-zone-icon { color: var(--text-faint); margin-bottom: 8px; }
.drop-zone-label { font-size: 13px; color: var(--text-muted); }
.drop-zone-label strong { color: var(--accent-dark); }
.drop-zone-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.drop-zone-files { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.drop-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 4px 8px;
}
.drop-file-item .remove-file {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.drop-file-item .remove-file:hover { color: var(--critique); }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.toggle-switch {
  position: relative;
  width: 42px; height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--faible); }
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s;
}
.toggle-switch input:checked ~ .toggle-thumb { left: 21px; }
.toggle-label { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }
.toggle-label .toggle-sub { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 400; }

/* Qualification panel */
.qual-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.qual-panel-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.qual-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qual-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.qual-step-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qual-step-body { font-size: 12.5px; color: var(--text); }
.qual-step-body strong { display: block; font-weight: 600; margin-bottom: 2px; }
.qual-step-body span { color: var(--text-muted); font-size: 12px; }

.qual-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.qual-crit-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qual-crit-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.qual-crit-dots { display: flex; gap: 6px; }
.qual-crit-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s;
}

.qual-tip {
  margin-top: auto;
  background: var(--info-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--info);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.qual-tip svg { flex-shrink: 0; margin-top: 1px; }

/* Input styled like filter-bar */
.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
}
.form-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.form-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
  cursor: pointer;
}
.form-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* btn-secondary */
.btn-secondary {
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  color: var(--text);
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--bg-soft); }

/* -------------------------------------------------------------------- */
/* Stepper modal                                                        */
/* -------------------------------------------------------------------- */

/* Remove form panel padding — each step pane owns its own */
.modal-form-panel { padding: 0 !important; }

.modal-step-nav {
  display: flex;
  align-items: center;
  padding: 20px 36px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: color 0.2s;
}
.step-item.is-active { color: var(--text); }
.step-item.is-done   { color: var(--faible); }
.step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.step-item.is-active .step-num { background: var(--accent); border-color: var(--accent); color: var(--text); }
.step-item.is-done   .step-num { background: var(--faible); border-color: var(--faible); color: #fff; }
.step-line {
  flex: 1; height: 2px;
  background: var(--border);
  margin: 0 14px;
  border-radius: 999px;
  transition: background 0.3s;
}
.step-line.is-done { background: var(--faible); }

/* Step pane */
.step-pane { display: none; }
.step-pane.is-active {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 36px 24px;
  animation: step-in 0.18s ease-out both;
  overflow-y: auto;
  flex: 1;
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-pane.go-back {
  animation-name: step-in-back;
}
@keyframes step-in-back {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Step heading */
.step-head { display: flex; flex-direction: column; gap: 4px; }
.step-head h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.step-head p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

/* Field group */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-req { color: var(--critique); font-weight: 400; font-size: 16px; line-height: 1; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: -4px; }

/* Larger inputs inside steps */
.step-pane .form-input,
.step-pane .form-select {
  padding: 11px 14px;
  font-size: 14px;
  border-radius: 10px;
}
.step-pane .form-input:focus,
.step-pane .form-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.step-pane .textarea-wrap textarea {
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  min-height: 130px;
}
.step-pane .source-pill  { padding: 10px 16px; font-size: 13px; }
.step-pane .crit-btn     { padding: 10px 18px; font-size: 13px; }
.step-pane .crit-btns    { gap: 10px; flex-wrap: wrap; }
.step-pane .type-chip    { padding: 11px 14px; font-size: 13px; }

/* 2-col sub-grid inside a step pane */
.step-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Pilot row inside step pane */
.step-pane .pilot-selector { padding: 10px 14px; }
.step-pane .pilot-selector select { font-size: 14px; }

/* Error banner inside step */
.step-field-error {
  font-size: 12.5px;
  color: var(--critique);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
}

/* Footer button visibility helpers */
.modal-wide-footer .btn-hidden { display: none; }

/* Form 2-column inner layout (kept for backward compat) */
.form-inner-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  column-gap: 24px;
}
.form-inner-col { display: flex; flex-direction: column; }
.crit-btns { flex-wrap: wrap; }

/* Bottom row: pilot left, files right */
.form-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  column-gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 16px;
}

/* Drop zone compact (inside bottom row) */
.form-bottom-row .drop-zone {
  padding: 14px 16px;
}
.form-bottom-row .drop-zone-icon { margin-bottom: 4px; }
.form-bottom-row .drop-zone-label { font-size: 12.5px; margin: 0; }
.form-bottom-row .drop-zone-label + .drop-zone-label { margin-top: 1px; }
.form-bottom-row .drop-zone-hint { margin-top: 3px; }

/* Qualification panel step icons */
.qual-step-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.qi-blue   { background: var(--info-soft);  color: var(--info); }
.qi-orange { background: var(--eleve-soft); color: var(--eleve); }
.qi-purple { background: #F3E8FF;           color: #7C3AED; }

/* Qual crit hint text */
.qual-crit-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* -------------------------------------------------------------------- */
/* Incidents list — enriched layout                                      */
/* -------------------------------------------------------------------- */

.incidents-outer  { display: flex; flex-direction: column; gap: 18px; }
.incidents-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.incidents-main   { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Repli responsive de la tuile latérale (actions / évaluations) : quand le
   tableau n'a plus la place, le JS (SHIELD.responsiveTable) pose .inc-hide-sidebar
   sur cette instance de layout — la tuile disparaît et le tableau gagne la
   largeur. Scopé par instance : l'écran incidents n'est pas affecté. */
.incidents-layout.inc-hide-sidebar { grid-template-columns: 1fr; }
.incidents-layout.inc-hide-sidebar .incidents-sidebar { display: none; }

.incidents-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.incidents-title  { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.incidents-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }
.incidents-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 2px; }

/* Stat cards */
.stat-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.stat-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card-body { display: flex; flex-direction: column; gap: 2px; }
.stat-card-val   { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-card-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.stat-card-trend { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.trend-up   { color: var(--faible); }
.trend-down { color: var(--critique); }
.trend-warn { color: var(--eleve); }

/* Filter bar */
.incident-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-pill-select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 28px 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  min-width: 100px;
  transition: border-color 0.15s, background 0.15s;
}
.filter-pill-select:focus { outline: none; border-color: var(--accent); }
.filter-pill-select:hover { border-color: var(--border-strong); }
.filter-search-wrap {
  flex: 1; min-width: 200px; height: 30px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px;
  padding: 0 12px;
  transition: border-color 0.15s;
}
.filter-search-wrap:focus-within { border-color: var(--accent); }
.filter-search-wrap svg { color: var(--text-faint); flex-shrink: 0; }
.filter-search-wrap input { border: none; background: none; outline: none; font-size: 13px; color: var(--text); width: 100%; }
/* ui-select remplace les <select> : on aligne le trigger sur la pill de recherche
   (même hauteur ~30px, même forme pill). */
.incident-filter-bar .ui-select-trigger {
  height: 30px; padding: 0 28px 0 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text); background: var(--bg-alt);
}
.incident-filter-bar .ui-select-chev { right: 10px; }
/* Bouton export (icône) + bouton primaire (Nouvelle …) alignés sur la barre (30px). */
.incident-filter-bar .btn-icon { width: 30px; height: 30px; border-radius: 7px; }
.incident-filter-bar .btn-primary { height: 30px; padding: 0 14px; border-radius: 7px; font-size: 13px; }
.filter-search-wrap input::placeholder { color: var(--text-faint); }

/* Enhanced table */
.id-title-cell { min-width: 180px; max-width: 240px; }
.inc-id-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.inc-id { font-size: 11.5px; font-weight: 700; color: var(--text-faint); font-family: var(--font-mono); }
.inc-edit-btn { font-size: 12px; padding: 1px 5px; opacity: 0; transition: opacity 0.15s; }
tr:hover .inc-edit-btn { opacity: 1; }
.inc-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.inc-source-cell { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.inc-source-icon { display: flex; align-items: center; color: var(--text-faint); }
.perimetre-cell { font-size: 12.5px; color: var(--text-muted); max-width: 160px; word-break: break-word; }
/* Repli progressif des colonnes secondaires du tableau incidents.
   Plutôt que de laisser apparaître un ascenseur horizontal, le JS (_fitColumns)
   masque les colonnes les moins critiques une par une — Périmètre impacté
   d'abord, puis Source — tant que le tableau déborde de son conteneur.
   L'ascenseur ne reste qu'en ultime recours (fenêtre extrêmement étroite). */
#incident-table-wrap { overflow-x: auto; }
#incident-table-wrap.inc-hide-perimetre .inc-col-perimetre { display: none; }
#incident-table-wrap.inc-hide-source    .inc-col-source    { display: none; }
.inc-assignee-cell { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.inc-av-sm { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.inc-av-cell { display: flex; align-items: center; gap: 6px; }
.av-pct { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.chevron-cell { color: var(--text-faint); width: 32px; text-align: center; }
.nowrap { white-space: nowrap; font-size: 12.5px; }

/* Pagination */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; font-size: 12.5px; color: var(--text-muted); }
.pagination-controls { display: flex; align-items: center; gap: 4px; }
.page-btn { min-width: 32px; height: 32px; padding: 0 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.page-btn:hover:not(:disabled):not(.page-btn-active) { background: var(--bg-soft); border-color: var(--text-faint); color: var(--text); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-btn-active { background: var(--accent-soft) !important; border-color: var(--accent-soft) !important; color: var(--accent-dark) !important; font-weight: 600; cursor: default; }

/* Incidents sidebar */
.incidents-sidebar { display: flex; flex-direction: column; gap: 0; position: sticky; top: 20px; }
.inc-sidebar-section { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.inc-sidebar-section:last-child { margin-bottom: 0; }
.inc-sidebar-h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.inc-sidebar-sub { font-size: 12px; color: var(--text-faint); margin: 0 0 14px; }
.inc-sidebar-period { font-weight: 400; color: var(--text-faint); font-size: 13px; }
.inc-donut-wrap { display: flex; align-items: center; gap: 16px; margin: 14px 0 12px; }
.inc-donut-wrap > div:first-child { width: 120px; height: 120px; flex-shrink: 0; }
.inc-donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donut-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { flex: 1; color: var(--text-muted); }
.donut-legend-val { font-weight: 700; color: var(--text); min-width: 20px; text-align: right; }
.sidebar-link { display: block; font-size: 12.5px; font-weight: 600; color: var(--info); margin-top: 8px; }
.sidebar-link:hover { text-decoration: underline; }

.status-bars { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.status-bar-row { display: flex; align-items: center; gap: 8px; }
.status-bar-label { font-size: 12px; color: var(--text-muted); width: 110px; flex-shrink: 0; }
.status-bar-track { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.status-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s; }
.status-bar-count { font-size: 12px; font-weight: 700; color: var(--text); min-width: 16px; text-align: right; }

.inc-trend-text { font-size: 14px; font-weight: 700; color: var(--faible); margin: 10px 0 4px; }
.inc-trend-sub { font-size: 12px; font-weight: 400; color: var(--text-faint); }
#inc-line-chart { height: 80px; margin: 8px 0; }

.inc-shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.inc-shortcut-btn { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; line-height: 1.3; transition: background 0.12s; }
.inc-shortcut-btn svg { color: var(--text-faint); }
.inc-shortcut-btn:hover { background: var(--border); }


/* Icon-only button */
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Périmètre icon cells */
.perim-icon-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.perim-icon-box  { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; }
.perim-overflow  { font-size: 11px; font-weight: 700; color: var(--text-faint); white-space: nowrap; padding-left: 2px; }

/* -------------------------------------------------------------------- */
/* Incident detail view                                                  */
/* -------------------------------------------------------------------- */

.incident-detail { display: flex; flex-direction: column; min-height: 100%; }

.data-table tbody tr { cursor: pointer; }
.data-table tbody tr td { transition: background 0.12s; }
.data-table tbody tr.is-active td,
.data-table tbody tr.is-selected td { background: var(--accent-soft); }
.data-table tbody tr.is-active:hover td,
.data-table tbody tr.is-selected:hover td { background: var(--accent-soft); }

.detail-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 13px; }
.breadcrumb-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); padding: 2px 0;
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
}
.breadcrumb-back:hover { color: var(--text); }
.breadcrumb-sep { color: var(--text-faint); font-size: 16px; }
.breadcrumb-current { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; }

.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.detail-header-main { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; }
.detail-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detail-icon.icon-critique { background: var(--critique-soft); color: var(--critique); }
.detail-icon.icon-eleve    { background: var(--eleve-soft);    color: var(--eleve); }
.detail-icon.icon-moyen    { background: var(--moyen-soft);    color: var(--moyen); }
.detail-icon.icon-faible   { background: var(--faible-soft);   color: var(--faible); }

.detail-title-group { flex: 1; min-width: 0; }
.detail-id-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.detail-id { font-size: 14px; font-weight: 700; color: var(--text-faint); font-family: var(--font-mono); }
.detail-sep { color: var(--text-faint); }
.detail-title-h { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.detail-meta-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); flex-wrap: wrap; }
.detail-meta-dot { color: var(--border-strong); }
.detail-header-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; }

/* Tabs */
.detail-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 500; color: var(--text-faint);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: color 0.15s;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.tab-badge { background: var(--bg-soft); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

/* Body layout */
.detail-body { display: grid; grid-template-columns: 1fr 284px; gap: 18px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 14px; }

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kpi-card {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 7px;
  border-top-style: solid; border-top-width: 3px;
}
.kpi-card-hd { display: flex; align-items: center; gap: 7px; }
.kpi-card-hd svg { color: var(--text-faint); flex-shrink: 0; }
.kpi-card-label { font-size: 10.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-card-big { font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.kpi-card-value { font-size: 18px; font-weight: 800; line-height: 1.1; }
.kpi-card-sub   { font-size: 11.5px; color: var(--text-faint); }
.kpi-status-badge { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.kpi-badge-lg { font-size: 13.5px; font-weight: 800; padding: 6px 14px; border-radius: 8px; }
.kpi-s-nouveau     { background: var(--bg-soft);        color: var(--text-muted); }
.kpi-s-cours       { background: #FEF9C3;               color: #854D0E; }
.kpi-s-remediation { background: var(--eleve-soft);     color: #9A3412; }
.kpi-s-surveillance{ background: var(--info-soft);      color: #1E40AF; }
.kpi-s-resolu      { background: var(--faible-soft);    color: #166534; }
.kval-critique { color: var(--critique); }
.kval-eleve    { color: var(--eleve); }
.kval-moyen    { color: var(--moyen); }
.kval-faible   { color: var(--faible); }

/* Section cards */
.detail-section { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.detail-section-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.detail-cols-3 { display: grid; grid-template-columns: 2fr 1.3fr 1.3fr; gap: 12px; align-items: start; }
.detail-cols-2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 12px; align-items: start; }

/* Description */
.desc-text  { font-size: 13px; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0; }
.desc-empty { font-size: 13px; color: var(--text-faint); font-style: italic; margin: 0; }
.btn-voir-plus { background: none; border: none; color: var(--info); font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 0 0; display: flex; align-items: center; gap: 4px; }

/* Périmètre */
.perimetre-list { display: flex; flex-direction: column; gap: 10px; }
.perimetre-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.perimetre-lhs  { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.perimetre-lhs svg { color: var(--text-faint); flex-shrink: 0; }
.perimetre-val { font-weight: 700; color: var(--text); }
.perimetre-tag { background: var(--bg-soft); padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* Actifs */
.actif-list { display: flex; flex-direction: column; gap: 10px; }
.actif-item { display: flex; align-items: center; gap: 10px; }
.actif-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; }
.actif-body { display: flex; flex-direction: column; gap: 1px; }
.actif-name { font-size: 13px; font-weight: 600; color: var(--text); }
.actif-desc { font-size: 11.5px; color: var(--text-faint); }
.voir-plus-link { background: none; border: none; color: var(--info); font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 0 0; display: flex; align-items: center; gap: 4px; }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 10px; }
.timeline-track { display: flex; flex-direction: column; align-items: center; width: 38px; flex-shrink: 0; }
.timeline-time  { font-size: 10.5px; color: var(--text-faint); font-weight: 600; font-family: var(--font-mono); text-align: center; }
.timeline-dot   { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); margin: 3px 0; flex-shrink: 0; }
.tl-red    { background: var(--critique); }
.tl-orange { background: var(--eleve); }
.tl-green  { background: var(--faible); }
.tl-gray   { background: var(--border-strong); }
.timeline-line { flex: 1; width: 2px; background: var(--border); border-radius: 999px; min-height: 12px; }
.timeline-body { flex: 1; padding: 2px 0 16px; }
.timeline-item:last-child .timeline-body { padding-bottom: 0; }
.timeline-desc   { font-size: 13px; color: var(--text); line-height: 1.4; }
.timeline-author { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* Actions list */
.action-list { display: flex; flex-direction: column; gap: 10px; }
.action-item { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.action-hdr  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.action-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.action-meta  { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-faint); }
.action-assignee { display: flex; align-items: center; gap: 6px; }
.action-av { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.action-deadline { font-size: 11.5px; }
.badge-a-cours { background: var(--info-soft);   color: var(--info);   font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-a-faire { background: var(--bg-soft);     color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-a-done  { background: var(--faible-soft); color: #166534;           font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.action-title-row { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.action-badges    { display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start; flex-wrap: wrap; }
.ac-task-toggle   { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 2px; border-radius: 4px; display: flex; align-items: center; transition: transform 0.2s, color 0.1s; flex-shrink: 0; }
.ac-task-toggle:hover { color: var(--text); }
.ac-task-toggle.is-open { transform: rotate(180deg); }
.action-progress  { display: flex; align-items: center; gap: 8px; }
.progress-bar-wrap{ flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-bar-fill{ height: 100%; background: var(--info); border-radius: 2px; transition: width 0.35s; }
.ac-progress-text { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.action-tasks-list{ display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 2px; }
.ac-task-row      { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; font-size: 12.5px; color: var(--text-muted); }
.ac-task-row:hover { color: var(--text); }
.ac-task-check    { width: 14px; height: 14px; accent-color: var(--info); cursor: pointer; flex-shrink: 0; }
.ac-task-label    { flex: 1; line-height: 1.4; }
.ac-task-label.is-done { text-decoration: line-through; color: var(--text-faint); }

/* ---- Priority badges (Élevée / Moyenne / Faible) ---- */
.badge-prio-elevee { background: var(--eleve-soft);    color: #C2410C; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.badge-prio-moyenne { background: var(--moyen-soft);   color: #92400E; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-prio-faible  { background: var(--bg-soft);      color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-prio-urgente { display: inline-flex; align-items: center; gap: 3px; }

/* ---- Actions table ---- */
.act-table { table-layout: fixed; min-width: 920px; }
#act-table-wrap { overflow-x: auto; }
.act-table th:nth-child(1) { width: 25%; }
.act-table th:nth-child(2) { width: 10%; }
.act-table th:nth-child(3) { width: 10%; }
.act-table th:nth-child(4) { width: 18%; }
.act-table th:nth-child(5) { width: 15%; }
.act-table th:nth-child(6) { width: 17%; }
.act-table th:nth-child(7) { width: 5%; }
/* Repli responsive : colonne Progression masquée → on réduit aussi le min-width
   fixe du tableau, sinon il continuerait de déborder malgré la colonne cachée. */
#act-table-wrap.act-hide-progression .act-col-progression { display: none; }
#act-table-wrap.act-hide-progression .act-table { min-width: 760px; }
.act-id-title-cell { vertical-align: middle; }
.act-id-row   { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.act-id-badge {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--info); white-space: nowrap;
}
.act-row-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-actions-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; white-space: nowrap; }

/* ---- Assignee cell ---- */
.act-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0; width: 28px; height: 28px; font-size: 10px; }
.act-assignee-cell { display: flex; align-items: center; gap: 8px; }
.act-assignee-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.act-assignee-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-assignee-equipe { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ---- Deadline cell ---- */
.act-deadline { display: flex; flex-direction: column; gap: 2px; }
.act-deadline-date { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text); font-weight: 500; }
.act-deadline-time { font-size: 11px; color: var(--text-faint); padding-left: 16px; }

/* ---- Progress cell ---- */
.act-progress-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.act-progress-cell .progress-bar-wrap { flex: 1; min-width: 40px; }
.act-pct-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ---- Pagination page-size ---- */
.act-page-size-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-left: 8px; }
.act-page-size-sel { padding: 4px 6px; font-size: 12.5px; height: auto; }

/* ---- Sidebar responsables ---- */
.act-resp-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.act-resp-row  { display: flex; align-items: center; gap: 8px; }
.act-resp-rank { font-size: 12px; font-weight: 700; color: var(--text-faint); min-width: 14px; text-align: center; }
.act-resp-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.act-resp-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-resp-equipe { font-size: 11px; color: var(--text-faint); }
.act-resp-bar-wrap { width: 50px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.act-resp-bar { height: 100%; background: var(--info); border-radius: 2px; }
.act-resp-count { font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 16px; text-align: right; }

/* ---- Kebab dropdown menu ---- */
.act-kebab-menu { position: fixed; z-index: 9999; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(11,23,68,0.14); padding: 4px; min-width: 190px; }
.act-kebab-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text); background: none; border: none; border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap; }
.act-kebab-item:hover { background: var(--bg-soft); }
.act-kebab-item svg { color: var(--text-faint); flex-shrink: 0; }
.act-kebab-danger { color: var(--critique); }
.act-kebab-danger:hover { background: var(--critique-soft); }
.act-kebab-danger svg { color: var(--critique); }
.act-kebab-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* Sidebar */
.detail-sidebar { display: flex; flex-direction: column; gap: 12px; }
.sidebar-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; }
.sidebar-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.sidebar-resp { display: flex; align-items: center; gap: 12px; }
.sidebar-resp-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sidebar-resp-name { font-size: 14px; font-weight: 700; color: var(--text); }
.sidebar-resp-role { font-size: 12px; color: var(--text-faint); }
.classif-list { display: flex; flex-direction: column; gap: 0; }
.classif-row  { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.classif-row:last-child { border-bottom: none; padding-bottom: 0; }
.classif-row:first-child { padding-top: 0; }
.classif-key  { color: var(--text-faint); }
.classif-lbl  { display: flex; align-items: center; gap: 7px; color: var(--text-faint); flex-shrink: 0; min-width: 80px; }
.classif-val  { color: var(--text); font-weight: 600; text-align: right; line-height: 1.4; }
.classif-link { background: none; border: none; cursor: pointer; color: var(--info); font-size: 12.5px; font-weight: 600; padding: 8px 0 0; display: block; }
.tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip  { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.liens-list { display: flex; flex-direction: column; }
.lien-row   { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--text-muted); transition: color 0.1s; }
.lien-row:last-child { border-bottom: none; }
.lien-row:hover { color: var(--text); }
.lien-lhs { display: flex; align-items: center; gap: 8px; }
.lien-rhs { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text); }
.quick-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-action-btn { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; line-height: 1.3; transition: background 0.12s; }
.quick-action-btn:hover { background: var(--border); }
.quick-action-btn svg { color: var(--text-faint); }

/* Compact KPI bar (replaces 5-card kpi-row) */
.kpi-bar { display: flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kpi-bar-item { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.kpi-bar-sep { width: 1px; background: var(--border); flex-shrink: 0; margin: 10px 0; }
.kpi-bar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.kpi-bar-val   { font-size: 14px; font-weight: 700; line-height: 1.2; }
.kpi-bar-sub   { font-size: 11px; color: var(--text-faint); }

/* Mid-row 2-col: description left + stacked right */
.detail-mid-row { display: grid; grid-template-columns: 1fr 210px; gap: 12px; align-items: start; }
.detail-mid-left  { display: flex; flex-direction: column; gap: 12px; }
.detail-mid-right { display: flex; flex-direction: column; gap: 12px; }
.detail-mid-right .detail-section { padding: 14px 16px; }
.detail-mid-right .detail-section-title { font-size: 12.5px; margin-bottom: 10px; }

/* Quick action rows (horizontal, full-width in sidebar) */
.quick-actions-list { display: flex; flex-direction: column; gap: 6px; }
.quick-action-row {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  text-align: left; transition: background 0.12s; width: 100%;
}
.quick-action-row:hover { background: var(--border); }
.quick-action-row svg { color: var(--text-faint); flex-shrink: 0; }

/* Sidebar section divider */
.sidebar-divider { height: 1px; background: var(--border); margin: 12px 0; }

/* ------------------------------------------------------------------ */
/* Plus d'actions panel                                                */
/* ------------------------------------------------------------------ */
.plus-actions-panel {
  position: absolute;
  z-index: 900;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.pa-item:hover { background: var(--bg-soft); }
.pa-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pa-red    { background: #FEE2E2; color: #DC2626; }
.pa-green  { background: #DCFCE7; color: #16A34A; }
.pa-green2 { background: #D1FAE5; color: #059669; }
.pa-blue   { background: #DBEAFE; color: #2563EB; }
.pa-blue2  { background: #EDE9FE; color: #7C3AED; }
.pa-orange { background: #FFEDD5; color: #EA580C; }
.pa-text   { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pa-label  { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pa-sub    { font-size: 12px; color: var(--text-muted); }
.pa-chev   { color: var(--text-faint); }
.pa-danger .pa-label { color: #DC2626; }

/* ------------------------------------------------------------------ */
/* Créer une action modal                                              */
/* ------------------------------------------------------------------ */
.modal-action {
  width: min(900px, 96vw);
  max-width: min(900px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.modal-action-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-action-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.modal-action-sub   { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.modal-close-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.1s;
}
.modal-close-x:hover { background: var(--bg-soft); }
.action-tabs-bar {
  display: flex;
  gap: 2px;
  padding: 10px 24px 0;
  border-bottom: 1px solid var(--border);
}
.action-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.action-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.action-tab:hover:not(.is-active) { color: var(--text); }
.modal-action-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr 260px;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.mac-col {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.mac-col:last-child { border-right: none; }
.mac-col .form-row label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; display: block; white-space: nowrap; }
.mac-col .form-row { display: flex; flex-direction: column; gap: 0; margin: 0; }
.mac-col input, .mac-col textarea, .mac-col select { font-size: 13px; }
.mac-col-tasks { background: var(--bg-soft); gap: 10px; }
.priority-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.priority-pill {
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  color: var(--text-muted);
}
.priority-pill.is-active,
.priority-pill:hover { background: var(--bg-soft); }
.pp-critique.is-active { background: #FEE2E2; border-color: #EF4444; color: #DC2626; }
.pp-haute.is-active    { background: #FFEDD5; border-color: #F97316; color: #EA580C; }
.pp-normale.is-active  { background: #DBEAFE; border-color: #3B82F6; color: #2563EB; }
.pp-faible.is-active   { background: #DCFCE7; border-color: #22C55E; color: #16A34A; }
.linked-incident-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.li-id    { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.li-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-row { display: flex; align-items: center; gap: 10px; }
.assignee-av  { width: 36px; height: 36px; border-radius: 50%; background: var(--text-muted); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tasks-panel-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.tasks-list { display: flex; flex-direction: column; gap: 4px; }
.task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.task-drag { cursor: grab; color: var(--text-faint); font-size: 11px; letter-spacing: -2px; flex-shrink: 0; }
.task-chk  { flex-shrink: 0; cursor: pointer; }
.task-label { flex: 1; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-done  { text-decoration: line-through; color: var(--text-muted); }
.task-av-sm { width: 22px; height: 22px; border-radius: 50%; background: var(--info); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-date  { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.task-del   { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 4px; transition: color 0.1s; flex-shrink: 0; }
.task-del:hover { color: var(--danger); }
.task-new-input { flex: 1; border: none; background: none; font-size: 12.5px; color: var(--text); outline: none; }
.add-task-btn {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color 0.1s, color 0.1s;
}
.add-task-btn:hover { border-color: var(--accent); color: var(--accent); }
.tasks-info-box {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #1D4ED8;
  line-height: 1.5;
  margin-top: auto;
}
.modal-action-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Créer une action — modal v2 (fidèle au design)                      */
/* ------------------------------------------------------------------ */
.modal-action-v2 {
  width: min(1180px, 96vw);
  max-width: min(1180px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.mac2-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 28px 14px;
  border-bottom: 1px solid var(--border);
}

.mac2-icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mac2-titles { flex: 1; min-width: 0; padding-top: 2px; }
.mac2-title  { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.mac2-sub    { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.mac2-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.mac2-close:hover { background: var(--bg-soft); color: var(--text); }

.mac2-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px;
  padding: 22px 28px;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.mac2-form-area { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mac2-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mac2-row-titlepilot { grid-template-columns: 1.4fr 1fr; }
.mac2-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mac2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mac2-field label {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 4px;
}
.mac2-req { color: #EF4444; font-weight: 700; }
.mac2-opt { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 2px; }

.mac2-field input[type="text"],
.mac2-field input[type="date"],
.mac2-field input[type="time"],
.mac2-field textarea,
.mac2-field select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px; color: var(--text);
  background: var(--bg-alt);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mac2-field input:focus, .mac2-field textarea:focus, .mac2-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18);
}
.mac2-field input::placeholder, .mac2-field textarea::placeholder { color: var(--text-faint); }

.mac2-textarea-wrap { position: relative; }
.mac2-textarea-wrap textarea { resize: vertical; min-height: 96px; padding-bottom: 26px; }
.mac2-char-count {
  position: absolute; bottom: 8px; right: 14px;
  font-size: 11px; color: var(--text-faint);
  pointer-events: none;
}

.mac2-prio-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mac2-prio {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px;
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color 0.12s, background 0.12s;
}
.mac2-prio:hover { background: var(--bg-soft); }
.mac2-prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mac2-prio-faible   .mac2-prio-dot { background: #22C55E; }
.mac2-prio-moyenne  .mac2-prio-dot { background: #EAB308; }
.mac2-prio-elevee   .mac2-prio-dot { background: #F97316; }
.mac2-prio-critique .mac2-prio-dot { background: #EF4444; }
.mac2-prio.is-active { box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18); }
.mac2-prio.is-active.mac2-prio-faible   { border-color: #22C55E; background: rgba(34,197,94,0.06); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.mac2-prio.is-active.mac2-prio-moyenne  { border-color: #EAB308; background: rgba(234,179,8,0.08); box-shadow: 0 0 0 3px rgba(234,179,8,0.18); }
.mac2-prio.is-active.mac2-prio-elevee   { border-color: #F97316; background: rgba(249,115,22,0.06); box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
.mac2-prio.is-active.mac2-prio-critique { border-color: #EF4444; background: rgba(239,68,68,0.06); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

.mac2-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.mac2-linked {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt);
}
.mac2-linked svg { color: var(--text-muted); flex-shrink: 0; }
.mac2-linked-text { font-size: 13.5px; color: var(--text); font-weight: 500; }

.mac2-drop {
  border: 1.5px dashed #CBD5E1;
  border-radius: 12px;
  padding: 20px 16px 16px;
  text-align: center;
  background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mac2-drop-icon { color: var(--text-muted); margin-bottom: 6px; }
.mac2-drop-l1   { font-size: 13.5px; color: var(--text); margin: 0; font-weight: 500; }
.mac2-drop-l1 strong { font-weight: 600; }
.mac2-drop-l2   { font-size: 13px; color: var(--text-muted); margin: 0; }
.mac2-drop-hint { font-size: 11.5px; color: var(--text-faint); margin: 8px 0 0; }

.mac2-assignee {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt);
}
.mac2-assignee-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--text-muted); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mac2-assignee-info { flex: 1; min-width: 0; line-height: 1.25; }
.mac2-assignee-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mac2-assignee-role { font-size: 12px; color: var(--text-muted); }
.mac2-assignee-clear, .mac2-assignee-toggle {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
  position: relative; z-index: 3;
  transition: background 0.1s, color 0.1s;
}
.mac2-assignee-clear:hover, .mac2-assignee-toggle:hover { background: var(--bg-soft); color: var(--text); }
.mac2-assignee-toggle { cursor: default; pointer-events: none; }
.mac2-assignee-select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
  border: none; background: transparent; padding: 0;
}

.mac2-date-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.mac2-date-field { position: relative; display: flex; align-items: center; }
.mac2-date-field svg {
  position: absolute; left: 14px;
  color: var(--text-muted); pointer-events: none;
}
.mac2-date-field input { padding-left: 42px; width: 100%; }

.mac2-stat-wrap { position: relative; display: flex; align-items: center; }
.mac2-stat-dot {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none;
  background: #3B82F6;
}
.mac2-stat-select { padding-left: 34px; }

.mac2-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.mac2-footer .btn-ghost,
.mac2-footer .btn-primary {
  font-size: 14px; font-weight: 600;
  padding: 9px 22px; border-radius: 10px;
}

/* Tasks panel */
.mac2-tasks-panel {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.mac2-tasks-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 2px;
}
.mac2-tasks-title {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 6px;
}
.mac2-tasks-info { color: var(--text-faint); display: inline-flex; cursor: help; }
.mac2-add-task {
  background: none; border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.12s, border-color 0.12s;
}
.mac2-add-task:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.mac2-add-task svg { color: var(--text-muted); }

.mac2-tasks-list { display: flex; flex-direction: column; gap: 8px; }
.mac2t-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 13.5px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.mac2t-item:hover { border-color: var(--border-strong); }
.mac2t-drag {
  color: var(--text-faint); cursor: grab;
  font-size: 11px; letter-spacing: -2px;
  flex-shrink: 0; user-select: none;
}
.mac2t-circle {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.mac2t-circle:hover { border-color: var(--accent); }
.mac2t-item.is-done .mac2t-circle {
  background: var(--accent); border-color: var(--accent);
}
.mac2t-item.is-done .mac2t-circle::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--text); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mac2t-label {
  flex: 1; min-width: 0;
  font-weight: 500; color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.mac2t-item.is-done .mac2t-label { text-decoration: line-through; color: var(--text-muted); }
.mac2t-new-input {
  flex: 1; min-width: 0;
  border: none; background: none;
  font-size: 13.5px; color: var(--text);
  outline: none; padding: 0;
}
.mac2t-del {
  background: none; border: none; cursor: pointer;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.mac2t-del:hover { color: var(--danger); background: var(--bg-soft); }

@media (max-width: 880px) {
  .app-shell { grid-template-columns: 64px 1fr; }
  .sidebar-nav span, .btn-collapse span, .nav-badge { display: none; }
  .sidebar-nav a { justify-content: center; padding: 10px; }
  .sidebar-nav a.active { margin-left: -10px; padding-left: 10px; border-radius: 0 10px 10px 0; }
  .topbar-tagline { display: none; }
  .topbar-divider { display: none; }
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
  .quick-cards { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .modal-wide-body { grid-template-columns: 1fr; }
  .modal-qual-panel { display: none; }
  .form-inner-cols { grid-template-columns: 1fr; }
  .form-bottom-row  { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/* Topbar — branding                                                       */
/* ====================================================================== */

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-logo-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* baseline dans le topbar : surcharge fine de .login-brand-baseline */
.topbar-baseline {
  font-size: 10.5px;
}

/* ====================================================================== */
/* Footer app (bandeau bas, pattern PILOT/PULSE app-footer)                */
/* ====================================================================== */

.app-footer {
  grid-area: footer;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.5rem;
  background: rgba(255, 255, 255, .7);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.app-footer a { color: var(--text-muted); text-decoration: none; padding: 0 .45rem; }
.app-footer a:hover { color: var(--brand-2); }
.app-footer-brand { display: inline-flex; align-items: center; gap: .6rem; }
.app-footer-logo { width: 22px; height: 22px; flex-shrink: 0; }
.app-footer-nav { display: flex; flex: 1; justify-content: center; gap: .5rem; }
.app-footer-version { display: inline-flex; align-items: center; gap: .4rem; }

/* ====================================================================== */
/* Sidebar — composants additionnels                                       */
/* ====================================================================== */

.sidebar-nav-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sidebar-main-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sidebar-bottom {
  flex-shrink: 0;
}

.sidebar-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 2px;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  line-height: 1.7;
  flex-shrink: 0;
}

/* Bouton collapse — tab sur la bordure droite de la sidebar */
.sidebar-footer {
  position: absolute;
  right: -18px;         /* chevauche la bordure droite */
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  margin: 0;
  z-index: 10;
}

.btn-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 48px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.10);
  transition: background 0.12s, color 0.12s;
}
.btn-collapse span { display: none; }
.btn-collapse svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn-collapse:hover {
  background: var(--border-strong);
  color: var(--text);
}
.app-shell.collapsed .btn-collapse svg { transform: rotate(180deg); }

/* ====================================================================== */
/* Dashboard — Vue Accueil                                                 */
/* ====================================================================== */

.dash-home {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px - 52px); /* viewport - topbar - content padding */
}

/* Élément décoratif radar */
.dash-home-radar {
  position: absolute;
  top: -24px;
  right: -28px;
  width: 270px;
  height: 270px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.dash-section-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}

/* ---- Accueil KPI Cards (préfixe acc- pour éviter conflit avec kpi-card tableaux) ---- */

.acc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}

.acc-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s, transform 0.18s;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
.acc-card-clickable { cursor: pointer; }
.acc-card-clickable:hover {
  box-shadow: 0 6px 24px rgba(11,23,68,0.10);
  transform: translateY(-2px);
}

/* Variante critique — fond orangé */
.acc-card-critique {
  background: var(--eleve-soft);
  border-color: rgba(249, 115, 22, 0.25);
}

/* Tête : titre (gauche) + icône-chip + chevron (droite) */
.acc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.acc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.acc-card-head-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.acc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-soft);
  color: var(--text-muted);
  border-radius: 8px;
  flex-shrink: 0;
}
.acc-card-icon.acc-icon-critique {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--eleve);
}
.acc-icon-img { display: block; }
.acc-card-chevron { color: var(--text-faint); flex-shrink: 0; }

/* Milieu : valeur (gauche) + sparkline (droite) */
.acc-card-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex: 1;
}
.acc-card-value {
  font-size: 44px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.acc-card-spark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
}

/* Pied : tendance + sous-texte optionnel */
.acc-card-foot {
  margin-top: auto;
}
.acc-card-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}
.acc-trend-up   { color: var(--accent); }
.acc-trend-down { color: var(--faible); }
.acc-trend-flat { color: var(--text-muted); }
.acc-trend-text { color: var(--text-muted); font-weight: 400; }
.acc-trend-up   .acc-trend-text,
.acc-trend-down .acc-trend-text { color: inherit; }
.acc-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ---- Footer de la page Accueil ---- */

.dash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.dash-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-footer-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dash-footer-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  gap: 1px;
}
.dash-footer-text span {
  font-size: 11px;
  color: var(--text-muted);
}

.dash-footer-copy {
  font-size: 11px;
  color: var(--text-faint);
}

/* ====================================================================== */
/* Dashboard v2 — Accueil (nouveaux composants)                            */
/* ====================================================================== */

.dv2-shell { display: flex; flex-direction: column; gap: 24px; }

/* En-tête */
.dv2-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.dv2-head-category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin: 0 0 5px;
}
.dv2-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.dv2-title em { font-style: normal; color: var(--text-muted); }

.dv2-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.dv2-period-btn:hover { border-color: var(--border-strong); color: var(--text); }

/* #98 — état actif de la bascule « Mon périmètre » */
.dv2-period-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Grille 2 colonnes */
.dv2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Panels */
.dv2-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dv2-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.dv2-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dv2-panel-link {
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}
.dv2-panel-link:hover { color: var(--text); }

/* Badge compteur */
.dv2-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  background: var(--accent);
  color: #0B1744;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 5px;
}

/* Incidents prioritaires */
.dv2-inc-list { padding: 4px 0; }
.dv2-inc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border);
}
.dv2-inc-item:last-child { border-bottom: none; }
.dv2-inc-item:hover { background: var(--bg-soft); }
.dv2-inc-body { flex: 1; min-width: 0; }
.dv2-inc-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.dv2-inc-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.7;
  display: inline-block;
  margin-top: 3px;
}

/* Meta à droite : statut + temps empilés verticalement */
.dv2-inc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  margin-left: 8px;
}
.dv2-inc-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dv2-inc-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-strong);
}
.sdot-nouveau           { background: var(--critique); }
.sdot-investigation     { background: var(--info); }
.sdot-remediation       { background: var(--eleve); }
.sdot-surveillance      { background: var(--moyen); }
.sdot-resolu            { background: var(--faible); }

.dv2-inc-status-txt { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.dv2-inc-time       { font-size: 11px; color: var(--text-faint); }

.dv2-inc-arrow { flex-shrink: 0; color: var(--border-strong); }
.dv2-inc-item:hover .dv2-inc-arrow { color: var(--text-muted); }

/* Badges partagés dv2 */
.dv2-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dv2-badge-critique { background: var(--critique-soft); color: var(--critique); }
.dv2-badge-eleve    { background: var(--eleve-soft);    color: var(--eleve); }
.dv2-badge-moyen    { background: var(--moyen-soft);    color: #92400E; }
.dv2-badge-faible   { background: var(--faible-soft);   color: #15803D; }

/* Activité en temps réel — timeline dots + heure en colonne */
.dv2-activity { padding: 4px 0 0; }
.dv2-act-item {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 0 20px;
}

/* Colonne dot + ligne */
.dv2-act-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
  padding: 14px 0 0;
}
.dv2-act-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dv2-dot-bleu  { background: var(--info); }
.dv2-dot-vert  { background: var(--faible); }
.dv2-dot-rouge { background: var(--critique); }
.dv2-dot-amber { background: var(--accent); }
.dv2-dot-gris  { background: var(--border-strong); }

.dv2-act-line {
  width: 1px;
  flex: 1;
  min-height: 8px;
  background: var(--border);
  margin-top: 4px;
}

/* Heure — colonne fixe */
.dv2-act-heure {
  flex-shrink: 0;
  width: 42px;
  padding: 11px 0;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Corps */
.dv2-act-body {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
}
.dv2-act-incident {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.7;
  white-space: nowrap;
}
.dv2-act-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.dv2-act-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section Actions en attente */
.dv2-actions-section {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header : titre | filtres centrés | lien */
.dv2-actions-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.dv2-filters-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 24px;
  flex-wrap: wrap;
}
.dv2-filter-select,
.dv2-filter-input {
  height: 30px;
  padding: 0 10px;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  outline: none;
  transition: border-color 0.15s, color 0.15s;
}
.dv2-filter-select:hover,
.dv2-filter-input:hover { border-color: var(--border-strong); color: var(--text); }
.dv2-filter-select:focus,
.dv2-filter-input:focus { border-color: var(--text-muted); color: var(--text); background: #FFF; }
/* Recherche : wrapper canonique .filter-search-wrap (loupe + 30px blanc). */
.dv2-filters-inline .filter-search-wrap { flex: 0 0 auto; width: 200px; min-width: 0; }
.dv2-filter-reset {
  height: 30px;
  padding: 0 11px;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dv2-filter-reset:hover { border-color: var(--border-strong); color: var(--text); }
/* Variante icône : bouton carré 30×30, icône centrée. */
.dv2-filter-reset-icon {
  width: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.dv2-filter-reset-icon:hover { color: var(--accent-dark); }
/* Les <select> sont remplacés par ui-select : on aligne le trigger sur la hauteur
   (30px) du champ de recherche et des boutons de cette barre. */
.dv2-filters-inline .ui-select { vertical-align: middle; }
.dv2-filters-inline .ui-select-trigger {
  height: 30px; padding: 0 28px 0 10px;
  font-size: 12px; border-radius: 7px; color: var(--text-muted);
}
.dv2-filters-inline .ui-select-chev { right: 10px; }

.dv2-table-wrap { overflow-x: auto; }
.dv2-cell-titre { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.dv2-cell-mono  {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.dv2-cell-date   { font-size: 12px; color: var(--text-muted); }
.dv2-overdue     { color: var(--critique); font-weight: 600; }
.dv2-empty       { padding: 20px; font-size: 13px; color: var(--text-faint); text-align: center; }

/* ====================================================================== */
/* Vues placeholder (tableaux, aide)                                       */
/* ====================================================================== */

.placeholder-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  text-align: center;
  color: var(--text-muted);
  gap: 12px;
}
.placeholder-view svg { color: var(--border-strong); }
.placeholder-view h2 { font-size: 18px; margin: 0; color: var(--text); }
.placeholder-view p { font-size: 13.5px; margin: 0; max-width: 360px; line-height: 1.6; }

/* -------------------------------------------------------------------- */
/* Communication vue enrichie                                            */
/* -------------------------------------------------------------------- */

.com-layout     { display: flex; flex-direction: column; gap: 16px; }
.com-stats      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.com-stat       { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.com-stat-body  { flex: 1; min-width: 0; }
.com-stat-icon  { width: 48px; height: 48px; background: rgba(246,180,0,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.com-stat-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin: 0 0 8px; }
.com-stat-value { font-size: 32px; font-weight: 700; color: var(--text); margin: 0; line-height: 1; }
.com-stat-sub   { font-size: 12px; color: var(--faible); margin: 6px 0 0; display: block; }
.com-stat-sub.neutral { color: var(--text-faint); }
.com-charts     { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 12px; }
.com-chart-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.com-chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 16px; }
.com-chart-legend { display: flex; gap: 16px; margin-top: 10px; }
.com-legend-item  { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.com-legend-box   { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.com-legend-line  { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.com-tip { position: fixed; background: rgba(11,23,68,.93); color: #fff; font-size: 12px; line-height: 1.6; padding: 6px 11px; border-radius: 7px; pointer-events: none; white-space: nowrap; z-index: 9999; opacity: 0; transition: opacity .12s; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.com-tip.visible { opacity: 1; }
.com-donut-wrap  { display: flex; align-items: center; gap: 16px; }
.com-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.com-donut-legend-item { display: flex; align-items: center; gap: 7px; }
.com-donut-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.com-donut-label { flex: 1; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-donut-pct   { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.com-canaux-list  { display: flex; flex-direction: column; gap: 12px; }
.com-canal-row    { display: flex; align-items: center; gap: 8px; }
.com-canal-icon-wrap { width: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.com-canal-label  { width: 90px; font-size: 12.5px; color: var(--text); flex-shrink: 0; }
.com-canal-bar-wrap { flex: 1; height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; }
.com-canal-bar    { height: 100%; background: var(--border-strong); border-radius: 3px; min-width: 0; transition: width .4s; }
.com-canal-bar.has-value { background: var(--info); }
.com-canal-stat   { width: 68px; font-size: 11.5px; color: var(--text-muted); text-align: right; white-space: nowrap; }
/* Onglets + filtres sur une ligne : onglets à gauche, filtres à droite. */
.com-tabsrow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.com-tabs  { display: flex; gap: 0; }
.com-tab   { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 20px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-bottom: -1px; white-space: nowrap; font-family: var(--font-ui); }
.com-tab:hover  { color: var(--text); }
.com-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.com-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; margin-bottom: 11px; }
/* Recherche : wrapper canonique .filter-search-wrap (loupe + 30px blanc) ;
   largeur fixe pour la barre d'onglets (pas de flex:1 ici). */
.com-filters .filter-search-wrap { flex: 0 0 auto; width: 180px; min-width: 0; }
.com-filter-select { height: 30px; min-width: 130px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; padding: 0 28px 0 10px; font-size: 13px; color: var(--text); cursor: pointer; font-family: var(--font-ui); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.com-filter-select:focus { outline: none; border-color: var(--info); }
/* ui-select : trigger aligné sur la hauteur compacte (30px) des champs de la barre. */
.com-filters .ui-select-trigger {
  height: 30px; padding: 0 28px 0 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); background: var(--bg-alt);
}
.com-filters .shd-dr-btn { background: var(--bg-alt); }
.com-filters .ui-select-chev { right: 10px; }
.com-filter-date-group { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-faint); }
.com-filter-date-wrap { position: relative; }
.com-filter-date-wrap svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-faint); }
.com-filter-date { height: 30px; width: 136px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; padding: 0 28px 0 10px; font-size: 13px; color: var(--text); font-family: var(--font-ui); }
.com-filter-date:focus { outline: none; border-color: var(--info); }
/* Sélecteur de période compact (bouton + popover) — composant partagé SHIELD.dateRange. */
.shd-daterange { position: relative; display: inline-flex; }
.shd-dr-btn { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg, #F8FAFC); font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; font-family: var(--font-ui); }
.shd-dr-btn:hover { border-color: var(--border-strong); color: var(--text); }
.shd-daterange.has-value .shd-dr-btn { color: var(--text); border-color: var(--info); }
.shd-dr-chev { color: var(--text-faint); margin-left: 1px; }
.shd-dr-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.shd-dr-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.shd-dr-field input { width: 150px; }
.shd-dr-clear { align-self: flex-end; background: none; border: none; color: var(--info); font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.shd-dr-clear:hover { text-decoration: underline; }
.com-filter-btn   { height: 30px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 0 12px; font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-ui); }
.com-filter-btn:hover { background: var(--bg-soft); }
.com-filter-reset { height: 30px; background: none; border: none; padding: 0 8px; font-size: 13px; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 7px; font-family: var(--font-ui); }
.com-filter-reset:hover { color: var(--text); background: var(--bg-soft); }
/* Variante icône (alignée sur l'accueil) : bouton carré 30×30 bordé. */
.com-filter-reset-icon { width: 30px; padding: 0; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); justify-content: center; }
.com-filter-reset-icon:hover { color: var(--accent-dark); background: var(--bg-alt); border-color: var(--border-strong); }
.com-table-section { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.com-table-wrap { overflow-x: auto; }
.com-table   { width: 100%; border-collapse: collapse; font-size: 13px; }
.com-table thead { background: transparent; }
.com-table th { padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.com-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); vertical-align: middle; transition: background 0.12s; }
.com-table tbody tr:last-child td { border-bottom: none; }
.com-table tbody tr:hover td { background: var(--bg-soft); }
.com-table tbody tr.is-active td,
.com-table tbody tr.is-selected td,
.com-table tbody tr.is-active:hover td,
.com-table tbody tr.is-selected:hover td { background: var(--accent-soft); }
.com-table .id-cell { font-family: var(--font-mono); font-size: 12px; color: var(--info); font-weight: 500; }
.com-col-check { width: 36px; } .com-col-id { width: 84px; } .com-col-inc { width: 112px; }
.com-col-type  { width: 152px; } .com-col-dest { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-col-canal { width: 52px; text-align: center; } .com-col-statut { width: 134px; }
.com-col-prog  { width: 142px; } .com-col-sent { width: 142px; } .com-col-act { width: 52px; text-align: center; }
.com-type-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; display: inline-block; }
.cot-alerte-critique    { background: var(--critique-soft); color: var(--critique); }
.cot-alerte-elevee      { background: var(--eleve-soft);    color: var(--eleve); }
.cot-notification       { background: var(--info-soft);     color: var(--info); }
.cot-information        { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
.cot-point-de-situation { background: #EDE9FE; color: #5B21B6; }
.cot-autre              { background: var(--bg-soft); color: var(--text-faint); border: 1px solid var(--border); }
.com-statut     { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.com-statut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); }
.cos-envoye          .com-statut-dot { background: var(--faible); }
.cos-en-attente      .com-statut-dot { background: var(--eleve); }
.cos-en-preparation  .com-statut-dot { background: var(--info); }
.cos-brouillon       .com-statut-dot { background: var(--text-faint); }
.cos-planifie        .com-statut-dot { background: #8B5CF6; }
.com-row-actions { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.com-row-actions:hover { background: var(--bg-soft); color: var(--text); }
@media (max-width: 1100px) { .com-charts { grid-template-columns: 1fr 1fr; } }
@media (max-width:  900px) { .com-stats { grid-template-columns: repeat(2, 1fr); } .com-charts { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Incident detail modal                                                 */
/* -------------------------------------------------------------------- */

.incident-modal {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1300px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28);
}

/* Header */
.imh {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.imh-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.imh-icon.icon-critique { background: var(--critique-soft); color: var(--critique); }
.imh-icon.icon-eleve    { background: var(--eleve-soft);    color: var(--eleve); }
.imh-icon.icon-moyen    { background: var(--moyen-soft);    color: var(--moyen); }
.imh-icon.icon-faible   { background: var(--faible-soft);   color: var(--faible); }
.imh-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.imh-id-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imh-title  { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
/* Equalise height of both pills in header */
.imh-id-row .badge { padding: 3px 11px; font-size: 11.5px; }
.imh-meta   { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
.imh-meta-dot { color: var(--border-strong); }
.imh-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px; }
.imh-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); padding: 7px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s; flex-shrink: 0;
}
.imh-close:hover { background: var(--bg-soft); color: var(--text); }

/* Body */
.imb { display: flex; flex: 1; overflow: hidden; }

/* Sidenav */
.imsn {
  width: 180px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 10px 0;
  scrollbar-width: none;
}
.imsn::-webkit-scrollbar { display: none; }
.imsn-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  border: none; background: none; text-align: left; width: 100%;
  transition: background 0.1s, color 0.1s;
  border-left: 3px solid transparent;
}
.imsn-item:hover  { background: var(--bg-soft); color: var(--text); }
.imsn-item.is-active {
  color: var(--accent-dark); background: var(--accent-soft);
  font-weight: 600; border-left-color: var(--accent);
}
.imsn-item svg { flex-shrink: 0; opacity: 0.7; }
.imsn-item.is-active svg { opacity: 1; }
.imsn-count {
  background: var(--bg-soft); color: var(--text-faint);
  font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; margin-left: auto;
}
.imsn-item.is-active .imsn-count { background: rgba(79,70,229,0.12); color: var(--accent-dark); }

/* Main content */
.immc {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}

/* Right panel */
.imp {
  width: 340px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: none;
}
.imp::-webkit-scrollbar { display: none; }
.imp-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.imp-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 14px; }

/* KPI row – 3 cards */
.im-kpi-row {
  display: flex; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
}
.im-kpi-card { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.im-kpi-sep  { width: 1px; background: var(--border); flex-shrink: 0; margin: 10px 0; }
.im-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.im-kpi-status { display: flex; align-items: center; gap: 7px; }
.im-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.im-dot-blue  { background: #3B82F6; }
.im-dot-red   { background: var(--critique); }
.im-dot-green { background: var(--faible); }
.im-dot-gray  { background: var(--border-strong); }
.im-kpi-val   { font-size: 15px; font-weight: 700; line-height: 1.2; }
.im-kpi-sub   { font-size: 11px; color: var(--text-faint); }

/* Section header with link */
.im-section-hd {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.im-section-hd .detail-section-title { margin: 0; }
.im-voir-link {
  background: none; border: none; color: var(--info);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
}

/* Actions + comms 2-col */
.im-ac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.im-ac-row > * { min-width: 0; }

/* Compact list items */
.imac-list  { display: flex; flex-direction: column; }
.imac-item  {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.imac-item:last-child { border-bottom: none; }
.imac-av {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.imac-body  { flex: 1; min-width: 0; }
.imac-title { font-size: 12.5px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imac-meta  { font-size: 11px; color: var(--text-faint); }
.imac-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.imac-time  { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Comms icon */
.imcomm-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); flex-shrink: 0;
}

/* Intervenants */
.intervenants-list { display: flex; flex-direction: column; gap: 14px; }
.intervenant-item  { display: flex; align-items: center; gap: 11px; }
.interv-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.interv-info { flex: 1; min-width: 0; }
.interv-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.interv-sub  { display: flex; align-items: center; gap: 7px; margin-top: 2px; flex-wrap: wrap; }
.interv-role { font-size: 12px; color: var(--text-faint); }
.interv-badge-resp {
  font-size: 10.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-dark);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}

/* Impact 2×2 grid */
.impact-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.impact-card  {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 10px 11px; border-radius: 12px; border: 1px solid transparent;
}
.impact-icon  {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.impact-body  { flex: 1; min-width: 0; }
.impact-title  { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
.impact-status { font-size: 11px; font-weight: 600; margin-top: 2px; }
/* rouge */
.impact-card-rouge { background: var(--critique-soft); border-color: #FECACA; }
.impact-card-rouge .impact-icon { background: rgba(239,68,68,.15); color: var(--critique); }
.impact-status-rouge  { color: var(--critique); }
/* orange */
.impact-card-orange { background: var(--eleve-soft); border-color: #FED7AA; }
.impact-card-orange .impact-icon { background: rgba(245,158,11,.15); color: #D97706; }
.impact-status-orange { color: #D97706; }
/* vert */
.impact-card-vert { background: var(--faible-soft); border-color: #BBF7D0; }
.impact-card-vert .impact-icon { background: rgba(34,197,94,.15); color: var(--faible); }
.impact-status-vert   { color: var(--faible); }

/* Périmètre impacté 2×2 grid (conservé pour compatibilité) */
.perim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perimetre-stat {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.perimetre-stat-hd    { display: flex; align-items: center; gap: 5px; color: var(--text-faint); }
.perimetre-stat-count { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.perimetre-stat-label { font-size: 12px; color: var(--text-faint); }
@media (max-width:  600px) { .com-stats { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Évaluations — jauge circulaire de score                              */
/* -------------------------------------------------------------------- */
/* Repli responsive des colonnes secondaires (tableau en layout auto : masquer
   une colonne réduit naturellement la largeur). Ascenseur en ultime recours. */
#ev-table-wrap { overflow-x: auto; }
#ev-table-wrap.ev-hide-date    .ev-col-date    { display: none; }
#ev-table-wrap.ev-hide-proba   .ev-col-proba   { display: none; }
#ev-table-wrap.ev-hide-gravite .ev-col-gravite { display: none; }
#ev-table-wrap.ev-hide-score   .ev-col-score   { display: none; }

.ev-score-ring {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.ev-score-ring svg { display: block; transform: rotate(-90deg); }
.ev-score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.ev-score-ring-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ev-score-ring-sub {
  font-size: 8.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- */
/* Évaluations — badges statut                                          */
/* -------------------------------------------------------------------- */

.badge-ev-attente { background: var(--bg-soft);     color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-ev-cours   { background: var(--info-soft);   color: var(--info);       font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-ev-validee { background: var(--faible-soft); color: #166534;           font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

/* -------------------------------------------------------------------- */
/* Évaluations — sidebar Top 5                                          */
/* -------------------------------------------------------------------- */

.ev-top5-list { display: flex; flex-direction: column; }
.ev-top5-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.ev-top5-item:last-child { border-bottom: none; }
.ev-top5-rank {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 16px;
  text-align: right;
  margin-top: 3px;
  flex-shrink: 0;
}
.ev-top5-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-top5-info { flex: 1; min-width: 0; }
.ev-top5-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; gap: 4px; }
.ev-top5-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ev-top5-score-num { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ev-top5-count { font-size: 11px; color: var(--text-faint); margin-bottom: 7px; }
.ev-top5-bar-wrap { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ev-top5-bar-fill { height: 100%; background: var(--info); border-radius: 999px; transition: width 0.3s; }

/* -------------------------------------------------------------------- */
/* Évaluations — score slider dans la modale                            */
/* -------------------------------------------------------------------- */

.ev-score-slider-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ev-score-slider-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--info);
  height: 4px;
  cursor: pointer;
}
.ev-score-slider-display {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}

/* -------------------------------------------------------------------- */
/* Évaluations — onglet évaluation dans la modale incident              */
/* -------------------------------------------------------------------- */

.ev-inc-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ev-inc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-inc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-inc-card-reco { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* -------------------------------------------------------------------- */
/* Évaluations — table                                                  */
/* -------------------------------------------------------------------- */

.ev-inc-col { display: flex; flex-direction: column; gap: 3px; }
.ev-inc-title { font-size: 12px; color: var(--text-muted); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-reco-cell { max-width: 260px; color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.act-page-size-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-left: 6px; }
.pagination-info { font-size: 13px; color: var(--text-muted); }

/* -------------------------------------------------------------------- */
/* Rapports & Analyses                                                  */
/* -------------------------------------------------------------------- */

.kpi-icon.icon-purple { background: #F5F3FF; color: #7C3AED; }

.kpi-trend.trend-pos  { color: #15803D; }
.kpi-trend.trend-neg  { color: var(--critique); }
.kpi-trend.trend-zero { color: var(--text-faint); }

.ana-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ana-dd-wrap { position: relative; }
.ana-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 200; min-width: 196px; overflow: hidden;
}
.ana-dropdown-opt {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: none;
  cursor: pointer; font-size: 13.5px; color: var(--text);
  transition: background 0.1s; font-family: inherit;
}
.ana-dropdown-opt:hover { background: var(--bg-soft); }
.ana-dropdown-opt.active { color: var(--accent-dark); font-weight: 600; background: var(--accent-soft); }

.ana-body {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.ana-main-left { display: flex; flex-direction: column; gap: 16px; }
.ana-main-left .kpi-row { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.ana-left  { display: flex; flex-direction: column; gap: 16px; }
.ana-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ana-bar-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ana-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.ana-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ana-reports-panel { display: flex; flex-direction: column; }
.ana-reports-sub   { font-size: 12.5px; color: var(--text-muted); margin: 0; }
/* Repli responsive de la tuile « Rapports » : quand les graphiques n'ont plus
   la place de cohabiter avec elle, le JS (_fitReportsPanel) ajoute .ana-hide-reports
   et la tuile disparaît au profit de la pleine largeur des graphiques — même
   principe content-driven que le repli de colonnes de l'écran incidents. */
.ana-body.ana-hide-reports { grid-template-columns: 1fr; }
.ana-body.ana-hide-reports .ana-reports-panel { display: none; }

.ana-tabs { display: flex; border-bottom: 1.5px solid var(--border); margin-bottom: 14px; }
.ana-tab-btn {
  background: none; border: none; border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px; padding: 8px 16px; font-size: 13.5px;
  font-weight: 500; cursor: pointer; color: var(--text-muted);
  font-family: inherit; transition: color 0.15s, border-color 0.15s;
}
.ana-tab-btn:hover { color: var(--text); }
.ana-tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }

.ana-report-list { display: flex; flex-direction: column; flex: 1; }
.ana-report-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.ana-report-item:last-child { border-bottom: none; }
.ana-report-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ana-report-body  { flex: 1; min-width: 0; }
.ana-report-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-report-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-report-ts    { font-size: 11px; color: var(--text-faint); }
.ana-report-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ana-icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  padding: 5px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; transition: color 0.15s, background 0.15s;
}
.ana-icon-btn:hover { color: var(--text); background: var(--bg-soft); }

.ana-ctx-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 200; min-width: 156px; overflow: hidden;
}
.ana-ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; padding: 9px 12px; background: none; border: none;
  cursor: pointer; font-size: 13px; color: var(--text);
  font-family: inherit; transition: background 0.1s;
}
.ana-ctx-item:hover { background: var(--bg-soft); }
.ana-ctx-item.danger { color: var(--critique); }
.ana-ctx-item svg { flex-shrink: 0; }

.ana-see-all-btn {
  display: block; width: 100%; text-align: center; background: none; border: none;
  cursor: pointer; color: var(--info); font-size: 13px; font-weight: 500;
  font-family: inherit; padding-top: 14px; margin-top: 6px;
  border-top: 1px solid var(--border); transition: color 0.15s;
}
.ana-see-all-btn:hover { color: var(--accent-dark); text-decoration: underline; }

.ana-insight {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: var(--radius); padding: 14px 18px;
  font-size: 13.5px; color: var(--text); margin-bottom: 8px;
}
.ana-insight strong { font-weight: 600; }

@media (max-width: 1280px) {
  .ana-charts-row { grid-template-columns: 1fr; }
}
/* Filet de sécurité sans JS (ResizeObserver indisponible) : sous une fenêtre
   très étroite, on masque la tuile « Rapports » plutôt que de déborder. */
@media (max-width: 960px) {
  .ana-body { grid-template-columns: 1fr; }
  .ana-body .ana-reports-panel { display: none; }
}

/* ============================================================ */
/* Escalade incident → crise                                    */
/* ============================================================ */

.esc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.esc-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); max-width: 52ch; }
.esc-empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; }
.esc-error { color: var(--critique); font-size: 13px; }

/* Zones (gauche bordée) */
.esc-zone-incident  { --esc-c: var(--faible); }
.esc-zone-challenge { --esc-c: var(--eleve); }
.esc-zone-crise     { --esc-c: var(--critique); }

/* Pills de zone */
.esc-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.esc-pill-incident  { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.esc-pill-challenge { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
.esc-pill-crise     { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* Trace */
.esc-trace { display: flex; flex-direction: column; gap: 10px; }
.esc-card { border: 1px solid var(--border); border-left: 4px solid var(--esc-c, var(--border)); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-alt); }
.esc-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esc-date { color: var(--text-faint); font-size: 11.5px; margin-left: auto; }
.esc-axes { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-muted); margin: 8px 0 4px; }
.esc-axes b { color: var(--text); }
.esc-reason { font-size: 13px; color: var(--text); margin: 4px 0; }
.esc-flags { font-size: 12px; color: var(--critique); margin: 4px 0; font-weight: 600; }
.esc-challengers, .esc-decision { font-size: 12.5px; color: var(--text-muted); margin: 4px 0; }
.esc-status { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 6px; }
.esc-status-open     { background: var(--accent-soft); color: var(--accent-dark); }
.esc-status-crise    { background: #FEF2F2; color: #B91C1C; }
.esc-status-incident { background: #F1F5F9; color: var(--text-muted); }
.esc-card-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Modales resolve / pilot (partagé) */
.esc-modal h3 .inc-badge { vertical-align: middle; }
.esc-grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.esc-axis-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.esc-axis-title:first-child { margin-top: 0; }
.esc-hint { font-weight: 400; color: var(--text-faint); font-size: 11px; }

/* ------------------------------------------------------------------ */
/* Modale « Évaluer l'escalade » – 3 colonnes (réutilise .modal-wide)  */
/* ------------------------------------------------------------------ */
.esc-eval-modal { max-width: 1320px; }
.esc-eval-modal .modal-header-icon { background: #FEF2F2; color: #B91C1C; }
.esc-eval-modal .modal-header-text h3 { display: flex; align-items: center; gap: 10px; }

.esc-eval-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.92fr;
  flex: 1;
  overflow: hidden;
}
.esc-col { padding: 26px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 26px; }
.esc-col-result, .esc-col-why { border-left: 1px solid var(--border); }
.esc-col-why { background: var(--bg-soft); }

.esc-section { display: flex; flex-direction: column; }
.esc-sec-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.esc-sec-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.esc-sec-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 3px 0 0; }
.esc-sec-num { color: var(--text-muted); }
.esc-sec-sub { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }

/* Questions */
.esc-q-list { display: flex; flex-direction: column; gap: 12px; }
.esc-q-row { display: flex; flex-direction: column; gap: 6px; }
.esc-q-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.esc-q-label > span { line-height: 1.35; }
.esc-q-ic { flex-shrink: 0; color: var(--text-muted); display: inline-flex; }
.esc-q-control { display: flex; align-items: center; gap: 10px; }
.esc-q-control .form-select { flex: 1; min-width: 0; }
.esc-dot { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--border); transition: background .15s; }
.esc-dot-ok   { background: var(--faible); }
.esc-dot-mid  { background: var(--eleve); }
.esc-dot-high { background: var(--critique); }

/* Drapeaux rouges */
.esc-flags-box { display: flex; flex-direction: column; gap: 8px; }
.esc-flag-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; color: var(--text); background: var(--bg-alt); transition: border-color .15s, background .15s;
}
.esc-flag-row:hover { border-color: var(--accent); }
.esc-flag-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.esc-flag-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.esc-flag-check svg { opacity: 0; }
.esc-flag-row input:checked + .esc-flag-check { background: var(--critique); border-color: var(--critique); }
.esc-flag-row input:checked + .esc-flag-check svg { opacity: 1; }
.esc-flag-row:has(input:checked) { border-color: #FECACA; background: #FEF2F2; }
.esc-flag-ic { flex-shrink: 0; color: var(--text-muted); display: inline-flex; }
.esc-flag-row:has(input:checked) .esc-flag-ic { color: var(--critique); }
.esc-flag-text { flex: 1; line-height: 1.35; }

/* Matrice (impact en colonnes, incertitude en lignes) */
.esc-matrix-wrap { position: relative; padding-left: 18px; padding-top: 4px; }
.esc-mx-axis { position: absolute; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.esc-mx-axis-x { top: -10px; left: 50%; transform: translateX(-50%); }
.esc-mx-axis-y { left: -6px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; white-space: nowrap; }
.esc-matrix { width: 100%; border-collapse: separate; border-spacing: 7px; table-layout: fixed; }
.esc-matrix th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; padding: 3px; text-align: center; }
.esc-mx-row { white-space: nowrap; width: 70px; text-align: right !important; padding-right: 8px !important; }
.esc-matrix td {
  height: 54px; border-radius: 9px; opacity: .5; position: relative;
  transition: opacity .15s, box-shadow .15s;
}
.esc-matrix td.esc-zone-incident  { background: var(--faible); }
.esc-matrix td.esc-zone-challenge { background: var(--eleve); }
.esc-matrix td.esc-zone-crise     { background: var(--critique); }
.esc-matrix td.is-here { opacity: 1; box-shadow: 0 0 0 2px var(--text), 0 4px 12px rgba(0,0,0,.18); }
.esc-matrix td.is-here svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; }

/* Carte Résultat */
.esc-result {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); border-left: 4px solid var(--esc-c, var(--border));
  background: var(--bg-soft);
}
.esc-result.esc-zone-crise     { background: #FEF2F2; border-color: #FECACA; }
.esc-result.esc-zone-challenge { background: #FFF7ED; border-color: #FED7AA; }
.esc-result.esc-zone-incident  { background: #ECFDF5; border-color: #A7F3D0; }
.esc-result-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--esc-c, var(--text-muted)); border: 1px solid var(--border);
}
.esc-result-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esc-result-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.esc-result-zone { font-size: 26px; font-weight: 800; line-height: 1.05; color: var(--esc-c, var(--text)); letter-spacing: -.01em; }
.esc-result-axes { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; flex-wrap: wrap; }
.esc-result-axes b { color: var(--text); }
.esc-result-axes .esc-sep { color: var(--text-faint); }
.esc-result-flags { font-size: 12px; font-weight: 600; color: var(--critique); margin: 6px 0 0; }
.esc-result-path { font-size: 12.5px; color: var(--text); margin: 8px 0 0; line-height: 1.45; }

/* Niveau de recommandation */
.esc-reco { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.esc-reco-label { font-size: 12px; color: var(--text-muted); }
.esc-reco-pill { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.esc-disclaimer { font-size: 11px; color: var(--text-faint); margin: -8px 0 0; line-height: 1.4; }

/* Pourquoi cette recommandation */
.esc-reasons { display: flex; flex-direction: column; gap: 8px; }
.esc-reason-card { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); }
.esc-reason-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.esc-reason-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.esc-reason-txt strong { font-size: 12.5px; color: var(--text); }
.esc-reason-txt span { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.esc-reason-empty { font-size: 12.5px; color: var(--text-faint); padding: 14px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; }

/* Bon à savoir */
.esc-good { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); }
.esc-good-ic { flex-shrink: 0; color: var(--accent-dark); }
.esc-good > div { display: flex; flex-direction: column; gap: 2px; }
.esc-good strong { font-size: 12.5px; color: var(--text); }
.esc-good span { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* Bouton « Activer la cellule de crise » */
.esc-eval-modal #esc-submit { display: inline-flex; align-items: center; gap: 7px; }
.esc-eval-modal #esc-submit .esc-submit-ic { display: none; }
.esc-eval-modal #esc-submit.esc-submit-crise { background: var(--critique); border-color: var(--critique); }
.esc-eval-modal #esc-submit.esc-submit-crise .esc-submit-ic { display: inline-flex; }
.esc-eval-modal .modal-wide-footer .form-error { margin: 0; font-size: 12px; }

/* Convocation de la chaîne de commandement (zone challenge) */
.esc-challengers-box {
  padding: 16px; border: 1px solid #FED7AA; border-radius: var(--radius); background: #FFF7ED;
}
.esc-chain-head { display: flex; gap: 10px; margin-bottom: 12px; }
.esc-chain-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #FFEDD5; color: #C2410C; display: flex; align-items: center; justify-content: center; }
.esc-chain-head > div { display: flex; flex-direction: column; gap: 2px; }
.esc-chain-head strong { font-size: 13px; color: var(--text); }
.esc-chain-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.esc-chain-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); margin: 10px 0 0; }
.esc-chain-note svg { flex-shrink: 0; }
.esc-challengers-box .esc-chall-row { margin-bottom: 8px; }
.esc-challengers-box .esc-chall-row select,
.esc-challengers-box .esc-chall-row input { background: #fff; }
.esc-chall-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.esc-chall-row select, .esc-chall-row input { flex: 1; min-width: 0; }
.esc-chall-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 4px; }
.esc-chall-del:hover { color: var(--critique); }

/* Dossier de résolution + débrief PILOT */
.esc-dossier { background: var(--bg-soft); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; }
.esc-kv { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.esc-kv th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 3px 8px 3px 0; vertical-align: top; white-space: nowrap; }
.esc-kv td { color: var(--text); padding: 3px 0; }
.esc-list { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text); }
.esc-list li { margin-bottom: 4px; }
.esc-muted { color: var(--text-faint); }

@media (max-width: 880px) {
  .esc-grid-2 { grid-template-columns: 1fr; }
}

/* Modale d'évaluation : 3 → 2 → 1 colonne */
@media (max-width: 1100px) {
  .esc-eval-body { grid-template-columns: 1fr 1fr; }
  .esc-col-why { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .esc-eval-body { grid-template-columns: 1fr; }
  .esc-col-result, .esc-col-why { border-left: none; border-top: 1px solid var(--border); }
}

/* ==================================================================== */
/* Journal — features J6 / J7 / J9 / J2                                 */
/* ==================================================================== */

/* --- Barre d'outils : recherche + toggle de vue (J6 / J7) ----------- */
.jnl-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.jnl-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.jnl-search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
}
.jnl-search input {
  width: 100%;
  height: 30px;
  padding: 0 36px 0 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
}
.jnl-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 180, 0, .18);
}
.jnl-search-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  padding: 4px;
  border-radius: 6px;
}
.jnl-search-clear:hover { background: var(--bg-soft); color: var(--text); }

.jnl-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.jnl-vt-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.jnl-vt-btn + .jnl-vt-btn { border-left: 1px solid var(--border); }
.jnl-vt-btn:hover { background: var(--bg-soft); }
.jnl-vt-btn.active { background: var(--text); color: #fff; }

/* --- Bandeau de résultats de recherche (J6) ------------------------- */
.jnl-searchinfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #1D4ED8;
}
.jnl-searchinfo-text strong { font-weight: 700; }
.jnl-searchinfo-clear {
  background: transparent;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  color: #1D4ED8;
  font-size: 12.5px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.jnl-searchinfo-clear:hover { background: #DBEAFE; }

/* highlight serveur (balise <mark>) injecté dans la description */
.jnl-col-details mark,
.jnl-desc mark {
  background: #FEF9C3;
  color: #92400E;
  border-radius: 2px;
  padding: 0 2px;
}

/* --- Pills @mention (J9) -------------------------------------------- */
.jnl-mention {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.jnl-mention:hover { background: #DBEAFE; }

/* description : trombone aligné à droite */
.jnl-col-details { position: relative; }
.jnl-clip {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
}
.jnl-clip:hover { color: #1D4ED8; }

/* mini-profil mention (modale) */
.jnl-mention-card { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.jnl-mention-uname { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin: 0; }
.jnl-mention-mail { font-size: 12.5px; color: var(--text); margin: 2px 0 0; }
.jnl-mention-inactive { font-size: 12px; color: var(--critique); margin: 2px 0 0; }
.jnl-mention-unknown { font-size: 13px; color: var(--text-muted); margin: 6px 0 12px; }

/* --- Autocomplétion @ dans le textarea (J9) ------------------------- */
.jnl-desc-wrap { position: relative; }
.jnl-mention-dd {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 23, 68, .12);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
  width: 280px;
}
.jnl-mention-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
}
.jnl-mention-opt.active,
.jnl-mention-opt:hover { background: var(--bg-soft); }
.jnl-mention-opt-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jnl-mention-opt-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.jnl-mention-opt-name { font-size: 13px; color: var(--text); font-weight: 500; }
.jnl-mention-opt-uname { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* --- Accordéons par incident (J7) ----------------------------------- */
.jnl-groups-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jnl-groups-hint { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.jnl-groups-actions { display: flex; gap: 8px; }
.jnl-groups { display: flex; flex-direction: column; gap: 10px; }
.jnl-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.jnl-group.open { border-left: 3px solid #3B82F6; }
.jnl-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #F9FAFB;
  cursor: pointer;
}
.jnl-group-head:hover { background: #F3F4F6; }
.jnl-group-chev {
  display: flex;
  color: #6B7280;
  transition: transform .15s ease;
  transform: rotate(-90deg);
}
.jnl-group.open .jnl-group-chev { transform: rotate(0deg); }
.jnl-group-title {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jnl-group-count { font-size: 14px; color: #6B7280; white-space: nowrap; }
.jnl-group-last { font-size: 12px; color: #9CA3AF; white-space: nowrap; }
.jnl-group-body { border-top: 1px solid var(--border); }
.jnl-group-table { width: 100%; }

/* --- Zone de dépôt des pièces jointes (J2) -------------------------- */
.jnl-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: #F9FAFB;
  border: 2px dashed #D1D5DB;
  border-radius: var(--radius);
  padding: 18px;
}
.jnl-drop.dragover { background: #EFF6FF; border-color: #3B82F6; }
.jnl-drop-icon { font-size: 22px; }
.jnl-drop-text { font-size: 13px; color: var(--text); }
.jnl-drop-browse {
  background: transparent;
  border: none;
  color: #1D4ED8;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}
.jnl-drop-hint { font-size: 11.5px; color: var(--text-muted); }
.jnl-drop-err {
  color: var(--critique);
  font-size: 12.5px;
  margin-top: 6px;
}
.jnl-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.jnl-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 6px 10px;
}
.jnl-file-ic { flex-shrink: 0; }
.jnl-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.jnl-file-size { color: var(--text-muted); white-space: nowrap; }
.jnl-file-rm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  padding: 3px;
  border-radius: 6px;
}
.jnl-file-rm:hover { background: #fff; color: var(--critique); }

/* --- Panneau latéral des pièces jointes (J2) ------------------------ */
.jnl-att-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  box-shadow: -8px 0 28px rgba(11, 23, 68, .14);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
.jnl-att-panel.open { transform: translateX(0); }
.jnl-att-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.jnl-att-title { font-size: 15px; font-weight: 700; color: var(--text); }
.jnl-att-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  padding: 5px;
  border-radius: 8px;
}
.jnl-att-close:hover { background: var(--bg-soft); color: var(--text); }
.jnl-att-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.jnl-att-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.jnl-att-item:last-child { border-bottom: none; }
.jnl-att-preview {
  width: 100%;
  min-height: 60px;
  background: var(--bg-soft);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jnl-att-preview img { max-height: 200px; max-width: 100%; display: block; }
.jnl-att-preview-fail { font-size: 22px; min-height: 60px; }
.jnl-att-name { font-size: 13px; color: var(--text); font-weight: 500; margin: 0 0 4px; word-break: break-word; }
.jnl-att-size { color: var(--text-muted); font-weight: 400; }
.jnl-att-sha { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin: 0 0 3px; word-break: break-all; }
.jnl-att-meta { font-size: 11.5px; color: var(--text-muted); margin: 0 0 8px; }
.jnl-att-actions { display: flex; gap: 8px; }
.jnl-att-actions .btn-sm { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* ==================================================================== */
/* Centre de notifications (J9)                                         */
/* ==================================================================== */

/* Le point cloche devient un badge compteur. */
.bell-dot.notif-badge {
  top: 2px;
  right: 2px;
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-dd {
  position: fixed;
  z-index: 1300;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 23, 68, .16);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.notif-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-dd-title { font-size: 14px; font-weight: 700; color: var(--text); }
.notif-dd-readall {
  background: transparent;
  border: none;
  color: #1D4ED8;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.notif-dd-readall:hover { text-decoration: underline; }
.notif-dd-loading,
.notif-dd-empty { padding: 24px 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
.notif-dd-list { overflow-y: auto; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-soft); }
.notif-item.unread { background: #EFF6FF; }
.notif-item.unread:hover { background: #DBEAFE; }
.notif-item-main { flex: 1; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.notif-item-body {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-time { font-size: 11.5px; color: #9CA3AF; margin: 0; }
.notif-item-go {
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #1D4ED8;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.notif-item-go:hover { background: #fff; border-color: #BFDBFE; }

/* ==================================================================== */
/* Paramètres — SLA (P3), Matrice d'escalade (P2), Groupes (P6)         */
/* ==================================================================== */

.pset-card { padding: 20px 24px; }
.pset-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: -4px 0 14px;
}

/* Tableaux génériques des sections paramètres */
.pset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pset-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pset-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  vertical-align: middle;
  transition: background 0.12s;
}
.pset-table tbody tr:last-child td { border-bottom: none; }
.pset-table tbody tr:hover td { background: var(--bg-soft); }

/* Pastille de criticité */
.pset-crit-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.pset-crit-critique { background: var(--critique); }
.pset-crit-eleve    { background: var(--eleve); }
.pset-crit-moyen    { background: var(--moyen); }
.pset-crit-faible   { background: var(--faible); }

/* Inputs numériques compacts */
.pset-num {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
}
.pset-num:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Table chaîne de commandement */
.pset-chain-table th:first-child, .pset-chain-table td:first-child { width: 38%; }
.pset-chain-table th:last-child,  .pset-chain-table td:last-child  { width: 44px; text-align: right; }
.pset-chain-table .pset-chain-role {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-alt); font-family: inherit; font-size: 13px; color: var(--text);
}
.pset-chain-table .pset-chain-role:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pset-chain-table .pset-chain-name { width: 100%; }
.pset-chain-empty td { color: var(--text-muted); }
.pset-chain-empty:hover td { background: transparent !important; }
#pset-chain-add { margin-top: 12px; }

/* Barre d'actions des sections */
.pset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Avertissement non bloquant */
.pset-warn {
  margin-top: 12px;
  background: var(--moyen-soft, #FEF3C7);
  color: #92400E;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}
.pset-warn-inline {
  font-size: 12px;
  color: var(--eleve);
  font-style: italic;
}

/* Tags destinataires / membres */
.pset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pset-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 6px 3px 10px;
  font-size: 12.5px;
  color: var(--text);
}
.pset-tag-ext {
  background: var(--accent-soft, #FEF7E0);
  border-color: #F1D58A;
}
.pset-tag-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.pset-tag-x:hover { color: var(--critique); }
.pset-tag-add {
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.pset-tag-add:hover { border-color: var(--accent); color: var(--text); }

.pset-escal-canal {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-alt);
  color: var(--text);
}

/* Sélecteur d'utilisateurs en liste (matrice d'escalade) */
.pset-pick-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 4px;
}
.pset-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.pset-pick-row:hover { background: var(--bg-soft); }
.pset-pick-dis { opacity: 0.55; cursor: default; }
.pset-pick-email { color: var(--text-muted); font-size: 12px; }

/* Groupes — tableau */
.pset-groups-table td { vertical-align: middle; }
.pset-group-name { font-weight: 500; }
.pset-group-desc {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}
.pset-group-count,
.pset-group-modif { color: var(--text-muted); white-space: nowrap; }
.pset-group-actions { text-align: right; white-space: nowrap; }
.pset-iconbtn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  margin-left: 4px;
}
.pset-iconbtn:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.pset-group-del:hover { color: var(--critique); border-color: #FCA5A5; }

/* Modale groupe — zones d'ajout membre */
.pset-member-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.pset-member-add .form-input { flex: 1; }

/* ================================================================== */
/* Communication — Envoi (C10) + Groupes destinataires (C3)           */
/* ================================================================== */

/* --- Statut d'envoi dans la colonne du tableau --- */
.cos-envoi-partiel  .com-statut-dot { background: var(--eleve); }
.cos-echec-denvoi   .com-statut-dot { background: var(--critique); }

/* --- Actions de ligne (Envoyer + menu) --- */
.csend-row-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.csend-row-btn {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  padding: 4px 7px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.csend-row-btn:hover { background: var(--accent-soft); color: var(--accent-dark); }
.csend-row-btn:disabled { opacity: .5; cursor: default; }
.csend-loading { opacity: .6; cursor: progress; }

/* --- Bloc statut/échecs dans la modale --- */
.csend-send-block {
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.csend-status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.csend-status-badge {
  font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.csend-status-ok      { background: var(--faible-soft);   color: #15803D; border-color: #BBF7D0; }
.csend-status-partial { background: var(--eleve-soft);    color: #C2410C; border-color: #FED7AA; }
.csend-status-fail    { background: var(--critique-soft); color: #B91C1C; border-color: #FECACA; }
.csend-status-counts  { font-size: 12.5px; color: var(--text-muted); }
.csend-status-date    { font-size: 12px; color: var(--text-faint); margin-left: auto; }
.csend-fail-list {
  list-style: none; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: var(--critique-soft); border: 1px solid #FECACA;
  font-size: 12.5px; color: #991B1B; display: flex; flex-direction: column; gap: 3px;
}
.csend-retry { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.csend-modal-send { display: inline-flex; align-items: center; gap: 6px; }

/* --- Autocomplétion @groupe --- */
.csend-ac-wrap { position: relative; }
.csend-ac-dd {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(11,23,68,.14); overflow: hidden; max-height: 240px; overflow-y: auto;
}
.csend-ac-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft, #F1F5F9);
}
.csend-ac-opt:last-child { border-bottom: none; }
.csend-ac-opt.active, .csend-ac-opt:hover { background: var(--accent-soft); }
.csend-ac-slug { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.csend-ac-name { font-size: 13px; color: var(--text); flex: 1; }
.csend-ac-count { font-size: 11.5px; color: var(--text-muted); }
.csend-ac-count-empty { color: var(--critique); }

/* --- Récap groupes utilisés + hint --- */
.csend-grp-hint { margin: 5px 0 0; font-size: 11.5px; color: var(--text-faint); }
.csend-grp-hint strong { font-family: var(--font-mono); color: var(--accent-dark); }
.csend-grp-recap { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.csend-grp-recap-label { font-size: 11.5px; color: var(--text-muted); }
.csend-grp-chip {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
  background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE;
}
.csend-grp-chip-empty   { background: var(--eleve-soft);    color: #C2410C; border-color: #FED7AA; }
.csend-grp-chip-unknown { background: var(--critique-soft); color: #B91C1C; border-color: #FECACA; }

/* ================================================================== */
/* A1 — SLA countdown par incident (#106)                              */
/* ================================================================== */

.sla-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.sla-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #E5E7EB;
  overflow: hidden;
}

.sla-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.3s ease;
}

.sla-fill.sla-breached {
  animation: sla-pulse 1.5s infinite;
}

@keyframes sla-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.sla-text {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.sla-text-bold { font-weight: 700; }

.sla-msg {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ================================================================== */
/* A10 — alertes dans le centre de notifications (#112)                */
/* ================================================================== */

.notif-item.notif-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.notif-alert-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.4;
}

.notif-item.notif-alert .notif-item-title { font-weight: 600; }

.notif-item.notif-alert-critical {
  background: #FEF2F2;
}
.notif-item.notif-alert-critical .notif-item-title { color: #991B1B; }

.notif-item.notif-alert-warning {
  background: #FFFBEB;
}
.notif-item.notif-alert-warning .notif-item-title { color: #92400E; }

/* ============================================================ */
/* Harmonisation des contrôles de formulaire — pattern PILOT    */
/* (radius 10px, fond blanc, ring de focus 3px) avec l'accent   */
/* jaune SHIELD. Scopé à #app-view pour ne pas toucher la mire  */
/* de connexion (#auth-view) au pixel près.                     */
/* ============================================================ */
#app-view input[type="text"],
#app-view input[type="search"],
#app-view input[type="email"],
#app-view input[type="number"],
#app-view input[type="tel"],
#app-view input[type="password"],
#app-view input[type="date"],
#app-view input[type="datetime-local"],
#app-view textarea,
#app-view select,
#app-view .form-input {
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg-alt, #fff);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* Recherches des barres de filtres : la règle générique #app-view ci-dessus
   (1,1,1) écrasait leur style compact (radius 7px / 30px) et, pour les barres à
   wrapper (incidents/actions/évaluations), réinjectait une bordure DANS le
   wrapper (encadré dans l'encadré). On rétablit le style compact avec une
   spécificité supérieure. */
#app-view .filter-search-wrap input[type="search"] {
  border: none; background: none; padding: 0; height: auto; border-radius: 0; box-shadow: none;
}
/* Sous-recherches (ID incident / auteur) + dates du journal : la règle générique
   #app-view input[type="search"] les ramenait à 10px/36px ; on rétablit le compact
   30px/7px. La recherche principale est dans .filter-search-wrap (loupe) et est
   neutralisée par la règle .filter-search-wrap ci-dessus — on ne la cible donc pas ici. */
#app-view #jnl-filter-incident,
#app-view #jnl-filter-author,
#app-view .jnl-filters input[type="date"] { height: 30px; border-radius: 7px; padding: 0 10px; }
#app-view .com-filter-date[type="date"] { height: 30px; border-radius: 7px; padding: 0 28px 0 10px; }

#app-view input[type="text"]:focus,
#app-view input[type="search"]:focus,
#app-view input[type="email"]:focus,
#app-view input[type="number"]:focus,
#app-view input[type="tel"]:focus,
#app-view input[type="password"]:focus,
#app-view input[type="date"]:focus,
#app-view input[type="datetime-local"]:focus,
#app-view textarea:focus,
#app-view select:focus,
#app-view .form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(246, 180, 0, .12);
  background-color: #fff;
}

#app-view input::placeholder,
#app-view textarea::placeholder { color: var(--text-faint, #94A3B8); }

/* Listes déroulantes natives : flèche custom (chevron) à la PILOT. */
#app-view select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}
#app-view select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B98700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
#app-view select::-ms-expand { display: none; }

/* Harmonisation des contrôles aussi dans les modales (hors #app-view). */
.modal input[type="text"],
.modal input[type="search"],
.modal input[type="email"],
.modal input[type="number"],
.modal input[type="tel"],
.modal input[type="password"],
.modal input[type="date"],
.modal input[type="datetime-local"],
.modal textarea,
.modal .form-input {
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.modal input:focus,
.modal textarea:focus,
.modal .form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(246, 180, 0, .12);
}

/* ============================================================ */
/* Composant ui-select — dropdown custom (pattern PILOT, accent  */
/* jaune SHIELD). Le <select> natif d'origine est conservé caché */
/* (synchronisé par public/js/ui-select.js).                     */
/* ============================================================ */
.ui-select { position: relative; display: inline-flex; vertical-align: middle; }
.ui-select > select { display: none; }

.ui-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 34px 9px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.ui-select-trigger:hover { background: var(--bg-soft, #F1F5F9); border-color: var(--text-faint, #94A3B8); }
.ui-select-trigger[aria-expanded="true"] {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(246, 180, 0, .12);
}
.ui-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.ui-select-val { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ui-select-val.is-placeholder { color: var(--text-faint, #94A3B8); }

.ui-select-chev {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint, #94A3B8);
  pointer-events: none;
  transition: transform .15s, color .15s;
}
.ui-select-trigger[aria-expanded="true"] .ui-select-chev {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent-dark, #B98700);
}

.ui-select-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 1200;
  min-width: 100%;
  list-style: none;
  margin: 0; padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(11, 23, 68, .12), 0 2px 6px rgba(11, 23, 68, .05);
  display: flex; flex-direction: column; gap: 1px;
  max-height: 320px; overflow-y: auto;
}
.ui-select-menu[hidden] { display: none; }
.ui-select--up .ui-select-menu { top: auto; bottom: calc(100% + 6px); }

.ui-select-menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 8px;
  font-size: 13px; color: var(--text);
  cursor: pointer; white-space: nowrap;
  outline: none;
  transition: background .1s, color .1s;
}
.ui-select-menu li:hover,
.ui-select-menu li:focus-visible { background: var(--bg-soft, #F1F5F9); }
.ui-select-menu li[aria-selected="true"] {
  background: var(--accent-soft, #FFF6DC);
  color: var(--accent-dark, #B98700);
  font-weight: 600;
}
.ui-select-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--accent-dark, #B98700);
  opacity: 0;
}
.ui-select-menu li[aria-selected="true"] .ui-select-check { opacity: 1; }
.ui-select-text { flex: 1; }
/* Multi-sélection : la pastille devient une vraie case à cocher (#filtres incidents). */
.ui-select-menu--multi .ui-select-check {
  opacity: 1; border: 1.5px solid var(--border-strong, #CBD5E1); border-radius: 5px; color: transparent;
}
.ui-select-menu--multi li[aria-selected="true"] {
  background: transparent; color: var(--text); font-weight: 500;
}
.ui-select-menu--multi li[aria-selected="true"] .ui-select-check {
  color: #fff; background: var(--accent-dark, #B98700); border-color: var(--accent-dark, #B98700);
}
.ui-select-menu--multi li:hover { background: var(--bg-soft, #F1F5F9); }

/* ============================================================ */
/* Carte blanche englobant une liste (toolbar + tableau +       */
/* pagination), façon PILOT. Le tableau interne est à plat      */
/* (pas de bordure-dans-bordure).                               */
/* ============================================================ */
.list-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.list-card .table-wrap,
.list-card .jnl-table-wrap,
.list-card .com-table-wrap,
.list-card .com-table-section {
  border: none !important;
  border-radius: 0 !important; /* bat le style inline border-radius du journal */
  overflow-x: auto;
  box-shadow: none;
}
.list-card .pagination-bar { padding: 2px 0 0; }
/* Le journal/com peignent leur contenu dans un conteneur : pas de marge en trop. */
.list-card #jnl-content,
.list-card #com-table-area { min-width: 0; }
.list-card .jnl-toolbar,
.list-card .jnl-filters { margin: 0; }


/* ─── IAM « Accès & Sécurité » — porté de PULSE/PILOT (calque .iam-*/.cfg-card/.cfg-subtab). */
.iam-table td.is-text-wrap{
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 220px;
  max-width: 420px;
}

.cfg-subtabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}

.cfg-subtab{appearance:none;background:none;border:none;padding:.55rem .15rem;margin-bottom:-1px;font-size:13.5px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}

.cfg-subtab:hover{color:var(--text)}

.cfg-subtab.active{color:var(--brand-2);border-bottom-color:var(--brand)}

.cfg-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:1.5rem 1.75rem;box-shadow:0 1px 2px rgba(15,23,42,.03);
}

.cfg-card--accent{border-color:#bbf7d0;box-shadow:0 0 0 1px rgba(34,197,94,.15)}

.cfg-card-narrow{max-width:560px}

.cfg-card-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem}

.cfg-card-head--space{justify-content:space-between;align-items:flex-start;gap:1rem}

.cfg-card-head-left{display:flex;align-items:center;gap:.9rem;min-width:0}

.cfg-card-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0}

.cfg-card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:#dcfce7;color:var(--brand-2);flex-shrink:0;
}

.cfg-card-icon--soft{background:#dcfce7;color:#15803d}

.cfg-card-icon--violet{background:#ede9fe;color:#7c3aed}

.cfg-card-icon--blue-soft{background:#dbeafe;color:#2563eb}

.cfg-card-icon svg{width:20px;height:20px}

.cfg-card-title{font-size:16.5px;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.005em}

.cfg-card-sub{font-size:12px;color:var(--text2);margin-top:3px}

.cfg-page > .cfg-card + .cfg-card{margin-top:1.25rem}

.iam-gate{display:flex;justify-content:center;padding:2rem 0}

.iam-pane[hidden],
.iam-panel[hidden],
.iam-gate[hidden]{display:none}

.iam-gate-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem;width:420px;max-width:100%;box-shadow:var(--shadow-sm)}

.iam-gate-card--wide{width:560px}

.iam-gate-h{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.2rem}

.iam-gate-card label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin:.9rem 0 .3rem}

.iam-gate-card input[type=email],
.iam-gate-card input[type=text],
.iam-gate-card input[type=password]{
  width:100%;border:1px solid var(--border2);border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;background:var(--bg2)}

.iam-gate-card .cfg-key-current input{border:none;padding:.55rem .7rem}

.iam-gate-btn{width:100%;justify-content:center;margin-top:1.1rem}

.iam-gate-sub{font-size:12.5px;color:var(--text2);margin:.2rem 0 1rem}

.iam-gate-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}

.iam-pane[hidden]{display:none}

.iam-grid{display:flex;gap:1.25rem;align-items:flex-start}

.iam-grid>.cfg-card{flex:1;min-width:0}

.iam-filters{display:flex;gap:.6rem;margin:.4rem 0 1rem;flex-wrap:wrap;align-items:center}

.iam-filters input,
.iam-filters select{width:auto;border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:.5rem .7rem;font:inherit;font-size:13px;background:var(--bg2)}

.iam-filters input{flex:1 1 220px;min-width:200px}

.iam-filters select{flex:0 0 auto}

.iam-table-wrap{overflow-x:auto}

.iam-table{width:100%;border-collapse:collapse}

.iam-table th{
  text-align:left; padding:10px 12px;
  font-size:11.5px; font-weight:600; color:var(--text3);
  border-bottom:1px solid var(--border); white-space:nowrap;
}

.iam-table td{
  padding:12px;
  border-bottom:1px solid var(--border);
  font-size:13.5px; color:var(--text); vertical-align:middle;
  white-space:nowrap;
}

.iam-table td small{display:block;color:var(--text3);font-size:11.5px;margin-top:.15rem;white-space:normal}

.iam-table tbody tr:last-child td{border-bottom:none}

.iam-table tbody tr:hover td{background:var(--bg)}

.iam-table tbody tr.is-active td{background:var(--brand-soft)}

.iam-table tbody tr.is-active:hover td{background:var(--brand-soft)}

tr.iam-row{cursor:pointer}

.iam-empty{text-align:center;color:var(--text2);padding:1.5rem 0}

.iam-count{color:var(--text2);font-size:11.5px;margin-top:.9rem}

.iam-u{display:flex;gap:.6rem;align-items:center}

.iam-av{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand-2);
  display:grid;place-items:center;font-weight:700;font-size:11px;flex-shrink:0}

.iam-av.off{background:var(--bg3);color:var(--text2)}

.iam-st{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:.4rem;background:var(--brand);vertical-align:middle}

.iam-st.off{background:var(--text3)}

.iam-st.red{background:#dc2626}

.iam-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--brand);flex-shrink:0}

.iam-dot.warn{background:#d97706}

.iam-dot.red{background:#dc2626}

.iam-bdg{display:inline-block;padding:.14rem .5rem;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em}

.iam-bdg--sys{background:#ede9fe;color:#7c3aed}

.iam-bdg--adm{background:#dbeafe;color:#2563eb}

.iam-bdg--ok{background:var(--brand-soft);color:var(--brand-2)}

.iam-bdg--off{background:var(--bg3);color:var(--text2)}

.iam-bdg--warn{background:#fef3c7;color:#92400e}

.iam-kebab{border:none;background:none;cursor:pointer;color:var(--text2);font-size:17px;padding:.1rem .45rem;border-radius:6px;line-height:1}

.iam-kebab:hover{background:var(--bg3)}

.iam-grid--split .iam-panel{display:block}

.iam-panel{width:360px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.3rem}

.iam-panel[hidden]{display:none}

.iam-panel-h{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem}

.iam-panel-h .iam-av{width:40px;height:40px;font-size:13px}

.iam-panel-h small{color:var(--text2)}

.iam-panel-h .iam-x{margin-left:auto;border:none;background:none;font-size:17px;color:var(--text2);cursor:pointer}

.iam-kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--bg3);font-size:12.5px}

.iam-kv>span:first-child{color:var(--text2);flex-shrink:0}

.iam-kv select{border:1px solid var(--border2);border-radius:6px;padding:.25rem .4rem;font:inherit;font-size:12px}

/* ── Stratégies de sécurité (tableau éditable) ───────────────────────────── */
.iam-strat-table{display:flex;flex-direction:column}

.iam-strat-head,
.iam-strat-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 220px;align-items:center;gap:1rem}

.iam-strat-head{padding:0 0 .55rem;border-bottom:1px solid var(--border)}

.iam-strat-head span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}

.iam-strat-row{padding:.85rem 0;border-bottom:1px solid var(--bg3)}

.iam-strat-row:last-child{border-bottom:none}

.iam-strat-param{display:flex;align-items:center;gap:.8rem;min-width:0}

.iam-strat-ico{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--bg3);color:var(--brand)}

.iam-strat-ico svg{width:19px;height:19px}

.iam-strat-meta{display:flex;flex-direction:column;min-width:0}

.iam-strat-meta strong{font-size:13px;font-weight:700;color:var(--text)}

.iam-strat-meta small{font-size:11.5px;color:var(--text2);margin-top:.1rem}

.iam-strat-range{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums}

.iam-strat-val{display:flex;align-items:center;gap:.5rem}

.iam-strat-inp{width:96px;padding:.5rem .65rem;border:1px solid var(--border2);border-radius:var(--radius-sm);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;background:var(--bg2);color:var(--text)}

.iam-strat-inp:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}

.iam-strat-unit{font-size:12.5px;color:var(--text2)}

.iam-strat-ro{font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}

.iam-strat-info{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;padding:.85rem 1rem;
  background:var(--brand-soft);border:1px solid #DBEAFE;border-radius:var(--radius)}

.iam-strat-info svg{width:18px;height:18px;color:var(--brand-2);flex-shrink:0;margin-top:.1rem}

.iam-strat-info strong{display:block;font-size:12.5px;color:var(--text);margin-bottom:.15rem}

.iam-strat-info p{margin:0;font-size:12px;color:var(--text2)}

.iam-strat-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.2rem}

.iam-strat-actions .btn-primary svg{width:15px;height:15px;margin-right:.1rem}

@media (max-width:720px){
  .iam-strat-head{display:none}
  .iam-strat-row{grid-template-columns:1fr;gap:.45rem}
  .iam-strat-range::before{content:"Plage : "}
}

/* Paramètres → Sécurité : la console IAM adopte le design master-detail
   « appset » (cf. <template id="iam-console-tpl"> + .iam-appset), comme
   l'onglet Application. Le cadre .appset remplace l'ancien wrapper .card ;
   les sous-cartes .cfg-card ressortent en blanc sur le fond teinté du body. */
.iam-appset{min-height:620px}

/* Empilement vertical de cartes dans un même onglet Paramètres (ex. Général :
   Profil + Système). */
.pset-stack{display:flex;flex-direction:column;gap:16px}

/* ── Cartes Profil / Système (onglet Général) : chips d'icônes + grille ──── */
.pset-info-card{position:relative;overflow:hidden}

.pset-info-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.5rem}

.pset-info-head h3{margin:0;font-size:17px;font-weight:700;color:var(--text)}

.pset-info-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}

.pset-item-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}

.pset-info-ico svg,.pset-item-ico svg{width:19px;height:19px}

/* Teintes de chips */
.pset-ico--gold{background:var(--accent-soft);color:var(--accent-dark)}
.pset-ico--blue{background:#DBEAFE;color:#2563EB}
.pset-ico--indigo{background:#E0E7FF;color:#4F46E5}
.pset-ico--purple{background:#EDE9FE;color:#7C3AED}
.pset-ico--green{background:#DCFCE7;color:#16A34A}

.pset-info-grid{display:grid;position:relative;z-index:1}

.pset-info-grid--2{grid-template-columns:1fr 1fr}

.pset-info-grid--4{grid-template-columns:repeat(4,1fr)}

.pset-info-card--profil .pset-info-grid--2{max-width:740px}

.pset-info-item{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;min-width:0}

.pset-info-grid--2 .pset-info-item:nth-child(odd){border-right:1px solid var(--border)}

.pset-info-grid--2 .pset-info-item:nth-child(-n+2){border-bottom:1px solid var(--border)}

.pset-info-grid--4 .pset-info-item:not(:last-child){border-right:1px solid var(--border)}

.pset-item-tx{display:flex;flex-direction:column;min-width:0}

.pset-item-label{font-size:12px;color:var(--text2);font-weight:600;margin-bottom:.15rem}

.pset-item-value{font-size:14px;color:var(--text);font-weight:600;overflow-wrap:anywhere}

.pset-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:999px;
  background:var(--faible-soft);color:#15803D;font-size:12.5px;font-weight:700;width:fit-content}

.pset-badge-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0}

.pset-info-deco{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%);
  width:300px;max-width:36%;opacity:.95;pointer-events:none;z-index:0}

.pset-info-deco svg{width:100%;height:auto;display:block}

@media (max-width:980px){
  .pset-info-deco{display:none}
  .pset-info-card--profil .pset-info-grid--2{max-width:none}
}

@media (max-width:680px){
  .pset-info-grid--2,.pset-info-grid--4{grid-template-columns:1fr}
  .pset-info-item{border-right:none !important}
}

/* ── Audit & Logs (onglet Paramètres) ────────────────────────────────────── */
.audit-filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}

.audit-search{flex:1;min-width:200px;height:30px;padding:0 .6rem;border:1px solid var(--border);
  border-radius:7px;font:inherit;font-size:13px;background:var(--bg-alt);color:var(--text)}

.audit-select{height:30px;padding:0 .6rem;border:1px solid var(--border);border-radius:7px;
  font:inherit;font-size:13px;background:var(--bg-alt);color:var(--text);cursor:pointer}

.audit-search:focus,.audit-select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
/* audit-search est type="search" → on rebat la règle générique #app-view (10px). */
#app-view .audit-search[type="search"]{height:30px;border-radius:7px}
/* Le <select> audit est remplacé par ui-select : on aligne le trigger (30px/7px). */
.audit-filters .ui-select-trigger{height:30px;padding:0 28px 0 10px;border-radius:7px;font-size:13px;color:var(--text)}
.audit-filters .ui-select-chev{right:10px}

.audit-count{font-size:12px;color:var(--text2);margin-bottom:.5rem;font-weight:600}

.audit-table th,.audit-table td{font-size:12.5px}

.audit-table .audit-when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-muted)}

.audit-table .audit-ip{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);white-space:nowrap}

.audit-table .audit-msg{color:var(--text);overflow-wrap:anywhere}

.audit-sev{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap}

.audit-sev--info{background:var(--info-soft);color:#1D4ED8}

.audit-sev--warn{background:var(--eleve-soft);color:#9A3412}

.audit-pager{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;margin-top:.9rem}

.audit-pager-info{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums}

/* Empty-state explicatif (ex. Groupes de destinataires) */
.pset-empty-rich{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.7rem;padding:2.4rem 1.5rem;max-width:520px;margin:0 auto}

.pset-empty-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-2)}

.pset-empty-title{font-size:15px;font-weight:700;color:var(--text)}

.pset-empty-text{margin:0;font-size:13px;line-height:1.6;color:var(--text-muted)}

.pset-empty-text strong{color:var(--text);font-family:var(--font-mono);font-size:12.5px}

.pset-empty-rich .btn-primary{margin-top:.4rem}

.iam-qa{margin-top:1.1rem}

.iam-qa h4{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}

.iam-qa .btn{width:100%;justify-content:flex-start;margin-bottom:.45rem}

.iam-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}

.iam-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.05rem 1.15rem;display:flex;align-items:center;gap:.85rem}

.iam-kpi .n{font-size:24px;font-weight:800;line-height:1.1;display:block}

.iam-kpi .l{color:var(--text2);font-size:12px;margin-top:.15rem;display:block}

.iam-kpi-tx{min-width:0}

.iam-kpi-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}

.iam-kpi-ico svg{width:22px;height:22px}

.iam-kpi-ico--green{background:#dcfce7;color:#16a34a}

.iam-kpi-ico--blue{background:#dbeafe;color:#2563eb}

.iam-kpi-ico--orange{background:#ffedd5;color:#ea580c}

.iam-kpi-ico--purple{background:#ede9fe;color:#7c3aed}

.iam-overview{display:grid;grid-template-columns:1fr 322px;gap:1rem;align-items:start}

.iam-ov-side{display:flex;flex-direction:column;gap:1rem}

.iam-ov-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;flex-wrap:wrap}

.iam-ov-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:#dcfce7;color:#16a34a}

.iam-ov-ico svg{width:20px;height:20px}

.iam-ov-ico--brand{background:var(--brand-soft);color:var(--brand-2)}

.iam-ov-ico--blue{background:#dbeafe;color:#2563eb}

.iam-ov-head-tx{flex:1;min-width:150px}

.iam-conf{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;
  padding:.34rem .7rem;border-radius:999px;font-size:12px;font-weight:700;flex-shrink:0}

.iam-conf svg{width:14px;height:14px}

.iam-conf--ok{background:#dcfce7;color:#15803d}

.iam-conf--warn{background:#ffedd5;color:#c2410c}

.iam-conf--bad{background:#fee2e2;color:#b91c1c}

.iam-state-list{display:flex;flex-direction:column}

.iam-srow{display:flex;align-items:center;gap:.8rem;width:100%;padding:.8rem .4rem;font:inherit;
  text-align:left;background:none;border:none;border-bottom:1px solid var(--bg3);cursor:pointer;
  border-radius:8px}

.iam-srow:last-child{border-bottom:none}

.iam-srow:hover{background:var(--bg3)}

.iam-srow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.iam-srow-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.iam-srow-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}

.iam-srow-ico svg{width:19px;height:19px}

.iam-srow-tx{flex:1;min-width:0}

.iam-srow-tx b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}

.iam-srow-tx small{display:block;font-size:12px;color:var(--text2);margin-top:.12rem;line-height:1.4}

.iam-srow-val{font-size:13px;font-weight:700;white-space:nowrap}

.iam-srow-chev{display:inline-flex;color:var(--text3);flex-shrink:0}

.iam-srow-chev svg{width:16px;height:16px}

.iam-srow--ok .iam-srow-dot{background:#16a34a}

.iam-srow--ok .iam-srow-ico{background:#dcfce7;color:#16a34a}

.iam-srow--ok .iam-srow-val{color:#15803d}

.iam-srow--warn .iam-srow-dot{background:#ea580c}

.iam-srow--warn .iam-srow-ico{background:#ffedd5;color:#ea580c}

.iam-srow--warn .iam-srow-val{color:var(--text)}

.iam-srow--bad .iam-srow-dot{background:#dc2626}

.iam-srow--bad .iam-srow-ico{background:#fee2e2;color:#dc2626}

.iam-srow--bad .iam-srow-val{color:#b91c1c}

.iam-qa-list{display:flex;flex-direction:column;gap:.55rem}

.iam-qa-row{display:flex;align-items:center;gap:.7rem;width:100%;padding:.7rem .8rem;font:inherit;
  text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:12px;cursor:pointer}

.iam-qa-row:hover{background:var(--bg3);border-color:var(--border2)}

.iam-qa-row:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.iam-qa-row-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:var(--brand-soft);color:var(--brand-2)}

.iam-qa-row-ico svg{width:17px;height:17px}

.iam-qa-row-tx{flex:1;min-width:0}

.iam-qa-row-tx b{display:block;font-size:13px;font-weight:700;color:var(--text)}

.iam-qa-row-tx small{display:block;font-size:11.5px;color:var(--text2);margin-top:.05rem}

.iam-qa-row-chev{display:inline-flex;color:var(--text3);flex-shrink:0}

.iam-qa-row-chev svg{width:15px;height:15px}

.iam-info-list>div{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.58rem 0;border-bottom:1px solid var(--bg3);font-size:12.5px}

.iam-info-list>div:last-child{border-bottom:none}

.iam-info-list .k{color:var(--text2)}

.iam-link-btn{margin-top:.85rem;padding:.15rem 0;background:none;border:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-2)}

.iam-link-btn:hover{text-decoration:underline}

@media (max-width:920px){
  .iam-overview{grid-template-columns:1fr}
}

.iam-menu{position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:.35rem;display:none;z-index:1200;min-width:210px}

.iam-menu button{display:block;width:100%;text-align:left;border:none;background:none;padding:.5rem .7rem;
  border-radius:7px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--text)}

.iam-menu button:hover{background:var(--bg3)}

.iam-menu button.d{color:#dc2626}

.iam-menu button[disabled]{opacity:.45;cursor:not-allowed}

.iam-menu hr{border:none;border-top:1px solid var(--border);margin:.3rem 0}

.iam-ovl{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;
  justify-content:center;z-index:1300;padding:1rem}

.iam-ovl.on{display:flex}

.iam-modal{background:var(--bg2);border-radius:var(--radius);padding:1.5rem;width:460px;max-width:100%;
  box-shadow:var(--shadow-lg)}

.iam-modal h3{font-size:16px;font-weight:700;margin-bottom:.4rem}

.iam-modal>p{color:var(--text2);font-size:12.5px;margin-bottom:1rem}

.iam-modal label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin:.8rem 0 .3rem}

.iam-modal input[type=text],
.iam-modal input[type=email],
.iam-modal select{
  width:100%;border:1px solid var(--border2);border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit}

.iam-chk{display:flex;gap:.5rem;align-items:flex-start;font-size:12.5px;color:var(--text);font-weight:500;margin:.7rem 0}

.iam-chk input{margin-top:.15rem}

.iam-modal-f{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.4rem}

.iam-temp{background:var(--bg3);border:1px dashed var(--border2);border-radius:var(--radius-sm);
  padding:.7rem;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13.5px;
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;word-break:break-all}

.iam-modal--account{width:920px;max-width:100%;padding:0;max-height:92vh;overflow:auto}

.iam-modal--account .iam-am-head{display:flex;align-items:flex-start;gap:1rem;
  padding:1.5rem 1.75rem 1.25rem;border-bottom:1px solid var(--border)}

.iam-am-ico{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand-2);
  display:grid;place-items:center;flex-shrink:0}

.iam-am-ico svg{width:22px;height:22px}

.iam-am-head-tx{flex:1;min-width:0}

.iam-modal--account .iam-am-head-tx h3{font-size:22px;font-weight:800;color:var(--text);
  margin:0 0 .25rem;letter-spacing:-.01em}

.iam-modal--account .iam-am-head-tx p{font-size:13.5px;color:var(--text2);margin:0;line-height:1.5}

.iam-am-x{border:none;background:none;color:var(--text2);cursor:pointer;padding:.35rem;
  border-radius:8px;line-height:0;flex-shrink:0}

.iam-am-x:hover{background:var(--bg3);color:var(--text)}

.iam-am-x svg{width:20px;height:20px}

.iam-am-body{display:grid;grid-template-columns:1fr 340px}

.iam-am-main{padding:1.5rem 1.75rem}

.iam-am-side-wrap{padding:1.5rem 1.75rem;border-left:1px solid var(--border);background:#fbfdfc}

.iam-am-field{margin-bottom:1.15rem}

.iam-modal--account .iam-am-field>label{display:flex;align-items:center;gap:.35rem;
  font-size:13.5px;font-weight:700;color:var(--text);margin:0 0 .45rem;
  text-transform:none;letter-spacing:normal}

.iam-am-i{color:var(--text3);display:inline-flex}

.iam-am-i svg{width:14px;height:14px}

.iam-am-ictl{position:relative;display:flex;align-items:center}

.iam-am-ictl>svg{position:absolute;left:.85rem;width:17px;height:17px;color:var(--text3);pointer-events:none}

.iam-modal--account .iam-am-ictl input,
.iam-modal--account .iam-am-ictl select{width:100%;border:1px solid var(--border2);border-radius:10px;
  padding:.7rem .9rem .7rem 2.5rem;font:inherit;font-size:14px;background:var(--bg2);color:var(--text);appearance:none}

.iam-modal--account .iam-am-ictl input:focus,
.iam-modal--account .iam-am-ictl select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}

.iam-modal--account .iam-am-ictl input[readonly]{background:var(--bg3);color:var(--text2);cursor:not-allowed}

.iam-am-ictl .iam-am-chev{left:auto;right:.85rem}

.iam-am-sech{display:flex;align-items:center;gap:.5rem;font-size:14px;font-weight:700;
  color:var(--text);margin:1.6rem 0 .8rem}

.iam-am-sech svg{width:18px;height:18px;color:var(--brand)}

.iam-modal--account .iam-am-chk{display:flex;align-items:center;gap:.7rem;
  border:1px solid #cdeede;border-radius:12px;padding:.9rem .95rem;margin:0 0 .6rem;
  background:#f0fdf4;cursor:pointer;font-weight:500;
  text-transform:none;letter-spacing:normal}

.iam-am-chk input{position:absolute;opacity:0;width:0;height:0}

.iam-am-chk .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border2);flex-shrink:0;
  display:grid;place-items:center;transition:background .12s,border-color .12s}

.iam-am-chk .box svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .12s}

.iam-am-chk input:checked~.box{background:var(--brand);border-color:var(--brand)}

.iam-am-chk input:checked~.box svg{opacity:1}

.iam-am-chk input:focus-visible~.box{box-shadow:0 0 0 3px var(--brand-soft)}

.iam-am-chk-tx{flex:1;min-width:0}

.iam-am-chk-tx b{display:block;font-size:13px;font-weight:600;color:var(--text)}

.iam-am-chk-tx small{display:block;font-size:12px;color:var(--text2);margin-top:.1rem}

.iam-am-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.25rem}

.iam-am-card-ico{width:42px;height:42px;border-radius:50%;background:var(--brand-soft);color:var(--brand-2);
  display:grid;place-items:center;margin-bottom:1rem}

.iam-am-card-ico svg{width:20px;height:20px}

.iam-am-card h4{font-size:14px;font-weight:800;color:var(--text);margin:0 0 1rem}

.iam-am-li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.9rem}

.iam-am-li:last-child{margin-bottom:0}

.iam-am-li>svg{width:17px;height:17px;color:var(--brand-2);flex-shrink:0;margin-top:.1rem}

.iam-am-li b{display:block;font-size:13px;font-weight:700;color:var(--text)}

.iam-am-li small{display:block;font-size:12px;color:var(--text2);margin-top:.1rem}

.iam-am-note{display:flex;gap:.6rem;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;
  padding:.9rem 1rem;margin-top:1.1rem}

.iam-am-note>svg{width:17px;height:17px;color:#2563eb;flex-shrink:0;margin-top:.1rem}

.iam-am-note-tx b{display:block;font-size:13px;font-weight:700;color:#1e40af;margin-bottom:.2rem}

.iam-am-note-tx span{display:block;font-size:12.5px;color:#1d4ed8;line-height:1.5}

.iam-am-msg{font-size:12.5px;color:#dc2626;margin:.5rem 0 0;min-height:1em}

.iam-am-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:1.1rem 1.75rem;border-top:1px solid var(--border)}

.iam-am-foot .btn{padding:.6rem 1.15rem;border-radius:10px;font-size:13.5px}

.iam-am-foot .btn svg{width:16px;height:16px}

@media (max-width:820px){
  .iam-modal--account{width:100%}
  .iam-am-body{grid-template-columns:1fr}
  .iam-am-side-wrap{border-left:none;border-top:1px solid var(--border)}
}

.iam-toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:#0f172a;color:#fff;padding:.6rem 1.1rem;border-radius:999px;font-size:12.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1400}

.iam-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.iam-toast.err{background:#b91c1c}

.iam-toast.ok{background:var(--brand-2)}

@media (max-width:880px){
  .iam-grid{flex-direction:column}.iam-panel{width:100%}
  .iam-kpis{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================== */
/* Fiche d'incident (onglet « Fiche » du détail incident)             */
/* ================================================================== */

.fiche-wrap { display: flex; flex-direction: column; gap: 12px; }
.fiche-loading { color: var(--text-faint); font-size: 13px; padding: 4px 0; }
.fiche-error { color: var(--critique); font-size: 13px; padding: 4px 0; }

.fiche-intro {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0 2px;
}
.fiche-intro-txt { color: var(--text-muted); font-size: 12.5px; }

/* --- carte de section repliable --- */
.fiche-sec { padding: 0; overflow: hidden; }
.fiche-sec-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 16px 18px; font: inherit; color: inherit;
}
.fiche-sec-head:hover { background: var(--bg-soft); }
.fiche-sec-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
}
.fiche-sec-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fiche-sec-title { margin: 0; }
.fiche-sec-sub { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.fiche-sec-chev { flex-shrink: 0; color: var(--text-faint); transition: transform .18s; }
.fiche-sec.is-collapsed .fiche-sec-chev { transform: rotate(-90deg); }
.fiche-sec-body { padding: 4px 18px 18px; border-top: 1px solid var(--border); }
.fiche-sec.is-collapsed .fiche-sec-body { display: none; }

.fiche-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 720px) { .fiche-grid-2 { grid-template-columns: 1fr; } }

/* --- cases à cocher / toggles / radios --- */
.fiche-checks { display: flex; flex-direction: column; gap: 8px; }
.fiche-checks-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px;
}
.fiche-check, .fiche-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.fiche-check input, .fiche-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.fiche-empty-inline { color: var(--text-faint); font-size: 12.5px; }

.fiche-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-radio {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--text-muted);
  transition: background .12s, border-color .12s, color .12s;
}
.fiche-radio input { display: none; }
.fiche-radio.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }

/* --- sévérité (lecture seule) --- */
.fiche-sev {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-soft);
}
.fiche-sev-badge {
  align-self: flex-start; font-weight: 700; font-size: 13.5px;
  padding: 3px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--border);
}
.fiche-sev-desc { color: var(--text-muted); font-size: 12.5px; }
.fiche-sev-src { color: var(--text-faint); font-size: 12px; }
.fiche-sev-critique { border-left-color: var(--critique); }
.fiche-sev-critique .fiche-sev-badge { color: var(--critique); background: var(--critique-soft); border-color: var(--critique-soft); }
.fiche-sev-eleve { border-left-color: var(--eleve); }
.fiche-sev-eleve .fiche-sev-badge { color: var(--eleve); background: var(--eleve-soft); border-color: var(--eleve-soft); }
.fiche-sev-moyen { border-left-color: var(--moyen); }
.fiche-sev-moyen .fiche-sev-badge { color: var(--accent-dark); background: var(--moyen-soft); border-color: var(--moyen-soft); }
.fiche-sev-faible { border-left-color: var(--faible); }
.fiche-sev-faible .fiche-sev-badge { color: var(--faible); background: var(--faible-soft); border-color: var(--faible-soft); }

/* --- impacts --- */
.fiche-impacts { display: flex; flex-direction: column; gap: 8px; }
.fiche-impact-row { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 10px; align-items: center; }
.fiche-impact-note { margin: 0; }
@media (max-width: 640px) { .fiche-impact-row { grid-template-columns: 1fr; } }

/* Ligne d'impact en mode évaluation : checkbox | gravité | note. */
.fiche-eval-row { grid-template-columns: minmax(160px, 240px) 160px 1fr; }
.fiche-eval-grav { margin: 0; }
.fiche-eval-proba { max-width: 340px; }
.fiche-eval-sev { margin-top: 2px; }
@media (max-width: 640px) { .fiche-eval-row { grid-template-columns: 1fr; } }

/* --- bloc RGPD sensible (Art. 9) --- */
.fiche-rgpd-sensible {
  border: 1px solid var(--critique-soft); background: #FFF7F7;
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 14px;
}
.fiche-rgpd-sensible-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--critique); }
.fiche-rgpd-cnil {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 6px;
}
.fiche-cnil-date { margin: 12px 0 0; max-width: 240px; }
.fiche-rgpd-reminder {
  margin: 10px 0 0; font-size: 12px; color: var(--critique);
  display: flex; align-items: center; gap: 6px;
}

/* --- tableaux éditables (parties prenantes, IOC) --- */
.fiche-table { margin-bottom: 10px; }
.fiche-table th { white-space: nowrap; }
.fiche-table td { padding: 6px 8px; vertical-align: middle; }
.fiche-table input.form-input, .fiche-table select { margin: 0; min-width: 0; width: 100%; }
.fiche-row-del-cell { width: 36px; text-align: center; }
.fiche-row-del {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.fiche-row-del:hover { color: var(--critique); background: var(--critique-soft); }
.fiche-add-row { margin-bottom: 4px; }

/* --- résolution (lecture seule) --- */
.fiche-resolved {
  display: flex; flex-direction: column; gap: 3px;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
}
.fiche-resolved-ok { background: var(--faible-soft); border: 1px solid var(--faible-soft); }
.fiche-resolved-ok .fiche-resolved-label { color: var(--faible); font-weight: 700; }
.fiche-resolved-open { background: var(--bg-soft); border: 1px solid var(--border); }
.fiche-resolved-open .fiche-resolved-label { color: var(--text-muted); font-weight: 600; }
.fiche-resolved-dur { color: var(--text-muted); font-size: 12px; }

/* --- barre de sauvegarde par section --- */
.fiche-savebar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.fiche-save-status { font-size: 12.5px; color: var(--text-muted); }
.fiche-save-status.is-ok { color: var(--faible); }
.fiche-save-status.is-err { color: var(--critique); }

/* ── Conformite — onglet Parametres (epic #318) ─────────────────────── */
.conf-produit { display: flex; flex-direction: column; gap: 18px; }
.conf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.conf-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.conf-badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.conf-badge--muted { background: var(--bg-soft); color: var(--text-muted); border-color: var(--border); }
.conf-export { display: inline-flex; align-items: center; gap: 6px; }

.conf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.conf-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.conf-tile-num { font-size: 30px; font-weight: 700; line-height: 1; display: flex; flex-direction: column; gap: 6px; }
.conf-tile-label { font-size: 13px; font-weight: 600; }
.conf-tile--ok .conf-tile-num { color: #16A34A; }
.conf-tile--warn .conf-tile-num { color: #D97706; }
.conf-tile--bad .conf-tile-num { color: #DC2626; }

.conf-ring { flex: 0 0 auto; }
.conf-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.conf-ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; }
.conf-ring--ok .conf-ring-fg { stroke: #16A34A; }
.conf-ring--warn .conf-ring-fg { stroke: #D97706; }
.conf-ring--bad .conf-ring-fg { stroke: #DC2626; }
.conf-ring-tx { font-size: 16px; font-weight: 700; text-anchor: middle; fill: var(--text); }

.conf-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.conf-banner--warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.conf-banner svg { flex: 0 0 auto; margin-top: 1px; }

.conf-filters { display: flex; gap: 14px; flex-wrap: wrap; }
.conf-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 180px; }
.conf-filter select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; color: var(--text); }

.conf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.conf-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 600; }
.conf-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.conf-row { cursor: pointer; }
.conf-row:hover, .conf-row--open { background: var(--bg-soft); }
.conf-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; }
.conf-ecart { color: var(--text-muted); }
.conf-detail td { background: var(--bg-soft); font-size: 13px; line-height: 1.6; }
.conf-detail p { margin: 4px 0; }
.conf-detail code { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.conf-empty { text-align: center; color: var(--text-muted); padding: 20px; }

.conf-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.conf-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.conf-pill--ok { background: #ECFDF5; color: #16A34A; }
.conf-pill--warn { background: #FFFBEB; color: #D97706; }
.conf-pill--bad { background: #FEF2F2; color: #DC2626; }
.conf-pill--na { background: var(--bg-soft); color: var(--text-muted); }

/* ── Conformite - indicateur suivi des incidents (#320) ─────────────── */
.conf-seg-group { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.conf-seg { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: #fff; border: none; border-right: 1px solid var(--border); cursor: pointer; }
.conf-seg:last-child { border-right: none; }
.conf-seg.active { background: #0B1744; color: #fff; }
.conf-period-group { display: inline-flex; gap: 6px; }
.conf-banner--info { background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; align-items: center; }
.conf-banner--info .conf-export { margin-left: auto; flex: 0 0 auto; }
.conf-gauges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.conf-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 14px; background: #fff; text-align: center; }
.conf-gauge-title { font-size: 12px; font-weight: 600; color: var(--text-muted); min-height: 2.4em; display: flex; align-items: center; }
.conf-gauge-pct { font-size: 17px; font-weight: 700; text-anchor: middle; fill: var(--text); }
.conf-gauge-foot { display: flex; flex-direction: column; gap: 2px; }
.conf-gauge-level { font-size: 12px; font-weight: 700; }
.conf-gauge-level--ok { color: #16A34A; }
.conf-gauge-level--warn { color: #D97706; }
.conf-gauge-level--bad { color: #DC2626; }
.conf-gauge-level--na { color: var(--text-muted); }
.conf-gauge-frac { font-size: 11px; color: var(--text-muted); }
@media (max-width: 1100px) { .conf-gauges { grid-template-columns: repeat(3, 1fr); } }

/* ── RGPD - carte Mes donnees (#281) ────────────────────────────────── */
.pset-rgpd-txt { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.pset-rgpd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pset-rgpd-danger { color: #DC2626; }

/* ── Conformite - exigence + vulgarisation (#333) ───────────────────── */
.conf-exig { background: #F5F7FA; border-left: 3px solid #0B1744; padding: 8px 10px; border-radius: 6px; }
.conf-vulg { background: #FFFBEB; border-left: 3px solid #F6B400; padding: 8px 10px; border-radius: 6px; }

/* ── Conformite - dimension non applicable (EI) ─────────────────────── */
.conf-gauge--na { opacity: .65; }
.conf-gauge-na { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--text-muted); border: 2px dashed var(--border); border-radius: 50%; }

/* -- Multi-entites : selecteur de scope + ecrans admin (epic #338) -- */
.scope-selector { position: relative; display: inline-flex; }
.scope-sel-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border, #d7dce5); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--text, #0B1744); cursor: pointer; }
.scope-sel-btn:hover { background: rgba(11,23,68,.04); }
.scope-sel-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-sel-chev { opacity: .6; }
.scope-sel-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--border, #d7dce5); border-radius: 10px; box-shadow: 0 8px 28px rgba(11,23,68,.14); padding: 6px; z-index: 60; }
.scope-sel-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text, #0B1744); cursor: pointer; }
.scope-sel-item:hover { background: rgba(11,23,68,.05); }
.scope-sel-item.active { background: #EEF2FF; font-weight: 600; }
.scope-sel-role { font-size: 11px; color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 999px; padding: 1px 8px; }
.scope-sel-empty { padding: 10px; color: var(--text-muted, #6b7280); font-size: 13px; text-align: center; }
.scope-tree { display: flex; flex-direction: column; gap: 2px; }
.scope-node { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.scope-node:hover { background: rgba(11,23,68,.03); }
.scope-kind-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #475569; background: #f1f5f9; border-radius: 6px; padding: 2px 8px; }
.scope-node-name { color: var(--text, #0B1744); }
.scope-id { font-family: monospace; font-size: 11px; color: #94a3b8; }
.scope-tenant-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; font-size: 14px; }
.scope-tenant-bar select { padding: 6px 10px; border: 1px solid var(--border, #d7dce5); border-radius: 8px; font: inherit; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text, #0B1744); }
.modal-form input, .modal-form select { padding: 8px 10px; border: 1px solid var(--border, #d7dce5); border-radius: 8px; font: inherit; font-weight: 400; }

/* -- Pastille entite (scope) dans la liste incidents (#411) -- */
.inc-scope-tag { display: inline-block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 1px 9px; }