/* PPM Application — Custom styles (Tailwind extended) */

/* ── Reduced motion (QW8) ──
   Disables all transitions and animations for users who prefer reduced motion
   (vestibular disorders, photosensitivity). Must be the very first rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Bordeaux palette — alias → tokens DS. Source unique : var(--brand-*) dans :root.
   Aucune valeur hex bordeaux ici. Pour ajouter une nuance, modifier :root uniquement. */
.bg-bordeaux-900 { background-color: var(--brand-900); }
.bg-bordeaux-800 { background-color: var(--brand-800); }
.bg-bordeaux-700 { background-color: var(--brand-700); }
.bg-bordeaux-400 { background-color: #fb7185; }  /* rose-400 accent, hors palette brand */
.text-bordeaux   { color: var(--brand-800); }
.border-bordeaux      { border-color: var(--brand-100); }
.border-bordeaux-800  { border-color: var(--brand-800); }
.focus\:ring-bordeaux-400:focus { --tw-ring-color: #fb7185; }
.hover\:bg-bordeaux-700:hover   { background-color: var(--brand-700); }
.hover\:bg-bordeaux:hover       { background-color: var(--brand-800); }
.active\:bg-bordeaux-900:active { background-color: var(--brand-900); }

/* ══════════════════════════════════════════════════════
   PPM DESIGN SYSTEM v1 — DS-01 — tokens canoniques
   Source unique de vérité visuelle. Référencer via var(--...).
   Les classes utilitaires Tailwind ci-dessus restent pour compatibilité.
   ══════════════════════════════════════════════════════ */
:root {
  /* ── Typographie ── */
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-22: 22px;
  --lh-11: 16px; --lh-12: 18px; --lh-14: 20px;
  --lh-16: 24px; --lh-18: 24px; --lh-22: 28px;
  --text-min: 11px;

  /* ── Couleurs texte ── */
  --text-strong:  #0F172A;
  --text-default: #334155;
  --text-muted:   #64748B;
  --text-soft:    #94A3B8;

  /* ── Surfaces ── */
  --surface-page:   #F6F8FB;
  --surface-card:   #FFFFFF;
  --surface-subtle: #F8FAFC;
  --surface-muted:  #F1F5F9;

  /* ── Bordures / séparateurs ── */
  --border-default: #D9E1EA;
  --border-strong:  #C7D2E0;
  --separator:      #E8EDF3;

  /* ── Brand (bordeaux) ── */
  --brand-900: #5F1731;
  --brand-800: #7A1837;
  --brand-700: #932243;
  --brand-100: #F7E8EE;
  --brand-050: #FCF7F9;

  /* ── Sémantique ── */
  --success-700: #166534; --success-100: #DCFCE7;
  --warning-700: #B45309; --warning-100: #FEF3C7;
  --danger-700:  #B91C1C; --danger-100:  #FEE2E2;
  --info-700:    #1D4ED8; --info-100:    #DBEAFE;

  /* ── Radius ── */
  --r-xs:  6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 16px;  --r-pill: 999px;

  /* ── Ombres ── */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-2: 0 6px 18px rgba(15,23,42,0.08);
  --shadow-3: 0 18px 48px rgba(15,23,42,0.18);

  /* ── Espacements ── */
  --space-1: 4px; --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* ── Hauteurs standardisées ── */
  --h-input:  44px;
  --h-button: 40px;
  --h-chip:   24px;
  --h-metric: 64px;

  /* ── Aliases legacy (rétrocompatibilité) — pointent vers brand tokens DS ── */
  --color-brand:       var(--brand-800); /* alias → brand-800 */
  --color-brand-dk:    var(--brand-900); /* alias → brand-900 */
  --color-brand-lt:    var(--brand-100); /* alias → brand-100 */
  --color-brand-hover: var(--brand-700); /* alias → brand-700 */
  --color-ink-900: #0f172a; --color-ink-700: #1e293b;
  --color-ink-600: #334155; --color-ink-500: #475569;
  --color-ink-400: #64748b; --color-ink-300: #94a3b8;
  --color-ink-200: #cbd5e1; --color-ink-100: #e2e8f0;
  --color-ink-50:  #f8fafc;
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --radius-sm:   var(--r-xs);
  --radius-md:   var(--r-sm);
  --radius-lg:   var(--r-md);
  --radius-full: var(--r-pill);
}

/* ══════════════════════════════════════════════════════
   DS-05: P0.1 — Zéro scroll horizontal global
   overflow-x: clip : coupe sans créer de scroll container
   → ne casse pas position:sticky (contrairement à overflow:hidden)
   ══════════════════════════════════════════════════════ */
html           { overflow-x: clip; }   /* bloque le scroll horizontal au niveau document */
body           { overflow-x: clip; }   /* force scrollWidth ≤ viewport (clip ne crée pas de scroll container) */
#topNav        { max-width: 100vw; overflow-x: clip; } /* nav : coupe sans casser sticky */
#pageContent   { min-width: 0; }       /* flex child : ne grandit pas au-delà du viewport */

/* DS-07b P0.1 — topbar profil avatar-only : jamais texte partiel
   Règle : bouton profil = avatar seul ; nom + rôle exposés via aria-label + title (tooltip).
   .topbar-user-text + chevron masqués définitivement (override Tailwind hidden lg:block).
   #profileMenuWrapper : flex-shrink:0 → le profil ne rétrécit jamais dans la topbar.
   DS-07 @media(≤1400px) conservé ci-dessous pour les labels nav à 1366/1280. */
.topbar-inner          { max-width: 100%; min-width: 0; }
.topbar-controls       { flex-shrink: 1 !important; min-width: 200px; }
#profileMenuWrapper    { flex-shrink: 0; min-width: 44px; }
#profileMenuBtn        { width: 44px; min-width: 44px; justify-content: center; flex-shrink: 0; }
.topbar-user-text,
#profileMenuBtn .fa-chevron-down { display: none !important; }  /* avatar-only : jamais texte partiel */

/* DS-28-quater-fix4 — nav text-labels visible at 1366px+; icon-only only below 1280px */
@media (max-width: 1280px) {
  .nav-link span { display: none; }
  .nav-link { padding: 6px 8px; }
  /* Keep labels inside open dropdown always visible */
  .nav-dropdown-item span { display: inline; }
  .nav-dropdown-item { padding: 7px 12px; }
}
/* DS-28-quater-fix5b — at ≥1281px nav labels are visible: hamburger is not needed.
   Hiding it reclaims ~36px so the profile avatar always fits inside 1366px for
   PMO/Admin (who have 7 top-level nav items incl. Ressources + Administration). */
@media (min-width: 1281px) {
  #mobileMenuBtn { display: none; }
}
/* DS-28-quater-fix5b — compact nav at 1281-1440px
   Reduces nav-link horizontal padding to keep all labels readable AND ensure the
   profile avatar stays fully within the 1366px viewport (no overflow-x: clip).
   Also collapses "Nouveau projet" to icon-only (~98px saved) since newProjectBtn
   is flex-shrink:0 and is the main cause of topbar-controls overflow at 1366px. */
@media (min-width: 1281px) and (max-width: 1440px) {
  .nav-link { padding: 5px 7px; gap: 3px; }
  #mainNav  { gap: 0; }
  /* Dropdown items keep normal padding for readability */
  .nav-dropdown-item { padding: 7px 12px; }
  /* Collapse "Nouveau projet" to icon-only to save ~98px */
  #newProjectBtn span[data-i18n] { display: none; }
  #newProjectBtn { padding: 6px 8px; gap: 0; min-width: 32px; }
  /* Narrow the global scope select slightly */
  #globalScope { max-width: 120px; }
}
}

/* DS-07c — Fixes cascade Tailwind vs style.css
   1. .section-card.p-0 : style.css a padding:1.5rem, écrase Tailwind p-0 (specificity 1 vs 1, last wins)
      → doublement de classe (.section-card.p-0, specificity 2) → padding:0 l'emporte.
   2. .ppm-input.w-36/.w-44 : style.css a width:100%, écrase les w-* de Tailwind (last wins)
      → doublement de classe (specificity 2) → largeur explicite l'emporte. */
.section-card.p-0                            { padding: 0; }
.ppm-input.w-36                              { width: 9rem; }
.ppm-input.w-44                              { width: 11rem; }

/* Tailwind utility gap-fills (not compiled in vendor/tailwind.css) */
/* ── Font sizes ── */
/* EXCEPTION DS-03: .text-[9px] et .text-[10px] réservés aux icônes FA décoratives uniquement.
   Usage sur texte lisible INTERDIT (règle DS-03 §4). */
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[17px\] { font-size: 17px; }
.text-\[28px\] { font-size: 28px; }
/* ── Widths/heights arbitraires ── */
.min-w-\[44px\]  { min-width: 44px; }
.min-w-\[52px\]  { min-width: 52px; }
.min-w-\[140px\] { min-width: 140px; }
.min-w-\[160px\] { min-width: 160px; }
.min-w-\[180px\] { min-width: 180px; }
.min-h-\[24px\]  { min-height: 24px; }
.min-h-\[60px\]  { min-height: 60px; }
.min-h-\[64px\]  { min-height: 64px; }
.min-h-\[80px\]  { min-height: 80px; }
.min-h-\[100px\] { min-height: 100px; }
.max-w-\[120px\] { max-width: 120px; }
.max-h-\[90vh\]  { max-height: 90vh; }
.h-\[38px\]      { height: 38px; }
/* ── Tailwind utilities manquants ── */
.bg-orange-500 { --tw-bg-opacity:1; background-color: rgb(249 115 22 / var(--tw-bg-opacity,1)); }
.hover\:bg-orange-600:hover { --tw-bg-opacity:1; background-color: rgb(234 88 12 / var(--tw-bg-opacity,1)); }
.hover\:bg-amber-500:hover  { --tw-bg-opacity:1; background-color: rgb(245 158 11 / var(--tw-bg-opacity,1)); }
.hover\:bg-slate-500:hover  { --tw-bg-opacity:1; background-color: rgb(100 116 139 / var(--tw-bg-opacity,1)); }
.hover\:bg-rose-500:hover   { --tw-bg-opacity:1; background-color: rgb(244 63 94 / var(--tw-bg-opacity,1)); }
.sm\:flex-nowrap { flex-wrap: nowrap; }
.max-w-md        { max-width: 28rem; }
.max-w-lg        { max-width: 32rem; }
.flex-shrink-0   { flex-shrink: 0; }
.col-span-3      { grid-column: span 3 / span 3; }
.col-span-2      { grid-column: span 2 / span 2; }
.w-5             { width: 1.25rem; }
.divide-slate-200>:not([hidden])~:not([hidden]) { --tw-divide-opacity:1; border-color: rgb(226 232 240 / var(--tw-divide-opacity,1)); }
/* ── z-index arbitraires absents du vendor ── */
/* z-[60] et z-[9999] sont compilés dans vendor/tailwind.css — ceux-ci ne le sont pas */
.z-\[70\]   { z-index: 70; }   /* #projectModal (form édition) — doit couvrir nav (z-40) et fiche (z-60) */
.z-\[200\]  { z-index: 200; }  /* #actors-modal dans projectForm.js */
.z-\[9990\] { z-index: 9990; } /* #onboardingModal — au-dessus des modals métier, sous #confirmModal (9999) */

/* Top nav links (horizontal) */
/* DS-04bis: P0.1 — nav focus corrigé. outline:none en base, restauré uniquement au clavier */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.775rem;
  font-weight: 500;
  color: #fecdd3;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  box-shadow: none;
}
.nav-link:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active {
  background-color: rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 600;
  outline: none;
  box-shadow: none;
}
/* Outline uniquement au clavier */
.nav-link:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
/* Défense en profondeur: clic souris → pas d'outline */
.nav-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
button:focus:not(:focus-visible) { outline: none; }
.nav-link i { opacity: 0.75; font-size: 0.75rem; }
.nav-link.active i, .nav-link:hover i { opacity: 1; }

