/* =====================================================
   PILOT — Plateforme de pilotage de crise temps réel
   Charte SECALYS. Structure & charte calquées fidèlement
   sur PULSE (fichier unique, comme PULSE).

   ⭐ Bloc « Charte de connexion » = premier artefact concret
   candidat à `@secalys/ui`. Toute évolution de charte
   converge ici avant d'essaimer dans les autres apps.
   ===================================================== */

:root{
  /* Charte SECALYS premium (console exécutive). Palette volontairement
     minimale : brique profonde RÉSERVÉE au critique, neutres chauds
     partout ailleurs. `--brand*` = seul knob couleur spécifique-app. */
  --brand:#9E1B1B;          /* rouge profond / brique — critique only */
  --brand-2:#B3261E;        /* rouge accent — liens, hover */
  --brand-soft:#F3EAE9;     /* brique très clair — tint discret */
  --brand-tint:rgba(158,27,27,.08);

  /* Surfaces — fond chaud cassé */
  --bg:#F7F6F4;
  --bg2:#FFFFFF;
  --bg3:#EFEDEA;
  /* Alias sémantique : fond d'une card / surface élevée. Pointé sur --bg2
     (blanc) pour rester aligné avec la charte des cards `.home-card` /
     `.ws-card` historiques. Utilisé par tous les stages workspace V2/V3/V4
     (KPI cards, table wrappers, side panels, chips, phaseTrack dots). */
  --card:var(--bg2);

  /* Encre — neutres chauds */
  --text:#111111;           /* noir doux */
  --text2:#5F6368;          /* gris chaud */
  --text3:#8A8D91;

  /* Lignes fines */
  --border:#E7E5E4;
  --border2:#DAD7D2;

  /* Forme — structuré, peu d'arrondi, pas de grosse ombre */
  --radius:12px;
  --radius-sm:8px;
  --shadow-lg:0 6px 24px rgba(17,17,17,.07);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{min-height:100%}
html{background-color:var(--bg)}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background-color:transparent;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Background photo (salle de crise) — appliqué à toute l'app (auth, console
   exécutive, workspace de crise) via body::before fixé au viewport. Voile blanc
   en gradient pour garantir la lisibilité des contenus posés au-dessus.
   Pattern repris de PULSE (candidat @secalys/ui). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.82) 45%,
      rgba(255,255,255,0.55) 100%
    ),
    url('../assets/background.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ─── Boot splash — neutre, tant que le boot n'a pas tranché ─────────────── */
#boot-splash { display: none; }
body[data-pilot-mode="boot"] #boot-splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
}
.boot-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* Le PNG du phare a une large marge transparente intégrée : on le rend
   grand pour que le glyphe lise vraiment (cf. même parti pris topbar). */
.boot-splash-inner img { width: 96px; height: 96px; object-fit: contain; opacity: .9; }
.boot-splash-spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: boot-splash-rot .7s linear infinite;
}
@keyframes boot-splash-rot { to { transform: rotate(360deg); } }
.boot-splash-nojs {
  max-width: 320px;
  text-align: center;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
  padding: 0 20px;
}

/* ─── Auth view / App view — basculés par js/app.js ──────────────────────── */
#auth-view[hidden],
#app-view[hidden] { display: none !important; }

#auth-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100vh;
  width: 100%;
  position: relative;
  isolation: isolate;
}

#app-view { flex: 1; display: flex; }
.app-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .6rem;
  padding: 2rem;
}
.app-placeholder h1 { font-size: 2rem; margin: .4rem 0 0; letter-spacing: .04em; }
.app-placeholder p { color: var(--text2); margin: 0; }
.app-placeholder-status {
  margin-top: 1rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text2);
}
.app-placeholder-status.ok { border-color: var(--brand); color: var(--brand-2); }
.app-placeholder-status.err { border-color: #fca5a5; color: #991b1b; }

/* ─── Charte de connexion (candidat @secalys/ui) ─────────────────────────── */
.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; }

.login-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(11,23,68,.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; }
/* Le PNG du phare a une large marge transparente intégrée : on rend grand
   (≈52px) pour que le glyphe visible lise vraiment dans le bandeau. Marge
   négative pour ne pas trop épaissir la topbar malgré la taille. */
.login-brand-mark img { width: 52px; height: 52px; margin: -10px 0; }
.login-brand-name { font-size: 18px; font-weight: 800; letter-spacing: .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(--text2); letter-spacing: .01em; font-weight: 500; }
.login-topbar-actions { display: flex; align-items: center; gap: 8px; }
.login-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.login-lang:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
/* Reset du switcher ORBIT dans la topbar de login (conforme PULSE). */
.login-topbar-actions .orbit-switcher { border-left: none; padding-left: 0; margin-left: 0; }

/* ── Switcher ORBIT (widget partagé — copié de PULSE) ─────────────────────
 * Markup/classes/ARIA strictement conformes à PULSE. Seul écart : la puce
 * `--pulse` est découplée de var(--brand) (sinon PULSE virerait au rouge
 * dans PILOT) → chaque app garde sa couleur d'identité, stable dans toute
 * la constellation. La ligne ACTIVE (PILOT ici) reprend, elle, le brand
 * courant via .orbit-item--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(--bg3)}
.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(--bg3)}
.orbit-btn[aria-expanded="true"] .orbit-chevron{transform:rotate(180deg)}

.orbit-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:195px;
  background:#fff;
  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(--bg3)}
.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}

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

/* Feed preview — cards illustratives empilées en arrière-plan, sortant
   "de derrière" la card login (overlap intentionnel masqué par le z-index 2
   de .login-card). Discrètes, légèrement inclinées, ne forcent pas le texte
   hero à se réduire. Décor pur (aria-hidden, pointer-events:none).
   Pattern repris de PULSE (candidat @secalys/ui). */
.login-feed-preview {
  position: absolute;
  top: 60px;
  right: 430px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  pointer-events: none;
  z-index: 0;         /* sous .login-card (z-index 2) ET sous .login-hero-content
                         (z-index 1) : effet "calque d'arrière-plan" */
}
.login-feed-preview .feed-card {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(11,23,68,.06));
  transform-origin: center;
}
/* Inclinaison + opacité décroissante – chaque card a son propre angle pour
   éviter l'alignement parfait (effet "feed live" naturel). */
.login-feed-preview .feed-card-1 { transform: rotate(-2.5deg) translateX(4px);   opacity: .78; }
.login-feed-preview .feed-card-2 { transform: rotate(1.5deg)  translateX(-6px);  opacity: .70; }
.login-feed-preview .feed-card-3 { transform: rotate(-3deg)   translateX(8px);   opacity: .62; }

.login-hero { position: relative; 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: .7; pointer-events: none; }
.login-hero-title {
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 20px;
}
.login-hero-dot { color: var(--brand); }
.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(--brand-2); font-weight: 700; }

.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); }

.login-card {
  background: #fff;
  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,.08), 0 4px 12px rgba(11,23,68,.04);
  position: relative;
  z-index: 2;
  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(--brand-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
/* Phare : PNG à forte marge transparente → image sur-dimensionnée +
   marge négative, clippée au disque (overflow:hidden) pour que le
   glyphe remplisse vraiment la pastille. */
.login-card-icon img { width: 64px; height: 64px; object-fit: contain; margin: -2px; }
.login-card-titles h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.login-card-titles p { margin: 4px 0 0; font-size: 13.5px; color: var(--text2); }

.login-error {
  background: #fef2f2;
  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;
}

.login-tabs { display: flex; 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(--text2);
  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;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}
.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; }
#auth-view .login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.login-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.login-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.login-input-icon {
  position: absolute;
  left: 12px;
  display: inline-flex;
  color: var(--text3);
  pointer-events: none;
}
#auth-view .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;
  box-shadow: none;
}
#auth-view .login-input input::placeholder { color: var(--text3); }
.login-input-toggle {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-input-toggle:hover { color: var(--text2); background: var(--bg); }
.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(--text2); 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;
  font-family: inherit;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.login-submit:hover { background: var(--brand-2); }
.login-submit:active { transform: scale(.98); }
.login-submit:disabled { opacity: .65; cursor: not-allowed; }

.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(--text2); }

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

#auth-view .login-sso {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
#auth-view .login-sso:hover { background: var(--bg); border-color: var(--border2); }
/* État désactivé — voies de fallback (cross-device, SSO) inertes tant
   que la roadmap n'a pas livré l'intégration. Spec alignée sur PULSE :
   opacity .5 (fade global, icône incluse), cursor not-allowed, hover
   neutralisé. Sélecteurs doublés sur :disabled ET [aria-disabled="true"]
   en défense en profondeur. */
#auth-view .login-sso:disabled,
#auth-view .login-sso[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  background: #fff;
  border-color: var(--border);
  color: var(--text3);
}
#auth-view .login-sso:disabled:hover,
#auth-view .login-sso[aria-disabled="true"]:hover {
  background: #fff;
  border-color: var(--border);
}

#auth-view .login-help { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--text2); }
#auth-view .login-help a { color: var(--brand-2); font-weight: 500; text-decoration: none; }
#auth-view .login-help a:hover { text-decoration: underline; }

.login-footer { border-top: 1px solid var(--border); background: #fff; 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;
}
.login-footer-brand { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text2); }
.login-footer-brand strong { color: var(--text); font-weight: 700; letter-spacing: .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(--text2); }

@media (max-width: 1024px) {
  .login-main { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .login-hero-title { font-size: 36px; }
  .login-hero-decor, .login-feed-preview { 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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   UI PRIMITIVES — composants partagés (`.ui-*`)
   ───────────────────────────────────────────────────────────────────────
   Namespace volontairement agnostique (PAS de couplage à une vue). Ces
   primitives remplacent les variantes par-vue qui s'étaient accumulées
   (`.docs-search/.crises-search/.ws-search`, `.docs-select` et les
   boutons-faux-dropdowns `.crises-btn`/`.ws-filter-btn` à chevron).
   ⭐ Candidats explicites à `@secalys/ui` — toute évolution converge ICI
   pour se répercuter sur les 3 vues consommatrices d'un seul coup
   (cf. CLAUDE.md sur la stratégie multi-app).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .ui-search : zone de recherche standard (icône loupe + input) ──
   Hauteur fixée par le padding vertical de l'input (~38px). Rendu
   IDENTIQUE d'une vue à l'autre : pas d'override contextuel — c'est la
   promesse du composant partagé. Si le rendu paraît trop discret sur
   un fond clair, on ajuste les tokens (bordure, ombre) ici, pas dans
   les vues qui consomment. */
.ui-search {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1 1 280px; min-width: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--text3);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-search:focus-within {
  background: var(--bg2);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.ui-search-ic { display: inline-flex; flex-shrink: 0; }
.ui-search input {
  border: none; outline: none; background: transparent;
  padding: 9px 0;
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 13.5px; color: var(--text);
}
.ui-search input::placeholder { color: var(--text3); }
/* Pas de double cerclage rouge : le conteneur pilote déjà l'indication. */
.ui-search input:focus-visible { outline: none; }

/* ── .ui-select : dropdown custom (trigger + menu role=listbox) ──
   On n'utilise PAS `<select>` natif : le panneau browser-rendered casse
   complètement le look (white-on-blue, sans rayon). Câblé par
   `wireUiSelects()` dans js/app.js — scanne `[data-ui-select]`. */
.ui-select { position: relative; display: inline-block; }
.ui-select-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 34px 9px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.ui-select-trigger:hover { background: var(--bg); border-color: var(--border2); }
.ui-select-trigger[aria-expanded="true"] {
  background: var(--bg2);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.ui-select-trigger[aria-expanded="true"]:focus-visible { outline: none; }
.ui-select-lbl { color: var(--text2); font-weight: 500; }
.ui-select-val { color: var(--text); font-weight: 600; }
.ui-select-chev {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3); pointer-events: none;
  transition: transform .15s, color .15s;
}
.ui-select:has(.ui-select-menu:not([hidden])) .ui-select-chev,
.ui-select-trigger[aria-expanded="true"] .ui-select-chev {
  transform: translateY(-50%) rotate(180deg);
  color: var(--text2);
}

/* Menu déroulant — positionné sous le trigger, aligné à gauche.
   Modifieur `.ui-select--up` : ouvre vers le HAUT (et aligné à droite).
   À utiliser quand le trigger est en bas d'un conteneur à
   `overflow: hidden` (ex. sélecteur de page size en bas d'une .home-card),
   sinon le menu est clippé. */
.ui-select-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 30;
  min-width: 100%;
  list-style: none; padding: 6px; margin: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(17,17,17,.10), 0 2px 6px rgba(17,17,17,.04);
  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);
  left: auto; right: 0;
}
.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;
  transition: background .1s, color .1s;
  outline: none;
}
.ui-select-menu li:hover,
.ui-select-menu li:focus-visible { background: var(--bg3); }
.ui-select-menu li[aria-selected="true"] {
  background: var(--brand-soft);
  color: var(--brand-2);
  font-weight: 600;
}
.ui-select-menu li[aria-selected="true"]:hover,
.ui-select-menu li[aria-selected="true"]:focus-visible {
  background: var(--brand-soft);
}
.ui-select-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--brand-2);
  opacity: 0;
  flex-shrink: 0;
}
.ui-select-menu li[aria-selected="true"] .ui-select-check { opacity: 1; }
.ui-select-text { display: inline-flex; align-items: center; gap: 8px; }

/* Pastilles de statut optionnelles dans les items (cohérent avec
   .docs-badge--ok/warn/danger). */
.ui-select-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.ui-select-dot--ok     { background: #22c55e; }
.ui-select-dot--warn   { background: #f97316; }
.ui-select-dot--danger { background: #dc2626; }

/* ── .ui-chart-tip : tooltip flottant pour graphiques (donut, bar, line…)
   — suit le curseur sur mousemove, masqué sur mouseleave. Pattern repris
   de SHIELD (charts.js / .chart-tip), candidat @secalys/ui. Un seul
   tooltip pour tout le document (`document.body`), positionné en
   `position: fixed` selon `clientX/clientY`. Cf. js/app.js#wireChartTip.
   `pointer-events: none` pour qu'il n'intercepte pas le mousemove sur
   les slices du graphique. */
.ui-chart-tip {
  position: fixed;
  background: rgba(17,17,17,.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);
}
.ui-chart-tip.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   SHELL APPLICATIF — repris de SHIELD, mappé sur la charte PILOT.
   Topbar pleine largeur + sidebar repliable + contenu routé au hash.
   Tokens SHIELD → tokens PILOT (--accent→--brand, --bg-alt→--bg2,
   --bg-soft→--bg3, --text-muted→--text2, --border-strong→--border2…).
   ⭐ Candidat @secalys/ui (shell applicatif partagé).
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ── Sidebar ── */
.sidebar {
  grid-area: sidebar;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  position: relative;
  overflow: visible;
}
.sidebar-main-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;
  display: flex; flex-direction: column;
}
.sidebar-bottom { flex-shrink: 0; }
.sidebar-sep { height: 1px; background: var(--border); margin: 10px 2px; flex-shrink: 0; }

/* Sections groupées (cf. maquette) : un libellé d'en-tête en petites majuscules,
   suivi d'une liste d'items, séparées par .sidebar-sep. */
.sidebar-section { display: flex; flex-direction: column; }
.sidebar-section-label {
  margin: 4px 12px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3);
}

.sidebar-nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text2); font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav a:hover { background: var(--bg3); color: var(--text); }
.sidebar-nav a.active {
  background: var(--brand-soft);
  color: var(--brand-2);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
  border-radius: 0 10px 10px 0;
  margin-left: -10px;
  padding-left: 22px; /* 12px + 10px pour compenser le margin négatif */
}
.sidebar-nav a.active svg { color: var(--brand); }

/* État désactivé — pattern utilisé pour les menus dont l'implémentation
   est différée (cf. #226 Indicateurs/Rapports). Visible mais inerte :
   le DOM n'est pas focusable (tabindex=-1 sur le <a>), le hover est
   neutralisé, et le clic ne propage pas. */
.sidebar-nav a.is-disabled,
.sidebar-nav a.is-disabled:hover {
  opacity: .45;
  pointer-events: none;
  cursor: default;
  background: transparent;
  color: var(--text2);
}

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

/* Bouton repli — onglet posé sur la bordure droite de la sidebar */
.sidebar-footer {
  position: absolute;
  right: -18px; 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(--bg3);
  border: 1px solid var(--border2);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--text2);
  cursor: pointer;
  box-shadow: 3px 0 8px rgba(17,17,17,.10);
  transition: background .12s, color .12s;
}
.btn-collapse span { display: none; }
.btn-collapse svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn-collapse:hover { background: var(--border2); color: var(--text); }
.app-shell.collapsed .btn-collapse svg { transform: rotate(180deg); }

/* Sidebar repliée */
.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 .sidebar-nav a.active { padding-left: 10px; }
.app-shell.collapsed .nav-badge { display: none; }
.app-shell.collapsed .sidebar-section-label { display: none; }

/* ── Topbar ── */
.topbar {
  grid-area: topbar;
  display: flex; align-items: center;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px; gap: 14px;
  box-shadow: 0 1px 3px rgba(17,17,17,.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 et le workspace. */
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 { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.topbar-brand-mark { display: inline-flex; flex-shrink: 0; }
/* PNG du phare à forte marge transparente : sur-dimensionné + marge
   négative pour que le glyphe lise sans épaissir la topbar (cf. login). */
.topbar-brand-mark img { width: 48px; height: 48px; object-fit: contain; margin: -12px 0; }
.topbar-logo-text { font-size: 17px; font-weight: 800; letter-spacing: .06em; color: var(--text); }
.topbar-brand-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.topbar-baseline { font-size: 10.5px; line-height: 1.35; color: var(--text2); font-weight: 500; }

/* Fil d'Ariane — pattern PULSE (.app-context). Racine cliquable « Accueil »
   avec icône grille, séparateur « › », item courant en gras + icône brand. */
.topbar-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px;
  flex-shrink: 1;
  min-width: 0;
}
.topbar-bc-home {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; font: inherit;
  color: var(--text2);
  text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.topbar-bc-home:hover { background: var(--bg3); color: var(--text); }
.topbar-bc-home svg,
.topbar-bc-current svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-bc-sep {
  color: var(--text3);
  font-size: 15px;
  margin: 0 1px;
  user-select: none;
}
.topbar-bc-current {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.topbar-bc-current svg { color: var(--brand); }
/* Section intermédiaire — reprise du regroupement de la sidebar
   (« Ressources », « Suivi de crise », « Analyse »). Volontairement
   non cliquable : texte simple, ton secondaire, pas de hover. */
.topbar-bc-section {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  color: var(--text2);
  white-space: nowrap;
  cursor: default;
}

.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(--text2); cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.topbar-bell:hover,
.topbar-gear:hover { background: var(--bg3); color: var(--text); }
.topbar-bell-badge {
  position: absolute; top: 4px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Widget utilisateur topbar — composant repris de PULSE (candidat
   @secalys/ui shell partagé). Pill compact rounded-square 10px : avatar
   tonal (--brand-soft fond, --brand-2 texte), nom seul dans le bouton
   (1 ligne), rôle déplacé dans le dropdown. Charte PILOT (--brand rouge
   brique) s'applique automatiquement via les tokens partagés. */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu-btn {
  display: flex; align-items: center; gap: .55rem;
  background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .3rem .6rem .3rem .35rem;
  cursor: pointer; font: inherit; color: var(--text);
  transition: background .12s, border-color .12s;
}
.user-menu-btn:hover { background: var(--bg3); border-color: var(--border2); }
.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(--text2); font-weight: 500; }
.user-menu-chevron { width: 14px; height: 14px; color: var(--text2); flex-shrink: 0; }

.user-menu-dropdown {
  position: absolute; top: calc(100% + .5rem); right: 0; min-width: 230px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: .5rem; z-index: 1200;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .55rem .65rem; }
.user-menu-head .user-menu-name { font-size: 14px; }
.user-menu-sep { height: 1px; background: var(--border); margin: .25rem 0; }
.user-menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: none; background: none; padding: .55rem .6rem; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.user-menu-item:hover { background: var(--bg3); }
.user-menu-item--danger { color: #dc2626; }
.user-menu-item--danger:hover { background: #fee2e2; }
.user-menu-item svg { flex-shrink: 0; }

/* ── Contenu ── */
.content {
  grid-area: content;
  overflow-y: auto; overflow-x: hidden;
  background: transparent;
  padding: 24px 28px 28px;
}
.view { display: block; }
.view[hidden] { display: none; }

.view-empty {
  min-height: calc(100vh - 60px - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 8px;
}
.view-empty h1 { font-size: 22px; font-weight: 800; letter-spacing: .02em; color: var(--text); margin: 0; }
.view-empty p { margin: 0; font-size: 13.5px; color: var(--text3); }

/* ── Responsive — sidebar en icônes seules sous 880px ── */
@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 { padding: 0 16px; }
  .topbar-baseline, .topbar-brand-divider { display: none; }
  .content { padding: 16px; }
}
@media (max-width: 560px) {
  #topbar-user .user-menu-id { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE ACCUEIL — tableau de bord (prototype, données statiques, liens hash).
   Namespace .home-* ; réutilise les tokens de charte (--brand*, --bg*,
   --text*, --border*, --radius, --shadow-lg). Aucune dépendance JS :
   navigation au hash via le routeur existant.
   ═══════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.home {
  display: grid;
  gap: 20px;
}
.home-grid-2 {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  align-items: stretch; /* les 2 cartes à la même hauteur */
}
/* Cartes de cette rangée en colonne flex : la pagination est poussée en
   bas (margin-top:auto) → les 2 pieds de carte s'alignent malgré des
   contenus de hauteurs différentes. */
.home-grid-2 > .home-card { display: flex; flex-direction: column; }
.home-grid-2 .home-pager { margin-top: auto; }

.home-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  overflow: hidden; /* l'en-tête « ruled » déborde jusqu'aux bords —
                        clippé aux coins arrondis de la carte */
}
.home-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 4px;
}
/* En-tête de carte : titre à gauche, lien d'action aligné à droite (pattern
   « section + tout voir »). Évite le lien flottant en milieu de carte. */
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px;
}
.home-card-head .home-card-title { margin: 0; }
/* align-self:center annule le align-self:flex-start de base de .home-link
   → le lien est centré sur la ligne médiane du bandeau, aligné au titre. */
.home-card-head .home-link { margin-top: 0; align-self: center; white-space: nowrap; }
/* En-tête « ruled » : en-tête sobre séparé du corps par un filet bas, pleine
   largeur (déborde sur le padding via marges négatives, clippé aux coins
   arrondis grâce à .home-card { overflow:hidden }). Calque la tuile « Activité
   en temps réel » de SHIELD (.dv2-panel-head) : fond blanc, titre neutre,
   pas de bandeau teinté ni d'icône. */
.home-card-head--ruled {
  margin: -22px -24px 16px;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.home-card-head--ruled .home-card-title { font-size: 14px; font-weight: 600; }

/* Pastille d'icône — variantes de couleur alignées sur le switcher ORBIT */
.home-ic {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 9px;
}
.home-ic--brand  { background: var(--brand-soft); color: var(--brand-2); }
.home-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.home-ic--green  { background: #dcfce7; color: #15803d; }
.home-ic--slate  { background: #e8eaed; color: #475569; }

/* Lien fléché « voir plus » */
.home-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  color: var(--brand-2); font-size: 13px; font-weight: 600;
  text-decoration: none; align-self: flex-start;
  transition: gap .15s;
}
.home-link svg { flex-shrink: 0; }
.home-link:hover { text-decoration: underline; gap: 10px; }

/* ── Carte d'accueil — UNE carte pleine largeur ──
   Gauche : statut (texte + image en bleed, fondue des deux côtés) au-dessus
   d'un filet, puis bandeau « dernière mise à jour ». Droite : actions,
   séparées par un filet vertical pleine hauteur. Sobre, monochrome. */
.home-hero {
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.home-hero-status {
  flex: 1.75 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-hero-top {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 168px;
}
.home-hero-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  max-width: 48%;
  padding: 28px 24px 28px 30px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.home-hero-ic {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-hero-titles { display: flex; flex-direction: column; gap: 10px; }
.home-hero-titles h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text); margin: 0;
}
.home-hero-titles p {
  font-size: 14.5px; line-height: 1.5; color: var(--text2); margin: 0;
}
.home-hero-fig {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 64%;
  pointer-events: none;
}
/* Fondu sur les 4 côtés (intersection de 2 dégradés) : l'image émerge
   du blanc et s'y dissout, sans bord rectangulaire dur. */
.home-hero-fig img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .85;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 32%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 32%, #000 84%, transparent 100%);
          mask-composite: intersect;
}
.home-hero-meta {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 13px 30px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text3);
}
.home-hero-meta span { display: inline-flex; }

/* ── Variante : crise active en cours ──
   Réutilise .home-hero-top mais densifie le bloc de gauche (titre + nom
   de crise + horodatage + pill niveau + 2 CTAs). L'image .home-hero-fig
   reste identique (continuité visuelle avec l'état empty). */
/* `display: flex` sur .home-hero-top / .home-act-list écrase le
   `display: none` natif de l'attribut hidden — on rétablit explicitement
   (cf. piège « hidden + display inline » mémoire PILOT). */
.home-hero-top[hidden],
.home-act-list[hidden] { display: none !important; }
.home-hero-top--active { min-height: 260px; }
.home-hero-top--active .home-hero-body { max-width: 56%; padding: 26px 24px 26px 30px; }
.home-hero-ic--alert {
  background: var(--brand-soft);
  color: var(--brand);
}
.home-hero-crise-name {
  font-size: 15px; font-weight: 700; color: var(--brand-2);
  margin: 2px 0 0;
}
.home-hero-crise-when {
  font-size: 13px; color: var(--text2); margin: 4px 0 0;
}
.home-hero-niveau-wrap { margin: 10px 0 0; }
.home-hero-niveau {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-2);
}
.home-hero-niveau svg { flex-shrink: 0; }
.home-hero-niveau strong { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* Variantes de pill « Niveau » alignées sur la palette crises-sev. */
.home-hero-niveau--vigilance { background: #dcfce7; color: #15803d; }
.home-hero-niveau--alerte    { background: #fef9c3; color: #a16207; }
.home-hero-niveau--crise     { background: #ffedd5; color: #c2410c; }
.home-hero-niveau--critique  { background: var(--brand-soft); color: var(--brand-2); }
.home-hero-active-desc {
  font-size: 13.5px; line-height: 1.55; color: var(--text2);
  margin: 4px 0 0;
}
.home-hero-active-ctas {
  display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
.home-hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.home-hero-cta--brand {
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand);
}
.home-hero-cta--brand:hover { background: var(--brand-2); border-color: var(--brand-2); }
.home-hero-cta--ghost {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border);
}
.home-hero-cta--ghost:hover { background: var(--bg); border-color: var(--border2); }
.home-hero-cta svg { flex-shrink: 0; }

/* Action « highlight » dans la colonne droite quand une crise est active :
   bg rouge clair + bordure rouge clair, pour pointer l'action prioritaire
   « Suivre la crise en cours ». */
.home-act--highlight {
  background: var(--brand-soft);
  border: 1px solid #ecd6d5;
}
.home-act--highlight:hover { background: #ecd6d5; }

/* Colonne droite — actions, séparée par un filet vertical */
.home-hero-actions {
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}
.home-act-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 14px;
}
.home-act {
  display: flex; align-items: center; gap: 15px;
  padding: 12px 6px 12px 4px;
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.home-act:hover { background: var(--bg); }
.home-act-ic {
  width: 46px; height: 46px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-act-ic--brand { background: var(--brand); color: #fff; }
.home-act-ic--neutral { background: var(--bg3); color: var(--text2); }
.home-act-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-act-tt { font-size: 14px; font-weight: 700; color: var(--text); }
.home-act-sub {
  font-size: 12.5px; line-height: 1.4; color: var(--text2); margin-top: 3px;
}
.home-act-chev { display: inline-flex; color: var(--text3); flex-shrink: 0; }
.home-hero-actions .home-link { margin-top: auto; padding-top: 18px; }

/* Tuile cliquable (actions + ressources) */
.home-tile {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
  text-decoration: none; color: var(--text);
  transition: border-color .15s, background .15s, transform .08s;
}
.home-tile:hover { border-color: var(--border2); background: var(--bg); }
.home-tile:active { transform: scale(.99); }
/* Tuile désactivée (module non disponible) — grisée + non interactive. */
.home-tile--soon {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.home-tile--soon:hover { border-color: var(--border); background: var(--bg2); }
.home-tile .home-ic { width: 36px; height: 36px; }
.home-tile-txt { display: flex; flex-direction: column; min-width: 0; }
.home-tile-tt { font-size: 13.5px; font-weight: 700; color: var(--text); }
.home-tile-sub {
  font-size: 12px; line-height: 1.45; color: var(--text2); margin-top: 3px;
}

/* ── Crises passées (table) ── */
/* Aligné sur .annuaire-table (#210) — header discret 11.5/600/text3 sans
   uppercase ; cellule 13.5/text ; padding 10×12 / 12. */
.home-table-wrap { overflow-x: auto; margin-top: 14px; }
.home-table { width: 100%; border-collapse: collapse; }
.home-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;
}
.home-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text); vertical-align: middle;
  white-space: nowrap;
}
.home-table tbody tr:last-child td { border-bottom: none; }
.home-table tbody tr:hover td { background: var(--bg); }
.home-table tbody tr.is-active td { background: var(--brand-soft); }
.home-table tbody tr.is-active:hover td { background: var(--brand-soft); }
.home-crise-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: normal; }
.home-crise-sub { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: normal; }

.home-badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
}
.home-badge--done { background: #dcfce7; color: #15803d; }
.home-badge--progress { background: #dbeafe; color: #1d4ed8; }

/* Actions de ligne : rapport + page de la crise (boutons icône groupés). */
.home-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.home-doc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px; color: var(--text3);
  transition: background .15s, color .15s;
}
.home-doc-btn:hover { background: var(--bg3); color: var(--text); }

/* ── Activité récente ── */
.home-feed { list-style: none; margin: 8px 0 0; padding: 0; }
.home-feed li a {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  border-radius: 8px;
  transition: background .12s;
}
.home-feed li:last-child a { border-bottom: none; }
.home-feed li a:hover { background: var(--bg); }
.home-feed .home-ic { width: 38px; height: 38px; }
.home-feed-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-feed-tt { font-size: 13px; font-weight: 600; color: var(--text); }
.home-feed-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
/* Horodatage à droite, vertical-centré, avant le chevron (uniforme sur
   tous les items — un item peut avoir 1 ligne ou titre + sous-ligne). */
.home-feed-when {
  font-size: 11.5px; color: var(--text3);
  white-space: nowrap; flex-shrink: 0;
}
.home-feed-chev { display: inline-flex; color: var(--text3); flex-shrink: 0; }

/* ── Préparation & ressources ── */
.home-res-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}

/* ── Pagination (prototype : repères inertes) ── */
.home-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  margin-top: 18px;
}
.home-pager-page,
.home-pager-arrow {
  min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 9px;
  border: none; background: transparent;
  color: var(--text2); font-family: inherit;
  font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  transition: background .12s, color .12s;
}
.home-pager-arrow { padding: 0; }
.home-pager-page:hover,
.home-pager-arrow:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
.home-pager-page.is-active {
  background: var(--brand-soft); color: var(--brand-2); cursor: default;
}
.home-pager-page.is-active:hover { background: var(--brand-soft); }
.home-pager-arrow:disabled { opacity: .4; cursor: not-allowed; }
.home-pager-gap {
  min-width: 22px; text-align: center;
  color: var(--text3); font-size: 13px;
  user-select: none;
}

/* Focus visible — accessibilité clavier sur tous les éléments interactifs */
.home a:focus-visible,
.home button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  .home-grid-2 { grid-template-columns: 1fr; }
  .home-hero-body { max-width: 52%; }
}
@media (max-width: 920px) {
  /* La carte d'accueil empile : statut au-dessus, actions en dessous —
     le filet vertical devient un filet horizontal. */
  .home-hero { flex-direction: column; }
  .home-hero-actions { border-left: none; border-top: 1px solid var(--border); }
  .home-hero-actions .home-link { margin-top: 18px; }
}
@media (max-width: 760px) {
  .home-hero-top { display: block; min-height: 0; }
  .home-hero-body { max-width: 100%; }
  .home-hero-fig {
    position: relative; width: 100%; height: 150px;
  }
  .home-hero-fig img {
    -webkit-mask-image: none; mask-image: none;
  }
  .home-res-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .home-res-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE CRISES — page #/crises (prototype, contenu statique).
   Namespace .crises-*. Réutilise .home-card et les tokens de la charte.
   ═══════════════════════════════════════════════════════════════════════ */

.crises { display: grid; gap: 20px; }

/* ── Barre de tête (titre + recherche + filtres + CTA) ── */
.crises-head {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.crises-head-titles { flex: 1 1 280px; min-width: 240px; }
.crises-head-titles h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); margin: 0;
}
.crises-head-titles p {
  margin: 5px 0 0;
  font-size: 13px; color: var(--text2);
}
.crises-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Toolbar pleine largeur (recherche + filtres + période) — posée sous le
   header, au-dessus des cartes. Pattern identique à `.docs-filters` et
   `.annuaire-toolbar` : les composants partagés (.ui-search, .ui-select,
   .crises-btn) se posent directement sur le fond de page (`--bg`). */
.crises-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.crises-toolbar-search { flex: 1 1 280px; min-width: 0; }
/* Recherche et filtre période : voir `.ui-search` et `.ui-select`
   (primitives partagées, namespace `.ui-*`). */

.crises-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.crises-btn:hover { background: var(--bg); border-color: var(--border2); }
.crises-btn svg { flex-shrink: 0; color: var(--text2); }

/* ── Carte crises (s'appuie sur .home-card) ── */
.crises-card-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  margin-bottom: 14px;
}
.crises-card-head--row { align-items: flex-start; }
.crises-card-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2);
  margin: 0;
}
.crises-card-sub {
  margin: 4px 0 0;
  font-size: 13px; color: var(--text2);
}

/* ── Table « Crises passées » ── */
.crises-table-wrap { overflow-x: auto; }

/* Empty/loading/error state — affiché sous la table ou la frise quand le
   tbody/ol est vide. Pattern minimal cohérent avec le ton « lecture seule »
   du dashboard. */
.crises-status {
  padding: 36px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text2);
  border-top: 1px solid var(--border);
}
.crises-status--error { color: #8a1a1a; }
/* Aligné sur .annuaire-table (#210). */
.crises-table {
  width: 100%; border-collapse: collapse;
}
.crises-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;
}
.crises-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text); vertical-align: middle;
  white-space: nowrap;
}
.crises-table tbody tr:last-child td { border-bottom: none; }
.crises-table tbody tr:hover td { background: var(--bg); }
.crises-table tbody tr.is-active td { background: var(--brand-soft); }
.crises-table tbody tr.is-active:hover td { background: var(--brand-soft); }

/* Lignes cliquables — ouverture du workspace dans un nouvel onglet (cf. JS).
   Pattern PULSE (tr.ex-tr) : cursor pointer, hover discret. Focus visible
   pour navigation clavier (tr est role=link tabindex=0). Couvre les deux
   tableaux : « Crises récentes » (home) et « Crises passées » (vue crises). */
.crises-row-clickable,
.home-row-clickable { cursor: pointer; }
.crises-row-clickable:focus-visible,
.home-row-clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
/* Crises clôturées « archivées » — grisées quand une crise est en cours, pour
   les distinguer du suivi actif (PO). Reste cliquable (consultation). */
.crises-table tbody tr.crises-row--archived td { opacity: .5; }
.crises-table tbody tr.crises-row--archived:hover td { opacity: .68; }

/* Pastille d'identifiant — pattern PULSE (.ex-id). Police tabulaire pour
   alignement vertical des chiffres. */
.crises-id {
  display: inline-block;
  background: var(--bg3);
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crises-row-name { display: flex; align-items: center; gap: 12px; }
.crises-row-ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.crises-row-ic--cyber       { background: #dbeafe; color: #1d4ed8; }
.crises-row-ic--industrial  { background: #ffedd5; color: #c2410c; }
.crises-row-ic--social      { background: #e8eaed; color: #475569; }
.crises-row-ic--health      { background: #dcfce7; color: #15803d; }
.crises-row-tt {
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.crises-row-sub {
  font-size: 12px; color: var(--text2); margin-top: 2px;
}

.crises-cells {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text2);
}
.crises-cells svg { color: var(--text3); }

.crises-impact {
  color: var(--text2); line-height: 1.45;
  max-width: 320px; min-width: 200px;
  white-space: normal;
}

/* Pastilles sévérité / statut RETEX (échelle dédiée à la vue crises) */
.crises-sev {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.crises-sev--critical { background: var(--brand-soft); color: var(--brand-2); }
.crises-sev--high     { background: #ffedd5; color: #c2410c; }
.crises-sev--moderate { background: #fef9c3; color: #a16207; }
.crises-sev--done     { background: #dcfce7; color: #15803d; }
.crises-sev--partial  { background: #fed7aa; color: #9a3412; }

/* Actions de ligne (Rapport, Consulter, Télécharger, ⋮) */
.crises-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.crises-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.crises-action:hover { background: var(--bg); border-color: var(--border2); color: var(--text); }

/* Pied de carte — paginateur aligné à droite (convention tables) ;
   --center pour les CTA centrés (« Voir la frise détaillée »). */
.crises-card-foot {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 14px;
  flex-wrap: wrap; gap: 12px 24px;
}
.crises-card-foot--center { justify-content: center; }

.crises-pager { display: inline-flex; align-items: center; gap: 4px; }
.crises-pager-status { font-size: 12.5px; color: var(--text2); margin-right: 8px; }
.crises-pager-page,
.crises-pager-arrow {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.crises-pager-arrow { padding: 0; }
.crises-pager-page:hover,
.crises-pager-arrow:not(:disabled):hover {
  background: var(--bg); border-color: var(--border2); color: var(--text);
}
.crises-pager-page.is-active {
  background: var(--brand-soft); color: var(--brand-2);
  border-color: var(--brand-soft);
  cursor: default;
}
.crises-pager-arrow:disabled { opacity: .35; cursor: not-allowed; }

/* ── Onglets « Mémoire des crises » ── */
.crises-tabs { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.crises-tab {
  padding: 8px 14px;
  background: transparent; border: none;
  color: var(--text2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.crises-tab:hover { color: var(--text); }
.crises-tab.is-active {
  color: var(--brand-2); font-weight: 600;
  border-bottom-color: var(--brand);
}
.crises-tab-chart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px;
  margin-left: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.crises-tab-chart:hover { background: var(--bg); color: var(--text); border-color: var(--border2); }

/* ── Frise chronologique ── */
.crises-tl {
  list-style: none; margin: 16px 0 6px; padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
}
/* Filet horizontal qui traverse la rangée des pastilles, arrêté au centre
   des colonnes extrêmes (1/14 = demi-colonne sur 7). */
.crises-tl::before {
  content: ''; position: absolute;
  left: calc(100% / 14); right: calc(100% / 14);
  top: 33px;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.crises-tl-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: relative;
}
.crises-tl-year {
  font-size: 13px; font-weight: 600; color: var(--text2);
  margin-bottom: 10px;
}
.crises-tl-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #d1d5db;
  position: relative; z-index: 1;
  /* halo carte-blanche qui masque la ligne sous le dot */
  box-shadow: 0 0 0 3px var(--bg2);
}
.crises-tl-dot--green  { background: #22c55e; }
.crises-tl-dot--orange { background: #f97316; }
.crises-tl-dot--purple { background: #a855f7; }
.crises-tl-dot--blue   { background: #3b82f6; }
.crises-tl-dot--empty  { background: #d1d5db; }

.crises-tl-body {
  margin-top: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.crises-tl-tt {
  font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.35; max-width: 170px;
}
.crises-tl-tt--muted { font-weight: 500; color: var(--text3); }
.crises-tl-date { font-size: 12px; color: var(--text2); }

/* Focus visible (vue crises) — `input` exclu du catch-all : le seul
   input de la vue est `.ui-search input` dont le focus est piloté par le
   conteneur (`.ui-search:focus-within`). Cumuler les deux produit un
   double cerclage rouge (rapport visuel utilisateur). */
.crises a:focus-visible,
.crises button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 1180px) {
  .crises-impact { min-width: 160px; }
}
@media (max-width: 1080px) {
  .crises-tl { grid-template-columns: repeat(4, 1fr); }
  .crises-tl::before { display: none; }
}
@media (max-width: 760px) {
  /* La recherche prend toute la largeur sous 760px — l'override
     cible la primitive partagée dans le contexte crises uniquement. */
  .crises-toolbar-search { flex: 1 1 100%; }
  .crises-tl { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   WORKSPACE DE CRISE — shell dédié (#workspace-view).
   Sidebar gauche full-height + main avec topbar discrète, carte crise,
   2 colonnes de cartes, footer status. Namespace .ws-*. Prototype : inert.
   ═══════════════════════════════════════════════════════════════════════ */

#workspace-view { flex: 1; display: flex; min-height: 100vh; }
#workspace-view[hidden] { display: none !important; }

.ws-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: transparent;
}

/* ── Sidebar ── */
.ws-sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  min-height: 0;
  position: relative;
  overflow: visible;
}
/* Plus d'air entre le brand et le premier libellé de section. */
.ws-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 44px; }
.ws-sidebar-mark { display: inline-flex; flex-shrink: 0; }
.ws-sidebar-mark img { width: 56px; height: 56px; object-fit: contain; margin: -10px 0; }
.ws-sidebar-titles { display: flex; flex-direction: column; line-height: 1.15; }
.ws-sidebar-name { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--text); }
.ws-sidebar-tagline { font-size: 11px; color: var(--text2); font-weight: 500; margin-top: 3px; }

.ws-sidebar-section {
  margin: 4px 12px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3);
}
/* Séparateur fin entre sections (pattern app-shell .sidebar-sep). */
.ws-sidebar-sep {
  height: 1px;
  background: var(--border);
  margin: 10px 4px;
  flex-shrink: 0;
}

.ws-nav { flex: 1; overflow-y: auto; min-height: 0; }
.ws-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text2); font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.ws-nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text3); }
.ws-nav a:hover { background: var(--bg3); color: var(--text); }
.ws-nav a:hover svg { color: var(--text2); }
/* Entrée de menu désactivée (module non disponible) — grisée, non interactive. */
.ws-nav a.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
.ws-nav a.is-disabled:hover { background: transparent; }
.ws-nav a.active {
  background: var(--brand-soft); color: var(--brand-2); font-weight: 600;
}
.ws-nav a.active svg { color: var(--brand-2); }
.ws-nav-badge {
  margin-left: auto;
  background: var(--bg3); color: var(--text2);
  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;
}
.ws-nav a.active .ws-nav-badge { background: #fff; color: var(--brand-2); }

.ws-sidebar-foot {
  border-top: 1px solid var(--border);
  margin: 10px -14px 0;
  padding: 10px 10px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ws-sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer; font-family: inherit; text-align: left; width: 100%;
  transition: background .12s, border-color .12s;
}
.ws-sidebar-user:hover { background: var(--bg3); border-color: var(--border2); }
.ws-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ws-user-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.15; }
.ws-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ws-user-role { font-size: 11px; color: var(--text2); margin-top: 1px; }
.ws-sidebar-user svg { color: var(--text3); flex-shrink: 0; }

.ws-exit {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text2); font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.ws-exit:hover { background: var(--bg3); color: var(--text); }
.ws-exit svg { color: var(--text3); flex-shrink: 0; }

/* Pastille de repli — pattern app-shell (.sidebar-footer + .btn-collapse).
   Onglet flottant sur la bordure droite de la sidebar, centré verticalement.
   La classe .btn-collapse est mutualisée (cf. app-shell). */
.ws-sidebar-collapse-tab {
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  padding: 0; border: none; margin: 0; z-index: 10;
}

/* État réduit — la grille passe à 64px, libellés/texte/badges/sections
   masqués, items recentrés sur l'icône. Pattern app-shell.collapsed. */
.ws-shell.collapsed { grid-template-columns: 64px 1fr; }
.ws-shell.collapsed .ws-sidebar-titles { display: none; }
.ws-shell.collapsed .ws-sidebar-section { display: none; }
.ws-shell.collapsed .ws-sidebar-sep { margin: 8px 8px; }
.ws-shell.collapsed .ws-nav a { justify-content: center; padding: 10px; }
.ws-shell.collapsed .ws-nav a > span:not(.ws-nav-badge) { display: none; }
.ws-shell.collapsed .ws-nav-badge { display: none; }
.ws-shell.collapsed .ws-sidebar-foot { margin: 10px -8px 0; padding: 10px 4px 0; }
.ws-shell.collapsed .ws-sidebar-user { justify-content: center; padding: 8px 4px; }
.ws-shell.collapsed .ws-user-meta { display: none; }
.ws-shell.collapsed .ws-sidebar-user > svg { display: none; }
.ws-shell.collapsed .ws-exit { justify-content: center; padding: 10px 4px; }
.ws-shell.collapsed .ws-exit > span { display: none; }
.ws-shell.collapsed .btn-collapse svg { transform: rotate(180deg); }

/* ── Main ── */
.ws-main {
  display: flex; flex-direction: column;
  padding: 16px 24px 14px;
  gap: 14px;
  position: relative;
  min-width: 0;
  height: 100vh;
  /* overflow-y: auto pour que le contenu du stage scroll quand il dépasse
     la hauteur du viewport (table riche Arbitrages, Plan d'actions, etc.).
     overflow-x: hidden évite l'apparition d'une scrollbar horizontale due
     aux ombres + box-shadow sur les composants internes. */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Topbar discrète (haut-droit absolu) */
.ws-topbar {
  position: absolute;
  top: 14px; right: 24px;
  display: flex; align-items: center; gap: 6px;
  z-index: 5;
}
.ws-topbar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ws-topbar-btn:hover { background: var(--bg3); color: var(--text); }
.ws-topbar-btn svg { flex-shrink: 0; }
.ws-topbar-bell { position: relative; padding: 8px; width: 36px; height: 36px; }
.ws-topbar-bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ws-topbar-more { padding: 8px; width: 32px; height: 36px; }

/* ── Carte titre crise — refonte maquette mai 2026 ──
   Bloc composé de deux niveaux empilés :
   - `.ws-crisis-top` : fond brand-soft, icône sirène + headline + métadonnées + KPIs
   - `.ws-crisis-strip` : fond blanc, jauge niveau / périmètre / statut / maj + CTA
   La carte conserve sa bordure et son radius globaux ; les deux niveaux
   sont séparés par une bordure interne (pas de gap pour garder une carte
   « monolithique »). */
.ws-crisis {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  overflow: hidden;
  /* Garde-fou Flexbox : `.ws-main` est un flex column. Sans `flex-shrink: 0`,
     `overflow: hidden` redéfinit `min-height: auto` → `0` (spec Flexbox), donc
     le bandeau peut être écrasé à 0 sous la pression des autres enfants. */
  flex-shrink: 0;
}
.ws-crisis[hidden] { display: none; }
.ws-crisis-top {
  display: block;
  background: var(--bg2);
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--border);
}
/* Ligne du haut : icône + titre/pill + métadonnées (date, directeur) + KPIs
   sur une seule ligne, alignés au top du bloc titre.
   La description s'écrit dessous, en pleine largeur (cf. mockup mai 2026). */
.ws-crisis-row-main {
  display: flex; align-items: flex-start;
  gap: 28px;
}
/* Grande icône sirène — pastille ronde rouge saturée, SVG blanc. */
.ws-crisis-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(158,27,27,.14);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ws-crisis-icon svg { width: 40px; height: 40px; }
/* Le bloc titre porte la pill niveau (au-dessus du titre) + le titre.
   La description vit en dehors, dans `.ws-crisis-desc` plein largeur sous
   la ligne du haut. Le body prend l'espace souple entre l'icône et les
   métadonnées (date / directeur) puis les KPIs. */
.ws-crisis-body {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 2px;
}
/* Le picker cellule ne fait pas partie de la maquette refonte mai 2026.
   On le garde dans le DOM (data wiring conservé) mais hidden visuellement
   dans le bandeau — il pourra être réintroduit ailleurs si besoin. */
.ws-crisis-body .ws-crisis-pickers { display: none; }

/* Sélecteurs de crise + cellule actives — affichés au-dessus du titre quand
   pertinents (≥ 2 crises actives pour le picker crise, ≥ 2 cellules engagées
   pour le picker cellule). Cachés par défaut (lot 0.1 + 0.2). */
.ws-crisis-pickers { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.ws-crisis-picker { display: flex; flex-direction: column; gap: 4px; }
.ws-crisis-picker[hidden] { display: none; }
.ws-crisis-picker-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text3);
}
.ws-crisis-picker .ui-select-trigger { font-size: 13px; padding: 6px 10px; }

/* ── Fil d'Ariane workspace ──
   Affiché à la place de `.ws-crisis` sur tous les stages autres que
   'overview'. Pattern iso `.topbar-breadcrumb` de l'app principale
   (racine cliquable « Vue d'ensemble » → stage courant en gras). */
.ws-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 13.5px;
  padding: 4px 0;
  margin: 12px 0 8px;
  flex-shrink: 1;
  min-width: 0;
}
.ws-breadcrumb[hidden] { display: none; }
.ws-bc-home {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: var(--text2);
  text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.ws-bc-home:hover { background: var(--bg3); color: var(--text); }
.ws-bc-home svg { flex-shrink: 0; }
.ws-bc-sep {
  color: var(--text3);
  font-size: 15px;
  margin: 0 1px;
  user-select: none;
}
.ws-bc-current {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.ws-bc-current svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); }
/* Sélecteur « Cellule active » réintroduit dans le fil d'Ariane — disponible
   sur chaque écran de suivi. Poussé à droite, libellé + select sur une ligne
   (override du `.ws-crisis-picker` qui est en colonne dans la carte crise). */
.ws-bc-cellule {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.ws-bc-cellule .ws-crisis-picker-label { white-space: nowrap; }
/* Trigger collé au bord droit → le menu s'ouvre ALIGNÉ À DROITE (il grandit
   vers la gauche, dans l'espace libre) pour ne pas déborder ni être rogné.
   min-width confortable pour afficher les noms de cellules en entier. */
.ws-bc-cellule .ui-select-menu {
  left: auto; right: 0;
  min-width: 260px;
  max-width: min(420px, 80vw);
}
.ws-bc-cellule .ui-select-menu .ui-select-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   Composants UI réutilisables du workspace (lot 0.6 / #116)
   Utilisés par les futurs stages V2.x / V3.x / V4.x via window.PilotWsComponents.
   ────────────────────────────────────────────────────────────────────────── */

/* Frise horizontale 4 phases canoniques. */
.ws-phase-track {
  display: flex; align-items: center; gap: 0;
  padding: 12px 0;
  width: 100%;
}
.ws-phase-step {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px;
  min-width: 0; flex: 0 0 auto;
}
.ws-phase-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  color: transparent; /* check svg caché par défaut */
  transition: background .2s, border-color .2s, color .2s;
}
.ws-phase-step--done .ws-phase-dot {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
}
.ws-phase-step--active .ws-phase-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(158, 27, 27, 0.15);
}
.ws-phase-label {
  font-size: 11px; font-weight: 600;
  color: var(--text3);
  text-align: center;
  max-width: 100px;
  line-height: 1.2;
}
.ws-phase-step--active .ws-phase-label,
.ws-phase-step--done   .ws-phase-label {
  color: var(--text);
}
.ws-phase-connector {
  display: inline-block;
  flex: 1 1 auto;
  height: 2px;
  min-width: 24px;
  background: var(--border);
  align-self: flex-start;
  margin-top: 13px; /* aligné au centre du dot 28/2 - 2/2 */
  transition: background .2s;
}
.ws-phase-connector--done { background: var(--brand-2); }

/* ── Modale workspace (centered overlay) ──────────────────────────────────
   Utilisée par les détails d'arbitrage / tâche / message / etc. via
   PilotWsComponents.slideOverPanel (nom legacy conservé). Le rendu est
   désormais une modale centrée à l'écran (iso `.iam-modal` et écrans
   principaux PILOT) — l'utilisateur trouvait le slide-over droit incohérent
   avec le reste de l'app qui utilise des modales centrées partout (IAM,
   dataset démo, etc.). */
.ws-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 900;
}
.ws-modal-backdrop.is-open { opacity: 1; }
.ws-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--bg2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: scale(.96);
  transition: transform .2s ease;
}
.ws-modal-backdrop.is-open .ws-modal { transform: scale(1); }
.ws-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ws-modal-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin: 0;
}
.ws-modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none; background: transparent; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ws-modal-close:hover { background: var(--bg3); color: var(--text); }
.ws-modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  font-size: 14px;
  color: var(--text);
}

/* Barre de progression simple. */
.ws-progress {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 120px;
}
.ws-progress-bar {
  display: block;
  flex: 1 1 auto;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ws-progress-fill {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width .3s ease;
}
.ws-progress-bar.ws-progress-bar--green .ws-progress-fill  { background: #16a34a; }
.ws-progress-bar.ws-progress-bar--orange .ws-progress-fill { background: #ea580c; }
.ws-progress-bar.ws-progress-bar--red .ws-progress-fill    { background: #dc2626; }
.ws-progress-label {
  font-size: 12px; font-weight: 700; color: var(--text2);
  min-width: 38px; text-align: right;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stage Main courante 3-col (lot 2.1 / #134)
   ────────────────────────────────────────────────────────────────────────── */
.ws-mc2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 16px 0 8px; }
.ws-mc2-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.ws-mc2-cellule { color: var(--brand-2); font-weight: 600; font-size: 16px; margin-left: 6px; }
.ws-mc2-sub { font-size: 13px; color: var(--text2); margin: 4px 0 0; }
.ws-mc2-actions { flex-shrink: 0; }
.ws-mc2-cta {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.ws-mc2-cta:hover { background: var(--brand-2); border-color: var(--brand-2); }
/* CTA désactivé (Mode TV non disponible) — grisé, non interactif. */
.ws-mc2-cta.is-disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
.ws-mc2-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; }
.ws-mc2-chip {
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); cursor: pointer;
  background: var(--bg2); color: var(--text2);
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.ws-mc2-chip:hover { border-color: var(--brand); color: var(--text); }
.ws-mc2-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ws-mc2-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 16px;
  min-height: 60vh;
}
.ws-mc2-timeline, .ws-mc2-detail, .ws-mc2-aside {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  overflow-y: auto; max-height: 70vh;
}
.ws-mc2-empty { padding: 24px; text-align: center; color: var(--text3); font-size: 13px; }
.ws-mc2-item {
  padding: 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 6px;
}
.ws-mc2-item:hover { border-color: var(--border); }
.ws-mc2-item.is-selected { background: var(--brand-soft); border-color: var(--brand); }
.ws-mc2-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ws-mc2-item-time { font-size: 11px; color: var(--text3); font-weight: 600; }
.ws-mc2-item-type {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: var(--brand-soft); color: var(--brand-2);
  text-transform: uppercase;
}
.ws-mc2-item-type[data-type="alerte"]    { background: #fee2e2; color: #991b1b; }
.ws-mc2-item-type[data-type="decision"]  { background: #dcfce7; color: #15803d; }
.ws-mc2-item-type[data-type="action"]    { background: #fef3c7; color: #92400e; }
.ws-mc2-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ws-mc2-item-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ws-mc2-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ws-mc2-detail-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 8px 0; }
.ws-mc2-detail-meta { font-size: 12px; color: var(--text2); margin-bottom: 12px; }
.ws-mc2-detail-content { font-size: 14px; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
.ws-mc2-aside-block { margin-bottom: 16px; }
.ws-mc2-aside-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); margin: 0 0 8px; }
.ws-mc2-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; }
.ws-mc2-field > span { font-weight: 600; color: var(--text2); }
.ws-mc2-field select, .ws-mc2-field textarea, .ws-mc2-field input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; background: var(--bg2); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ws-mc2-field select:focus, .ws-mc2-field textarea:focus, .ws-mc2-field input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
/* Wrapper d'un .ui-select dans un form-field (saisie rapide MC) : le
   dropdown doit prendre toute la largeur de la colonne sinon .ui-select
   (inline-block) se rétracte sur son contenu et paraît minuscule à côté
   du label. */
.ws-mc2-field--ui-select .ui-select { display: block; }
.ws-mc2-field--ui-select .ui-select-trigger {
  display: flex; width: 100%;
  justify-content: flex-start; align-items: center;
}
.ws-mc2-form-row { display: flex; gap: 6px; }
.ws-mc2-aside-cta {
  flex: 1; background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.ws-mc2-aside-cta:hover { background: var(--brand-2); border-color: var(--brand-2); }
.ws-mc2-ia-btn {
  background: var(--brand-soft); color: var(--brand-2); border: 1px solid var(--brand);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.ws-mc2-ia-btn:hover { background: var(--brand); color: #fff; }
.ws-mc2-ia-btn:disabled { opacity: .6; cursor: wait; }
.ws-mc2-form-err { color: #991b1b; font-size: 12px; margin-top: 8px; }
/* Commentaires (lot 2.2 / #136) */
.ws-mc2-comments { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.ws-mc2-comments-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text2); margin: 0 0 8px; letter-spacing: .05em; }
.ws-mc2-comment { padding: 10px 12px; border-radius: 8px; background: var(--bg); margin-bottom: 6px; }
.ws-mc2-comment-meta { font-size: 11px; color: var(--text3); margin-bottom: 2px; }
.ws-mc2-comment-content { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.ws-mc2-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.ws-mc2-comment-form textarea {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; background: var(--bg2); color: var(--text); min-height: 40px; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.ws-mc2-comment-form textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.ws-mc2-comment-form button {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.ws-mc2-comment-form button:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Main courante — refonte fidélité maquette v2 (#308)
   Bandeau état + bascules de vue + 6 KPI + layout 3 colonnes
   (saisie rapide | fil d'événements | panneau détail) + modale structurée.
   Couleurs par type d'entrée centralisées via [data-type].
   ────────────────────────────────────────────────────────────────────────── */

/* ── En-tête ── */
.ws-mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 16px 0 0; }
.ws-mc-head-titles { flex: 1; min-width: 0; }
.ws-mc-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.ws-mc-cellule { color: var(--brand-2); font-weight: 600; font-size: 16px; margin-left: 4px; }
.ws-mc-cellule:empty { display: none; }
.ws-mc-head-sub { font-size: 13px; color: var(--text2); margin: 4px 0 0; }
.ws-mc-head-actions { flex-shrink: 0; }

/* ── Bandeau état (synchronisation) — préfixe .ws-mc-status pour ne pas
   entrer en collision avec les classes .ws-mc-sync* héritées (#180 / overview). */
.ws-mc-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 0;
}
.ws-mc-status { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.ws-mc-status-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #15803d; }
.ws-mc-status-dot { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.ws-mc-status-meta { color: var(--text3); }

/* ── 6 KPI ── */
.ws-mc-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin: 16px 0 0;
}
/* #323 : variante compacte 2 tuiles, placée en colonne droite au-dessus de
   la saisie rapide (le gap de .ws-mc-right gère l'espacement). */
.ws-mc-kpis--aside { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.ws-mc-kpis--aside .ws-mc-kpi { padding: 11px; gap: 9px; }
.ws-mc-kpis--aside .ws-mc-kpi-ic { width: 30px; height: 30px; border-radius: 8px; }
.ws-mc-kpis--aside .ws-mc-kpi-ic svg { width: 16px; height: 16px; }
.ws-mc-kpis--aside .ws-mc-kpi-num { font-size: 20px; }
.ws-mc-kpis--aside .ws-mc-kpi-lbl { font-size: 11px; margin-top: 2px; }
.ws-mc-kpis--aside .ws-mc-kpi-sub { font-size: 10px; margin-top: 2px; }
.ws-mc-kpi {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s;
}
.ws-mc-kpi:hover { border-color: var(--border2); box-shadow: var(--shadow-lg); }
.ws-mc-kpi.is-active-filter { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-kpi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
}
.ws-mc-kpi-body { min-width: 0; display: flex; flex-direction: column; }
.ws-mc-kpi-num { font-size: 26px; font-weight: 800; line-height: 1.05; color: var(--text); letter-spacing: -.02em; }
.ws-mc-kpi-lbl { font-size: 12px; color: var(--text2); margin-top: 3px; font-weight: 600; }
.ws-mc-kpi-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
.ws-mc-kpi-sub:empty { display: none; }
/* Variantes couleur (icône) */
.ws-mc-kpi--green  .ws-mc-kpi-ic { background: #dcfce7; color: #15803d; }
.ws-mc-kpi--blue   .ws-mc-kpi-ic { background: #dbeafe; color: #1d4ed8; }
.ws-mc-kpi--red    .ws-mc-kpi-ic { background: #fee2e2; color: #b91c1c; }
.ws-mc-kpi--orange .ws-mc-kpi-ic { background: #ffedd5; color: #c2410c; }
.ws-mc-kpi--slate  .ws-mc-kpi-ic { background: #e2e8f0; color: #475569; }
/* Tuile active mise en avant (rouge plein) */
.ws-mc-kpi--active { background: var(--brand); border-color: var(--brand); }
.ws-mc-kpi--active .ws-mc-kpi-ic { background: rgba(255,255,255,.16); color: #fff; }
.ws-mc-kpi--active .ws-mc-kpi-num { color: #fff; }
.ws-mc-kpi--active .ws-mc-kpi-lbl { color: rgba(255,255,255,.92); }
.ws-mc-kpi--active .ws-mc-kpi-sub { color: rgba(255,255,255,.72); }
.ws-mc-kpi--active:hover { box-shadow: 0 6px 24px rgba(158,27,27,.28); }

/* ── Layout 2 colonnes (hauteur calée sur le viewport via sizeGrid) ── */
.ws-mc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px;
  gap: 16px; margin: 16px 0 8px; align-items: stretch; min-height: 0;
}
.ws-mc-col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); min-width: 0; min-height: 0;
}
/* Colonne fil : header fixe + corps défilant */
.ws-mc-feed { display: flex; flex-direction: column; height: 100%; }
.ws-mc-feed-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Colonne droite : saisie (repliable) au-dessus du détail (défilant) */
.ws-mc-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; height: 100%; }
.ws-mc-capture { flex: 0 0 auto; overflow: hidden; }
.ws-mc-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ws-mc-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--card); flex-shrink: 0;
}
.ws-mc-panel-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin: 0; }
.ws-mc-empty { padding: 28px 18px; text-align: center; color: var(--text3); font-size: 13px; }

/* ── Saisie rapide (col droite, repliable) ── */
.ws-mc-capture-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 13px 16px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left;
}
.ws-mc-capture-head:hover { background: var(--bg3); }
.ws-mc-capture-chev { color: var(--text3); transition: transform .15s; flex-shrink: 0; }
.ws-mc-capture:not(.is-collapsed) .ws-mc-capture-chev { transform: rotate(90deg); }
.ws-mc-capture-hint { margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 500; }
.ws-mc-capture-body { padding-bottom: 14px; border-top: 1px solid var(--border); }
.ws-mc-tabs { display: flex; gap: 6px; padding: 12px 16px 0; }
.ws-mc-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.ws-mc-tab svg { color: currentColor; }
.ws-mc-tab:hover { border-color: var(--brand); color: var(--text); }
.ws-mc-tab.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); }
.ws-mc-note { padding: 12px 16px 0; }
.ws-mc-note-input {
  width: 100%; min-height: 92px; resize: vertical;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; background: var(--bg2); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ws-mc-note-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ws-mc-note-count { font-size: 11.5px; color: var(--text3); }
.ws-mc-note-tools { display: inline-flex; align-items: center; gap: 6px; }
.ws-mc-note-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ws-mc-note-tool:hover { background: var(--bg3); color: var(--text); }
.ws-mc-note-tool.has-files { border-color: var(--brand); color: var(--brand-2); background: var(--brand-soft); }
.ws-mc-note-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; border-radius: 8px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.ws-mc-note-send:hover { background: var(--brand-2); border-color: var(--brand-2); }
.ws-mc-note-send svg { color: #fff; }
.ws-mc-note-err { color: #991b1b; font-size: 12px; margin: 8px 0 0; }

/* ── Zone brouillons (notes rapides non classifiées, repliable) ── */
.ws-mc-drafts { margin: 10px 16px 0; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.ws-mc-drafts-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .03em;
}
.ws-mc-drafts-head:hover { background: var(--bg3); }
.ws-mc-drafts-chev { color: var(--text3); transition: transform .15s; flex-shrink: 0; }
.ws-mc-drafts.is-open .ws-mc-drafts-chev { transform: rotate(90deg); }
.ws-mc-drafts-title { flex: 1; text-align: left; }
.ws-mc-drafts-count { font-size: 11px; font-weight: 700; color: #c2410c; background: #ffedd5; padding: 2px 8px; border-radius: 999px; }
.ws-mc-drafts-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.ws-mc-draft-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2);
}
.ws-mc-draft-time { font-size: 11px; font-weight: 700; color: var(--text3); align-self: start; padding-top: 2px; }
.ws-mc-draft-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-mc-draft-main > .ws-mc-tl-badge { align-self: flex-start; }
.ws-mc-draft-text { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; min-width: 0; }
.ws-mc-draft-note { font-size: 11.5px; color: var(--text3); line-height: 1.3; }
.ws-mc-draft-ia { display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; }
.ws-mc-draft-pj { font-size: 10px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.ws-mc-draft-actions { display: inline-flex; align-items: center; gap: 6px; }
.ws-mc-draft-classify {
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand-2);
  cursor: pointer; font-family: inherit; transition: background .12s, color .12s;
}
.ws-mc-draft-classify:hover { background: var(--brand); color: #fff; }
.ws-mc-draft-del { border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.ws-mc-draft-del:hover { color: #b91c1c; }

/* ── Fil d'événements ── */
.ws-mc-feed-head { gap: 12px; }
.ws-mc-feed-tools { display: inline-flex; align-items: center; gap: 6px; }
.ws-mc-feed-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text2);
  cursor: pointer; transition: background .12s, color .12s;
}
.ws-mc-feed-tool:hover { background: var(--bg3); color: var(--text); }
.ws-mc-feed-tool[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); }
.ws-mc-feed-search { flex: 1 1 140px; min-width: 110px; }
.ws-mc-feed-filter { flex: 0 0 auto; }
.ws-mc-feed-filter .ui-select-trigger { padding: 8px 10px; }
.ws-mc-timeline { padding: 8px 16px 16px; }

/* Item de timeline : colonne heure + rail (dot) + carte */
.ws-mc-tl-item { display: grid; grid-template-columns: 46px 18px 1fr; gap: 8px; }
.ws-mc-tl-time { font-size: 11.5px; font-weight: 700; color: var(--text3); text-align: right; padding-top: 14px; }
.ws-mc-tl-time small { display: block; font-weight: 600; color: var(--brand-2); font-size: 9px; text-transform: uppercase; margin-top: 2px; }
.ws-mc-tl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.ws-mc-tl-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--text3); flex-shrink: 0; box-shadow: 0 0 0 3px var(--card); z-index: 1; }
.ws-mc-tl-line { flex: 1; width: 2px; background: var(--border); margin-top: 4px; }
.ws-mc-tl-item:last-child .ws-mc-tl-line { display: none; }
.ws-mc-tl-card {
  margin: 10px 0; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg2);
  cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s;
}
.ws-mc-tl-card:hover { border-color: var(--border2); box-shadow: var(--shadow-lg); }
.ws-mc-tl-item.is-selected .ws-mc-tl-card { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-tl-card.is-critical { border-color: #fca5a5; background: #fef2f2; }
.ws-mc-tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ws-mc-tl-badge {
  font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .03em;
  background: var(--brand-soft); color: var(--brand-2);
}
.ws-mc-tl-sev { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #b91c1c; display: inline-flex; align-items: center; gap: 4px; }
.ws-mc-tl-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.ws-mc-tl-desc { font-size: 12.5px; color: var(--text2); line-height: 1.4; margin: 0; }
.ws-mc-tl-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.ws-mc-tl-meta { font-size: 11px; color: var(--text3); display: inline-flex; align-items: center; gap: 5px; }
.ws-mc-tl-meta svg { color: var(--text3); }
.ws-mc-tl-pj { font-size: 11px; color: var(--brand-2); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ws-mc-tl-status { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg3); color: var(--text2); }
.ws-mc-tl-status[data-status="en-cours"] { background: #ffedd5; color: #c2410c; }
.ws-mc-tl-status[data-status="diffuse"] { background: #ccfbf1; color: #0f766e; }
.ws-mc-tl-status[data-status="urgente"] { background: #fee2e2; color: #b91c1c; }
.ws-mc-tl-status[data-status="fort"] { background: #dcfce7; color: #15803d; }

/* Couleurs par type d'entrée — dot + badge (centralisé via [data-type]) */
.ws-mc-tl-dot[data-type="alerte"], .ws-mc-d-dot[data-type="alerte"] { background: #dc2626; }
.ws-mc-tl-dot[data-type="decision"], .ws-mc-d-dot[data-type="decision"] { background: #16a34a; }
.ws-mc-tl-dot[data-type="information"], .ws-mc-d-dot[data-type="information"] { background: #2563eb; }
.ws-mc-tl-dot[data-type="action"], .ws-mc-d-dot[data-type="action"] { background: #ea580c; }
.ws-mc-tl-dot[data-type="demande"], .ws-mc-d-dot[data-type="demande"] { background: #7c3aed; }
.ws-mc-tl-dot[data-type="communication"], .ws-mc-d-dot[data-type="communication"] { background: #0d9488; }
.ws-mc-tl-dot[data-type="point-situation"], .ws-mc-d-dot[data-type="point-situation"] { background: #475569; }
.ws-mc-tl-dot[data-type="evenement"], .ws-mc-d-dot[data-type="evenement"] { background: var(--brand); }
.ws-mc-tl-badge[data-type="alerte"]          { background: #fee2e2; color: #991b1b; }
.ws-mc-tl-badge[data-type="decision"]        { background: #dcfce7; color: #15803d; }
.ws-mc-tl-badge[data-type="information"]     { background: #dbeafe; color: #1d4ed8; }
.ws-mc-tl-badge[data-type="action"]          { background: #ffedd5; color: #9a3412; }
.ws-mc-tl-badge[data-type="demande"]         { background: #ede9fe; color: #6d28d9; }
.ws-mc-tl-badge[data-type="communication"]   { background: #ccfbf1; color: #0f766e; }
.ws-mc-tl-badge[data-type="point-situation"] { background: #e2e8f0; color: #334155; }
.ws-mc-tl-badge[data-type="evenement"]       { background: var(--brand-soft); color: var(--brand-2); }

/* ── Panneau de détail (col droite) ── */
.ws-mc-detail { padding: 0; }
.ws-mc-d-pad { padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ws-mc-d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ws-mc-d-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-mc-d-time { font-size: 11px; color: var(--text3); text-align: right; line-height: 1.3; }
.ws-mc-d-time small { display: block; color: var(--text3); }
.ws-mc-d-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 12px 0 14px; line-height: 1.25; }
.ws-mc-d-section { margin-top: 16px; }
.ws-mc-d-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin: 0 0 7px; }
.ws-mc-d-text { font-size: 13.5px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.ws-mc-d-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ws-mc-d-field-val { min-width: 0; overflow-wrap: anywhere; }
/* Référent (personne/groupe en charge) — ligne discrète sous la grille. */
.ws-mc-d-referent { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ws-mc-d-referent-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); }
.ws-mc-d-referent-val { font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--brand-soft); color: var(--brand-2); padding: 3px 10px; border-radius: 999px; }
.ws-mc-d-field-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); display: inline-flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.ws-mc-d-field-val { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ws-mc-d-field-val small { display: block; font-weight: 500; color: var(--text3); font-size: 11px; }
.ws-mc-d-author { display: flex; align-items: center; gap: 7px; }
.ws-mc-d-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ws-mc-d-impact-dot { width: 9px; height: 9px; border-radius: 999px; }
.ws-mc-d-impact-dot[data-impact="faible"]   { background: #16a34a; }
.ws-mc-d-impact-dot[data-impact="modere"]   { background: #f59e0b; }
.ws-mc-d-impact-dot[data-impact="eleve"]     { background: #ea580c; }
.ws-mc-d-impact-dot[data-impact="critique"] { background: #dc2626; }
/* Pièces jointes */
.ws-mc-d-pj-list { display: flex; flex-direction: column; gap: 7px; }
.ws-mc-d-pj {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg2);
  text-decoration: none; color: var(--text); transition: border-color .12s, background .12s;
}
.ws-mc-d-pj:hover { border-color: var(--brand); background: var(--brand-soft); }
.ws-mc-d-pj-ic { color: var(--brand-2); flex-shrink: 0; }
.ws-mc-d-pj-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mc-d-pj-size { font-size: 11px; color: var(--text3); }
.ws-mc-d-pj-dl { color: var(--text3); flex-shrink: 0; }
/* Commentaires */
.ws-mc-d-comment { display: flex; gap: 9px; padding: 9px 0; }
.ws-mc-d-comment-body { flex: 1; min-width: 0; }
.ws-mc-d-comment-meta { font-size: 11.5px; margin-bottom: 2px; }
.ws-mc-d-comment-meta b { color: var(--text); font-weight: 700; }
.ws-mc-d-comment-meta span { color: var(--text3); margin-left: 6px; }
.ws-mc-d-comment-text { font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.ws-mc-d-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.ws-mc-d-comment-form input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 12.5px; font-family: inherit; background: var(--bg2); color: var(--text);
}
.ws-mc-d-comment-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-d-comment-send { width: 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ws-mc-d-comment-send:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Actions liées */
.ws-mc-d-action-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg2); }
.ws-mc-d-action-ic { color: #16a34a; flex-shrink: 0; }
.ws-mc-d-action-body { flex: 1; min-width: 0; }
.ws-mc-d-action-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ws-mc-d-action-sub { font-size: 11px; color: var(--text3); }
.ws-mc-d-action-add { width: 100%; margin-top: 8px; padding: 8px; border-radius: 9px; border: 1px dashed var(--border2); background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ws-mc-d-action-add:hover { background: var(--bg3); color: var(--text); }
/* Pied de panneau (Dupliquer / Partager / Modifier / kebab) */
.ws-mc-d-foot {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--card);
}
.ws-mc-d-foot .docs-btn { padding: 8px 12px; }
.ws-mc-d-foot-spacer { flex: 1; }
.ws-mc-d-kebab { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ws-mc-d-kebab:hover { background: var(--bg3); color: var(--text); }

/* ── Modale « Nouvelle entrée structurée » (large, 2 colonnes) ── */
.ws-modal--wide { width: min(880px, 100%); }
.ws-mc-form-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
/* Dropdowns alignés sur le composant standard .ui-select (pleine largeur). */
.ws-mc-fsec .ui-select { display: block; width: 100%; }
.ws-mc-fsec .ui-select-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.ws-mc-fsec { margin-bottom: 18px; }
.ws-mc-fsec:last-child { margin-bottom: 0; }
.ws-mc-flabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin: 0 0 8px; display: flex; align-items: center; gap: 5px; }
.ws-mc-flabel .req { color: var(--brand-2); }
/* Bouton « Proposer (IA) » sur le champ Titre. */
.ws-mc-ia-suggest {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand-2);
  transition: background .12s, color .12s, opacity .12s;
}
.ws-mc-ia-suggest:hover { background: var(--brand); color: #fff; }
.ws-mc-ia-suggest:disabled, .ws-mc-ia-suggest.is-loading { opacity: .6; cursor: wait; }
.ws-mc-finput, .ws-mc-ftext {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13.5px; font-family: inherit; background: var(--bg2); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ws-mc-ftext { min-height: 120px; resize: vertical; border-radius: 0 0 10px 10px; border-top: none; }
.ws-mc-finput:focus, .ws-mc-ftext:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-fcount { display: block; text-align: right; font-size: 11px; color: var(--text3); margin-top: 4px; }
/* Grille des types d'entrée */
.ws-mc-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ws-mc-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text2);
  font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.ws-mc-type-btn:hover { border-color: var(--border2); color: var(--text); }
.ws-mc-type-btn.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-tint); }
.ws-mc-type-btn svg { color: currentColor; }
/* Barre rich-text (markdown léger) */
.ws-mc-rt-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--bg3); flex-wrap: wrap; }
.ws-mc-rt-btn { width: 30px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.ws-mc-rt-btn:hover { background: var(--bg2); color: var(--text); }
.ws-mc-rt-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 4px; }
/* Zone glisser-déposer */
.ws-mc-dropzone {
  border: 1.5px dashed var(--border2); border-radius: 12px; padding: 22px 16px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  background: var(--bg);
}
.ws-mc-dropzone:hover, .ws-mc-dropzone.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.ws-mc-dropzone-ic { color: var(--text3); margin-bottom: 8px; }
.ws-mc-dropzone-txt { font-size: 12.5px; color: var(--text2); }
.ws-mc-dropzone-hint { font-size: 11px; color: var(--text3); margin-top: 3px; }
.ws-mc-dropzone-btn { margin-top: 10px; display: inline-flex; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ws-mc-dropzone-btn:hover { background: var(--bg3); }
.ws-mc-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ws-mc-file-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); font-size: 12px; }
.ws-mc-file-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mc-file-chip-size { color: var(--text3); font-size: 11px; }
.ws-mc-file-chip-rm { border: none; background: transparent; color: var(--text3); cursor: pointer; display: inline-flex; }
.ws-mc-file-chip-rm:hover { color: #b91c1c; }
/* Légende niveau/impact */
.ws-mc-impact-legend { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.ws-mc-impact-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); }
/* Auteur : affichage discret en lecture seule (auto-rempli, non modifiable). */
.ws-mc-author-ro { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); padding: 2px 0; }
.ws-mc-d-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.ws-mc-author-ro-name { font-weight: 600; color: var(--text); }
.ws-mc-author-ro-role { color: var(--text3); }
.ws-mc-author-ro-role::before { content: "·"; margin-right: 6px; color: var(--text3); }
.ws-mc-flabel-auto, .ws-mc-flabel-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text3); font-size: 10.5px; }
.ws-mc-radio-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ws-mc-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); cursor: pointer; }
/* Pied de modale */
.ws-mc-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ws-mc-form-foot .ws-mc-draft { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); cursor: pointer; }
.ws-mc-form-foot-spacer { flex: 1; }
.ws-mc-form-err { color: #991b1b; font-size: 12.5px; margin: 12px 0 0; }

/* ── Mini-toast ── */
.ws-mc-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--text); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 1100;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.ws-mc-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive : passe en 1-2 colonnes sur écrans étroits ── */
@media (max-width: 1280px) {
  .ws-mc-kpis { grid-template-columns: repeat(3, 1fr); }
  .ws-mc-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
/* Sous 1100px : on empile (hauteur auto — sizeGrid ne fixe plus la hauteur). */
@media (max-width: 1100px) {
  .ws-mc-grid { grid-template-columns: 1fr; height: auto !important; align-items: start; }
  .ws-mc-feed, .ws-mc-right, .ws-mc-detail { height: auto; }
  .ws-mc-feed-body { max-height: 60vh; }
  .ws-mc-d-pad { overflow: visible; }
}
@media (max-width: 900px) {
  .ws-mc-kpis { grid-template-columns: repeat(2, 1fr); }
  .ws-mc-form-2col { grid-template-columns: 1fr; }
  .ws-mc-type-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Stage Arbitrages — refonte fidélité maquette (#200, écran v2)
   Header (titre + Exporter) + tabs + KPI enrichis (icône + %) + toolbar +
   layout 2-col (table riche | side panel persistant) + pager + CTA footer.
   La modale slideOverPanel est remplacée par un side panel intégré au flux
   (pas overlay) conformément à la maquette.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Header (titre + info + sous-titre + bouton Exporter à droite) ── */
.ws-arb-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 16px 0 0;
}
.ws-arb-header-titles { flex: 1; min-width: 0; }
.ws-arb-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 700; color: var(--text); margin: 0;
}
.ws-arb-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--text3);
  cursor: help;
}
.ws-arb-sub { font-size: 13px; color: var(--text2); margin: 4px 0 0; }
.ws-arb-header-actions { flex-shrink: 0; }

/* ── Tabs (Vue synthétique / Vue par décisions liées) ── */
.ws-arb-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin: 12px 0 16px; flex-wrap: wrap;
}
.ws-arb-tab {
  background: transparent; border: none; padding: 10px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ws-arb-tab:hover { color: var(--text); }
.ws-arb-tab.is-active,
.ws-arb-tab[aria-selected="true"] {
  color: var(--brand-2); border-bottom-color: var(--brand);
}

/* ── KPI enrichis (5 cards : icône à gauche + chiffre + label + % à droite) ── */
.ws-arb-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin: 0 0 16px;
}
@media (max-width: 1100px) { .ws-arb-kpis { grid-template-columns: repeat(2, 1fr); } }
.ws-arb-kpi {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.ws-arb-kpi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  flex-shrink: 0;
  background: var(--bg3); color: var(--text2);
}
.ws-arb-kpi--green  .ws-arb-kpi-ic { background: #dcfce7; color: #15803d; }
.ws-arb-kpi--orange .ws-arb-kpi-ic { background: #ffedd5; color: #c2410c; }
.ws-arb-kpi--blue   .ws-arb-kpi-ic { background: #dbeafe; color: #1d4ed8; }
.ws-arb-kpi--gray   .ws-arb-kpi-ic { background: var(--bg3); color: var(--text2); }
.ws-arb-kpi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-arb-kpi-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.ws-arb-kpi-lbl {
  font-size: 12.5px; color: var(--text2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-arb-kpi-pct {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: var(--text3);
}

/* ── Toolbar (search pleine largeur + 3 ui-select + bouton Filtres) ──
   Iso .docs-filters (flex wrap, recherche pousse les filtres à droite). */
.ws-arb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.ws-arb-toolbar .ui-search { flex: 1 1 280px; min-width: 220px; }

/* ── Layout 2-col : main (table + pager) | side panel détail persistant ── */
.ws-arb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ws-arb-layout:has(.ws-arb-side:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) 380px;
}
@media (max-width: 1100px) {
  .ws-arb-layout:has(.ws-arb-side:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}
.ws-arb-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── Table riche (iso .home-table + colonnes spéciales) ── */
.ws-arb-table-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
/* Aligné sur .annuaire-table (#210). */
.ws-arb-table { width: 100%; border-collapse: collapse; }
.ws-arb-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;
}
.ws-arb-th-cb { width: 36px; padding-left: 16px; padding-right: 4px; }
.ws-arb-th-actions { width: 36px; }
.ws-arb-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
}
.ws-arb-table tbody tr { cursor: pointer; transition: background .12s; }
.ws-arb-table tbody tr:hover td { background: var(--bg); }
.ws-arb-table tbody tr.is-active td,
.ws-arb-table tbody tr.is-selected td { background: var(--brand-soft); }
.ws-arb-table tbody tr.is-active:hover td,
.ws-arb-table tbody tr.is-selected:hover td { background: var(--brand-soft); }
.ws-arb-table tbody tr:last-child td { border-bottom: none; }

.ws-arb-cb { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }

/* Cell « Arbitrage » : icône colorée + titre + description + chip cellule sous le bloc. */
.ws-arb-row-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ws-arb-row-ic {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-2);
}
.ws-arb-row-ic--red    { background: #fee2e2; color: #b91c1c; }
.ws-arb-row-ic--orange { background: #ffedd5; color: #c2410c; }
.ws-arb-row-ic--purple { background: #f3e8ff; color: #7e22ce; }
.ws-arb-row-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.ws-arb-row-ic--green  { background: #dcfce7; color: #15803d; }
.ws-arb-row-ic--slate  { background: #e2e8f0; color: #475569; }
.ws-arb-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-arb-row-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ws-arb-row-desc {
  font-size: 12px; color: var(--text2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-arb-row-cell {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg); color: var(--text2);
  border: 1px solid var(--border);
}
.ws-arb-row-decision {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ws-arb-row-decision-link {
  font-size: 12.5px; font-weight: 600; color: var(--brand-2);
  text-decoration: none; white-space: normal;
}
.ws-arb-row-decision-link:hover { text-decoration: underline; }
.ws-arb-row-decision-date { font-size: 11px; color: var(--text3); }
.ws-arb-row-impact { display: inline-flex; align-items: center; gap: 4px; }
.ws-arb-row-date { font-size: 12px; color: var(--text2); white-space: nowrap; }
.ws-arb-row-date-time { display: block; color: var(--text3); font-size: 11px; }
.ws-arb-row-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent; color: var(--text3);
  cursor: pointer;
}
.ws-arb-row-menu:hover { background: var(--bg3); color: var(--text); }

/* Chips d'état réutilisés (statuts arbitrage + priorités).
   Padding/font alignés sur .home-badge (3px 11px / 11.5px / 600). */
.ws-arb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.ws-arb-chip svg { flex-shrink: 0; }
.ws-arb-chip--applique     { background: #dcfce7; color: #15803d; }
.ws-arb-chip--en-cours     { background: #fef3c7; color: #92400e; }
.ws-arb-chip--en-attente   { background: #dbeafe; color: #1d4ed8; }
.ws-arb-chip--non-applicable { background: #e5e7eb; color: #4b5563; }
.ws-arb-chip-prio--elevee  { background: #fee2e2; color: #991b1b; }
.ws-arb-chip-prio--moderee { background: #ffedd5; color: #c2410c; }
.ws-arb-chip-prio--faible  { background: #dbeafe; color: #1d4ed8; }
/* Chips impact : 4 niveaux (très-fort / fort / moyen / faible) avec flèches. */
.ws-arb-chip-impact--tres-fort { background: #fee2e2; color: #991b1b; }
.ws-arb-chip-impact--fort      { background: #fee2e2; color: #b91c1c; }
.ws-arb-chip-impact--moyen     { background: #ffedd5; color: #c2410c; }
.ws-arb-chip-impact--faible    { background: #dbeafe; color: #1d4ed8; }

/* ── Pager (sous la table, dans le body de .ws-arb-table-wrap)
   Iso .ws-pa-pager (alignement homogène). */
.ws-arb-pager {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--bg2);
  font-size: 12.5px; color: var(--text2);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -1px;
}
.ws-arb-pager-info { margin-right: auto; }
.ws-arb-pager-size { display: flex; align-items: center; gap: 8px; }
.ws-arb-pager-nums { display: flex; gap: 4px; }
.ws-arb-pager-num {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg2);
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text);
  padding: 0 10px; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.ws-arb-pager-num:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-2); }
.ws-arb-pager-num.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.ws-arb-pager-num:disabled { opacity: .4; cursor: not-allowed; }

/* CTA footer « + Nouvel arbitrage » sous le layout. */
.ws-arb-footer-cta { display: flex; justify-content: flex-end; margin: 12px 0 0; }

/* ── Side panel détail (persistant, intégré au layout, pas overlay) ──
   Fermé via [hidden] sur .ws-arb-side → la grille redevient 1-col. */
.ws-arb-side {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius);
  align-self: stretch; min-width: 0;
  display: flex; flex-direction: column;
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}
.ws-arb-side[hidden] { display: none; }
.ws-arb-side-body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 13px; color: var(--text);
}
.ws-arb-side-head {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.ws-arb-side-head-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.ws-arb-side-close {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ws-arb-side-close:hover { background: var(--bg3); color: var(--text); }
.ws-arb-side-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.ws-arb-side-desc { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 0; }
/* Grille label/value pour les attributs. */
.ws-arb-side-grid { display: flex; flex-direction: column; gap: 10px; }
.ws-arb-side-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  align-items: baseline;
  font-size: 12.5px;
}
.ws-arb-side-row-lbl { color: var(--text2); font-weight: 500; }
.ws-arb-side-row-val { color: var(--text); font-weight: 500; word-break: break-word; }
.ws-arb-side-row-val a { color: var(--brand-2); text-decoration: none; }
.ws-arb-side-row-val a:hover { text-decoration: underline; }
/* Sections (Impact / Pièces jointes / Historique). */
.ws-arb-side-section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.ws-arb-side-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text); margin: 0;
}
.ws-arb-side-section-info { color: var(--text3); display: inline-flex; }
/* Pièces jointes : cards horizontales (icône + nom + taille + download). */
.ws-arb-side-attach { display: flex; flex-direction: column; gap: 8px; }
.ws-arb-side-attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
}
.ws-arb-side-attach-ic {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--brand-2);
  border: 1px solid var(--border);
}
.ws-arb-side-attach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-arb-side-attach-name {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-arb-side-attach-meta { font-size: 11px; color: var(--text3); }
.ws-arb-side-attach-dl {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: transparent; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ws-arb-side-attach-dl:hover { background: var(--bg3); color: var(--text); }
/* Historique : timeline simple (dot + texte). */
.ws-arb-side-history { display: flex; flex-direction: column; gap: 12px; }
.ws-arb-side-history-item {
  display: flex; gap: 10px;
  font-size: 12.5px;
}
.ws-arb-side-history-dot {
  flex-shrink: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  margin-top: 4px;
}
.ws-arb-side-history-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-arb-side-history-when { color: var(--text2); font-weight: 600; }
.ws-arb-side-history-text { color: var(--text); }

/* Barre d'actions sticky bas dans le body du side panel.
   Marges négatives = padding `.ws-arb-side-body` (18px 20px). */
.ws-arb-detail-bar {
  position: sticky; bottom: -18px;
  background: var(--bg2); border-top: 1px solid var(--border);
  margin: 14px -20px -18px; padding: 12px 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ws-arb-detail-btn {
  flex: 1; min-width: 110px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text); font-size: 13.5px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.ws-arb-detail-btn:hover { background: var(--bg); border-color: var(--border2); }
.ws-arb-detail-btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.ws-arb-detail-btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.ws-arb-detail-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Helper a11y (visually-hidden) — déclaré si non présent. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stage Plan d'actions (lot 2.5 / #140) — KPI 4 statuts + tableau riche
   + filtres + pagination client. Réutilise .ws-arb-table-wrap (cadre table
   commun) et .ws-mc2-chip (chips filtres communs maincourante).
   ────────────────────────────────────────────────────────────────────────── */
.ws-plan-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.ws-plan-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.ws-plan-kpi span { font-size: 22px; font-weight: 700; color: var(--text); }
.ws-plan-kpi label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.ws-plan-kpi--neutral span { color: var(--text3); }
.ws-plan-kpi--orange span  { color: #c2410c; }
.ws-plan-kpi--green span   { color: #15803d; }
.ws-plan-kpi--red span     { color: #b91c1c; }

/* Chips priorité/statut tâches (4 niveaux/statuts chacun) */
.ws-plan-chip {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ws-plan-chip-prio--elevee  { background: #fee2e2; color: #991b1b; }
.ws-plan-chip-prio--moderee { background: #fef3c7; color: #92400e; }
.ws-plan-chip-prio--normale { background: #e0e7ff; color: #3730a3; }
.ws-plan-chip-prio--basse   { background: #dbeafe; color: #1d4ed8; }
.ws-plan-chip--a-demarrer   { background: #e5e7eb; color: #4b5563; }
.ws-plan-chip--en-cours     { background: #fef3c7; color: #92400e; }
.ws-plan-chip--terminee     { background: #dcfce7; color: #15803d; }
.ws-plan-chip--en-retard    { background: #fee2e2; color: #991b1b; }

/* Barre d'avancement inline (cell tableau) — distincte du composant
   progressBar du lot 0.6 utilisé dans le side panel. */
.ws-plan-progress {
  display: flex; align-items: center; gap: 8px; min-width: 110px;
}
.ws-plan-progress-bar {
  flex: 1; height: 6px; background: var(--bg3); border-radius: 999px; overflow: hidden;
}
.ws-plan-progress-fill {
  height: 100%; background: var(--brand); border-radius: 999px; transition: width .2s;
}
.ws-plan-progress-pct { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* Pagination */
.ws-plan-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px 0 4px; font-size: 13px;
}
.ws-plan-pager-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.ws-plan-pager-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--brand); color: var(--brand-2); }
.ws-plan-pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.ws-plan-pager-info { color: var(--text2); font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Communication (lots 2.6+2.7+2.8 / #142) — 4 onglets internes
   ────────────────────────────────────────────────────────────────────────── */
.ws-comm-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin: 12px 0 16px; padding: 0; flex-wrap: wrap;
}
.ws-comm-tab {
  background: transparent; border: none; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ws-comm-tab:hover { color: var(--text); }
.ws-comm-tab.is-active { color: var(--brand-2); border-bottom-color: var(--brand); }
.ws-comm-tab[aria-selected="true"] { color: var(--brand-2); }

.ws-comm-pane { display: block; }
.ws-comm-pane[hidden] { display: none; }

/* Onglet Vue d'ensemble */
.ws-comm-vue-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
}
@media (max-width: 900px) {
  .ws-comm-vue-grid { grid-template-columns: 1fr; }
}
.ws-comm-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.ws-comm-card-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px;
}
.ws-comm-card-body { font-size: 13px; color: var(--text2); }
.ws-comm-card-item {
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
}
.ws-comm-card-item:last-child { border-bottom: none; }
.ws-comm-card-item:hover { background: var(--bg); margin: 0 -8px; padding: 8px; border-radius: 8px; border-bottom: 1px dashed var(--border); }
.ws-comm-card-item-main { flex: 1; min-width: 0; }
.ws-comm-card-item-title { font-weight: 600; color: var(--text); display: block; }
.ws-comm-card-item-sub { font-size: 11px; color: var(--text3); display: block; margin-top: 2px; }

/* Chips statuts communications (4 statuts) */
.ws-comm-chip {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ws-comm-chip--brouillon      { background: #e5e7eb; color: #4b5563; }
.ws-comm-chip--en-preparation { background: #fef3c7; color: #92400e; }
.ws-comm-chip--diffusee       { background: #dcfce7; color: #15803d; }
.ws-comm-chip--archivee       { background: #f3f4f6; color: #6b7280; }

/* Onglet Diffusions+destinataires : header pour audiences */
.ws-comm-aud-header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px 0 12px; gap: 12px;
}
.ws-comm-aud-header .ws-comm-card-title { margin: 0; }

/* Onglet Demandes médias : header */
.ws-comm-medias-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0; gap: 12px;
}
.ws-comm-medias-head .ws-mc2-sub { margin: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Points calendrier (lot 2.10 / #146) — vue jour + listes
   ────────────────────────────────────────────────────────────────────────── */
.ws-points-controls {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin: 12px 0 16px; flex-wrap: wrap;
}
.ws-points-day-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-points-day-input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 13px; background: var(--bg2); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ws-points-day-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-points-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
}
@media (max-width: 900px) {
  .ws-points-grid { grid-template-columns: 1fr; }
}
.ws-points-day-col, .ws-points-list-col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.ws-points-day-body { position: relative; min-height: 480px; }
.ws-points-day-hour {
  display: grid; grid-template-columns: 50px 1fr; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text3); padding: 6px 0;
  min-height: 28px;
}
.ws-points-day-hour-label { color: var(--text3); padding-top: 1px; }
.ws-points-day-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-points-evt {
  background: var(--brand-soft); border: 1px solid var(--brand);
  color: var(--text); padding: 6px 10px; border-radius: 8px;
  font-size: 12px; cursor: pointer; transition: background .12s;
  display: flex; gap: 6px; align-items: center; max-width: 100%;
}
.ws-points-evt:hover { background: var(--brand); color: #fff; }
.ws-points-evt-type {
  font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: var(--card); color: var(--text2); border: 1px solid var(--border);
}
.ws-points-evt-time { font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.ws-points-evt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ws-points-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; }
.ws-points-list-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ws-points-list-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.ws-points-list-time {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--brand-2);
  font-variant-numeric: tabular-nums; min-width: 75px;
}
.ws-points-list-main { flex: 1; min-width: 0; }
.ws-points-list-title { font-weight: 600; color: var(--text); font-size: 13px; display: block; }
.ws-points-list-sub { font-size: 11px; color: var(--text3); display: block; margin-top: 2px; }
.ws-points-count {
  font-size: 11px; color: var(--text3); font-weight: 500;
  background: var(--bg3); padding: 1px 8px; border-radius: 999px; vertical-align: middle;
}

/* Chips statut points */
.ws-points-chip {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ws-points-chip--planifie { background: #dbeafe; color: #1d4ed8; }
.ws-points-chip--termine  { background: #dcfce7; color: #15803d; }
.ws-points-chip--annule   { background: #fee2e2; color: #991b1b; }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Chronologie (lot 2.11 / #148) — frise 4 phases + timeline agrégée
   ────────────────────────────────────────────────────────────────────────── */
.ws-chrono-phases { margin: 16px 0; }

.ws-chrono-timeline {
  position: relative; padding: 16px 0 16px 32px;
  border-left: 2px solid var(--border); margin-left: 12px;
  max-height: 720px; overflow: auto;
}
.ws-chrono-evt {
  position: relative; padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ws-chrono-evt:hover { border-color: var(--brand); background: var(--brand-soft); }
.ws-chrono-evt::before {
  content: ''; position: absolute; left: -39px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--card);
  box-shadow: 0 0 0 2px var(--brand);
}
.ws-chrono-evt--maincourante::before  { background: #1d4ed8; box-shadow: 0 0 0 2px #1d4ed8; }
.ws-chrono-evt--arbitrage::before     { background: #c2410c; box-shadow: 0 0 0 2px #c2410c; }
.ws-chrono-evt--tache::before         { background: #15803d; box-shadow: 0 0 0 2px #15803d; }
.ws-chrono-evt--communication::before { background: #7e22ce; box-shadow: 0 0 0 2px #7e22ce; }
.ws-chrono-evt--point::before         { background: #b45309; box-shadow: 0 0 0 2px #b45309; }

.ws-chrono-evt-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text3);
}
.ws-chrono-evt-time { font-weight: 700; color: var(--brand-2); font-variant-numeric: tabular-nums; }
.ws-chrono-evt-source {
  font-size: 10px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px;
  background: var(--bg3); color: var(--text2); letter-spacing: .04em; font-weight: 600;
}
.ws-chrono-evt-source--maincourante  { background: #dbeafe; color: #1d4ed8; }
.ws-chrono-evt-source--arbitrage     { background: #ffedd5; color: #c2410c; }
.ws-chrono-evt-source--tache         { background: #dcfce7; color: #15803d; }
.ws-chrono-evt-source--communication { background: #f3e8ff; color: #7e22ce; }
.ws-chrono-evt-source--point         { background: #fef3c7; color: #b45309; }
.ws-chrono-evt-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  margin: 4px 0 0; line-height: 1.4;
}
.ws-chrono-evt-meta {
  font-size: 11px; color: var(--text3); margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stage Plan tactique (lot 3.2 / #154) — 4 colonnes phases × axes (Kanban)
   ────────────────────────────────────────────────────────────────────────── */
/* Carré blanc (#323) : conteneur unique des 4 colonnes de phases. */
.ws-tact-board-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-top: 16px;
}
/* Cadre des colonnes un poil plus marqué dans le carré blanc (panneau de
   panneaux) — sinon blanc-sur-blanc trop discret. */
.ws-tact-board-wrap .ws-tact-col { border-color: var(--border2); }
/* La barre de filtres vit DANS le carré blanc (#323) : pas de boîte dans la
   boîte — fond transparent, sans bordure, séparée du board par une marge. */
.ws-tact-board-wrap .ws-tact-toolbar {
  margin: 0 0 14px; background: transparent; border: none; padding: 0;
}
.ws-tact-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1100px) {
  .ws-tact-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .ws-tact-board { grid-template-columns: 1fr; }
}
.ws-tact-col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; min-height: 240px;
}
.ws-tact-col-head {
  display: flex; align-items: flex-start;
  gap: 10px; margin-bottom: 8px;
}
.ws-tact-col-headings { flex: 1; min-width: 0; }
.ws-tact-col-title {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .03em; margin: 0; line-height: 1.3;
}
/* Icône colorée par phase (accent = même couleur que le bord supérieur). */
.ws-tact-col-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; margin-top: 1px;
}
.ws-tact-col--gestion-incident .ws-tact-col-icon { background: #fde8e8; color: #dc2626; }
.ws-tact-col--stabilisation    .ws-tact-col-icon { background: #ffedd5; color: #ea580c; }
.ws-tact-col--retablissement   .ws-tact-col-icon { background: #dbeafe; color: #2563eb; }
.ws-tact-col--retour-normale   .ws-tact-col-icon { background: #dcfce7; color: #16a34a; }
/* Badge de statut de phase (dérivé des axes). */
.ws-tact-phase-badge {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.ws-tact-phase-badge--planifie  { background: #eef2ff; color: #4338ca; }
.ws-tact-phase-badge--engage    { background: #fef3c7; color: #92400e; }
.ws-tact-phase-badge--atteint   { background: #dcfce7; color: #15803d; }
.ws-tact-col-pitch {
  font-size: 11.5px; color: var(--text3); line-height: 1.45;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ws-tact-col-count {
  background: var(--bg3); color: var(--text2); padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.ws-tact-cards { display: flex; flex-direction: column; gap: 8px; }
.ws-tact-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ws-tact-card:hover { border-color: var(--brand); background: var(--brand-soft); }

/* Drag & drop entre colonnes phase (#236) — natif HTML5. Même pattern que
   Moyens (#234) : curseur grab actif uniquement pour sysadmin (l'attribut
   draggable est retiré au runtime pour les autres rôles). */
.ws-tact-card[draggable="true"] { cursor: grab; }
.ws-tact-card[draggable="true"]:active { cursor: grabbing; }
.ws-tact-card.is-dragging { opacity: .5; }
.ws-tact-cards.is-drop-target {
  background: var(--brand-soft);
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
  border-radius: 8px;
}
.ws-tact-card-head {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--text3); margin-bottom: 6px;
}
.ws-tact-chip {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ws-tact-chip--planifie  { background: #dbeafe; color: #1d4ed8; }
.ws-tact-chip--engage    { background: #fef3c7; color: #92400e; }
.ws-tact-chip--atteint   { background: #dcfce7; color: #15803d; }
.ws-tact-chip--abandonne { background: #fee2e2; color: #991b1b; }
.ws-tact-card-title {
  font-weight: 600; color: var(--text); font-size: 13.5px;
  line-height: 1.35; margin: 0;
}
.ws-tact-card-meta {
  font-size: 11px; color: var(--text3); margin-top: 6px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.ws-tact-card-actions-count {
  display: inline-flex; align-items: center; gap: 4px;
}
.ws-tact-col-empty {
  font-size: 12px; color: var(--text3); font-style: italic;
  padding: 8px 4px; text-align: center;
}

/* Polish Plan tactique (post-v1.0.0 / #190) — KPI header + toolbar filtres
   + colonnes colorées par phase + progress bar actions par card. */
.ws-tact-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 12px 0;
}
.ws-tact-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.ws-tact-kpi span { font-size: 22px; font-weight: 700; color: var(--text); }
.ws-tact-kpi label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.ws-tact-kpi--green  span { color: #15803d; }
.ws-tact-kpi--orange span { color: #c2410c; }
.ws-tact-kpi--blue   span { color: #1d4ed8; }

.ws-tact-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin: 12px 0;
}
.ws-tact-toolbar .ui-search { flex: 1 1 280px; min-width: 200px; }
/* .ws-tact-select / .ws-tact-search supprimés : la toolbar consomme désormais
   les primitives partagées .ui-select / .ui-search (homogènes app principale). */

/* Accent de phase (#321) : porté par l'icône + le titre uniquement, comme la
   maquette. Pas de bandeau coloré en haut de colonne (charte console : cards
   blanches neutres, accent réservé aux éléments sémantiques). */
.ws-tact-col--gestion-incident .ws-tact-col-title { color: #b3261e; }
.ws-tact-col--stabilisation    .ws-tact-col-title { color: #c2410c; }
.ws-tact-col--retablissement   .ws-tact-col-title { color: #1d4ed8; }
.ws-tact-col--retour-normale   .ws-tact-col-title { color: #15803d; }
.ws-tact-col-progress {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.ws-tact-col-progress-label {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text3);
}
.ws-tact-col-progress-label strong { color: var(--text); font-weight: 700; }
.ws-tact-col-progress-track {
  height: 4px; background: var(--bg3); border-radius: 999px; overflow: hidden;
}
.ws-tact-col-progress-fill {
  height: 100%; background: var(--brand-2); border-radius: 999px;
  transition: width .3s ease;
}

/* Progress bar actions dans la card axe. */
.ws-tact-card-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.ws-tact-card-progress-track {
  flex: 1; height: 4px; background: var(--bg3); border-radius: 999px; overflow: hidden;
}
.ws-tact-card-progress-fill {
  height: 100%; background: var(--brand); border-radius: 999px;
  transition: width .3s ease;
}
.ws-tact-card-progress-pct {
  font-size: 10px; font-weight: 700; color: var(--text2); min-width: 30px; text-align: right;
}

/* Side panel — actions inline */
.ws-tact-actions { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.ws-tact-action {
  display: flex; gap: 8px; align-items: center;
  padding: 9px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px;
}
.ws-tact-action-status {
  flex-shrink: 0; cursor: pointer;
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border2); background: var(--card);
  display: grid; place-items: center;
}
.ws-tact-action-status.is-done {
  background: var(--brand); border-color: var(--brand);
}
.ws-tact-action-status.is-done svg { color: #fff; }
.ws-tact-action-libelle { flex: 1; min-width: 0; }
.ws-tact-action-libelle.is-done { text-decoration: line-through; color: var(--text3); }
.ws-tact-action-del {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 6px;
}
.ws-tact-action-del:hover { color: #b91c1c; }
.ws-tact-action-add {
  display: flex; gap: 8px; margin-top: 4px;
}
.ws-tact-action-add input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; background: var(--bg2); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.ws-tact-action-add input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-tact-action-add button {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  padding: 9px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.ws-tact-action-add button:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* Refonte maquette (#317) — sections objectifs/axes, cartes restylées,
   légende de statuts, rangée backlog. */

/* Label de section (OBJECTIFS CLES / AXES DE TRAVAIL) dans une colonne. */
.ws-tact-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 4px 0 8px;
}
.ws-tact-section-label--axes { margin-top: 14px; }
.ws-tact-section-label .ws-tact-col-count { font-size: 10px; }

/* Objectifs clés — pastille de statut cliquable + libellé. */
.ws-tact-objs { display: flex; flex-direction: column; gap: 7px; }
.ws-tact-obj { display: flex; align-items: flex-start; gap: 8px; }
.ws-tact-obj-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center; padding: 0; border: 0;
  background: var(--bg3); color: var(--text3);
}
button.ws-tact-obj-check { cursor: pointer; transition: transform .1s, box-shadow .12s; }
button.ws-tact-obj-check:hover { box-shadow: 0 0 0 3px var(--brand-tint); }
button.ws-tact-obj-check:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-tact-obj-check--engage    { background: #d97706; color: #fff; }
.ws-tact-obj-check--atteint   { background: #16a34a; color: #fff; }
.ws-tact-obj-check--abandonne { background: #dc2626; color: #fff; }
.ws-tact-obj-text {
  font-size: 12.5px; color: var(--text); line-height: 1.4; min-width: 0;
}

/* Carte axe restylée (pastille statut + corps + libellé statut à droite). */
.ws-tact-card-row { display: flex; align-items: flex-start; gap: 9px; }
.ws-tact-card-dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 999px; margin-top: 5px;
  background: var(--text3);
}
.ws-tact-card-dot--planifie  { background: #2563eb; }
.ws-tact-card-dot--engage    { background: #d97706; }
.ws-tact-card-dot--atteint   { background: #16a34a; }
.ws-tact-card-dot--abandonne { background: #dc2626; }
.ws-tact-card-body { flex: 1; min-width: 0; }
.ws-tact-card-sub {
  font-size: 11.5px; color: var(--text3); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-tact-card-statut {
  flex-shrink: 0; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
}
.ws-tact-card-statut--planifie  { background: #dbeafe; color: #1d4ed8; }
.ws-tact-card-statut--engage    { background: #fef3c7; color: #92400e; }
.ws-tact-card-statut--atteint   { background: #dcfce7; color: #15803d; }
.ws-tact-card-statut--abandonne { background: #fee2e2; color: #991b1b; }

/* Légende des statuts dans la toolbar. */
.ws-tact-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-left: auto; font-size: 11.5px; color: var(--text2);
}
.ws-tact-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ws-tact-legend-dot { width: 9px; height: 9px; border-radius: 999px; }
.ws-tact-legend-dot--planifie  { background: #2563eb; }
.ws-tact-legend-dot--engage    { background: #d97706; }
.ws-tact-legend-dot--atteint   { background: #16a34a; }
.ws-tact-legend-dot--abandonne { background: #dc2626; }

/* Rangée backlog (chantier à planifier). */
.ws-tact-backlog {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 16px;
}
.ws-tact-backlog-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ws-tact-backlog-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-2);
}
.ws-tact-backlog-title {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .03em; margin: 0;
}
.ws-tact-backlog-sub { font-size: 11.5px; color: var(--text3); margin: 2px 0 0; }
.ws-tact-backlog-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
.ws-tact-backlog-cards .ws-tact-card { background: var(--bg); }
.ws-tact-backlog-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; border: 1.5px dashed var(--border2); border-radius: 8px;
  background: transparent; color: var(--brand-2); font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ws-tact-backlog-add span { font-size: 17px; line-height: 1; }
.ws-tact-backlog-add:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Salle de crise (mode ordi) (lot 3.5 / #160) — 3 colonnes + 4 onglets
   ────────────────────────────────────────────────────────────────────────── */
/* Carré blanc (#328) : conteneur unique de tout le contenu salle de crise,
   aligné sur la charte console (card blanche, neutres chauds). */
.ws-ordi-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-top: 16px;
}
.ws-ordi-wrap .ws-ordi-phases { margin-top: 0; }
/* Panneaux internes : cadre un peu plus marqué (panneau de panneaux sur blanc). */
.ws-ordi-wrap .ws-ordi-focus,
.ws-ordi-wrap .ws-ordi-side,
.ws-ordi-wrap .ws-ordi-main { border-color: var(--border2); }
.ws-ordi-phases { margin: 12px 0 16px; }
.ws-ordi-grid {
  display: grid; grid-template-columns: 260px 1fr 260px; gap: 16px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .ws-ordi-grid { grid-template-columns: 1fr; }
}
.ws-ordi-focus, .ws-ordi-side {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; height: fit-content;
}
.ws-ordi-main {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; min-height: 360px;
}
.ws-ordi-pane { display: block; }
.ws-ordi-pane[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Salle de crise — war room 3 colonnes (#330). Charte console : cards
   blanches, neutres chauds, accents sémantiques (badges de type).
   ────────────────────────────────────────────────────────────────────────── */
.ws-sdc-grid {
  /* #334 : flux (gauche) élargi ; impacts (droite) ~1,5x plus étroit.
     #342 : hauteur calée sur le viewport (sizeGrid JS) → colonnes plein écran,
     scroll interne des feeds / du corps central. */
  display: grid; grid-template-columns: 1.4fr 1fr 0.66fr; gap: 16px; margin-top: 16px;
  align-items: stretch; min-height: 0;
}
@media (max-width: 1180px) {
  .ws-sdc-grid { grid-template-columns: 1fr; height: auto !important; }
  .ws-sdc-feed, .ws-sdc-col-body { max-height: 70vh; }
}
.ws-sdc-col {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.ws-sdc-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px; flex-shrink: 0;
}
.ws-sdc-col-title { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.ws-sdc-col-title span { color: var(--text3); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ws-sdc-phase-now { font-size: 11.5px; font-weight: 600; color: var(--brand-2); }
.ws-sdc-sub { font-size: 10.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }

/* Feed scrollable (colonnes flux + impact média) — remplit la hauteur dispo. */
.ws-sdc-feed { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Corps central (plan tactique) — défile si le contenu dépasse la hauteur. */
.ws-sdc-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Colonne flux (#334) : aligne sur la timeline Main courante (.ws-mc-tl-*) —
   pas de gap pour que la ligne de temps verticale reste continue. */
.ws-sdc-feed--timeline { gap: 0; }

/* Axes stratégiques (synthèse plan tactique) */
.ws-sdc-axes { display: flex; flex-direction: column; gap: 12px; }
.ws-sdc-axe { display: flex; align-items: flex-start; gap: 10px; }
.ws-sdc-axe-ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--bg3); }
.ws-sdc-axe-ic--gestion-incident { background: #fde8e8; }
.ws-sdc-axe-ic--stabilisation    { background: #ffedd5; }
.ws-sdc-axe-ic--retablissement   { background: #dbeafe; }
.ws-sdc-axe-ic--retour-normale   { background: #dcfce7; }
.ws-sdc-axe-body { flex: 1; min-width: 0; }
.ws-sdc-axe-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ws-sdc-axe-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ws-sdc-axe-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ws-sdc-axe-prog-track { flex: 1; height: 5px; background: var(--bg3); border-radius: 999px; overflow: hidden; }
.ws-sdc-axe-prog-fill { height: 100%; background: var(--brand-2); border-radius: 999px; transition: width .3s ease; }
.ws-sdc-axe-prog-pct { font-size: 11px; font-weight: 700; color: var(--text2); min-width: 34px; text-align: right; }
.ws-sdc-chip { flex-shrink: 0; align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }

/* Actions en cours : table standard .ws-arb-table (#332) ; surcharge échéance. */
.ws-sdc-act-table { font-size: 12px; }
.ws-sdc-act-ech { color: #b91c1c; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Filtre .ui-select dans l'en-tête de colonne war-room. */
.ws-sdc-filter { flex-shrink: 0; }

/* Flux externe (impacts & information) */
.ws-sdc-ext-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; border-radius: 8px; }
.ws-sdc-ext-item:last-child { border-bottom: none; }
a.ws-sdc-ext-item:hover { background: var(--brand-soft); }
a.ws-sdc-ext-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-sdc-ext-src { font-size: 10.5px; font-weight: 600; color: var(--text3); margin-top: 4px; }
.ws-sdc-ext-time { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; width: 40px; }
.ws-sdc-ext-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--brand-soft); color: var(--brand-2); }
.ws-sdc-ext-body { flex: 1; min-width: 0; }
.ws-sdc-ext-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.ws-sdc-ext-desc { font-size: 11.5px; color: var(--text3); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-sdc-ext-badge { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ws-sdc-ext-badge--media       { background: #fee2e2; color: #b91c1c; }
.ws-sdc-ext-badge--autorite    { background: #dbeafe; color: #1d4ed8; }
.ws-sdc-ext-badge--client      { background: #dcfce7; color: #15803d; }
.ws-sdc-ext-badge--prestataire { background: #f3e8ff; color: #7e22ce; }
.ws-sdc-ext-badge--presse      { background: #fee2e2; color: #b91c1c; }
.ws-sdc-ext-badge--twitter     { background: #e0f2fe; color: #0369a1; }
.ws-sdc-ext-badge--autre       { background: var(--bg3); color: var(--text2); }

/* ──────────────────────────────────────────────────────────────────────────
   Paramètres → Veille média (#340) — listes éditables flux presse + comptes X.
   ────────────────────────────────────────────────────────────────────────── */
.veille-cfg-banner { font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--border); }
.veille-cfg-banner--ok  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.veille-cfg-banner--off { background: var(--bg3); color: var(--text2); }
.veille-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .veille-cfg-grid { grid-template-columns: 1fr; } }
.veille-cfg-h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.veille-cfg-add { display: flex; gap: 8px; margin-bottom: 10px; }
.veille-cfg-add input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--bg2); color: var(--text);
}
.veille-cfg-add input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.veille-cfg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.veille-cfg-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.veille-cfg-item-val { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veille-cfg-item-del {
  flex-shrink: 0; background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 4px;
}
.veille-cfg-item-del:hover { color: #b91c1c; }
.veille-cfg-empty { font-size: 12px; color: var(--text3); font-style: italic; padding: 4px 2px; }
.veille-cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.veille-cfg-foot-actions { display: flex; gap: 10px; margin-left: auto; }
.veille-cfg-err { color: #b91c1c; font-size: 12.5px; margin: 0; }
/* Section mots-clés (#346) : note + chips en ligne. */
.veille-cfg-kw { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.veille-cfg-note { font-size: 12px; color: var(--text3); margin: 0 0 10px; line-height: 1.45; }
.veille-cfg-list--inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.veille-cfg-list--inline .veille-cfg-item { width: auto; padding: 5px 6px 5px 11px; }
.veille-cfg-list--inline .veille-cfg-item-val { flex: 0 0 auto; }

.ws-ordi-focus-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 13px;
}
.ws-ordi-focus-card strong {
  display: block; font-size: 13.5px; color: var(--text); margin-bottom: 6px;
}
.ws-ordi-focus-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 12px; color: var(--text2);
  border-top: 1px dashed var(--border);
}
.ws-ordi-focus-row:first-of-type { border-top: none; }

.ws-ordi-side-item {
  padding: 8px 0; font-size: 12px; color: var(--text2);
  border-bottom: 1px dashed var(--border);
}
.ws-ordi-side-item:last-child { border-bottom: none; }
.ws-ordi-side-item strong { display: block; color: var(--text); font-size: 12.5px; }
.ws-ordi-side-item-sub { color: var(--text3); font-size: 11px; margin-top: 2px; display: block; }

.ws-ordi-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ws-ordi-list-item {
  padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px;
}
.ws-ordi-list-item strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 3px; }
.ws-ordi-list-item-sub { color: var(--text3); font-size: 11px; }

/* Polish Salle de crise ordi (post-v1.0.0 / #188) — Focus enrichi + Impacts externes + Plan tactique mini-board. */
.ws-ordi-side-divider {
  height: 1px; background: var(--border); margin: 16px 0;
}
.ws-ordi-focus-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.ws-ordi-focus-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-2);
}
.ws-ordi-focus-chip--warn  { background: #fef3c7; color: #92400e; }
.ws-ordi-focus-chip--ok    { background: #dcfce7; color: #15803d; }
.ws-ordi-focus-chip--alert { background: #fee2e2; color: #991b1b; }
.ws-ordi-focus-progress {
  margin-top: 10px;
}
.ws-ordi-focus-progress-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text3); margin-bottom: 4px;
}
.ws-ordi-focus-progress-label strong { color: var(--text); font-weight: 700; }
.ws-ordi-focus-progress-track {
  height: 6px; background: var(--bg3); border-radius: 999px; overflow: hidden;
}
.ws-ordi-focus-progress-fill {
  height: 100%; background: var(--brand-2); border-radius: 999px;
  transition: width .3s ease;
}

/* Plan tactique mini-board (Situation tab) — 4 phases en colonnes compactes. */
.ws-ordi-tact-mini {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px;
}
.ws-ordi-tact-col {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; min-height: 100px;
}
.ws-ordi-tact-col-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text3); margin-bottom: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.ws-ordi-tact-col--gestion-incident .ws-ordi-tact-col-head { color: #dc2626; border-bottom-color: #fecaca; }
.ws-ordi-tact-col--stabilisation    .ws-ordi-tact-col-head { color: #ea580c; border-bottom-color: #fed7aa; }
.ws-ordi-tact-col--retablissement   .ws-ordi-tact-col-head { color: #2563eb; border-bottom-color: #bfdbfe; }
.ws-ordi-tact-col--retour-normale   .ws-ordi-tact-col-head { color: #16a34a; border-bottom-color: #bbf7d0; }
.ws-ordi-tact-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; margin-bottom: 4px;
  font-size: 11px; color: var(--text);
}
.ws-ordi-tact-card strong { display: block; font-weight: 600; font-size: 11.5px; }
.ws-ordi-tact-card-meta { color: var(--text3); font-size: 10px; margin-top: 2px; }

/* Impacts externes : items avec icône colorée par type. */
.ws-ordi-impact-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: 11.5px;
}
.ws-ordi-impact-item:last-child { border-bottom: none; }
.ws-ordi-impact-ic {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.ws-ordi-impact-ic--media  { background: #fef3c7; color: #92400e; }
.ws-ordi-impact-ic--alert  { background: #fee2e2; color: #991b1b; }
.ws-ordi-impact-ic--info   { background: #dbeafe; color: #1d4ed8; }
.ws-ordi-impact-body { flex: 1; min-width: 0; }
.ws-ordi-impact-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--text); font-weight: 600;
}
.ws-ordi-impact-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ──────────────────────────────────────────────────────────────────────────
   Stage Salle de crise mode TV (lot 4.1 / #164) — dark, polling 10s
   ────────────────────────────────────────────────────────────────────────── */
/* Quand body.ws-tv-mode actif, on bascule en thème sombre pour l'écran TV.
   On ne touche pas aux CSS vars globales (--bg, --text) — on override
   uniquement à l'intérieur de .ws-tv-screen pour rester ciblé. */
body.ws-tv-mode .ws-sidebar { display: none; }
body.ws-tv-mode .ws-content { padding: 0; }
body.ws-tv-mode .ws-content > * { display: none; }
body.ws-tv-mode .ws-content [data-ws-stage="salle-tv"] { display: block; }

.ws-tv-screen {
  min-height: 100vh;
  background: #0b0f1c;
  color: #e7ecf5;
  padding: 28px 32px 24px;
  font-family: inherit;
  display: flex; flex-direction: column;
}
.ws-tv-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(231, 236, 245, 0.12);
}
.ws-tv-title { font-size: 28px; font-weight: 800; margin: 0; color: #fff; }
.ws-tv-sub   { font-size: 14px; color: #94a3b8; margin: 4px 0 0; }
.ws-tv-clock { font-size: 36px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.ws-tv-date  { font-size: 13px; color: #94a3b8; text-align: right; margin-top: 4px; }

/* Bouton « Quitter le mode TV » (#238) — ghost discret sur fond sombre du
   wallboard. Positionné à droite du clock-block via l'ordre flex naturel
   du header (flex: space-between, ws-tv-exit en 3ᵉ enfant). */
.ws-tv-exit {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 16px; margin-top: 4px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  align-self: center;
}
.ws-tv-exit:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.ws-tv-exit svg { flex-shrink: 0; }

.ws-tv-phases { margin: 12px 0 22px; }
/* Override phaseTrack colors pour le dark mode. */
body.ws-tv-mode .ws-phase-step--upcoming .ws-phase-dot {
  background: #1e293b; border: 2px solid #475569; color: transparent;
}
body.ws-tv-mode .ws-phase-step--done .ws-phase-dot {
  background: #15803d; border: 2px solid #15803d; color: #fff;
}
body.ws-tv-mode .ws-phase-step--active .ws-phase-dot {
  background: #b91c1c; border: 2px solid #b91c1c; color: #fff;
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.25);
}
body.ws-tv-mode .ws-phase-label { color: #e7ecf5; font-weight: 600; }
body.ws-tv-mode .ws-phase-connector { background: #475569; }
body.ws-tv-mode .ws-phase-connector--done { background: #15803d; }

.ws-tv-body {
  display: grid; grid-template-columns: 2fr 1fr; gap: 22px;
  flex: 1; min-height: 0;
}
@media (max-width: 1100px) {
  .ws-tv-body { grid-template-columns: 1fr; }
}
.ws-tv-panel {
  background: #111827; border: 1px solid rgba(231, 236, 245, 0.08);
  border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; min-height: 0;
}
.ws-tv-panel-title {
  font-size: 14px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 14px;
}
.ws-tv-mc, .ws-tv-points {
  list-style: none; padding: 0; margin: 0;
  flex: 1; overflow: auto;
}
.ws-tv-mc li, .ws-tv-points li {
  padding: 10px 12px; border-bottom: 1px solid rgba(231, 236, 245, 0.06);
  font-size: 14px; color: #e7ecf5;
}
.ws-tv-mc li:last-child, .ws-tv-points li:last-child { border-bottom: none; }
.ws-tv-mc-time, .ws-tv-points-time {
  display: inline-block; min-width: 60px; font-weight: 700;
  color: #f59e0b; font-variant-numeric: tabular-nums; margin-right: 10px;
}
.ws-tv-mc-type {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: rgba(245, 158, 11, 0.15); color: #f59e0b;
  margin-right: 8px;
}
.ws-tv-mc-content, .ws-tv-points-title { color: #e7ecf5; }
.ws-tv-points-cellule { color: #94a3b8; font-size: 12px; margin-left: 6px; }
.ws-tv-empty { color: #64748b; font-style: italic; padding: 12px; text-align: center; }

.ws-tv-footer {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(231, 236, 245, 0.12);
}
.ws-tv-kpi {
  background: rgba(231, 236, 245, 0.04);
  border-radius: 10px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.ws-tv-kpi-val { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
.ws-tv-kpi-lbl { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }

.ws-tv-polling {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #64748b; margin-top: 14px;
}
.ws-tv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a; box-shadow: 0 0 8px #16a34a;
  animation: ws-tv-pulse 2s ease-in-out infinite;
}
@keyframes ws-tv-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Stage Cellules engagées (lot 4.2 / #166) — grid de cards + badge affecté
   ────────────────────────────────────────────────────────────────────────── */
.ws-cells-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; margin-top: 16px;
}
.ws-cells-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  transition: border-color .12s, background .12s;
}
.ws-cells-card.is-affected {
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--card) 50%);
}
.ws-cells-card-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 10px;
}
.ws-cells-card-ic {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: #fff;
  background: var(--brand);
  flex-shrink: 0;
}
.ws-cells-card-ic--brand        { background: #b91c1c; }
.ws-cells-card-ic--brand-light  { background: #ef4444; }
.ws-cells-card-ic--purple       { background: #7e22ce; }
.ws-cells-card-ic--orange       { background: #c2410c; }
.ws-cells-card-ic--green        { background: #15803d; }
.ws-cells-card-ic--blue         { background: #1d4ed8; }
.ws-cells-card-ic--slate        { background: #475569; }

.ws-cells-card-name-block { flex: 1; min-width: 0; }
.ws-cells-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0 0 3px;
}
.ws-cells-card-status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.ws-cells-card-status--ok   { background: #dcfce7; color: #15803d; }
.ws-cells-card-status--warn { background: #fef3c7; color: #92400e; }
.ws-cells-card-status--off  { background: #fee2e2; color: #991b1b; }
.ws-cells-card-badge {
  background: var(--brand); color: #fff; padding: 3px 10px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.ws-cells-card-desc {
  font-size: 12.5px; color: var(--text2); line-height: 1.45;
  margin: 0 0 12px;
}
.ws-cells-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.ws-cells-card-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: var(--bg); border-radius: 6px;
  text-align: center;
}
.ws-cells-card-stat strong { font-size: 18px; font-weight: 700; color: var(--text); }
.ws-cells-card-stat span { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.ws-cells-card-referent {
  font-size: 11px; color: var(--text3); padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* ── Refonte écran « Cellules & équipes » — organigramme 2 niveaux (#311) ──
   Direction (racine) + cellules métier (enfants), chacune dépliable vers ses
   panneaux Équipes + Membres. Les pastilles couleur réutilisent les classes
   .ws-cells-card-ic--<key> (la couleur vient de là ; pas de background ici). */
.ws-cells2-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 16px 0 14px;
}
.ws-cells2-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.ws-cells2-sub { font-size: 13px; color: var(--text2); margin: 0; }
.ws-cells2-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.ws-cells2-search { min-width: 200px; }
.ws-cells2-toggle {
  display: inline-flex; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card);
}
.ws-cells2-togglebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; cursor: pointer; color: var(--text2);
  transition: background .12s, color .12s;
}
.ws-cells2-togglebtn:hover { background: var(--bg3); color: var(--text); }
.ws-cells2-togglebtn + .ws-cells2-togglebtn { border-left: 1px solid var(--border); }

/* Cadre blanc englobant : barre d'outils (recherche + déplier/replier) + liste. */
.ws-cells2-frame {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
}
.ws-cells2-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ws-cells2-bar .ws-cells2-search { flex: 1; min-width: 0; }
.ws-cells2-list { display: flex; flex-direction: column; gap: 12px; }

/* Lien hiérarchique parent → enfant : rail + connecteurs en couleur d'accent
   (var(--brand)) pour rendre la hiérarchie lisible d'un coup d'œil. */
.ws-cells2-children {
  margin: 10px 0 0 22px; padding-left: 18px;
  border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.ws-cells2-node--child { position: relative; }
.ws-cells2-node--child::before {
  content: ''; position: absolute; left: -18px; top: 28px;
  width: 16px; height: 2px; background: var(--border);
}
/* Cartes cellules : fond gris subtil pour ressortir dans le cadre blanc. */
.ws-cells2-node--root > .ws-cells2-row,
.ws-cells2-node--child > .ws-cells2-row {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
}
/* Dépliée avec détail dessous : on aplatit le bas de la ligne pour que la carte
   (ligne + panneau détail) soit visuellement CONTINUE, pas deux blocs disjoints. */
.ws-cells2-node.is-open.has-detail > .ws-cells2-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.ws-cells2-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ws-cells2-row:hover { background: var(--bg); border-color: var(--border2); }
.ws-cells2-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ws-cells2-ic {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px;
}
.ws-cells2-row-main { flex: 1; min-width: 0; }
.ws-cells2-row-titleline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-cells2-row-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ws-cells2-row-desc { font-size: 12.5px; color: var(--text2); line-height: 1.4; margin: 3px 0 0; }
.ws-cells2-row-stats { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.ws-cells2-istat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text3); white-space: nowrap; }
.ws-cells2-istat svg { color: var(--text3); flex-shrink: 0; }
.ws-cells2-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 12px; background: var(--bg); border-radius: 8px; min-width: 62px;
}
.ws-cells2-stat strong { font-size: 16px; font-weight: 700; color: var(--text); }
.ws-cells2-stat span { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.ws-cells2-chev { color: var(--text3); flex-shrink: 0; display: inline-flex; transition: transform .15s; }
.ws-cells2-node.is-open > .ws-cells2-row .ws-cells2-chev { transform: rotate(90deg); }

.ws-cells2-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 14px 16px 16px;
  background: var(--bg2);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 12px 12px;
}
@media (max-width: 900px) { .ws-cells2-detail { grid-template-columns: 1fr; } }
.ws-cells2-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.ws-cells2-panel-title {
  font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px;
}
.ws-cells2-muted { font-size: 12.5px; color: var(--text3); margin: 0; }

/* Toggle « Équipes & membres de cette cellule » (cellules parentes) — replié par
   défaut au profit des sous-cellules. Quand ouvert, le panneau détail s'y connecte. */
.ws-cells2-detailtoggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 9px 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text2); text-align: left;
  transition: background .12s;
}
.ws-cells2-detailtoggle:hover { background: var(--bg); }
.ws-cells2-detailtoggle.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ws-cells2-dt-chev { display: inline-flex; color: var(--text3); transition: transform .15s; }
.ws-cells2-detailtoggle.is-open .ws-cells2-dt-chev { transform: rotate(90deg); }
.ws-cells2-dt-lbl { font-weight: 600; color: var(--text); }
.ws-cells2-dt-meta { margin-left: auto; color: var(--text3); }

/* ════════════ Refonte Cellules & équipes #311 — Structure + Organigramme ════════════ */
.ws-cells3-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 14px; }
.ws-cells3-title { font-size: 21px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.ws-cells3-sub { font-size: 13px; color: var(--text2); margin: 0; }
.ws-cells3-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-cells3-actions .docs-btn { display: inline-flex; align-items: center; gap: 6px; }

.ws-cells3-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ws-cells3-topbar[hidden] { display: none; }
.ws-cells3-kpis { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; flex: 1; }
.ws-cells3-kpis[hidden] { display: none; }
.ws-cells3-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.ws-cells3-kpi-ic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.ws-cells3-kpi strong { display: block; font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.ws-cells3-kpi span { font-size: 12px; color: var(--text3); }
.ws-cells3-viewtoggle { display: inline-flex; align-self: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.ws-cells3-vbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: transparent; border: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--text2); transition: background .12s, color .12s; }
.ws-cells3-vbtn + .ws-cells3-vbtn { border-left: 1px solid var(--border); }
.ws-cells3-vbtn.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.ws-cells3-structure { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.4fr) minmax(320px, 1.1fr); gap: 16px; align-items: start; }
.ws-cells3-structure[hidden] { display: none; }
.ws-cells3-col { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.ws-cells3-coltitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin: 0 0 12px; }
.ws-cells3-search { margin-bottom: 12px; }
.ws-cells3-empty { font-size: 13px; color: var(--text3); padding: 8px 4px; }

.ws-cells3-tree { display: flex; flex-direction: column; gap: 2px; }
.ws-cells3-trow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .1s; }
.ws-cells3-trow:hover { background: var(--bg); }
.ws-cells3-trow.is-sel { background: var(--brand-soft); }
.ws-cells3-trow.is-sel .ws-cells3-tname { color: var(--brand); }
.ws-cells3-tchev { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text3); flex-shrink: 0; transition: transform .12s; }
.ws-cells3-tchev.is-open { transform: rotate(90deg); }
.ws-cells3-tic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; }
.ws-cells3-tname { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-cells3-tcount { font-size: 11px; color: var(--text3); flex-shrink: 0; }
.ws-cells3-tchildren { display: flex; flex-direction: column; gap: 2px; }
.ws-cells3-addrow { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px 10px; background: transparent; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text2); }
.ws-cells3-addrow:hover { border-color: var(--brand); color: var(--brand); }
.ws-cells3-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text3); }
.ws-cells3-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ws-cells3-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ws-cells3-dot--cell { background: #b91c1c; }
.ws-cells3-dot--eq { background: #c2410c; }
.ws-cells3-dot--sub { background: #15803d; }

.ws-cells3-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ws-cells3-dic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; }
.ws-cells3-dhead-t { flex: 1; min-width: 0; }
.ws-cells3-dname { font-size: 16px; font-weight: 700; color: var(--text); }
.ws-cells3-dsub { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.ws-cells3-dedit { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ws-cells3-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ws-cells3-stat { text-align: center; }
.ws-cells3-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.ws-cells3-stat span { font-size: 11px; color: var(--text3); }
.ws-cells3-dsec { margin-bottom: 16px; }
.ws-cells3-dsec h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); margin: 0 0 8px; }
.ws-cells3-dsec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-cells3-dsec-head h4 { margin: 0; }
.ws-cells3-dtext { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 0; }
.ws-cells3-missions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ws-cells3-missions li { position: relative; padding-left: 22px; font-size: 13px; color: var(--text2); }
.ws-cells3-missions li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 15px; height: 15px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 10px; display: grid; place-items: center; }
.ws-cells3-eqcard { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.ws-cells3-eqcard:hover { border-color: var(--brand); }
.ws-cells3-eqcard.is-sel { border-color: var(--brand); background: var(--brand-soft); }
.ws-cells3-eqic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; }
.ws-cells3-eqbody { flex: 1; min-width: 0; }
.ws-cells3-eqname { font-size: 13px; font-weight: 700; color: var(--text); }
.ws-cells3-eqdesc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.ws-cells3-eqmeta { font-size: 11.5px; color: var(--text3); flex-shrink: 0; }
.ws-cells3-back { margin-top: 8px; background: transparent; border: none; color: var(--brand); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.ws-cells3-mline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.ws-cells3-mline svg { color: var(--text3); flex-shrink: 0; }

.ws-cells3-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ws-cells3-mcount { font-size: 13px; font-weight: 600; color: var(--text2); }
.ws-cells3-mhead .docs-btn { display: inline-flex; align-items: center; gap: 6px; }
.ws-cells3-mcard { display: flex; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.ws-cells3-mcard:hover { background: var(--bg); }
.ws-cells3-mcard.is-sel { background: var(--brand-soft); border-color: var(--brand); }
.ws-cells3-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.ws-cells3-mbody { flex: 1; min-width: 0; }
.ws-cells3-mtop { display: flex; align-items: center; gap: 8px; }
.ws-cells3-mname { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ws-cells3-mbadge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bg3); color: var(--text2); }
.ws-cells3-mbadge.is-resp { background: #fee2e2; color: #b91c1c; }
.ws-cells3-mrole { font-size: 12px; color: var(--brand); margin: 1px 0 4px; }
.ws-cells3-mcontact { display: flex; flex-direction: column; gap: 2px; }
.ws-cells3-mcontact span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text2); }
.ws-cells3-mcontact svg { color: var(--text3); flex-shrink: 0; }

.ws-cells3-organigramme { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 18px; }
.ws-cells3-organigramme[hidden] { display: none; }
.ws-cells3-orghint { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 12px; color: var(--text3); margin: 12px 0 0; }
.ws-org-hint-ic { color: var(--text3); flex-shrink: 0; }

/* Barre d'outils flottante verticale (haut-gauche), façon éditeur de diagramme. */
.ws-org-fab { position: absolute; top: 14px; left: 16px; z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.ws-org-fbtn { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; color: var(--text2); cursor: pointer; transition: background .12s, color .12s; }
.ws-org-fbtn:hover { background: var(--bg); color: var(--brand); }
.ws-org-fab-zval { text-align: center; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--text3); padding: 2px 0 1px; }
/* Champ de recherche, ancré sous la fab. */
.ws-org-searchbar { position: absolute; top: 14px; left: 60px; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(15,23,42,.1); color: var(--text3); }
.ws-org-searchbar[hidden] { display: none; }
.ws-org-searchbar input { border: none; background: transparent; font: inherit; font-size: 13px; color: var(--text); outline: none; width: 230px; }
.ws-org-node.is-dim { opacity: .3; filter: grayscale(.4); }

/* ── Maquette mai 2026 : puces équipe sélectionnée/ouverte ── */
.ws-org-chip.is-sel { border-color: var(--brand); background: var(--brand-soft); }
.ws-org-chip.is-open { border-color: var(--brand); }
.ws-org-chip[draggable="true"] { cursor: grab; }
.ws-org-chip.is-droptarget { border-color: #f97316; border-style: dashed; background: #fff4ec; box-shadow: 0 0 0 2px rgba(249,115,22,.18); }
.ws-org-mrow[draggable="true"] { cursor: grab; }

/* ── Lot C : panneau équipe déplié — carte DÉTACHÉE sous la cellule (maquette) ── */
.ws-org-teamcard { width: 344px; z-index: 4; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.12); overflow: hidden; }
.ws-org-tc-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #fff4ec; border-bottom: 1px solid var(--border); }
.ws-org-tc-badge { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #c2410c; background: #ffe4d3; padding: 3px 7px; border-radius: 5px; flex-shrink: 0; }
.ws-org-tc-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; }
.ws-org-tc-t { flex: 1; min-width: 0; }
.ws-org-tc-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-org-tc-meta { font-size: 11px; color: var(--text2); margin-top: 1px; }
.ws-org-tc-acts { display: flex; gap: 2px; flex-shrink: 0; }
.ws-org-tc-act { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--text2); cursor: pointer; font-size: 18px; line-height: 1; }
.ws-org-tc-act:hover { border-color: var(--border); color: var(--brand); background: var(--card); }
.ws-org-tc-lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text3); padding: 10px 14px 4px; }
.ws-org-tc-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 10px; }
.ws-org-tp-empty { font-size: 12px; color: var(--text3); font-style: italic; padding: 4px 8px 8px; }
/* Connecteur pointillé orange cellule → panneau équipe + flèche. */
.ws-org-teamconn { fill: none; stroke: #f97316; stroke-width: 1.6px; stroke-dasharray: 4 4; }
.ws-org-teamarrow { fill: #f97316; }

/* Ligne membre (panneau détail + dépli équipe). */
.ws-org-mrow { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; }
.ws-org-mrow:hover { background: var(--bg); }
.ws-org-mrow.is-sel { background: var(--brand-soft); border-color: var(--brand); }
.ws-org-mav { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.ws-org-mbody { flex: 1; min-width: 0; }
.ws-org-mname { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-org-mrole { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Lot B : panneau « Détail de l'élément » (overlay droit) ── */
/* Colonne intégrée (sœur du canvas) — pas un overlay : le graphe garde sa place. */
.ws-org-detail { flex: 0 0 320px; align-self: stretch; margin-left: 14px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 16px rgba(15,23,42,.08); overflow: hidden; }
.ws-org-detail[hidden] { display: none; }
.ws-org-dbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ws-org-dbar-t { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text3); }
.ws-org-dclose { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: none; border-radius: 7px; font-size: 20px; line-height: 1; color: var(--text3); cursor: pointer; }
.ws-org-dclose:hover { background: var(--bg); color: var(--text); }
.ws-org-dhead { display: flex; align-items: center; gap: 12px; padding: 14px; }
.ws-org-dhead-ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; }
.ws-org-dhead-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.ws-org-dhead-t { flex: 1; min-width: 0; }
.ws-org-dhead-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ws-org-dhead-sub { font-size: 12px; color: var(--text2); margin-top: 1px; }
.ws-org-dbadge { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-2); }
.ws-org-dtabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.ws-org-dtab { padding: 8px 4px; margin-bottom: -1px; background: transparent; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: 12.5px; color: var(--text2); cursor: pointer; }
.ws-org-dtab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.ws-org-dtab + .ws-org-dtab { margin-left: 10px; }
.ws-org-dbody { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ws-org-dsec h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); margin: 4px 0 6px; }
.ws-org-dtext { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 0; }
.ws-org-dsublabel { font-size: 11px; font-weight: 600; color: var(--text3); margin: 8px 0 5px; }
.ws-org-dparents { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-org-dparent { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; font-size: 12px; }
.ws-org-dparent-x { width: 18px; height: 18px; display: grid; place-items: center; border: none; background: transparent; color: #6366f1; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ws-org-dparent-x:hover { background: #c7d2fe; color: #312e81; }
.ws-org-dhint { font-size: 11px; color: var(--text3); font-style: italic; margin: 8px 0 0; line-height: 1.4; }

/* Bloc « Rattachements » (multi-parent) réutilisé en vues structure & simplifiée. */
.ws-cells-parents-main { font-size: 12px; color: var(--text3); }
.ws-cells-parents-lbl { font-size: 10.5px; font-weight: 600; color: var(--text3); margin: 7px 0 4px; }
/* Vue simplifiée : barre discrète en tête du détail (pas une carte). */
.ws-cells2-parentsbar { grid-column: 1 / -1; padding: 0 2px 10px; margin-bottom: 2px; border-bottom: 1px dashed var(--border); }
/* Badge « rattachée à N parents secondaires » sur les lignes. */
.ws-cells-mp { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 10.5px; font-weight: 600; }
.ws-cells-mp svg { flex-shrink: 0; }
/* Référence « rattachement secondaire » dans les arbres (structure & simplifiée). */
.ws-cells3-trow--sec .ws-cells3-tname { font-style: italic; color: var(--text2); font-weight: 500; }
.ws-cells3-tsecic { color: #6366f1; }
.ws-cells3-secreftag { margin-left: auto; flex-shrink: 0; font-size: 10px; color: #4338ca; background: #eef2ff; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ws-cells2-secref { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin: 6px 0 0; border: 1px dashed var(--border2, #cbd5e1); border-radius: 8px; background: var(--bg2); cursor: pointer; }
.ws-cells2-secref:hover { border-color: #6366f1; }
.ws-cells2-secref-ic { display: inline-flex; flex-shrink: 0; color: #6366f1; }
.ws-cells2-secref-nm { font-size: 13px; font-weight: 600; font-style: italic; color: var(--text2); }
.ws-cells2-secref-tag { margin-left: auto; flex-shrink: 0; font-size: 10.5px; color: #4338ca; background: #eef2ff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ws-org-dmissions { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text2); }
.ws-org-dline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.ws-org-dline svg { color: var(--text3); flex-shrink: 0; }
.ws-org-dact { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.ws-org-dact:hover { border-color: var(--brand); color: var(--brand); }
.ws-org-dact svg { flex-shrink: 0; }
.ws-org-dact--cta { justify-content: center; background: var(--brand-soft); border-color: transparent; color: var(--brand-2); font-weight: 600; }
.ws-org-dfiche { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 12px; border: none; border-top: 1px solid var(--border); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.ws-org-dfiche:hover { background: var(--bg); }

/* ── Lot D : mini-carte (overlay bas-gauche) ── */
.ws-org-minimap { position: absolute; left: 16px; bottom: 44px; z-index: 6; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.ws-org-minimap[hidden] { display: none; }
.ws-org-mini-inner { position: relative; cursor: pointer; }
.ws-org-mini-rect { position: absolute; background: var(--border2, #cbd5e1); border-radius: 2px; }
.ws-org-mini-view { position: absolute; border: 1.5px solid var(--brand); background: rgba(185,28,28,.08); border-radius: 3px; pointer-events: none; }

/* ── Lot E : undo / redo (overlay bas-droite) ── */
.ws-org-history { position: absolute; right: 16px; bottom: 14px; z-index: 6; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.ws-org-hbtn { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: none; border-radius: 7px; color: var(--text2); cursor: pointer; }
.ws-org-hbtn:hover:not(:disabled) { background: var(--bg); color: var(--brand); }
.ws-org-hbtn:disabled { opacity: .35; cursor: default; }
/* Viewport : fenêtre de visualisation. Le canvas (absolu) est mis à l'échelle en
   JS ; c'est le sizer parent qui porte les dimensions MISES À L'ÉCHELLE, vues par
   le scroll → pas de fausse scrollbar laissée par transform: scale. Le sizer est
   centré horizontalement et calé en haut (l'espace libre dessous = pleine hauteur). */
.ws-org-viewport { overflow: auto; max-height: 66vh; display: flex; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: contain; }
.ws-org-viewport.is-grabbing { cursor: grabbing; }
.ws-org-viewport.is-grabbing .ws-org-node { cursor: grabbing; }
.ws-org-sizer { position: relative; margin: auto; }
.ws-org-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: max-content; }

/* Vue organigramme en pleine hauteur : la stage devient une colonne flex qui
   occupe tout l'espace de .ws-main, et le panneau orga + son viewport grandissent. */
.ws-stage.ws-cells-orgview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ws-stage.ws-cells-orgview .ws-cells3-organigramme { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Zone centrale = rangée [canvas | panneau détail] ; le canvas (overlays inclus)
   occupe la place restante quand le panneau s'ouvre — pas un overlay par-dessus. */
.ws-org-stage { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.ws-org-canvaswrap { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.ws-stage.ws-cells-orgview .ws-org-viewport { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: none; }

/* Vue simplifiée : arbre récursif des cellules avec drag & drop (.ws-cells2-*). */
.ws-cells3-simplifie[hidden] { display: none; }

/* Connecteurs orthogonaux (SVG), sous les nœuds. */
.ws-org-svg { z-index: 0; pointer-events: none; }
.ws-org-conn { fill: none; stroke: var(--border2, #cbd5e1); stroke-width: 1.5px; }
.ws-org-junction { fill: var(--card); stroke: var(--border2, #cbd5e1); stroke-width: 1.5px; }
/* Lien de rattachement SECONDAIRE (multi-parent) — courbe pointillée indigo. */
.ws-org-seclink { fill: none; stroke: #6366f1; stroke-width: 1.6px; stroke-dasharray: 5 4; opacity: .8; }
/* Nœuds CELLULE : carte en colonne (en-tête + zone équipes), positionnée en
   absolu par le layout calculé (left/top inline). */
.ws-org-node { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; min-width: 168px; max-width: 260px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s, box-shadow .12s; }
.ws-org-node:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(185,28,28,.1); z-index: 2; }
.ws-org-node.is-sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); z-index: 2; }
.ws-org-node.is-drop { border-color: var(--brand); border-style: dashed; box-shadow: 0 0 0 2px var(--brand-tint); z-index: 3; }
.ws-org-head { display: flex; align-items: center; gap: 10px; }
/* Équipes de la cellule = puces (zone propre, séparée de l'en-tête). */
.ws-org-teams { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px dashed var(--border); }
.ws-org-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 7px; background: var(--bg3, #eef1f4); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font: inherit; }
.ws-org-chip:hover { border-color: var(--brand); background: var(--card); }
.ws-org-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ws-org-chip-nm { font-size: 11px; font-weight: 600; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bouton repli/dépli (coin haut-gauche du nœud). */
.ws-org-collapse { position: absolute; top: -9px; left: -9px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text2); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 4; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.ws-org-collapse:hover { border-color: var(--brand); color: var(--brand); }
.ws-org-collapse.is-collapsed { background: var(--brand-soft); color: var(--brand-2); border-color: var(--brand); }
/* Racine (Direction de crise) : accent marqué, mise en avant. */
.ws-org-node--root { background: var(--card); border-color: var(--brand); border-width: 1.5px; min-width: 200px; }
.ws-org-node--root .ws-org-name { font-size: 14px; }
.ws-org-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; }
.ws-org-t { min-width: 0; flex: 1; }
/* Nom complet (jamais tronqué) : passe à la ligne, la largeur étant plafonnée. */
.ws-org-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.ws-org-meta { font-size: 11px; color: var(--text3); margin-top: 2px; white-space: nowrap; }

@media (max-width: 1100px) {
  .ws-cells3-structure { grid-template-columns: 1fr; }
  .ws-cells3-kpis { grid-template-columns: repeat(2, 1fr); }
}

.ws-cells2-eq {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; margin-bottom: 8px;
}
.ws-cells2-eq:last-child { margin-bottom: 0; }
.ws-cells2-eq-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px;
}
.ws-cells2-eq-body { min-width: 0; flex: 1; }
.ws-cells2-eq-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ws-cells2-eq-meta { font-size: 11px; color: var(--text3); margin-top: 1px; }
.ws-cells2-eq-desc { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.4; }

.ws-cells2-member {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.ws-cells2-member:last-child { border-bottom: none; }
.ws-cells2-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px;
}
.ws-cells2-member-body { min-width: 0; }
.ws-cells2-member-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ws-cells2-member-role { font-size: 11.5px; color: var(--brand); margin-top: 1px; }
.ws-cells2-member-contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ws-cells2-member-ci { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text2); min-width: 0; }
.ws-cells2-member-ci svg { color: var(--text3); flex-shrink: 0; }

/* Drag & drop — équipes et membres déplaçables ; surbrillance de dépôt. */
.ws-cells2-eq, .ws-cells2-member { cursor: grab; }
.ws-cells2-eq:active, .ws-cells2-member:active { cursor: grabbing; }
.ws-cells2-row.is-drop,
.ws-cells2-eq.is-drop {
  outline: 2px dashed var(--brand); outline-offset: -2px;
  background: var(--brand-soft);
}

/* Boutons d'action (éditer / ajouter) + en-têtes de panneaux + formulaires CRUD */
.ws-cells2-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--text3); cursor: pointer; transition: background .12s, color .12s;
}
.ws-cells2-iconbtn:hover { background: var(--bg3); color: var(--brand); }
.ws-cells2-add { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ws-cells2-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-cells2-panel-head .ws-cells2-panel-title { margin: 0; }

.ws-cells2-form { display: flex; flex-direction: column; gap: 12px; }
.ws-cells2-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-cells2-field { display: flex; flex-direction: column; gap: 4px; }
.ws-cells2-field > span { font-size: 12px; font-weight: 600; color: var(--text2); }
.ws-cells2-field input, .ws-cells2-field select, .ws-cells2-field textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.ws-cells2-field textarea { resize: vertical; }
.ws-cells2-formerr { color: #b91c1c; font-size: 12.5px; margin: 0; }
.ws-cells2-formfoot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ws-cells2-del {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px; color: #b91c1c; cursor: pointer;
}
.ws-cells2-del:hover { background: #fee2e2; border-color: #fecaca; }

/* Filtre membres par équipe : équipe active mise en évidence + chip de retrait. */
.ws-cells2-eq.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ws-cells2-eq-filter:hover { color: var(--brand); }
.ws-cells2-filterchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand); font-size: 11px; font-weight: 600; cursor: pointer;
}
.ws-cells2-filterchip-x { font-size: 10px; opacity: .7; }
.ws-cells2-filterchip:hover .ws-cells2-filterchip-x { opacity: 1; }

/* Badge « ★ Affecté » sur l'entrée sidebar Cellules quand cellule active != all */
.ws-nav-affected {
  display: inline-block; margin-left: 8px;
  background: var(--brand); color: #fff;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────────
   Polish maquette : Plan d'actions (post-v1.0.0 / #176)
   Reproduit la maquette PNG fournie : 4 panneaux KPI (donut Avancement,
   barres Priorité, stacks Cellule, donut Type) + tableau riche 10 colonnes
   + pagination détaillée.
   ────────────────────────────────────────────────────────────────────────── */
.ws-pa-head { margin: 16px 0 12px; }
.ws-pa-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.ws-pa-sub { font-size: 13px; color: var(--text2); margin: 4px 0 0; }

.ws-pa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.ws-pa-toolbar .ui-search { flex: 1 1 280px; min-width: 200px; }
.ws-pa-toolbar > .docs-btn { margin-left: auto; }
/* .ws-pa-select / .ws-pa-search / .ws-pa-cta supprimés : la toolbar consomme
   désormais les primitives partagées .ui-select / .ui-search, et le CTA
   « + Nouvelle action » est un .docs-btn.docs-btn--cta (homogène app principale). */

.ws-pa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1280px) { .ws-pa-kpis { grid-template-columns: repeat(2, 1fr); } }
.ws-pa-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  min-height: 180px; display: flex; flex-direction: column;
}
.ws-pa-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ws-pa-panel-head h2 {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .07em; margin: 0;
}
.ws-pa-panel-body { display: flex; gap: 12px; align-items: center; flex: 1 1 auto; }
.ws-pa-panel-body--donut { gap: 16px; }

.ws-pa-donut { position: relative; flex: 0 0 120px; width: 120px; height: 120px; }
.ws-pa-donut svg { transform: rotate(-90deg); }
.ws-pa-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ws-pa-donut-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.ws-pa-donut-label { font-size: 11px; color: var(--text3); margin-top: 4px; }
.ws-pa-legend { flex: 1; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-pa-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.ws-pa-legend-pct { font-weight: 700; min-width: 36px; }
.ws-pa-legend-label { flex: 1; color: var(--text2); }
.ws-pa-legend-num { font-size: 11px; color: var(--text3); }
.ws-pa-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ws-pa-dot--green  { background: #16a34a; }
.ws-pa-dot--orange { background: #ea580c; }
.ws-pa-dot--red    { background: #dc2626; }
.ws-pa-dot--gray   { background: #9ca3af; }
.ws-pa-dot--blue   { background: #2563eb; }
.ws-pa-dot--purple { background: #7c3aed; }
.ws-pa-dot--brand  { background: var(--brand); }
.ws-pa-legend-mini { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.ws-pa-legend-mini li { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text3); }

.ws-pa-hbars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ws-pa-hbar-row { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; font-size: 12px; }
.ws-pa-hbar-label { color: var(--text); font-weight: 500; }
.ws-pa-hbar-track { height: 8px; background: var(--bg3); border-radius: 999px; overflow: hidden; }
.ws-pa-hbar-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.ws-pa-hbar-fill--elevee  { background: #dc2626; }
.ws-pa-hbar-fill--moderee { background: #ea580c; }
.ws-pa-hbar-fill--normale { background: #16a34a; }
.ws-pa-hbar-fill--basse   { background: #9ca3af; }
.ws-pa-hbar-num { text-align: right; font-size: 11px; color: var(--text3); }
.ws-pa-hbar-pct { font-weight: 700; color: var(--text); }

.ws-pa-stacks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ws-pa-stack-row { display: grid; grid-template-columns: 140px 1fr 30px; align-items: center; gap: 10px; font-size: 12px; }
.ws-pa-stack-label { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pa-stack-track { height: 18px; background: var(--bg3); border-radius: 4px; overflow: hidden; display: flex; }
.ws-pa-stack-seg { height: 100%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: 700; min-width: 0; }
.ws-pa-stack-seg--green  { background: #16a34a; }
.ws-pa-stack-seg--orange { background: #ea580c; }
.ws-pa-stack-seg--red    { background: #dc2626; }
.ws-pa-stack-seg--gray   { background: #9ca3af; }
.ws-pa-stack-total { text-align: right; font-size: 12px; color: var(--text); font-weight: 600; }

.ws-pa-table-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ws-pa-table-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ws-pa-table-title { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.ws-pa-table-count { color: var(--text3); font-weight: 500; margin-left: 4px; }
/* Aligné sur .annuaire-table (#210). */
.ws-pa-table-wrap { overflow-x: auto; }
.ws-pa-table { width: 100%; border-collapse: collapse; }
.ws-pa-table thead 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;
}
.ws-pa-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.ws-pa-table tbody tr { cursor: pointer; transition: background .15s; }
.ws-pa-table tbody tr:hover td { background: var(--bg); }
.ws-pa-table tbody tr.is-active td { background: var(--brand-soft); }
.ws-pa-table tbody tr.is-active:hover td { background: var(--brand-soft); }
.ws-pa-table tbody tr:last-child td { border-bottom: none; }
.ws-pa-cb { width: 14px; height: 14px; cursor: pointer; }
.ws-pa-action-title { font-weight: 600; color: var(--text); font-size: 13px; }
.ws-pa-action-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ws-pa-type-cell { display: flex; align-items: center; gap: 6px; color: var(--text); }
.ws-pa-type-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.ws-pa-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ws-pa-chip-prio--elevee  { color: #b91c1c; }
.ws-pa-chip-prio--moderee { color: #c2410c; }
.ws-pa-chip-prio--normale { color: #15803d; }
.ws-pa-chip-prio--basse   { color: #6b7280; }
.ws-pa-chip-statut--terminee     { background: #d1fae5; color: #065f46; }
.ws-pa-chip-statut--en-cours     { background: #fef3c7; color: #92400e; }
.ws-pa-chip-statut--en-retard    { background: #fee2e2; color: #991b1b; }
.ws-pa-chip-statut--a-demarrer   { background: #e5e7eb; color: #4b5563; }
.ws-pa-resp { display: flex; align-items: center; gap: 8px; }
.ws-pa-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-2);
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.ws-pa-due { display: flex; align-items: center; gap: 6px; }
.ws-pa-due-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.ws-pa-due-dot--late { background: #dc2626; }
.ws-pa-due--late { color: #b91c1c; font-weight: 600; }
.ws-pa-progress { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.ws-pa-progress-track { flex: 1; height: 6px; background: var(--bg3); border-radius: 999px; overflow: hidden; }
.ws-pa-progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #16a34a, #84cc16);
  border-radius: 999px; transition: width .3s ease;
}
.ws-pa-progress-fill--low { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.ws-pa-progress-fill--mid { background: linear-gradient(90deg, #f59e0b, #facc15); }
.ws-pa-progress-pct { font-size: 11px; font-weight: 700; color: var(--text); min-width: 32px; text-align: right; }
.ws-pa-update { font-size: 11px; color: var(--text3); white-space: nowrap; }
.ws-pa-row-menu { background: transparent; border: none; cursor: pointer; padding: 6px; color: var(--text3); border-radius: 4px; }
.ws-pa-row-menu:hover { background: var(--bg); color: var(--text); }

.ws-pa-pager {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text2);
}
.ws-pa-pager-info { margin-right: auto; }
.ws-pa-pager-size { display: flex; align-items: center; gap: 8px; }
/* Le sélecteur « lignes par page » est désormais un .ui-select--up (iso
   .docs-pagesize de l'app principale). Plus de <select> natif à styler. */
.ws-pa-pager-nums { display: flex; gap: 4px; }
.ws-pa-pager-num {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg2);
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text);
  padding: 0 10px;
}
.ws-pa-pager-num:hover { border-color: var(--brand); }
.ws-pa-pager-num.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.ws-pa-pager-num:disabled { opacity: .4; cursor: not-allowed; }
.ws-pa-pager-ellipsis { padding: 0 4px; color: var(--text3); }

/* Polish Chronologie (post-v1.0.0 / #184) — frise riche 4 phases avec durées + side panel */
.ws-chrono-phases-rich {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 14px; margin: 16px 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.ws-chrono-phase {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid;
  position: relative;
}
.ws-chrono-phase--gestion-incident { background: #fef2f2; border-left-color: #dc2626; }
.ws-chrono-phase--stabilisation    { background: #fff7ed; border-left-color: #ea580c; }
.ws-chrono-phase--retablissement   { background: #eff6ff; border-left-color: #2563eb; }
.ws-chrono-phase--retour-normale   { background: #f0fdf4; border-left-color: #16a34a; }
.ws-chrono-phase-ic { font-size: 18px; flex-shrink: 0; }
.ws-chrono-phase-body { flex: 1; min-width: 0; }
.ws-chrono-phase-name { font-size: 12px; font-weight: 700; color: var(--text); }
.ws-chrono-phase-range { font-size: 10px; color: var(--text3); margin-top: 2px; }
.ws-chrono-phase-duration {
  font-size: 11px; font-weight: 700; color: var(--text);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.6); flex-shrink: 0;
}
.ws-chrono-phase--active .ws-chrono-phase-duration { background: var(--brand); color: #fff; }

.ws-chrono-grid {
  display: grid; grid-template-columns: 1fr 280px; gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) { .ws-chrono-grid { grid-template-columns: 1fr; } }
.ws-chrono-side { display: flex; flex-direction: column; gap: 16px; }
.ws-chrono-side-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.ws-chrono-side-title {
  font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px;
}
.ws-chrono-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-chrono-side-item { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.ws-chrono-side-num { font-size: 18px; font-weight: 700; color: var(--brand-2); min-width: 28px; }
.ws-chrono-side-lbl { color: var(--text2); }
.ws-chrono-side-link {
  display: inline-block; margin-top: 12px;
  font-size: 12px; color: var(--brand-2); text-decoration: none; font-weight: 600;
}
.ws-chrono-side-link:hover { text-decoration: underline; }

/* Polish Salle de crise TV (post-v1.0.0 / #182) — 3 colonnes + footer 4 KPI cellules */
.ws-tv-body--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ws-tv-axes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-tv-axe-row {
  background: rgba(255,255,255,0.04); padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid #ea580c;
}
.ws-tv-axe-row--green { border-left-color: #16a34a; }
.ws-tv-axe-row--blue  { border-left-color: #2563eb; }
.ws-tv-axe-row--gray  { border-left-color: #6b7280; }
.ws-tv-axe-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ws-tv-axe-title { font-size: 13px; font-weight: 600; color: #fff; }
.ws-tv-axe-statut {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(234,88,12,0.2); color: #fb923c;
}
.ws-tv-axe-statut--ok    { background: rgba(22,163,74,0.2); color: #4ade80; }
.ws-tv-axe-statut--todo  { background: rgba(107,114,128,0.2); color: #d1d5db; }
.ws-tv-axe-pct-row { display: flex; align-items: center; gap: 8px; }
.ws-tv-axe-track {
  flex: 1; height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 999px; overflow: hidden;
}
.ws-tv-axe-fill { display: block; height: 100%; background: #ea580c; border-radius: 999px; transition: width .3s; }
.ws-tv-axe-fill--green { background: #16a34a; }
.ws-tv-axe-fill--blue  { background: #2563eb; }
.ws-tv-axe-fill--gray  { background: #6b7280; }
.ws-tv-axe-pct { font-size: 11px; font-weight: 700; color: #fff; min-width: 36px; text-align: right; }

.ws-tv-footer--4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; }
.ws-tv-foot-col {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.04); padding: 12px 14px; border-radius: 8px;
}
.ws-tv-foot-ic { font-size: 20px; flex-shrink: 0; }
.ws-tv-foot-body { flex: 1; min-width: 0; }
.ws-tv-foot-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.ws-tv-foot-text { font-size: 12px; color: #fff; line-height: 1.4; }
.ws-tv-foot-text--warn { color: #fb923c; font-weight: 600; }

/* Polish Main courante 3-col enrichi (post-v1.0.0 / #180) */
.ws-mc-sync { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ws-mc-sync-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #d1fae5; color: #065f46;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.ws-mc-sync-meta { font-size: 11px; color: var(--text3); }
.ws-mc-stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
.ws-mc-stat { padding: 8px 4px; text-align: center; }
.ws-mc-stat-num { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.ws-mc-stat-lbl { font-size: 9px; color: var(--text3); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.ws-mc-stat--blue   .ws-mc-stat-num { color: #1d4ed8; }
.ws-mc-stat--red    .ws-mc-stat-num { color: #b91c1c; }
.ws-mc-stat--orange .ws-mc-stat-num { color: #c2410c; }
.ws-mc-stat--purple .ws-mc-stat-num { color: #7c3aed; }
.ws-mc-rappels-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ws-mc-rappel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 12px; cursor: pointer;
}
.ws-mc-rappel-item:hover { border-color: var(--brand); }
.ws-mc-rappel-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
}
.ws-mc-rappel-ic--late   { background: #fee2e2; color: #991b1b; }
.ws-mc-rappel-ic--pending { background: #fef3c7; color: #92400e; }
.ws-mc-rappel-ic--point  { background: #dbeafe; color: #1d4ed8; }
.ws-mc-rappel-text { flex: 1; color: var(--text); }
.ws-mc-rappel-arrow { color: var(--text3); }
.ws-mc-quickfilters-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ws-mc-qf {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text2);
  font-size: 11px; cursor: pointer; font-family: inherit;
}
.ws-mc-qf:hover { border-color: var(--brand); color: var(--text); }
.ws-mc-qf.is-active { background: var(--text); color: #fff; border-color: var(--text); }

/* Polish Communication Vue d'ensemble (post-v1.0.0 / #178) */
.ws-cv-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-cv-recent-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ws-cv-recent-item:last-child { border-bottom: none; }
.ws-cv-recent-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #d1fae5; color: #065f46;
}
.ws-cv-recent-ic--brouillon     { background: #dbeafe; color: #1d4ed8; }
.ws-cv-recent-ic--en-preparation{ background: #fef3c7; color: #92400e; }
.ws-cv-recent-ic--archivee      { background: #e5e7eb; color: #4b5563; }
.ws-cv-recent-body { flex: 1; min-width: 0; }
.ws-cv-recent-title { font-size: 12px; font-weight: 600; color: var(--text); }
.ws-cv-recent-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
.ws-cv-recent-time { font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }

/* Refonte Vue d'ensemble Communication (#319) — 5 KPI + grilles + activité +
   actions rapides. */
.ws-comm-kpis {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 1280px) { .ws-comm-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ws-comm-kpis { grid-template-columns: 1fr; } }
.ws-comm-kpi {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px;
}
.ws-comm-kpi-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-2);
}
.ws-comm-kpi-ic--total          { background: #fde8e8; color: #b3261e; }
.ws-comm-kpi-ic--diffusee       { background: #dcfce7; color: #15803d; }
.ws-comm-kpi-ic--en-preparation { background: #ffedd5; color: #c2410c; }
.ws-comm-kpi-ic--brouillon      { background: #dbeafe; color: #1d4ed8; }
.ws-comm-kpi-ic--archivee       { background: #eceef1; color: #4b5563; }
.ws-comm-kpi-body { flex: 1; min-width: 0; }
.ws-comm-kpi-label { font-size: 11px; color: var(--text2); font-weight: 600; }
.ws-comm-kpi-num { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.15; margin-top: 2px; }
.ws-comm-kpi-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ws-comm-kpi-sub--up { color: #15803d; font-weight: 600; }
.ws-comm-kpi-donut { position: relative; flex-shrink: 0; display: grid; place-items: center; }
.ws-comm-kpi-donut-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--text);
}

.ws-comm-overview-grid,
.ws-comm-bottom-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.ws-comm-overview-grid { grid-template-columns: repeat(3, 1fr); }
.ws-comm-bottom-grid   { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 1100px) {
  .ws-comm-overview-grid { grid-template-columns: 1fr; }
  .ws-comm-bottom-grid   { grid-template-columns: 1fr; }
}
.ws-comm-link {
  background: none; border: none; color: var(--brand-2); font-family: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.ws-comm-link:hover { text-decoration: underline; }

/* Activité récente */
.ws-comm-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ws-comm-activity-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-comm-filter-select {
  font-family: inherit; font-size: 11.5px; color: var(--text2);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; cursor: pointer;
}
.ws-comm-filter-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-comm-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ws-comm-activity-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 2px;
  border-bottom: 1px solid var(--border);
}
.ws-comm-activity-item:last-child { border-bottom: none; }
.ws-comm-activity-item:hover { background: var(--brand-soft); }
.ws-comm-activity-time {
  font-size: 11px; font-weight: 700; color: var(--brand-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; min-width: 86px;
}
.ws-comm-activity-body { flex: 1; min-width: 0; }
.ws-comm-activity-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-comm-activity-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.ws-comm-activity-avatar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-2);
}

/* Actions rapides */
.ws-comm-quick { display: flex; flex-direction: column; gap: 8px; }
.ws-comm-quick-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.ws-comm-quick-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.ws-comm-quick-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
}
.ws-comm-quick-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-comm-quick-txt strong { font-size: 13px; color: var(--text); font-weight: 600; }
.ws-comm-quick-txt small { font-size: 11px; color: var(--text3); }
.ws-comm-quick-chev { flex-shrink: 0; color: var(--text3); font-size: 18px; line-height: 1; }

/* Sections de stage workspace. Toggle via showStage() (style.display).
   Le contenu fonctionnel est injecté par les wireWsX() au fil des lots V2.x. */
.ws-stage { display: block; }
.ws-stage[hidden] { display: none; }
.ws-stage-placeholder {
  margin: 24px 0;
  padding: 48px 24px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text2);
}
.ws-stage-placeholder h2 {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 8px 0;
}
.ws-stage-placeholder p { margin: 0; font-size: 14px; }
.ws-stage-placeholder strong { color: var(--brand-2); }
/* Spacer qui pousse les KPIs vers le bord droit. */
.ws-crisis-spacer { flex: 1; min-width: 12px; }
/* Séparateur vertical fin entre les blocs (top brand-soft). */
.ws-crisis-divider {
  width: 1px; align-self: stretch;
  background: rgba(158,27,27,.14);
  flex-shrink: 0;
  margin: 4px 0;
}
/* KPIs Synthèse — chaque carte sur fond blanc avec radius + bordure
   colorée en bas pour identifier la sévérité (cf. maquette mai 2026). */
.ws-crisis-kpis {
  display: flex; gap: 12px;
  flex-shrink: 0; margin-left: auto;
}
.ws-crisis-kpis .ws-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px 10px;
  gap: 10px;
  min-width: 130px;
}
.ws-crisis-kpis .ws-stat--brand  { border-bottom-color: var(--brand); }
.ws-crisis-kpis .ws-stat--orange { border-bottom-color: #f97316; }
.ws-crisis-kpis .ws-stat--green  { border-bottom-color: #16a34a; }
/* Reset la bordure verticale héritée du `.ws-stat` groupé original. */
.ws-crisis-kpis .ws-stat + .ws-stat { border-left: 1px solid var(--border); }
.ws-crisis-kpis .ws-stat-ic    { width: 32px; height: 32px; border-radius: 8px; }
.ws-crisis-kpis .ws-stat-ic svg{ width: 16px; height: 16px; }
.ws-crisis-kpis .ws-stat-num   { font-size: 28px; margin-top: 0; font-weight: 800; line-height: 1; }
.ws-crisis-kpis .ws-stat-label { font-size: 12px; margin-top: 6px; }
.ws-crisis-kpis .ws-stat-sub   { font-size: 11px; }
/* Pill rouge « CRISE CRITIQUE » placée AU-DESSUS du titre dans le headline.
   Affichée comme un chip plein avec icône flamme à gauche (cf. maquette). */
.ws-crisis-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: #fff; color: var(--brand);
  border: 1px solid rgba(158,27,27,.22);
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ws-crisis-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); display: inline-block;
  box-shadow: 0 0 0 3px rgba(158,27,27,.18);
}
.ws-crisis-title {
  font-size: 23px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text); margin: 0; line-height: 1.25;
}
.ws-crisis-desc {
  font-size: 13.5px; color: var(--text2);
  margin: 32px 0 4px;
  /* Aligné sur le début du titre = largeur de l'icône (80px) + gap de la
     row-main (28px). Cf. retour user mai 2026. */
  padding-left: calc(80px + 28px);
  line-height: 1.65;
  white-space: pre-line; /* respecte les sauts de ligne du seed */
  max-width: none;
}
/* Chip phase — gardée pour compat data mais hidden par défaut dans la
   nouvelle maquette (info couverte par la pill statut global du strip). */
.ws-crisis-pill--phase {
  margin-top: 10px;
  background: var(--brand-soft);
  color: var(--brand-2);
  border: 1px solid var(--brand);
  font-weight: 700;
}
.ws-crisis-pill--phase::before { display: none; }
.ws-crisis-pill--phase[hidden] { display: none; }
.ws-crisis-pill--phase[data-ws-phase-pill=""] { display: none; }

/* ── Strip bas (fond blanc) ──
   Bandeau d'état opérationnel : niveau 1-5, périmètre, statut global,
   dernière maj + CTA dispositif. Disposé en flex horizontal. */
.ws-crisis-strip {
  display: flex; align-items: center;
  gap: 20px;
  background: var(--bg2);
  padding: 16px 28px;
}
.ws-crisis-strip-block {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ws-crisis-strip-sep {
  width: 1px; height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
.ws-crisis-strip-spacer { flex: 1; min-width: 8px; }
.ws-crisis-strip-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3);
}
.ws-crisis-strip-value {
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
}
.ws-crisis-strip-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-crisis-strip-row { display: inline-flex; align-items: center; gap: 8px; }
.ws-crisis-strip-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Jauge niveau 1-5 (cellules rondes alignées). La cellule courante est
   marquée par `.ws-niveau-cell--active` (fond brand + texte blanc) ; les
   autres restent en outline neutre. */
.ws-niveau-gauge {
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-niveau-cell {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--border);
}
.ws-niveau-cell--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Pill statut global (yellow/orange/green selon statut). Reprend la palette
   crises-sev pour rester cohérent. */
.ws-crisis-statut-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: #fef9c3; color: #a16207;
}
.ws-crisis-statut-pill[data-statut="ouverte"]  { background: #fed7aa; color: #9a3412; }
.ws-crisis-statut-pill[data-statut="en-cours"] { background: #fef9c3; color: #a16207; }
.ws-crisis-statut-pill[data-statut="cloturee"] { background: #dcfce7; color: #15803d; }

/* Indicateur « En temps réel » avec dot vert pulsé. */
.ws-crisis-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text2);
}
.ws-crisis-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #15803d;
  box-shadow: 0 0 0 0 rgba(21, 128, 61, .55);
  animation: ws-crisis-live-pulse 1.8s ease-out infinite;
}
@keyframes ws-crisis-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21, 128, 61, .55); }
  100% { box-shadow: 0 0 0 7px rgba(21, 128, 61, 0); }
}

/* CTA principal — bouton rouge plein avec flèche. */
.ws-crisis-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--brand);
  transition: background .15s, border-color .15s, transform .15s;
}
.ws-crisis-cta:hover { background: var(--brand-2); border-color: var(--brand-2); }
.ws-crisis-cta:active { transform: translateY(1px); }

/* Bouton secondaire « Voir l'équipe de crise » (sous le nom du directeur). */
.ws-crisis-team-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ws-crisis-team-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border2); }
.ws-crisis-team-btn svg { color: var(--text3); }
.ws-crisis-team-btn:hover svg { color: var(--brand-2); }
.ws-crisis-phase { font-size: 12.5px; color: var(--text2); }
.ws-crisis-phase strong { color: var(--text); font-weight: 700; }

.ws-metric { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.ws-metric-ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: #fff; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Variante « plat » — pas de fond derrière l'icône, juste l'icône line à plat
   sur le fond brand-soft (cf. maquette « Démarré »). */
.ws-metric-ic--flat { background: transparent; color: var(--text3); width: auto; height: auto; }
.ws-metric > div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ws-metric-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3);
}
.ws-metric-value { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 5px; }
/* Variante XL — heure d'ouverture en gros rouge (mockup mai 2026).
   Ligne dédiée, line-height serré pour s'aligner avec « Démarrée le ». */
.ws-metric-value--xl {
  font-size: 26px; font-weight: 800; color: var(--brand);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
}
/* Hook DOM pour les initials du leader — gardé hidden pour compat data
   (anciens callsites lisent `data-ws-leader-initials`). */
.ws-metric-value--hidden { display: none; }
.ws-metric-extra { font-size: 12.5px; color: var(--text2); margin-top: 1px; }
.ws-metric-extra--brand { font-size: 14.5px; font-weight: 700; color: var(--brand-2); }
.ws-metric-foot { font-size: 10.5px; color: var(--text3); margin-top: 6px; }
/* Pastille horaire (sous la date de démarrage) — fond neutre, coin doux. */
.ws-metric-pill {
  display: inline-block; width: fit-content;
  margin-top: 5px;
  padding: 2px 8px;
  background: var(--bg3);
  border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
/* Avatar rond avec dot de statut — utilisé pour la Directrice de crise. */
.ws-metric-avatar {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg3);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  flex-shrink: 0;
}
.ws-metric-avatar-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: var(--brand);
  border: 2px solid var(--brand-soft);
  border-radius: 50%;
}

/* ── Layout 2 colonnes ── */
.ws-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  flex: 1; min-height: 0; /* permet aux deux colonnes d'avoir un scroll interne */
}

.ws-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.ws-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ws-card-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2);
  margin: 0;
}
.ws-card-sub {
  font-size: 11.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--text3); margin-left: 4px;
}

.ws-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--brand-2); text-decoration: none;
  white-space: nowrap;
  transition: gap .15s;
}
.ws-link:hover { text-decoration: underline; gap: 9px; }

.ws-side {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 0;
  overflow-y: auto;
}

/* ── Main courante (toolbar + list + composer) ──
   Card pleine hauteur : toolbar et composer figés, liste scrollable. */
.ws-mc { min-height: 0; height: 100%; }
.ws-mc-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* Recherche : voir `.ui-search` (primitive partagée). Filtres dropdown
   à chevron : voir `.ui-select`. `.ws-filter-btn` ne sert plus que pour
   le bouton d'action « Filtres » (pas de chevron). */
.ws-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text2);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.ws-filter-btn:hover { background: var(--bg); border-color: var(--border2); color: var(--text); }
.ws-filter-btn svg { color: var(--text3); flex-shrink: 0; }

.ws-mc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.ws-mc-item {
  display: grid;
  grid-template-columns: 56px 24px 1fr;
  gap: 6px;
  padding: 10px 0;
  align-items: flex-start;
}
.ws-mc-time {
  font-size: 12px; color: var(--text3);
  text-align: right; padding-top: 4px;
  line-height: 1.3;
}
.ws-mc-rail {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px;
  align-self: stretch;
}
.ws-mc-rail::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: -16px;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}
.ws-mc-list li:last-child .ws-mc-rail::before { display: none; }
.ws-mc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text3);
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--bg2);
}
.ws-mc-item--event    .ws-mc-dot { background: var(--brand); }
.ws-mc-item--decision .ws-mc-dot,
.ws-mc-item--warning  .ws-mc-dot { background: #f97316; }
.ws-mc-item--action   .ws-mc-dot,
.ws-mc-item--comm     .ws-mc-dot { background: #94a3b8; }

.ws-mc-body { display: flex; flex-direction: column; min-width: 0; }
.ws-mc-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ws-mc-ic {
  display: inline-flex; flex-shrink: 0;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  color: var(--text2);
  margin-top: 1px;
}
.ws-mc-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-mc-tt { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.ws-mc-sub { font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.ws-mc-chip {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  background: var(--bg3); color: var(--text2);
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  margin-top: 4px; margin-right: 4px;
}
.ws-mc-tag {
  flex-shrink: 0; align-self: flex-start;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
  background: var(--bg3); color: var(--text2);
}
.ws-mc-item--event    .ws-mc-tag { background: var(--brand-soft); color: var(--brand-2); }
.ws-mc-item--decision .ws-mc-tag { background: #fef3c7; color: #b45309; }
.ws-mc-item--warning  .ws-mc-tag { background: #ffedd5; color: #c2410c; }
.ws-mc-item--action   .ws-mc-tag { background: #dbeafe; color: #1d4ed8; }
.ws-mc-item--comm     .ws-mc-tag { background: #dbeafe; color: #1d4ed8; }

.ws-mc-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.ws-mc-input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit; font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ws-mc-input::placeholder { color: var(--text3); }
.ws-mc-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ws-mc-attach,
.ws-mc-send {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text2); cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.ws-mc-send { background: var(--brand); color: #fff; border-color: var(--brand); }
.ws-mc-attach:hover { background: var(--bg3); border-color: var(--border2); color: var(--text); }
.ws-mc-send:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* ── Synthèse ── */
.ws-synth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
/* Tuile KPI : pastille icône à gauche alignée en haut avec le chiffre.
   Bloc texte à droite empilé (chiffre → label → sub). Séparateurs verticaux
   entre tuiles. Chiffre coloré assorti à l'icône.
   La card est dans la colonne droite ~520px : tailles calibrées pour 4 tuiles
   sans wrap des labels usuels (max ~22 caractères). */
.ws-stat {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 14px;
  min-width: 0;
}
.ws-stat:first-child { padding-left: 4px; }
.ws-stat:last-child  { padding-right: 4px; }
.ws-stat + .ws-stat { border-left: 1px solid var(--border); }

.ws-stat-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ws-stat-ic svg { width: 20px; height: 20px; }
.ws-stat--brand  .ws-stat-ic { background: var(--brand-soft); color: var(--brand-2); }
.ws-stat--orange .ws-stat-ic { background: #ffedd5; color: #c2410c; }
.ws-stat--green  .ws-stat-ic { background: #dcfce7; color: #15803d; }
.ws-stat--blue   .ws-stat-ic { background: #dbeafe; color: #1d4ed8; }

.ws-stat-text { min-width: 0; display: flex; flex-direction: column; }
.ws-stat-num {
  font-size: 28px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px; /* aligne approximativement avec le haut de l'icône */
}
.ws-stat--brand  .ws-stat-num { color: var(--brand-2); }
.ws-stat--orange .ws-stat-num { color: #c2410c; }
.ws-stat--green  .ws-stat-num { color: #15803d; }
.ws-stat--blue   .ws-stat-num { color: #1d4ed8; }

.ws-stat-label { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 6px; line-height: 1.3; }
.ws-stat-sub   { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* ── Prochains points ──
   Ligne : heure (label + heure en gros) | divider vertical | corps | chip | chev.
   Footer : pastille ampoule + corps "À venir" + bouton "Voir le calendrier". */
.ws-points-list { list-style: none; margin: 0; padding: 0; }
.ws-points-list .ws-point {
  display: grid;
  grid-template-columns: 110px 1px 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.ws-points-list .ws-point:last-child { border-bottom: none; }

.ws-point-when { display: flex; flex-direction: column; gap: 2px; }
.ws-point-day  { font-size: 12.5px; color: var(--text2); font-weight: 500; }
.ws-point-time {
  font-size: 20px; font-weight: 700; color: var(--text);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.ws-point-divider {
  width: 1px; align-self: stretch;
  background: var(--border);
}

.ws-point-body { min-width: 0; }
.ws-point-tt   { font-size: 14px; font-weight: 700; color: var(--text); }
.ws-point-sub  { font-size: 12.5px; color: var(--text2); margin-top: 2px; }

.ws-point-chev {
  color: var(--text3);
  display: inline-flex; align-items: center;
}

/* Chips génériques (statut / niveau) */
.ws-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.ws-chip--blue    { background: #dbeafe; color: #1d4ed8; }
.ws-chip--green   { background: #dcfce7; color: #15803d; }
.ws-chip--orange  { background: #ffedd5; color: #c2410c; }
.ws-chip--yellow  { background: #fef9c3; color: #a16207; }
.ws-chip--neutral { background: var(--bg3); color: var(--text2); padding: 5px 10px; }

/* Footer "À venir + Voir le calendrier" — pastille icône (ampoule) à gauche,
   bouton bordé à droite. */
.ws-points-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.ws-points-foot-ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg3);
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ws-points-foot-body { flex: 1; min-width: 0; }
.ws-points-foot-tt   { font-size: 14px; font-weight: 700; color: var(--text); }
.ws-points-foot-sub  { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.ws-points-foot-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg2);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.ws-points-foot-btn:hover { background: var(--bg3); border-color: var(--border2); }
.ws-points-foot-btn svg { color: var(--text2); }

/* ── Plan d'actions ── */
.ws-plan-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
}
.ws-plan-cell { text-align: center; min-width: 0; }
.ws-plan-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.ws-plan-cell--orange .ws-plan-num { color: #c2410c; }
.ws-plan-cell--brand  .ws-plan-num { color: var(--brand-2); }
.ws-plan-cell--green  .ws-plan-num { color: #15803d; }
.ws-plan-label { font-size: 11px; color: var(--text2); margin-top: 4px; }

.ws-plan-list { list-style: none; margin: 0; padding: 0; }
.ws-plan-list li { border-top: 1px solid var(--border); }
.ws-plan-list li:first-child { border-top: none; }
.ws-task {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 10px 0;
  cursor: pointer;
}
.ws-task input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--text3);
  border-radius: 4px;
  cursor: pointer;
  display: inline-grid; place-content: center;
  background: #fff;
  flex-shrink: 0;
}
.ws-task input[type="checkbox"]:checked {
  background: var(--brand); border-color: var(--brand);
}
.ws-task input[type="checkbox"]:checked::after {
  content: ''; width: 8px; height: 5px;
  border: 1.5px solid #fff; border-top: none; border-right: none;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ws-task-body { display: flex; flex-direction: column; min-width: 0; }
.ws-task-tt { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; }
.ws-plan-list li.is-done .ws-task-tt { text-decoration: line-through; color: var(--text3); }
.ws-task-sub { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.ws-task-when { font-size: 11.5px; color: var(--text2); white-space: nowrap; text-align: right; line-height: 1.3; }
.ws-task-when small { color: var(--text3); display: block; font-size: 10.5px; }
.ws-task-more {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text3);
  border-radius: 6px; cursor: pointer;
}
.ws-task-more:hover { background: var(--bg3); color: var(--text); }

/* ── Cellules affectées ── */
.ws-cells-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-cells-list li {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* Bouton « Ouvrir la cellule » — icône flèche, à l'extrême droite de la ligne. */
.ws-cells-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  border-radius: 8px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.ws-cells-go:hover { background: var(--bg3); border-color: var(--border2); color: var(--text); }
.ws-cells-ic {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ws-cells-ic--ops  { background: var(--brand-soft); color: var(--brand-2); }
.ws-cells-ic--comm { background: #dcfce7; color: #15803d; }
.ws-cells-body { min-width: 0; }
.ws-cells-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-cells-tt { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ws-cells-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.ws-cells-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.ws-cells-foot { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ws-cells-foot-l { font-size: 11.5px; color: var(--text2); }
.ws-cells-foot-v { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; }

/* ── Footer status bar ── */
.ws-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text2);
  margin-top: auto;
}
.ws-footer-l { display: inline-flex; align-items: center; gap: 6px; }
.ws-footer-l svg { color: var(--text3); }
.ws-footer-r { display: inline-flex; align-items: center; gap: 8px; }
.ws-footer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #15803d;
}

/* Focus-visible — `input` exclu du catch-all : le seul input du
   workspace est `.ui-search input` dont le focus est piloté par le
   conteneur. Voir la note jumelle dans la vue crises. */
#workspace-view a:focus-visible,
#workspace-view button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Responsive (workspace plutôt desktop, fallback raisonnable) */
@media (max-width: 1280px) {
  .ws-crisis { margin-right: 0; }
  .ws-topbar { position: static; align-self: flex-end; margin: -6px 0 -4px; }
  .ws-cols { grid-template-columns: 1fr; }
  .ws-crisis-row-main { flex-wrap: wrap; }
  .ws-crisis-kpis { margin-left: 0; }
}
@media (max-width: 900px) {
  .ws-shell { grid-template-columns: 1fr; }
  .ws-sidebar { display: none; }
  .ws-crisis-top { padding: 16px; }
  .ws-crisis-row-main { gap: 14px; }
  .ws-crisis-icon { width: 56px; height: 56px; }
  .ws-crisis-icon svg { width: 28px; height: 28px; }
  .ws-crisis-desc { padding-left: calc(56px + 14px); }
  .ws-crisis-divider { display: none; }
  .ws-crisis-kpis { flex-wrap: wrap; gap: 8px; }
  .ws-crisis-kpis .ws-stat { flex: 1 1 calc(50% - 8px); }
  .ws-crisis-strip { flex-wrap: wrap; row-gap: 12px; padding: 12px 16px; }
  .ws-crisis-strip-sep { display: none; }
  .ws-crisis-cta { margin-left: auto; }
  .ws-synth-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-plan-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE DOCUMENTS — #/documents (centre documentaire du dispositif).
   Namespace .docs-*. Réutilise .home-card et les tokens de la charte
   (mêmes patterns que la vue Crises : header + barre de filtres + cards).
   ═══════════════════════════════════════════════════════════════════════ */
.docs { display: flex; flex-direction: column; gap: 18px; }

/* ── En-tête : titre + lede + actions ── */
.docs-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.docs-head-titles { flex: 1 1 320px; min-width: 240px; }
.docs-head-titles h1 {
  margin: 0 0 8px;
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text);
}
.docs-head-titles p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2);
}
.docs-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.docs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.docs-btn:hover { background: var(--bg); border-color: var(--border2); }
.docs-btn svg { color: var(--text2); flex-shrink: 0; }
.docs-btn--cta {
  background: var(--brand); border-color: var(--brand); color: #fff;
  padding-left: 12px;
}
.docs-btn--cta:hover { background: var(--brand-2); border-color: var(--brand-2); }
.docs-btn--cta svg { color: #fff; }
.docs-btn-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
}

/* ── Barre de filtres (card claire, recherche pleine largeur + 3 selects) ── */
/* Bandeau de filtres docs : conteneur layout uniquement, PAS de fond
   blanc (sinon les `.ui-search`/`.ui-select` blancs disparaissent). On
   garde juste padding et gap. Pattern identique à `.crises-head-actions`
   et `.ws-mc-toolbar` : les composants partagés se posent directement
   sur le fond de page (`--bg`). */
.docs-filters {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
  flex-wrap: wrap;
}
/* Recherche + dropdowns filtres : voir `.ui-search` et `.ui-select`
   (primitives partagées, namespace `.ui-*`). PAS d'override ici — la
   pill `.ui-search` garde son `flex: 1 1 280px` par défaut, ce qui
   suffit dans le contexte du bandeau filtres intégré à la colonne
   principale (`.docs-main`). Si la rangée déborde, `flex-wrap: wrap`
   sur `.docs-filters` fait wrapper proprement (la search prend une
   ligne, les 3 selects la suivante). */

/* ── Layout 2 colonnes ── */
.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.docs-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.docs-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* La card de la vue documents hérite de .home-card mais on resserre un peu
   le padding interne pour densifier la liste + la grille de cadres. */
.docs-card { padding: 22px 24px; }
.docs-side-card { padding: 20px 22px; }

/* ── Cadres opérationnels (6 tuiles) ── */
.docs-frames {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.docs-frame {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, opacity .15s, transform .08s;
  min-width: 0;
}
.docs-frame:hover { border-color: var(--border2); background: var(--bg); }
.docs-frame:active { transform: scale(.99); }
.docs-frame.is-active { border-color: var(--brand); background: var(--brand-soft); }
.docs-frame.is-dim { opacity: .45; }
.docs-frame.is-dim:hover { opacity: 1; }
.docs-model { cursor: pointer; transition: background .12s, opacity .15s; }
.docs-model:hover { background: var(--bg); }
.docs-model.is-active { background: var(--brand-soft); }
.docs-model.is-dim { opacity: .45; }
.docs-model.is-dim:hover { opacity: 1; }
/* `display: flex` (héritée de la règle de base .docs-model) écrase le
   `display: none` que le user-agent applique à [hidden] — rétablir. */
.docs-model[hidden] { display: none; }
.docs-frame-ic {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.docs-frame-ic--brand  { background: var(--brand-soft); color: var(--brand-2); }
.docs-frame-ic--purple { background: #ede9fe; color: #6d28d9; }
.docs-frame-ic--orange { background: #ffedd5; color: #c2410c; }
.docs-frame-ic--green  { background: #dcfce7; color: #15803d; }
.docs-frame-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.docs-frame-ic--slate  { background: #e8eaed; color: #475569; }
.docs-frame-tt {
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  color: var(--text);
}
.docs-frame-sub {
  font-size: 11px; color: var(--text2);
  margin-top: -2px;
}

/* ── Onglets de la liste (Récents / Favoris / Partagés) ── */
.docs-tabs {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border);
  margin: -4px -8px 4px;
  padding: 0 8px;
}
.docs-tab {
  position: relative;
  padding: 12px 14px 14px;
  background: transparent; border: none;
  color: var(--text2);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: color .15s;
}
.docs-tab:hover { color: var(--text); }
/* Onglet actif (charte v2) : texte + sous-ligne du même rouge brique,
   sous-ligne épaissie à 3px pour rester lisible sur les écrans denses. */
.docs-tab.is-active { color: var(--brand); }
.docs-tab.is-active::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* ── Table de documents ── */
/* Aligné sur .annuaire-table (#210). */
.docs-table-wrap { overflow-x: auto; margin-top: 14px; }
.docs-table { width: 100%; border-collapse: collapse; }
.docs-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;
}
.docs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-table tbody tr:hover td { background: var(--bg); }
.docs-table tbody tr.is-active td { background: var(--brand-soft); }
.docs-table tbody tr.is-active:hover td { background: var(--brand-soft); }
.docs-th-fav { width: 36px; }
.docs-th-num { width: 80px; }

/* Lignes cliquables — pattern factorisé (cf. wireCrisisRows). */
.docs-row-clickable { cursor: pointer; }
.docs-row-clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Étoile favori */
.docs-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--text3);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.docs-star:hover { background: var(--bg3); color: var(--text2); }
.docs-star.is-active { color: var(--brand); }
.docs-star.is-active svg { fill: currentColor; }
.docs-star.is-active:hover { color: var(--brand-2); }

/* État vide « aucun favori » (onglet Favoris) — ligne unique injectée par
   js/app.js#wireDocsTabs, visible quand l'onglet Favoris est actif et que
   plus aucune ligne du tbody n'est marquée comme favori. */
.docs-empty-row td {
  padding: 28px 16px;
  text-align: center;
  font-size: 13.5px; color: var(--text2);
}

/* Document (icône + nom) */
.docs-doc { display: inline-flex; align-items: center; gap: 11px; }
.docs-doc-ic {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.docs-doc-ic--pdf    { background: #fee2e2; color: #b91c1c; }
.docs-doc-ic--sheet  { background: #dcfce7; color: #15803d; }
.docs-doc-ic--doc    { background: #dbeafe; color: #1d4ed8; }
.docs-doc-ic--orange { background: #ffedd5; color: #c2410c; }
.docs-doc-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.docs-doc-name { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* Chip catégorie — variantes alignées avec docs-frame-ic-* */
.docs-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.docs-chip--dir { background: var(--brand-soft); color: var(--brand-2); }
.docs-chip--ops { background: #ede9fe; color: #6d28d9; }
.docs-chip--com { background: #ffedd5; color: #c2410c; }
.docs-chip--hr  { background: #dcfce7; color: #15803d; }
.docs-chip--log { background: #dbeafe; color: #1d4ed8; }
.docs-chip--jur { background: #e8eaed; color: #475569; }

/* Propriétaire (avatar + nom) */
.docs-owner { display: inline-flex; align-items: center; gap: 9px; }
.docs-owner-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff;
  flex-shrink: 0;
}
.docs-owner-av--brand { background: var(--brand); }
.docs-owner-av--blue  { background: #1d4ed8; }
.docs-owner-name { font-size: 13px; color: var(--text); }

/* Badge statut */
.docs-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.docs-badge--ok     { background: #dcfce7; color: #15803d; }
.docs-badge--warn   { background: #ffedd5; color: #c2410c; }
.docs-badge--danger { background: #fee2e2; color: #b91c1c; }

/* Liens (cellules associées) */
.docs-links {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text2); font-size: 13px; font-weight: 500;
}
.docs-links svg { color: var(--text3); }

/* Actions (download / kebab) */
.docs-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.docs-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.docs-action:hover {
  background: var(--bg); border-color: var(--border);
  color: var(--text);
}
.docs-action--ghost { border-color: transparent; }
.docs-action--ghost:hover { border-color: var(--border); }

/* État désactivé pour .docs-action — pattern partagé avec
   .sidebar-nav a.is-disabled (#226). Utilisé sur les boutons « Télécharger »
   de la card Documents clés tant que la route file n'est pas câblée (#232). */
.docs-action.is-disabled,
.docs-action.is-disabled:hover {
  opacity: .4;
  pointer-events: none;
  cursor: default;
  border-color: transparent;
  background: transparent;
}
/* Variante action destructive (Supprimer) — rouge au hover pour
   signaler le caractère définitif sans alourdir l'état repos. */
.docs-action--danger:hover {
  color: var(--brand); border-color: var(--brand-soft); background: var(--brand-soft);
}

/* Pagination de la liste documents (count + pager + page size).
   Même grille 3-col que .annuaire-pager-row : count à gauche, pager
   centré, sélecteur page size à droite. */
.docs-pager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}
.docs-pager-count {
  margin: 0; font-size: 13px; color: var(--text2);
}
.docs-pager     { justify-self: center; }
.docs-pagesize  { justify-self: end; }

/* ── Colonne latérale : Modèles ── */
.docs-models {
  margin-top: 12px;
  list-style: none; padding: 0;
  display: flex; flex-direction: column;
}
.docs-model {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.docs-model:last-child { border-bottom: none; }
.docs-model-ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: #dbeafe; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.docs-model-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.docs-model-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.docs-model-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* ── Colonne latérale : État documentaire (donut + légende) ── */
.docs-health {
  margin-top: 14px;
  display: flex; align-items: center;
  /* Contenu centré dans la tuile (donut + légende collés ensemble au
     milieu) avec un gap resserré. */
  justify-content: center;
  gap: 16px;
}
/* Donut SECALYS — couleurs ok/warn/danger. Proportions : 79% / 14% / 6%
   ≈ 284° / 50° / 23° / + 3° de buffer pour le rendu. */
/* Donut rendu en SVG par js/app.js#renderDocsDonut() : un <path> par
   slice (catégorie), tooltip flottant `.ui-chart-tip` qui suit le
   curseur — pattern repris de SHIELD/charts.js, candidat @secalys/ui.
   Le wrapper conserve sa taille pour préserver le layout flex parent ;
   le texte central (186 / DOCUMENTS) est rendu dans l'SVG. */
.docs-donut {
  position: relative;
  width: 160px; height: 160px;
  flex-shrink: 0;
}
.docs-donut svg { display: block; width: 100%; height: 100%; }
.docs-donut path { cursor: pointer; transition: opacity .12s; }
.docs-donut path:hover { opacity: .82; }
/* Légende compacte : juste pastille + libellé. Les chiffres ne sont
   plus dans la légende — ils apparaissent dans le tooltip au survol
   d'une slice du graph (cf. retour utilisateur : « je veux que les
   chiffres s'affichent quand je passe la souris sur le graph »). */
.docs-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.docs-legend li {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}
.docs-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.docs-legend-dot--ok     { background: #22c55e; }
.docs-legend-dot--warn   { background: #f97316; }
.docs-legend-dot--danger { background: #dc2626; }
.docs-legend-lbl { color: var(--text); font-weight: 500; }

/* ── Colonne latérale : Espace utilisé (quota) ── */
.docs-quota { margin-top: 14px; }
.docs-quota-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.docs-quota-lbl { color: var(--text2); }
.docs-quota-val { color: var(--text); font-weight: 700; }
.docs-quota-bar {
  margin-top: 10px;
  height: 8px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
}
.docs-quota-fill {
  display: block; height: 100%;
  background: var(--text);
  border-radius: 999px;
}

/* Focus-visible — `input` exclu du catch-all : voir la note jumelle dans
   les vues crises et workspace. Les seuls inputs de docs sont des
   `.ui-search input` dont le focus est piloté par le conteneur. */
.docs a:focus-visible,
.docs button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Responsive — passe en 1 colonne sous 1100px, grille de cadres 3 puis 2. */
@media (max-width: 1280px) {
  .docs-frames { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side { flex-direction: row; flex-wrap: wrap; }
  .docs-side-card { flex: 1 1 280px; }
}
@media (max-width: 720px) {
  .docs-frames { grid-template-columns: repeat(2, 1fr); }
  .docs-head-actions .docs-btn { flex: 1; justify-content: center; }
  .docs-health { flex-direction: column; align-items: stretch; gap: 14px; }
  .docs-donut { align-self: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE CELLULES & ÉQUIPES — organisation de crise
   Réutilise au maximum les primitives existantes (.home-card, .ui-*,
   .docs-btn, .docs-owner, .docs-action, .docs-tabs). Classes namespacées
   .cellules-* propres à cette vue. Trois écrans :
     - master vue hiérarchique (liste accordion des cellules)
     - master vue par équipe (table flat des 78 équipes)
     - détail cellule (header riche + tabs + équipes + missions + sidebar)
   Bascule master↔detail pilotée en JS par data-cellules-mode sur .cellules.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── En-tête (même rendu que .docs-head) ── */
.cellules-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cellules-head-titles { flex: 1 1 320px; min-width: 240px; }
.cellules-head-titles h1 {
  margin: 0 0 8px;
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text);
}
.cellules-head-titles p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2);
}
.cellules-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bascule master / détail — pilotée par data-cellules-mode sur .cellules
   (cf. js/app.js wireCellulesView). */
.cellules[data-cellules-mode="master"] [data-cellules-detail] { display: none; }
.cellules[data-cellules-mode="detail"] [data-cellules-master] { display: none; }

/* ── KPI tiles ── */
.cellules-kpis {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cellules-kpi {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cellules-kpi-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cellules-kpi-ic--purple { background: #ede9fe; color: #6d28d9; }
.cellules-kpi-ic--orange { background: #ffedd5; color: #c2410c; }
.cellules-kpi-ic--green  { background: #dcfce7; color: #15803d; }
.cellules-kpi-ic--brand  { background: var(--brand-soft); color: var(--brand-2); }
.cellules-kpi-body { min-width: 0; }
.cellules-kpi-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.cellules-kpi-label { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }
.cellules-kpi-sub { font-size: 12px; color: var(--text3); margin-top: 1px; }

/* ── Layout 2 colonnes (réutilise le pattern docs) ── */
.cellules-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.cellules-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cellules-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cellules-side > div { display: flex; flex-direction: column; gap: 18px; }
.cellules-side > div[hidden] { display: none; }

/* Charte v2 : padding interne standard (22 24) pour TOUTES les cards du
   menu Cellules — détail (Équipes, Missions) comme master. Pour le pattern
   master où les onglets « Vue hiérarchique / Vue par équipe » sont posés
   au ras du haut de la card et débordent latéralement via marges
   négatives, on rabaisse uniquement le padding-top via :has() (Chrome 105+,
   FF 121+, Safari 15.4+). Sinon le titre des cards détail toucherait le
   bord supérieur — bug observé en CR sur la maquette v2. */
.cellules-card { /* hérite de .home-card : padding 22px 24px */ }
.cellules-card:has(> .cellules-tabs:first-child) { padding-top: 0; }
.cellules-side-card { padding: 18px 20px; }

/* ── Tabs (réutilise .docs-tabs) — variante avec marges propres ── */
.cellules-tabs { margin: 0 -24px 0; padding: 0 24px; }

/* ── Barre de filtres ── */
.cellules-filters {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 14px;
  flex-wrap: wrap;
}
.cellules-toggle-btn,
.cellules-export-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cellules-toggle-btn:hover,
.cellules-export-btn:hover { background: var(--bg); border-color: var(--border2); color: var(--text); }

/* ── Liste hiérarchique (cellules accordéon) ── */
.cellules-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cellules-list--sub { margin-top: 14px; }
.cellules-row {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 40px minmax(0, 1fr) auto auto auto 28px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.cellules-row:hover { background: var(--bg); border-color: var(--border2); }
.cellules-row:active { transform: scale(.995); }
.cellules-row--static { cursor: default; }
.cellules-row--static:hover { background: var(--bg2); border-color: var(--border); }
.cellules-row-chev { display: inline-flex; color: var(--text3); }
.cellules-row-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cellules-row-ic--sm { width: 30px; height: 30px; border-radius: 8px; }
.cellules-row-ic--brand       { background: var(--brand-soft); color: var(--brand-2); }
.cellules-row-ic--brand-light { background: #fee2e2; color: #b91c1c; }
.cellules-row-ic--purple      { background: #ede9fe; color: #6d28d9; }
.cellules-row-ic--orange      { background: #ffedd5; color: #c2410c; }
.cellules-row-ic--green       { background: #dcfce7; color: #15803d; }
.cellules-row-ic--blue        { background: #dbeafe; color: #1d4ed8; }
.cellules-row-ic--slate       { background: #e8eaed; color: #475569; }
.cellules-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cellules-row-tt { font-size: 14px; font-weight: 700; color: var(--text); }
.cellules-row-sub {
  font-size: 12.5px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellules-row-stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text2);
  white-space: nowrap;
}
.cellules-row-stat svg { color: var(--text3); }
.cellules-row-more {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text3);
}

/* ── Badge statut (cellules / équipes) ── */
.cellules-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.cellules-badge--ok   { background: #dcfce7; color: #15803d; }
.cellules-badge--warn { background: #ffedd5; color: #c2410c; }
.cellules-badge--off  { background: #e8eaed; color: #475569; }

/* ── Chip cellule (rendu en table vue par équipe) ── */
.cellules-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.cellules-chip--brand   { background: var(--brand-soft); color: var(--brand-2); }
.cellules-chip--purple  { background: #ede9fe; color: #6d28d9; }
.cellules-chip--orange  { background: #ffedd5; color: #c2410c; }
.cellules-chip--green   { background: #dcfce7; color: #15803d; }
.cellules-chip--blue    { background: #dbeafe; color: #1d4ed8; }
.cellules-chip--slate   { background: #e8eaed; color: #475569; }

/* ── Avatars (variantes complémentaires à .docs-owner-av) ── */
.cellules-av--green  { background: #15803d; }
.cellules-av--orange { background: #c2410c; }

/* ── Table « vue par équipe » ── */
.cellules-team-count {
  margin: 14px 0 8px;
  font-size: 12.5px; color: var(--text2); font-weight: 600;
}
/* Aligné sur .annuaire-table (#210). */
.cellules-team-tablewrap { overflow-x: auto; }
.cellules-team-table { width: 100%; border-collapse: collapse; }
.cellules-team-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;
}
.cellules-team-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.cellules-team-table tbody tr:last-child td { border-bottom: none; }
.cellules-team-table tbody tr { cursor: pointer; }
.cellules-team-table tbody tr:hover td { background: var(--bg); }
.cellules-team-table tbody tr.is-active td { background: var(--brand-soft); }
.cellules-team-table tbody tr.is-active:hover td { background: var(--brand-soft); }
/* Typo « row-stat » (12.5 px / --text2) appliquée à la cellule « Responsable »
   pour qu'elle soit lue avec la même intensité visuelle que « Membres » (qui
   utilise déjà .cellules-row-stat). Cohérence inter-colonnes. */
.cellules-team-table .docs-owner-name {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 400;
}
.cellules-team-doc { display: inline-flex; align-items: center; gap: 12px; }
.cellules-team-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cellules-team-sub {
  font-size: 12px; color: var(--text2);
  margin-top: 2px;
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellules-team-members { font-size: 13px; color: var(--text); font-weight: 500; }

/* ═══════ Sidebar (master) ═══════ */
.cellules-side-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.cellules-side-head-ic {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.cellules-side-title {
  font-size: 14.5px; font-weight: 700; color: var(--text); margin: 0;
}
.cellules-side-text {
  font-size: 13px; line-height: 1.55; color: var(--text2);
  margin: 0;
}
.cellules-side-link { margin-top: 12px; color: var(--brand-2); }

/* Référents */
.cellules-refs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.cellules-ref { display: flex; align-items: center; gap: 11px; }
.cellules-ref .docs-owner-av { width: 32px; height: 32px; font-size: 12px; }
.cellules-ref-meta { display: flex; flex-direction: column; min-width: 0; }
.cellules-ref-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cellules-ref-role { font-size: 12px; color: var(--text2); margin-top: 1px; }

/* Documents clés / associés */
.cellules-keydocs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; }
.cellules-keydoc {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.cellules-keydoc:last-child { border-bottom: none; }
.cellules-keydoc-ic {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Couleurs d'icône par type de fichier (charte v2). */
.cellules-keydoc-ic--pdf   { background: #fee2e2; color: #b91c1c; }
.cellules-keydoc-ic--docx  { background: #dbeafe; color: #1d4ed8; }
.cellules-keydoc-ic--xlsx  { background: #dcfce7; color: #15803d; }
.cellules-keydoc-ic--pptx  { background: #ffedd5; color: #c2410c; }
.cellules-keydoc-ic--image { background: #ede9fe; color: #6d28d9; }
.cellules-keydoc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cellules-keydoc-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cellules-keydoc-sub { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
/* Charte v2 : 2 actions par document (download + kebab). */
.cellules-keydoc-actions {
  display: inline-flex; gap: 2px;
  flex-shrink: 0;
}
.cellules-keydoc-actions .docs-action {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cellules-keydoc-actions .docs-action:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.cellules-side-cta {
  display: block; text-align: center;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.cellules-side-cta:hover { background: var(--bg); border-color: var(--border2); }

/* Empty state (sidebar vue par équipe) */
.cellules-empty {
  margin-top: 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px;
  padding: 18px 8px;
}
.cellules-empty-ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg3); color: var(--text3);
  display: inline-flex; align-items: center; justify-content: center;
}
.cellules-empty-tt { font-size: 13px; font-weight: 700; color: var(--text); }
.cellules-empty-sub { font-size: 12px; line-height: 1.5; color: var(--text2); margin-top: 4px; }

/* Activité récente */
.cellules-activity { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cellules-activity-item { display: flex; align-items: flex-start; gap: 11px; }
.cellules-activity-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cellules-activity-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.cellules-activity-ic--green  { background: #dcfce7; color: #15803d; }
.cellules-activity-ic--orange { background: #ffedd5; color: #c2410c; }
.cellules-activity-ic--ok     { background: #dcfce7; color: #15803d; }
.cellules-activity-body { min-width: 0; }
.cellules-activity-tt { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.cellules-activity-sub { font-size: 11.5px; color: var(--text2); margin-top: 2px; }

/* Filtres rapides (sidebar vue par équipe) — selects natifs simples,
   suffisent ici (pas de personnalisation lourde nécessaire). */
.cellules-quickfilters { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.cellules-quickfilter { display: flex; flex-direction: column; gap: 6px; }
.cellules-quickfilter-lbl { font-size: 11.5px; font-weight: 600; color: var(--text2); }
.cellules-native-select {
  padding: 9px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit; font-size: 13px;
  cursor: pointer;
}
.cellules-native-select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* ═══════ Vue détail cellule ═══════ */
.cellules-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text2);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  margin-bottom: 18px;
  transition: color .12s, gap .15s;
}
.cellules-back:hover { color: var(--brand-2); gap: 9px; }

.cellules-detail-head {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  /* Ombre légère charte v2 — densifie la séparation entre le header
     et la rangée d'onglets juste en dessous. */
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
}
.cellules-detail-headline {
  display: flex; align-items: flex-start; gap: 18px;
  flex-wrap: wrap;
}
.cellules-detail-ic {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cellules-detail-titles { flex: 1 1 320px; min-width: 0; }
.cellules-detail-title-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.cellules-detail-title-row h1 {
  margin: 0;
  font-size: 24px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text);
}
.cellules-detail-titles p {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text2);
}
.cellules-detail-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

.cellules-detail-metas {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap;
}
.cellules-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text2);
}
.cellules-meta svg { color: var(--text3); }
.cellules-meta strong { color: var(--text); font-weight: 700; }
.cellules-meta small { font-size: 11.5px; color: var(--text3); }
.cellules-meta--user .docs-owner-av { width: 30px; height: 30px; font-size: 11px; }
.cellules-meta-cal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg3); color: var(--text2);
}

/* Onglets du détail (charte v2) : vraie card blanche avec border + ombre
   légère, en remplacement du strip transparent à border-bottom. Posé au
   niveau racine du détail (en dehors des cards de contenu).
   Override les défauts de `.docs-tabs` (transparent + border-bottom +
   marges négatives), repositionne la sous-ligne active à l'intérieur
   de la card. */
.cellules-detail-tabs {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
  margin: 0 0 18px;
  padding: 4px 14px 0;
}
.cellules-detail-tabs .docs-tab.is-active::after {
  /* sous-ligne ancrée AU BORD INFÉRIEUR de la card (pas sur le border-bottom
     du `.docs-tabs` parent — il n'existe plus en variante card). */
  bottom: 0;
  height: 3px;
  left: 12px; right: 12px;
}

/* Actions dans l'en-tête de card (search + select inline) */
.cellules-card-head-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cellules-card-head-actions .ui-search { flex: 1 1 220px; min-width: 0; }

/* ── Missions principales ── */
.cellules-missions-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: center;
}
.cellules-missions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cellules-missions-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px; color: var(--text); line-height: 1.5;
}
.cellules-mission-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: #dcfce7; color: #15803d;
  flex-shrink: 0; margin-top: 2px;
}
.cellules-missions-map {
  width: 100%; aspect-ratio: 260 / 160;
  border-radius: 12px;
  overflow: hidden;
}
.cellules-missions-map svg { display: block; width: 100%; height: 100%; }

/* ── Référente (sidebar détail) ── */
.cellules-referent {
  display: flex; align-items: center; gap: 12px;
  padding-top: 4px;
}
.cellules-referent-av { width: 40px; height: 40px; font-size: 13px; }
.cellules-referent-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cellules-referent-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cellules-referent-role { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cellules-referent-actions { display: flex; gap: 6px; }
.cellules-referent-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cellules-referent-btn:hover {
  background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-2);
}

/* ── Membres de la cellule (sidebar détail) — rangée avatars + nom ── */
.cellules-members { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.cellules-member {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.cellules-member-av { width: 36px; height: 36px; font-size: 12px; }
.cellules-member-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cellules-member-role { font-size: 11.5px; color: var(--text2); white-space: nowrap; }
.cellules-member-av--more {
  background: var(--bg3); color: var(--text2);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cellules-member--more .cellules-member-name { color: var(--text2); font-weight: 500; }

/* Focus accessible */
.cellules a:focus-visible,
.cellules button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── Responsive ─── */
@media (max-width: 1280px) {
  .cellules-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .cellules-layout { grid-template-columns: 1fr; }
  .cellules-side { flex-direction: row; flex-wrap: wrap; }
  .cellules-side > div { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .cellules-side-card { flex: 1 1 280px; }
  .cellules-missions-body { grid-template-columns: 1fr; }
  .cellules-missions-map { max-width: 360px; justify-self: center; }
}
@media (max-width: 820px) {
  .cellules-kpis { grid-template-columns: 1fr; }
  .cellules-row {
    grid-template-columns: 14px 36px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .cellules-row-stat { display: none; }
  .cellules-team-sub { max-width: 200px; }
}
@media (max-width: 600px) {
  .cellules-detail-headline { gap: 12px; }
  .cellules-detail-actions { width: 100%; }
  .cellules-detail-metas { gap: 14px 22px; }
  .cellules-head-actions .docs-btn { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VUE ANNUAIRE DE CRISE — liste des personnels + drawer fiche contact
   Réutilise au maximum les primitives (.home-card, .ui-search, .ui-select,
   .docs-btn, .docs-action, .home-pager). Classes namespacées .annuaire-*
   propres à cette vue. Calque la même grille 2-cols et les mêmes choix
   typo/spacing que la vue Cellules (cf. bloc .cellules-* ci-dessus).
   Drawer piloté par data-annuaire-drawer="open|closed" sur .annuaire.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── En-tête (calqué sur .cellules-head) ── */
.annuaire-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.annuaire-head-titles { flex: 1 1 320px; min-width: 240px; }
.annuaire-head-titles h1 {
  margin: 0 0 8px;
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text);
}
.annuaire-head-titles p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2);
}
.annuaire-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Layout 2 colonnes — drawer 360px à droite ── */
.annuaire-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.annuaire-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.annuaire-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.annuaire[data-annuaire-drawer="closed"] .annuaire-layout {
  grid-template-columns: minmax(0, 1fr);
}
.annuaire[data-annuaire-drawer="closed"] .annuaire-side { display: none; }

.annuaire-card { padding: 18px 22px 18px; }

/* ── Toolbar (recherche + filtres + tools) ── */
.annuaire-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.annuaire-search { flex: 1 1 280px; min-width: 0; }
.annuaire-tools {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.annuaire-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.annuaire-tool-btn:hover { background: var(--bg); border-color: var(--border2); color: var(--text); }
.annuaire-tool-btn:disabled,
.annuaire-tool-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.annuaire-tool-btn:disabled:hover,
.annuaire-tool-btn[disabled]:hover {
  background: var(--bg2); border-color: var(--border); color: var(--text2);
}

/* ── Bulk action bar (visible quand ≥ 1 ligne cochée) ──
   Pas de bascule `[hidden]` (display:none ne s'anime pas) : on garde
   l'élément en flux et on transitionne opacity + max-height + padding
   + margin via la classe `.is-visible` posée par js/app.js. */
.annuaire-bulk-bar {
  display: flex; align-items: center; gap: 14px;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height .22s ease,
    margin-top .22s ease,
    padding    .22s ease,
    opacity    .18s ease;
}
.annuaire-bulk-bar.is-visible {
  max-height: 80px;
  margin-top: 14px;
  padding: 4px 0;
  opacity: 1;
  pointer-events: auto;
}
.annuaire-bulk-clear {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text2);
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: color .12s;
}
.annuaire-bulk-clear:hover { color: var(--text); }
.annuaire-bulk-clear span { color: var(--text); font-weight: 600; }
.annuaire-bulk-delete {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--bg2);
  border: 1px solid var(--brand);
  border-radius: 8px;
  color: var(--brand);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.annuaire-bulk-delete:hover { background: var(--brand); color: #fff; }

/* ── Table contacts ── */
.annuaire-tablewrap { margin-top: 14px; overflow-x: auto; }
.annuaire-table { width: 100%; border-collapse: collapse; }
.annuaire-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;
}
.annuaire-table th.annuaire-th-check { width: 40px; padding-right: 0; }
.annuaire-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.annuaire-table td:first-child { width: 40px; padding-right: 0; }
.annuaire-table tbody tr:last-child td { border-bottom: none; }
.annuaire-table tbody tr:hover td { background: var(--bg); }
.annuaire-table tbody tr.is-active td { background: var(--brand-soft); }
.annuaire-table tbody tr.is-active:hover td { background: var(--brand-soft); }
.annuaire-name { font-weight: 600; color: var(--text); }

/* Bouton de tri (header colonne triable). État rendu via aria-sort posé
   sur le <th> parent : ascending = flèche ▲ (par défaut le svg pointe haut),
   descending = flèche ▼ (rotation 180°), none = icône grisée transparente. */
.annuaire-sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  padding: 0;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--text3);
  text-transform: inherit; letter-spacing: inherit;
  transition: color .12s;
}
.annuaire-sort:hover { color: var(--text); }
.annuaire-sort-ic {
  color: var(--text3);
  transition: transform .12s, opacity .12s;
}
[data-annuaire-sort-th][aria-sort="none"] .annuaire-sort-ic { opacity: .35; }
[data-annuaire-sort-th][aria-sort="ascending"] .annuaire-sort,
[data-annuaire-sort-th][aria-sort="descending"] .annuaire-sort { color: var(--text); }
[data-annuaire-sort-th][aria-sort="ascending"] .annuaire-sort-ic,
[data-annuaire-sort-th][aria-sort="descending"] .annuaire-sort-ic { color: var(--brand); opacity: 1; }
[data-annuaire-sort-th][aria-sort="descending"] .annuaire-sort-ic { transform: rotate(180deg); }

/* ─── Tri colonnes générique (#212) ─────────────────────────────────────
   Pattern réutilisable extrait du tri annuaire — appliqué à .crises-table,
   .retex-list-table, .docs-table, .iam-table, .moyens-list-table,
   .ws-arb-table, .ws-pa-table. Markup :
     <th data-pilot-sort-th="<key>" aria-sort="none">
       <button class="pilot-sort-btn" data-pilot-sort-key="<key>">
         Libellé
         <svg class="pilot-sort-ic">…</svg>
       </button>
     </th>
   États visuels iso `.annuaire-sort` : flèche grisée à 35% sur aria-sort=none,
   colorée `var(--brand)` + texte `var(--text)` sur asc/desc, rotation 180°
   sur desc. */
.pilot-sort-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit; letter-spacing: inherit;
  transition: color .12s;
}
.pilot-sort-btn:hover { color: var(--text); }
.pilot-sort-ic {
  color: var(--text3);
  transition: transform .12s, opacity .12s;
  flex-shrink: 0;
}
[data-pilot-sort-th][aria-sort="none"] .pilot-sort-ic { opacity: .35; }
[data-pilot-sort-th][aria-sort="ascending"] .pilot-sort-btn,
[data-pilot-sort-th][aria-sort="descending"] .pilot-sort-btn { color: var(--text); }
[data-pilot-sort-th][aria-sort="ascending"] .pilot-sort-ic,
[data-pilot-sort-th][aria-sort="descending"] .pilot-sort-ic { color: var(--brand); opacity: 1; }
[data-pilot-sort-th][aria-sort="descending"] .pilot-sort-ic { transform: rotate(180deg); }

/* ─── Opt-in wrap pour cellules à texte libre (#218) ─────────────────────
   Par défaut, les <td> des tables PILOT sont en `white-space: nowrap` —
   nécessaire pour préserver l'alignement et la densité visuelle. Mais ça
   casse dès qu'une cellule contient du texte rédigé (description, synthèse,
   commentaire) : la cellule déborde par-dessus la colonne suivante au lieu
   de wrapper ou de pousser le scroll horizontal.

   Solution opt-in : poser `.is-text-wrap` sur le <td> parent autorise le
   wrap dans une largeur bornée. Toutes les autres <td> conservent leur
   comportement nowrap.

   Largeurs : min 220px évite des cellules ridiculement étroites quand la
   table est large ; max 420px borne le wrap pour ne pas exploser la
   hauteur de ligne ; `overflow-wrap: anywhere` coupe les très longs
   tokens (URLs, identifiants) qui ne contiennent pas d'espace. */
.annuaire-table td.is-text-wrap,
.crises-table td.is-text-wrap,
.docs-table td.is-text-wrap,
.retex-list-table td.is-text-wrap,
.retex-actions-table td.is-text-wrap,
.iam-table td.is-text-wrap,
.moyens-list-table td.is-text-wrap,
.ws-arb-table td.is-text-wrap,
.ws-pa-table td.is-text-wrap,
.cellules-team-table td.is-text-wrap,
.home-table td.is-text-wrap {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  min-width: 220px;
  max-width: 420px;
}

/* Checkbox custom — coche rouge brand pleine */
.annuaire-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  cursor: pointer;
  position: relative;
}
.annuaire-check input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  margin: 0;
}
.annuaire-check-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: 5px;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0;
}
.annuaire-check input:hover + .annuaire-check-box { border-color: var(--brand); }
.annuaire-check input:focus-visible + .annuaire-check-box {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.annuaire-check input:checked + .annuaire-check-box {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Pagination row (count + pager + page size) ── */
.annuaire-pager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}
.annuaire-pager-count {
  margin: 0; font-size: 13px; color: var(--text2);
}
.annuaire-pager { justify-self: center; }
.annuaire-pagesize { justify-self: end; }

/* ═══════ Drawer fiche contact ═══════ */
.annuaire-side-card {
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 20px;
}

.annuaire-side-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding-bottom: 4px;
}
.annuaire-side-head-meta { min-width: 0; flex: 1; }
.annuaire-side-name {
  margin: 0;
  font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em;
}
.annuaire-side-update {
  margin: 4px 0 0;
  font-size: 12.5px; color: var(--text2);
}
.annuaire-side-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.annuaire-side-close:hover {
  background: var(--bg); border-color: var(--border); color: var(--text);
}

/* Sections (Coordonnées / Adresse / Infos) */
.annuaire-side-section { display: flex; flex-direction: column; gap: 12px; }
.annuaire-side-title {
  margin: 0;
  font-size: 14px; font-weight: 700; color: var(--text);
}

/* Champ : icône + label/value + bouton copie */
.annuaire-fields { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.annuaire-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
}
.annuaire-field-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--text2);
  flex-shrink: 0;
}
.annuaire-field-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.annuaire-field-lbl {
  font-size: 11.5px; color: var(--text3); font-weight: 500;
}
.annuaire-field-val {
  font-size: 13.5px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis;
}
.annuaire-field-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.annuaire-field-copy:hover {
  background: var(--bg); border-color: var(--border); color: var(--brand-2);
}
.annuaire-field-copy.is-copied {
  color: #15803d; border-color: #dcfce7; background: #dcfce7;
}

/* Informations complémentaires — key/value 2 cols */
.annuaire-info { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.annuaire-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.annuaire-info-row dt {
  font-size: 13px; color: var(--text2); font-weight: 500;
  margin: 0;
}
.annuaire-info-row dd {
  font-size: 13px; color: var(--text); font-weight: 600;
  margin: 0;
  text-align: right;
}

/* Footer drawer — Modifier + Mettre à jour */
.annuaire-side-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.annuaire-side-foot .docs-btn { justify-content: center; }

/* ─── Drawer : formulaire d'édition (lot pilote Cosmos #52) ─── */
.annuaire-side-form { display: flex; flex-direction: column; gap: 14px; }
.annuaire-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.annuaire-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.annuaire-form-field--full { grid-column: 1 / -1; }
.annuaire-form-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.01em;
}
.annuaire-form-field input,
.annuaire-form-field textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.annuaire-form-field input:focus-visible,
.annuaire-form-field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.annuaire-form-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 13px;
}

/* État vide (Cosmos vide ou recherche sans résultat) */
.annuaire-empty-state {
  margin: 16px 0 4px;
  padding: 18px 16px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  text-align: center;
  color: var(--text2);
  font-size: 14px;
}

@media (max-width: 600px) {
  .annuaire-form-grid { grid-template-columns: 1fr; }
}

/* Focus accessible */
.annuaire a:focus-visible,
.annuaire button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .annuaire-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1024px) {
  .annuaire-layout { grid-template-columns: 1fr; }
  .annuaire-side { order: -1; }
}
@media (max-width: 820px) {
  .annuaire-toolbar { gap: 8px; }
  .annuaire-search { flex: 1 1 100%; }
  .annuaire-tools { margin-left: 0; }
  .annuaire-pager-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }
  .annuaire-pager-count { justify-self: start; }
  .annuaire-pagesize { justify-self: start; }
}
@media (max-width: 600px) {
  .annuaire-head-actions { width: 100%; }
  .annuaire-head-actions .docs-btn { flex: 1; justify-content: center; }
  .annuaire-side-foot { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Moyens & ressources — vue #/moyens
   Layout calqué sur .cellules (KPIs + 2 colonnes main/sidebar).
   Tokens partagés : --bg2, --border, --text*, --brand*, --radius.
   ═══════════════════════════════════════════════════════════════════════════ */

.moyens { display: flex; flex-direction: column; }

/* ── En-tête ── */
.moyens-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 20px 0 14px;
  flex-wrap: wrap;
}
.moyens-head-titles h1 {
  font-size: 22px; font-weight: 800; color: var(--text); margin: 0;
  letter-spacing: -0.01em;
}
.moyens-head-titles p {
  margin: 4px 0 0; font-size: 13.5px; color: var(--text2);
}

/* ── KPI tiles (5 colonnes) ── */
.moyens-kpis {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.moyens-kpi {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.moyens-kpi-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.moyens-kpi-ic--teal   { background: #ccfbf1; color: #0f766e; }
.moyens-kpi-ic--orange { background: #ffedd5; color: #c2410c; }
.moyens-kpi-ic--red    { background: #fee2e2; color: #b91c1c; }
.moyens-kpi-ic--green  { background: #dcfce7; color: #15803d; }
.moyens-kpi-ic--purple { background: #ede9fe; color: #6d28d9; }
.moyens-kpi-ic--slate  { background: #e8eaed; color: #64748b; }
.moyens-kpi-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.moyens-kpi-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.moyens-kpi-num {
  font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.moyens-kpi-tot { font-size: 13px; font-weight: 600; color: var(--text3); }
.moyens-kpi-pct { font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.moyens-kpi-pct--ok     { color: #15803d; }
.moyens-kpi-pct--warn   { color: #c2410c; }
.moyens-kpi-pct--danger { color: #b91c1c; }
.moyens-kpi-pct--info   { color: #6d28d9; }
.moyens-kpi-pct--mute   { color: var(--text3); }

/* ═══════ Carte « Capacités opérationnelles » (refonte #208) ═══════ */
.moyens-card-cap {
  margin-top: 18px;
  padding: 20px 22px 22px;
}
.moyens-cap-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px;
}
.moyens-cap-head-titles { display: inline-flex; align-items: center; gap: 8px; }
.moyens-cap-info {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text3); cursor: pointer; border-radius: 50%;
  transition: background .12s, color .12s;
}
.moyens-cap-info:hover { background: var(--bg); color: var(--text2); }

/* ── Barre tabs + recherche + filtre + légende ── */
.moyens-cap-bar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.moyens-tabs {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.moyens-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: transparent; border: none; border-radius: 8px;
  font: 600 12.5px/1 inherit; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.moyens-tab:hover { color: var(--text); }
.moyens-tab.is-active {
  background: var(--bg);
  color: var(--brand-2);
  box-shadow: 0 1px 2px rgba(17,17,17,.06);
}
.moyens-tab.is-active svg { color: var(--brand-2); }

.moyens-search-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.moyens-search { flex: 1 1 auto; min-width: 0; }
.moyens-search input { width: 100%; }
.moyens-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px;
  font: 600 12.5px/1 inherit; color: var(--text2);
  cursor: pointer; flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.moyens-filter-btn:hover { background: var(--bg); border-color: var(--border2); color: var(--text); }
.moyens-filter-btn.has-active {
  border-color: var(--brand-2);
  color: var(--brand-2);
  background: var(--brand-soft);
}

.moyens-legend {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text2);
  flex-wrap: wrap;
}
.moyens-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.moyens-legend-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.moyens-legend-dot--ok   { color: #15803d; }
.moyens-legend-dot--warn { color: #c2410c; }
.moyens-legend-dot--off  { color: #b91c1c; }
.moyens-legend-dot--eval { color: var(--text3); }

/* ═══════ Vue par catégorie — layout 2 colonnes ═══════ */
.moyens-cat-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.moyens-cat-list-wrap {
  display: flex; flex-direction: column; gap: 10px;
}
.moyens-cat-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.moyens-cat-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font: 600 13px/1.25 inherit;
  color: var(--text);
  text-align: left;
  transition: background .12s, border-color .12s, box-shadow .12s;
  width: 100%;
}
.moyens-cat-row:hover { background: var(--bg); border-color: var(--border2); }
.moyens-cat-row.is-active {
  border-color: var(--brand-2);
  background: var(--brand-soft);
  box-shadow: 0 1px 3px rgba(17,17,17,.04);
}
.moyens-cat-row-ic {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2);
  flex-shrink: 0;
}
.moyens-cat-row.is-active .moyens-cat-row-ic { color: var(--brand-2); }
.moyens-cat-row-name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.moyens-cat-row-bar {
  width: 60px; height: 6px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
}
.moyens-cat-row-bar > span { display: block; height: 100%; }
.moyens-cat-row-bar > .moyens-cat-row-bar--ok   { background: #1FA463; }
.moyens-cat-row-bar > .moyens-cat-row-bar--warn { background: #F5A524; }
.moyens-cat-row-bar > .moyens-cat-row-bar--off  { background: #E04444; }
.moyens-cat-row-bar > .moyens-cat-row-bar--eval { background: var(--text3); }
.moyens-cat-row-ratio {
  font-size: 12px; font-weight: 700; color: var(--text2);
  white-space: nowrap; flex-shrink: 0;
}
.moyens-cat-row-chev {
  width: 14px; height: 14px;
  color: var(--text3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.moyens-cat-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed #f0a8a8;
  color: var(--brand-2);
  border-radius: 10px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.moyens-cat-add:hover {
  background: var(--brand-soft);
  border-color: var(--brand-2);
}

/* ── Détail catégorie (droite) ── */
.moyens-cat-detail {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
  background: var(--bg2);
}
.moyens-cat-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
}
.moyens-cat-detail-titles {
  display: inline-flex; align-items: center; gap: 8px;
}
.moyens-cat-detail-ic {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.moyens-cat-detail-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
}
.moyens-cat-detail-ratio {
  font-size: 12px; font-weight: 700; color: var(--text2);
  background: var(--bg3); padding: 3px 8px; border-radius: 999px;
}
.moyens-cat-detail-close {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none;
  font: 600 12.5px/1 inherit;
  color: var(--brand-2);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.moyens-cat-detail-close:hover { background: var(--brand-soft); }

/* 4 colonnes statut */
.moyens-status-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.moyens-status-col {
  display: flex; flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  min-height: 160px;
}
.moyens-status-col-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  font: 700 12.5px/1 inherit;
  border-bottom: 1px solid var(--border);
}
.moyens-status-col-head-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.6);
}
.moyens-status-col--ok   { background: #ecfdf5; }
.moyens-status-col--ok   .moyens-status-col-head { color: #15803d; background: #d1fadf; border-bottom-color: #a7f3c4; }
.moyens-status-col--warn { background: #fff7ed; }
.moyens-status-col--warn .moyens-status-col-head { color: #c2410c; background: #ffedd5; border-bottom-color: #fed7aa; }
.moyens-status-col--off  { background: #fef2f2; }
.moyens-status-col--off  .moyens-status-col-head { color: #b91c1c; background: #fee2e2; border-bottom-color: #fecaca; }
.moyens-status-col--eval { background: #f8fafc; }
.moyens-status-col--eval .moyens-status-col-head { color: #475569; background: #e8eaed; border-bottom-color: #d1d5db; }

.moyens-status-col-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  flex: 1 1 auto;
}

.moyens-cap-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  position: relative;
}
.moyens-cap-card:hover { border-color: var(--border2); box-shadow: 0 1px 3px rgba(17,17,17,.04); }

/* Drag & drop entre colonnes statut (#234) — natif HTML5. Le DnD n'est
   actif que pour sysadmin (PATCH guard serveur) ; pour les autres rôles,
   l'attribut `draggable` est retiré au runtime → le sélecteur ne matche
   pas et le curseur reste normal (pas de pointer grab trompeur). */
.moyens-cap-card[draggable="true"] { cursor: grab; }
.moyens-cap-card[draggable="true"]:active { cursor: grabbing; }
.moyens-cap-card.is-dragging { opacity: .5; }
.moyens-status-col-body.is-drop-target {
  background: var(--brand-soft);
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
  border-radius: 8px;
}
.moyens-cap-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.moyens-cap-card-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.moyens-cap-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.moyens-cap-card-dot--ok   { background: #1FA463; }
.moyens-cap-card-dot--warn { background: #F5A524; }
.moyens-cap-card-dot--off  { background: #E04444; }
.moyens-cap-card-dot--eval { background: var(--text3); }
.moyens-cap-card-meta {
  font-size: 11.5px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.moyens-cap-card-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffedd5; color: #c2410c;
  width: max-content;
}
.moyens-cap-card-actions {
  position: absolute;
  top: 6px; right: 6px;
  display: none;
}
.moyens-cap-card:hover .moyens-cap-card-actions,
.moyens-cap-card:focus-within .moyens-cap-card-actions { display: inline-flex; }

.moyens-cap-card-more {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text3);
  cursor: pointer;
}
.moyens-cap-card-more:hover { color: var(--text); border-color: var(--border2); }

.moyens-status-col-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  flex: 1 1 auto;
  color: var(--text3);
  font-size: 12px;
  text-align: center;
}
.moyens-status-col-empty-ic {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  display: inline-flex; align-items: center; justify-content: center;
}
.moyens-status-col--ok   .moyens-status-col-empty-ic { color: #86efac; }
.moyens-status-col--warn .moyens-status-col-empty-ic { color: #fdba74; }
.moyens-status-col--off  .moyens-status-col-empty-ic { color: #fca5a5; }
.moyens-status-col--eval .moyens-status-col-empty-ic { color: #cbd5e1; }

/* ═══════ Vue liste — table compacte ═══════ */
.moyens-listwrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2);
}
/* Aligné sur .annuaire-table (#210). */
.moyens-list-table {
  width: 100%;
  border-collapse: collapse;
}
.moyens-list-table thead 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;
}
.moyens-list-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.moyens-list-table tbody tr:last-child td { border-bottom: none; }
.moyens-list-table tbody tr:hover td { background: var(--bg); }
.moyens-list-table tbody tr.is-active td { background: var(--brand-soft); }
.moyens-list-table tbody tr.is-active:hover td { background: var(--brand-soft); }
.moyens-list-cell-main {
  display: flex; flex-direction: column; gap: 2px;
}
.moyens-list-cell-name {
  font-weight: 700; color: var(--text);
}
.moyens-list-cell-sub {
  font-size: 11.5px; color: var(--text3);
}
.moyens-list-th-actions { width: 80px; text-align: right; }
.moyens-list-actions {
  display: inline-flex; gap: 4px; justify-content: flex-end;
}
.moyens-list-empty {
  margin: 16px;
  padding: 18px 16px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  text-align: center;
  color: var(--text2);
  font-size: 14px;
}

/* Badge statut générique (table + modale) */
.moyens-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.moyens-status-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.moyens-status-badge--ok   { background: #dcfce7; color: #15803d; }
.moyens-status-badge--warn { background: #ffedd5; color: #c2410c; }
.moyens-status-badge--off  { background: #fee2e2; color: #b91c1c; }
.moyens-status-badge--eval { background: #e8eaed; color: #475569; }

.moyens-empty-state {
  margin: 16px 0 4px;
  padding: 18px 16px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  text-align: center;
  color: var(--text2);
  font-size: 14px;
}

/* Popover « Filtrer » */
.moyens-filter-pop {
  position: absolute;
  z-index: 10000;
  min-width: 220px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(17,17,17,.12);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.moyens-filter-pop-tt {
  font: 700 11.5px/1 inherit;
  color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.moyens-filter-pop-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.moyens-filter-pop-opt input { accent-color: var(--brand-2); }
.moyens-filter-pop-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding-top: 6px;
  border-top: 1px solid var(--border);
}
.moyens-filter-pop-clear {
  background: transparent; border: none; color: var(--brand-2);
  font: 600 12px/1 inherit; cursor: pointer;
}
.moyens-filter-pop-clear:hover { text-decoration: underline; }

/* ═══════ Responsive ═══════ */
@media (max-width: 1280px) {
  .moyens-status-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .moyens-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .moyens-cat-layout { grid-template-columns: 1fr; }
  .moyens-cap-bar {
    grid-template-columns: 1fr;
  }
  .moyens-legend { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .moyens-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moyens-status-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .moyens-head { gap: 8px; }
  .moyens-kpis { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI modal — générique, monté à la volée sous <body>.
   Utilisé pour CRUD Cellule / Équipe / confirm suppression.
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ui-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.ui-modal-card {
  position: relative;
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ui-modal-in 0.16s ease-out;
}
.ui-modal-card--lg { max-width: 720px; }
@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ui-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  flex-shrink: 0;
}
.ui-modal-head h2 {
  margin: 0; font-size: 17px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}
/* Variante « rich » (charte v2) : icône carrée colorée + (titre + sous-titre).
   Aucun border-bottom — la séparation visuelle vient du contexte banner
   (s'il existe) ou de la transition vers le body. */
.ui-modal-head--rich {
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
}
/* Icône agrandie pour les viewers (charte v2). 72 px sur les viewers
   « rich » — l'icône est l'élément d'ancrage visuel principal du header. */
.ui-modal-head-icon {
  width: 72px; height: 72px;
  border-radius: 18px;
  flex-shrink: 0;
}
.ui-modal-head-content {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 2px;
}
.ui-modal-head--rich h2 { font-size: 22px; }
.ui-modal-subtitle {
  margin: 0;
  font-size: 14px; color: var(--text2); line-height: 1.45;
}
.ui-modal-subtitle .ui-field-req { color: var(--brand-2); font-style: normal; font-weight: 700; }

.ui-modal-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text2); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
  align-self: flex-start;
}
.ui-modal-close:hover { background: var(--bg); color: var(--text); border-color: var(--border2); }

/* Bandeau de contexte (charte v2) — posé entre header et body. Background
   neutre tirant légèrement sur le beige pour rester en harmonie avec
   le fond de page (--bg). Sépare visuellement le contexte (« Cellule
   rattachée : … ») du formulaire qui suit. */
.ui-modal-context-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 24px 4px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
}
.ui-modal-context-banner-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ui-modal-context-banner-lbl { color: var(--text2); font-weight: 500; }
.ui-modal-context-banner-text strong { color: var(--text); font-weight: 700; }

.ui-modal-body {
  padding: 18px 24px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
/* En modal « rich », le body débute par un séparateur visuel discret
   (ligne fine sous le bandeau de contexte). */
.ui-modal-card--rich .ui-modal-body {
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.ui-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.ui-modal-error {
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 500;
  margin-bottom: 12px;
}
.ui-modal-context {
  font-size: 13px; color: var(--text2);
  margin-bottom: 14px;
}
.ui-modal-context strong { color: var(--text); font-weight: 700; }

/* Variante danger « soft » pour les CTAs destructifs (charte v2) :
   fond rose très pâle + texte/icône rouge brique. Plus doux qu'un solid
   rouge — utilisé sur les écrans où la suppression est visible en
   permanence (header détail cellule, détail RETEX). Le bouton de
   confirmation finale en modal hérite de la même classe : cohérent. */
.docs-btn--danger {
  background: #fef2f2; color: #b91c1c; border-color: #fecaca;
}
.docs-btn--danger:hover { background: #fee2e2; border-color: #fca5a5; }
.docs-btn--danger svg { color: #b91c1c; }

/* Formulaires utilitaires (ui-form). */
.ui-form { display: flex; flex-direction: column; gap: 12px; }
.ui-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Label aligné sur PULSE (.iam-am-field>label) : 13.5px / 700 / text /
   pas de letter-spacing (normal). */
.ui-field-lbl {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  letter-spacing: normal;
}
.ui-field-lbl small { font-weight: 400; color: var(--text3); margin-left: 4px; }
/* Astérisque rouge pour les champs requis (charte v2). `em` non sémantique
   utilisé pour différencier visuellement le marqueur des autres caractères
   du label — la signification est portée par `aria-hidden` + l'attribut
   `required` HTML sur l'input. */
.ui-field-req {
  color: var(--brand-2);
  font-style: normal;
  font-weight: 700;
  margin-left: 2px;
}
/* Typo des contrôles de saisie — strictement alignée sur PULSE
   (iam-modal--account .iam-am-ictl input/select). Le `font: inherit`
   shorthand hérite TOUT (family Inter, weight, line-height, variant…)
   du body, puis on force la taille à 14 px. Ce pattern simple est
   celui qui rend de manière consistante les <input>, <textarea>,
   <select> et les inputs spécialisés (date/number/email) dans tous
   les navigateurs — pas besoin d'override par type. */
.ui-field input,
.ui-field textarea,
.ui-field select {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ui-field input:focus,
.ui-field textarea:focus,
.ui-field select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.ui-field input[readonly] {
  background: var(--bg);
  color: var(--text2);
  cursor: not-allowed;
}
.ui-field textarea { resize: vertical; min-height: 70px; }

/* Variante checkbox : input + label sur une seule ligne (pour les flags
   booléens simples comme « ressource critique » dans les modales CRUD).
   Évite le padding/border/font-size hérité des `.ui-field input` standards. */
.ui-field--check {
  flex-direction: row; align-items: center; gap: 10px;
}
.ui-field--check input[type="checkbox"] {
  width: 16px; height: 16px; padding: 0;
  margin: 0;
  appearance: auto; -webkit-appearance: auto;
  accent-color: var(--brand-2);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
}
.ui-field--check > span {
  font-size: 13.5px; color: var(--text);
  font-weight: 600;
}

/* Wrapper pour input avec préfixe visuel (icône ou badge). L'input reçoit
   un padding-left pour laisser place au préfixe, qui est posé en absolu. */
.ui-field-input-wrap { position: relative; }
.ui-field-input-wrap > input { padding-left: 38px; }
.ui-field-input-prefix {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  color: var(--text3);
  pointer-events: none;
}
/* Dot coloré utilisé en préfixe du « Libellé du statut » — reflète la
   couleur du statut sélectionné, sans dupliquer le texte (charte v2 :
   le libellé tapé est lu une seule fois, dans l'input). */
.ui-field-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #666;
}

/* Wrapper pour select avec préfixe visuel (charte v2 — selects « riches »
   pour Type d'icône / Couleur / Statut). Le `<select>` natif est masqué
   visuellement par son padding et la chevron native par appearance: none.
   Le préfixe (icône / swatch / dot) est posé en absolu à gauche, mis à
   jour côté JS au change (cf. wirePrefixSelects). */
.ui-field-select-wrap { position: relative; }
.ui-field-select-wrap > select {
  padding-left: 40px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  cursor: pointer;
}
.ui-field-select-prefix {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ui-field-select-prefix--icon { color: var(--text2); }
.ui-field-select-prefix--swatch {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
/* Préfixe avatar — rond plein, couleur SOLIDE (correspond à la couleur
   utilisée pour le rond avatar dans le shell : brand = brique, blue/
   green/orange). Distinct du swatch iconKey qui est un tint clair. */
.ui-field-select-prefix--avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text3);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.ui-field-select-prefix--dot { /* slot vide ; le dot est rendu dedans */ }
.ui-field-select-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #666;
}
.ui-field-select-chev {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
}

/* ─── Viewer meta — grille 2 colonnes pour les modales de visualisation ────
   (charte v2). Rangée Statut full-width, puis grille indented avec
   séparateur vertical entre les deux colonnes. Chaque ligne :
   icône carrée beige + label + valeur. Variantes value :
     - défaut             : texte 13.5 px
     - .ui-modal-meta-count : grand nombre 22 px gras
     - .ui-modal-meta-user  : avatar + nom + rôle */
.ui-modal-meta {
  display: flex; flex-direction: column;
  gap: 26px;
}
.ui-modal-meta-status {
  display: flex; flex-direction: column;
  gap: 10px;
}
.ui-modal-meta-status-lbl {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.ui-modal-meta-status-val { line-height: 1; }

.ui-modal-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 40px;
  position: relative;
}
.ui-modal-meta-grid::before {
  /* Séparateur vertical central (charte v2 : trait fin var(--border)). */
  content: '';
  position: absolute;
  top: 4px; bottom: 4px;
  left: calc(50% - 20px);
  width: 1px;
  background: var(--border);
}

.ui-modal-meta-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 14px;
  min-width: 0;
}
.ui-modal-meta-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ui-modal-meta-row-body { min-width: 0; }
.ui-modal-meta-row-label {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.ui-modal-meta-row-value {
  font-size: 13.5px; color: var(--text);
  line-height: 1.5;
  word-wrap: break-word;
}

/* Variante : grand nombre (Équipes / Membres / Taux). */
.ui-modal-meta-count {
  font-size: 22px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em;
}

/* Variante : utilisateur (avatar + nom + rôle). */
.ui-modal-meta-user {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 2px;
}
.ui-modal-meta-user .docs-owner-av {
  width: 36px; height: 36px;
  font-size: 13px;
  flex-shrink: 0;
}
.ui-modal-meta-user-info {
  display: flex; flex-direction: column;
  min-width: 0;
}
.ui-modal-meta-user-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ui-modal-meta-user-role { font-size: 12.5px; color: var(--text2); margin-top: 1px; }

@media (max-width: 720px) {
  .ui-modal-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .ui-modal-meta-grid::before { display: none; }
}

.ui-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ui-fieldset legend {
  padding: 0 6px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Actions inline sur les lignes de la vue par équipe (édit / suppr). */
.cellules-team-actions {
  display: inline-flex; gap: 4px;
}

/* Actions inline sur les lignes (charte v2). Grille mise à jour : la cellule
   contient maintenant un slot pour le badge « Archivée » + 4 boutons d'action
   pour les cellules master (view/edit/archive/delete) ou 3 pour les équipes
   (edit/archive/delete). Slot vide rendu via <span></span> si non archivée. */
.cellules-row-actions {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
/* Colonnes fixes pour aligner les stats / badges entre toutes les lignes
   (charte v2 — sinon les `auto` créent des colonnes de largeur variable
   entre lignes, et « 1 équipe / 5 membres / Active » ne s'alignent pas
   verticalement sur la liste). 8 colonnes : chevron, icône, body, stat
   équipes, stat membres, badge statut, badge archivé, actions. */
.cellules-row--actionable {
  grid-template-columns: 22px 40px minmax(0, 1fr) 90px 100px 100px minmax(0, auto) auto;
  column-gap: 14px;
}
/* Badges statut (col 6) et archivé (col 7) — centrés horizontalement dans
   leur colonne fixe, sinon ils collent à gauche et donnent un effet « pas
   aligné » entre lignes. */
.cellules-row--actionable > .cellules-badge { justify-self: center; }
.cellules-row[role="button"] { outline: none; }
.cellules-row[role="button"]:focus-visible {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
.cellules-row-actions .docs-action {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cellules-row-actions .docs-action:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.cellules-row-actions [data-cellules-master-delete]:hover,
.cellules-row-actions [data-cellules-master-archive]:hover,
.cellules-row-actions [data-equipe-action="delete"]:hover,
.cellules-row-actions [data-equipe-action="archive"]:hover {
  color: var(--text);
}
.cellules-row-actions [data-cellules-master-delete]:hover,
.cellules-row-actions [data-equipe-action="delete"]:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.cellules-row-actions [data-cellules-master-archive]:hover,
.cellules-row-actions [data-equipe-action="archive"]:hover {
  color: #c2410c;
  border-color: #fed7aa;
  background: #fff7ed;
}

/* Chevron transformé en bouton cliquable (charte v2) — toggle d'expansion
   sur les lignes master. Rotation 90° quand la sous-liste est ouverte. */
.cellules-row-chev--btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text3);
  cursor: pointer;
  transition: background .12s, color .12s, transform .15s;
  padding: 0;
}
.cellules-row-chev--btn:hover {
  background: var(--bg);
  color: var(--text);
}
.cellules-master-li[data-expanded="1"] .cellules-row-chev--btn {
  transform: rotate(90deg);
  color: var(--brand-2);
}
.cellules-row-chev--blank {
  /* Placeholder de la même largeur que le chevron, pour aligner les
     colonnes sur les sous-équipes (qui n'ont pas de chevron). */
  width: 22px; height: 22px;
  display: inline-block;
}

/* Sous-liste : équipes affichées sous une cellule développée. Légèrement
   indentée + fond neutre + séparation visuelle.
   Le `display: flex` neutralise l'attribut `hidden` de la spec HTML (le
   user-agent stylesheet ne gagne plus contre une règle de classe) — il
   faut donc rétablir explicitement la règle `[hidden]`. */
.cellules-row-children {
  list-style: none; padding: 8px 0 8px 24px; margin: 4px 0 4px 18px;
  display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--border);
}
.cellules-row-children[hidden] { display: none; }
/* `.cellules-row--child` hérite désormais de `.cellules-row` (blanc par
   défaut, beige au survol — le pattern parent). L'override beige/blanc
   précédent inversait la lecture et créait un effet visuel inattendu. */
.cellules-row-children-empty {
  padding: 8px 14px;
  font-size: 12.5px; color: var(--text3);
  font-style: italic;
}

/* Badge « Archivée » — gris doux. Posé inline après le badge de statut
   pour signaler l'état d'archivage sans masquer le statut métier. */
.cellules-badge--archived {
  background: #e8eaed;
  color: #475569;
  margin-left: 6px;
}
.is-archived .cellules-row-tt,
.is-archived .cellules-row-sub,
.is-archived td .cellules-team-name,
.is-archived td .cellules-team-sub {
  opacity: 0.6;
}
.is-archived .cellules-row-ic { opacity: 0.55; }
.cellules-master-li[data-expanded="1"] > .cellules-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Bannière — explicite « pourquoi rien ne se modifie » quand l'utilisateur
   n'est pas sysadmin. Posée par injectRoleNotice() après .cellules-head. */
.cellules-role-notice {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.4;
}
.cellules-role-notice svg { flex-shrink: 0; color: #c2410c; }
.cellules-role-notice strong { font-weight: 700; }

/* ── Onglets internes du détail — filtrage des sections ─────────────────── */
/* Le host [data-cellules-detail-content][data-detail-active-tab=<tab>] dicte
   quelles cartes [data-detail-section=...] restent visibles. « overview »
   affiche tout (2 colonnes d'origine). Un onglet spécifique replie le layout
   en 1 colonne et masque les cartes non concernées. Référent porte
   [data-detail-always] : visible quel que soit l'onglet (identité). */
[data-cellules-detail-content][data-detail-active-tab="overview"] [data-detail-section] {
  display: block;
}
[data-cellules-detail-content]:not([data-detail-active-tab="overview"]) [data-detail-section] {
  display: none;
}
[data-cellules-detail-content][data-detail-active-tab="equipes"]   [data-detail-section="equipes"],
[data-cellules-detail-content][data-detail-active-tab="members"]   [data-detail-section="members"],
[data-cellules-detail-content][data-detail-active-tab="missions"]  [data-detail-section="missions"],
[data-cellules-detail-content][data-detail-active-tab="documents"] [data-detail-section="documents"],
[data-cellules-detail-content][data-detail-active-tab="history"]   [data-detail-section="history"] {
  display: block;
}

/* En mode single-tab : layout 1 colonne ; main + side aplatis pour que la
   seule carte visible occupe toute la largeur. Référent (data-detail-always)
   passe juste après dans le flux. */
[data-cellules-detail-content]:not([data-detail-active-tab="overview"]) .cellules-layout {
  grid-template-columns: 1fr;
}
[data-cellules-detail-content]:not([data-detail-active-tab="overview"]) .cellules-main,
[data-cellules-detail-content]:not([data-detail-active-tab="overview"]) .cellules-side {
  display: contents;
}

@media (max-width: 600px) {
  .ui-modal { padding: 12px; }
  .ui-modal-card { max-height: calc(100vh - 24px); }
  .ui-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST — feedback non bloquant (cf. js/app.js#showToast). Position
   fixed haut-droite, fade in/out (200 ms), auto-dismiss 2 s. Pile
   verticalement si plusieurs toasts simultanés.
   ═══════════════════════════════════════════════════════════════════════ */
.pilot-toast {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 100;
  max-width: 380px;
  padding: 11px 16px;
  background: var(--text);
  color: #fff;
  font-size: 13px; font-weight: 500;
  line-height: 1.4;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(17,17,17,.18), 0 2px 6px rgba(17,17,17,.08);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.pilot-toast.is-in { opacity: 1; transform: translateY(0); }
.pilot-toast--danger { background: var(--brand); }
/* Pile : décale chaque toast supplémentaire de ~52 px verticalement
   (basique mais suffisant pour la latence d'auto-dismiss). */
.pilot-toast ~ .pilot-toast { top: 70px; }
.pilot-toast ~ .pilot-toast ~ .pilot-toast { top: 122px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Vue RETEX — dashboard retours d'expérience.
   Refondue v1.0.1-rc.22 sur fidélité maquettes PNG (Vue d'ensemble + Suivi
   des actions). Onglets, KPI cards, line chart résilience, donuts, table
   d'actions + sidebars (par risque, top thématiques).
   ═══════════════════════════════════════════════════════════════════════════ */

.retex { display: flex; flex-direction: column; gap: 18px; padding-bottom: 20px; }

/* En-tête (titre + lede + CTA) — pattern .docs-head */
.retex-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 20px 0 6px;
  flex-wrap: wrap;
}
.retex-head-titles { flex: 1 1 320px; min-width: 240px; }
.retex-head-titles h1 {
  margin: 0 0 8px;
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text);
}
.retex-head-titles p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2); }
.retex-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Toolbar : tabs + filtres ─────────────────────────────────────────── */
.retex-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.retex-tabs {
  display: inline-flex; gap: 2px;
  padding: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.retex-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent; border: none; border-radius: 8px;
  font: 600 13px/1 inherit; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.retex-tab svg { color: var(--text3); flex-shrink: 0; }
.retex-tab:hover:not([disabled]) { color: var(--text); }
.retex-tab:hover:not([disabled]) svg { color: var(--text); }
.retex-tab.is-active {
  background: var(--brand-soft);
  color: var(--brand-2);
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
}
.retex-tab.is-active svg { color: var(--brand-2); }
.retex-tab[disabled] { opacity: .55; cursor: not-allowed; }

.retex-toolbar-filters {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.retex-filter-crise { min-width: 200px; }
.retex-filter-crise .ui-select-trigger {
  background: var(--bg2);
  border: 1px solid var(--border);
}

/* Sélecteur de période (range inputs + bouton calendrier presets) */
.retex-head-period {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;
}
.retex-period-input {
  padding: 6px 4px;
  background: transparent; border: none;
  font: 600 13px/1 inherit; color: var(--text);
  cursor: pointer;
  min-width: 96px;
  font-family: inherit;
}
.retex-period-input:focus { outline: 2px solid var(--brand-tint); border-radius: 4px; }
.retex-period-arrow { color: var(--text3); display: inline-flex; }
.retex-period-cal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text2); cursor: pointer;
  transition: background .12s, color .12s;
}
.retex-period-cal-btn:hover { background: var(--bg); color: var(--text); }
.retex-period-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  list-style: none; margin: 0;
  z-index: 100;
}
.retex-period-menu li {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.retex-period-menu li:hover { background: var(--bg); }

/* Panels (Vue d'ensemble / Suivi des actions) */
.retex-panel { display: flex; flex-direction: column; gap: 16px; }
.retex-panel[hidden] { display: none; }

.retex-info-ic {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  color: var(--text3);
  cursor: help;
  vertical-align: middle;
}

/* ────────── KPI cards (génériques, partagées Overview/Actions) ────────── */
.retex-overview-kpis,
.retex-actions-kpis {
  display: grid;
  gap: 12px;
}
.retex-overview-kpis { grid-template-columns: repeat(2, 1fr); }
.retex-actions-kpis  { grid-template-columns: repeat(5, 1fr); }

.retex-kpi {
  position: relative;
  padding: 16px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 110px;
}
.retex-kpi-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.retex-kpi-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.retex-kpi-ic--slate  { background: #e8eaed; color: #475569; }
.retex-kpi-ic--green  { background: #dcfce7; color: #15803d; }
.retex-kpi-ic--orange { background: #ffedd5; color: #c2410c; }
.retex-kpi-ic--purple { background: #ede9fe; color: #6d28d9; }
.retex-kpi-ic--blue   { background: #dbeafe; color: #1d4ed8; }
.retex-kpi-ic--red    { background: #fee2e2; color: #b91c1c; }
.retex-kpi-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.retex-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.retex-kpi-row { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.retex-kpi-value {
  font-size: 30px; font-weight: 800; color: var(--text);
  line-height: 1.1; letter-spacing: -0.01em;
}
.retex-kpi-value--accent { color: #16a34a; }
.retex-kpi-delta {
  font-size: 12px; font-weight: 600; color: var(--text3);
  display: inline-flex; align-items: center; gap: 4px;
}
.retex-kpi-delta--up   { color: #16a34a; }
.retex-kpi-delta--down { color: #b91c1c; }
.retex-kpi-ctx { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* KPI compacte (variante Suivi des actions) avec mini progress bar */
.retex-kpi--compact .retex-kpi-value { font-size: 28px; }
.retex-kpi-mini-bar {
  height: 4px; border-radius: 999px;
  background: #e7e5e4;
  margin-top: 10px;
  overflow: hidden;
}
.retex-kpi-mini-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .25s;
}
.retex-kpi-mini-bar-fill--green  { background: #15803d; }
.retex-kpi-mini-bar-fill--orange { background: #c2410c; }
.retex-kpi-mini-bar-fill--blue   { background: #2563eb; }
.retex-kpi-mini-bar-fill--slate  { background: #94a3b8; }
.retex-kpi-mini-bar-fill--red    { background: #b91c1c; }

/* Rangées (grids) */
.retex-row { display: grid; gap: 16px; }
.retex-row--overview-top    { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.retex-row--overview-mid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.retex-row--overview-bottom { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.retex-row--actions-top     { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: stretch; }
.retex-row--actions-bottom  { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; }

/* ────────── Line chart résilience (multi-séries) ────────── */
.retex-resilience { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.retex-resilience-legend {
  display: inline-flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--text2);
}
.retex-resilience-legend-item { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.retex-resilience-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.retex-resilience-chart { width: 100%; height: 240px; }
.retex-resilience-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.retex-resilience-grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.retex-resilience-axis-label { font-size: 10px; fill: var(--text3); font-family: inherit; }
.retex-resilience-axis-value { font-size: 10px; fill: var(--text3); font-family: inherit; }
.retex-resilience-line { fill: none; stroke-width: 2; }
.retex-resilience-dot  { fill: #fff; stroke-width: 2; cursor: pointer; }
.retex-resilience-end-label {
  font-size: 11px; font-weight: 700; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.retex-resilience-line--cyber,     .retex-resilience-dot--cyber     { stroke: #2563eb; }
.retex-resilience-line--incendie,  .retex-resilience-dot--incendie  { stroke: #7c3aed; }
.retex-resilience-line--inondation,.retex-resilience-dot--inondation{ stroke: #14b8a6; }
.retex-resilience-line--greve,     .retex-resilience-dot--greve     { stroke: #f59e0b; }
.retex-resilience-line--autres,    .retex-resilience-dot--autres    { stroke: #94a3b8; }
.retex-resilience-swatch--cyber      { background: #2563eb; }
.retex-resilience-swatch--incendie   { background: #7c3aed; }
.retex-resilience-swatch--inondation { background: #14b8a6; }
.retex-resilience-swatch--greve      { background: #f59e0b; }
.retex-resilience-swatch--autres     { background: #94a3b8; }
.retex-resilience-end-label--cyber      { fill: #2563eb; }
.retex-resilience-end-label--incendie   { fill: #7c3aed; }
.retex-resilience-end-label--inondation { fill: #14b8a6; }
.retex-resilience-end-label--greve      { fill: #f59e0b; }
.retex-resilience-end-label--autres     { fill: #475569; }

/* ────────── Donut + légende (cards Avancement / Répartition) ────────── */
.retex-progress-card { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.retex-progress-card .home-card-head { margin-bottom: 6px; }
.retex-progress-body {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 8px 0;
}
.retex-progress-card--side .retex-progress-body { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px; }

.retex-donut {
  position: relative;
  width: 140px; height: 140px;
  flex-shrink: 0;
}
.retex-donut--lg { width: 150px; height: 150px; }
.retex-donut svg { width: 100%; height: 100%; }
.retex-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.retex-donut-num { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1; }
.retex-donut-lbl { font-size: 11px; color: var(--text3); font-weight: 600; margin-top: 4px; }
.retex-donut-seg { fill: none; stroke-width: 16; transition: stroke-width .12s; cursor: pointer; }
.retex-donut-seg:hover,
.retex-donut-seg.is-active { stroke-width: 20; }
.retex-donut-seg--green  { stroke: #16a34a; }
.retex-donut-seg--orange { stroke: #f59e0b; }
.retex-donut-seg--blue   { stroke: #2563eb; }
.retex-donut-seg--slate  { stroke: #94a3b8; }
.retex-donut-seg--purple { stroke: #7c3aed; }
.retex-donut-seg--teal   { stroke: #14b8a6; }
.retex-donut-seg--red    { stroke: #b91c1c; }

.retex-statuses-legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.retex-statuses-legend--rich li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 4px 2px;
}
.retex-statuses-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.retex-statuses-legend li:hover { background: var(--bg); }
.retex-statuses-legend li.is-active { background: var(--bg3); }
.retex-statuses-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.retex-statuses-name  { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retex-statuses-count { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.retex-statuses-pct   { color: var(--text3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.retex-statuses-link { align-self: flex-end; margin-top: 4px; font-size: 13px; }

/* Footer link générique des cards retex */
.retex-card-foot { margin-top: 10px; font-size: 13px; }

/* ────────── Tables RETEX (priorities + actions) ────────── */
.retex-priorities,
.retex-actions-card { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.retex-priorities-head { gap: 12px; }

.retex-list-tablewrap { overflow-x: auto; }
.retex-list-table,
.retex-actions-table { width: 100%; border-collapse: collapse; }
.retex-list-table th,
.retex-actions-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;
}
.retex-list-table td,
.retex-actions-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.retex-list-table tbody tr:last-child td,
.retex-actions-table tbody tr:last-child td { border-bottom: none; }
.retex-list-table tbody tr,
.retex-actions-table tbody tr { cursor: pointer; transition: background .12s; }
.retex-list-table tbody tr:hover td,
.retex-actions-table tbody tr:hover td { background: var(--bg); }
.retex-list-table tbody tr.is-active td,
.retex-actions-table tbody tr.is-active td { background: var(--brand-soft); }

.retex-actions-th-cb { width: 36px; padding-left: 8px; padding-right: 4px; }
.retex-actions-th-kebab { width: 36px; text-align: right; padding-right: 8px; }
.retex-actions-table tr.is-dim td { opacity: 0.35; }

/* Cellule action : titre + icône (cible) */
.retex-action-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--text);
  max-width: 380px;
  overflow: hidden; text-overflow: ellipsis;
}
.retex-action-title-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--text3);
}
.retex-action-source {
  display: flex; flex-direction: column; gap: 1px;
}
.retex-action-source-crise { font-size: 13.5px; color: var(--text); font-weight: 500; }
.retex-action-source-retex { font-size: 11.5px; color: var(--text3); font-weight: 600; letter-spacing: 0.04em; }

/* Risque (badge avec icône) */
.retex-risk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); font-weight: 500;
}
.retex-risk-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}
.retex-risk-ic--cyber      { background: #dbeafe; color: #2563eb; }
.retex-risk-ic--incendie   { background: #ede9fe; color: #7c3aed; }
.retex-risk-ic--inondation { background: #ccfbf1; color: #14b8a6; }
.retex-risk-ic--greve      { background: #fef3c7; color: #d97706; }
.retex-risk-ic--autres     { background: #e8eaed; color: #475569; }

/* Priorité (pill) */
.retex-priority {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.retex-priority--haute   { background: #fee2e2; color: #b91c1c; }
.retex-priority--moyenne { background: #fef3c7; color: #92400e; }
.retex-priority--basse   { background: #dcfce7; color: #15803d; }
.retex-priority--none    { color: var(--text3); font-weight: 500; padding: 0; background: transparent; }

/* Statut action (pill, palette différenciée) */
.retex-action-status {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.retex-action-status--closed      { background: #dcfce7; color: #15803d; }
.retex-action-status--in-progress { background: #ffedd5; color: #c2410c; }
.retex-action-status--planned     { background: #dbeafe; color: #1d4ed8; }
.retex-action-status--pending     { background: #e8eaed; color: #475569; }
.retex-action-status--late        { background: #fee2e2; color: #b91c1c; }

/* Échéance (texte, rouge si en retard) */
.retex-echeance { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.retex-echeance.is-late { color: #b91c1c; font-weight: 700; }
.retex-echeance--empty { color: var(--text3); }

/* Kebab + sr-only */
.retex-row-kebab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text3); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.retex-row-kebab:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

/* Compat : conserver la table « Derniers RETEX » legacy si appelée par les modals */
.retex-list-crise { font-weight: 700; color: var(--text); }
.retex-list-status {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.retex-list-status--finalized   { background: #dcfce7; color: #15803d; }
.retex-list-status--in-progress { background: #ffedd5; color: #c2410c; }
.retex-list-status--late        { background: #fee2e2; color: #b91c1c; }
.retex-list-status--draft       { background: #e8eaed; color: #475569; }
.retex-list-owner { display: inline-flex; align-items: center; gap: 8px; }
.retex-list-owner-name { font-size: 13px; color: var(--text); white-space: nowrap; }
.retex-list-bar {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 150px;
}
.retex-list-bar-track {
  flex: 1 1 auto;
  height: 6px; border-radius: 3px;
  background: #e7e5e4;
  overflow: hidden;
  min-width: 80px;
}
.retex-list-bar-fill { height: 100%; border-radius: 3px; transition: width .2s; }
.retex-list-bar-fill--good   { background: #15803d; }
.retex-list-bar-fill--warn   { background: #c2410c; }
.retex-list-bar-fill--danger { background: #b91c1c; }
.retex-list-bar-pct {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}

/* Pills tabs (Toutes / En cours / Clôturées …) */
.retex-pill-tabs {
  display: inline-flex; gap: 4px;
  flex-wrap: wrap;
}
.retex-pill-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  font: 600 12.5px/1 inherit; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.retex-pill-tab:hover { background: var(--bg); color: var(--text); }
.retex-pill-tab.is-active {
  background: var(--brand-soft);
  color: var(--brand-2);
}
.retex-pill-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.retex-pill-tab.is-active .retex-pill-tab-count {
  background: var(--bg2);
  border-color: var(--brand-2);
  color: var(--brand-2);
}

/* Toolbar de la card actions (tabs + export) */
.retex-actions-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.retex-export-btn { padding: 7px 12px; font-size: 12.5px; }

/* Pagination de la table actions */
.retex-actions-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.retex-actions-pager-info { font-size: 12.5px; color: var(--text2); }
.retex-actions-pager-nav { justify-self: center; display: inline-flex; gap: 4px; align-items: center; }
.retex-actions-pager-size { justify-self: end; }
.retex-actions-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 8px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text2);
  font: 600 12.5px/1 inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.retex-actions-pager-btn:hover:not([disabled]) { background: var(--bg); color: var(--text); }
.retex-actions-pager-btn.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.retex-actions-pager-btn[disabled] { opacity: .45; cursor: not-allowed; }
.retex-actions-pager-ellipsis { padding: 0 4px; color: var(--text3); font-size: 12px; user-select: none; }

/* Checkbox custom (réutilise pattern annuaire-check, namespace dédié retex-cb) */
.retex-cb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  cursor: pointer;
  position: relative;
}
.retex-cb input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.retex-cb > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: 5px;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0;
}
.retex-cb > span::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity .12s;
}
.retex-cb input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.retex-cb input:checked + span::after { opacity: 1; }
.retex-cb input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ────────── Liste « Derniers RETEX réalisés » (cards avec icône) ────────── */
.retex-recent { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.retex-recent-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; }
.retex-recent-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.retex-recent-item:last-child { border-bottom: none; }
.retex-recent-item:hover { background: var(--bg); }
.retex-recent-ic {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.retex-recent-ic--cyber      { background: #dbeafe; color: #2563eb; }
.retex-recent-ic--incendie   { background: #ede9fe; color: #7c3aed; }
.retex-recent-ic--inondation { background: #ccfbf1; color: #14b8a6; }
.retex-recent-ic--greve      { background: #fef3c7; color: #d97706; }
.retex-recent-ic--autres     { background: #e8eaed; color: #475569; }
.retex-recent-body { min-width: 0; }
.retex-recent-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retex-recent-sub  { font-size: 12px; color: var(--text2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.retex-recent-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.retex-recent-tag--cyber      { background: #dbeafe; color: #1d4ed8; }
.retex-recent-tag--incendie   { background: #ede9fe; color: #6d28d9; }
.retex-recent-tag--inondation { background: #ccfbf1; color: #0f766e; }
.retex-recent-tag--greve      { background: #fef3c7; color: #92400e; }
.retex-recent-tag--autres     { background: #e8eaed; color: #475569; }

/* ────────── Sidebar Suivi des actions : par risque (stacked bars) ────── */
.retex-actions-sidebar { display: flex; flex-direction: column; gap: 16px; }
.retex-byrisk-card,
.retex-themes-card { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 4px; }

.retex-byrisk-list,
.retex-themes-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; }

.retex-byrisk-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.retex-byrisk-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.retex-byrisk-bar {
  height: 18px; border-radius: 4px;
  background: #e7e5e4;
  display: flex; overflow: hidden;
}
.retex-byrisk-seg {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 700 10.5px/1 inherit;
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.retex-byrisk-seg--closed      { background: #16a34a; }
.retex-byrisk-seg--in-progress { background: #f59e0b; }
.retex-byrisk-seg--planned     { background: #2563eb; }
.retex-byrisk-seg--pending     { background: #94a3b8; }
.retex-byrisk-seg-label { padding: 0 4px; white-space: nowrap; }

/* ────────── Sidebar Suivi des actions : Top 5 thématiques ────── */
.retex-theme-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 4px 0;
}
.retex-theme-label { font-size: 13px; font-weight: 600; color: var(--text); grid-column: 1 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.retex-theme-meta  {
  grid-column: 2 / 3;
  font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.retex-theme-meta strong { color: var(--text); font-weight: 700; margin-right: 2px; }
.retex-theme-bar {
  grid-column: 1 / -1;
  height: 6px; border-radius: 999px;
  background: #e7e5e4;
  overflow: hidden;
}
.retex-theme-bar-fill {
  height: 100%; border-radius: 999px;
  background: #16a34a;
  transition: width .25s;
}

/* Responsive */
@media (max-width: 1280px) {
  .retex-row--overview-top { grid-template-columns: 1fr; }
  .retex-row--overview-bottom { grid-template-columns: 1fr; }
  .retex-row--actions-top { grid-template-columns: 1fr; }
  .retex-row--actions-bottom { grid-template-columns: 1fr; }
  .retex-actions-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .retex-row--overview-mid { grid-template-columns: 1fr; }
  .retex-actions-kpis { grid-template-columns: repeat(2, 1fr); }
  .retex-overview-kpis { grid-template-columns: repeat(2, 1fr); }
  .retex-progress-body { grid-template-columns: 1fr; justify-items: center; }
  .retex-toolbar { gap: 12px; }
}
@media (max-width: 720px) {
  .retex-tabs { flex-wrap: wrap; }
  .retex-actions-kpis,
  .retex-overview-kpis { grid-template-columns: 1fr; }
  .retex-actions-pager { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .retex-actions-pager-info,
  .retex-actions-pager-nav,
  .retex-actions-pager-size { justify-self: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI popup menu — menu contextuel ancré (kebab "⋮").
   Une seule instance globale à la fois (cf. closePopupMenu côté JS).
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-popup-menu {
  position: fixed;
  list-style: none; padding: 6px; margin: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  font-size: 13px;
  z-index: 10001;
  animation: ui-popup-menu-in 0.12s ease-out;
}
@keyframes ui-popup-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ui-popup-menu li {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
}
.ui-popup-menu li:hover,
.ui-popup-menu li:focus-visible {
  background: var(--bg);
  outline: none;
}
.ui-popup-menu li.is-danger { color: #b91c1c; }
.ui-popup-menu li.is-danger:hover { background: #fef2f2; }
.ui-popup-menu-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text3);
  flex-shrink: 0;
}
.ui-popup-menu li.is-danger .ui-popup-menu-ic { color: #b91c1c; }

/* ─────────────────────────────────────────────────────────────────────────
 * BLOC IMPORTÉ DE PULSE — UI IAM admin « Accès & Sécurité »
 * Inclut les classes .cfg-* (Configurateur PULSE) requises par .iam-*.
 * Voir SYNC-FROM-PULSE.md pour les écarts fonctionnels à traiter.
 * ───────────────────────────────────────────────────────────────────────── */
.cfg-page{max-width:1080px;width:100%;margin:0 auto}
.cfg-page--wide{max-width:1200px}
/* Accès & Sécurité : tableaux 6 colonnes + panneau latéral → plus large. */
.cfg-page--xwide{max-width:1340px}
.cfg-page-head{margin-bottom:1.75rem}
.cfg-page-head h2{font-size:26px;font-weight:700;color:#0f172a;margin-bottom:.4rem;letter-spacing:-.015em}
.cfg-page-head p{font-size:14px;color:var(--text2);line-height:1.55}
.cfg-page-head code{font-size:12px;background:var(--bg3);padding:1px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;color:var(--text)}

/* ─── Sous-onglets de page (ex. Accès & Sécurité) ─── */
.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)}

/* ─── Cards ─── */
.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}

/* ─── Pills ─── */
.cfg-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.32rem .8rem;border-radius:100px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.cfg-pill svg{width:13px;height:13px}
.cfg-pill--ok{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.cfg-pill--off{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.cfg-pill--warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}

/* ─── Grid layouts ─── */
.cfg-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;margin-bottom:1.25rem;align-items:stretch;width:100%}
.cfg-grid-2 > *{min-width:0;width:100%;box-sizing:border-box}
.cfg-page > .cfg-card + .cfg-card{margin-top:1.25rem}

/* ─── État du système - APIs externes list ─── */
.cfg-api-list{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.25rem}
.cfg-api-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;
  background:#fff;border:1px solid var(--border);border-radius:14px;
}
.cfg-api-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  font-weight:700;font-size:13px;
}
.cfg-api-logo--sm{width:32px;height:32px;font-size:12px}
.cfg-api-logo--x{background:#000;color:#fff}
.cfg-api-logo--anthropic{background:#c79c7e;color:#3f1f0a}
.cfg-api-info{min-width:0}
.cfg-api-name{font-size:14px;font-weight:600;color:var(--text)}
.cfg-api-sub{font-size:12px;color:var(--text2);margin-top:1px}
.cfg-api-sub.is-ok{color:#15803d;font-weight:500}

/* ─── Banner (operational status) ─── */
.cfg-banner{
  display:flex;align-items:center;gap:.55rem;
  padding:.75rem 1rem;border-radius:12px;
  font-size:13px;font-weight:500;
}
.cfg-banner--ok{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.cfg-banner--ko{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.cfg-banner-dot{
  width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.cfg-banner--ko .cfg-banner-dot{box-shadow:0 0 0 3px rgba(239,68,68,.15)}

/* ─── Stat tiles ─── */
.cfg-stat-tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:1.25rem;
}
.cfg-stat-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.35rem .4rem 1.1rem;min-width:0;
  background:#fafbfc;border:1px solid var(--border);border-radius:14px;
}
.cfg-stat-tile-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:.85rem;
}
.cfg-stat-tile-icon svg{width:22px;height:22px}
.cfg-stat-tile-icon--blue{background:#dbeafe;color:#2563eb}
.cfg-stat-tile-icon--violet{background:#ede9fe;color:#7c3aed}
.cfg-stat-tile-icon--green{background:#dcfce7;color:#15803d}
.cfg-stat-tile-num{font-size:30px;font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-.01em}
.cfg-stat-tile-num--small{font-size:30px;color:#16a34a;letter-spacing:-.005em}
.cfg-stat-tile-num.is-stopped{color:#dc2626}
.cfg-stat-tile-num.is-idle{color:#64748b}
.cfg-stat-tile-label{font-size:12px;color:var(--text2);margin-top:.4rem;line-height:1.3;padding:0 .15rem}
.cfg-stat-tile-hint{font-size:11px;color:var(--text3);margin-top:.2rem;font-style:italic}

/* ─── Informations système ─── */
.cfg-sysinfo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.cfg-sysinfo-item{
  display:flex;align-items:center;gap:.85rem;min-width:0;
}
.cfg-sysinfo-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:#f1f5f9;color:#64748b;
}
.cfg-sysinfo-icon svg{width:17px;height:17px}
.cfg-sysinfo-label{font-size:11.5px;color:var(--text3);text-transform:none;letter-spacing:0;font-weight:500}
.cfg-sysinfo-val{font-size:13.5px;font-weight:600;color:var(--text);margin-top:1px}

/* ─── Tests page ─── */
.cfg-tests-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.25rem;align-items:start;min-height:0}
.cfg-tests-card,.cfg-tests-output-card{padding:1.5rem;display:flex;flex-direction:column}

.cfg-step-head{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.25rem;
}
.cfg-step-head--right{justify-content:flex-start}
.cfg-step-head--right .cfg-clear-btn{margin-left:auto}
.cfg-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:#dcfce7;color:#15803d;font-size:13px;font-weight:700;
}
.cfg-step-title{font-size:15px;font-weight:600;color:var(--text)}
.cfg-clear-btn{
  font-size:12px;font-weight:500;padding:.4rem .8rem;border-radius:8px;
  color:var(--text2);
}

.cfg-test-block{padding:.5rem 0}
.cfg-test-block-head{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
}
.cfg-test-block-title{font-size:14px;font-weight:600;color:var(--text)}
.cfg-test-block-sub{font-size:12px;color:var(--text2);margin-top:1px}
.cfg-test-sep{border:none;border-top:1px solid var(--border);margin:1.25rem -1.5rem 1.25rem;padding:0;width:auto}

.cfg-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:#e2e8f0;
  color:var(--text3);font-size:10px;font-weight:600;cursor:help;margin-left:.2rem;
  font-family:'Inter',system-ui,sans-serif;
}
.cfg-input-hint{font-size:11.5px;color:var(--text3);margin-top:.3rem}

.cfg-test-btn{
  width:100%;justify-content:center;
  margin-top:1rem;padding:.75rem 1rem;
  font-size:13.5px;font-weight:600;border-radius:10px;
}

/* Response area */
.cfg-resp-tabs{
  display:flex;gap:.4rem;margin-bottom:.85rem;
}
.cfg-resp-tab{
  padding:.45rem 1rem;border-radius:8px;cursor:pointer;
  background:#f1f5f9;border:1px solid var(--border);
  font-size:12.5px;font-weight:500;color:var(--text2);
  transition:background .15s,color .15s,border-color .15s;
}
.cfg-resp-tab:hover{background:#e2e8f0}
.cfg-resp-tab.active{background:#0f172a;color:#fff;border-color:#0f172a}

.cfg-tests-output{
  background:#0d1117;border:1px solid #21262d;border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  min-height:340px;flex:1;
}
.cfg-response-body{
  flex:1;overflow-y:auto;padding:1.1rem 1.3rem;margin:0;
  font-size:12px;font-family:'JetBrains Mono','Cascadia Code','Fira Code',Consolas,monospace;
  color:#e6edf3;white-space:pre-wrap;word-break:break-all;line-height:1.7;
  counter-reset:line;
}
.cfg-response-body .cfg-resp-line{
  display:block;padding-left:2.4rem;position:relative;
}
.cfg-response-body .cfg-resp-line::before{
  counter-increment:line;content:counter(line);
  position:absolute;left:0;width:2rem;text-align:right;
  color:#5b6470;user-select:none;
}
.cfg-resp-placeholder{color:#5b6470;font-style:italic}

.cfg-resp-status-overlay{
  position:absolute;top:.75rem;right:.75rem;
  display:flex;align-items:center;gap:.5rem;
}
.cfg-resp-time{font-size:11px;color:#8b949e;font-family:'JetBrains Mono',monospace}
.cfg-badge{padding:3px 11px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.25rem}
.cfg-badge.ok{background:rgba(34,197,94,.18);color:#3fb950;border:1px solid rgba(34,197,94,.3)}
.cfg-badge.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#3fb950}
.cfg-badge.ko{background:rgba(239,68,68,.18);color:#f85149;border:1px solid rgba(239,68,68,.3)}
.cfg-badge.loading{background:rgba(88,166,255,.18);color:#58a6ff;border:1px solid rgba(88,166,255,.3)}

.cfg-resp-footer{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem 1rem;margin-top:.75rem;
  background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;
  border-radius:10px;font-size:12.5px;font-weight:500;
}
.cfg-resp-footer.is-ko{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.cfg-resp-footer-time{margin-left:auto;font-size:11.5px;color:var(--text2);font-family:'JetBrains Mono',monospace;font-weight:400}

/* ─── Mot de passe ─── */
.cfg-pwd-card{padding:1.5rem 1.75rem}
.cfg-pwd-status{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;border-radius:12px;
  background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;
  margin-bottom:1.5rem;
}
.cfg-pwd-status-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;
  flex-shrink:0;
}
.cfg-pwd-status-icon svg{width:14px;height:14px}
.cfg-pwd-status-title{font-size:13px;font-weight:600;color:#15803d}
.cfg-pwd-status-sub{font-size:11.5px;color:#16a34a;margin-top:1px}

.cfg-pwd-input{
  position:relative;display:flex;align-items:stretch;
}
.cfg-pwd-input input{flex:1;padding-right:2.6rem}
.cfg-pwd-eye{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:.3rem;color:var(--text3);border-radius:6px;
  transition:color .15s,background .15s;
}
.cfg-pwd-eye:hover{color:var(--text);background:var(--bg3)}
.cfg-pwd-eye svg{width:16px;height:16px}

.cfg-pwd-strength{margin-top:.5rem}
.cfg-pwd-bar{display:flex;gap:4px;margin-bottom:.35rem}
.cfg-pwd-bar-i{
  flex:1;height:5px;background:#e5e7eb;border-radius:100px;
  transition:background .2s;
}
.cfg-pwd-strength.is-1 .cfg-pwd-bar-i[data-i="0"]{background:#ef4444}
.cfg-pwd-strength.is-2 .cfg-pwd-bar-i[data-i="0"],
.cfg-pwd-strength.is-2 .cfg-pwd-bar-i[data-i="1"]{background:#f59e0b}
.cfg-pwd-strength.is-3 .cfg-pwd-bar-i[data-i="0"],
.cfg-pwd-strength.is-3 .cfg-pwd-bar-i[data-i="1"],
.cfg-pwd-strength.is-3 .cfg-pwd-bar-i[data-i="2"]{background:#eab308}
.cfg-pwd-strength.is-4 .cfg-pwd-bar-i{background:#22c55e}
.cfg-pwd-strength-label{font-size:11.5px;color:var(--text3)}
.cfg-pwd-strength-label strong{color:var(--text);font-weight:600}
.cfg-pwd-strength.is-1 .cfg-pwd-strength-label strong{color:#dc2626}
.cfg-pwd-strength.is-2 .cfg-pwd-strength-label strong{color:#d97706}
.cfg-pwd-strength.is-3 .cfg-pwd-strength-label strong{color:#ca8a04}
.cfg-pwd-strength.is-4 .cfg-pwd-strength-label strong{color:#15803d}

.cfg-pwd-match{
  display:flex;align-items:center;gap:.4rem;
  margin-top:.4rem;font-size:12px;font-weight:500;
}
.cfg-pwd-match.is-ok{color:#15803d}
.cfg-pwd-match.is-ko{color:#dc2626}
.cfg-pwd-match::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0}
.cfg-pwd-match.is-ok::before{background:#22c55e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat}
.cfg-pwd-match.is-ko::before{background:#ef4444 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/10px no-repeat}

.cfg-pwd-save{
  width:100%;justify-content:center;margin-top:1.25rem;
  padding:.95rem 1rem;font-size:14px;font-weight:600;border-radius:12px;
}

/* ─── Tip card (Bonnes pratiques / Bon à savoir) ─── */
.cfg-tip{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.1rem 1.3rem;border-radius:14px;
  background:#eff6ff;border:1px solid #bfdbfe;
  margin-top:1.25rem;position:relative;
}
.cfg-tip-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:#3b82f6;color:#fff;flex-shrink:0;
}
.cfg-tip-icon svg{width:16px;height:16px}
.cfg-tip-body{flex:1;min-width:0}
.cfg-tip-title{font-size:13.5px;font-weight:700;color:#1e3a8a;margin-bottom:.5rem}
.cfg-tip-text{font-size:12.5px;color:#1e40af;line-height:1.55}
.cfg-tip-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.cfg-tip-list li{display:flex;align-items:center;gap:.55rem;font-size:12.5px;color:#1e40af}
.cfg-tip-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:#3b82f6;color:#fff;
  font-size:9px;font-weight:700;flex-shrink:0;
}
.cfg-tip-shield{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;background:#dbeafe;color:#2563eb;flex-shrink:0;
  align-self:center;
}
.cfg-tip-shield svg{width:24px;height:24px}

/* ─── Consommation IA ─── */
.cfg-page-head--with-action{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.cfg-page-head--with-action > div:first-child{flex:1;min-width:0}
.cfg-page-head-actions{display:flex;gap:.5rem;flex-shrink:0;padding-top:.4rem}

.cfg-aim-kpi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem;
}
.cfg-aim-kpi{
  background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:1.25rem 1.4rem;min-width:0;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  display:flex;flex-direction:column;gap:.45rem;
}
.cfg-aim-kpi-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin-bottom:.2rem;
}
.cfg-aim-kpi-icon svg{width:18px;height:18px}
.cfg-aim-kpi-icon--blue{background:#dbeafe;color:#2563eb}
.cfg-aim-kpi-icon--violet{background:#ede9fe;color:#7c3aed}
.cfg-aim-kpi-icon--green{background:#dcfce7;color:#15803d}
.cfg-aim-kpi-label{font-size:12.5px;color:var(--text2);font-weight:500}
.cfg-aim-kpi-num{font-size:30px;font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-.01em}
.cfg-aim-kpi-hint{font-size:11.5px;color:var(--text3);font-style:italic;line-height:1.35}
.cfg-aim-kpi-hint--ok{color:#15803d;font-style:normal;font-weight:500}

.cfg-aim-cache-tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:1rem;
}
.cfg-aim-cache-tile{
  background:#fafbfc;border:1px solid var(--border);border-radius:14px;
  padding:1rem .9rem;min-width:0;
  display:flex;flex-direction:column;gap:.3rem;
}
.cfg-aim-cache-tile-label{font-size:11.5px;color:var(--text3);font-weight:500}
.cfg-aim-cache-tile-num{font-size:21px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.cfg-aim-cache-tile-hint{font-size:11px;color:var(--text3);line-height:1.3}

.cfg-aim-cat-list{display:flex;flex-direction:column;gap:.85rem}
.cfg-aim-cat-row{display:grid;grid-template-columns:1fr auto auto;gap:.6rem 1rem;align-items:center;font-size:13px}
.cfg-aim-cat-row-label{color:var(--text);font-weight:500}
.cfg-aim-cat-row-bar{
  grid-column:1 / -1;height:6px;background:#f1f5f9;border-radius:6px;overflow:hidden;
}
.cfg-aim-cat-row-bar-fill{
  height:100%;background:#7c3aed;border-radius:6px;transition:width .3s ease;
}
.cfg-aim-cat-row-pct{color:var(--text2);font-variant-numeric:tabular-nums;font-weight:600;min-width:42px;text-align:right}
.cfg-aim-cat-row-tokens{color:var(--text3);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cfg-aim-cat-empty,
.cfg-aim-activity-empty,
.cfg-aim-scenario-empty{
  text-align:center;color:var(--text3);font-style:italic;font-size:13px;
  padding:1.25rem;border:1px dashed var(--border);border-radius:12px;background:#fafbfc;
}

.cfg-aim-scenario{
  background:#fafbfc;border:1px solid var(--border);border-radius:12px;
  padding:.85rem 1rem;margin-bottom:1rem;font-size:13px;
}
.cfg-aim-scenario-client{font-weight:600;color:var(--text);margin-bottom:.2rem}
.cfg-aim-scenario-objectif{color:var(--text2);font-size:12px;line-height:1.4}

.cfg-aim-summary{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.cfg-aim-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--text2);
  padding:.45rem .7rem;background:#fafbfc;border-radius:8px;
}
.cfg-aim-summary-row strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

.cfg-aim-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cfg-aim-actions .btn{font-size:12.5px}
.cfg-aim-reset-btn{color:#991b1b;border-color:#fecaca;background:#fef2f2}
.cfg-aim-reset-btn:hover{background:#fee2e2}

.cfg-aim-activity-list{
  display:flex;flex-direction:column;gap:.5rem;
  max-height:420px;overflow-y:auto;
}
.cfg-aim-activity-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;
  align-items:center;padding:.65rem .85rem;
  background:#fafbfc;border:1px solid var(--border);border-radius:10px;
  font-size:12.5px;
}
.cfg-aim-activity-time{color:var(--text3);font-variant-numeric:tabular-nums;font-weight:500}
.cfg-aim-activity-main{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.cfg-aim-activity-cat{font-weight:600;color:var(--text);font-size:13px}
.cfg-aim-activity-meta{color:var(--text3);font-size:11.5px;display:flex;gap:.65rem;flex-wrap:wrap}
.cfg-aim-activity-meta span:not(:last-child)::after{content:"·";margin-left:.65rem;color:var(--text3)}
.cfg-aim-activity-badge{
  display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:100px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.cfg-aim-activity-badge--ok{background:#dcfce7;color:#15803d}
.cfg-aim-activity-badge--warn{background:#fef3c7;color:#92400e}
.cfg-aim-activity-badge--err{background:#fee2e2;color:#991b1b}

/* Activity list — regroupement par action utilisateur (actionId). Le header
   du groupe est cliquable (toggle data-expanded) ; les children sont indentés
   et plus discrets pour bien marquer la hiérarchie « 1 action = N appels ».
   `flex-shrink:0` indispensable : le parent `.cfg-aim-activity-list` est un
   flex column, sans ce flag les groupes se collapsent à 0px de hauteur si la
   liste excède `max-height:420px`. `min-height` sur le header garantit aussi
   une zone cliquable de taille raisonnable. */
.cfg-aim-activity-group{
  background:#fafbfc;border:1px solid var(--border);border-radius:10px;
  flex-shrink:0;
}
.cfg-aim-activity-group .cfg-aim-activity-group-header{
  display:grid;grid-template-columns:16px 64px 1fr auto;gap:.65rem;
  align-items:center;padding:.65rem .85rem;
  min-height:2.6rem;
  cursor:pointer;user-select:none;
  font-size:12.5px;
  transition:background .12s;
}
.cfg-aim-activity-group .cfg-aim-activity-group-header:hover{background:#f3f4f6}
.cfg-aim-activity-group .cfg-aim-activity-group-header:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
.cfg-aim-activity-group-chevron{color:var(--text3);transition:transform .15s}
.cfg-aim-activity-group[data-expanded] .cfg-aim-activity-group-chevron{transform:rotate(90deg)}
.cfg-aim-activity-group-label{color:var(--brand-2)}
.cfg-aim-activity-group-children{display:none;padding:.15rem .85rem .65rem 2.65rem;background:#fff;border-top:1px solid var(--border)}
.cfg-aim-activity-group[data-expanded] .cfg-aim-activity-group-children{display:flex;flex-direction:column;gap:.4rem}
.cfg-aim-activity-row--child{
  background:#fafbfc;border:1px dashed var(--border);
  padding:.5rem .7rem;font-size:12px;
  grid-template-columns:56px 1fr auto;
}
.cfg-aim-activity-row--child .cfg-aim-activity-cat{font-size:12.5px;font-weight:500}
.cfg-aim-activity-row--child .cfg-aim-activity-meta{font-size:11px}

@media (max-width:1100px){
  .cfg-aim-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg-aim-cache-tiles{grid-template-columns:1fr}
}

/* ─── Clés API ─── */
.cfg-key-card{padding:1.5rem 1.75rem}
.cfg-key-card-desc{font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.4}
.cfg-key-updated{font-size:11.5px;color:var(--text3)}
.cfg-key-current{
  position:relative;display:flex;align-items:center;
  background:#f8fafc;border:1px solid var(--border);border-radius:10px;
  padding:.15rem;
}
.cfg-key-current input{
  flex:1;background:transparent;border:none;padding:.55rem .8rem;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--text);
}
.cfg-key-current input:focus{box-shadow:none}
.cfg-key-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:transparent;border:none;color:var(--text3);cursor:pointer;
  transition:color .15s,background .15s;
}
.cfg-key-icon-btn:hover{color:var(--text);background:#fff}
.cfg-key-icon-btn svg{width:15px;height:15px}

.cfg-key-update-row{display:flex;gap:.6rem}
.cfg-key-update-row input{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:12.5px}
.cfg-paste-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border-radius:10px;
  background:#fff;border:1px solid var(--border2);color:var(--text2);
  font-size:12px;font-weight:500;flex-shrink:0;
}
.cfg-paste-btn:hover{background:var(--bg3);color:var(--text)}

.cfg-key-update-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.85rem;flex-wrap:wrap;
}
.cfg-key-update-hint{
  display:flex;align-items:center;gap:.4rem;
  font-size:11.5px;color:var(--text3);
}
.cfg-key-update-hint svg{flex-shrink:0;color:var(--text3)}
.cfg-key-save{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.1rem;font-size:13px;font-weight:600;border-radius:10px;
}

.cfg-msg{font-size:12px;min-height:1.3em;margin-top:.5rem;font-weight:500}

/* ─── Mots de passe d'accès – layout 2 colonnes + contrôles dynamiques ─── */
.cfg-pwd-step{
  display:flex;gap:.85rem;align-items:flex-start;
  background:#f8fafc;border:1px solid var(--border);border-radius:12px;
  padding:.9rem 1rem;margin:.4rem 0 1.1rem;
}
.cfg-pwd-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:#2563eb;color:#fff;font-size:12.5px;font-weight:700;
}
.cfg-pwd-step-body{flex:1;min-width:0}
.cfg-pwd-step-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.04em}

.cfg-pwd-roles{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-bottom:.5rem;
}
.cfg-pwd-role{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;
}
.cfg-pwd-role[data-role="admin"]{border-top:3px solid #ef4444}
.cfg-pwd-role[data-role="player"]{border-top:3px solid #6366f1}
.cfg-pwd-role-head{display:flex;align-items:flex-start;gap:.65rem}
.cfg-pwd-role[data-role="admin"]  .cfg-pwd-step-num{background:#ef4444}
.cfg-pwd-role[data-role="player"] .cfg-pwd-step-num{background:#6366f1}
.cfg-pwd-role-title{font-size:14px;font-weight:700;color:var(--text)}
.cfg-pwd-role-sub{font-size:11.5px;color:var(--text3);line-height:1.4;margin-top:1px}

.cfg-pwd-field label{display:block;font-size:11.5px;font-weight:600;color:var(--text2);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.cfg-pwd-field input[type="password"],
.cfg-pwd-field input[type="text"]{
  width:100%;background:#f8fafc;border:1px solid var(--border);border-radius:10px;
  padding:.55rem .8rem;color:var(--text);font-size:13px;outline:none;font-family:inherit;
  transition:border-color .15s, background .15s;
}
.cfg-pwd-field input:focus{border-color:#3b82f6;background:#fff}

/* Jauge de robustesse */
.cfg-pwd-strength{display:flex;flex-direction:column;gap:.3rem}
.cfg-pwd-strength-bar{
  position:relative;height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden;
}
.cfg-pwd-strength-bar span{
  position:absolute;top:0;left:0;height:100%;width:0%;
  border-radius:999px;background:#cbd5e1;transition:width .2s, background .2s;
}
.cfg-pwd-strength-label{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.02em}
.cfg-pwd-strength[data-level="1"] .cfg-pwd-strength-bar span{width:20%;background:#dc2626}
.cfg-pwd-strength[data-level="1"] .cfg-pwd-strength-label{color:#dc2626}
.cfg-pwd-strength[data-level="2"] .cfg-pwd-strength-bar span{width:40%;background:#f97316}
.cfg-pwd-strength[data-level="2"] .cfg-pwd-strength-label{color:#f97316}
.cfg-pwd-strength[data-level="3"] .cfg-pwd-strength-bar span{width:60%;background:#eab308}
.cfg-pwd-strength[data-level="3"] .cfg-pwd-strength-label{color:#a16207}
.cfg-pwd-strength[data-level="4"] .cfg-pwd-strength-bar span{width:80%;background:#22c55e}
.cfg-pwd-strength[data-level="4"] .cfg-pwd-strength-label{color:#15803d}
.cfg-pwd-strength[data-level="5"] .cfg-pwd-strength-bar span{width:100%;background:#16a34a}
.cfg-pwd-strength[data-level="5"] .cfg-pwd-strength-label{color:#15803d}

/* Liste de contrôle dynamique */
.cfg-pwd-checklist{
  list-style:none;padding:.55rem .75rem;margin:0;
  background:#f8fafc;border:1px solid var(--border);border-radius:10px;
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem .85rem;
  font-size:11.5px;color:var(--text2);
}
.cfg-pwd-checklist li{display:flex;align-items:center;gap:.4rem;line-height:1.3;transition:color .15s}
.cfg-pwd-checklist li strong{font-weight:600;color:inherit}
.cfg-pwd-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:#e5e7eb;color:#fff;font-size:9px;font-weight:700;
  transition:background .15s;
}
.cfg-pwd-checklist li.ok{color:#15803d}
.cfg-pwd-checklist li.ok .cfg-pwd-dot{background:#22c55e}
.cfg-pwd-checklist li.ok .cfg-pwd-dot::after{content:"\2713"}
.cfg-pwd-checklist li.ko{color:#b91c1c}
.cfg-pwd-checklist li.ko .cfg-pwd-dot{background:#ef4444}
.cfg-pwd-checklist li.ko .cfg-pwd-dot::after{content:"\00d7"}

/* Indicateur de correspondance "confirmation" */
.cfg-pwd-match{
  font-size:11.5px;font-weight:600;margin-top:.35rem;min-height:1.2em;
  display:flex;align-items:center;gap:.3rem;
}
.cfg-pwd-match.ok{color:#15803d}
.cfg-pwd-match.ko{color:#b91c1c}

@media (max-width:900px){
  .cfg-pwd-roles{grid-template-columns:1fr}
  .cfg-pwd-checklist{grid-template-columns:1fr}
}

/* ─── Sources prédéfinies ─── */
.cfg-src-tabs{
  display:flex;gap:0;margin-bottom:1.5rem;
  border-bottom:1px solid var(--border);padding:0;
}
.cfg-src-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.25rem;
  background:transparent;border:none;border-bottom:2px solid transparent;
  font-size:13.5px;font-weight:500;color:var(--text2);
  cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px;
  font-family:inherit;
}
.cfg-src-tab:hover{color:var(--text)}
.cfg-src-tab.active{color:#15803d;border-bottom-color:#22c55e;font-weight:600}

.cfg-src-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:1.25rem;align-items:start;
}
.cfg-src-side{display:flex;flex-direction:column;gap:1.25rem}

.cfg-src-list-card{padding:1.5rem 1.75rem;display:flex;flex-direction:column}
.cfg-src-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.4rem;
}
.cfg-src-list-title{
  display:flex;align-items:center;gap:.5rem;
  font-size:15.5px;font-weight:700;color:var(--text);
}
.cfg-src-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;
  background:#22c55e;color:#fff;border-radius:100px;
  font-size:11.5px;font-weight:700;
}
.cfg-src-list-sub{font-size:12.5px;color:var(--text2);margin-bottom:1rem}
.cfg-src-list-foot{
  font-size:12px;color:var(--text3);text-align:left;
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border);
}
.cfg-sort-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .85rem;border-radius:8px;
  font-size:12px;font-weight:500;color:var(--text2);
}

.cfg-sugg-list{
  display:flex;flex-direction:column;gap:.5rem;
  max-height:420px;overflow-y:auto;
}
.cfg-sugg-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .85rem;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  font-size:13px;min-width:0;
  transition:border-color .15s,box-shadow .15s;
}
.cfg-sugg-item:hover{border-color:#cbd5e1;box-shadow:var(--shadow-sm)}
.cfg-sugg-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:#0f172a;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;
  text-transform:uppercase;
  background-size:cover;background-position:center;
}
.cfg-sugg-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cfg-sugg-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-sugg-handle{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-sugg-item .src-del{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:#fef2f2;border:1px solid #fee2e2;color:#ef4444;
  cursor:pointer;flex-shrink:0;font-size:13px;
  transition:background .15s,color .15s;
}
.cfg-sugg-item .src-del::before{
  content:"";width:14px;height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>") center/contain no-repeat;
}
.cfg-sugg-item .src-del:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.src-empty{padding:1.5rem;text-align:center;color:var(--text3);font-size:13px}

/* Add card (right column) */
.cfg-src-add-card{padding:1.5rem 1.75rem}
.cfg-src-add-title{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:.3rem}
.cfg-src-add-sub{font-size:12.5px;color:var(--text2);margin-bottom:1.1rem}
.cfg-src-add-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem;
}
.cfg-src-add-grid label{
  margin-top:0;margin-bottom:.35rem;
  font-size:12px;font-weight:500;color:var(--text2);text-transform:none;letter-spacing:0;
  display:flex;align-items:center;
}
.cfg-src-add-grid input{font-size:13px;width:100%}
.cfg-add-source-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.7rem 1.1rem;border-radius:10px;
  background:#fff;border:1.5px solid #22c55e;color:#15803d;
  font-size:13px;font-weight:600;
  transition:background .15s;
}
.cfg-add-source-btn:hover{background:#dcfce7;border-color:#16a34a}

/* Suggestions populaires */
.cfg-src-popular-card{padding:1.5rem 1.75rem}
.cfg-src-popular-title{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:.3rem}
.cfg-src-popular-sub{font-size:12.5px;color:var(--text2);margin-bottom:1.1rem}
.cfg-src-popular-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
}
.cfg-popular-chip{
  display:flex;align-items:center;gap:.45rem;
  padding:.55rem .7rem;
  background:#f8fafc;border:1px solid var(--border);border-radius:10px;
  font-size:12px;color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s;min-width:0;
  font-family:inherit;
}
.cfg-popular-chip:hover{background:#fff;border-color:#22c55e}
.cfg-popular-chip-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#0f172a;color:#fff;
  font-size:9px;font-weight:700;flex-shrink:0;
  background-size:cover;background-position:center;
}
.cfg-popular-chip-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cfg-popular-chip-plus{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--text3);flex-shrink:0;line-height:1;
}
.cfg-popular-chip:hover .cfg-popular-chip-plus{color:#22c55e}

.cfg-popular-more{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;margin-top:.85rem;
  padding:.6rem 1rem;border-radius:10px;
  background:#f8fafc;border:1px solid var(--border);
  font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;
  font-family:inherit;
  transition:background .15s;
}
.cfg-popular-more:hover{background:#f1f5f9}
.cfg-popular-more svg{transition:transform .2s}
.cfg-popular-more.is-open svg{transform:rotate(180deg)}

/* ─── À propos modal ─── */
#about-modal{display:none;position:fixed;inset:0;z-index:800;background:rgba(15,23,42,.7);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:1.5rem}
#about-modal.open{display:flex}
.about-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:2rem;width:100%;max-width:560px;position:relative;max-height:90vh;overflow-y:auto}
.about-close{position:absolute;top:.9rem;right:.9rem;background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.about-close:hover{background:var(--border)}
.about-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.about-logo{width:48px;height:48px;flex-shrink:0}
.about-title{font-size:22px;font-weight:800;letter-spacing:.04em;color:var(--text)}
.about-subtitle{font-size:11.5px;color:var(--brand-2);font-weight:500}
.about-desc{font-size:13.5px;color:var(--text2);line-height:1.65;margin-bottom:1.25rem}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.5rem}
.about-feat{display:flex;align-items:flex-start;gap:.6rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .8rem;font-size:12.5px;line-height:1.45}
.about-feat strong{display:block;margin-bottom:.1rem;font-size:12.5px;color:var(--text)}
.about-feat-icon{font-size:18px;flex-shrink:0;line-height:1;margin-top:2px}
.about-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text3);padding-top:.85rem;border-top:1px solid var(--border)}
.about-version{font-family:monospace;font-size:11px;background:var(--bg3);padding:2px 8px;border-radius:100px}

/* ─── À propos · Suite SECALYS ─── */
.about-suite{margin:0 0 1.4rem;padding:1rem 1.1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm)}
.about-suite-title{font-size:10.5px;font-weight:700;color:var(--brand-2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.about-suite-intro{font-size:12.5px;color:var(--text2);line-height:1.55;margin:0 0 .85rem}
.about-suite-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.about-suite-item{display:flex;align-items:center;gap:.7rem;font-size:12.5px;color:var(--text2);line-height:1.45}
.about-suite-icon{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border);border-radius:7px;color:var(--text2)}
.about-suite-icon svg{width:16px;height:16px}
.about-suite-text strong{font-weight:800;color:var(--text);letter-spacing:.04em;margin-right:.15rem}
.about-suite-item--current{color:var(--text)}
.about-suite-item--current .about-suite-icon{background:var(--brand);border-color:var(--brand);color:#fff}
.about-suite-here{display:inline-block;margin-left:.4rem;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-2);background:var(--brand-soft);padding:1px 7px;border-radius:100px;border:1px solid rgba(34,197,94,.3);vertical-align:1px}

/* ─── Documentation modal ─── */
#doc-modal{display:none;position:fixed;inset:0;z-index:800;background:rgba(15,23,42,.7);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:1.5rem}
#doc-modal.open{display:flex}
.doc-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;position:relative}
.doc-close{position:absolute;top:.9rem;right:.9rem;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;z-index:2}
.doc-close:hover{background:var(--bg3)}
.doc-header{padding:1.5rem 1.75rem 0;flex-shrink:0;border-bottom:1px solid var(--border)}
.doc-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:1rem}
.doc-tabs{display:flex;gap:6px;padding-bottom:0;margin-bottom:-1px}
.doc-tab{padding:.5rem 1.1rem;background:transparent;border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:background .15s,color .15s}
.doc-tab:hover{background:var(--bg3)}
.doc-tab.active{background:var(--bg2);color:var(--text);border-bottom:1px solid var(--bg2);margin-bottom:-1px;position:relative;z-index:1}
.doc-body{flex:1;overflow-y:auto;padding:1.75rem}
.doc-section{margin-bottom:2rem}
.doc-section:last-child{margin-bottom:0}
.doc-section h3{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:.65rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.doc-section p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:.5rem}
.doc-warn{background:#fef3c7;border:1px solid #fcd34d;border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:12.5px;color:#92400e;line-height:1.5;margin-top:.75rem}
.doc-list{padding-left:1.3rem;font-size:13px;color:var(--text2);line-height:1.9}
.doc-list li{margin-bottom:.15rem}
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.65rem}
.doc-col-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:12.5px;color:var(--text2);line-height:1.55}
.doc-col-head{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:13px;margin-bottom:.4rem;color:var(--text)}
.doc-indicators{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.doc-indicator{display:flex;align-items:flex-start;gap:.65rem;font-size:12.5px;color:var(--text2);line-height:1.55}
.doc-ind-badge{flex-shrink:0;padding:2px 10px;border-radius:100px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.doc-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;font-size:13px;color:var(--text2);line-height:1.6}
.doc-two-col strong{display:block;color:var(--text);margin-bottom:.3rem}

/* ─── Documentation modal - extensions (TOC, tables, runbook, ASCII, code, FAQ, glossaire) ─── */
.doc-box.doc-box--wide{max-width:1080px}
.doc-section h4{font-size:13px;font-weight:700;color:var(--text);margin:.95rem 0 .35rem}
.doc-toc{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;margin-bottom:1.25rem;font-size:12.5px}
.doc-toc-title{font-weight:700;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.doc-toc ol{margin:0;padding-left:1.4rem;color:var(--text2);line-height:1.85;column-count:2;column-gap:1.5rem}
.doc-toc a{color:var(--text2);text-decoration:none}
.doc-toc a:hover{color:var(--text);text-decoration:underline}
.doc-table{width:100%;border-collapse:collapse;font-size:12px;margin:.6rem 0 .35rem;line-height:1.5}
.doc-table th,.doc-table td{border:1px solid var(--border);padding:.45rem .6rem;text-align:left;vertical-align:top;color:var(--text2)}
.doc-table th{background:var(--bg3);color:var(--text);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.doc-table code{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg3);padding:1px 5px;border-radius:4px;color:var(--text)}
.doc-table tr:nth-child(even) td{background:rgba(15,23,42,.025)}
.doc-arch{background:#0f172a;color:#e2e8f0;border-radius:var(--radius-sm);padding:.95rem 1.1rem;margin:.65rem 0;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;white-space:pre;overflow-x:auto}
.doc-code{background:#0f172a;color:#e2e8f0;border-radius:var(--radius-sm);padding:.8rem 1rem;margin:.55rem 0;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;overflow-x:auto;white-space:pre}
.doc-code-inline{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--bg3);padding:1px 6px;border-radius:4px;color:var(--text);border:1px solid var(--border)}
.doc-note{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius-sm);padding:.7rem 1rem;font-size:12.5px;color:#1e40af;line-height:1.55;margin:.65rem 0}
.doc-tip{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius-sm);padding:.7rem 1rem;font-size:12.5px;color:#15803d;line-height:1.55;margin:.65rem 0}
.doc-kbd{display:inline-block;padding:1px 7px;font-family:'JetBrains Mono',monospace;font-size:10.5px;background:var(--bg3);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;color:var(--text);line-height:1.4}
.doc-faq{margin:.4rem 0}
.doc-faq summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--text);padding:.55rem .8rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);list-style:none;margin-bottom:.35rem;transition:background .15s}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::before{content:'▸ ';color:var(--text2);font-size:11px}
.doc-faq[open] summary::before{content:'▾ '}
.doc-faq[open] summary{margin-bottom:.4rem;background:var(--bg2)}
.doc-faq summary:hover{background:var(--bg2)}
.doc-faq-body{font-size:12.5px;color:var(--text2);line-height:1.65;padding:.1rem .85rem .35rem}
.doc-glossary{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:12.5px;color:var(--text2);line-height:1.55;margin:.45rem 0}
.doc-glossary dt{font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11.5px;white-space:nowrap}
.doc-glossary dd{margin:0}
.doc-confirm{background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:4px;display:inline-block;margin-left:.35rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid #fcd34d;vertical-align:middle}
@media (max-width:880px){
  .doc-box.doc-box--wide{max-width:96vw}
  .doc-toc ol{column-count:1}
  .doc-glossary{grid-template-columns:1fr}
  .doc-glossary dt{margin-top:.3rem}
  .doc-table{font-size:11px}
  .doc-arch,.doc-code{font-size:10.5px}
}

/* ─── Responsive tweaks ─── */
@media (max-width: 1100px){
  .cfg-tests-grid{grid-template-columns:1fr}
  .cfg-tests-output{min-height:340px}
  .cfg-grid-2{grid-template-columns:1fr}
  .cfg-stat-tiles{grid-template-columns:1fr 1fr 1fr}
  .cfg-sysinfo-grid{grid-template-columns:1fr 1fr}
  .cfg-src-grid{grid-template-columns:1fr}
  .cfg-src-popular-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .role-cards{grid-template-columns:1fr;max-width:320px}
  .nr-layout,.wall-content,.cfg-layout{grid-template-columns:1fr}
  .nr-panel,.wall-col{border-right:none;border-bottom:1px solid var(--border)}
  .app-brand-text{display:none}
  .app-tagline{display:none}
  .app-context{margin-left:0;padding-left:0;border-left:none}
  .orbit-tagline{display:none}
  .orbit-switcher{margin-left:0;padding-left:0;border-left:none}
  /* Header wrap : les séparateurs verticaux n'ont plus de sens empilés. */
  .app-sep{display:none}
  .cfg-sidebar{
    flex-direction:row;flex-wrap:wrap;
    border-right:none;border-bottom:1px solid var(--border);
    padding:.6rem .75rem;gap:.3rem;
  }
  .cfg-sidebar-label{display:none}
  .cfg-nav-item{width:auto;padding:.45rem .75rem;font-size:12.5px}
  .cfg-main{padding:1.25rem 1rem}
  .cfg-page-head h2{font-size:17px}
  .cfg-stat-tiles{grid-template-columns:1fr}
  .cfg-sysinfo-grid{grid-template-columns:1fr 1fr}
  .cfg-src-add-grid{grid-template-columns:1fr}
  .cfg-src-popular-grid{grid-template-columns:1fr}
  .cfg-access-form-grid{grid-template-columns:1fr}
  .about-features,.doc-cols,.doc-two-col{grid-template-columns:1fr}
  .about-box{padding:1.5rem 1.25rem}
  .doc-body{padding:1.25rem 1rem}
}

/* ── Toast notification ── */
.app-toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:var(--bg2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.55rem 1.25rem;font-size:.875rem;
  z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;
  max-width:min(90vw,480px);text-align:center;white-space:pre-wrap;
}
.app-toast.visible{opacity:1}
.app-toast.toast-error{border-color:#ef4444;color:#ef4444}
.app-toast.toast-ok{border-color:#22c55e;color:#22c55e}

/* ── Access link generator (cfg-panel-acces) ── */
.cfg-access-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin:.9rem 0 1rem}
.cfg-access-field label{display:block;font-size:11.5px;font-weight:600;color:var(--text2);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.06em}
.cfg-access-field input,.cfg-access-field select{
  width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:.55rem .75rem;color:var(--text);font-size:.875rem;outline:none;font-family:inherit;
}
.cfg-access-field input:focus,.cfg-access-field select:focus{border-color:var(--brand)}
.cfg-access-field select option{background:var(--surface)}
.cfg-access-links{margin-top:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.cfg-access-links-empty{text-align:center;color:var(--text3);font-size:.875rem;padding:1.25rem 0}
.cfg-access-link-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.cfg-access-link-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cfg-access-link-id{font-size:13px;font-weight:700;color:var(--text)}
.cfg-access-link-ttl{font-size:11.5px;font-weight:600;color:var(--text3);background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:.1rem .45rem}
.cfg-access-link-url{display:flex;gap:.5rem;align-items:center}
.cfg-access-link-url input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.45rem .7rem;color:var(--text2);font-size:12px;font-family:'JetBrains Mono',monospace;outline:none}
.cfg-access-copy-btn{flex-shrink:0;padding:.42rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text2);cursor:pointer;font-size:.78rem;font-weight:600;transition:all .15s}
.cfg-access-copy-btn:hover{border-color:var(--brand);color:var(--brand)}
.cfg-access-copy-btn.copied{border-color:#22c55e;color:#22c55e;background:rgba(34,197,94,.08)}
.cfg-role-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:.15rem .55rem;border-radius:5px;letter-spacing:.02em}
.cfg-role-badge--player{background:rgba(99,102,241,.15);color:#a5b4fc}
.cfg-role-badge--observer{background:rgba(14,165,233,.15);color:#7dd3fc}
.cfg-role-badge--facilitator{background:rgba(249,115,22,.15);color:#fdba74}
.cfg-role-badge--admin{background:rgba(239,68,68,.15);color:#fca5a5}
.cfg-access-delete-btn{margin-left:auto;padding:.25rem .55rem;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text3);cursor:pointer;font-size:.72rem;font-weight:600;transition:all .15s}
.cfg-access-delete-btn:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.08)}
/* Regroupement par rôle des liens d'accès (#448 — un lien partagé par rôle) */
.cfg-access-role-group{display:flex;flex-direction:column;gap:.5rem}
.cfg-access-role-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.cfg-access-role-hint{font-size:11.5px;color:var(--text3)}

/* ─── Journaux ─── */
.cfg-logs-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}
.cfg-logs-tab{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:none;border-bottom:2px solid transparent;padding:.55rem 1rem;font-family:inherit;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;margin-bottom:-1px;transition:color .12s,border-color .12s}
.cfg-logs-tab:hover{color:var(--text)}
.cfg-logs-tab.active{color:var(--brand-2,var(--brand));border-bottom-color:var(--brand);font-weight:600}
.cfg-logs-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 .35rem;border-radius:9px;background:var(--bg3);color:var(--text2);font-size:10.5px;font-weight:700}
.cfg-logs-tab.active .cfg-logs-tab-count{background:var(--brand-soft,#dcfce7);color:var(--brand-2,#16a34a)}

.cfg-logs-toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.cfg-logs-hint{font-size:11px;color:var(--text3);margin-left:.25rem}
.cfg-logs-list{display:flex;flex-direction:column;gap:.4rem}
.cfg-logs-empty{font-size:13px;color:var(--text3);padding:1.5rem;text-align:center;background:var(--bg2);border-radius:8px;border:1px solid var(--border)}
.cfg-log-entry{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.65rem .85rem;font-size:12px;border-left:3px solid #dc2626}
.cfg-log-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.cfg-log-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);min-width:7ch}
.cfg-log-origin{font-size:10px;font-weight:700;letter-spacing:.06em;padding:.1rem .4rem;border-radius:4px;text-transform:uppercase}
.cfg-log-origin--server{background:#fee2e2;color:#991b1b}
.cfg-log-origin--client{background:#fef3c7;color:#92400e}
.cfg-log-source{font-size:11px;color:var(--text2);font-weight:500}
.cfg-log-msg{font-size:12.5px;color:var(--text);line-height:1.5;word-break:break-word}
.cfg-log-ctx{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);margin-left:.4rem}
.cfg-log-stack{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text3);margin-top:.4rem;white-space:pre-wrap;word-break:break-word;background:var(--bg3);border-radius:4px;padding:.4rem .5rem;max-height:160px;overflow:auto}

/* Activity entries - coloured left bar by severity, type pill, IP/role chips */
.cfg-act-entry{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.6rem .85rem;font-size:12px;border-left:3px solid #94a3b8}
.cfg-act-entry--info{border-left-color:#3b82f6}
.cfg-act-entry--warn{border-left-color:#f59e0b}
.cfg-act-entry--ok{border-left-color:#22c55e}
.cfg-act-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;flex-wrap:wrap}
.cfg-act-type{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:.12rem .55rem;border-radius:5px;text-transform:uppercase;background:var(--bg3);color:var(--text2)}
.cfg-act-type--info{background:#dbeafe;color:#1e40af}
.cfg-act-type--warn{background:#fef3c7;color:#92400e}
.cfg-act-type--ok{background:#dcfce7;color:#166534}
.cfg-act-role{font-size:10.5px;font-weight:600;padding:.1rem .45rem;border-radius:4px;background:var(--bg3);color:var(--text2);text-transform:capitalize}
.cfg-act-ip{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text3)}
.cfg-act-msg{font-size:12.5px;color:var(--text);line-height:1.45;word-break:break-word}

/* ========================================================================
 * IAM local « Accès & Sécurité » (épic WU7–WU10) – réutilise la charte
 * Configurateur (.cfg-card, .cfg-subtabs, .btn). Palette badges locale.
 * ====================================================================== */
.iam-gate{display:flex;justify-content:center;padding:2rem 0}
/* L'attribut [hidden] doit l'emporter sur les display: des classes IAM
   (même spécificité que [hidden] UA → la dernière règle gagnerait). */
#iam-gate[hidden],#iam-app[hidden],.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}
/* WU14 – règles CSS Phase 1 retirées (`.iam-otp*`, `.iam-qr*`, `.iam-mustchange`)
   suite au retrait du flow MFA TOTP + bannière mot de passe temporaire. */

.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}
/* width:auto pour vaincre la règle globale input/select{width:100%} qui,
   en flex-wrap, empilait chaque champ sur sa propre ligne. */
.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}
/* Aligné sur .annuaire-table (#210). */
.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}
.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}

/* ── Vue d'ensemble — 2 colonnes (carte état + colonne latérale) ──────────── */
.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}

/* Badge de conformité (calculé : pire statut des contrôles). */
.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}

/* Lignes « état de sécurité » — boutons cliquables (drill-in vers Comptes). */
.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}

/* Actions rapides — lignes-boutons. */
.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}

/* Informations clés — paires clé/valeur. */
.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}
}

/* Base bouton IAM — classes `.btn` (secondaire neutre) et `.btn-primary` (CTA
   brand). Portées depuis PULSE mais leurs styles de base n'avaient pas été
   répliqués dans PILOT → les boutons IAM tombaient sur le style user-agent
   du navigateur (gros, gris, non aligné). Les overrides composés (.iam-qa
   .btn, .iam-am-foot .btn) supposent cette base. Scope volontairement large
   mais inoffensif : seul l'IAM utilise actuellement `class="btn"` exact. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--bg2);color:var(--text);border:1px solid var(--border);
  border-radius:10px;padding:.55rem .95rem;font:inherit;font-size:13px;
  font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--bg3);border-color:var(--border2)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-primary:focus-visible{outline-offset:2px}
.btn-primary[disabled]{opacity:.55;cursor:not-allowed}

.btn-danger{color:#dc2626;border-color:#fecaca;background:var(--bg2)}
.btn-danger:hover{background:#fee2e2;border-color:#fca5a5}
.btn-danger[disabled]{opacity:.5;cursor:not-allowed}

.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}

/* ── Modale compte (création / édition) – design 2 colonnes (maquette) ──────
   Une seule modale, mode piloté par JS (create | edit). Sélecteurs préfixés
   .iam-modal--account pour ne PAS toucher les modales confirm/reveal. */
.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)}
/* Cartes d'options : fond vert très léger, PAS de changement au survol (maquette). */
.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)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Workspace Documents (lot J8e / #277) — CSS pixel-near maquette mai 2026.
   Scopée intégralement à .ws-docs-* — aucun side-effect sur la console.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — KPI cards (4 cards horizontales) — */
.ws-docs-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 20px;
}
.ws-docs-kpi {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
}
.ws-docs-kpi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg3);
  color: var(--text2);
  flex-shrink: 0;
}
/* Couleurs par position (1er = brand, 2e = blue, 3e = warn, 4e = orange-soft).
   Cohérent avec la maquette : icône Documents rouge, Partagés bleu/teal,
   Modifiés warn/yellow, À valider orange. */
.ws-docs-kpi:nth-child(1) .ws-docs-kpi-ic { background: var(--brand-soft); color: var(--brand-2); }
.ws-docs-kpi:nth-child(2) .ws-docs-kpi-ic { background: #DBEAFE;          color: #1d4ed8; }
.ws-docs-kpi:nth-child(3) .ws-docs-kpi-ic { background: #FEF3C7;          color: #b45309; }
.ws-docs-kpi:nth-child(4) .ws-docs-kpi-ic { background: #FFEDD5;          color: #c2410c; }
.ws-docs-kpi-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-docs-kpi-label { font-size: 12px; color: var(--text3); font-weight: 600; }
.ws-docs-kpi-num   { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.ws-docs-kpi-sub   { font-size: 11.5px; color: var(--text3); }

/* — Layout 2 colonnes main + sidebar — */
.ws-docs-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}
.ws-docs-main, .ws-docs-side { min-width: 0; }
.ws-docs-side { display: flex; flex-direction: column; gap: 16px; }

/* — Card principale (table + toolbar) — */
.ws-docs-card { padding: 16px 20px; }
.ws-docs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.ws-docs-search { flex: 1 1 280px; min-width: 200px; }
/* Les selects sont des .ui-select customs (#281, standard PILOT) — leur
   styling vient des règles globales `.ui-select*`. Pas de surcharge ici. */
.ws-docs-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text2);
  cursor: pointer;
  margin-left: auto;
}
.ws-docs-toggle input { accent-color: var(--brand); }

/* — Table — */
/* Aligné sur .annuaire-table (#210, #279) : header discret 11.5/600/text3
   sans uppercase, cellule 13.5/text, padding 10×12 / 12, hover --bg.
   Tri colonnes câblé via wirePilotDomSortable (cf. .pilot-sort-btn global). */
.ws-docs-tablewrap { overflow-x: auto; }
.ws-docs-table { width: 100%; border-collapse: collapse; }
.ws-docs-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;
}
.ws-docs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text);
  vertical-align: middle;
}
.ws-docs-table tbody tr:last-child td { border-bottom: none; }
.ws-docs-table tbody tr:hover td { background: var(--bg); }
.ws-docs-cell-name {
  display: flex; align-items: center; gap: 10px;
  min-width: 220px;
}
.ws-docs-cell-name-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  /* Fond neutre : les icônes type fichier portent leur propre couleur
     (dossier jaune, PDF rouge…) façon explorateur Windows. */
  background: transparent; color: var(--text3);
  flex-shrink: 0;
}
.ws-docs-cell-name-text { font-weight: 600; }
.ws-docs-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text3);
}
.ws-docs-count { font-weight: 600; }

/* — Sidebar cards (Accès rapide / Catégories / Stockage) — */
.ws-docs-side-card { padding: 14px 16px; }
.ws-docs-side-card .home-card-head { margin-bottom: 12px; }
.ws-docs-side-card .home-card-title { font-size: 14px; }
.ws-docs-quick, .ws-docs-cats {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.ws-docs-quick-item, .ws-docs-cats-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 6px;
  font-size: 13px; color: var(--text2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.ws-docs-quick-item:hover, .ws-docs-cats-item:hover {
  background: var(--bg3); color: var(--text);
}
.ws-docs-quick-item.is-active, .ws-docs-cats-item.is-active {
  background: var(--brand-soft); color: var(--brand-2); font-weight: 600;
}
.ws-docs-quick-ic { width: 18px; text-align: center; opacity: .8; }
.ws-docs-quick-lbl, .ws-docs-cats-lbl { flex: 1 1 auto; }
.ws-docs-quick-count, .ws-docs-cats-count {
  font-size: 12px; font-weight: 700;
  background: var(--bg3); color: var(--text3);
  padding: 2px 8px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.ws-docs-quick-item.is-active .ws-docs-quick-count,
.ws-docs-cats-item.is-active .ws-docs-cats-count {
  background: var(--brand); color: #fff;
}
.ws-docs-quick-placeholder, .ws-docs-cats-placeholder {
  padding: 8px; font-size: 12px; color: var(--text3); font-style: italic;
}

/* — Espace de stockage card — */
.ws-docs-storage {
  display: flex; flex-direction: column; gap: 8px;
}
.ws-docs-storage-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg3);
  overflow: hidden;
}
.ws-docs-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, #15803d 0%, #ca8a04 70%, var(--brand) 95%);
  transition: width .3s ease;
  border-radius: 999px;
}
.ws-docs-storage-meta {
  font-size: 12.5px; color: var(--text3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* — Responsive (tablette : sidebar passe sous main) — */
@media (max-width: 980px) {
  .ws-docs-layout { grid-template-columns: 1fr; }
  .ws-docs-kpis   { grid-template-columns: repeat(2, 1fr); }
}