/* RAG badges */
.rag-green  { background-color: #dcfce7; color: #15803d; }
.rag-orange { background-color: #ffedd5; color: #c2410c; }
.rag-red    { background-color: #fee2e2; color: #b91c1c; }
.rag-grey   { background-color: #f1f5f9; color: #64748b; }
.rag-dot-green  { background-color: #22c55e; }
.rag-dot-orange { background-color: #f97316; }
.rag-dot-red    { background-color: #ef4444; }
.rag-dot-grey   { background-color: #94a3b8; }

/* KPI cards — DS-02: tokenisés */
.kpi-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-default);
}
/* KPI card — variante grande / critique (valeur dominante) */
.kpi-card--xl {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: 0.875rem 1.25rem;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border-default);
}
.kpi-card--xl .kpi-num { font-size: 2.5rem; font-weight: 800; line-height: 1; }
/* KPI card — variante secondaire / contextuelle (moins de poids) */
.kpi-card--muted {
  background: var(--surface-subtle);
  border-radius: var(--r-lg);
  padding: 0.625rem 1rem;
  box-shadow: none;
  border: 1px solid var(--border-default);
  opacity: 0.85;
}
.kpi-card--muted .kpi-num { font-size: 1.5rem; font-weight: 700; line-height: 1; }

/* Table styles — SUPPRIMÉ DS-03 : doublon de la « Table premium » plus bas (DS-01).
   Standard cible : .ppm-table avec thead/tbody tokenisés.
   Conserve .ppm-table tbody tr:hover comme alias ci-dessous pour compat. */

/* Form inputs — DS-02: tokenisés */
.ppm-input {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  padding: 8px 12px;
  font-size: var(--fs-14);
  color: var(--text-default);
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface-card);
}
.ppm-input:focus {
  outline: 2px solid var(--brand-800);
  outline-offset: 1px;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--brand-100);
}
/* DS-02: tokenisé */
.ppm-label {
  display: block;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* Progress bar */
.progress-bar { height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
/* STR-1 : La largeur est définie via la variable CSS --pct (ex: style="--pct:65%") — évite unsafe-inline */
.progress-fill { height: 100%; border-radius: 3px; background: var(--brand-800); transition: width 0.3s; width: var(--pct, 0%); }

/* Capacity bar */
.cap-ok   { background: #22c55e; }
.cap-warn { background: #f97316; }
.cap-over { background: #ef4444; }

/* Gantt cells */
.gantt-cell { min-width: 40px; border-right: 1px solid #e2e8f0; }
/* STR-1 : La couleur de fond est définie via data-phase-color, appliqué par applyDynamicStyles() */
.gantt-phase {
  border-radius: 3px;
  height: 100%;
  min-height: 14px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--phase-color, var(--brand-800));
}
.gantt-phase-lbl {
  font-size: var(--fs-11); /* DS-03: migré depuis 8px — compos. gantt dense */
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
/* Phase en mode lecture seule */
.gantt-phase-ro { pointer-events: none; }
/* Phase occupant toute la hauteur d'une cellule multi-phases */
.gantt-phase-flex { flex: 1; }

/* ── Capacity table ── */
.cap-sticky    { position: sticky; left: 0; z-index: 10; background: #fff; }
.cap-th        { font-size: var(--fs-11); font-weight: 700; color: #94a3b8; text-align: center;
                 padding: 6px 4px; border-bottom: 2px solid #e2e8f0; white-space: nowrap;
                 min-width: 72px; }
.cap-th-name   { text-align: left; min-width: 260px; width: 260px; padding: 6px 12px;
                 border-right: 1px solid #e2e8f0; background: #f8fafc; }
.cap-th-cur    { background: var(--brand-050); color: var(--brand-800); }
.cap-th-past   { color: #b0bec5; }
.cap-team-row  { background: #f1f5f9; }
.cap-team-name { padding: 5px 12px; font-size: 0.72rem; font-weight: 700; color: #475569;
                 border-right: 1px solid #e2e8f0; width: 260px; }
.cap-team-total { text-align: center; padding: 4px 2px; font-size: 0.72rem; font-weight: 700;
                  border-bottom: 1px solid #e2e8f0; }
.cap-tot-ok    { background: #dcfce7; color: #15803d; }
.cap-tot-warn  { background: #ffedd5; color: #c2410c; }
.cap-tot-over  { background: #fee2e2; color: #b91c1c; }
.cap-tot-empty { color: #cbd5e1; }
.cap-prof-row  { border-bottom: 1px solid #f1f5f9; }
.cap-prof-row:hover .cap-sticky { background: #f8fafc; }
.cap-prof-name { padding: 4px 8px 4px 12px; border-right: 1px solid #e2e8f0;
                 width: 260px; display: flex; align-items: center; gap: 5px; }
.cap-expand-btn { background: none; border: none; cursor: pointer; font-size: var(--fs-11);
                  color: #94a3b8; padding: 0 2px; flex-shrink: 0;
                  transition: color 0.15s; }
.cap-expand-btn:hover { color: var(--brand-800); }
.cap-prof-label { font-size: 0.75rem; font-weight: 600; color: #1e293b; flex: 1; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-prof-default { font-size: var(--fs-11); color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.cap-cell      { padding: 3px 4px; border-bottom: 1px solid #f1f5f9;
                 border-right: 1px solid #f8fafc; min-width: 72px; }
.cap-cell-over { background: #fff1f2; }
.cap-cell-warn { background: #fff7ed; }
.cap-cur       { background: #fff8f8 !important; }
.cap-cell-inner { display: flex; align-items: center; justify-content: center;
                  gap: 2px; font-size: 0.72rem; }
.cap-planned   { font-weight: 700; line-height: 1; min-width: 18px; text-align: right; }
.cap-avail-sep { color: #cbd5e1; font-size: var(--fs-11); } /* séparateur "/" — structurel */
.cap-avail-input { width: 28px; border: none; border-bottom: 1px dashed #e2e8f0;
                   background: transparent; font-size: 0.7rem; color: #64748b;
                   text-align: center; padding: 0;
                   transition: border-color 0.15s; }
.cap-avail-input:focus { border-bottom-color: var(--brand-800); color: #1e293b;
                         outline: 2px solid var(--brand-800); outline-offset: 2px; }
.cap-bar-wrap  { height: 3px; background: #f1f5f9; border-radius: 99px;
                 margin: 2px 2px 0; overflow: hidden; }
.cap-bar       { height: 100%; border-radius: 99px; transition: width 0.3s; }
.cap-bar-ok    { background: #86efac; }
.cap-bar-warn  { background: #fdba74; }
.cap-bar-over  { background: #fca5a5; }
.cap-proj-row  { background: #fafafa; }
.cap-proj-row:hover .cap-sticky { background: #f5f3ff; }
.cap-proj-name { padding: 3px 8px 3px 28px; border-right: 1px solid #e2e8f0;
                 width: 200px; display: flex; align-items: center; gap: 4px; }
.cap-proj-rag  { font-size: 0.85rem; flex-shrink: 0; }
.cap-proj-label { font-size: 0.7rem; color: #475569; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.cap-proj-cell { text-align: center; padding: 3px 4px; border-bottom: 1px solid #f1f5f9; }
.cap-proj-days { font-size: var(--fs-11); color: #7c3aed; font-weight: 600; }
.cap-pct       { font-size: 0.7rem; font-weight: 700; }
.cap-pct-main  { font-size: 0.78rem; font-weight: 700; display: block; text-align: center; line-height: 1.2; }
.cap-3info  { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; }
.cap-3-pl   { font-size: 0.7rem; font-weight: 700; color: #334155; min-width: 16px; text-align: right; }
.cap-3-sep  { font-size: 0.6rem; color: #cbd5e1; } /* EXCEPTION DS-03: séparateur "/" décoratif, hors lecture */
.cap-3-avail { font-size: 0.7rem; color: #64748b; min-width: 16px; text-align: center; }
.cap-3-override { font-weight: 700; color: var(--brand-800); }
.cap-3-pct  { font-size: var(--fs-11); font-weight: 700; min-width: 26px; text-align: left; }
.cap-3-over { color: #b91c1c; }
.cap-3-warn { color: #c2410c; }
.cap-3-ok   { color: #64748b; }
.cap-team-nums { display: flex; align-items: center; justify-content: center; gap: 2px;
                 font-size: var(--fs-11); color: #64748b; font-weight: 500; margin-bottom: 1px; }
.cap-overload-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
  border-radius: 99px; white-space: nowrap;
  background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
}
.cap-overload-ok {
  background: #dcfce7; color: #15803d; border-color: #86efac;
}

/* ── Capacity v2 — Summary block (niveau 1) ── */
.cap-summary {
  margin-bottom: 0.75rem;
}
.cap-summary-msg {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid;
  margin-bottom: 0.625rem;
  font-size: 0.8rem; font-weight: 600;
}
.cap-summary-msg--ok     { background: #f0fdf4; border-color: #86efac; color: #166534; }
.cap-summary-msg--warn   { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cap-summary-msg--over   { background: #fff1f2; border-color: #fca5a5; color: #991b1b; }
.cap-summary-msg p        { margin: 0; line-height: 1.4; }
.cap-summary-msg-sub      { font-size: 0.7rem; font-weight: 400; opacity: 0.8; display: block; margin-top: 0.15rem; }

.cap-kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.cap-kpi-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.625rem;
  padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.6rem;
}
.cap-kpi-card--red    { background: #fff1f2; border-color: #fca5a5; }
.cap-kpi-card--orange { background: #fffbeb; border-color: #fde68a; }
.cap-kpi-card--green  { background: #f0fdf4; border-color: #86efac; }
.cap-kpi-icon  { font-size: 1.1rem; flex-shrink: 0; }
.cap-kpi-num   { font-size: 1.2rem; font-weight: 800; line-height: 1; }
.cap-kpi-label { font-size: var(--fs-11); color: #64748b; line-height: 1.2; margin-top: 0.1rem; }
.cap-kpi-num--red    { color: #b91c1c; }
.cap-kpi-num--orange { color: #c2410c; }
.cap-kpi-num--green  { color: #15803d; }
.cap-kpi-num--slate  { color: #475569; }
.cap-kpi-num--team   { font-size: 0.85rem; font-weight: 700; }

/* Top overload profiles (niveau 2) */
.cap-top-overload {
  margin-bottom: 0.75rem;
}
.cap-top-overload-title {
  font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.375rem; padding-left: 0.25rem;
}
.cap-top-list {
  display: flex; flex-direction: column; gap: 0.375rem;
}
.cap-top-item {
  display: flex; align-items: center; gap: 0.625rem;
  background: #fff1f2; border: 1px solid #fca5a5; border-radius: 0.5rem;
  padding: 0.45rem 0.75rem; font-size: 0.75rem;
}
.cap-top-item--warn {
  background: #fffbeb; border-color: #fde68a;
}
.cap-top-name  { font-weight: 700; color: #1e293b; flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-top-team  { font-size: var(--fs-11); color: #64748b; flex-shrink: 0; }
.cap-top-month { font-size: var(--fs-11); color: #64748b; flex-shrink: 0; }
.cap-top-pct   { font-size: 0.78rem; font-weight: 800; flex-shrink: 0; min-width: 42px; text-align: right; }
.cap-top-pct--over { color: #b91c1c; }
.cap-top-pct--warn { color: #c2410c; }

/* ── Capacity — scroll-fade indicator ── */
.cap-table-wrap {
  position: relative;
}
.cap-table-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.92));
  pointer-events: none;
  transition: opacity 0.25s;
  border-radius: 0 0.5rem 0.5rem 0;
}
.cap-table-wrap.cap-scroll-end::after {
  opacity: 0;
}

/* Table cells: simplified mode — show % only, pl/avail in tooltip */
.cap-pct-only { font-size: 0.72rem; font-weight: 700; text-align: center;
                display: block; padding: 1px 0; }
.cap-pct-empty { opacity: 0.3; }

/* Highlight for the most-loaded month column */
.cap-th-peak   { background: var(--brand-050); color: var(--brand-800); border-bottom-color: #fca5a5; }
.cap-col-peak  { background: #fff8f8 !important; }

/* ── Risks table ── */
.risk-row-critical td:first-child { border-left: 3px solid #ef4444; }
.risk-proj-link { transition: color 0.12s; }

/* Committee — KPI card contextual variants */
.committee-kpi-red    { background: #fff8f8 !important; border-left: 3px solid #fca5a5; }
.committee-kpi-orange { background: #fffbf5 !important; border-left: 3px solid #fdba74; }
.committee-kpi-green  { background: #f0fdf4 !important; border-left: 3px solid #6ee7b7; }

/* ══════════════════════════════════════════════════════════════════
   Administration UX — shared components
══════════════════════════════════════════════════════════════════ */

/* Admin page header: descriptive zone above the section-card */
.admin-page-header {
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

/* Subtitle description text below the page title */
.admin-page-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* Amber badge: "X sans fiche annuaire" / "X sans compte" */
.admin-unlinked-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  white-space: nowrap;
  cursor: default;
}
button.admin-unlinked-badge {
  cursor: pointer;
  transition: background 0.15s;
}
button.admin-unlinked-badge:hover { background: #fef3c7; }

/* RGPD erase button — visually distinct from regular action buttons */
.btn-gdpr-erase {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  font-size: var(--fs-11);
  font-weight: 700;
  background: transparent;
  color: #dc2626;
  border: 1px solid #fca5a5;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-gdpr-erase:hover { background: #fef2f2; color: #b91c1c; border-color: #f87171; }
.btn-gdpr-erase-sep { display: inline-block; width: 1px; height: 1rem; background: #e2e8f0; margin: 0 0.25rem; vertical-align: middle; }

/* Params impact warning banner */
.params-impact-warn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: #92400e;
}

/* ══════════════════════════════════════════════════════════════════
   Phase 6 — UX par profil
══════════════════════════════════════════════════════════════════ */

/* ── Profile context banner (portfolio, dashboard) ── */
.profile-ctx-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.profile-ctx-banner--pm {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.profile-ctx-banner--manager {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.profile-ctx-banner--orphan {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.profile-ctx-clear {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.12s;
}
.profile-ctx-clear:hover { opacity: 0.65; }

/* Go Live Kanban board — ensure it starts below profile banner */
.kb-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: 8px;
}
.kb-col {
  flex: 0 0 230px;
  min-width: 0;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.kb-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
}
.kb-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-col-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.kb-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.kb-empty {
  color: #cbd5e1;
  font-size: 0.75rem;
  text-align: center;
  padding: 12px 0;
}
.kb-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}
.kb-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.kb-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.kb-chip {
  display: inline-block;
  font-size: var(--fs-11);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.kb-card-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid #f1f5f9;
  padding-top: 5px;
  margin-top: 1px;
}
.kb-stat-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-800);
  line-height: 1;
}
.kb-stat-days {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  line-height: 1;
}
.kb-stat-unit {
  font-size: var(--fs-11);
  font-weight: 600;
  margin-left: 1px;
}
.kb-stat-sep {
  color: #cbd5e1;
  font-size: 0.75rem;
}
.kb-stat-rag {
  font-size: 1rem;
  line-height: 1;
  margin-left: auto;
}

/* Go Live Kanban board */
.gl-kb-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}
.gl-kb-col {
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  min-width: 0;
}
/* GO LIVE — quarter state variants (replaces inline style= for CSP compliance) */
.gl-col-cur    { border-top: 3px solid var(--brand-700); }
.gl-col-past   { border-top: 3px solid #cbd5e1; }
.gl-col-future { border-top: 3px solid #86efac; }
.gl-kb-col-header {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.gl-hdr-cur    { background: var(--brand-050); }
.gl-hdr-past   { background: #f8fafc; }
.gl-hdr-future { background: #f0fdf4; }
.gl-hdr-inner  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gl-q-title    { font-size: 12px; font-weight: 700; }
.gl-q-title-cur    { color: var(--brand-700); }
.gl-q-title-past   { color: #94a3b8; }
.gl-q-title-future { color: #15803d; }
.gl-q-count-cur    { color: var(--brand-700); }
.gl-q-count-past   { color: #94a3b8; }
.gl-q-count-future { color: #15803d; }
.gl-badge-sm   { font-size: var(--fs-11); } /* DS-03: migré depuis 9px */
.gl-month-icon { font-size: 9px; } /* EXCEPTION DS-03: icône FA décorative (calendrier) */
.gl-month-icon-cur    { color: var(--brand-700); }
.gl-month-icon-past   { color: #cbd5e1; }
.gl-month-icon-future { color: #22c55e; }
.gl-month-name { font-size: 11px; font-weight: 700; }
.gl-month-name-cur    { color: var(--brand-700); }
.gl-month-name-past   { color: #94a3b8; }
.gl-month-name-future { color: #374151; }
.gl-status-label { font-size: var(--fs-11); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-kb-col-body {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
.gl-month-group {
  margin-bottom: 12px;
}
.gl-month-group:last-child {
  margin-bottom: 0;
}
.gl-month-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0 6px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}
.gl-m-count {
  font-size: var(--fs-11);
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 99px;
}
.gl-q-count {
  font-size: var(--fs-11);
  background: rgba(0,0,0,0.07);
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 600;
}
.gl-badge {
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
}
.gl-badge-cur  { background: var(--brand-700); color: white; }
.gl-badge-past { background: #e2e8f0; color: #94a3b8; }
.gl-year-btn {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: white;
  cursor: pointer;
  transition: background 0.1s;
}
.gl-year-btn:hover { background: #f8fafc; }
.kb-card-status {
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  line-height: 1.3;
}

/* Modal animation */
#projectModal:not(.hidden) { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Toast */
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideUp 0.2s ease;
  max-width: 320px;
}
.toast-success { background: #15803d; }
.toast-error   { background: #b91c1c; }

/* ── RGAA A-01 : contraste ─────────────────────────────────────────
   text-slate-400 (#94a3b8) sur fond blanc → ratio 3,0:1 (WCAG AA: 4,5:1 requis).
   Override vers slate-500 (#64748b) : ratio 4,6:1 — conforme pour texte normal.
   Chargé après tailwind.css → même spécificité, règle postérieure l'emporte.
──────────────────────────────────────────────────────────────────── */
.text-slate-400 { color: #64748b; }

/* Modal projet — cadre stable, centré, même largeur que la fiche */
.modal-project-body {
  width: min(95vw, 1400px);
  height: min(90vh, 1000px);
  max-height: min(90vh, 1000px);
}
/* DS-PREPRO-03: modal compacte pour formulaires simples (disponibilité, équipes, contacts, users, programmes) */
#projectModal[data-size="compact"] .modal-project-body {
  width: min(95vw, 580px);
  height: auto;
  max-height: min(88vh, 560px);
}
@media (max-width: 1200px) {
  .modal-project-body { width: min(98vw, 1400px); }
}
@media (max-width: 900px) {
  .modal-project-body { width: 99vw; height: auto; max-height: 96vh; }
}
.toast-info    { background: #1e40af; }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Chips / badges */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Badge variante action — pour les badges "À arbitrer / À sécuriser / À compléter" */
.badge-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Action buttons in admin tables */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-action-edit           { background: #f1f5f9; color: #475569; }
.btn-action-edit:hover     { background: var(--brand-800); color: #fff; }
.btn-action-del            { background: #fee2e2; color: #b91c1c; }
.btn-action-del:hover      { background: #ef4444; color: #fff; }
.btn-action-warn           { background: #ffedd5; color: #c2410c; }
.btn-action-warn:hover     { background: #f97316; color: #fff; }
.btn-action-ok             { background: #dcfce7; color: #15803d; }
.btn-action-ok:hover       { background: #22c55e; color: #fff; }
.btn-emoji {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1;
  transition: background 0.15s;
}
.btn-emoji:hover { background: rgba(0,0,0,0.08); }

/* RAG filter chips (planning page) */
.rag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1.5px solid #e2e8f0;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rag-chip:hover     { border-color: #94a3b8; background: #f8fafc; }
.rag-chip.active-rag { border-color: var(--brand-800); background: var(--brand-050); color: var(--brand-800); }

/* Portfolio filter controls — style unifié (input, select, button) */
.pf-ctrl {
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: #475569;
  background: white;
  white-space: nowrap;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.pf-ctrl:focus {
  outline: 2px solid var(--brand-800);
  outline-offset: 1px;
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(122,24,55,0.12);
}
button.pf-ctrl { cursor: pointer; }
button.pf-ctrl:hover { border-color: #94a3b8; background: #f8fafc; }
.pf-ctrl.active-rag { border-color: var(--brand-800); background: var(--brand-050); color: var(--brand-800); font-weight: 600; }

/* Section card — DS-02: tokenisés */
.section-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-default);
  padding: 1.5rem;
}
/* Variante alerte — indique un bloc qui requiert attention / décision */
.section-card--alert {
  background: var(--danger-100);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px 0 rgba(185,28,28,0.08);
  border: 1px solid #fecaca;
  border-left: 6px solid #ef4444;
  padding: 1.5rem;
  margin-top: 0.5rem;
}
/* Variante secondaire — visuellement en retrait (blocs go-live, risques, gaps) */
.section-card--secondary {
  background: var(--surface-subtle);
  border-radius: var(--r-lg);
  box-shadow: none;
  border: 1px solid var(--border-default);
  padding: 1.5rem;
  opacity: 0.93;
}
/* Variante secondaire — information contextuelle, visuellement en retrait */
.section-card--muted {
  background: var(--surface-subtle);
  border-radius: var(--r-lg);
  box-shadow: none;
  border: 1px solid var(--border-default);
  padding: 1.5rem;
}
/* DS-02: tokenisé */
/* DS-04: uppercase supprimé — .section-title reste pour labels colonnes/techniques.
   Pour les vrais titres de sections visible (h2), utiliser .section-heading. */
.section-title {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-bottom: 0.75rem;
}
/* Variante label technique (colonnes, métadonnées) — uppercase explicite */
.section-title--label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Focus visible (QW7) ──
   Provides a visible keyboard focus ring on all interactive elements.
   nav-link gets a lighter ring to contrast with the dark topNav. */
:focus-visible {
  outline: 3px solid var(--brand-800);
  outline-offset: 2px;
  border-radius: 2px;
}
.nav-link:focus-visible,
.nav-dropdown-menu a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.kb-card:focus-visible {
  outline: 3px solid var(--brand-800);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(122,24,55,0.15);
}

/* ── Administration dropdown ── */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-900);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  min-width: 175px;
  z-index: 200;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-dropdown-menu.open { display: flex; flex-direction: column; gap: 1px; }
.nav-dropdown-item { display: flex; border-radius: 6px; padding: 7px 12px; }
/* DS-28-quater-fix2: .hidden must override .nav-dropdown-item{display:flex} */
.nav-dropdown-item.hidden { display: none; }
.nav-dropdown-chevron { font-size: 0.6rem; opacity: 0.7; transition: transform 0.15s; margin-left: 2px; } /* EXCEPTION DS-03: flèche icône nav décorative */
.nav-dropdown.open > button .nav-dropdown-chevron { transform: rotate(180deg); }

/* Responsive: hide nav labels on small screens */
@media (max-width: 900px) {
  .nav-link span { display: none; }
  .nav-link { padding: 6px 8px; }
  /* Keep labels inside open dropdown always visible */
  .nav-dropdown-item span { display: inline; }
  .nav-dropdown-item { padding: 7px 12px; }
}

/* ── Mobile hamburger menu (UX-01 / RGAA-05) ── */
#mobileMenuBtn { display: none; }  /* hidden on desktop */

.mobile-nav-panel {
  display: none;
  flex-direction: column;
  background: var(--brand-900);
  padding: 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 30;
}
.mobile-nav-panel.mobile-nav-open { display: flex; }
.mobile-nav-panel .nav-link {
  border-radius: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 18px;
  font-size: 0.9rem;
}
.mobile-nav-panel .nav-link span { display: inline; }

@media (max-width: 767px) {
  #mainNav   { display: none !important; }
  #globalScope { display: none !important; }
  #scopeActiveBadge { display: none !important; }
  #mobileMenuBtn { display: flex; }
}

/* Highlight the scope select when a filter is active */
#globalScope.scope-active {
  border-color: rgba(251, 191, 36, 0.8);
  background-color: rgba(136, 19, 55, 0.65);
}

/* ══════════════════════════════════════════════════════════════════
   Phase 1 UX — Fondations hiérarchie visuelle
   Nouveaux composants + overrides d'harmonisation
══════════════════════════════════════════════════════════════════ */

/* ── Titre de section — version lisible — DS-02: tokenisé ── */
.section-heading {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--brand-800);
  flex-shrink: 0;
}
/* Variante neutre (blocs secondaires) */
.section-heading--muted::before { background: var(--border-strong); }
/* Variante alerte (blocs critiques) */
.section-heading--alert { font-size: var(--fs-16); font-weight: 700; color: var(--danger-700); }
.section-heading--alert::before { background: #ef4444; width: 4px; }
/* Variante succès (blocs ok/go-live) */
.section-heading--ok::before    { background: #22c55e; }

/* ── En-tête de groupe Arbitrage / section colorée ── */
/* DS-04bis: P0.2 — arb-section-header : uppercase supprimé */
.arb-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
}
.arb-section-header--critical {
  background: #dc2626;
  color: white;
}
.arb-section-header--important {
  background: #ea580c;
  color: white;
}
.arb-section-header--watch {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-bottom: none;
}
/* Le section-card qui suit directement un arb-section-header perd son arrondi supérieur */
.arb-section-header + .section-card {
  border-radius: 0 0 1rem 1rem;
  border-top: none;
}

/* ── Insight card — hiérarchie critique / high / info ── */
.insight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid;
  transition: opacity 0.15s;
}
.insight-item--critical {
  background: #fff1f2;
  border-color: #fecaca;
  border-left-width: 3px;
  border-left-color: #dc2626;
}
.insight-item--critical .insight-icon { font-size: 1rem; color: #b91c1c; }
.insight-item--critical .insight-label { font-size: 0.8rem; font-weight: 600; color: #991b1b; }
.insight-item--high {
  background: #fff7ed;
  border-color: #fed7aa;
}
.insight-item--high .insight-icon { font-size: 0.875rem; color: #c2410c; }
.insight-item--high .insight-label { font-size: 0.8rem; font-weight: 500; color: #9a3412; }
.insight-item--info {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.insight-item--info .insight-icon { font-size: 0.8rem; color: #64748b; }
.insight-item--info .insight-label { font-size: 0.775rem; font-weight: 400; color: #475569; }

/* ── Bandeau message clé comité — point d'entrée visuel n°1 ── */
.committee-message {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
  border: 1px solid #fbbf24;
  border-left: 6px solid #f59e0b;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 2px 8px 0 rgba(245,158,11,0.10);
}
/* Variante critique — rouge */
.committee-message--alert {
  background: linear-gradient(135deg, #fff1f2 0%, #fff5f5 100%);
  border-color: #fca5a5;
  border-left-color: #dc2626;
  box-shadow: 0 2px 8px 0 rgba(220,38,38,0.10);
}
.committee-message--alert .committee-message__icon { color: #dc2626; }
.committee-message--alert .committee-message__label { color: #991b1b; }
/* Variante OK — vert */
.committee-message--ok {
  background: linear-gradient(135deg, #f0fdf4 0%, #f3fef6 100%);
  border-color: #86efac;
  border-left-color: #16a34a;
  box-shadow: 0 2px 8px 0 rgba(22,163,74,0.08);
}
.committee-message--ok .committee-message__icon { color: #15803d; }
.committee-message--ok .committee-message__label { color: #14532d; }
.committee-message__icon {
  font-size: 1.5rem;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.committee-message__label {
  font-size: var(--fs-11);
  font-weight: 700;
  color: #b45309;
  display: block;
  margin-bottom: 0.3rem;
}
.committee-message__text {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.55;
}

/* ── Badge raison (sous action recommandée) — lisible, sans italic ── */
.action-reason {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.3;
  margin-top: 2px;
}

/* ── Espacement inter-section harmonisé ── */
.section-gap { margin-bottom: 2rem; }
.section-gap--sm { margin-bottom: 1.25rem; }

/* ── RAG dot — version légèrement plus grande pour lisibilité ── */
.rag-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.rag-dot--GREEN { background: #22c55e; }
.rag-dot--AMBER { background: #f59e0b; }
.rag-dot--RED   { background: #ef4444; }
.rag-dot--GREY  { background: #94a3b8; }

/* ── KPI hero — variante pour la valeur principale d'une vue ──
   Ex: "3 projets à arbitrer" dans la vue comité */
.kpi-hero {
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-left: 6px solid #ef4444;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  box-shadow: 0 2px 10px 0 rgba(239,68,68,0.10);
}
/* Variante neutre — quand 0 projets critiques */
.kpi-hero--neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left-color: #94a3b8;
  box-shadow: none;
}
.kpi-hero--neutral .kpi-hero__num { color: #475569; }
.kpi-hero--neutral .kpi-hero__label { color: #64748b; }
.kpi-hero__num {
  font-size: 3rem;
  font-weight: 800;
  color: #b91c1c;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.kpi-hero__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #7f1d1d;
  line-height: 1.3;
}

/* ── Accessibility ── */

/* ── Phase 3: Dashboard zone labels ── */
/* DS-02: tokenisé */
/* DS-04bis: P0.2 — db-zone-label : uppercase supprimé, taille augmentée → section heading visible */
.db-zone-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-default);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--separator);
}
.db-zone-label--alert    { color: var(--danger-700);  border-color: #fecaca; }
.db-zone-label--calendar { color: var(--info-700);    border-color: #bfdbfe; }

/* ── Phase 3: Portfolio active filter chips ── */
.pf-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0 0.375rem;
}
.pf-active-filters--hidden {
  display: none !important;
}
.pf-chip-label {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 600;
  margin-right: 0.25rem;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 8px 2px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #334155;
  cursor: default;
  white-space: nowrap;
}
.pf-chip button {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: var(--fs-11);
  padding: 0;
  transition: background 0.1s, color 0.1s;
}
.pf-chip button:hover { background: #e2e8f0; color: #ef4444; }

/* ── Phase 3: Project detail alert banner ── */
.pd-alert-banner {
  background: #fff1f2;
  border-left: 5px solid #ef4444;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #991b1b;
}
.pd-alert-banner i { color: #dc2626; font-size: 1rem; flex-shrink: 0; }

/* ── Phase 3: Missing data indicator in project detail ── */
.pd-missing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background: #fffbeb;
  border: 1px dashed #fbbf24;
  font-size: 0.75rem;
  color: #b45309;
  font-style: normal;
}

/* ── Phase 3: kpi-card uses .kpi-num inside ── */
.kpi-card .kpi-num,
.kpi-card--xl .kpi-num { color: #1e293b; }

/* ── Phase 3.5: section-card--compact (zone portefeuille dashboard) ── */
.section-card--compact { padding: 0.875rem 1rem; }

/* ── Phase 4: alert tag in portfolio list / kanban ── */
.pf-alert-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-11);
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  line-height: 1.4;
}
.pf-alert-tag--critical {
  color: #991b1b;
  background: #fff1f2;
  border-color: #fca5a5;
}

/* ── Phase 4: RAG row highlight in portfolio list ── */
.proj-row--red { background: #fff8f8; }
.proj-row--red:hover { background: #fff1f2; }

/* ── Phase 4: pd-alert-banner enhanced ── */
.pd-alert-banner--strong {
  background: #fff1f2;
  border-left: 6px solid #dc2626;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #7f1d1d;
  box-shadow: 0 2px 6px rgba(220,38,38,0.12);
}
.pd-alert-banner--strong i { color: #dc2626; font-size: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }
.pd-alert-banner--strong strong { font-weight: 800; color: #b91c1c; }
.kpi-card--critical {
  background: #fff1f2 !important;
  border-color: #fecaca !important;
  border-left-color: #dc2626 !important;
  box-shadow: 0 2px 8px 0 rgba(220,38,38,0.10) !important;
}
.kpi-card--critical .kpi-num { color: #b91c1c !important; }

/* ── Phase 3.5: Vue portefeuille zone label ── */
.db-zone-label--portfolio { color: #64748b; border-color: #e2e8f0; }

/* ── Phase 3.5: Portfolio toolbar separator ── */
.pf-toolbar-sep {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.125rem;
}

/* ── Phase 3.5: Kanban card alert state ── */
.kb-card--alert {
  border-left: 3px solid #ef4444;
  background: #fff8f8;
}
.kb-card--alert:hover { background: #fff1f2; }

/* ── Phase 3.5: Kanban card pilot label ── */
.kb-stat-pilot {
  font-size: var(--fs-11);
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  overflow: visible;
  background: var(--brand-800);
  color: white;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  outline: 3px solid white;
  outline-offset: 2px;
}

/* ── Permissions matrix (PagePermissions) ── */
.perm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.perm-th {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 90px;
}
.perm-th-label { text-align: left; min-width: 240px; }
.perm-th-admin { background: #f0fdf4; color: #15803d; }
.perm-th-badge {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: var(--fs-11);
  padding: 1px 6px;
  border-radius: 99px;
  margin-top: 3px;
}
.perm-role-label { font-size: 0.75rem; font-weight: 700; color: #1e293b; }
.perm-cat-row { background: #f8fafc; }
.perm-cat-label {
  padding: 7px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
}
.perm-row { border-bottom: 1px solid #f1f5f9; }
.perm-row:hover { background: #f8fafc; }
/* DS-13 P0.2: sensitive/critical row highlights */
.perm-row-sensitive { background: #fffbeb; }
.perm-row-sensitive:hover { background: #fef3c7; }
.perm-row-critical  { background: #fff1f2; }
.perm-row-critical:hover  { background: #ffe4e6; }
.perm-label-cell { padding: 8px 14px; }
/* DS-13 P0.1: label + badge on same line */
.perm-label-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm-label { font-size: 0.8rem; color: #1e293b; }
/* DS-13 P0.1: business description sub-line */
.perm-desc {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.4;
  max-width: 380px;
}
.perm-id { font-size: var(--fs-11); color: #94a3b8; font-family: monospace; margin-top: 1px; display: block; }
/* DS-13 P0.2: risk badges */
.perm-risk-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.perm-risk-sensitive {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}
.perm-risk-critical {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
}
.perm-cell {
  text-align: center;
  padding: 6px 8px;
  border-left: 1px solid #f1f5f9;
  vertical-align: middle;
}
.perm-cell-admin { background: #f0fdf4; }
.perm-cell-disabled { background: #f8fafc; }
.perm-na { color: #cbd5e1; font-size: 0.8rem; }

/* ══════════════════════════════════════════════════════════════════
   Help panel — aide en ligne contextuelle
══════════════════════════════════════════════════════════════════ */
#helpPanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  z-index: 150;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
#helpPanel.open {
  transform: translateX(0);
  pointer-events: auto;
}
.help-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  overflow: hidden;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
  flex-shrink: 0;
}
.help-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.help-close {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.help-close:hover { background: #fee2e2; color: #b91c1c; }
.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: 0.8rem;
  color: #475569;
  scroll-behavior: smooth;
}
.help-intro {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
/* TOC */
.help-toc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.help-toc-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 6px;
}
.help-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-toc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--brand-800);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.1s;
}
.help-toc-link:hover { background: var(--brand-050); text-decoration: underline; }
/* Sections */
.help-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f8fafc;
}
.help-section:last-child { border-bottom: none; margin-bottom: 0; }
.help-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.help-section-text {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.65;
}
.help-section-text code {
  background: #f1f5f9;
  color: var(--brand-800);
  font-family: monospace;
  font-size: 0.73rem;
  padding: 1px 5px;
  border-radius: 4px;
}
.help-section-text strong { color: #1e293b; }
/* Glossary */
.help-glossary {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.help-glossary-toggle {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.73rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.help-glossary-toggle:hover { background: #f1f5f9; }
.help-glossary-list { padding: 10px 12px; margin: 0; }
.help-glossary-term {
  font-size: 0.73rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 8px;
}
.help-glossary-term:first-child { margin-top: 0; }
.help-glossary-def {
  font-size: 0.73rem;
  color: #475569;
  line-height: 1.5;
  margin-left: 0;
  margin-bottom: 0;
}
/* Keyboard shortcuts table */
.help-kbd-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.help-kbd-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.help-kbd {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-family: monospace;
  color: #1e293b;
  white-space: nowrap;
}
.help-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.73rem;
  color: var(--brand-800);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Footer */
.help-footer {
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.help-footer-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-11);
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 0;
}
.help-footer-link:hover { color: var(--brand-800); text-decoration: underline; }
/* Help button in topnav */
#helpBtn {
  color: #fecdd3;
  transition: background-color 0.15s, color 0.15s;
}
#helpBtn:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
#helpBtn.help-active { background-color: rgba(255,255,255,0.18); color: #fff; }
.perm-chk-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.perm-chk-wrap:hover { background: rgba(136,19,55,0.06); }
.perm-chk {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-800);
  cursor: pointer;
}
.perm-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* DS-13: higher-specificity rule ensures .hidden overrides display:flex */
.perm-save-bar.hidden { display: none; }

/* ── Header metrics grid — cockpit exécutif : 5 colonnes ── */
.header-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.header-metric-bloc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 8px 6px;
  border-right: 1px solid #e5e7eb;
}
.header-metric-bloc:last-child { border-right: none; }

/* DS-23 — Métriques éditables */
.hm-editable { position: relative; cursor: pointer; transition: background 0.15s; }
.hm-editable:hover { background: #f8faff; }
.hm-edit-hint { font-size: 7px; color: #cbd5e1; margin-left: 3px; display: none; }
.hm-editable:hover .hm-edit-hint { display: inline; }
.hm-edit-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 24px;
}
.hm-edit-btn:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 4px; }
.hm-popover {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  z-index: 9999; background: white; border: 1px solid #e2e8f0;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 160px; padding: 10px; white-space: nowrap;
}
.hm-popover-title { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.hm-rag-choices { display: flex; flex-direction: column; gap: 2px; }
.hm-rag-choice {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 12px; color: #374151;
  transition: background 0.1s, border-color 0.1s; text-align: left; width: 100%;
}
.hm-rag-choice:hover { background: #f1f5f9; }
.hm-rag-choice--active { background: #f0f4ff; border-color: #818cf8; font-weight: 600; }
.hm-rag-icon { font-size: 16px; flex-shrink: 0; }
.hm-rag-label { font-size: 12px; }
.hm-status-list { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.hm-status-item {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 12px; color: #374151;
  transition: background 0.1s; text-align: left; width: 100%;
}
.hm-status-item:hover { background: #f1f5f9; }
.hm-status-item--active { background: color-mix(in srgb, var(--st-color, #64748b) 10%, white); border-color: var(--st-color, #64748b); font-weight: 600; }
.hm-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hm-popover-error { font-size: 11px; color: #ef4444; margin-top: 6px; padding: 4px 6px; background: #fef2f2; border-radius: 4px; }
.hm-progress-editor { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.hm-progress-slider { accent-color: var(--brand-700, #9b1c3a); }
.hm-progress-number { width: 52px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 6px; font-size: 13px; font-weight: 600; text-align: center; }
.hm-popover-save {
  width: 100%; padding: 5px; font-size: 12px; font-weight: 600;
  background: var(--brand-700, #9b1c3a); color: white; border: none;
  border-radius: 6px; cursor: pointer; transition: opacity 0.15s;
}
.hm-popover-save:hover { opacity: 0.9; }
.hm-popover-save:disabled { opacity: 0.5; cursor: not-allowed; }
.header-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 4px;
  line-height: 13px;
  display: block;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
}
.header-metric-value {
  font-size: 16px;
  font-weight: 600;
  min-height: 24px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.header-metric-bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  flex-shrink: 0;
}
.header-metric-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand-800);
}

/* ── Header Identité (titre + sous-ligne) ── */
.pd-header-identity {
  padding: 16px 20px 12px 24px;
}
.pd-project-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Header statut chip coloré (dominant) ── */
.header-status-chip {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Synthèse cards — shadow + hover lift ── */
.pd-synth-card {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.pd-synth-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* ── Zone haute 70/30 ── */
.pd-top-zone {
  display: grid;
  grid-template-columns: minmax(0,1fr) 240px;
  min-height: 0;
}

/* ── Sprint 20: layout helpers — supprime inline style= (CSP) ── */
/* Identité + Acteurs côte à côte 60/40 */
.pd-identity-actors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Grille interne carte Identité : 3 lignes × 2 colonnes */
.pd-identity-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e2e8f0;
}
.pd-identity-inner-grid .pd-info-row {
  background: #ffffff;
}
/* Carte risques suivi cliquable */
.pd-risks-clickable {
  cursor: pointer;
}
/* Valeur métrique grande (18px) */
.header-metric-big {
  font-size: 18px !important;
  font-weight: 900;
  line-height: 1;
}
/* Valeur météo emoji */
.header-metric-emoji {
  font-size: 18px;
  line-height: 1;
}
/* Valeur météo texte (RAG label) */
.header-metric-rag-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
/* Valeur date fin projet */
.header-metric-date {
  font-size: 12px;
}
/* Planning: table header widths (CSP - replaces inline style) */
.pf-month-th {
  min-width: 52px;
}
.pf-team-profile-th {
  min-width: 150px;
}

.pd-top-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e7eb;
}
/* Métriques grid dans le bloc gauche : 5 colonnes */
.pd-top-left .header-metrics-grid {
  grid-template-columns: repeat(5, 1fr);
  border-top: none;
  border-bottom: 1px solid #e5e7eb;
}
.pd-top-right {
  padding: 12px;
  align-self: flex-start;
  position: sticky;
  top: 12px;
}
/* ── Actions rapides card ── */
.pd-actions-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.pd-quick-action {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: var(--fs-11);
  font-weight: 600;
  color: #334155;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.pd-quick-action:hover {
  background: #f8fafc;
  color: var(--brand-800);
}
.pd-quick-action--export {
  color: #64748b;
  font-weight: 500;
}
.pd-quick-action--export:hover {
  background: #f1f5f9;
  color: #475569;
}
/* ── Header métrique sous-texte ── */
.header-metric-subtext {
  display: none; /* EXCEPTION DS-03: élément jamais rendu (display:none), police 9px acceptable */
  font-size: 9px;
  color: #cbd5e1;
  text-align: center;
  margin-top: 2px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   IDENTITÉ — grille 2×3 inline label/valeur
   ══════════════════════════════════════════════════════ */
.pd-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  min-width: 0;
}
.pd-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.pd-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-actor-empty {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════
   VISION — 5 colonnes éditoriales
   ══════════════════════════════════════════════════════ */
.pd-vision-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.3fr 1.3fr 1.3fr 1.3fr;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.pd-vision-col {
  padding: 10px 12px;
  border-right: 1px solid #e5e7eb;
  min-width: 0;
}
.pd-vision-col:last-child { border-right: none; }
.pd-vision-col--efr {
  background: #fafaf9;
  border-left: 3px solid var(--brand-800);
}
.pd-vision-col-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pd-vision-col--efr .pd-vision-col-header { color: var(--brand-800); }
.pd-vision-efr-content {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.65;
  white-space: pre-wrap;
}
.pd-vision-plain-content {
  font-size: 12px;
  font-weight: 400;
  color: #334155;
  line-height: 1.65;
  white-space: pre-wrap;
}
.pd-vision-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pd-vision-bullets li {
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
  padding: 3px 0 3px 14px;
  position: relative;
  border-bottom: 1px solid #f8fafc;
}
.pd-vision-bullets li:last-child { border-bottom: none; }
.pd-vision-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-800);
  opacity: 0.45;
}
@media (max-width: 1000px) {
  .pd-vision-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pd-vision-col { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .pd-vision-col:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .pd-vision-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   PPM DESIGN FRAMEWORK — composants réutilisables
   ══════════════════════════════════════════════════════ */
/* Card */
.ppm-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}
.ppm-card--hover { transition: box-shadow 0.15s, transform 0.15s; }
.ppm-card--hover:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.ppm-card-clickable {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.ppm-card-clickable:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Section header — 13px, sans uppercase — ds-01 §5.1 */
.ppm-section-header {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-default);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Metric / KPI */
.ppm-metric { display: flex; flex-direction: column; align-items: center; }
.ppm-metric-value { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--text-strong); }
.ppm-metric-label { font-size: var(--fs-11); color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }
.ppm-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--h-metric);
  gap: var(--space-1);
}
.ppm-kpi-value { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 700; color: var(--text-strong); }
.ppm-kpi-label { font-size: var(--fs-11); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Chips */
.ppm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  height: var(--h-chip);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
}
.ppm-chip--bordeaux { background: var(--brand-100);    color: var(--brand-800); border: 1px solid #e8c5d0; }
.ppm-chip--slate    { background: var(--surface-muted); color: #475569;          border: 1px solid #e2e8f0; }
.ppm-chip--green    { background: var(--success-100);  color: var(--success-700); border: 1px solid #bbf7d0; }
.ppm-chip--red      { background: var(--danger-100);   color: var(--danger-700);  border: 1px solid #fecaca; }
.ppm-chip--amber    { background: var(--warning-100);  color: var(--warning-700); border: 1px solid #fde68a; }

/* Badge statut (variantes sémantiques) */
.ppm-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 600;
  white-space: nowrap;
}
.ppm-badge-status--success { background: var(--success-100); color: var(--success-700); }
.ppm-badge-status--warning { background: var(--warning-100); color: var(--warning-700); }
.ppm-badge-status--danger  { background: var(--danger-100);  color: var(--danger-700); }
.ppm-badge-status--info    { background: var(--info-100);    color: var(--info-700); }
.ppm-badge-status--neutral { background: var(--surface-muted); color: var(--text-muted); }

/* Table premium — DS-01/DS-03 : standard unique pour .ppm-table.
   th = thead th (+ compat th sans thead)
   td = tbody td (+ compat td sans tbody)
   Doublon legacy supprimé DS-03. */
.ppm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.ppm-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-default);
}
.ppm-table td {
  padding: 10px 12px;
  color: var(--text-default);
  border-bottom: 1px solid var(--surface-muted);
  vertical-align: middle;
}
.ppm-table tr:last-child td { border-bottom: none; }
.ppm-table tr:hover td { background: var(--surface-subtle); }

/* Teams hierarchy indentation — replaces forbidden inline styles (CSP) */
.team-depth-0 { display: inline; }
.team-depth-1 { display: inline-flex; align-items: center; gap: 4px; padding-left: 12px; color: #475569; font-weight: 400; }
.team-depth-2 { display: inline-flex; align-items: center; gap: 4px; padding-left: 24px; color: #475569; font-weight: 400; }
.team-depth-3 { display: inline-flex; align-items: center; gap: 4px; padding-left: 36px; color: #475569; font-weight: 400; }
.team-depth-4 { display: inline-flex; align-items: center; gap: 4px; padding-left: 48px; color: #475569; font-weight: 400; }

/* Empty state */
.ppm-empty { text-align: center; color: var(--text-soft); font-style: italic; font-size: var(--fs-12); padding: 32px 16px; }
.ppm-empty i { display: block; font-size: 24px; margin-bottom: 8px; opacity: 0.4; }
.ppm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}
.ppm-empty-state i { font-size: 32px; opacity: 0.35; }
.ppm-empty-state p { font-size: var(--fs-13); font-style: italic; }

/* ── Boutons ── */
.ppm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-button);
  padding: 0 var(--space-5);
  background: var(--brand-800);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 600;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ppm-btn-primary:hover  { background: var(--brand-700); }
.ppm-btn-primary:active { background: var(--brand-900); }
.ppm-btn-primary:disabled { opacity: 0.5; cursor: default; }

.ppm-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-button);
  padding: 0 var(--space-5);
  background: var(--surface-card);
  color: var(--text-default);
  font-size: var(--fs-14);
  font-weight: 600;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.ppm-btn-secondary:hover  { border-color: var(--border-strong); background: var(--surface-subtle); }
.ppm-btn-secondary:disabled { opacity: 0.5; cursor: default; }

.ppm-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-button);
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-14);
  font-weight: 500;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ppm-btn-ghost:hover { background: var(--surface-muted); color: var(--text-default); }

/* ── Formulaires ── */
.ppm-select {
  width: 100%;
  height: var(--h-input);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  color: var(--text-default);
  background: var(--surface-card);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ppm-select:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-100); }

.ppm-textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  font-size: var(--fs-14);
  color: var(--text-default);
  background: var(--surface-card);
  outline: none;
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ppm-textarea:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-100); }

/* ── Tabs ── */
.ppm-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ppm-tab:hover { color: var(--text-default); }
.ppm-tab.active, .ppm-tab[aria-selected="true"] {
  color: var(--brand-800);
  border-bottom-color: var(--brand-800);
  font-weight: 600;
}

/* ── Modales (classes réutilisables) ── */
.ppm-modal {
  background: var(--surface-card);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.ppm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.ppm-modal-header h2,
.ppm-modal-header .ppm-modal-title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-strong);
  line-height: var(--lh-16);
}
.ppm-modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1;
}
.ppm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--separator);
  flex-shrink: 0;
}

/* ── Alertes / Banners ── */
.ppm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
}
.ppm-alert--warning { background: var(--warning-100); color: var(--warning-700); }
.ppm-alert--danger  { background: var(--danger-100);  color: var(--danger-700); }
.ppm-alert--success { background: var(--success-100); color: var(--success-700); }
.ppm-alert--info    { background: var(--info-100);    color: var(--info-700); }

.ppm-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-14);
  font-weight: 500;
}
.ppm-banner--brand  { background: var(--brand-900); color: #fff; }
.ppm-banner--warning { background: var(--warning-100); color: var(--warning-700); border-bottom: 1px solid #fde68a; }

/* ── Scroll highlight (remplace target.style.outline — utilise var(--brand-800)) ── */
@keyframes ppm-scroll-flash {
  0%   { outline-color: var(--brand-800); }
  100% { outline-color: transparent; }
}
.ppm-scroll-highlight {
  outline: 2px solid var(--brand-800);
  outline-offset: 3px;
  border-radius: var(--r-xs);
  animation: ppm-scroll-flash 1.5s ease-out forwards;
}

/* ── Page wrapper ── */
.ppm-page {
  background: var(--surface-page);
  min-height: 100vh;
  padding: var(--space-6);
  font-family: var(--font-sans);
}

/* ── Quick actions bar ── */
.ppm-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Project detail modal max-height wrapper ── */
.modal-panel-detail {
  width: min(95vw, 1400px);
  height: min(90vh, 1000px);
  max-height: 94vh;
}
@media (max-width: 1200px) {
  .modal-panel-detail { width: min(98vw, 1400px); }
}
@media (max-width: 900px) {
  .modal-panel-detail { width: 99vw; height: auto; max-height: 96vh; }
  .pd-top-zone { grid-template-columns: 1fr; }
  .pd-top-right { display: none; }
  .pd-top-left { border-right: none; }
  .pd-top-left .header-metrics-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════
   PRINT — Fiche projet A3 paysage (Exporter la fiche)
   ══════════════════════════════════════════════════════ */
@media print {
  @page { size: A3 landscape; margin: 12mm; }

  /* Masquer tout sauf la fiche */
  body > *:not(#projectDetailModal) { display: none !important; }
  #projectDetailModal {
    display: block !important;
    position: static !important;
    background: white !important;
    z-index: auto !important;
  }
  .modal-panel-detail {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Zone haute : bloc unique pleine largeur */
  .pd-top-zone {
    grid-template-columns: 1fr !important;
    break-inside: avoid;
  }
  .pd-top-right { display: none !important; }
  .pd-top-left { border-right: none !important; }
  /* Scroll area : hauteur auto */
  .overflow-y-auto { overflow: visible !important; height: auto !important; }
  /* Masquer boutons d'action */
  .print\:hidden,
  #pdCloseBtn,
  .pd-section-edit,
  button.pd-section-edit { display: none !important; }
  /* Forcer sections visibles */
  .divide-y > div { break-inside: avoid; }
  /* Gantt : overflow visible */
  .overflow-x-auto { overflow: visible !important; }
  /* Typographie optimisée pour impression */
  body { font-size: 10pt; color: #000; }
  .text-bordeaux, .text-bordeaux-800 { color: var(--brand-800) !important; }
}

/* ── Planning — Phase popover (replaces inline style= on #plPhasePopover) ── */
.phase-popover {
  position: fixed;
  z-index: 9999;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 1px solid #e2e8f0;
  padding: 16px;
  width: 320px;
}
.phase-popover-close {
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
}
.phase-popover-close:hover { color: #475569; }
.phase-popover-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-popover-row {
  display: flex;
  gap: 8px;
}
.phase-popover-col {
  flex: 1;
  min-width: 0;
}
.phase-popover-label {
  font-size: var(--fs-11);
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 3px;
}
.phase-popover-select {
  font-size: 12px;
  width: 100%;
}
.phase-popover-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.phase-popover-save {
  flex: 1;
  font-size: 12px;
  padding: 4px 0;
}
.phase-popover-del {
  font-size: 12px;
  padding: 4px 10px;
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.phase-popover-del:hover { background: #fca5a5; }

/* ── Gantt cells — min-width and today highlight (replaces inline style= min-width) ── */
.gantt-th-cell {
  min-width: 40px;
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 2px 0;
  text-align: center;
}
.gantt-th-today { background: var(--brand-050); color: var(--brand-800); }
.gantt-th-normal { color: #475569; }
.gantt-th-year { font-weight: 400; font-size: var(--fs-11); } /* DS-03: migré depuis 8px */
.gantt-td-cell { min-width: 44px; }
.gantt-td-today { background: rgba(254,241,242,0.5); }
.gantt-td-sticky { min-width: 160px; }
.gantt-td-ms-sticky { min-width: 160px; }
.gantt-col-sep { border-collapse: separate; }

/* ── Planning — capacity bar (dynamic fill) — uses data-* via applyDynamicStyles ── */
.phase-bar-inline {
  font-size: var(--fs-11);
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
  height: 18px;
  cursor: pointer;
  max-width: 130px;
  outline: none;
  appearance: none;
  border: none;
  /* background/color set via data-chip-bg / data-chip-color */
}
.gantt-pct-input {
  width: 30px;
  font-size: var(--fs-11);
  text-align: right;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0 2px;
  height: 16px;
  color: #64748b;
}
.gantt-pct-unit {
  font-size: var(--fs-11);
  color: #94a3b8;
}

/* ── projectDetail — milestone diamond span ── */
.milestone-diamond {
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}

/* ── projectDetail — bar chart fill (dynamic height via data-bar-h) ── */
[data-bar-h] {
  height: var(--bar-h, 4px);
}

/* ── Gantt table layout — replaces inline style= (CSP compliance) ── */
.gantt-table { border-collapse: separate; table-layout: auto; width: 100%; }
.gantt-tr    { height: 28px; }

/* Sticky column geometry (left/width — sticky class comes from Tailwind) */
.gantt-col-name     { left: 0;     width: 275px; min-width: 275px; max-width: 275px; padding: 0 6px;  vertical-align: middle; }
.gantt-col-rag      { left: 275px; width: 52px;  min-width: 52px;  max-width: 52px;  padding: 0 4px;  vertical-align: middle; font-size: 16px; text-align: center; overflow: visible; }
.gantt-col-status   { left: 327px; width: 120px; min-width: 120px; max-width: 120px; padding: 0 4px;  vertical-align: middle; }
.gantt-col-progress { left: 447px; width: 105px; min-width: 105px; max-width: 105px; padding: 0 4px;  vertical-align: middle; }

/* TH-specific font styling */
th.gantt-col-name, th.gantt-col-rag, th.gantt-col-status, th.gantt-col-progress {
  font-size: var(--fs-11); font-weight: 700; color: #475569;
}
th.gantt-col-name, th.gantt-col-status, th.gantt-col-progress { text-align: left; }

/* Project name link (small font in gantt row) */
.gantt-proj-name    { font-size: 11px; }

/* Multi-phase bar wrapper */
.gantt-phase-multi  { display: flex; flex-direction: column; height: 100%; }

/* Milestone marker badge */
.gantt-ms-marker    { position: absolute; top: 0; right: 1px; font-size: var(--fs-11); line-height: 1; font-weight: 700; z-index: 1; }
.gantt-ms-late      { color: #dc2626; filter: drop-shadow(0 0 2px #fca5a5); }
.gantt-ms-warn      { color: #f97316; }

/* Today column highlight — left border creates a visible vertical marker */
.gantt-cell-today   { background: #fff8f8; border-left: 2px solid #fda4af; }

/* Progress bar area in gantt rows */
.gantt-progress-wrap { display: flex; align-items: center; gap: 3px; }

/* ── Gantt load section — collapsible (Option C) ── */
.pd-gantt-load--collapsed .pd-gantt-load-row { display: none; }
.pd-gantt-chevron { transition: transform 0.2s; }
.pd-gantt-chevron--open { transform: rotate(90deg); }
/* DS-27: gantt/charge separator — visual unity between phase gantt and charge section */
.gantt-charge-sep {
  background: linear-gradient(to right, #f1f5f9, #f8fafc);
  border-top: 1.5px solid #e2e8f0;
}
.gantt-progress-lbl  { font-size: var(--fs-11); color: #64748b; min-width: 24px; text-align: right; }
.pl-progress-bar     { flex: 1; cursor: pointer; }

/* Status select in gantt rows (dynamic bg/color via data-chip-bg/data-chip-color) */
.pl-status-sel { appearance: none; -webkit-appearance: none; border: none; outline: none; cursor: pointer; width: 100%; }

/* ── GoLive tab layout ── */
.gl-year-wrap   { padding: 12px 16px 8px; }
.gl-year-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gl-year-label  { font-size: 14px; font-weight: 700; color: #1e293b; }
.gl-year-count  { margin-left: 4px; font-size: 12px; color: #94a3b8; }

/* ── Capacity — CSP-safe replacements ── */
/* Table layout (was border-collapse:separate inline) */
.cap-table { border-collapse: separate; border-spacing: 0; }
.cascade-sel { width: 160px; max-width: 160px; }
/* Legend X badge (replaces inline style= on <span>) */
.cap-legend-x {
  font-weight: 700;
  border: 1px solid var(--brand-800);
  padding: 0 4px;
  border-radius: 3px;
  color: var(--brand-800);
}
/* Override availability input (replaces inline border-color + font-weight) */
.avail-input-override {
  border-color: var(--brand-800) !important;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   Phase 5 — Responsive, météo, kanban chef de projet
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   DS-04 — Page shell layout
   ══════════════════════════════════════════════════════ */
/* Conteneur large — vues analytiques (portfolio, planning, charge) */
.ppm-page-wide {
  width: 100%;
  padding: 24px;
}
/* Conteneur executive — comité, arbitrage : centré mais pas trop étroit */
.ppm-page-exec {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
}
/* Override content-max pour les vues larges */
#pageContent > .section-card,
.content-max {
  max-width: min(100% - 32px, 1680px);
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════
   DS-04bis — Composant météo contrôlé — remplace ragEmoji()
   ═══════════════════════════════════════════════════════════════ */
.ppm-weather-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
}
.ppm-weather-icon--good   { color: #16a34a; }  /* green-600  */
.ppm-weather-icon--medium { color: #f97316; }  /* orange-500 */
.ppm-weather-icon--bad    { color: #dc2626; }  /* red-600    */
.ppm-weather-icon--empty  { color: #94a3b8; }  /* slate-400  */
/* Variant lg — fiche projet cockpit */
.ppm-weather-icon--lg { font-size: 1.5rem; }

/* ── 5b: Kanban — colonne plus large pour lisibilité ── */
.kb-col {
  flex: 0 0 270px;
}

/* ── 5c: Kanban — barre de filtre rapide "chef de projet" ── */
.kb-quick-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kb-qf-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.kb-qf-btn:hover { border-color: #94a3b8; background: #f8fafc; }
.kb-qf-btn.kb-qf-active { border-color: var(--brand-800); background: var(--brand-050); color: var(--brand-800); }
.kb-qf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1;
}
.kb-qf-btn.kb-qf-active .kb-qf-count { background: rgba(136,19,55,0.13); }

/* ── 5d: Kanban — mini barre de progression sur la carte ── */
.kb-card-prog {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 4px;
}
.kb-card-prog-bg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  overflow: hidden;
}
.kb-card-prog-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--brand-800);
  width: var(--pct, 0%);
  transition: width 0.3s;
}
.kb-card-prog-pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e293b;
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}

/* ── 5e: Kanban — ligne de meta (météo + périmètre + pilote) ── */
.kb-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.kb-meta-sep {
  color: #cbd5e1;
  font-size: 0.7rem;
}
.kb-meta-pilot {
  font-size: var(--fs-11);
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  white-space: nowrap;
}

/* ── 5f: Kanban — pied de carte avec CTA open / edit ── */
.kb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}
.kb-card-open-btn {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--brand-800);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  transition: opacity 0.1s;
}
.kb-card-open-btn:hover { opacity: 0.7; }
.kb-card-edit-btn {
  font-size: 0.7rem;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.kb-card-edit-btn:hover { color: var(--brand-800); }