:root {
  --ink: #18213a;
  --muted: #44546a;
  --line: #dce2f0;
  --surface: #f7f9ff;
  --panel: #ffffff;
  --panel-2: #f4f7fb;
  --fill: #eef2f1;
  /* Table header / total band. Was only ever written as the literal fallback
     of var(--panel-alt, #f4f6f8), which painted a near-white band under
     near-white text in dark mode (timesheet head + totals unreadable). */
  --panel-alt: #f4f6f8;
  --accent: #335fff;
  --accent-dark: #123bd6;
  --accent-soft: #e8edff;
  --aqua: #2fcfc3;
  --aqua-soft: #e3fbf9;
  /* Solid Revalio-green band: projects/objectives table headers and the
     sidebar group labels. Same value in both themes on purpose — it is the
     brand band, not a themed surface — so it is NOT redefined in dark. */
  --band: #2fcfc3;
  --band-hover: #29b8ad;
  --band-ink: #ffffff;
  --teal-strong: #0f8f86;
  --amber: #b96b00;
  --amber-soft: #fff1d6;
  --red: #b83a3a;
  --red-soft: #ffe0df;
  /* Positif / OK (marges, cash-in, congés approuvés). Était écrit en dur sous
     cinq verts différents (#107060, #047857, #1a7e78, #1a7f48, #27ae60) qui
     restaient sombres sur fond sombre. */
  --green: #0f7a5a;
  --green-soft: #dff5ec;
  --blue: #335fff;
  --blue-soft: #e5efff;
  --violet: #8a75ff;
  --violet-soft: #f0edff;
  --coral: #ff8a7a;
  --shadow: 0 18px 44px rgba(51, 95, 255, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (rem, 1rem = 16px). One token per semantic step so text sizes
     stay consistent across the app and scale with the root / user zoom. */
  --fs-2xl: 2rem;        /* 32 — page title */
  --fs-xl: 1.75rem;      /* 28 — hero client/project name, KPI number */
  --fs-h1-mobile: 1.5rem;/* 24 — h1 on small screens */
  --fs-lg: 1.125rem;     /* 18 — section headings, stat values */
  --fs-md: 1rem;         /* 16 — sub-headings (h3) */
  --fs-body: 0.875rem;   /* 14 — default reading / table body */
  --fs-sm: 0.8125rem;    /* 13 — small body, card text */
  --fs-caption: 0.75rem; /* 12 — labels, captions, pills, table headers */
  --fs-xs: 0.72rem;      /* ~11.5 — micro labels, chart axes, badges (readability floor) */
  --lh-heading: 1.15;
  --lh-normal: 1.45;
}

/* L'attribut `hidden` doit gagner, toujours. Toute règle de classe qui pose un
   `display` (grid, flex, inline-flex…) l'écrase silencieusement : l'élément
   reste visible alors que le code le croit masqué. Ça a mordu deux fois — le
   champ « projet » de la modale de tâche, puis la liste des tâches qui restait
   affichée sous la vue « Mes projets ». Une seule ligne ferme la classe entière. */
[hidden] {
  display: none !important;
}

html {
  /* Fluid root size: the whole rem-based type scale follows the viewport —
     ~15px equivalent on small screens, gently up to ~17px on wide desktops.
     em (not px) bounds so a user-raised browser font-size still scales
     everything proportionally (accessibility preserved). */
  font-size: clamp(0.9375em, 0.8875em + 0.22vw, 1.0625em);
}

/* Dark mode — override the semantic tokens; surfaces/tints are all tokenised so
   the whole UI adapts. Follows the OS/browser preference. */
/* Dark theme — applied via html[data-theme="dark"]. The theme is chosen in the
   UI (System / Light / Dark) and set on <html> by JS, which resolves "System"
   from prefers-color-scheme (so there is no CSS media query here). */
:root[data-theme="dark"] {
  --ink: #e7ebf5;
  --muted: #98a3bb;
  --line: #2b3450;
  --surface: #0e1220;
  --panel: #191f30;
  --panel-2: #212a40;
  --fill: #273049;
  --panel-alt: #212a40;
  --accent: #7d97ff;
  --accent-dark: #9db2ff;
  --accent-soft: #23305a;
  --aqua: #3fded1;
  --aqua-soft: #0f3b38;
  --teal-strong: #57d9cf;
  --amber: #e0a54b;
  --amber-soft: #3c2e12;
  --red: #ef6f6a;
  --red-soft: #3d2220;
  --green: #4ecb86;
  --green-soft: #143528;
  --blue: #7d97ff;
  --blue-soft: #1b2848;
  --violet: #a996ff;
  --violet-soft: #262046;
  --coral: #ff9d8f;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Inputs/selects/textarea default to white in some browsers; force the panel. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--panel);
  color: var(--ink);
}

/* Status/save colours hardcoded for light bg — lift for dark contrast. */
:root[data-theme="dark"] .save-status.is-saved { color: #4ecb86; }
:root[data-theme="dark"] .save-status.is-error { color: #ef6f6a; }

* {
  box-sizing: border-box;
}

/* Modern, visible keyboard focus (was relying on the UA default). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 20;
  background: var(--aqua);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--panel);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* Pin the sidebar to the viewport so the profile/theme/language panel
     (margin-top:auto) always sits at the bottom of the screen — no need to
     scroll the whole page to reach it. Nav scrolls inside if it ever overflows. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo et nom du produit en colonne, la croix de fermeture du tiroir (mobile)
   restant à droite du bloc. */
.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.brand-product {
  color: var(--accent);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
}

.brand-logo {
  width: 150px;
  height: auto;
  display: block;
}

.nav-tabs {
  display: grid;
  gap: 6px;
}

.nav-tab {
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pastille d'attention d'un onglet. Elle ne dit qu'une chose : « il y a quelque
   chose ici ». Elle ne s'affiche donc que quand c'est vrai — une pastille à 0
   affichée en permanence apprend à ne plus la regarder. */
.nav-badge {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: var(--fs-xs);
  line-height: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Lien vers le Navigator en tête de barre (ex-onglet O&M) : un <a>, sans soulignement. */
a.nav-tab { text-decoration: none; }
.nav-navigator { font-weight: 700; color: var(--ink); }
.daf-moved { max-width: 640px; display: grid; gap: 12px; justify-items: start; }
/* O&M : trois compteurs d'unités, pas un nombre — leur couleur EST l'information.
   Le fond disparaît, chaque compteur porte la sienne. */
.nav-badge-daf { background: transparent; padding: 0; gap: 6px; }
.nav-badge-daf .nav-daf-count { display: inline-flex; align-items: center; gap: 3px; }
.nav-badge-daf .nav-daf-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}
.nav-badge-daf .ok .nav-daf-dot { background: var(--teal-strong); }
.nav-badge-daf .warn .nav-daf-dot { background: var(--amber); }
.nav-badge-daf .crit .nav-daf-dot { background: var(--red); }
.nav-badge-daf .ok { color: var(--muted); }
.nav-badge-daf .warn { color: var(--amber); }
.nav-badge-daf .crit { color: var(--red); font-weight: 800; }
/* Tasks : deux compteurs, même raison qu'O&M — « 11 tâches » ne dit pas s'il
   faut ouvrir l'onglet maintenant, « 8 · 3 en retard » le dit. */
.nav-badge-tasks { background: transparent; padding: 0; gap: 5px; }
.nav-badge-tasks .nav-task-count { font-variant-numeric: tabular-nums; }
.nav-badge-tasks .ontrack { color: var(--ink); }
.nav-badge-tasks .late { color: var(--red); font-weight: 800; }

.nav-tab:hover,
.nav-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar-sync {
  display: grid;
  gap: 4px;
}

.sidebar-sync-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent);
  font-weight: 800;
  padding: 11px 12px;
  text-align: left;
}

.sidebar-sync-button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sidebar-sync-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.global-search {
  position: relative;
  width: min(360px, 36vw);
}

.global-search input {
  width: 100%;
  min-height: 38px;
  padding-left: 12px;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(520px, 88vw);
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 8px;
}

.search-result {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  display: grid;
  gap: 3px;
  padding: 10px;
  text-align: left;
}

.search-result:hover {
  background: var(--accent-soft);
}

.search-result strong {
  font-size: var(--fs-sm);
}

.search-result span {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.profile-panel {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.profile-panel label {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0;
}

.profile-panel select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px;
}

.profile-panel option {
  color: var(--ink);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Lien ou bouton, même rendu : un texte cliquable, sans le cadre gris du bouton. */
.auth-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.auth-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.main {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--fs-2xl);
  line-height: 1.12;
}

.sync-info {
  margin: 0;
  padding: 0 12px;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.3;
}

/* Instantané périmé : la synchro horaire ne passe plus. */
.sync-info.stale {
  color: var(--red);
  font-weight: 700;
}

.save-status {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  white-space: nowrap;
}
.save-status.is-saving,
.save-status.is-pending {
  color: var(--muted);
}
.save-status.is-saved {
  color: var(--green);
}
.save-status.is-error {
  color: var(--red);
}

h2 {
  margin-bottom: 0;
  font-size: var(--fs-lg);
}

h3 {
  margin-bottom: 7px;
  font-size: var(--fs-md);
}

.topbar-actions,
.filter-row,
.modal-actions,
.task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.icon-button {
  min-height: 38px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0 13px;
}

.primary-button {
  color: #ffffff;
  background: var(--accent);
}

.primary-button:hover {
  background: var(--accent-dark);
}

.secondary-button {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
}

.secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.danger-button:hover {
  border-color: var(--red);
  color: var(--red);
}

.icon-button {
  width: 38px;
  padding: 0;
  background: var(--panel);
  border-color: var(--line);
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.my-tasks {
  position: relative;
  display: inline-flex;
}

.my-tasks-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: var(--fs-xs);
  line-height: 17px;
  text-align: center;
  font-weight: 600;
}

.my-tasks-badge-overdue {
  background: var(--red);
}

.my-task-overdue .my-task-date {
  color: var(--red);
  font-weight: 600;
}

.search-more {
  padding: 8px 10px;
  color: var(--muted);
  font-size: var(--fs-caption);
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.my-tasks-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(340px, 88vw);
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 6px;
}

.my-task-item {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
}

.my-task-item:hover {
  background: var(--accent-soft);
}

.my-task-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.my-task-desc {
  font-size: var(--fs-sm);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--aqua);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: 10px;
}

.metric strong {
  font-size: var(--fs-xl);
  line-height: 1;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.planning-grid {
  margin-top: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.wide-panel {
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

select,
input,
textarea {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 6px;
  padding: 9px 10px;
}

textarea {
  resize: vertical;
}

.project-table-wrap {
  overflow-x: auto;
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1280px;
  table-layout: fixed;
}

.project-table th,
.project-table td {
  padding: 13px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.project-table th {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Projects list header: solid Revalio-green band with white labels, and a
   clickable sort affordance (neutral ↕ that becomes ↑/↓ on the active column). */
#projectsTable thead th {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: none;
  font-weight: 700;
}
#projectsTable thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#projectsTable thead th.sortable:hover {
  background: var(--band-hover);
}
#projectsTable thead th.sortable::after {
  content: "↕";
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.5;
}
#projectsTable thead th.sortable[aria-sort="ascending"]::after {
  content: "↑";
  opacity: 1;
}
#projectsTable thead th.sortable[aria-sort="descending"]::after {
  content: "↓";
  opacity: 1;
}

.project-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-weight: 800;
  text-align: left;
}

.client-link {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-weight: 700;
  text-align: left;
}

.client-link:hover,
.project-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.project-table select,
.table-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.project-table th:nth-child(1),
.project-table td:nth-child(1) {
  width: 180px;
}

.project-table th:nth-child(2),
.project-table td:nth-child(2) {
  width: 90px;
}

.project-table th:nth-child(3),
.project-table td:nth-child(3) {
  width: 250px;
}

.project-table th:nth-child(4),
.project-table td:nth-child(4) {
  width: 170px;
}

.project-table th:nth-child(5),
.project-table td:nth-child(5) {
  width: 130px;
}

.project-table th:nth-child(6),
.project-table td:nth-child(6) {
  width: 150px;
}

.project-table th:nth-child(7),
.project-table td:nth-child(7) {
  width: 230px;
}

.project-table th:nth-child(8),
.project-table td:nth-child(8) {
  width: 150px;
}

.cashflow-pill {
  display: inline-grid;
  gap: 2px;
  min-width: 110px;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.15;
}

.cashflow-pill small {
  font-size: var(--fs-xs);
  font-weight: 800;
}

.cashflow-positive {
  color: var(--green);
  background: var(--aqua-soft);
}

.cashflow-negative {
  color: var(--red);
  background: var(--red-soft);
}

.cashflow-neutral {
  color: var(--muted);
  background: var(--fill);
}

/* Project profitability columns (Gross / Net margin) */
.margin-col {
  text-align: right;
  white-space: nowrap;
}

.margin-cell {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--fs-caption);
}

.margin-positive { color: var(--green); }
.margin-negative { color: var(--red); }
.margin-neutral { color: var(--muted); font-weight: 600; }

/* Booked vs expected hours (visible to everyone — no cost) */
.hours-col { text-align: right; white-space: nowrap; }
.hours-cell {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-caption);
}
.hours-cell.hours-ok { color: var(--green); }
.hours-cell.hours-over { color: var(--amber, #d97706); }
.hours-cell.hours-neutral { color: var(--muted); font-weight: 600; }
.hours-input { max-width: 96px; }

/* Cost-based profitability (real labour cost) — founders-only. The Net margin
   column stays hidden until the table gets .cost-profit-on (set only when a
   founder enables the toggle); non-founders never even receive the data. */
.cost-col { display: none; }
.project-table.cost-profit-on .cost-col { display: table-cell; }

.cost-profit-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px 12px;
  font-weight: 700;
  cursor: pointer;
}
.cost-profit-toggle input { cursor: pointer; }
.cost-profit-toggle .subtext { font-weight: 500; color: var(--muted); }

/* Estimated-hours hero ribbon: one tile per régie level (Ingénieur Projet /
   Chef de Projet / Expert), read-only for T&M (from the SO) or editable. */
.eh-input { max-width: 90px; text-align: right; padding: 3px 6px; }

.table-input {
  min-height: 38px;
}

.date-input {
  min-width: 0;
}

.table-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.contributors-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.contributors-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.person-chip {
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

/* Project tag — single-tag dropdown backed by Odoo project.project.tag_ids
   (same control family as the Priority/PM selects of the tables) */
.project-tags {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
}

.project-tags.is-saving {
  opacity: 0.55;
  pointer-events: none;
}

.tag-select {
  max-width: 140px;
  font-weight: 700;
}

/* Clients table: Description gets ALL the remaining room, the control columns
   stay compact. The table is table-layout: fixed — only the THEAD widths
   matter (a td min-width is ignored) — so every column EXCEPT Description
   gets a fixed width and Description absorbs the rest (≥425px at the table's
   min-width, more on wide screens: most project names fit on one line). */
.client-project-table { min-width: 1560px; }
.client-project-table th:nth-child(1) { width: 70px; }   /* SO */
.client-project-table th:nth-child(2) { width: 130px; }  /* Tags */
/* Explicit (not "auto"): the dashboard's generic .project-table nth-child
   widths would otherwise leak in — same specificity, so the leftover column
   would inherit ITS width instead of absorbing the remaining space. */
.client-project-table th:nth-child(3) { width: 460px; }  /* Description */
.client-project-table th:nth-child(4) { width: 85px; }   /* Status */
.client-project-table th:nth-child(5) { width: 105px; }  /* Priority */
.client-project-table th:nth-child(6) { width: 155px; }  /* PM */
.client-project-table th:nth-child(7) { width: 180px; }  /* Contributors */
.client-project-table th:nth-child(8) { width: 130px; }  /* Next milestone */
.client-project-table th:nth-child(9) { width: 120px; }  /* Deadline */
.client-project-table .date-input { max-width: 118px; }

.mini-button {
  min-height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--accent);
  background: var(--panel);
  padding: 0 8px;
  font-size: var(--fs-caption);
  font-weight: 800;
}

.priority-select {
  font-weight: 800;
  border-width: 1px;
}

.priority-select.status-high {
  border-color: var(--red);
}

.priority-select.status-medium {
  border-color: var(--blue);
}

.priority-select.status-low {
  border-color: var(--aqua);
}

.priority-select.status-sleeping {
  border-color: var(--line);
}

.subtext {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-top: 4px;
}

.status-pill,
.tag,
.priority,
.type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: var(--fs-caption);
  font-weight: 800;
  white-space: nowrap;
}

.status-medium {
  color: var(--accent);
  background: var(--accent-soft);
}

.status-low {
  color: var(--teal-strong);
  background: var(--aqua-soft);
}

.status-sleeping {
  color: var(--muted);
  background: var(--fill);
}

/* Priority cell of a completed project: no actionable priority, greyed pill */
.priority-completed {
  color: var(--muted);
  background: var(--fill);
}

.status-at-risk,
.status-high {
  color: var(--red);
  background: var(--red-soft);
}

.status-off-track,
.priority-high {
  color: var(--red);
  background: var(--red-soft);
}

.status-on-hold {
  color: var(--violet);
  background: var(--violet-soft);
}

.status-done,
.status-completed {
  color: var(--blue);
  background: var(--blue-soft);
}

.status-todo {
  color: var(--muted);
  background: var(--fill);
}

.status-progress {
  color: var(--accent);
  background: var(--accent-soft);
}

.status-review {
  color: var(--violet);
  background: var(--violet-soft);
}

.tag {
  color: var(--accent);
  background: var(--accent-soft);
}

.priority {
  color: var(--muted);
  background: var(--fill);
}

.stack-list {
  display: grid;
  gap: 10px;
}

.stack-item {
  border-left: 4px solid var(--line);
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: 6px;
}

.stack-item.risk-high {
  border-color: var(--red);
}

.stack-item.risk-medium {
  border-color: var(--amber);
}

.stack-item.risk-low {
  border-color: var(--aqua);
}

.stack-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.project-toolbar,
.client-toolbar,
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.project-toolbar label,
.client-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.project-toolbar label:first-child,
.client-toolbar label:first-child {
  flex: 0 1 380px;
}

.project-toolbar {
  flex-wrap: wrap;
}

/* Fiche projet = sous-page de Clients : Clients › <client> › <projet>.
   Les deux premiers maillons sont des liens, le dernier choisit parmi les
   projets du même client. */
.project-breadcrumb {
  gap: 8px;
}

.crumb-link {
  border: 0;
  padding: 4px 2px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.crumb-link:hover {
  text-decoration: underline;
}

.crumb-sep {
  color: var(--muted);
}

.project-breadcrumb select {
  flex: 0 1 520px;
  width: auto;
}

/* La barre Clients passe à la ligne plutôt que d'écraser le menu client ou de
   casser le libellé des cases sur trois lignes. */
.client-toolbar {
  flex-wrap: wrap;
}

.client-toolbar > label:first-child {
  flex-basis: 280px;
}

.client-toolbar label.checkbox-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Flèches ‹ › de la vue Clients : passer au client suivant sans dérouler la liste. */
.client-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.client-stepper .mini-button {
  min-width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
}

.client-stepper .mini-button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* SO total (HTVA) of the picked project, far right of the toolbar. */
.toolbar-so-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.toolbar-so-total-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.toolbar-so-total strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.project-toolbar select,
.client-toolbar select {
  width: 100%;
  min-width: 0;
}

.board-toolbar {
  justify-content: space-between;
}

.client-main-stack {
  display: grid;
  gap: 18px;
}

.client-summary {
  display: grid;
  gap: 16px;
}

.client-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* Le pont vers la Market DB : sur la ligne du titre, en liens gris discrets libellés par
   la ville, parce qu'il sert à partir ailleurs et non à être lu. Plusieurs sites sont
   listés côte à côte (Electrabel en a cinq) plutôt que résumés en un seul lien qui
   mentirait ; au-delà de trois, « +N » ouvre le reste. */
.client-sites {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.client-sites-pin { font-size: .9em; }
.client-sites-sep { opacity: .5; }

.client-sites a,
.client-sites-more summary {
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.client-sites a:hover,
.client-sites-more summary:hover {
  color: var(--accent);
  text-decoration: underline;
}

.client-sites-more { position: relative; }
.client-sites-more summary { list-style: none; }
.client-sites-more summary::-webkit-details-marker { display: none; }

.client-sites-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 180px;
  white-space: nowrap;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 30, 50, .12);
}

.client-summary-head h2 {
  font-size: var(--fs-xl);
  line-height: 1.12;
}

.client-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-note-box {
  display: grid;
  gap: 8px;
}

.client-note-box label {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.client-note-textarea {
  min-height: 190px;
  width: 100%;
  line-height: 1.45;
}

.client-note-textarea:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-soft);
}

.rich-notes-wrap {
  display: grid;
  gap: 6px;
}

.rich-notes-toolbar {
  display: flex;
  gap: 6px;
}

.rich-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--ink);
}

.rich-btn:hover {
  border-color: var(--accent);
}

.rich-notes {
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  color: var(--ink);
  background: var(--panel);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-y: auto;
}

.rich-notes:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-soft);
}

.rich-notes ul,
.rich-notes ol {
  margin: 4px 0;
  padding-left: 1.5em;
}

.rich-notes ul { list-style: disc; }
.rich-notes ul ul { list-style: circle; }
.rich-notes ul ul ul { list-style: square; }

.timesheet-header { align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.timesheet-header .ts-person-picker { margin: 0; }
.timesheet-header .filter-row { margin-left: auto; }
.timesheet-week-label { font-weight: 700; min-width: 190px; text-align: center; }
.timesheet-root { display: grid; gap: 12px; }
.ts-banner { margin: 0; padding: 8px 12px; background: var(--accent-soft); border-radius: 6px; font-size: var(--fs-sm); }
.ts-scroll { overflow-x: auto; }
.timesheet-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.timesheet-table th,
.timesheet-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.timesheet-table thead th { background: var(--panel-alt, #f4f6f8); font-size: var(--fs-caption); }
.timesheet-table .ts-rowlabel { text-align: left; min-width: 260px; font-size: var(--fs-sm); }
.timesheet-table tfoot th,
.timesheet-table .ts-rowtotal { font-weight: 700; background: var(--panel-alt, #f4f6f8); }
/* Cumul all-time (Total projet) : visuellement en retrait du total hebdo. */
.timesheet-table th.ts-cumul,
.timesheet-table td.ts-cumul { color: var(--muted); font-weight: 600; border-left: 2px solid var(--line); white-space: nowrap; }
.ts-cell { width: 62px; text-align: center; border: 1px solid transparent; background: transparent; padding: 4px; border-radius: 4px; }
.ts-cell:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.ts-cell.ts-locked { color: var(--muted); background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 4px, var(--fill) 4px, var(--fill) 8px); cursor: not-allowed; }
.ts-addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ts-addrow select { min-width: 220px; }
.ts-addhint { color: var(--amber); }
.ts-group-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ts-person { margin-bottom: 18px; }
.ts-group-tabs { margin: 0 0 4px; }
/* Vue Projet / Client semaine par semaine (refonte du 26/10/2026). */
:root { --ts-nb: #f0a04b; --ts-nb-ink: #a15c00; --ts-heat-ink: #fff; }
:root[data-theme="dark"] { --ts-nb: #e0a54b; --ts-nb-ink: #e8b468; --ts-heat-ink: #0e1220; }
.ts-pv-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.ts-pv-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 500; padding: 6px 12px; border-radius: 7px; cursor: pointer; min-height: 32px; }
.ts-pv-seg button:hover { color: var(--ink); }
.ts-pv-seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(24, 33, 58, 0.14); }
.ts-pv-bar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 10px 0 16px; }
.ts-pv-field { display: flex; flex-direction: column; gap: 6px; }
.ts-pv-field > span { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.ts-pv-field select { min-height: 40px; border-radius: 10px; }
.ts-pv-project { flex: 1 1 320px; min-width: 0; }
.ts-pv-project select { width: 100%; font-weight: 600; }
.ts-pv-range { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; font-size: var(--fs-sm); }
.ts-pv-vs { color: var(--muted); font-size: var(--fs-caption); }
.ts-pv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.ts-pv-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ts-pv-cardhead h3 { margin: 0; font-size: var(--fs-md); }
.ts-pv-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--muted); }
.ts-pv-hint { margin-left: 10px; }
.ts-pv-key { width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; }
.ts-pv-key.b { background: var(--accent); }
.ts-pv-key.nb { background: var(--ts-nb); }
.ts-pv-key.ghost { border: 1.5px dashed var(--muted); box-sizing: border-box; }
.ts-pv-foot { margin: 0; padding: 10px 18px 14px; font-size: var(--fs-caption); color: var(--muted); }
.ts-pv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); font-variant-numeric: tabular-nums; min-width: 900px; }
.ts-pv-table th, .ts-pv-table td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ts-pv-table thead th { height: 44px; background: var(--panel-2); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ts-pv-table th.ts-pv-col small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.ts-pv-table .ts-pv-label { text-align: left; white-space: normal; min-width: 280px; padding-left: 16px; }
.ts-pv-table .ts-pv-sep { border-left: 1px solid var(--line); }
.ts-pv-table tfoot td { background: var(--panel-2); font-weight: 700; height: 44px; border-bottom: 0; }
.ts-pv-table tr.ts-pv-group td { font-weight: 600; }
.ts-pv-table tr.ts-pv-child td { background: var(--panel-alt); color: var(--muted); font-size: var(--fs-sm); height: 34px; }
.ts-pv-table .ts-pv-indent { padding-left: 50px; }
.ts-pv-table td.ts-pv-zero { color: var(--line); }
.ts-pv-strong { font-weight: 700; color: var(--ink); }
.ts-pv-muted { color: var(--muted); }
.ts-pv-b { color: var(--accent-dark); }
.ts-pv-nb { color: var(--ts-nb-ink); }
.ts-pv-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-pv-count { font-size: var(--fs-caption); color: var(--muted); font-weight: 500; }
.ts-pv-sub { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; font-weight: 400; }
.ts-pv-toggle { width: 26px; height: 26px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--muted); cursor: pointer; padding: 0; flex: none; }
.ts-pv-toggle:hover { color: var(--ink); background: var(--accent-soft); }
.ts-pv-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.ts-pv-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.ts-pv-dot.nb { background: var(--ts-nb); }
.ts-pv-nbpill { font-size: var(--fs-xs); font-weight: 600; color: var(--ts-nb-ink); background: var(--amber-soft); padding: 1px 8px; border-radius: 999px; }
.ts-pv-link { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); }
.ts-pv-link:hover, .ts-pv-link:focus-visible { color: var(--accent); text-decoration: underline; }
.ts-pv-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 44px; }
.ts-pv-split { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--panel-2); }
.ts-pv-split .b, .ts-pv-stack .b { background: var(--accent); }
.ts-pv-split .nb, .ts-pv-stack .nb { background: var(--ts-nb); }
.ts-pv-pct { display: inline-flex; align-items: center; gap: 8px; }
.ts-pv-pctbar { width: 52px; height: 6px; border-radius: 3px; background: var(--amber-soft); overflow: hidden; }
.ts-pv-pctbar span { display: block; height: 100%; background: var(--accent); }
.ts-pv-delta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; background: var(--panel-2); color: var(--muted); }
.ts-pv-delta.up { background: var(--green-soft); color: var(--green); }
.ts-pv-delta.down { background: var(--red-soft); color: var(--red); }
.ts-pv-delta.new { background: var(--accent-soft); color: var(--accent-dark); }
.ts-pv-table td.ts-pv-heat { padding: 3px; }
.ts-pv-hc { display: grid; place-items: center; height: 34px; min-width: 52px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ts-pv-hc.l0 { background: var(--panel-alt); color: var(--muted); font-weight: 400; }
.ts-pv-hc.l1 { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ts-pv-hc.l2 { background: color-mix(in srgb, var(--accent) 24%, var(--panel)); }
.ts-pv-hc.l3 { background: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.ts-pv-hc.l4 { background: color-mix(in srgb, var(--accent) 72%, var(--panel)); color: var(--ts-heat-ink); }
.ts-pv-hc.l5 { background: var(--accent); color: var(--ts-heat-ink); }
.ts-pv-swatch { width: 18px; min-width: 18px; height: 12px; border-radius: 3px; }
.ts-pv-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ts-pv-title h3 { margin: 0; font-size: var(--fs-lg); }
.ts-pv-client { font-size: var(--fs-sm); color: var(--muted); }
.ts-pv-back { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.ts-pv-back:hover { border-color: var(--accent); }
.ts-pv-fiche { margin-left: auto; }
.ts-pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ts-pv-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-pv-kpi span { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ts-pv-kpi strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ts-pv-kpi strong small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.ts-pv-kpi em { font-style: normal; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.ts-pv-kpi em.up { color: var(--green); }
.ts-pv-kpi em.down { color: var(--red); }
.ts-pv-kpi em.warn { color: var(--ts-nb-ink); }
.ts-pv-chart { display: grid; gap: 14px; align-items: end; height: 170px; padding: 16px 18px 0; border-bottom: 1px solid var(--line); }
.ts-pv-barcol { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ts-pv-ghost { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 66%; border: 1.5px dashed var(--muted); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; opacity: 0.7; }
.ts-pv-barval { position: relative; font-size: var(--fs-caption); font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.ts-pv-stack { position: relative; width: 44%; max-width: 56px; display: flex; flex-direction: column; border-radius: 6px 6px 0 0; overflow: hidden; }
.ts-pv-axis { display: grid; gap: 14px; padding: 8px 18px 14px; font-size: var(--fs-caption); color: var(--muted); text-align: center; }
.ts-pv-axis strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .ts-pv-range { margin-left: 0; text-align: left; }
  .ts-pv-chart, .ts-pv-axis { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .ts-pv-barval { font-size: 10px; }
}
.ts-person-title { margin: 0 0 6px; font-size: var(--fs-md); }
/* PM : réallouer les heures d'une ligne vers une autre tâche du projet (27/10/2026). */
.ts-move-btn { border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: 6px; padding: 0 7px; margin-left: 6px; cursor: pointer; font-size: var(--fs-sm); line-height: 22px; }
.ts-move-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.ts-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); }
.ts-move select { min-width: 180px; margin-left: 4px; }
.ts-pm-hint { margin: 0 0 8px; }
.ts-you { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.ts-read { color: var(--ink); }
.ts-total-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ts-total-table { min-width: 0; }
.ts-person-picker { margin-bottom: 10px; }
.ts-person-picker label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.ts-person-picker select { min-width: 220px; margin-left: 4px; }
.timesheet-table th.ts-weekend, .timesheet-table td.ts-weekend { background: var(--panel-2); color: var(--muted); }
/* Jours fériés belges : même estompage que le week-end + étiquette dans l'en-tête. */
.timesheet-table th.ts-holiday, .timesheet-table td.ts-holiday { background: var(--panel-2); color: var(--muted); }
.ts-holiday-tag { display: block; font-size: 9.5px; font-weight: 400; color: var(--muted); text-transform: none; white-space: nowrap; }
.timesheet-table th.ts-today, .timesheet-table td.ts-today { background: var(--accent-soft); }
.timesheet-table td.ts-today { box-shadow: inset 0 0 0 1px var(--accent); }
/* Congés (onglet Congés → /api/leave) : jours teintés + ligne dédiée + marqueur équipe. */
.timesheet-table td.ts-leave { background: rgba(47, 207, 195, 0.14); }
.timesheet-table tr.ts-leave-row td { color: var(--teal-strong); font-weight: 700; text-align: center; }
.timesheet-table tbody.ts-internal-head td { border-top: 2px solid var(--line); background: var(--panel-alt, #f4f6f8); }
.ts-internal-toggle { all: unset; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.ts-internal-toggle:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 2px; }
.ts-audit { margin-top: 18px; }
.ts-audit .ts-scroll { margin-top: 8px; }
.ts-audit-table td { text-align: left; white-space: normal; font-size: var(--fs-sm); }
.ts-audit-table th { text-align: left; }
.ts-audit-table td:first-child { white-space: nowrap; }
.ts-audit-delete td:nth-child(3) { color: var(--danger, #b42318); font-weight: 600; }
.timesheet-table tr.ts-leave-row td.ts-leave-pending { opacity: 0.6; font-style: italic; }
.timesheet-table tr.ts-leave-row .ts-rowlabel, .timesheet-table tr.ts-leave-row .ts-rowtotal { text-align: left; }
.ts-leave-mark { margin-left: 3px; font-size: 9px; color: var(--teal-strong); vertical-align: middle; }
.ts-leave-mark.pending { opacity: 0.45; }
.ts-leave-word { font-size: 10.5px; font-weight: 700; color: var(--teal-strong); white-space: nowrap; }
.ts-leave-word.pending { opacity: 0.6; font-style: italic; font-weight: 600; }
.timesheet-table tr.ts-leave-row td .ts-leave-word { font-size: 11px; }
.ts-birthday-tag { display: block; font-size: 9.5px; font-weight: 600; color: var(--amber); text-transform: none; white-space: nowrap; }

/* (The historical 8-column width plan for .client-project-table lived here;
   it predated the Tags column, so every width was shifted one column off —
   the canonical plan now lives next to the other .client-project-table rules
   further up, near the .tag-select styles.) */

.project-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 18px;
  align-items: start;
}

.project-dashboard-stack {
  display: grid;
  gap: 18px;
}

.project-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.project-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.project-hero-head > div {
  min-width: 0;
}

.project-hero h2 {
  font-size: var(--fs-xl);
  line-height: 1.12;
  margin-bottom: 7px;
}

/* Editable hero title (project description -> Odoo rename) */
.project-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 7px;
}

.project-title-row h2 {
  margin-bottom: 0;
}

.desc-edit-btn {
  flex: 0 0 auto;
  opacity: 0.55;
}

.desc-edit-btn:hover {
  opacity: 1;
}

.desc-edit-input {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.12;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 640px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Project hero ribbons: 4 tiles per row, stacked with the same gap */
.info-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Five money tiles. The 5th (net margin) is only rendered for a viewer with
   canSeeLabourCost(); everyone else gets .info-grid-4 and four columns. */
.info-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Five € amounts side by side stop fitting before the sidebar collapses. */
@media (max-width: 1240px) {
  .info-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero-ribbon + .hero-ribbon {
  margin-top: 12px;
}

.info-tile .project-tags {
  margin-top: 0;
}

.info-tile {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  min-height: 82px;
}

.info-tile span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-bottom: 7px;
}

.info-tile strong {
  font-size: var(--fs-lg);
}

/* ----- Project hero (title row, PM block, tiles, hours line, card) -------- */

.project-hero-ident {
  min-width: 0;
  flex: 1 1 260px;
}

.project-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.project-hero-title .project-title-row {
  margin-bottom: 0;
}

.project-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Étape CRM de l'offre (vue projet, SO non confirmé) et son formulaire « Perdu ». */
.hero-opp-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.opp-stage-select {
  font-weight: 800;
  border-width: 1px;
}

.hero-opp-lost {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--panel-2);
}

.hero-opp-lost-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* PM: avatar + name + function. Read-only here; clicking opens the contract
   card below and focuses the one PM select. */
.hero-pm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  max-width: 260px;
}

.hero-pm:hover,
.hero-pm:focus-visible {
  border-color: var(--line);
  background: var(--panel-2);
}

.hero-pm-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-pm-text strong {
  font-size: var(--fs-sm);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-pm-text .subtext {
  font-size: var(--fs-caption);
}

.hero-pm-empty .person-avatar {
  background: var(--line);
  color: var(--muted);
}

/* One line of numbers: label, amount, and for the margins a rate under it.
   No sub-text — the label says what the figure is. */
.hero-tile strong {
  display: block;
}

.hero-tile-pct {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.hero-tile-positive strong {
  color: var(--green);
}

.hero-tile-negative strong,
.hero-tile-negative .hero-tile-pct {
  color: var(--red);
}

/* Hours read as a sentence, not a grid: they are not money. */
.hero-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.hero-hours-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.hero-hours-text strong {
  color: var(--ink);
}

.hero-hour-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-hour-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--fs-caption);
  color: var(--muted);
  white-space: nowrap;
}

.hero-hour-pill strong {
  color: var(--ink);
}

/* Collapsible contract card: what is consulted, not watched. */
.hero-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.hero-details > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--muted);
  list-style: none;
}

.hero-details > summary::-webkit-details-marker {
  display: none;
}

.hero-details > summary::before {
  content: "▸ ";
}

.hero-details[open] > summary::before {
  content: "▾ ";
}

.hero-details-body {
  margin-top: 12px;
  display: grid;
  gap: 14px;
}

.hero-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hero-detail span:first-child {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-bottom: 5px;
}

.hero-detail-block h4 {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Editable expected-closing date inside a hero tile (offers only). */
.tile-date-input {
  width: 100%;
  font-size: var(--fs-lg);
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
}
.tile-date-input:focus {
  outline: none;
  border-color: var(--accent, #2f6df6);
}
.tile-date-input:disabled {
  opacity: 0.6;
}

.project-description-panel {
  min-width: 0;
}

.cashflow-panel {
  min-width: 0;
  padding-bottom: 16px;
}






























.revenue-dot {
  fill: var(--accent);
}

.cost-dot {
  fill: var(--red);
}

.project-tasks-panel {
  margin-top: 18px;
}

.project-task-table-wrap {
  overflow-x: auto;
}

.project-task-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.project-task-table th,
.project-task-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.project-task-table th {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0;
}

.finance-mask {
  background: var(--panel-2);
  color: var(--muted);
}

.finance-mask strong {
  color: var(--muted);
}

.invoices-panel {
  margin-top: 18px;
}

.invoices-table-wrap {
  overflow-x: auto;
}

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

.invoices-table th,
.invoices-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: var(--fs-body);
}

.invoices-table th {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.invoices-table .invoice-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoices-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.invoices-net {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.invoices-net span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
}

.invoices-net strong {
  font-size: var(--fs-lg);
}

.invoices-net-positive strong {
  color: var(--green);
}

.invoices-net-negative strong {
  color: var(--red);
}

/* Autorisation de paiement des factures fournisseurs (payment-approvals.js) */
.invoice-expense {
  background: rgba(127, 127, 127, 0.14);
  color: var(--muted);
}
.invoices-table .invoice-payment {
  white-space: nowrap;
}
.pay-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-right: 8px;
  vertical-align: middle;
}
.pay-badge-paid { background: var(--green-soft); color: var(--green); }
.pay-badge-partial { background: var(--amber-soft); color: var(--amber); }
.pay-badge-progress { background: var(--blue-soft); color: var(--blue); }
.pay-badge-open { background: rgba(127, 127, 127, 0.14); color: var(--muted); }
.pay-badge-muted { background: rgba(127, 127, 127, 0.10); color: var(--muted); }
.pay-auth-switch {
  font-size: var(--fs-xs);
  vertical-align: middle;
}
/* La piste partagée lit var(--border), qui n'existe pas : éteint, l'interrupteur
   serait invisible. Ici, la piste éteinte prend la couleur des filets du tableau. */
.pay-auth-switch .switch-track {
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.pay-auth-switch input:checked + .switch-track {
  box-shadow: none;
}
.pay-auth-switch.is-readonly {
  cursor: default;
  opacity: .7;
}
.pay-note-pending {
  color: var(--amber);
  cursor: help;
  margin-left: 4px;
}
/* Commentaires des responsables sur une demande (16/10/2026). La cellule de
   paiement du bloc Invoices est en nowrap : le bloc commentaire repasse à la ligne. */
.pay-comments {
  white-space: normal;
  margin-top: 4px;
  font-size: var(--fs-xs);
  max-width: 420px;
}
.pay-comment-last { margin: 2px 0; }
.pay-comment-reason {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-weight: 600;
}
.pay-comment-reason.is-contest { background: var(--red-soft); color: var(--red); }
.pay-question-chip { background: var(--amber-soft); color: var(--amber); margin-right: 6px; }
.pay-comment-box > summary { cursor: pointer; color: var(--accent); width: max-content; }
.pay-comment-history { margin: 4px 0; padding-left: 16px; color: var(--muted); }
.pay-comment-history li { margin: 2px 0; }
.pay-comment-form { display: grid; gap: 4px; margin-top: 4px; }
.pay-comment-form select,
.pay-comment-form input,
.pay-comment-form textarea { font: inherit; width: 100%; box-sizing: border-box; }
.pay-comment-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-row .ap-comments { grid-column: 1 / -1; }
.ap-row .ap-comments .pay-comments { max-width: none; margin-top: 0; }
.ap-row.ap-question { box-shadow: inset 3px 0 0 var(--amber); }
.invoices-net-authorise strong {
  color: var(--amber);
}
.invoices-table tr.invoice-row-focus td {
  background: var(--amber-soft);
  transition: background .4s;
}
.task-chip-pay {
  text-decoration: none;
}

/* ---- Project dashboard: Timesheets pivot ------------------------------- */

.timesheets-panel {
  margin-top: 18px;
}

.timesheets-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pts-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
}

.pts-control select {
  text-transform: none;
  font-size: var(--fs-body);
}

.timesheets-truncated {
  margin: 0 0 10px;
}
/* Feuille de prestations client (vue projet › Timesheets) : une ligne d'outils
   sous l'en-tête, séparée du pivot par un filet — c'est un export vers
   l'extérieur, pas un réglage d'affichage. */
.pts-export-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--line);
}
.pts-export-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.pts-export-row input[type="date"] {
  font-size: var(--fs-body);
  text-transform: none;
}


.timesheets-table-wrap {
  overflow-x: auto;
}

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

.timesheets-table th,
.timesheets-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: var(--fs-body);
}

.timesheets-table th {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  white-space: nowrap;
}

.timesheets-table .ts-hours-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A cell with hours behind it is a drill target; an empty one is inert. */
.ts-pivot-cell {
  cursor: pointer;
}

.ts-pivot-cell:hover,
.ts-pivot-cell:focus-visible {
  background: var(--accent-soft);
}

.ts-pivot-cell-active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.timesheets-table tfoot .ts-total-row td {
  background: var(--panel-alt);
  border-bottom: none;
}

/* Validated or already invoiced in Odoo — locked, shown but visually settled. */
.timesheets-table .ts-locked-row td {
  opacity: 0.75;
}

.timesheets-drill {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.timesheets-drill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ts-billable,
.ts-nonbillable {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.ts-billable {
  background: var(--green-soft);
  color: var(--green);
}

.ts-nonbillable {
  background: rgba(127, 127, 127, 0.14);
  color: var(--muted);
}

@media (max-width: 720px) {
  .timesheets-drill th:last-child,
  .timesheets-drill td:last-child {
    display: none;   /* description is the first thing to drop on a phone */
  }
}

.invoice-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-right: 6px;
}

.invoice-supplier {
  background: var(--amber-soft);
  color: var(--amber);
}

.invoice-customer {
  background: var(--blue-soft);
  color: var(--blue);
}

/* Purchase-order rows: committed money, not accounting — muted so they read
   as context next to the real invoices, never as part of the Net HT. */
.invoice-po {
  background: rgba(124, 58, 237, 0.12);
  color: var(--violet);
}

.invoice-row-po td {
  color: var(--muted);
}

.invoice-po-open {
  color: var(--amber);
  font-weight: 600;
}

.invoices-net-po strong {
  color: var(--amber);
}








.board-switches {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- The tick: complete a task in one click, from the collapsed card --- */
/* La coche porte TOUJOURS son ✓, en gris très clair au repos : une case vide
   ne dit pas ce qu'elle fait, et le seul indice était une infobulle — donc rien
   au doigt. Au survol, le ✓ et la bordure passent en vert : le geste s'annonce
   avant d'être fait. */
.task-tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  /* ✓ vert dès le repos : c'est l'action que la coche déclenche. La bordure
     reste grise, sinon la case se lit comme déjà cochée. */
  color: var(--teal-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.task-tick:hover {
  border-color: var(--teal-strong);
  background: var(--aqua-soft);
  color: var(--teal-strong);
}

.task-tick-done {
  color: var(--band-ink);
}

.task-tick-done:hover {
  color: var(--band-ink);
  background: var(--teal-strong);
}

.task-tick-done {
  background: var(--teal-strong);
  border-color: var(--teal-strong);
}

.task-tick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.task-late {
  color: var(--red);
  font-weight: 600;
}

.task-age {
  color: var(--amber);
}

.task-chip {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.task-chip-crm {
  background: var(--violet-soft);
  color: var(--violet);
}

/* ---- "Mon travail": first block of the Dashboard, every role ---------- */
.mywork-panel {
  margin-bottom: 16px;
}

.mywork-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mywork-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--fs-xs);
  text-align: center;
  vertical-align: middle;
}

.mywork-count-late {
  background: var(--red-soft);
  color: var(--red);
}

.mywork-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.mywork-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}

.mywork-row:last-child {
  border-bottom: none;
}

.mywork-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.mywork-title strong {
  font-size: var(--fs-body);
  font-weight: 600;
}

.mywork-title:hover strong {
  color: var(--accent);
}

.mywork-date {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mywork-row-late .mywork-date {
  color: var(--red);
}

.mywork-rest {
  padding-top: 8px;
}

.task-card {
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.task-card:hover {
  border-color: var(--line);
}

.task-card.dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

.task-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-actions button {
  min-height: 32px;
  padding: 0 9px;
  font-size: var(--fs-caption);
}

.task-disclosure {
  display: grid;
  gap: 10px;
}
.task-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.task-summary::-webkit-details-marker {
  display: none;
}
.task-summary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: var(--fs-caption);
  transition: transform 0.15s ease;
}
.task-disclosure[open] .task-summary::before {
  transform: rotate(90deg);
}
.task-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.task-summary-main strong {
  font-size: var(--fs-body);
}
.task-body {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.task-field {
  display: grid;
  gap: 2px;
}
.task-card.task-blocked {
  border-color: var(--red);
  background: var(--red-soft);
}

/* Overdue (due date passed, not completed) wins over the blocked tint. */
.task-card.task-overdue {
  border-color: var(--red);
  background: var(--red-soft);
}

.task-deadline-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--panel);
  color: var(--ink);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.heatmap {
  overflow-x: auto;
}

.heatmap table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.heatmap th,
.heatmap td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.heat-cell {
  border-radius: 6px;
  padding: 9px;
  min-width: 96px;
}

.heat-ok {
  background: var(--aqua-soft);
  color: var(--teal-strong);
}

.heat-warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.heat-over {
  background: var(--red-soft);
  color: var(--red);
}

.heat-empty {
  background: var(--fill);
  color: var(--muted);
}

.gantt-chart {
  display: grid;
  gap: 16px;
}

.timeline-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.planning-mode-switch {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
}

.planning-mode-switch button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0 13px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.planning-mode-switch button:last-child {
  border-right: 0;
}

.planning-mode-switch button.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.timeline-legend i.load-ok {
  background: var(--aqua-soft);
  border-color: var(--aqua);
}

.timeline-legend i.load-warn {
  background: var(--amber-soft);
  border-color: var(--amber);
}

.timeline-legend i.load-over {
  background: var(--red-soft);
  border-color: var(--red);
}

.timeline-legend i.load-active {
  background: var(--blue-soft);
  border-color: var(--blue);
}

.planning-timeline-scroll {
  display: grid;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.timeline-section {
  min-width: 1180px;
}

.timeline-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}

.timeline-title h3 {
  margin: 0;
  font-size: var(--fs-md);
}

.timeline-title span {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.timeline-grid,
.timeline-row {
  display: grid;
  grid-template-columns: 230px repeat(var(--week-count), minmax(126px, 1fr));
}

.timeline-grid {
  position: sticky;
  top: 0;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: var(--panel-2);
}

.timeline-row {
  min-height: 78px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.timeline-label,
.timeline-week-header,
.timeline-cell {
  padding: 10px;
}

.timeline-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}

.timeline-corner {
  font-weight: 800;
  color: var(--muted);
}

.timeline-label strong,
.timeline-label span,
.timeline-week-header strong,
.timeline-week-header span {
  display: block;
}

.timeline-label span,
.timeline-week-header span {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.timeline-week-header {
  border-right: 1px solid var(--line);
  background: var(--panel-2);
}

.timeline-week-header strong {
  font-size: var(--fs-body);
}

.timeline-cell {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 78px;
  border-right: 1px solid var(--line);
}

.timeline-cell strong {
  font-size: var(--fs-sm);
}

.timeline-cell-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.timeline-cell-details span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.timeline-cell.load-empty {
  background: var(--panel);
}

.timeline-cell.load-ok {
  background: var(--aqua-soft);
}

.timeline-cell.load-warn {
  background: var(--amber-soft);
}

.timeline-cell.load-over {
  background: var(--red-soft);
}

.timeline-cell.load-active {
  background: var(--blue-soft);
}

.capacity-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 860px;
}

.capacity-chip {
  border-radius: 6px;
  padding: 10px 12px;
}

.capacity-chip strong,
.capacity-chip span {
  display: block;
}

.capacity-chip span {
  margin-top: 3px;
  font-size: var(--fs-caption);
}

.gantt-grid,
.gantt-row {
  display: grid;
  grid-template-columns: 210px repeat(var(--week-count), minmax(118px, 1fr));
  min-width: 960px;
}

.gantt-grid {
  position: sticky;
  top: 0;
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: var(--panel-2);
}

.gantt-row {
  position: relative;
  min-height: 66px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.gantt-label,
.gantt-week-header,
.gantt-cell {
  padding: 10px;
}

.gantt-label {
  grid-column: 1;
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}

.gantt-corner {
  font-weight: 800;
  color: var(--muted);
}

.gantt-label strong,
.gantt-label span {
  display: block;
}

.gantt-label span {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.gantt-week-header {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  border-right: 1px solid var(--line);
}

.gantt-cell {
  min-height: 66px;
  border-right: 1px solid var(--line);
}

.gantt-cell span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.gantt-bar {
  z-index: 1;
  align-self: center;
  min-height: 38px;
  margin: 9px 7px;
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 10px 20px rgba(20, 82, 68, 0.12);
}

.gantt-bar strong,
.gantt-bar span {
  white-space: nowrap;
}

.gantt-bar span {
  font-size: var(--fs-caption);
}

.gantt-firm {
  background: var(--accent);
  color: #ffffff;
}

.gantt-probable {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber);
}

.gantt-scenario {
  background: var(--violet-soft);
  color: var(--violet);
  border: 1px solid var(--violet);
}

.compact-form {
  display: grid;
  gap: 10px;
}

.allocation-list {
  display: grid;
  gap: 8px;
}

.allocation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 102px auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  background: var(--panel);
}

.allocation-row strong,
.allocation-row span {
  display: block;
}

.allocation-row span {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.allocation-row input,
.allocation-row select {
  width: 100%;
  min-width: 0;
}

.compact-form label,
#taskForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.compact-form button {
  margin-top: 4px;
}

.task-modal {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  width: min(760px, calc(100vw - 32px));
  box-shadow: var(--shadow);
  /* Un <dialog> hérite du blanc du navigateur, pas du thème : en sombre, la
     fenêtre de tâche sortait blanche avec des champs noirs dedans. */
  background: var(--panel);
  color: var(--ink);
}

.task-modal::backdrop {
  background: rgba(10, 25, 21, 0.42);
}

#taskForm,
#contributorsForm {
  padding: 18px;
  display: grid;
  /* minmax(0, 1fr) et non auto : sans ce plafond, un <select> hors grille (le
     projet) prend la largeur de son option la plus longue et la fenêtre défile
     à l'horizontale (vu en prod le 25/09/2026). */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#taskForm select,
#taskForm input,
#taskForm textarea {
  min-width: 0;
  max-width: 100%;
}

/* Les raccourcis de date allongent la case « Échéance » : sa voisine « Pour »
   ne doit pas s'étirer pour la suivre. */
#taskForm .form-grid { align-items: start; }




.contributors-modal {
  width: min(560px, calc(100vw - 32px));
}

.contributors-options {
  display: grid;
  gap: 8px;
  max-height: min(520px, 62vh);
  overflow: auto;
}

.contributor-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.contributor-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.contributor-option strong,
.contributor-option small {
  display: block;
}

.contributor-option small {
  color: var(--muted);
  margin-top: 2px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Confirm dialog (no <form> wrapper, so it needs its own padding) */
.confirm-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 20px 22px;
  background: var(--panel);
  color: var(--ink);
}

.confirm-message {
  margin: 12px 0 20px;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-line; /* multi-line confirm messages (e.g. cost model import preview) */
}

/* Historique d'un champ de notes : lien discret sous l'éditeur, liste de versions */
.notes-history-link {
  justify-self: end;
  text-decoration: none;
  color: var(--muted);
}

.notes-history-link:hover {
  text-decoration: underline;
  color: var(--accent);
}

.notes-history-modal {
  width: min(720px, calc(100vw - 32px));
  padding: 20px 22px;
  background: var(--panel);
  color: var(--ink);
}

.notes-history-list {
  display: grid;
  gap: 8px;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  margin: 12px 0 16px;
}

.notes-history-item summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.notes-history-item .notes-history-text {
  min-height: 0;
  margin: 6px 0 8px;
}

/* Toasts — bottom-right stack, non-blocking */
.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(10, 25, 21, 0.22);
  animation: toast-in 0.18s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-msg { flex: 1; }

.toast-success { background: #10714a; }
.toast-error { background: #a12e26; }
.toast-warning { background: #8a5a12; }

.toast-action {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.toast-action:hover { background: rgba(255, 255, 255, 0.15); }

.toast-close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.toast-close:hover { color: #ffffff; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.empty-state {
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

/* Planning - assignments by person */
.planning-assignments-panel {
  margin-bottom: 18px;
}

.person-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.person-picker select {
  min-width: 230px;
}

/* The 5 lifecycle checkboxes sit to the right of the person picker, and drop to
   their own full-width line rather than stacking one per row when it gets tight. */
.planning-assignments-panel .panel-header {
  flex-wrap: wrap;
}

.planning-cat-filters {
  margin-left: auto;
  justify-content: flex-end;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.person-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: var(--fs-body);
}

.assign-rows {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.assign-client {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.assign-client:last-child {
  border-bottom: 0;
}

/* Client row = the outer level (it keeps the .assign-project-row grey); its SO
   rows sit one indent below it, on the lighter panel background. */
.assign-client-projects {
  padding-left: 16px;
}

.assign-client-projects .assign-project-row {
  background: var(--panel);
}

.assign-client[open] > summary.assign-client-row {
  border-bottom: 1px solid var(--line);
}

.assign-client[open] > summary > .assign-caret {
  transform: rotate(90deg);
}

.assign-client-row .assign-project-name .ap-client {
  font-size: var(--fs-body);
}

.assign-project {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.assign-project:last-child {
  border-bottom: 0;
}

.assign-project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--panel-2);
  list-style: none;
}

summary.assign-project-row {
  cursor: pointer;
}

summary.assign-project-row::-webkit-details-marker {
  display: none;
}

summary.assign-project-row::marker {
  content: "";
}

.assign-project[open] > summary.assign-project-row {
  border-bottom: 1px solid var(--line);
}

.assign-caret {
  flex: none;
  width: 12px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  transition: transform 0.15s ease;
}

.assign-project[open] > summary > .assign-caret {
  transform: rotate(90deg);
}

.assign-project-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-sm);
}

.assign-project-name .ap-client {
  flex: none;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.assign-project-name .ap-so {
  flex: none;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.assign-project-name .ap-desc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-project-name .ap-count {
  flex: none;
  color: var(--muted);
  white-space: nowrap;
}

.assign-project-name .ap-sep {
  flex: none;
  color: var(--line);
}

.assign-cell {
  flex: none;
  font-size: var(--fs-caption);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-cell--role {
  width: 112px;
}

.assign-cell--state {
  width: 96px;
}

.assign-cell--deadline {
  width: 58px;
  text-align: right;
}

.assign-attrs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.assign-meta {
  font-size: var(--fs-caption);
  color: var(--muted);
  white-space: nowrap;
}

.assign-client {
  font-weight: 600;
  color: var(--ink);
}

.assign-tasks {
  display: grid;
}

.assign-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px 8px 24px;
  border-top: 1px solid var(--line);
}

.assign-task-title {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  flex: 1 1 240px;
  min-width: 0;
  text-align: left;
}

.assign-task-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.assign-task-blocked {
  background: var(--red-soft);
}

.assign-task-blocked .assign-task-title {
  color: var(--red);
  font-weight: 700;
}

.assign-task-empty {
  padding: 8px 12px 8px 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--muted);
}

.role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.role-pm {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.role-contributor {
  color: var(--teal-strong);
  background: var(--aqua-soft);
}

.role-task {
  color: var(--muted);
  background: var(--fill);
}

/* Clients - offers in preparation (CRM "Prepare offer") shown as table rows */
.status-offer {
  color: var(--violet);
  background: var(--violet-soft);
}

/* Clients - recurring subscriptions (O&M / Smart Monitoring), shown via toggle */
.status-subscription {
  color: var(--amber);
  background: var(--amber-soft);
}

.status-push {
  color: var(--teal-strong);
  background: var(--aqua-soft);
}

/* Clients - CRM "Fridge" deals, parked to eat later */
.status-fridge {
  color: var(--muted);
  background: var(--fill);
}

.opp-row td {
  background: var(--panel-2);
}

/* ==========================================================================
   RESPONSIVE / MOBILE SHELL
   --------------------------------------------------------------------------
   Below 900px the cockpit switches from a two-column desktop layout to a
   phone shell:
     - the sidebar becomes an off-canvas drawer (scrim + ESC + tap-outside),
     - the top bar collapses to one 56px sticky row (menu / title / actions),
     - a fixed bottom tab bar gives one-tap access to the 4 busiest views,
     - dense tables turn into cards or into their own scroll container.
   The chrome added by mobile-nav.js (.nav-scrim, .mobile-tabbar, .drawer-*)
   is display:none above the breakpoint, so desktop is untouched.
   ========================================================================== */

/* Mobile-only chrome — hidden by default, revealed inside the media query. */
.nav-toggle,
.nav-scrim,
.mobile-tabbar,
.drawer-proxy,
.drawer-close,
.search-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* --- shell -------------------------------------------------------------
     Grid/flex children default to min-width:auto, so one wide descendant
     (the nav strip, a 1180px timeline…) used to stretch the whole page and
     force horizontal panning. Pin every shell-level box to min-width:0 so
     overflow always happens inside the intended scroll container. */
  .app-shell {
    display: block;
  }

  .sidebar,
  .main,
  .topbar,
  .topbar-heading,
  .nav-tabs,
  .profile-panel,
  .view,
  .panel,
  .wide-panel,
  .metric-grid,
  .content-grid,
  .task-board,
  .gantt-chart,
  .planning-timeline-scroll {
    min-width: 0;
  }

  /* The fixed 5px accent stripe would sit under the sticky top bar; the bar
     carries the accent itself instead. */
  body::before {
    display: none;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* --- drawer ------------------------------------------------------------ */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: min(310px, 84vw);
    height: 100vh;
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    gap: 18px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: 24px 0 48px rgba(10, 20, 45, 0.28);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  body.nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s;
  }

  /* Keyed on body.nav-open, NOT on the scrim's [hidden] attribute: `[hidden]
     { display: none }` comes from the UA stylesheet, so ANY author rule
     setting display beats it whatever its specificity. A bare
     `.nav-scrim { display: block }` here therefore left the scrim painted over
     the whole app with the attribute still set — the page looked greyed out
     and swallowed every tap. */
  body.nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(8, 14, 28, 0.46);
  }

  .brand {
    justify-content: space-between;
  }

  .brand-logo {
    width: 128px;
  }

  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
  }

  .drawer-close:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* Roomier hit areas: the drawer is the only way to reach 9 of the views. */
  .nav-tab,
  .sidebar-sync-button,
  .drawer-proxy {
    min-height: 46px;
    padding: 12px 12px;
    font-size: var(--fs-body);
  }

  .drawer-proxy {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--muted);
    font-weight: 700;
  }


  /* --- top bar ----------------------------------------------------------- */
  .main {
    padding: 0 14px calc(78px + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: 56px;
    margin: 0 -14px 14px;
    padding: 0 10px;
    background: var(--surface);
    border-top: 3px solid var(--aqua);
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
  }

  .nav-toggle:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .topbar-heading {
    flex: 1 1 auto;
    min-width: 0;
  }

  #resetData {
    display: none;
  }

  /* The bar carries four controls next to it — a 24px title would ellipsise
     half the view names ("Client overvi…"). */
  .topbar h1 {
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Transient save feedback floats under the bar so it never resizes it. */
  .topbar .save-status {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    margin: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: var(--fs-xs);
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 4px;
    flex-wrap: nowrap;
  }

  .search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Search expands to a full-width row pinned under the bar instead of
     competing for the 40px it would get inline. */
  .topbar .global-search {
    display: none;
  }

  body.search-open .topbar .global-search {
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% + 6px);
    z-index: 45;
    width: auto;
  }

  body.search-open .topbar .global-search input {
    min-height: 44px;
    box-shadow: var(--shadow);
  }

  .global-search-results {
    left: 0;
    right: 0;
    width: auto;
    max-height: 60vh;
  }

  .my-tasks-dropdown {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 64px;
    width: auto;
    max-height: 65vh;
  }

  /* "New task" keeps only its + glyph — the label costs 90px of a 390px bar. */
  #openTaskModal {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  #openTaskModal::after {
    content: "+";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
  }

  /* --- bottom tab bar ---------------------------------------------------- */
  .mobile-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px rgba(15, 25, 50, 0.09);
  }

  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .mobile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tab.active {
    color: var(--accent);
  }

  .mobile-tab.active svg {
    stroke-width: 2.4;
  }

  /* Onglet « + » (saisie rapide, crm-ui.js) : un rond plein au centre de la
     barre, pour qu'on le trouve sans chercher. */
  .mobile-tab-plus[hidden] {
    display: none;
  }

  .mobile-tab-plus .mobile-tab-plus-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
  }

  .mobile-tab-plus .mobile-tab-plus-ring svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
  }

  /* --- touch targets & iOS zoom ------------------------------------------
     Anything under 16px makes Safari zoom the viewport on focus, which then
     leaves the page panned sideways — the single worst mobile annoyance in
     this app. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* A <select> is intrinsically as wide as its longest option — one project
     name is enough to stretch the whole page. Controls shrink to their box. */
  select,
  input,
  textarea {
    max-width: 100%;
    min-width: 0;
  }

  .compact-form label,
  .compact-form select,
  .compact-form input,
  .compact-form button,
  .form-grid label,
  .form-grid select,
  .form-grid input,
  .form-grid textarea {
    width: 100%;
    min-width: 0;
  }

  .primary-button,
  .secondary-button,
  .icon-button {
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
  }

  .mini-button,
  .link-button,
  .segmented-btn,
  .ts-group-tab {
    min-height: 36px;
  }

  /* --- content density ---------------------------------------------------- */
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .metric {
    padding: 12px;
  }

  .metric span {
    margin-bottom: 6px;
    font-size: var(--fs-caption);
  }

  .metric strong {
    font-size: var(--fs-lg);
  }

  .panel {
    padding: 14px;
    border-radius: 12px;
  }

  .content-grid,
  .project-summary,
  .form-grid,
  .ts-total-grid {
    grid-template-columns: 1fr;
  }

  /* Hero tiles are label + one value — two per row instead of one keeps the
     project header down to a screenful. */
  .info-grid,
  .info-grid-4,
  .info-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-hero-actions {
    width: 100%;
    justify-content: space-between;
  }

  .hero-hours {
    align-items: flex-start;
  }

  .info-tile {
    min-height: 0;
    padding: 10px;
  }

  .info-tile span {
    margin-bottom: 4px;
  }

  .info-tile strong {
    font-size: var(--fs-md);
  }

  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .panel-header h2 {
    margin-bottom: 0;
  }

  /* --- toolbars & filters -------------------------------------------------
     Selects go full width; the lifecycle checkboxes become a wrapping row of
     pills so five of them cost two lines instead of five. */
  .project-toolbar,
  .client-toolbar,
  .board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }

  .project-toolbar > label:not(.checkbox-label),
  .client-toolbar > label:not(.checkbox-label) {
    flex: 1 1 100%;
    display: grid;
    gap: 5px;
    align-items: stretch;
    font-size: var(--fs-caption);
  }

  /* Specificity has to beat the desktop `.client-toolbar label.checkbox-label`,
     otherwise the pills lose their mobile styling. */
  .checkbox-label,
  .client-toolbar label.checkbox-label,
  .board-toolbar label.checkbox-label {
    flex: 0 0 auto;
    gap: 6px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
  }

  .checkbox-label:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .checkbox-label input {
    accent-color: var(--accent);
  }

  .toolbar-so-total {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: space-between;
    padding-top: 4px;
  }

  .filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .filter-row select {
    width: 100%;
    min-width: 0;
  }

  .board-toolbar .filter-row {
    flex: 1 1 100%;
  }

  /* The timesheet week pager reads better as one line: ← label → today. */
  .timesheet-header .filter-row {
    grid-template-columns: auto 1fr auto;
  }

  .timesheet-header .filter-row #timesheetToday {
    grid-column: 1 / -1;
  }

  .timesheet-week-label {
    min-width: 0;
  }

  .ts-addrow select,
  .ts-person-picker select {
    min-width: 0;
    width: 100%;
  }

  /* The week grid can only scroll sideways on a phone, so the SO/task column
     is pinned: you always know which line you are typing hours into. */
  .timesheet-table {
    min-width: 0;
  }

  .timesheet-table .ts-rowlabel {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 132px;
    max-width: 132px;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
  }

  .timesheet-table thead .ts-rowlabel,
  .timesheet-table tfoot .ts-rowlabel {
    z-index: 3;
    background: var(--panel-alt, #f4f6f8);
  }

  .ts-cell {
    width: 54px;
  }

  /* --- task board ---------------------------------------------------------
     Kanban stays horizontal (drag is unusable on touch anyway — the cards
     carry buttons), but snaps column by column with the next one peeking. */
  .task-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin: 0 -14px;
    padding: 0 14px 6px;
  }

  .task-column {
    min-width: 0;
    min-height: 0;
    scroll-snap-align: start;
  }

  /* --- planning ------------------------------------------------------------ */
  .gantt-chart,
  .heatmap {
    overflow-x: auto;
  }

  .allocation-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .allocation-row > *:nth-child(n + 2) {
    justify-self: end;
  }

  .person-picker,
  .person-picker select {
    width: 100%;
  }

  /* --- dialogs become bottom sheets ---------------------------------------- */
  .task-modal {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    overflow-y: auto;
  }

  .confirm-modal {
    width: 100%;
    max-width: none;
  }

  #taskForm,
  #contributorsForm {
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .modal-actions {
    position: sticky;
    bottom: 0;
    gap: 10px;
    padding-top: 10px;
    background: var(--panel);
  }

  .modal-actions button {
    flex: 1 1 0;
  }

  .contributors-options {
    grid-template-columns: 1fr;
  }

  .toast-region {
    left: 12px;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .toast {
    width: auto;
  }

}

/* ==========================================================================
   PHONES (≤ 760px) — dense tables become cards
   Each row turns into a card and each cell into a labelled line, the label
   coming from <td data-label>. Applies to the Dashboard/Clients tables and
   the per-project task + invoice tables.
   ========================================================================== */
@media (max-width: 760px) {
  .project-table,
  .project-table.client-project-table,
  .project-task-table,
  .invoices-table {
    min-width: 0;
    width: 100%;
  }

  .project-table thead,
  .project-task-table thead,
  .invoices-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .project-table tr,
  .project-task-table tr,
  .invoices-table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    padding: 4px 12px;
    margin-bottom: 12px;
  }

  .project-table td,
  .project-task-table td,
  .invoices-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
    text-align: right;
  }

  /* The desktop grid pins every column width through :nth-child rules; in card
     mode each cell is a full-width line instead, so those widths have to be
     neutralised at equal specificity — hence the :nth-child(n). Without this a
     PM or priority select is clipped to its 130px desktop column. */
  .project-table td:nth-child(n),
  .project-table th:nth-child(n),
  .client-project-table td:nth-child(n),
  .client-project-table th:nth-child(n) {
    width: auto;
  }

  .project-table tr td:last-child,
  .project-task-table tr td:last-child,
  .invoices-table tr td:last-child {
    border-bottom: 0;
  }

  .project-table td::before,
  .project-task-table td::before,
  .invoices-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Right-hand content may be a control/links — let it take the remaining width. */
  .project-table td > *,
  .project-task-table td > *,
  .invoices-table td > * {
    min-width: 0;
  }

  .project-table td select,
  .project-table td input,
  .project-task-table td select,
  .project-task-table td input {
    max-width: 62%;
  }

  /* An empty label (e.g. actions column) shouldn't reserve space awkwardly. */
  .project-table td[data-label=""]::before,
  .project-task-table td[data-label=""]::before {
    content: "";
  }

  /* The first cell of a card is its title — give it the weight of one. */
  .project-table tbody tr td:first-child {
    font-weight: 800;
  }

  .project-hero-head {
    justify-content: flex-start;
  }

  .project-title-row {
    flex-wrap: wrap;
  }

}

@media (max-width: 480px) {
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    margin-left: -10px;
    margin-right: -10px;
  }

  /* KPI tiles stay on two columns down to the smallest phones — a single
     column would push the projects table two screens down. */
  .metric-grid {
    gap: 8px;
  }

  .task-board {
    grid-auto-columns: 88vw;
    margin: 0 -10px;
    padding: 0 10px 6px;
  }
}

/* ==========================================================================
   PHONE IN LANDSCAPE (≤ 900px wide AND ≤ 520px tall)
   Rotating the phone is how you read a chart properly — but a landscape phone
   is only ~390px tall, and the portrait chrome (56px top bar + 58px tab bar)
   would eat 29% of it. The chrome shrinks and the tab bar drops its labels;
   chart hosts switch from a fixed pixel height to a share of the viewport, so
   turning the phone actually makes the graph bigger instead of scrolling it.
   Keyed on height, not on `orientation: landscape`: what hurts is the short
   viewport, and that is also what a split-screen or a keyboard produces.
   ========================================================================== */
@media (max-width: 900px) and (max-height: 520px) {
  .topbar {
    height: 46px;
  }

  .main {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  .mobile-tab {
    min-height: 42px;
    padding: 4px 2px;
  }

  /* Icon-only: the labels cost 14px of a 390px-tall screen and the icons are
     already the ones the user learned in portrait. */
  .mobile-tab span {
    display: none;
  }

  .cashflow-canvas-wrap,
  #objectivesView .ob-canvas-wrap {
    height: 68vh;
    min-height: 200px;
  }

  .task-board {
    grid-auto-columns: 46vw;
  }

  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  /* …but the hero money tiles keep two per row: a € amount truncated to fit a
     quarter of a 480px screen is worse than a taller header. */
  .hero-tiles,
  .info-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ----- Treasury plan (project detail): billing milestones + cost schedule -- */
.plan-panel .plan-template-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-panel .plan-template-bar select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
}

.plan-subtitle {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}

.plan-table-wrap {
  overflow-x: auto;
}

.plan-table td {
  vertical-align: middle;
}

.plan-num-input {
  width: 84px;
}

.plan-amount-input {
  width: 110px;
}

.plan-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plan-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.plan-footer label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plan-percent-warning {
  color: var(--red);
  background: var(--red-soft);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}

.plan-extend-so {
  margin-left: 8px;
  border-color: var(--red-soft);
  color: var(--red);
}


.plan-monthly {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.plan-monthly label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plan-monthly-summary {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.plan-monthly-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-monthly-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.plan-status-planned {
  color: var(--muted);
  background: var(--panel-2);
}

.plan-status-late {
  color: var(--red);
  background: var(--red-soft);
}

.plan-status-partial {
  color: var(--amber);
  background: var(--amber-soft);
}

.plan-status-invoiced {
  color: var(--teal-strong);
  background: var(--aqua-soft);
}


.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.plan-pipeline-note {
  margin: 0 0 10px;
}

/* Cost line anchored to a billing milestone: select + derived date stacked. */
.plan-cost-anchor select {
  max-width: 220px;
}

.plan-derived-date {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Cost line split into payment tranches: one compact sub-row per tranche
   (milestone/date + % + derived amount + status), stacked in the anchor cell. */
.plan-split-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 0;
}

.plan-split-row + .plan-split-row {
  border-top: 1px dashed var(--border);
}

.plan-split-row .plan-derived-date {
  display: inline;
  margin-top: 0;
}

.plan-split-row .date-input {
  max-width: 140px;
}

.plan-split-pct {
  width: 64px;
}

.plan-split-delete {
  padding: 0 6px;
  line-height: 1.4;
}

.plan-split-footer {
  border-top: none !important;
}

/* Off-plan vendor bills (cost-drift radar) — AMBER ROWS of the cost table,
   not a separate box: a received bill is a cost of this project, it simply has
   no plan line yet, so it belongs in the same list. */
.plan-offplan-row > td {
  background: var(--amber-soft);
}

.plan-offplan-flag {
  font-size: var(--fs-caption);
  color: var(--amber);
  font-weight: 700;
}

.plan-offplan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.plan-attach-offplan {
  max-width: 200px;
}

.plan-offplan-total {
  color: var(--red);
}

.plan-custom-label {
  margin-top: 4px;
  display: block;
  min-width: 160px;
}

.next-ms-derived {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* =========================================================================
   Cash forecast tab (#cashflowView) — ported from the standalone treasury
   dashboard. Everything is scoped under #cashflowView with --cf-* variables
   so nothing leaks into (or from) the rest of the cockpit.
   ========================================================================= */
#financeView,
#pnlView,
#accuracyView,
#cashflowView,
/* =========================================================================
   Cash forecast tab (#objectivesView) — ported from the standalone treasury
   dashboard. Everything is scoped under #objectivesView with --cf-* variables
   so nothing leaks into (or from) the rest of the cockpit.
   ========================================================================= */
#objectivesView {
  --cf-card: #ffffff;
  --cf-border: #e5e7eb;
  --cf-text: #1a1a1a;
  --cf-text-muted: #6b7280;
  --cf-accent: #335FFF;
  --cf-accent-soft: #eef2ff;
  --cf-teal: #2FCFC3;
  --cf-teal-soft: #e6faf8;
  --cf-success: #2FCFC3;
  --cf-danger: #dc2626;
  --cf-warning: #d97706;
  --cf-soft: #fafafa;
  --cf-info-soft: #f0f9ff;
  --cf-row-band: #f3f4f6;
  --cf-current: #fef9c3;
  --cf-neg-bg: #fee2e2;
  --cf-rule: #000;
  color: var(--cf-text);
  font-size: var(--fs-sm);
}

/* Le Cash forecast avait sa palette claire figée : en sombre, cartes blanches
   et texte noir au milieu d'une app sombre. Même palette, valeurs sombres. */
:root[data-theme="dark"] #objectivesView,
:root[data-theme="dark"] #financeView,
:root[data-theme="dark"] #pnlView,
:root[data-theme="dark"] #accuracyView,
:root[data-theme="dark"] #cashflowView {
  --cf-card: var(--panel);
  --cf-border: var(--line);
  --cf-text: var(--ink);
  --cf-text-muted: var(--muted);
  --cf-accent: var(--accent);
  --cf-accent-soft: var(--accent-soft);
  --cf-teal: var(--aqua);
  --cf-teal-soft: var(--aqua-soft);
  --cf-success: var(--aqua);
  --cf-danger: var(--red);
  --cf-warning: var(--amber);
  --cf-soft: var(--panel-2);
  --cf-info-soft: var(--blue-soft);
  --cf-row-band: var(--panel-2);
  --cf-current: var(--amber-soft);
  --cf-neg-bg: var(--red-soft);
  --cf-rule: var(--ink);
}
#financeView .cf-toolbar,
#pnlView .cf-toolbar,
#accuracyView .cf-toolbar,
#cashflowView .cf-toolbar,
#objectivesView .cf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#cashflowView .cf-actions,
#objectivesView .cf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#financeView .cf-status,
#pnlView .cf-status,
#accuracyView .cf-status,
#cashflowView .cf-status,
#objectivesView .cf-status { font-size: var(--fs-caption); color: var(--cf-text-muted); margin-right: 10px; }
#financeView .btn,
#pnlView .btn,
#accuracyView .btn,
#cashflowView .btn,
#objectivesView .btn {
  background: var(--cf-card); border: 1px solid var(--cf-border); padding: 7px 12px;
  border-radius: 6px; font-size: var(--fs-caption); cursor: pointer; color: var(--cf-text);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
#financeView .btn:hover,
#pnlView .btn:hover,
#accuracyView .btn:hover,
#cashflowView .btn:hover,
#objectivesView .btn:hover { background: var(--cf-soft); }
#cashflowView .btn.primary,
#objectivesView .btn.primary { background: var(--cf-accent); color: #fff; border-color: var(--cf-accent); }
#cashflowView .btn.primary:hover,
#objectivesView .btn.primary:hover { background: var(--accent-dark); }
#financeView .cf-error,
#pnlView .cf-error,
#accuracyView .cf-error,
#cashflowView .cf-error,
#objectivesView .cf-error { background: var(--amber-soft); border: 1px solid var(--amber); color: var(--amber); padding: 12px 14px; border-radius: 6px; font-size: var(--fs-sm); }
#financeView .kpis,
#pnlView .kpis,
#accuracyView .kpis,
#cashflowView .kpis,
#objectivesView .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
#financeView .kpi,
#pnlView .kpi,
#accuracyView .kpi,
#cashflowView .kpi,
#objectivesView .kpi {
  background: var(--cf-card); border: 1px solid var(--cf-border); border-radius: 8px;
  padding: 14px 16px; border-top: 3px solid var(--cf-accent);
}
#financeView .kpi.success,
#pnlView .kpi.success,
#accuracyView .kpi.success,
#cashflowView .kpi.success,
#objectivesView .kpi.success { border-top-color: var(--cf-teal); }
#financeView .kpi.warn,
#pnlView .kpi.warn,
#accuracyView .kpi.warn,
#cashflowView .kpi.warn,
#objectivesView .kpi.warn { border-top-color: var(--cf-warning); }
#financeView .kpi.danger,
#pnlView .kpi.danger,
#accuracyView .kpi.danger,
#cashflowView .kpi.danger,
#objectivesView .kpi.danger { border-top-color: var(--cf-danger); }
#financeView .kpi .label,
#pnlView .kpi .label,
#accuracyView .kpi .label,
#cashflowView .kpi .label,
#objectivesView .kpi .label { color: var(--cf-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
#financeView .kpi .value,
#pnlView .kpi .value,
#accuracyView .kpi .value,
#cashflowView .kpi .value,
#objectivesView .kpi .value { font-size: 1.375rem; font-weight: 600; margin-top: 4px; }
#financeView .kpi .sub,
#pnlView .kpi .sub,
#accuracyView .kpi .sub,
#cashflowView .kpi .sub,
#objectivesView .kpi .sub { color: var(--cf-text-muted); font-size: var(--fs-xs); margin-top: 2px; }
#cashflowView .kpi.warn .value,
#objectivesView .kpi.warn .value { color: var(--cf-warning); }
#cashflowView .kpi.danger .value,
#objectivesView .kpi.danger .value { color: var(--cf-danger); }
#cashflowView .kpi.success .value,
#objectivesView .kpi.success .value { color: var(--cf-success); }
#cashflowView .cf-section,
#objectivesView .cf-section {
  background: var(--cf-card); border: 1px solid var(--cf-border); border-radius: 8px;
  margin-bottom: 16px;
}
#cashflowView .cf-section > .header,
#objectivesView .cf-section > .header {
  padding: 14px 18px; border-bottom: 1px solid var(--cf-border); display: flex;
  align-items: center; justify-content: space-between; cursor: pointer; user-select: none;
  background: linear-gradient(90deg, var(--cf-teal-soft) 0%, var(--cf-accent-soft) 100%);
  border-radius: 8px 8px 0 0;
}
#cashflowView .cf-section > .header h2,
#objectivesView .cf-section > .header h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--cf-accent); letter-spacing: 0.2px; }
#cashflowView .cf-section.collapsed > .header,
#objectivesView .cf-section.collapsed > .header { border-radius: 8px; border-bottom: none; }
#cashflowView .cf-section > .header .chev,
#objectivesView .cf-section > .header .chev { color: var(--cf-text-muted); transition: transform .15s; }
#cashflowView .cf-section.collapsed > .header .chev,
#objectivesView .cf-section.collapsed > .header .chev { transform: rotate(-90deg); }
#cashflowView .cf-section > .body,
#objectivesView .cf-section > .body { padding: 16px; }
#cashflowView .cf-section.collapsed > .body,
#objectivesView .cf-section.collapsed > .body { display: none; }
#cashflowView .hyp-grid,
#objectivesView .hyp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#cashflowView .hyp-block h3,
#objectivesView .hyp-block h3 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .5px; color: var(--cf-text-muted); margin: 0 0 10px; font-weight: 600; }
#cashflowView #pilotage-section .hyp-block > h3,
#objectivesView #pilotage-section .hyp-block > h3 { color: var(--cf-text); font-size: var(--fs-sm); }
#cashflowView .hyp-row,
#objectivesView .hyp-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--cf-border); }
#cashflowView .hyp-row:last-child,
#objectivesView .hyp-row:last-child { border-bottom: none; }
#cashflowView .hyp-row label,
#objectivesView .hyp-row label { font-size: var(--fs-caption); }
#cashflowView .hyp-row input[type=number],
#objectivesView .hyp-row input[type=number] {
  width: 80px; border: 1px solid var(--cf-border); border-radius: 4px;
  padding: 4px 6px; font-size: var(--fs-caption); text-align: right; background: var(--cf-card);
}
#cashflowView .hyp-row .unit,
#objectivesView .hyp-row .unit { color: var(--cf-text-muted); font-size: var(--fs-xs); margin-left: 4px; }
#cashflowView .staff-btn,
#objectivesView .staff-btn { position: absolute; top: 0; transform: translateX(-100%); padding: 2px 7px; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--cf-accent); background: var(--cf-card); color: var(--cf-accent); border-radius: 12px;
  cursor: pointer; line-height: 1.3; min-width: 26px; }
#cashflowView .staff-btn:hover,
#objectivesView .staff-btn:hover,
#cashflowView .staff-btn.has-staff,
#objectivesView .staff-btn.has-staff { background: var(--cf-accent); color: #fff; }
/* Bandeau de cases à cocher au-dessus du graphique : une case par série.
   Le témoin de couleur reprend celle de la série — trait fin pour un solde
   cumulé, bloc épais pour un flux mensuel (barre). */
#cashflowView .cf-series-row,
#objectivesView .cf-series-row { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center; margin-bottom: 8px; }
#cashflowView .cf-series-toggle,
#objectivesView .cf-series-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--cf-text-muted); cursor: pointer; user-select: none; }
#cashflowView .cf-series-toggle:hover,
#objectivesView .cf-series-toggle:hover { color: var(--cf-text); }
#cashflowView .cf-series-toggle input,
#objectivesView .cf-series-toggle input { margin: 0; accent-color: var(--cf-accent); cursor: pointer; }
#cashflowView .cf-series-swatch,
#objectivesView .cf-series-swatch { width: 11px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
#cashflowView .cf-series-toggle.is-flux .cf-series-swatch,
#objectivesView .cf-series-toggle.is-flux .cf-series-swatch { height: 9px; border-radius: 1px; }

/* Audit du détail mensuel : cellules cliquables + panneau (cashflow-audit-ui.js). */
#cashflowView .cf-auditable,
#objectivesView .cf-auditable { cursor: pointer; }
#cashflowView .cf-auditable:hover,
#objectivesView .cf-auditable:hover { outline: 1px solid var(--cf-accent); outline-offset: -1px; background: var(--cf-soft); }

.cf-audit-dialog { width: min(760px, 94vw); max-height: 86vh; border: none; border-radius: 10px; padding: 0; box-shadow: 0 18px 50px rgba(15, 23, 42, .28); color: var(--cf-text); background: var(--cf-card); }
.cf-audit-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.cf-audit-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cf-border); position: sticky; top: 0; background: var(--cf-card); border-radius: 10px 10px 0 0; }
.cf-audit-title { font-size: var(--fs-body); font-weight: 700; }
.cf-audit-sub { margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.cf-audit-value { font-size: var(--fs-body); font-weight: 700; color: var(--cf-accent); }
.cf-audit-tag { font-size: var(--fs-xs); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--cf-border); color: var(--cf-text-muted); }
.cf-audit-tag.is-hist { background: var(--cf-soft); }
.cf-audit-tag.is-fcst { color: var(--cf-accent); border-color: var(--cf-accent); }
.cf-audit-close { margin-left: auto; border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: var(--cf-text-muted); padding: 2px 4px; }
.cf-audit-close:hover { color: var(--cf-text); }
.cf-audit-body { padding: 4px 16px 18px; overflow-y: auto; max-height: calc(86vh - 66px); }
.cf-audit-block { margin-top: 16px; }
.cf-audit-block h4 { margin: 0 0 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--cf-text-muted); font-weight: 600; }
.cf-audit-formula { margin: 0; font-size: var(--fs-caption); line-height: 1.5; }
.cf-audit-inputs, .cf-audit-items, .cf-audit-recon { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.cf-audit-inputs th, .cf-audit-items td, .cf-audit-recon th, .cf-audit-recon td { padding: 5px 6px; border-bottom: 1px solid var(--cf-border); vertical-align: top; text-align: left; }
.cf-audit-inputs th { width: 38%; font-weight: 500; color: var(--cf-text-muted); }
.cf-audit-inputs td { padding: 5px 6px; border-bottom: 1px solid var(--cf-border); }
.cf-audit-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-audit-note { font-size: var(--fs-xs); color: var(--cf-text-muted); margin-top: 2px; line-height: 1.4; }
.cf-audit-recon { margin-top: 8px; }
.cf-audit-recon th { font-weight: 500; color: var(--cf-text-muted); }
.cf-audit-recon tr:last-child th, .cf-audit-recon tr:last-child td { border-bottom: none; }
.cf-audit-gap th, .cf-audit-gap td { color: var(--cf-warning); font-weight: 600; }
.cf-audit-warn { margin: 8px 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--cf-warning); background: rgba(217, 119, 6, .08); border-left: 2px solid var(--cf-warning); padding: 6px 8px; }
.cf-audit-ok { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--cf-success); }
.cf-audit-src { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--cf-text-muted); }
.cf-audit-empty { margin: 0; font-size: var(--fs-caption); color: var(--cf-text-muted); line-height: 1.5; }
.cf-audit-notes { margin: 0; padding-left: 18px; font-size: var(--fs-caption); line-height: 1.5; }
.cf-audit-notes li + li { margin-top: 4px; }

#cashflowView .hyp-table,
#objectivesView .hyp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
#cashflowView .hyp-table th,
#objectivesView .hyp-table th,
#cashflowView .hyp-table td,
#objectivesView .hyp-table td { padding: 5px 6px; border-bottom: 1px solid var(--cf-border); text-align: right; }
#cashflowView .hyp-table th,
#objectivesView .hyp-table th { font-weight: 500; color: var(--cf-text-muted); text-align: left; font-size: var(--fs-xs); }
#cashflowView .hyp-table th:first-child,
#objectivesView .hyp-table th:first-child,
#cashflowView .hyp-table td:first-child,
#objectivesView .hyp-table td:first-child { text-align: left; }
#cashflowView .hyp-table input,
#objectivesView .hyp-table input { width: 70px; border: 1px solid transparent; padding: 3px 4px; font-size: var(--fs-caption); text-align: right; background: transparent; border-radius: 3px; }
#cashflowView .hyp-table input:hover,
#objectivesView .hyp-table input:hover { border-color: var(--cf-border); background: var(--cf-card); }
#cashflowView .hyp-table input:focus,
#objectivesView .hyp-table input:focus { outline: none; border-color: var(--cf-accent); background: var(--cf-card); }
#cashflowView .cf-two-col,
#objectivesView .cf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#cashflowView .detail-table-wrap,
#objectivesView .detail-table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
#cashflowView .detail-table,
#objectivesView .detail-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); min-width: 900px; }
#cashflowView .detail-table th,
#objectivesView .detail-table th,
#cashflowView .detail-table td,
#objectivesView .detail-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--cf-border); text-align: right; white-space: nowrap;
}
#cashflowView .detail-table th,
#objectivesView .detail-table th { background: var(--cf-soft); font-weight: 500; color: var(--cf-text-muted); font-size: var(--fs-xs); position: sticky; top: 0; z-index: 1; }
#cashflowView .detail-table th:first-child,
#objectivesView .detail-table th:first-child,
#cashflowView .detail-table td:first-child,
#objectivesView .detail-table td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--cf-card); z-index: 2;
  border-right: 1px solid var(--cf-border); min-width: 220px;
}
#cashflowView .detail-table th:first-child,
#objectivesView .detail-table th:first-child { background: var(--cf-soft); z-index: 3; }
#cashflowView .detail-table tr.section-row td,
#objectivesView .detail-table tr.section-row td { background: var(--cf-row-band); font-weight: 600; color: var(--cf-text); font-size: var(--fs-caption); }
#cashflowView .detail-table tr.section-row td:first-child,
#objectivesView .detail-table tr.section-row td:first-child { background: var(--cf-row-band); }
#cashflowView .detail-table tr.subtotal-row td,
#objectivesView .detail-table tr.subtotal-row td { font-weight: 600; border-top: 2px solid var(--cf-border); background: var(--cf-soft); }
#cashflowView .detail-table tr.subtotal-row td:first-child,
#objectivesView .detail-table tr.subtotal-row td:first-child { background: var(--cf-soft); }
#cashflowView .detail-table tr.total-row td,
#objectivesView .detail-table tr.total-row td {
  font-weight: 700; background: var(--cf-accent-soft); color: var(--cf-accent);
  border-top: 2px solid var(--cf-accent); border-bottom: 1px solid var(--cf-accent);
}
#cashflowView .detail-table tr.total-row td:first-child,
#objectivesView .detail-table tr.total-row td:first-child { background: var(--cf-accent-soft); }
#cashflowView .detail-table td.indent,
#objectivesView .detail-table td.indent { padding-left: 20px; color: var(--cf-text-muted); font-size: var(--fs-xs); }
#cashflowView .detail-table td.hist,
#objectivesView .detail-table td.hist { color: var(--cf-text-muted); font-style: italic; }
#cashflowView .detail-table td.fcst,
#objectivesView .detail-table td.fcst { color: var(--cf-text); }
#cashflowView .detail-table td.neg,
#objectivesView .detail-table td.neg { color: var(--cf-danger); }
#cashflowView .detail-table td.month-col-current,
#objectivesView .detail-table td.month-col-current { background: var(--cf-current) !important; }
#cashflowView .detail-table tr.balance-row td,
#objectivesView .detail-table tr.balance-row td { font-weight: 700; border-top: 2px solid var(--cf-rule); padding: 8px 8px; }
#cashflowView .detail-table tr.balance-row td.neg,
#objectivesView .detail-table tr.balance-row td.neg { background: var(--cf-neg-bg); color: var(--cf-danger); }
#cashflowView .drill-grid,
#objectivesView .drill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#cashflowView .drill-card,
#objectivesView .drill-card { background: var(--cf-card); border: 1px solid var(--cf-border); border-radius: 8px; padding: 14px 16px; }
#cashflowView .drill-card h3,
#objectivesView .drill-card h3 { font-size: var(--fs-caption); margin: 0 0 8px; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
#cashflowView .drill-table,
#objectivesView .drill-table { width: 100%; font-size: var(--fs-caption); border-collapse: collapse; }
#cashflowView .drill-table td,
#objectivesView .drill-table td { padding: 4px 0; border-bottom: 1px dashed var(--cf-border); }
#cashflowView .drill-table td:last-child,
#objectivesView .drill-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#cashflowView .tab-bar,
#objectivesView .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--cf-border); margin-bottom: 12px; }
#cashflowView .tab,
#objectivesView .tab { padding: 6px 12px; cursor: pointer; font-size: var(--fs-caption); color: var(--cf-text-muted); border-bottom: 2px solid transparent; }
#cashflowView .tab.active,
#objectivesView .tab.active { color: var(--cf-accent); border-bottom-color: var(--cf-teal); font-weight: 600; }
#cashflowView .opp-matrix,
#objectivesView .opp-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
#cashflowView .opp-matrix th,
#objectivesView .opp-matrix th,
#cashflowView .opp-matrix td,
#objectivesView .opp-matrix td { padding: 6px 8px; border-bottom: 1px solid var(--cf-border); text-align: right; white-space: nowrap; }
#cashflowView .opp-matrix th,
#objectivesView .opp-matrix th { background: var(--cf-soft); font-weight: 500; color: var(--cf-text-muted); font-size: var(--fs-xs); }
#cashflowView .opp-matrix th:first-child,
#objectivesView .opp-matrix th:first-child,
#cashflowView .opp-matrix th:nth-child(2),
#objectivesView .opp-matrix th:nth-child(2),
#cashflowView .opp-matrix th:nth-child(3),
#objectivesView .opp-matrix th:nth-child(3),
#cashflowView .opp-matrix td:first-child,
#objectivesView .opp-matrix td:first-child,
#cashflowView .opp-matrix td:nth-child(2),
#objectivesView .opp-matrix td:nth-child(2),
#cashflowView .opp-matrix td:nth-child(3),
#objectivesView .opp-matrix td:nth-child(3) { text-align: left; }
#cashflowView .opp-matrix td:first-child,
#objectivesView .opp-matrix td:first-child { color: var(--cf-text-muted); width: 30px; }
#cashflowView .opp-matrix td:nth-child(2),
#objectivesView .opp-matrix td:nth-child(2) { font-weight: 500; max-width: 280px; white-space: normal; line-height: 1.3; }
#cashflowView .opp-matrix td.cell-empty,
#objectivesView .opp-matrix td.cell-empty { color: var(--cf-border); font-size: var(--fs-xs); }
#cashflowView .opp-matrix .stage-badge,
#objectivesView .opp-matrix .stage-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; }
#cashflowView .opp-matrix .stage-Identify,
#objectivesView .opp-matrix .stage-Identify { background: var(--blue-soft); color: var(--blue); }
#cashflowView .opp-matrix .stage-Prepare,
#objectivesView .opp-matrix .stage-Prepare { background: var(--amber-soft); color: var(--amber); }
#cashflowView .opp-matrix .stage-Offre,
#objectivesView .opp-matrix .stage-Offre { background: var(--red-soft); color: var(--red); }
#cashflowView .opp-matrix tr.totals-row td,
#objectivesView .opp-matrix tr.totals-row td { background: var(--cf-row-band); font-weight: 600; border-top: 2px solid var(--cf-border); }
#cashflowView .cf-import-dialog,
#objectivesView .cf-import-dialog { border: 1px solid var(--cf-border); border-radius: 8px; padding: 18px; max-width: 640px; width: 90vw; }
.cf-import-dialog::backdrop { background: rgba(0,0,0,.3); }

@media (max-width: 1300px) { #cashflowView .kpis, #financeView .kpis, #pnlView .kpis, #accuracyView .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) {
#cashflowView .kpis,
#objectivesView .kpis { grid-template-columns: repeat(2, 1fr); }
#cashflowView .hyp-grid,
#objectivesView .hyp-grid,
#cashflowView .drill-grid,
#objectivesView .drill-grid,
#cashflowView .cf-two-col,
#objectivesView .cf-two-col { grid-template-columns: 1fr; }
}

/* Toggle switch (project toolbar "Offers" filter and similar boolean toggles) */
.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
}
.switch-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-label .switch-track {
  width: 34px;
  height: 18px;
  border-radius: 10px;
  background: var(--border);
  position: relative;
  transition: background .15s;
  flex: 0 0 auto;
}
.switch-label .switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: left .15s;
}
.switch-label input:checked + .switch-track {
  background: var(--accent);
}
.switch-label input:checked + .switch-track::after {
  left: 18px;
}
.switch-label input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Planned (future) cashflow from the treasury plan: dashed continuation */
.future-line {
  stroke-dasharray: 6 5;
  opacity: 0.85;
}






/* Segmented control (chart period picker and similar exclusive choices) */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.segmented-btn {
  border: none;
  background: transparent;
  padding: 5px 11px;
  font-size: var(--fs-caption);
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.segmented-btn:last-child { border-right: none; }
.segmented-btn:hover { background: rgba(51, 95, 255, 0.06); }
.segmented-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---- Project chart "Revenus et coûts" --------------------------------------
   Three cumulative curves + the tinted margin/deficit band. The checkbox row
   doubles as the legend (same colour swatches as the curves), so the Chart.js
   legend is turned off. The footer carries two DISTINCT thresholds: supplier
   cash below zero is a red treasury alert shown to everyone, margin below zero
   is an amber leadership-only note (it is a labour-bearing figure). */
.cashflow-panel .panel-header { align-items: flex-start; }
.cashflow-panel .panel-header h2 { margin: 0; }
.cashflow-panel .panel-header .subtext { margin: 4px 0 0; max-width: 62ch; }

.pchart-series {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0 0 10px;
}

.pchart-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.pchart-check input { cursor: pointer; margin: 0; }
.pchart-check:hover { color: var(--ink); }

/* Colour chip mirroring the curve stroke — the legend, basically. */
.pchart-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--muted);
  flex: none;
}
.pchart-swatch-revenue { background: var(--accent); height: 4px; }
.pchart-swatch-material { background: var(--amber); }
.pchart-swatch-total { background: var(--red); }
.pchart-swatch-planned {
  background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px);
}
.pchart-swatch-hours { background: var(--violet); height: 9px; border-radius: 2px; }
.pchart-swatch-envelope {
  background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px);
}

.pchart-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pchart-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
}
.pchart-fig { display: inline-flex; align-items: baseline; gap: 8px; }
.pchart-fig em {
  font-style: normal;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.pchart-fig strong { font-size: var(--fs-body); }
.pchart-pos { color: var(--ink); }
.pchart-neg { color: var(--red); }
.pchart-warn { color: var(--amber); }

.pchart-banner {
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-weight: 600;
  border: 1px solid transparent;
}
/* Red = real treasury alert (Revalio is funding the client). */
.pchart-banner-alert {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}
/* Amber = informative only: revenue under total cost is usually an invoicing
   lag, not a cash problem. Deliberately a different colour from the alert. */
.pchart-banner-note {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber);
}

/* Fixed-size chart host: same height whatever the period; Chart.js fills it
   responsively, fonts and strokes never scale with the data range. */
.cashflow-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}
@media (max-width: 900px) {
  .cashflow-canvas-wrap { height: 260px; }
}

/* Objectives tab specifics */
#objectivesView .kpis { grid-template-columns: repeat(3, 1fr); }
#objectivesView .kpi .value input {
  width: 130px; border: 1px solid var(--cf-border); border-radius: 6px;
  padding: 2px 6px; font-size: 1.1rem; font-weight: 600; text-align: right;
  background: var(--cf-card); color: inherit; font-family: inherit;
}
#objectivesView .ob-canvas-wrap { height: 360px; }
#objectivesView .ob-note { font-size: var(--fs-caption); color: var(--cf-text-muted); margin: 10px 0 0; }

/* Won-SO pivot (Objectives tab) */
#objectivesView .ob-pivot-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: var(--fs-sm); color: var(--cf-text-muted); }
#objectivesView .ob-pivot-controls label { display: flex; align-items: center; gap: 6px; }
#objectivesView .ob-pivot-controls select { border: 1px solid var(--cf-border); border-radius: 6px; padding: 5px 8px; background: var(--cf-card); color: inherit; font-size: var(--fs-sm); }
#objectivesView .ob-pivot-years { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#objectivesView .ob-pivot-years-label { font-weight: 500; }
#objectivesView .ob-year-chk { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--cf-border); border-radius: 999px; background: var(--cf-card); cursor: pointer; }
#objectivesView .ob-year-chk input { margin: 0; cursor: pointer; }
#objectivesView .ob-year-chk:has(input:checked) { border-color: var(--cf-accent, #2f6fed); color: var(--cf-accent, #2f6fed); font-weight: 600; }
#objectivesView .ob-year-clear { border: none; background: none; color: var(--cf-text-muted); text-decoration: underline; cursor: pointer; font-size: var(--fs-sm); padding: 0 2px; }
#objectivesView .ob-pivot-wrap { overflow-x: auto; }
#objectivesView .ob-pivot-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
#objectivesView .ob-pivot-table th,
#objectivesView .ob-pivot-table td { padding: 7px 10px; border-bottom: 1px solid var(--cf-border); text-align: right; white-space: nowrap; }
#objectivesView .ob-pivot-table thead th:first-child,
#objectivesView .ob-pivot-table tbody th,
#objectivesView .ob-pivot-table tfoot th { text-align: left; font-weight: 600; }
#objectivesView .ob-pivot-table thead th { color: var(--cf-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; }
#objectivesView .ob-pivot-table td.empty { color: var(--cf-text-muted); }
#objectivesView .ob-pivot-table td[data-r] { cursor: pointer; }
#objectivesView .ob-pivot-table td[data-r]:hover { background: var(--cf-soft); }
#objectivesView .ob-pivot-table td.selected { background: rgba(51, 95, 255, 0.12); box-shadow: inset 0 0 0 1px var(--cf-accent); }
#objectivesView .ob-pivot-table td.total,
#objectivesView .ob-pivot-table tfoot td { font-weight: 600; }
#objectivesView .ob-pivot-drill { margin-top: 12px; }
#objectivesView .ob-drill-table th,
#objectivesView .ob-drill-table td { padding: 4px 8px; white-space: nowrap; }
#objectivesView .ob-drill-table th.num,
#objectivesView .ob-drill-table td.num { text-align: right; }

/* Objectives pivot & drill headers: same solid Revalio-green sortable band as
   the Projects list (#projectsTable). Placed after the generic .ob-pivot-table
   thead rule above — equal specificity, so file order decides the color. */
#objectivesView .ob-pivot-table thead th,
#objectivesView .ob-drill-table thead th {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: none;
  font-weight: 700;
}
#objectivesView .ob-pivot-table thead th.sortable,
#objectivesView .ob-drill-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#objectivesView .ob-pivot-table thead th.sortable:hover,
#objectivesView .ob-drill-table thead th.sortable:hover {
  background: var(--band-hover);
}
#objectivesView .ob-pivot-table thead th.sortable::after,
#objectivesView .ob-drill-table thead th.sortable::after {
  content: "↕";
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.5;
}
#objectivesView .ob-pivot-table thead th.sortable[aria-sort="ascending"]::after,
#objectivesView .ob-drill-table thead th.sortable[aria-sort="ascending"]::after {
  content: "↑";
  opacity: 1;
}
#objectivesView .ob-pivot-table thead th.sortable[aria-sort="descending"]::after,
#objectivesView .ob-drill-table thead th.sortable[aria-sort="descending"]::after {
  content: "↓";
  opacity: 1;
}
#objectivesView .ob-pivot-drill .drill-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#objectivesView .ob-pivot-drill .btn { font-size: var(--fs-xs); padding: 3px 10px; }
/* Category separators (Operations / Engineering / HR / Commercial / Leadership): the same
   solid Revalio-green band as the Projects list header, so the sidebar reads
   as sections rather than as a hairline rule between tabs. */
.nav-group-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  background: var(--band); color: var(--band-ink); font-weight: 700;
  border-radius: 6px;
  padding: 6px 12px;
  margin-top: 10px;
}
/* First group ("Operations") sits right under the tabs list start. */
.nav-group-label:first-child {
  margin-top: 0;
}
@media (max-width: 1100px) { #objectivesView .kpis { grid-template-columns: repeat(2, 1fr); } }

/* T&M hours grid: elapsed months are read-only facts */
.plan-past-month td, .plan-past-month .plan-amount { color: var(--muted); }
.plan-past-cell { min-width: 60px; }
/* Rétroviseur: elapsed months filled with Odoo's actual billable hours (read-only) */
.plan-actual-month td { color: var(--muted); }
.plan-actual-cell .plan-num-input:disabled { opacity: 1; color: var(--ink); background: var(--panel-alt); cursor: default; }
.plan-actual-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink);
  background: var(--panel-alt);
  border: 1px solid var(--line);
  vertical-align: middle;
}

/* Collapsed months of a long plan window — a whole clickable row. */
.plan-collapsed-row { cursor: pointer; }
.plan-collapsed-row td {
  color: var(--muted);
  font-size: var(--fs-caption);
  background: var(--panel-alt);
}
.plan-collapsed-row:hover td,
.plan-collapsed-row:focus-visible td { color: var(--ink); }

/* ==========================================================================
   MOBILE — module overrides (must stay LAST)
   Objectives / Cash forecast / Audit declare their own responsive rules
   further up this file; those blocks are authored after the main mobile
   section, so the phone tuning for them has to live at the very end to win
   the cascade. Anything module-specific and mobile belongs here.
   ========================================================================== */
@media (max-width: 900px) {
  #objectivesView .kpis,
  #cashflowView .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #objectivesView .kpi,
  #cashflowView .kpi {
    padding: 10px 12px;
  }

  #objectivesView .kpi .value {
    font-size: 1.1rem;
  }

  #objectivesView .kpi .value input {
    width: 100%;
    max-width: 130px;
  }

  #objectivesView .hyp-grid,
  #objectivesView .drill-grid,
  #objectivesView .cf-two-col {
    grid-template-columns: 1fr;
  }

  #objectivesView .cf-section > .body {
    padding: 12px;
  }

  #objectivesView .detail-table-wrap,
  #cashflowView .detail-table-wrap {
    margin: 0 -12px;
    padding: 0 12px;
  }

  #objectivesView .cf-toolbar {
    align-items: stretch;
  }

  #objectivesView .ob-pivot-controls label {
    flex: 1 1 100%;
  }

  #objectivesView .ob-pivot-controls select {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Charts: a 320-360px canvas eats a whole phone screen. */
  .cashflow-canvas-wrap,
  #objectivesView .ob-canvas-wrap {
    height: 240px;
  }
}

@media (max-width: 480px) {
  #objectivesView .kpis,
  #cashflowView .kpis {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Searchable selects (searchable-select.js). The native <select> stays the
   visible control; this is the popup that replaces its picker: a search box on
   top of the filtered options. Fixed-positioned from the select's rect, hosted
   in <body> or in the open <dialog> (top layer). Class names are unique
   (.ssel-*) so this block can live at the end of the file safely. */
.ssel-popup {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: var(--fs-body);
}

.ssel-search {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.ssel-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--ink);
  padding: 7px 10px;
  font: inherit;
}

.ssel-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.ssel-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

.ssel-opt {
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.ssel-opt.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.ssel-opt.is-selected {
  font-weight: 600;
}

.ssel-opt.is-selected::before {
  content: "✓";
  display: inline-block;
  width: 1.1em;
  margin-left: -0.2em;
  color: var(--accent);
}

.ssel-opt.is-disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}

.ssel-empty {
  color: var(--muted);
}

.ssel-group {
  padding: 8px 12px 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ssel-none {
  padding: 12px;
  color: var(--muted);
  text-align: center;
}

/* The select whose popup is open keeps a focus ring so the eye links the two. */
select.ssel-open {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Phones: the popup becomes a bottom sheet, the keyboard covers the lower half
   of the screen anyway and a 240px-wide list under a small select is unusable. */
.ssel-sheet {
  top: auto !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: auto !important;
  max-height: 70dvh;
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
}

.ssel-sheet .ssel-list {
  max-height: none !important;
  flex: 1 1 auto;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.ssel-sheet .ssel-input,
.ssel-sheet .ssel-opt {
  font-size: 16px; /* under 16px Safari zooms the viewport on focus */
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Contributors cell with nobody in it (PM-only project). */
.contributors-none {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-style: italic;
}

/* Clients view — per-client profitability pivot (under Client tasks). Same
   look as the Objectives pivot, but styled on the main app tokens. */
.client-pivot-controls { flex-wrap: wrap; gap: 12px; font-size: var(--fs-sm, 0.9rem); color: var(--muted); }
.client-pivot-controls label { display: inline-flex; align-items: center; gap: 6px; }
.client-pivot-controls select.client-pivot-select { padding: 5px 8px; font-size: var(--fs-sm, 0.9rem); }
.client-pivot-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 0.9rem); }
.client-pivot-table th,
.client-pivot-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.client-pivot-table thead th { color: var(--muted); font-size: var(--fs-xs, 0.75rem); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; text-align: left; }
.client-pivot-table th.num,
.client-pivot-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.client-pivot-table tbody th { text-align: left; font-weight: 600; }
.client-pivot-table tbody th .client-pivot-desc { display: block; font-weight: 400; white-space: normal; max-width: 420px; }
.client-pivot-table td.empty { color: var(--muted); }
.client-pivot-table tfoot th,
.client-pivot-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: none; }
.client-pivot-hint { margin: 10px 0 0; }
.client-pivot-table .client-pivot-pct { font-weight: 500; opacity: .75; margin-left: 4px; font-size: 0.92em; }

/* ---- Dirops dashboard (leadership Dashboard tab) ------------------------- */
.dd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dd-period { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.dd-period button { border: 0; background: transparent; color: var(--muted); padding: 7px 12px; font-weight: 700; cursor: pointer; font-size: var(--fs-sm); }
.dd-period button.active { background: var(--accent-soft); color: var(--accent); }
.dd-head-spacer { flex: 1 1 auto; }
.dd-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.dd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dd-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); border-top: 4px solid var(--aqua); min-width: 0; }
.dd-kpi span { display: block; color: var(--muted); font-size: var(--fs-sm); margin-bottom: 8px; }
.dd-kpi strong { display: block; font-size: clamp(1.25rem, 1.6vw, 1.75rem); line-height: 1; white-space: nowrap; }
.dd-kpi small { display: block; margin-top: 8px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.dd-kpi-neg { border-top-color: var(--red); }
.dd-kpi-neg strong { color: var(--red); }
.dd-delta { font-weight: 800; margin-right: 4px; }
.dd-delta-up { color: var(--teal-strong); }
.dd-delta-down { color: var(--red); }
.dd-delta-flat { color: var(--muted); }
.dd-alerts { margin-bottom: 16px; }
.dd-alerts .panel-header { flex-wrap: wrap; }
.dd-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: var(--fs-xs); text-align: center; vertical-align: middle; margin-left: 6px; }
.dd-count-zero { background: var(--green); }
.dd-alert-list { list-style: none; margin: 0; padding: 0; }
.dd-alert { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.dd-alert-list > .dd-alert:first-child { border-top: 0; }
.dd-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.dd-sev-high .dd-dot { background: var(--red); }
.dd-sev-medium .dd-dot { background: var(--amber); }
.dd-kind { flex: 0 0 92px; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.dd-alert-body { flex: 1 1 auto; min-width: 0; }
.dd-alert-title { font-weight: 700; }
.dd-alert-amount { flex: 0 0 auto; white-space: nowrap; }
.dd-sev-high .dd-alert-amount { color: var(--red); }
/* Alerts are grouped into collapsible categories: a closed panel is one screen
   tall so the Équipe / Clients panels below stay reachable without scrolling. */
.dd-cats { display: flex; flex-direction: column; gap: 8px; }
.dd-cat { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dd-cat > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: var(--fs-body); border-radius: 8px;
}
.dd-cat > summary::-webkit-details-marker { display: none; }
.dd-cat > summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.dd-cat[open] > summary::before { transform: rotate(45deg); }
.dd-cat > summary:hover { background: var(--panel-2); }
.dd-cat-name { flex: 1 1 auto; font-weight: 800; }
.dd-cat-dots { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.dd-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dd-cat-dot.dd-sev-high { background: var(--red); }
.dd-cat-dot.dd-sev-medium { background: var(--amber); }
.dd-cat-count {
  flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs);
  font-weight: 800; text-align: center;
}
.dd-cat-high .dd-cat-count { background: var(--red-soft); color: var(--red); }
.dd-cat-amount { flex: 0 0 auto; white-space: nowrap; font-size: var(--fs-sm); }
.dd-cat > .dd-alert-list { padding: 0 12px 6px; border-top: 1px solid var(--line); }
.dd-cat > .dd-alert-list > .dd-alert:first-child { border-top: 0; }
.dd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.dd-team .panel-header, .dd-clients .panel-header { flex-wrap: wrap; }

/* Adoption du cockpit (dashboard leadership) */
.dd-adopt-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dd-adopt-matrix td:first-child { white-space: nowrap; }
.dd-heat { background: color-mix(in srgb, var(--accent) calc(var(--heat, 0) * 45%), transparent); }
.dd-adopt-matrix th.num { white-space: nowrap; font-size: var(--fs-caption); }
.dd-path { font-size: var(--fs-caption); margin-top: 2px; }
.dd-table-wrap { overflow-x: auto; }
.dd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dd-table th, .dd-table td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.dd-table thead th { border-top: 0; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.dd-table tfoot th { font-weight: 800; }
.dd-table tfoot .dd-internal th { font-weight: 600; }
.dd-table tfoot .dd-internal-split { font-weight: 400; vertical-align: middle; }
.dd-table .num { text-align: right; white-space: nowrap; }
.dd-table small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.dd-tone-low .dd-hours { color: var(--red); font-weight: 800; }
.dd-tone-warn .dd-hours { color: var(--amber); font-weight: 700; }
.dd-tone-ok .dd-hours { color: var(--teal-strong); font-weight: 700; }
.dd-load { display: inline-block; min-width: 44px; text-align: center; padding: 2px 6px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.dd-load-ok { background: var(--aqua-soft); color: var(--teal-strong); }
.dd-load-warn { background: var(--amber-soft); color: var(--amber); }
.dd-load-over { background: var(--red-soft); color: var(--red); }
.dd-load-none { color: var(--muted); }
.dd-warn { color: var(--amber); }
.dd-client-list { list-style: none; margin: 0; padding: 0; }

/* ---- Le fil d'actualité (feed-ui.js) : en tête du Dashboard, pour tous ---- */
.feed-unread {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; vertical-align: middle;
}
/* Le composeur tient sur une ligne quand il y a la place, et passe les boutons
   sous le champ quand le panneau est étroit — avant, le champ rétrécissait
   jusqu'à couper son propre texte d'invite en deux lignes, dont une hors cadre. */
.feed-composer { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.feed-composer-main { flex: 1 1 240px; min-width: 0; }
.feed-composer textarea {
  display: block; width: 100%; resize: none; overflow: hidden; min-height: 40px;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-body);
  line-height: 20px;
}
.feed-composer textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.feed-composer-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; margin-left: auto; }
/* Un carré de la hauteur du champ, l'icône centrée dedans : un `mini-button`
   portant une émoji se retrouvait décalé et trop haut. */
.feed-pick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-size: 16px; line-height: 1;
}
.feed-pick:hover { border-color: var(--accent); }
.feed-publish { height: 40px; }
.feed-day + .feed-day { margin-top: 10px; }
.feed-day-label {
  margin: 0 0 4px; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600;
}
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; align-items: flex-start; gap: 12px; }
/* L'icône d'un événement machine tient dans le même rond que les visages :
   la colonne de gauche s'aligne, qu'une ligne parle d'une facture ou de Yann. */
.feed-icon {
  position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center; background: var(--panel-2);
  font-size: 15px; line-height: 1;
}
.feed-body { flex: 1 1 auto; min-width: 0; }
/* La phrase d'abord : le client en gras, ce qui lui est arrivé juste après, dans
   la même ligne et la même taille — c'est une phrase, pas un tableau. Le contexte
   (affaire, référence) passe en dessous, en gris, où il se lit quand on le cherche. */
.feed-line { font-size: var(--fs-body); line-height: 1.4; color: var(--ink); }
.feed-lead { font-weight: 700; padding: 0; }
.feed-lead.client-link { background: none; border: 0; font-size: inherit; display: inline; color: var(--ink); cursor: pointer; }
.feed-lead.client-link:hover { color: var(--accent); text-decoration: underline; }
.feed-phrase { color: var(--ink); }
.feed-detail {
  display: block; margin-top: 1px; padding: 0; text-align: left;
  font-size: var(--fs-caption); font-weight: 400; color: var(--muted);
  background: none; border: 0; font-family: inherit;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.feed-detail { cursor: pointer; }
button.feed-detail:hover { color: var(--accent); text-decoration: underline; }
.feed-post { font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }
/* Mise en forme des nouvelles (formatPost) : paragraphes, puces, liens. */
.feed-post p { margin: 0 0 6px; }
.feed-post p:last-child, .feed-post ul:last-child { margin-bottom: 0; }
.feed-post ul { margin: 0 0 6px; padding-left: 20px; list-style: disc; }
.feed-post li { margin: 2px 0; }
.feed-post a { color: var(--accent); text-decoration: underline; }
.feed-format { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.feed-fmt {
  min-width: 28px; height: 26px; padding: 0 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink);
  font: inherit; font-size: var(--fs-xs); line-height: 1;
}
.feed-fmt:hover, .feed-fmt[aria-expanded="true"] { border-color: var(--accent); }
.feed-emojis {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.feed-emojis[hidden] { display: none; }
.feed-emoji { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 18px; line-height: 1; }
.feed-emoji:hover { background: var(--panel-alt); }
.feed-meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Un point discret, pas un surlignage : ce qui est neuf se repère, le reste se lit. */
.feed-fresh .feed-icon::after {
  content: ""; position: absolute; top: -1px; left: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--panel);
}
.feed-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px;
  border-radius: 50%; background: var(--accent);
}
.feed-del { opacity: 0; transition: opacity .12s; }
.feed-item:hover .feed-del, .feed-del:focus { opacity: 1; }
.feed-more { display: block; margin: 16px auto 0; }

/* ---- Photos du fil --------------------------------------------------------
   Une nouvelle photo se regarde : seule, elle occupe la largeur du texte (bornée,
   sinon une photo de goûter pousse le fil hors de l'écran) ; à plusieurs, elles
   se rangent en vignettes carrées. Cliquer ouvre l'image dans un onglet. */
.feed-composer-main { flex: 1 1 auto; min-width: 0; }
.feed-shots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.feed-shot { position: relative; display: inline-block; }
.feed-shot img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.feed-shot-ko img { opacity: .4; outline: 2px solid var(--red); }
.feed-shot-wait {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .35); color: #fff; border-radius: 6px; font-weight: 700;
}
.feed-shot-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ink); color: var(--panel);
  font-size: 12px; line-height: 18px; cursor: pointer;
}
/* Les photos se regardent dans le fil, pas au clic : des tuiles qui prennent
   toute la largeur disponible (deux côte à côte dès que le panneau le permet)
   et une photo seule affichée en grand. Le clic ne sert plus qu'au détail. */
.feed-photos {
  display: grid; gap: 6px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 760px;
}
.feed-photos-solo { grid-template-columns: minmax(0, 1fr); }
.feed-photo { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.feed-photo img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; display: block; }
.feed-photos-solo .feed-photo img { height: auto; max-height: 460px; object-fit: contain; }
/* Une photo seule garde SA forme : largeur déduite de la hauteur, pas de bandes
   de fond autour d'un portrait posé dans un cadre de la largeur du fil. */
.feed-photos-solo { display: block; }
.feed-photos-solo .feed-photo { display: inline-block; max-width: 100%; }
.feed-photos-solo .feed-photo img { width: auto; max-width: 100%; }
.feed-tools { display: flex; gap: 2px; flex: 0 0 auto; }
.feed-edit textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body); line-height: 1.5;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); resize: vertical; min-height: 64px;
}
.feed-edit textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.feed-edit-actions { display: flex; gap: 6px; margin-top: 4px; }

/* La visionneuse : plein écran, dans la page. */
body.feed-zooming { overflow: hidden; }
.feed-zoom {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: rgba(0, 0, 0, .82); padding: 24px;
}
.feed-zoom img { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 6px; display: block; }
.feed-zoom-close, .feed-zoom-step {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, .45); border-radius: 50%; line-height: 1;
}
.feed-zoom-close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 22px; }
.feed-zoom-step { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 30px; }
.feed-zoom-prev { left: 12px; }
.feed-zoom-next { right: 12px; }
.feed-zoom-close:hover, .feed-zoom-step:hover { background: rgba(0, 0, 0, .75); }
.feed-zoom-count { position: absolute; bottom: 16px; color: #fff; font-size: var(--fs-xs); opacity: .8; }

/* J'aime et commentaires sous un événement machine : deux icônes discrètes,
   assez grandes pour se viser — un cœur de 11 px se clique mal au doigt. */
.feed-social { display: flex; gap: 4px; margin-top: 5px; }
.feed-react {
  border: 0; background: none; cursor: pointer; padding: 3px 8px; border-radius: 8px;
  color: var(--muted); font-size: 15px; font-family: inherit; line-height: 1.3;
}
.feed-react:hover { background: var(--accent-soft); color: var(--ink); }
.feed-react.on { color: var(--red); font-weight: 700; }

/* ---- Une nouvelle écrite à la main : la carte ------------------------------
   Ce que LinkedIn, Facebook ou Teams ont appris à tout le monde : qui parle
   d'abord (visage 40 px, nom en gras), le texte en corps de lecture, les
   réactions résumées en une ligne, puis deux vrais boutons. Les événements
   machine restent en lignes compactes : la nouvelle d'une personne se
   détache d'eux sans qu'on ait à la chercher. */
.feed-item-post .feed-body { display: flex; flex-direction: column; }
.feed-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feed-author-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.feed-author-name { font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.feed-author-meta { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed-author .feed-tools { align-self: flex-start; }
.feed-item-post .feed-post { font-size: var(--fs-md); line-height: 1.55; }
.feed-item-post .feed-edit textarea { font-size: var(--fs-md); }
/* Six lignes, puis « …voir plus » : un long compte rendu ne cache plus le fil. */
.feed-post.feed-clamp { max-height: calc(1.55em * 6); overflow: hidden; }
/* Le texte coupé s'efface vers le bas au lieu de trancher une ligne en deux. */
.feed-post.feed-clamped { -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.feed-more-text {
  align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 700;
}
.feed-more-text:hover { color: var(--accent); text-decoration: underline; }
.feed-more-text[hidden] { display: none; }

/* Une personne citée se lit comme un lien vers quelqu'un, pas comme du texte. */
.feed-mention {
  color: var(--accent-dark); background: var(--accent-soft); font-weight: 600;
  border-radius: 4px; padding: 0 3px; white-space: nowrap;
}
:root[data-theme="dark"] .feed-mention { color: var(--accent); }

.feed-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; font-size: var(--fs-sm); color: var(--muted);
}
.feed-sum-heart {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 10px; margin-right: 2px; vertical-align: -3px;
}
.feed-sum-comments {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit;
}
.feed-sum-comments:hover { color: var(--accent); text-decoration: underline; }
/* Le filet interne est plus léger que les traits du fil, et ne court que dans la carte. */
.feed-actions {
  display: flex; gap: 4px; margin-top: 8px; padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.feed-action {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 700;
}
.feed-action:hover { background: var(--panel-2); color: var(--ink); }
.feed-action.on { color: var(--red); }
.feed-action-icon { font-size: 16px; line-height: 1; }

/* Les commentaires : une bulle par personne, le nom en gras en tête. */
.feed-thread { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed-comment { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); }
.feed-bubble {
  min-width: 0; max-width: 100%; padding: 7px 12px 8px; border-radius: 4px 14px 14px 14px;
  background: var(--panel-2);
}
.feed-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed-comment-who { font-weight: 700; color: var(--ink); }
.feed-comment-at { font-size: var(--fs-xs); color: var(--muted); }
.feed-comment-body { color: var(--ink); line-height: 1.45; margin-top: 1px; overflow-wrap: anywhere; }
.feed-comment-body a { color: var(--accent); text-decoration: underline; }
.feed-comment-del {
  align-self: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px;
  opacity: 0; transition: opacity .12s;
}
.feed-comment:hover .feed-comment-del, .feed-comment-del:focus { opacity: 1; }
.feed-comment-form { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.feed-comment-form input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.feed-comment-form input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* La liste des personnes à citer, ouverte par « @ » (feed-ui.js, dans <body>). */
.feed-mention-list {
  position: fixed; z-index: 1900; width: 280px; margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.feed-mention-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink);
}
.feed-mention-item.on, .feed-mention-item:hover { background: var(--accent-soft); }

/* Arrivé depuis une mention : la nouvelle citée s'allume un instant. */
@keyframes feed-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.feed-flash { animation: feed-flash 1.8s ease-out; border-radius: 8px; }
.feed-detail-quote { font-style: italic; }

/* Un anniversaire, c'est un visage : la photo remplace l'icône, l'emoji
   revient en pastille. Sans photo, les initiales restent, et la pastille aussi. */
.feed-face { position: relative; width: 32px; background: none; }
.feed-face-badge { position: absolute; top: 19px; right: -5px; font-size: 13px; line-height: 1; }
/* Le logo d'un client : une tuile carrée (un logo se rogne mal en rond), l'image
   entière sur fond clair, les initiales du client dessous en attendant ou à défaut. */
.feed-avatar-logo { border-radius: 8px; }
.feed-avatar-logo img { object-fit: contain; padding: 2px; background: var(--panel); border-radius: 8px; }

/* Le visage de quelqu'un : un rond aux initiales, la photo par-dessus quand il
   y en a une. Les initiales ne sont pas un pis-aller affiché « en attendant » —
   elles restent dessous, donc une photo qui ne charge pas ne laisse jamais un
   trou. Leur couleur vient du nom (--av-h, posée par feed-ui.js) : chacun garde
   la sienne d'une nouvelle à l'autre. */
.feed-avatar {
  position: relative; display: inline-grid; place-items: center; overflow: hidden;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: hsl(var(--av-h, 211) 70% 90%); color: hsl(var(--av-h, 211) 50% 32%);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em; user-select: none;
}
:root[data-theme="dark"] .feed-avatar { background: hsl(var(--av-h, 211) 30% 26%); color: hsl(var(--av-h, 211) 70% 82%); }
.feed-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-avatar-sm { width: 20px; height: 20px; font-size: 9px; }
.feed-avatar-md { width: 28px; height: 28px; font-size: 10px; }
.feed-avatar-lg { width: 40px; height: 40px; font-size: var(--fs-sm); }
/* Sur téléphone, le champ prend toute la largeur : mon visage seul sur sa ligne ne dit rien. */
@media (max-width: 640px) { .feed-composer-face { display: none; } }

/* ---- Le fil : la page ------------------------------------------------------
   Ce que font LinkedIn, Facebook ou X, et qui rend un fil agréable :
   — une COLONNE de lecture (~680 px), pas une ligne de 1 500 px que l'œil
     doit traverser de bout en bout ;
   — des cartes blanches posées sur le fond de la page, séparées par de
     l'air plutôt que par des traits : une carte = une chose ;
   — ce qu'une personne a écrit a sa carte ; l'activité automatique (factures,
     offres, jalons) est rassemblée en une carte compacte par série, une
     ligne chacune, sans boutons tant que personne n'a réagi. */
/* Calé à gauche sous le titre de page : centré, il laissait un vide entre le
   ruban de navigation et les nouvelles sur les écrans larges. */
.feed-panel { max-width: 680px; margin: 0 0 32px; }
/* Grand écran : la colonne de lecture garde ses 680 px, et la place à droite
   sert au bilan de la semaine plutôt qu'à du vide. La colonne reste visible en
   défilant (sticky) : c'est elle qui filtre le fil. */
.feed-aside { display: none; }
@media (min-width: 1180px) {
  .feed-layout { display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 360px); gap: 24px; align-items: start; }
  .feed-layout .feed-panel { max-width: none; }
  .feed-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
}
.feed-aside-card { padding: 12px 14px; }
.feed-aside-title {
  margin: 0 0 8px; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600;
}
.feed-sum-list, .feed-leave-list { list-style: none; margin: 0; padding: 0; }
.feed-sum-row {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); padding: 7px 8px; margin: 0 -8px;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: var(--fs-sm); color: var(--ink); text-align: left; cursor: pointer;
}
.feed-sum-row:hover:not(:disabled) { background: var(--accent-soft); }
.feed-sum-row.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.feed-sum-row:disabled { color: var(--muted); cursor: default; }
.feed-sum-icon { width: 20px; text-align: center; }
.feed-sum-label { flex: 1 1 auto; min-width: 0; }
.feed-sum-label small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.feed-sum-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.feed-sum-row:disabled .feed-sum-count { font-weight: 400; }
.feed-sum-reset { margin-top: 6px; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.feed-sum-reset:hover { text-decoration: underline; }
.feed-leave-list li { padding: 4px 0; font-size: var(--fs-sm); }
.feed-bday { display: flex; align-items: center; gap: 10px; }
.feed-bday small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.feed-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 2px 0; padding: 4px 6px 4px 12px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
}
.feed-filter-chip button { background: none; border: 0; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.feed-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 4px 2px 14px;
}
.feed-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.feed-composer.feed-card { padding: 12px 14px; margin-bottom: 8px; }
/* Le champ prend la place qui reste : les boutons restent sur sa ligne. */
.feed-composer.feed-card { flex-wrap: nowrap; }
.feed-composer.feed-card .feed-composer-main { flex: 1 1 0; }
@media (max-width: 640px) { .feed-composer.feed-card { flex-wrap: wrap; } .feed-composer.feed-card .feed-composer-main { flex-basis: 100%; } }
.feed-day-label { margin: 22px 4px 8px; }
.feed-list { display: flex; flex-direction: column; gap: 10px; }

.feed-item-post { padding: 14px 16px 6px; }
.feed-item-post.feed-pinned { background: var(--accent-soft); }

.feed-activity-card { padding: 2px 0; }
.feed-activity { list-style: none; margin: 0; padding: 0; }
.feed-row { padding: 11px 16px; align-items: center; }
.feed-row .feed-body { align-self: center; }
.feed-row + .feed-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.feed-row-personal { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.feed-activity-card .feed-row:first-child { border-radius: 12px 12px 0 0; }
.feed-activity-card .feed-row:last-child { border-radius: 0 0 12px 12px; }
.feed-activity-card .feed-row:only-child { border-radius: 12px; }
.feed-row .feed-detail { margin-top: 2px; }
.feed-row .feed-thread, .feed-row .feed-comment-form { margin-top: 8px; }
/* Les réactions d'une ligne d'activité : à droite, et seulement quand elles
   servent — au survol, au clavier, ou quand quelqu'un a déjà réagi. Au doigt
   (pas de survol), elles restent visibles. */
.feed-row-social { flex: 0 0 auto; display: flex; gap: 0; align-self: center; }
.feed-row-social .feed-react { font-size: 13px; padding: 3px 6px; }
@media (hover: hover) {
  .feed-row-social:not(.has-reactions) { opacity: 0; transition: opacity .12s; }
  .feed-row:hover .feed-row-social, .feed-row:focus-within .feed-row-social { opacity: 1; }
}
@media (max-width: 640px) {
  .feed-item-post { padding: 12px 12px 6px; }
  .feed-row { padding: 10px 12px; }
}
.dd-client { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.dd-client:first-child { border-top: 0; }
.dd-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.dd-pill-high { background: var(--red-soft); color: var(--red); }
.dd-pill-medium { background: var(--amber-soft); color: var(--amber); }
.dd-pill-stale { background: var(--panel-2); color: var(--muted); }
.dd-clients h3 { font-size: var(--fs-caption); color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.dd-foot { margin-top: 10px; }
@media (max-width: 900px) { .dd-grid { grid-template-columns: 1fr; } .dd-kind { display: none; } }
@media (max-width: 600px) { .dd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-kpi strong { font-size: 1.2rem; } .dd-alert-amount { display: none; } }

/* Photos Odoo (employés, clients) : l'image se superpose aux initiales, qui
   restent visibles dessous si elle manque ou échoue (l'img se retire seule). */
.person-avatar { position: relative; overflow: hidden; }
.person-avatar-img,
.client-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--panel);
}
.hero-pm-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.client-logo {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: var(--fs-body);
}
.client-logo-img { border-radius: 8px; object-fit: contain; padding: 3px; }
/* Le logo se clique pour en poser un autre : un crayon au survol, rien d'autre
   tant que la souris n'y est pas. Pendant l'envoi, la tuile pâlit. */
.client-logo-edit { cursor: pointer; }
.client-logo-pen {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px;
  color: #fff; background: rgba(20, 30, 50, .55); opacity: 0; transition: opacity .12s; border-radius: 8px;
}
.client-logo-edit:hover .client-logo-pen, .client-logo-edit:focus-within .client-logo-pen { opacity: 1; }
.client-logo.is-busy { opacity: .5; pointer-events: none; }
.client-summary-head { align-items: center; justify-content: flex-start; }
.client-summary-head h2 { margin-right: auto; }
.client-summary-head h2:has(+ .client-sites) { margin-right: 0; }
.client-summary-head .client-sites { margin-right: auto; }

/* Empty board explains itself: "my tasks" is the right default, but a blank
   board with no reason reads as broken. */
.task-board-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* ==========================================================================
   Plan de charge (planning-ui.js)
   Un seul axe de semaines pour les trois bandes : bandeau charge équipe,
   Gantt portefeuille, charge par personne. La largeur de colonne est le même
   token partout (--wl-col), sinon les bandes ne se lisent plus ensemble.
   ========================================================================== */

#workloadRoot {
  --wl-col: 46px;
  --wl-label: 210px;
  display: grid;
  gap: 16px;
}

.wl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wl-horizon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wl-horizon .mini-button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Ce que le modèle ne sait pas, dit avant les chiffres. */
.wl-coverage {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.wl-coverage ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.wl-panel .panel-header {
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.wl-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-wrap: wrap;
}

.wl-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}

/* Échelle de charge — sémantique, indépendante de l'accent de marque. */
.wl-under, .wl-cell.wl-under, .wl-band-fill.wl-under { background: var(--blue-soft); }
.wl-ok,    .wl-cell.wl-ok,    .wl-band-fill.wl-ok    { background: var(--aqua-soft); }
.wl-full,  .wl-cell.wl-full,  .wl-band-fill.wl-full  { background: var(--amber-soft); }
.wl-over,  .wl-cell.wl-over,  .wl-band-fill.wl-over  { background: var(--red-soft); }
.wl-legend i.wl-under { background: var(--blue); }
.wl-legend i.wl-ok { background: var(--aqua); }
.wl-legend i.wl-full { background: var(--amber); }
.wl-legend i.wl-over { background: var(--red); }
.wl-baseline-key { font-variant-numeric: tabular-nums; }

/* ---- bandeau charge équipe ---------------------------------------------- */

.wl-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  padding-top: 6px;
  overflow-x: auto;
}

.wl-band-col {
  flex: 1 0 var(--wl-col);
  min-width: var(--wl-col);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}

.wl-band-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--fill);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.wl-band-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

/* Le futur est hachuré : une prévision ne doit pas se lire comme un relevé. */
.wl-band-col.is-future .wl-band-fill {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 4px, transparent 4px 8px);
}

.wl-band-pct,
.wl-band-week {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wl-band-pct { font-weight: 600; color: var(--ink); }

.wl-baseline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--muted);
  pointer-events: none;
  z-index: 1;
}

.wl-band-note {
  margin: 8px 0 0;
}

/* ---- grille commune Gantt / personnes ----------------------------------- */

.wl-grid-scroll {
  overflow-x: auto;
}

.wl-grid {
  min-width: fit-content;
  display: grid;
  gap: 2px;
}

.wl-row {
  display: grid;
  grid-template-columns: var(--wl-label) 1fr;
  align-items: center;
  gap: 8px;
}

.wl-row-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 2px 0;
}

.wl-row-label strong {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-row-label .subtext {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-project-link {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wl-project-link:hover strong { color: var(--accent); }

.wl-row-track {
  display: grid;
  grid-template-columns: repeat(var(--week-count), minmax(var(--wl-col), 1fr));
  align-items: center;
  min-height: 24px;
}

.wl-head {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  padding-bottom: 2px;
}

.wl-head-week {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wl-head-week.is-current {
  color: var(--accent);
  font-weight: 700;
}

/* ---- barres Gantt -------------------------------------------------------- */

.wl-bar {
  position: relative;
  height: 18px;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  padding: 0 6px;
  min-width: 0;
}

.wl-bar-subscription {
  background: var(--violet-soft);
  border-color: var(--violet);
}

/* Dates dérivées d'un plan de facturation automatique : hachure, pour qu'une
   échéance calculée ne se lise jamais comme un engagement de chantier. */
.wl-bar.is-derived {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.07) 0 5px, transparent 5px 10px);
}

.wl-bar.open-left { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wl-bar.open-right { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.wl-bar-text {
  font-size: var(--fs-xs);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-ms {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--teal-strong);
  border: 1px solid var(--panel);
  transform: translateY(-50%) rotate(45deg);
}

.wl-ms.is-past { background: var(--muted); }

/* ---- cellules de charge par personne ------------------------------------ */

.wl-cells { gap: 2px; }

.wl-cell {
  height: 22px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--fill);
}

.wl-cell.wl-none { background: var(--fill); }
.wl-cell.wl-off { background: transparent; color: var(--muted); }
.wl-cell.is-current { outline: 1px solid var(--accent); outline-offset: -1px; }

@media (max-width: 760px) {
  #workloadRoot { --wl-label: 130px; --wl-col: 38px; }
  .wl-band { height: 120px; }
}

/* ==========================================================================
   Onglet Tasks — une liste, pas un tableau à colonnes
   La question posée en ouvrant l'onglet est « qu'est-ce que j'ai à faire »,
   et elle se répond par ordre d'urgence. Le statut est une puce, pas une
   colonne : personne ne déplaçait de cartes.
   ========================================================================== */

.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tasks-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Bascule à deux positions : mon travail, ou celui de l'équipe. */
.scope-switch {
  display: inline-flex;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}

.scope-btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.scope-btn.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(24, 33, 58, 0.12);
}

.scope-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.task-list {
  display: grid;
  gap: 22px;
}

.tk-group h2 {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tk-count {
  font-variant-numeric: tabular-nums;
  background: var(--fill);
  color: var(--muted);
  border-radius: 999px;
  padding: 0 7px;
  font-size: var(--fs-xs);
}

.tk-group-overdue h2 { color: var(--red); }
.tk-group-overdue .tk-count { background: var(--red-soft); color: var(--red); }

.tk-group-done > summary {
  cursor: pointer;
  list-style: none;
}
.tk-group-done > summary::-webkit-details-marker { display: none; }
.tk-group-done > summary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-right: 6px;
}
.tk-group-done[open] > summary::before { content: "\25BE"; }

.tk-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.tk-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.tk-row:last-child { border-bottom: none; }
.tk-row:hover { background: var(--panel-2); }

.tk-row.is-done .tk-title {
  text-decoration: line-through;
  color: var(--muted);
}

.tk-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.tk-title {
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tk-main:hover .tk-title { color: var(--accent); }

.tk-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tk-owner { color: var(--ink); font-weight: 600; }

.tk-chips {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.task-chip-perso { background: var(--aqua-soft); color: var(--teal-strong); }
.task-chip-regie { background: var(--amber-soft); color: var(--amber); }
.task-chip-followup { background: var(--violet-soft); color: var(--violet); }
.task-chip-recurring { background: var(--accent-soft); color: var(--accent); }
.task-chip-mail { background: var(--blue-soft); color: var(--blue); }
/* La trace du mail d'origine, sous la description d'une tâche dépliée. */
.tk-mail-source { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--muted); }
.tk-mail-source a { color: var(--accent); }

/* Follow-ups : la ligne en attente est grisée (ce n'est pas à faire), la date
   de retour remplace l'échéance. Le menu horloge est un <details> ancré à droite. */
.tk-row.is-parked .tk-title { color: var(--muted); }
.tk-return { color: var(--violet); font-weight: 600; }
.tk-group-followup h2 { color: var(--violet); }
.tk-group-followup .tk-count { background: var(--violet-soft); color: var(--violet); }
.tk-group-hint {
  margin: 0 0 8px;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.tk-park { position: relative; display: inline-flex; }
.tk-park > summary {
  list-style: none;
  cursor: pointer;
}
.tk-park > summary::-webkit-details-marker { display: none; }
.tk-park-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.tk-park-title {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tk-park-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.tk-park-date input { font-size: var(--fs-sm); }
.task-chip-review { background: var(--blue-soft); color: var(--blue); }
.task-chip-blocked { background: var(--red-soft); color: var(--red); }

.tk-date {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tk-row.is-late .tk-date { color: var(--red); }

/* Les actions restent visibles, en gris discret : cachées au survol, elles
   n'existaient pas pour qui ne les cherchait pas — et pas du tout au toucher.
   Elles se colorent à l'approche de la ligne. */
.tk-actions {
  display: inline-flex;
  gap: 2px;
}

/* Boutons de ligne : 28 px et non 38, et surtout CENTRÉS — sans flex, le SVG
   se posait sur la ligne de base du texte, donc haut et à gauche dans sa boîte.
   Chaque symbole porte la couleur de son geste : orange pour modifier, rouge
   pour supprimer. */
.tk-actions .icon-button {
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--amber);
}

.tk-actions .icon-button.danger-button { color: var(--red); }

.tk-actions .icon-button:hover {
  background: var(--amber-soft);
  border-color: var(--amber);
}

.tk-actions .icon-button.danger-button:hover {
  background: var(--red-soft);
  border-color: var(--red);
}

#taskForm label.task-personal-toggle {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

#taskForm label.task-personal-toggle input {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 700px) {
  .tk-row {
    grid-template-columns: auto 1fr auto;
    row-gap: 4px;
  }
  .tk-chips { grid-column: 2; }
  .tk-actions { opacity: 1; grid-column: 3; }
}



/* Une seule ligne d'outils : les filtres sont secondaires, ils ne doivent pas
   repousser le bouton de création hors du coin haut-droit. */
.tasks-toolbar-right select {
  max-width: 190px;
  min-width: 0;
}

.tasks-toolbar-right .searchable-select,
.tasks-toolbar-right .searchable-select input {
  max-width: 190px;
}

/* Le message de confirmation porte parfois un avertissement sur sa propre
   ligne (suppression d'une activité Odoo) : textContent garde les sauts de
   ligne, encore faut-il les rendre. */
#confirmMessage {
  white-space: pre-line;
}

.tk-actions .icon-button svg {
  display: block;
}

/* Une ligne se déplie sur sa description : écrire deux phrases sur une tâche ne
   doit pas demander d'ouvrir une fenêtre. Le bloc occupe toute la largeur de la
   ligne, sous elle. */
.tk-detail {
  grid-column: 1 / -1;
  padding: 2px 0 6px 32px;
}

.tk-desc {
  width: 100%;
  resize: vertical;
  min-height: 58px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.tk-desc:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}

.tk-main[aria-expanded="true"] .tk-title { color: var(--accent); }

@media (max-width: 700px) {
  .tk-detail { padding-left: 0; }
}

/* Une approbation en attente n'est pas une tâche — elle vit dans Odoo — mais
   c'est du travail assigné : elle apparaît donc là où l'on regarde ce qu'on a
   à faire, sous une forme qui ne se confond pas avec une ligne de tâche. */
.tk-approvals {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}

.tk-approvals:hover { border-color: var(--ink); }

.tk-approvals-label {
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

.tk-approvals-go {
  margin-left: auto;
  color: var(--amber);
  font-weight: 600;
  white-space: nowrap;
}

.my-tasks-dropdown .tk-approvals { margin-bottom: 6px; }

/* Une demande en attente (km, congés, revue TMS) est une ligne de liste comme
   une autre — c'est du travail assigné — mais elle ne se coche pas : la décision
   se prend sur l'écran dédié. D'où une flèche à la place de la coche. Pas de
   couleur d'alerte (retour d'Arnaud, 24/09/2026) : elle ne doit pas attirer
   l'œil plus que les tâches autour d'elle. */
.tk-approval-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong, var(--line));
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-chip-approval { background: var(--fill); color: var(--muted); }

/* ——— Aujourd'hui ———
   Le seul bloc encadré de la liste : c'est la réponse à « qu'est-ce que je fais
   aujourd'hui », elle doit se trouver sans chercher. Accent de l'app, pas une
   couleur d'alerte — le rouge reste réservé aux retards. */
.tk-today {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 12px 12px 12px;
  display: grid;
  gap: 10px;
}
.tk-today-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tk-today-head h2 {
  margin: 0;
  font-size: var(--fs-h3, 1.05rem);
  color: var(--ink);
}
.tk-today-date {
  color: var(--muted);
  font-size: var(--fs-caption);
}
.tk-today-date::first-letter { text-transform: uppercase; }
.tk-today-progress {
  margin-left: auto;
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tk-today-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.tk-sun.is-on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

.mywork-approvals { margin-bottom: 10px; }

.tasks-list-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le panneau « par personne » remplace la liste : il occupe la même place et
   n'ajoute donc aucune hauteur. */
#taskAssignmentsPanel .planning-assignments-panel { margin: 0; }

/* Vue « toute l'équipe » : un bloc replié par personne. Treize blocs ouverts
   d'un coup seraient un mur ; le nom et le nombre de tâches ouvertes suffisent
   à choisir lequel ouvrir. */
.assign-person {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--panel);
}

.assign-person > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
}

.assign-person > summary::-webkit-details-marker { display: none; }

.assign-person > summary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: var(--fs-caption);
}

.assign-person[open] > summary::before { content: "\25BE"; }
.assign-person[open] > summary { border-bottom: 1px solid var(--line); }
.assign-person > .assign-stats { padding: 10px 12px 0; }
.assign-person > .assign-rows { padding: 0 12px 10px; }

#taskWho { max-width: 190px; }

/* Groupes repliés (« Plus tard », « Sans date », « Terminées ») : même flèche
   que le reste de l'app, et le compte reste lisible fermé. */
.tk-group > summary {
  cursor: pointer;
  list-style: none;
}

.tk-group > summary::-webkit-details-marker { display: none; }

.tk-group > summary::before {
  content: "\25B8";
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-right: 6px;
}

.tk-group[open] > summary::before { content: "\25BE"; }
.tk-group > summary > h2,
.tk-group > summary > .tk-group-head { display: inline-flex; }

/* Le nom du projet (et du client) mène à la fiche client ; le reste de la ligne
   continue de déplier les tâches. Deux gestes distincts sur une même ligne, donc
   une cible cliquable explicite. */
.ap-open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.ap-open:hover { color: var(--accent); text-decoration: underline; }
.ap-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Trois totaliseurs en tête du panneau par personne. Des bulles plutôt qu'une
   phrase : un chiffre se repère, une phrase se lit. */
.assign-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.panel-header > .assign-stats {
  margin-bottom: 0;
  margin-right: auto;
}

.panel-header > .assign-stats:empty { display: none; }

.assign-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.assign-stat-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.assign-stat strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Le sélecteur de personne ne doit pas pousser la navigation de semaine à la
   ligne suivante : les deux tiennent ensemble tant qu'il reste borné. */
#tsPersonFilter { max-width: 190px; }

/* ---------------------------------------------------------------------------
   Jalons de projet (steps-model.js) — le bandeau « où on en est »
   ---------------------------------------------------------------------------
   Il ferme l'en-tête du projet, avant les panneaux chiffrés : on lit d'abord où
   en est le chantier, ensuite ce qu'il a coûté et rapporté. Une puce = un fait,
   avec sa date et, s'il déclenche une facture, le montant en jeu. */
.steps-strip-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.steps-strip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.steps-strip-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.steps-strip-head .subtext {
  flex: 1 1 auto;
}

.steps-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  min-width: 0;
}

.step-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--fill);
  color: var(--muted);
}

.step-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.step-chip-label {
  font-size: 0.85rem;
  white-space: nowrap;
}

.step-chip-date {
  max-width: 130px;
  padding: 1px 4px;
  font-size: 0.78rem;
}

/* Le montant que ce jalon déclenche : présent seulement quand un jalon de
   facturation y est rattaché — c'est le repère visuel qui dit « ici, il y a de
   l'argent au bout ». */
.step-chip-money {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step-chip-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.step-chip-actions .mini-button {
  padding: 2px 6px;
  font-size: 0.75rem;
}

.step-done {
  border-color: var(--green);
}

.step-done .step-chip-mark {
  background: var(--green-soft);
  color: var(--green);
}

/* En retard = prévu, pas fait. Jamais « pas facturé » : cette distinction est
   toute la raison d'être des jalons de projet (cf. steps-model.js). */
.step-late {
  border-color: var(--red);
}

.step-late .step-chip-mark {
  background: var(--red-soft);
  color: var(--red);
}

.step-chip.is-next {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.step-chip.is-optional .step-chip-label {
  color: var(--muted);
}

@media (max-width: 720px) {
  .steps-strip {
    flex-direction: column;
  }

  .step-chip {
    width: 100%;
  }

  .step-chip-body {
    flex: 1 1 auto;
  }
}

/* Libellé d'un jalon : éditable sur place. Un jalon ajouté à la main s'appelle
   « Jalon » tant qu'on ne peut pas le renommer — autant ne pas l'ajouter. Le
   champ se donne l'air d'un texte jusqu'à ce qu'on le survole ou l'active. */
.step-chip-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.step-chip-label-input {
  min-width: 60px;
  max-width: 180px;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}

.step-chip-label-input:hover {
  border-color: var(--line);
}

/* Note du jalon (idée #10 du Labo) : une ligne discrète sous le libellé, qui
   ne se montre en champ qu'au survol ou à la saisie. */
.step-chip-note-input {
  min-width: 60px;
  max-width: 200px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
}

.step-chip-note-input:hover {
  border-color: var(--line);
}

.step-chip-note-input:focus {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--ink);
  outline: none;
}

.step-chip-label-input:focus {
  border-color: var(--accent);
  background: var(--panel);
  outline: none;
}

/* Colonne « Prochain jalon » de la vue Clients : deux lignes, le dernier fait
   puis le prochain. Le seul prochain jalon ne disait pas où on en est. */
.ms-track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.ms-track-done {
  color: var(--green);
}

.ms-track-next {
  color: var(--ink);
}

.ms-track-next.is-late {
  color: var(--red);
}

.ms-track .is-empty {
  color: var(--muted);
  font-style: italic;
}

.ms-track-money {
  color: var(--accent);
  font-weight: 600;
}

/* ——— Tâches sans friction (24/09/2026) ——— */

/* Saisie rapide : un champ, la phrase telle qu'on la dit. Ce qui a été compris
   s'affiche en pastilles sous le champ AVANT d'appuyer sur Entrée. */
.tk-quickadd { display: grid; gap: 6px; margin: 0 0 14px; }
.tk-quickadd[hidden] { display: none; }
.tk-quickadd input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-body, 0.95rem);
}
.tk-quickadd input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.tk-quick-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; }
.tk-quick-preview:empty { display: none; }
.tk-qchip {
  font-size: var(--fs-xs);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
}
.tk-qchip.is-parsed { background: var(--accent-soft); color: var(--accent); }
.tk-qchip.is-unknown { background: var(--amber-soft); color: var(--amber); }
.tk-quick-hint { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }

/* La date d'une ligne est un bouton : un clic, un menu, la nouvelle date. */
.tk-datemenu > summary.tk-date-btn {
  list-style: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.tk-datemenu > summary.tk-date-btn::-webkit-details-marker { display: none; }
.tk-datemenu > summary.tk-date-btn:hover,
.tk-datemenu[open] > summary.tk-date-btn { background: var(--fill); }

.tk-star { color: var(--amber); margin-right: 4px; }
.task-chip-new { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* En-tête de groupe : le titre, et pour les retards le bouton de tri. */
.tk-group-head { display: flex; align-items: center; gap: 12px; }
.tk-group-head h2 { margin-bottom: 6px; }
.tk-triage-open {
  margin: 0 0 6px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-caption);
  cursor: pointer;
}
.tk-triage-open:hover { border-color: var(--accent); color: var(--accent); }

/* Ligne dépliée : pour qui / projet / importante, puis la description. */
.tk-detail-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr) auto;
  gap: 8px 12px;
  align-items: end;
  margin-bottom: 8px;
}
.tk-detail-fields label { display: grid; gap: 3px; font-size: var(--fs-caption); color: var(--muted); }
.tk-detail-fields select { width: 100%; }
.tk-detail-fields .tk-detail-check { display: flex; align-items: center; gap: 6px; color: var(--ink); padding-bottom: 6px; }
@media (max-width: 700px) {
  .tk-detail-fields { grid-template-columns: 1fr; }
}

/* Sélection multiple */
.tk-select { width: 18px; height: 18px; margin: 1px; accent-color: var(--accent); cursor: pointer; }
.tk-row.is-selected { background: var(--accent-soft); }
.tk-bulkbar {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.tk-bulkbar[hidden] { display: none; }
.tk-bulk-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-bulk-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 700px) { .tk-bulkbar { bottom: 72px; } }

/* Tri des retards : une carte, sept décisions, une touche chacune. */
.tk-triage { max-width: 560px; padding: 18px; }
.tk-triage .modal-header { margin-bottom: 12px; }
.tk-triage-pos { color: var(--muted); font-weight: 500; font-size: var(--fs-caption); margin-left: 8px; font-variant-numeric: tabular-nums; }
.tk-triage-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  margin-bottom: 12px;
}
.tk-triage-title { margin: 0 0 4px; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.tk-triage-meta { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-caption); }
.tk-triage-late { margin: 0; color: var(--red); font-size: var(--fs-caption); font-weight: 600; }
.tk-triage-desc { margin: 8px 0 0; color: var(--ink); font-size: var(--fs-sm); white-space: pre-wrap; }
.tk-triage-ask { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-caption); }
.tk-triage-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tk-triage-actions kbd {
  font: inherit;
  font-size: var(--fs-xs);
  padding: 0 5px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  opacity: 0.8;
}
.tk-triage-summary { margin: 4px 0 14px; color: var(--ink); }

/* Fenêtre de tâche allégée */
.task-date-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.task-more { margin: 4px 0 10px; }
.task-more > summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); padding: 4px 0; }
.task-more[open] > summary { margin-bottom: 8px; }

/* Onglet « Call » de Tasks : le numéro du contact de l'opp, cliquable (tel:). */
.task-chip-call {
  background: var(--teal-soft, var(--accent-soft));
  color: var(--teal-strong, var(--accent));
  text-decoration: none;
}
.task-chip-call:hover { text-decoration: underline; }

/* Le mail d'origine d'une tâche (add-in Outlook). Texte brut, lu tel quel. */
.mail-modal { width: min(720px, calc(100vw - 32px)); }
.mail-modal-meta { margin: 0 0 10px; font-size: var(--fs-caption); color: var(--muted); white-space: pre-line; }
.mail-modal-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
button.task-chip-mail { border: 0; font: inherit; cursor: pointer; }

/* Vue P&ID : l'éditeur occupe toute la zone de contenu, sous l'en-tête de page. */
.pid-view.active { display: flex; flex-direction: column; height: calc(100vh - 118px); min-height: 520px; padding: 0; }
.pid-links { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pid-frame { flex: 1; width: 100%; border: 1px solid var(--line, #d9dfdc); border-radius: 8px; background: #fff; }
/* Vue CAO 3D (WIP) : bandeau de publication au-dessus de la visionneuse */
.cad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 2px 8px; font-size: 13px; }
.cad-bar .cad-pub, .cad-bar .cad-progress { color: var(--muted, #5b6170); }
.cad-publish { margin-left: auto; cursor: pointer; padding: 5px 12px; border-radius: 6px; background: #335fff; color: #fff; font-weight: 600; }

/* Adoption › connecteur Claude : une session sur un client sans rien rangé, un refus de portée */
.dd-adopt-warn { color: var(--red); font-weight: 600; }

/* ==========================================================================
   TÉLÉPHONE — second audit (10/10/2026)
   Ce bloc reste en FIN de fichier : les modules (tréso, objectifs, tâches,
   Market DB…) posent leurs propres règles plus haut et gagneraient sinon la
   cascade. Ce qu'il corrige, mesuré sur un écran de 375 px :
   - Go-to-Market et Cash forecast faisaient 690 et 1 271 px de large (grille
     de six tuiles, bloc d'hypothèses sans min-width:0) : la page se zoomait en
     arrière ; toute table trop large est désormais dans un cadre défilant
     (mobile-nav.js) et le reste est bloqué à la largeur de l'écran ;
   - « Enregistré » restait affiché en permanence sous la barre du haut, par-
     dessus le coin droit de chaque vue ;
   - le tiroir faisait deux écrans de haut (19 entrées sur une colonne + panneau
     profil de 260 px) : deux colonnes, profil sur deux lignes ;
   - une trentaine de cibles tactiles sous 32 px (boutons de période, mise en
     forme des notes, fil d'Ariane, filtres Market DB, champs du Line sizing).
   ========================================================================== */
@media (max-width: 900px) {
  /* clip et non hidden : hidden ferait de .main un conteneur de défilement et
     la barre du haut cesserait de coller au viewport. */
  .main,
  .view {
    overflow-x: clip;
  }

  .m-tablescroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .topbar .save-status.is-saved {
    display: none;
  }

  /* --- tiroir : deux colonnes ------------------------------------------- */
  .nav-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px;
  }

  .nav-group-label {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .nav-tab {
    min-width: 0;
    min-height: 44px;
    padding: 10px 10px;
    gap: 6px;
  }

  .nav-tab > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-badge {
    margin-left: auto;
  }

  .profile-panel {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
  }

  .profile-panel label {
    margin: 0;
  }

  .profile-panel .profile-links {
    grid-column: 1 / -1;
  }

  /* --- pastilles de la barre du bas ------------------------------------- */
  .mobile-tab {
    position: relative;
  }

  .mobile-tab-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--panel);
  }

  .mobile-tab-badge.is-red {
    background: var(--red);
  }

  .mobile-tab-badge.is-warn {
    background: var(--amber);
  }

  /* --- contrôles segmentés : ils défilent au lieu de pousser la page ------ */
  .segmented,
  .dd-period {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented-btn,
  .dd-period button {
    flex: 1 0 auto;
    min-height: 40px;
  }

  /* --- cibles tactiles ---------------------------------------------------- */
  .rich-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
  }

  .crumb-link {
    min-height: 36px;
    padding: 6px 4px;
  }

  .project-breadcrumb {
    align-items: center;
  }

  .project-link,
  .client-link {
    padding: 6px 0;
  }

  .mini-button {
    min-width: 36px;
  }

  .view details > summary {
    min-height: 36px;
    padding: 8px 0;
  }

  .mkt-fbtn,
  .mkt-btn {
    min-height: 36px;
  }

  .view select,
  .view input[type="text"],
  .view input[type="number"],
  .view input[type="date"],
  .view input[type="search"],
  .view input[type="email"],
  .view input[type="url"] {
    min-height: 40px;
  }

  .view .step-chip-label-input,
  .view .step-chip-note-input,
  .view .daf-meta input {
    min-height: 0;
  }

  /* --- tâches : filtres sur deux colonnes pleine largeur ------------------ */
  .tasks-toolbar-right,
  .tasks-list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .tasks-toolbar-right > select,
  .tasks-list-filters > select,
  .tasks-toolbar-right .searchable-select {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    min-width: 0;
  }

  .tasks-toolbar-right > .secondary-button,
  .tasks-toolbar-right > .primary-button {
    flex: 1 1 calc(50% - 8px);
  }

  /* --- Go-to-Market (le module injecte son CSS après cette feuille : même
     spécificité, il gagnerait — d'où le `html`) -------------------------------- */
  html #gtmView .gtm-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html #gtmView .gtm-grid2 {
    grid-template-columns: 1fr;
  }

  /* --- Cash forecast ------------------------------------------------------- */
  #cashflowView .hyp-block,
  #cashflowView .cf-section,
  #objectivesView .hyp-block {
    min-width: 0;
  }

  #cashflowView .btn,
  #objectivesView .btn {
    min-height: 40px;
  }

  /* --- P&ID : l'éditeur prend la hauteur qui reste sous la barre du haut et
     au-dessus de la barre d'onglets ------------------------------------------ */
  .pid-view.active {
    height: calc(100dvh - 56px - 14px - 72px - env(safe-area-inset-bottom));
    min-height: 420px;
  }
}

/* --- Idea lab (ideas-ui.js) ------------------------------------------
   Pleine largeur comme les autres vues, des cartes posées sur le fond. Couleur
   des statuts : bleu à trier, violet validée, ambre en cours, vert terminée,
   rouge refusée — la même sur la tuile, la pastille, le liseré et la réponse. */
.ib-page { display: grid; gap: 18px; padding-bottom: 32px; }
.ib-hero {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 22px 24px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(120deg, var(--accent-soft), var(--aqua-soft));
}
.ib-hero-text { flex: 1 1 380px; min-width: 0; }
.ib-hero h2 { margin: 0 0 6px; font-size: var(--fs-lg); line-height: var(--lh-heading); }
.ib-hero p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.ib-hero-cta { flex: 0 0 auto; }

.ib-flash { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; }
.ib-flash-ok { color: var(--green); background: var(--green-soft); }
.ib-flash-error { color: var(--red); background: var(--red-soft); }

.ib-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ib-tile {
  --tile: var(--muted); --tile-soft: var(--fill);
  display: grid; gap: 2px; justify-items: start; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font: inherit; box-shadow: inset 0 3px 0 var(--tile);
  transition: border-color .15s, background .15s;
}
.ib-tile strong { font-size: var(--fs-xl); line-height: 1.1; color: var(--tile); }
.ib-tile span { font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
.ib-tile:hover { border-color: var(--tile); }
.ib-tile.is-active { background: var(--tile-soft); border-color: var(--tile); }
.ib-tile-nouvelle { --tile: var(--blue); --tile-soft: var(--blue-soft); }
.ib-tile-validee { --tile: var(--violet); --tile-soft: var(--violet-soft); }
.ib-tile-a_tester { --tile: var(--teal-strong); --tile-soft: var(--aqua-soft); }
.ib-tile-terminee { --tile: var(--green); --tile-soft: var(--green-soft); }
.ib-tile-refusee { --tile: var(--red); --tile-soft: var(--red-soft); }

.ib-areas { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-area-chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: var(--fs-caption); font-weight: 700;
}
.ib-area-chip span { color: var(--muted); font-weight: 600; margin-left: 2px; }
.ib-area-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.ib-area-chip.is-active span { color: inherit; opacity: .7; }

.ib-list-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
.ib-list-head h3 { margin: 0; font-size: var(--fs-md); }
.ib-list-head h3 span { color: var(--muted); font-weight: 600; margin-left: 4px; }
.ib-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ib-search { min-width: 220px; }
.ib-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-caption); font-weight: 700; color: var(--accent);
}
.ib-link:hover { text-decoration: underline; }

.ib-list { display: grid; gap: 12px; }
.ib-card {
  --st: var(--blue);
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--st);
}
.ib-card-validee { --st: var(--violet); }
.ib-card-a_tester { --st: var(--teal-strong); }
.ib-card-terminee { --st: var(--green); }
.ib-card-refusee { --st: var(--red); }
.ib-card-terminee h4, .ib-card-refusee h4 { color: var(--muted); }

/* ♥ j'aime (ex-▲ soutenir) et bouton des commentaires, dans le pied de la carte */
.ib-social { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ib-like, .ib-comments-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-alt); color: var(--muted);
  cursor: pointer; font: inherit; font-size: var(--fs-caption); font-weight: 700;
  transition: border-color .15s, background .15s, color .15s;
}
.ib-like svg, .ib-comments-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ib-like strong, .ib-comments-btn strong { color: var(--ink); }
.ib-like:hover { border-color: var(--red); color: var(--red); }
.ib-like.is-on { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.ib-like.is-on svg { fill: currentColor; }
.ib-like.is-on strong { color: var(--red); }
.ib-comments-btn:hover, .ib-comments-btn.is-on { border-color: var(--accent); color: var(--accent); }

/* Fil de commentaires sous la carte */
.ib-thread { display: grid; gap: 10px; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); }
.ib-comment { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.ib-comment > div { min-width: 0; flex: 1; }
.ib-comment-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-caption); }
.ib-comment-head strong { color: var(--ink); }
.ib-comment p { margin: 3px 0 0; white-space: pre-wrap; line-height: var(--lh-normal); overflow-wrap: anywhere; }
.ib-thread-empty { margin: 0; color: var(--muted); font-size: var(--fs-caption); }
.ib-comment-form { display: flex; gap: 10px; align-items: flex-start; }
.ib-comment-form textarea { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); resize: vertical; box-sizing: border-box; }
.ib-comment-send { flex: 0 0 auto; }

.ib-body { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.ib-body > * { max-width: 100%; }
.ib-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ib-body h4 { margin: 0; font-size: var(--fs-md); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.ib-desc { margin: 0; white-space: pre-wrap; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink); overflow-wrap: anywhere; }
.ib-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.ib-cat {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .01em;
  background: hsl(var(--cat-h, 220) 70% 94%); color: hsl(var(--cat-h, 220) 50% 34%);
}
:root[data-theme="dark"] .ib-cat { background: hsl(var(--cat-h, 220) 30% 24%); color: hsl(var(--cat-h, 220) 70% 82%); }
.ib-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: var(--fs-xs); font-weight: 800; }
.ib-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ib-pill-nouvelle { color: var(--blue); background: var(--blue-soft); }
.ib-pill-validee { color: var(--violet); background: var(--violet-soft); }
.ib-pill-a_tester { color: var(--teal-strong); background: var(--aqua-soft); }
.ib-pill-terminee { color: var(--green); background: var(--green-soft); }
.ib-pill-refusee { color: var(--red); background: var(--red-soft); }

.ib-reply {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px; background: var(--panel-alt); font-size: var(--fs-sm);
}
.ib-reply > div { min-width: 0; }
.ib-reply-head { color: var(--muted); font-size: var(--fs-caption); }
.ib-reply-head strong { color: var(--ink); }
.ib-reply p { margin: 3px 0 0; white-space: pre-wrap; line-height: var(--lh-normal); overflow-wrap: anywhere; }
.ib-reply-validee { background: var(--violet-soft); }
.ib-reply-a_tester { background: var(--aqua-soft); }
.ib-reply-terminee { background: var(--green-soft); }
.ib-reply-tested { background: var(--green-soft); margin-top: 6px; }
.ib-reply-wait { color: var(--muted); font-style: italic; }
/* Verdict de l'auteur sur son idée livrée (19/10/2026) */
.ib-verdict { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--teal-strong); }
.ib-verdict > span { font-weight: 700; font-size: var(--fs-sm); margin-right: 4px; }
.ib-totest { display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--aqua-soft); border: 1px solid var(--teal-strong); font-size: var(--fs-sm); }
.ib-totest strong { color: var(--teal-strong); }
.ib-reply-refusee { background: var(--red-soft); }

.ib-card-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; }
.ib-by { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: var(--fs-caption); }
.ib-actions { display: inline-flex; gap: 4px; }
.ib-act {
  background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 9px; cursor: pointer;
  font: inherit; font-size: var(--fs-caption); font-weight: 700; color: var(--muted);
}
.ib-act:hover { background: var(--fill); color: var(--ink); }
.ib-act-main { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.ib-act-main:hover { background: var(--accent); color: #fff; }
.ib-act-danger { color: var(--red); }
.ib-act-danger:hover { background: var(--red-soft); color: var(--red); }

.ib-empty {
  display: grid; gap: 8px; justify-items: center; text-align: center; padding: 36px 20px;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: var(--fs-sm);
}
.ib-empty p { margin: 0; }
.ib-empty strong { color: var(--ink); font-size: var(--fs-md); }

/* Fenêtres : proposer / modifier / trier */
.ib-modal { width: min(620px, calc(100vw - 32px)); border-radius: 12px; }
.ib-modal-form { padding: 20px 22px; display: grid; gap: 16px; }
.ib-modal-form h2 { margin: 0; font-size: var(--fs-lg); }
.ib-field { display: grid; gap: 6px; margin: 0; padding: 0; border: none; min-width: 0; }
.ib-field > span, .ib-field > legend { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 6px; }
.ib-field > span { margin-bottom: 0; }
.ib-field em { font-weight: 400; font-style: normal; color: var(--muted); }
.ib-field input[type="text"], .ib-field textarea { font: inherit; font-size: var(--fs-body); width: 100%; box-sizing: border-box; }
.ib-field textarea { resize: vertical; }
.ib-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-choices legend { width: 100%; }
.ib-choice {
  position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: 999px; padding: 6px 12px;
  border: 1px solid var(--line); font-size: var(--fs-caption); font-weight: 700; color: var(--ink); background: var(--panel);
}
.ib-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ib-choice.is-on { background: hsl(var(--cat-h, 220) 70% 94%); border-color: hsl(var(--cat-h, 220) 50% 50%); color: hsl(var(--cat-h, 220) 50% 30%); }
:root[data-theme="dark"] .ib-choice.is-on { background: hsl(var(--cat-h, 220) 30% 24%); color: hsl(var(--cat-h, 220) 70% 85%); }
.ib-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.ib-status-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ib-status-choices legend { grid-column: 1 / -1; }
.ib-status-choice {
  --st: var(--blue); --st-soft: var(--blue-soft);
  position: relative; display: grid; gap: 2px; cursor: pointer; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
}
.ib-status-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ib-status-choice strong { font-size: var(--fs-sm); color: var(--st); }
.ib-status-choice span { font-size: var(--fs-caption); color: var(--muted); }
.ib-status-choice.is-on { border-color: var(--st); background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st); }
.ib-status-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.ib-status-choice-validee { --st: var(--violet); --st-soft: var(--violet-soft); }
.ib-status-choice-a_tester { --st: var(--teal-strong); --st-soft: var(--aqua-soft); }
.ib-status-choice-terminee { --st: var(--green); --st-soft: var(--green-soft); }
.ib-status-choice-refusee { --st: var(--red); --st-soft: var(--red-soft); }
.ib-triage-recall { display: grid; gap: 4px; justify-items: start; padding: 12px 14px; border-radius: 10px; background: var(--panel-alt); }
.ib-triage-recall strong { font-size: var(--fs-md); }
.ib-triage-recall span { font-size: var(--fs-caption); color: var(--muted); }
.ib-modal-msg { margin: 0; padding: 8px 12px; border-radius: 8px; color: var(--red); background: var(--red-soft); font-size: var(--fs-sm); font-weight: 600; }
.ib-modal-actions { justify-content: flex-end; }
.ib-spacer { flex: 1; }

@media (max-width: 720px) {
  .ib-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ib-hero { padding: 16px; }
  .ib-hero-cta { width: 100%; }
}
@media (max-width: 640px) {
  .ib-card { gap: 12px; padding: 14px; }
  .ib-tools { width: 100%; }
  .ib-search { min-width: 0; flex: 1; }
  .ib-modal-form { padding: 16px; }
}
/* --- Dashboard : onglets Pilotage / Adoption --------------------------------- */
.dd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.dd-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--muted);
}
.dd-tab:hover { color: var(--ink); }
.dd-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dd-tab-count { font-size: var(--fs-xs); font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--muted); }
.dd-tab.is-active .dd-tab-count { background: var(--accent-soft); color: var(--accent); }

/* --- Onglet Adoption (app.js, adoptionPaneMarkup) ----------------------------
   Une seule couleur de données (l'accent) : une barre dit une quantité. Le
   statut d'une personne a son libellé ET sa couleur (jamais la couleur seule). */
.ad-pane { display: grid; gap: 16px; }
.ad-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.ad-head h2 { margin: 0 0 4px; font-size: var(--fs-lg); }
.ad-head p { margin: 0; }
.ad-kpis { margin-bottom: 0; }
.ad-kpi strong em { font-style: normal; font-size: .55em; color: var(--muted); font-weight: 700; margin-left: 2px; }
.ad-kpi-warn { border-top-color: var(--amber); }
.ad-panel { margin: 0; min-width: 0; }
.ad-panel-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.ad-panel-head h3 { margin: 0; font-size: var(--fs-md); }
.ad-sub { margin: 16px 0 8px; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ad-sub small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.ad-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ad-panel .ad-grid-2 { gap: 24px; }
.ad-col-stack { display: grid; gap: 16px; min-width: 0; }
.ad-note { margin: 10px 0 0; }

/* L'équipe */
.ad-team { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ad-team tfoot th { padding: 10px; border-top: 2px solid var(--line); text-align: left; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: var(--fs-sm); }
.ad-team tfoot th.num { text-align: right; }
.ad-teams td.num .ad-bar { min-width: 140px; }
.ad-person small.subtext { display: block; font-size: var(--fs-xs); }
.ad-chip.ad-chip-new { margin-left: 6px; background: var(--teal-soft, var(--fill)); color: var(--teal-strong, var(--ink)); }
.ad-team th { text-align: left; padding: 0 10px 8px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap; }
.ad-team td { padding: 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.ad-team .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-team td.num strong, .ad-stack strong { display: block; font-size: var(--fs-body); }
.ad-team td.num small, .ad-stack small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.ad-person { display: flex; gap: 10px; align-items: center; min-width: 170px; }
.ad-person strong { display: block; white-space: nowrap; }
.ad-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.ad-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ad-status-ok { color: var(--green); }
.ad-status-fading { color: var(--amber); }
.ad-status-dormant { color: var(--amber); }
.ad-status-never { color: var(--red); }
.ad-row-never td { background: color-mix(in srgb, var(--red-soft) 45%, transparent); }
.ad-spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; min-width: 140px; }
.ad-spark-bar { flex: 1 1 0; height: var(--h); min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.ad-spark-bar.is-zero { height: 2px; background: var(--line); border-radius: 1px; }
.ad-spark-bar.is-we.is-zero { background: transparent; }
.ad-mods { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.ad-chip { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.ad-last { white-space: nowrap; }

/* Colonnes hebdomadaires */
.ad-cols { display: flex; align-items: stretch; gap: 6px; height: 170px; padding-top: 4px; }
.ad-col { flex: 1 1 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.ad-col-val { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.ad-col.is-last .ad-col-val { color: var(--ink); }
.ad-col-bar { align-self: end; width: 100%; max-width: 30px; height: var(--h); background: var(--accent); opacity: .55; border-radius: 4px 4px 0 0; }
.ad-col.is-last .ad-col-bar { opacity: 1; }
.ad-col:hover .ad-col-bar { opacity: 1; }
.ad-col-lbl { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* Listes à barres */
.ad-bars, .ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.ad-bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1.1fr); gap: 12px; align-items: center; }
.ad-list li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ad-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ad-li-label { min-width: 0; overflow-wrap: anywhere; }
.ad-path { display: block; margin-top: 2px; font-size: var(--fs-xs); }
.ad-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-num strong, .ad-num small { display: block; }
.ad-num small { color: var(--muted); font-size: var(--fs-xs); }
.ad-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-bar-track { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.ad-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ad-bar-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: var(--fs-sm); }
.ad-bar-val small { font-weight: 400; color: var(--muted); }
.ad-alerts li { color: var(--amber); }
.ad-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; margin: 4px 0 8px; }
.ad-rate { display: grid; gap: 4px; font-size: var(--fs-caption); color: var(--muted); font-weight: 700; }
.ad-details { margin-top: 14px; font-size: var(--fs-sm); }
.ad-details summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: var(--fs-caption); }
.ad-details[open] summary { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .ad-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ad-bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dd-tab { padding: 10px 12px; }
}

/* =========================================================================
   Page Finance (finance-ui.js) : onglets Dashboard et Projects P&L. Palette
   --cf-* du Cash forecast, tuiles .kpi partagées ci-dessus.
   ========================================================================= */
.fin-tabs { margin-bottom: 14px; }
#financeView .fin-section,
#pnlView .fin-section { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cf-text-muted); margin: 6px 0 8px; }
.fin-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cf-text-muted); font-size: var(--fs-xs); }
#financeView .fin-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.fin-loading { color: var(--cf-text-muted); padding: 20px 0; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.fin-card { background: var(--cf-card); border: 1px solid var(--cf-border); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.fin-card-wide { grid-column: 1 / -1; }
.fin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fin-card-head h4 { margin: 0; font-size: var(--fs-sm); }
.fin-chart-box { position: relative; height: 280px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.fin-table th { text-align: left; color: var(--cf-text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--cf-border); white-space: nowrap; }
.fin-table td { padding: 6px 8px; border-bottom: 1px solid var(--cf-border); vertical-align: top; }
.fin-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-table tfoot td { font-weight: 700; border-top: 2px solid var(--cf-border); border-bottom: none; }
.fin-muted { color: var(--cf-text-muted); }
.fin-note { color: var(--cf-text-muted); font-size: var(--fs-xs); margin-top: 14px; line-height: 1.5; }
.fin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.fin-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-control-label { color: var(--cf-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; }
.fin-control select, .fin-control input[type="search"] { padding: 6px 8px; border: 1px solid var(--cf-border); border-radius: 6px; background: var(--cf-card); color: var(--cf-text); font: inherit; font-size: var(--fs-caption); }
.fin-segs { display: inline-flex; border: 1px solid var(--cf-border); border-radius: 6px; overflow: hidden; }
.fin-seg { background: var(--cf-card); color: var(--cf-text); border: none; border-right: 1px solid var(--cf-border); padding: 6px 10px; font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.fin-seg:last-child { border-right: none; }
.fin-seg.is-active { background: var(--cf-accent); color: #fff; }
.fin-chk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); cursor: pointer; }
.fin-link { background: none; border: none; color: var(--cf-accent); cursor: pointer; font: inherit; font-size: var(--fs-caption); padding: 0; }
.fin-table-wrap { overflow-x: auto; background: var(--cf-card); border: 1px solid var(--cf-border); border-radius: 8px; }
.fin-pnl-table th.fin-sortable { cursor: pointer; user-select: none; }
.fin-pnl-table th.fin-sortable:hover { color: var(--cf-text); }
.fin-pnl-table tbody tr:hover td { background: var(--cf-soft); }
.fin-group { cursor: pointer; font-weight: 600; }
.fin-group.is-open td { background: var(--cf-row-band); }
.fin-caret { display: inline-block; width: 1em; color: var(--cf-text-muted); }
.fin-child td:first-child { padding-left: 26px; }
.fin-proj { min-width: 260px; }
.fin-proj-meta { color: var(--cf-text-muted); font-size: var(--fs-xs); margin-top: 1px; }
.fin-neg { color: var(--cf-danger); font-weight: 600; }
.fin-warn { color: var(--cf-warning); font-weight: 600; }
.fin-pos { color: var(--cf-text); }
@media (max-width: 1100px) {
  #financeView .kpis, #pnlView .kpis, #financeView .fin-kpis-4 { grid-template-columns: repeat(2, 1fr); }
  .fin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #financeView .kpis, #pnlView .kpis, #financeView .fin-kpis-4 { grid-template-columns: 1fr; }
}

/* Onglet « Approbations » de Tasks (12/10/2026) */
.scope-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.scope-count[hidden] { display: none; }
.ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.ap-head .subtext { margin: 0; }
.ap-group { margin-bottom: 18px; }
.ap-empty { margin: 6px 0 0; }
.ap-row { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
/* Le projet se lit d'abord (retour d'Arnaud, 12/10/2026) : client · S00xxx affaire. */
.ap-project {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ap-row .ap-project + .tk-title { font-weight: 500; }
.ap-approve { white-space: nowrap; }
/* Justificatifs manquants (14/10/2026) : la note de l'agent sur deux lignes au plus. */
.ap-doc .ap-doc-note {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-doc-hint { margin: -8px 0 18px; }
.ap-row .ap-link { text-decoration: none; color: inherit; }
.ap-row .ap-link:hover .tk-title { text-decoration: underline; }
/* Deux liens par ligne (20/10/2026) : « Projet » et « Facture » / « Pièce ». */
.ap-row .ap-main { cursor: default; }
.ap-row .ap-main .ap-link { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.ap-links { display: inline-flex; gap: 6px; margin-top: 3px; }
.ap-link-chip {
  font-size: var(--fs-caption);
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ap-link-chip:hover { background: var(--accent-soft); }
.ap-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
#leaveView tr.lv-focus td {
  background: var(--amber-soft);
  transition: background .4s;
}
/* Page Finance v2 : bandeau rentabilité en %, compte de résultat, trésorerie. */
#financeView .fin-section { margin-top: 22px; }
#financeView .fin-section:first-of-type { margin-top: 4px; }
#financeView .fin-hero .fin-hero-value { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: 6px; letter-spacing: -.5px; }
#financeView .fin-hero.success .fin-hero-value { color: var(--cf-teal); }
#financeView .fin-hero.warn .fin-hero-value { color: var(--cf-warning); }
#financeView .fin-hero.danger .fin-hero-value { color: var(--cf-danger); }
#financeView .fin-hero .fin-hero-amount { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }
#financeView .fin-hero .sub { margin-top: 6px; }
#financeView .fin-kpis-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.fin-pl-table td:first-child { white-space: nowrap; }
.fin-pl-table tr.fin-pl-neg td:first-child,
.fin-pl-table tr.fin-pl-line td:first-child { padding-left: 18px; color: var(--cf-text-muted); }
.fin-pl-table tr.fin-pl-sub td { font-weight: 700; background: var(--cf-soft); }
.fin-pl-table tr.fin-pl-total td { font-weight: 800; border-top: 2px solid var(--cf-text); border-bottom: none; }
.fin-card-chart { margin-top: 2px; }
.fin-chart-tall { height: 340px; }
.fin-vs { color: var(--cf-text-muted); }
.fin-method { margin-top: 22px; color: var(--cf-text-muted); font-size: var(--fs-xs); }
.fin-method summary { cursor: pointer; font-weight: 600; }
.fin-method ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
@media (max-width: 1100px) { #financeView .fin-kpis-2 { grid-template-columns: repeat(2, 1fr); } }

/* Onglet Forecast accuracy */
#accuracyView .fin-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.fin-lead { color: var(--cf-text-muted); font-size: var(--fs-sm); margin: 0 0 14px; max-width: 900px; line-height: 1.5; }
.fin-drivers { margin: -6px 0 14px; font-size: var(--fs-caption); }
.fin-empty { color: var(--cf-text-muted); line-height: 1.5; }
.fin-acc-table { margin-top: 14px; }
@media (max-width: 1100px) { #accuracyView .fin-kpis-4, #accuracyView .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #accuracyView .fin-kpis-4, #accuracyView .kpis { grid-template-columns: 1fr; } }
#financeView .fin-card-chart + .fin-card-chart { margin-top: 14px; }
#financeView .fin-pl-table { max-width: 860px; }

/* ---- Smart monitoring (smart-monitoring-ui.js) : dataloggers Shayp ---- */
/* Pastille : le total en gris, puis orange (sans conso) et rouge (muet). */
.nav-badge-smart .total { color: var(--muted); }
.sm-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.sm-head p { margin: 0; flex: 1 1 320px; }
.sm-muted { color: var(--muted); }
.sm-flash { margin: 0 0 12px; color: var(--teal-strong); font-weight: 600; }
.sm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sm-tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.sm-tile-l { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.sm-tile-v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sm-tile.sm-warn .sm-tile-v { color: var(--amber); }
.sm-tile.sm-crit .sm-tile-v { color: var(--red); }
.sm-table .sm-client { cursor: pointer; }
.sm-table .sm-client:hover td { background: var(--accent-soft); }
.sm-table .sm-caret { display: inline-block; width: 12px; color: var(--muted); }
.sm-table .sm-dev td { background: var(--surface); }
.sm-table .sm-indent { padding-left: 16px; display: inline-block; }
.sm-table .sm-dev small { padding-left: 16px; }
.sm-badge { display: inline-block; margin: 0 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.sm-badge.sm-ok { background: var(--aqua-soft); color: var(--teal-strong); }
.sm-badge.sm-warn { background: var(--amber-soft); color: var(--amber); }
.sm-badge.sm-crit { background: var(--red-soft); color: var(--red); }
.sm-spark rect { fill: var(--accent); }
.sm-spark rect.sm-spark-none { fill: var(--line); }
.sm-unit { max-width: 160px; font: inherit; font-size: var(--fs-xs); }
.sm-table .sm-count { padding-left: 16px; }
.sm-badge.sm-leak { background: var(--accent-soft); color: var(--accent); }
.sm-tile.sm-leak .sm-tile-v { color: var(--accent); }
.sm-table .sm-leak-v { color: var(--accent); font-weight: 700; }
.sm-table .sm-link { color: var(--accent); }
.sm-role, .sm-parent { max-width: 150px; font: inherit; font-size: var(--fs-xs); display: block; margin-bottom: 2px; }
.sm-table th:first-child, .sm-table td:first-child { min-width: 230px; }

/* ---- Steer Co du lundi (leadership, steerco-ui.js) ---------------------- */
.sc-spacer { flex: 1 1 0; }
.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sc-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sc-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-item .sc-text { flex: 1 1 200px; min-width: 0; }
.sc-item select, .sc-item input[type=date] { width: auto; max-width: 100%; }
.sc-text.is-done { text-decoration: line-through; color: var(--muted); }
.sc-remove { padding: 2px 8px; }
.sc-notes { width: 100%; min-height: 220px; resize: vertical; font: inherit; }
.sc-ok { color: var(--green); }
.sc-warn { color: var(--amber); }
.sc-bad { color: var(--red); }
.sc-chip { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: var(--fs-caption); white-space: nowrap; }
.sc-chip.sc-ok { background: var(--green-soft); }
.sc-chip.sc-warn { background: var(--amber-soft); }
.sc-chip.sc-bad { background: var(--red-soft); }
.sc-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-snapshot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
@media (max-width: 860px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
}
.sc-item[data-sc-kind=action] { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sc-item[data-sc-kind=action] .sc-text { flex-basis: calc(100% - 48px); }

/* Calendrier du Steer Co : une semaine façon Outlook, couleurs de l'onglet Congés. */
.sc-wk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.sc-wk-nav { display: flex; align-items: center; gap: 4px; }
.sc-wk-nav .icon-button { padding: 2px 10px; font-size: var(--fs-lg); line-height: 1; }
.sc-wk-nav .icon-button:disabled { opacity: .35; cursor: default; }
.sc-wk-title { font-size: var(--fs-lg); margin-left: 6px; }
.sc-wk-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-wk-tabs button { border: 0; background: var(--panel); color: var(--muted); padding: 4px 10px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.sc-wk-tabs button.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.sc-wk-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-caption); color: var(--muted); }
.sc-wk-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sc-wk-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sc-wk-swatch.is-tentative { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); border: 1px solid var(--muted); }
.sc-wk-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sc-wk { display: grid; min-width: min-content; }
.sc-wk-corner, .sc-wk-gutter { border-bottom: 1px solid var(--line); }
.sc-wk-dayhead { display: flex; flex-direction: column; padding: 6px 8px 4px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-caption); color: var(--muted); min-width: 0; }
.sc-wk-num { font-size: var(--fs-lg); color: var(--accent-dark); line-height: 1.1; }
.sc-wk-dayhead.is-today .sc-wk-num { color: #fff; background: var(--accent); border-radius: 6px; padding: 0 6px; align-self: flex-start; }
.sc-wk-dayhead.is-off, .sc-wk-col.is-off { background: var(--panel-2); }
.sc-wk-holiday { font-size: var(--fs-xs); color: var(--amber); font-weight: 600; }
.sc-wk-band { grid-column: 2 / -1; display: grid; gap: 2px 0; padding: 3px 0; border-bottom: 2px solid var(--line); min-width: 0; }
.sc-wk-band.is-empty { min-height: 10px; }
.sc-wk-span { --c: var(--accent); display: flex; align-items: center; gap: 5px; margin: 0 2px; padding: 0 6px; height: 22px; border-radius: 5px; font: inherit; font-size: var(--fs-xs); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; border: 0;
  color: var(--ink); background: color-mix(in srgb, var(--c) 18%, var(--panel)); border-left: 3px solid var(--c); }
.sc-wk-span.sc-wk-leave { color: #fff; background: var(--c); border-left: 0; }
.sc-wk-span.sc-wk-leave.is-tentative { color: var(--c); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent) 0 4px, transparent 4px 8px); border: 1px dashed var(--c); }
.sc-wk-span.sc-wk-outlook.is-tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--panel)) 0 4px, var(--panel) 4px 8px); }
.sc-wk-span.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sc-wk-span.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
button.sc-wk-span { cursor: pointer; }
button.sc-wk-span:hover { filter: brightness(.96); }
.sc-wk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.sc-wk-meta { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.sc-wk-hours { border-right: 1px solid var(--line); }
.sc-wk-hour { font-size: var(--fs-xs); color: var(--muted); text-align: right; padding: 2px 6px 0 0; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.sc-wk-col { position: relative; border-left: 1px solid var(--line); min-width: 0;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 48px); }
.sc-wk-col.is-today { background-color: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.sc-wk-ev { --c: var(--accent); position: absolute; box-sizing: border-box; padding: 3px 6px; border-radius: 5px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); line-height: 1.25; color: var(--ink);
  background: color-mix(in srgb, var(--c) 20%, var(--panel)); border-left: 3px solid var(--c); box-shadow: 0 0 0 1px var(--panel); }
.sc-wk-ev strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: none; }
.sc-wk-ev.is-short strong, .sc-wk-ev.is-mid strong { -webkit-line-clamp: 1; }
.sc-wk-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-wk-ev.is-short { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.sc-wk-ev.is-short strong { white-space: nowrap; }
.sc-wk-ev.is-tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--panel)) 0 5px, var(--panel) 5px 10px); }
.sc-wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; }
.sc-wk-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* En-tête de la réunion : la date en titre, le thème dessous, les participants à
   droite, le bilan en pastilles, puis les commandes sur une barre discrète. */
.sc-head { display: grid; gap: 12px; }
.sc-head-top { display: flex; align-items: flex-start; gap: 16px; }
.sc-head-titles { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sc-head-date { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-heading); color: var(--ink); }
.sc-title { width: 100%; max-width: 640px; border-color: transparent; background: transparent; padding: 4px 0; color: var(--muted); font-size: var(--fs-md); }
.sc-title:hover { color: var(--ink); }
.sc-title:focus { border-color: var(--line); background: var(--panel); padding: 4px 8px; color: var(--ink); }
.sc-people { display: flex; flex: none; padding-left: 6px; }
.sc-person { margin-left: -6px; }
.sc-person .person-avatar { width: 34px; height: 34px; font-size: var(--fs-caption); box-shadow: 0 0 0 2px var(--panel); }
.sc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--panel-alt); color: var(--muted); font-size: var(--fs-caption); }
.sc-stat strong { color: var(--ink); font-size: var(--fs-sm); }
.sc-stat.is-ok { background: var(--green-soft); }
.sc-stat.is-ok strong { color: var(--green); }
.sc-stat.is-warn { background: var(--amber-soft); }
.sc-stat.is-warn strong { color: var(--amber); }
.sc-head-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-head-field { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.sc-head-field select, .sc-head-field input { padding: 5px 8px; }
.sc-head-meta { margin: 0; font-size: var(--fs-caption); }

/* Ordre du jour du Steer Co : rubriques fixes, un point = une ligne, sa décision à côté.
   Les champs ont l'air de texte au repos et ne montrent leur cadre qu'au survol ou à la
   saisie ; les commandes vides (Qui ?, date, + Tâche, ×) s'effacent hors survol. */
.sc-hint { margin: -4px 0 12px; font-size: var(--fs-caption); color: var(--muted); }
.sc-hint kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--panel-alt); font: inherit; font-size: var(--fs-xs); color: var(--ink); }
.sc-ag-cols, .sc-ag-row { display: grid; grid-template-columns: 22px minmax(0, 2fr) minmax(0, 1.4fr) minmax(104px, .45fr) 128px 116px; gap: 8px; align-items: start; }
.sc-ag-cols { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 0 10px 6px 14px; }
.sc-agenda { display: grid; gap: 10px; }
.sc-ag-section { --sec: var(--muted); border: 1px solid var(--line); border-left: 3px solid var(--sec); border-radius: 8px; background: var(--panel); padding: 4px 6px 6px 8px; }
.sc-ag-section[data-sc-section=calendar] { --sec: var(--teal-strong); }
.sc-ag-section[data-sc-section=hr] { --sec: var(--violet); }
.sc-ag-section[data-sc-section=finance] { --sec: var(--green); }
.sc-ag-section[data-sc-section=strategy] { --sec: var(--accent); }
.sc-ag-section[data-sc-section=digital] { --sec: var(--aqua); }
.sc-ag-section[data-sc-section=ops] { --sec: var(--amber); }
.sc-ag-section[data-sc-section=commercial] { --sec: var(--coral); }
.sc-ag-section[data-sc-section=rnd] { --sec: var(--blue); }
.sc-ag-head { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 2px; }
.sc-ag-head h3 { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.sc-ag-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--sec) 15%, var(--panel)); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; text-align: center; line-height: 18px; }
.sc-ag-meta { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.sc-ag-meta::before { content: "·"; margin-right: 6px; }
.sc-ag-link, .sc-ag-add { border: 0; background: none; padding: 3px 6px; border-radius: 6px; font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--accent-dark); cursor: pointer; white-space: nowrap; }
.sc-ag-link:hover, .sc-ag-add:hover { background: var(--accent-soft); }
.sc-ag-add { color: var(--muted); }
.sc-ag-section:hover .sc-ag-add, .sc-ag-add:focus-visible { color: var(--accent-dark); }
/* Rubrique vide : une ligne fine, sans fond, qui ne prend pas la place d'une pleine. */
.sc-ag-section.is-empty { border-style: dashed; border-left-style: solid; border-left-color: color-mix(in srgb, var(--sec) 45%, var(--line)); background: transparent; padding-top: 0; padding-bottom: 0; }
.sc-ag-section.is-empty .sc-ag-head { min-height: 30px; }
.sc-ag-section.is-empty h3 { color: var(--muted); font-weight: 600; }

.sc-ag-row { padding: 3px 4px; border-radius: 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sc-ag-head + .sc-ag-row { border-top-color: transparent; }
.sc-ag-row:hover, .sc-ag-row:focus-within { background: var(--panel-alt); }
.sc-ag-row > input[type=checkbox] { margin-top: 9px; width: 16px; height: 16px; accent-color: var(--green); }
.sc-ag-point { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.sc-ag-row textarea, .sc-ag-row select, .sc-ag-row input[type=date] { border-color: transparent; background: transparent; padding: 6px 8px; min-height: 32px; }
.sc-ag-row textarea { display: block; width: 100%; min-width: 0; resize: none; overflow: hidden; line-height: 1.35; field-sizing: content; }
.sc-ag-point .sc-text { flex: 1 1 auto; font-weight: 500; color: var(--ink); }
.sc-ag-row textarea:hover, .sc-ag-row select:hover, .sc-ag-row input[type=date]:hover { border-color: var(--line); background: var(--panel); }
.sc-ag-row textarea:focus, .sc-ag-row select:focus, .sc-ag-row input[type=date]:focus { border-color: var(--accent); background: var(--panel); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sc-ag-row textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.sc-ag-decision { color: var(--muted); }
.sc-ag-decision.has-decision { background: var(--green-soft); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--green); }
.sc-ag-owner, .sc-ag-deadline { width: 100%; min-width: 0; color: var(--ink); font-size: var(--fs-sm); }
.sc-ag-owner.is-empty, .sc-ag-deadline.is-empty { color: var(--muted); }
.sc-ag-carried { flex: none; margin-top: 6px; padding: 1px 6px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.sc-ag-tools .mini-button { white-space: nowrap; }
.sc-ag-tools { display: flex; gap: 4px; align-items: center; justify-content: flex-end; min-height: 32px; }
.sc-ag-tools .sc-remove { padding: 2px 8px; color: var(--muted); border-color: transparent; background: transparent; }
.sc-ag-tools .sc-remove:hover { color: var(--red); background: var(--red-soft); }
.sc-ag-row.is-done { opacity: .6; }
.sc-ag-row.is-done .sc-text { text-decoration: line-through; color: var(--muted); }
/* Sur un écran à souris, ce qui est vide ou secondaire n'apparaît qu'au survol de la ligne. */
@media (hover: hover) {
  .sc-ag-owner.is-empty, .sc-ag-deadline.is-empty, .sc-ag-tools [data-sc-task], .sc-ag-tools .sc-remove { opacity: 0; transition: opacity .12s; }
  .sc-ag-row:hover :is(.sc-ag-owner, .sc-ag-deadline, [data-sc-task], .sc-remove),
  .sc-ag-row:focus-within :is(.sc-ag-owner, .sc-ag-deadline, [data-sc-task], .sc-remove) { opacity: 1; }
}
.sc-dec-recap { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
@media (max-width: 860px) {
  .sc-ag-cols { display: none; }
  .sc-ag-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); }
  .sc-ag-point, .sc-ag-decision, .sc-ag-tools { grid-column: 2 / 4; }
  .sc-ag-owner { grid-column: 2; }
  .sc-ag-deadline { grid-column: 3; }
  .sc-ag-tools { min-height: 0; }
  .sc-ag-head { flex-wrap: wrap; row-gap: 0; }
  .sc-head-top { flex-direction: column-reverse; gap: 8px; }
}
#steercoRoot .panel-header { flex-wrap: wrap; gap: 4px 14px; }
#steercoRoot .panel-header h2 { white-space: nowrap; }
#scKpisPanel .dd-kpis { margin-bottom: 8px; }
.dd-kpi.dd-kpi-ok { border-top-color: var(--green); }
.dd-kpi.dd-kpi-warn { border-top-color: var(--amber); }
.dd-kpi.dd-kpi-warn strong { color: var(--amber); }
.sc-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- Leadership › Équipe (team-ui.js) ------------------------------------- */
.tm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tm-asof { flex: 1 1 auto; color: var(--muted); font-size: var(--fs-sm); }
.tm-hint { color: var(--muted); font-size: var(--fs-caption); margin: 8px 0 0; }
.tm-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-block; }
.tm-avatar-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tm-neg { color: var(--red); }
.tm-warn { color: var(--amber); }
.tm-muted { color: var(--muted); }

/* Organigramme : listes imbriquées, traits dessinés par les pseudo-éléments. */
.tm-org-scroll { overflow-x: auto; padding: 4px 0 12px; }
.tm-org, .tm-org ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.tm-org { min-width: max-content; gap: 28px; }
.tm-org li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 6px; }
.tm-org ul { padding-top: 22px; position: relative; }
.tm-org ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--line); }
.tm-org ul > li { padding-top: 22px; }
.tm-org ul > li::before, .tm-org ul > li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1px solid var(--line); }
.tm-org ul > li::after { right: auto; left: 50%; border-left: 1px solid var(--line); }
.tm-org ul > li:first-child::before, .tm-org ul > li:last-child::after { border: 0; }
.tm-org ul > li:last-child::before { border-right: 1px solid var(--line); border-top-right-radius: 8px; }
.tm-org ul > li:first-child::after { border-top-left-radius: 8px; }
.tm-org ul > li:only-child { padding-top: 0; }
.tm-org ul > li:only-child::before, .tm-org ul > li:only-child::after { display: none; }

.tm-card { width: 236px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); cursor: pointer; color: var(--ink); font: inherit; display: flex; flex-direction: column; gap: 8px; }
.tm-card:hover { border-color: var(--accent); }
.tm-card-head { display: flex; align-items: center; gap: 10px; }
.tm-card-id { display: flex; flex-direction: column; min-width: 0; }
.tm-card-id strong { font-size: var(--fs-body); }
.tm-card-id span { color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-card-id small { color: var(--muted); font-size: var(--fs-xs); }
.tm-line { display: grid; grid-template-columns: 52px 1fr; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; font-size: var(--fs-caption); }
.tm-line-label { color: var(--muted); }
.tm-line-val { min-width: 0; }
.tm-line-val b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-line-val small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.tm-line-val.tm-neg b, .tm-line-val.tm-neg small { color: var(--red); }
.tm-line-val.tm-warn b { color: var(--amber); }
.tm-line-val.tm-muted b { color: var(--muted); font-weight: 500; }

.tm-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.tm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tm-table th { text-align: left; padding: 0; border-bottom: 1px solid var(--line); }
.tm-sort { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-caption); font-weight: 700; padding: 10px 12px; cursor: pointer; white-space: nowrap; }
.tm-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tm-table td small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.tm-table td b { font-weight: 600; }
.tm-table tbody tr { cursor: pointer; }
.tm-table tbody tr:hover { background: var(--panel-2); }
.tm-table .tm-num { text-align: right; white-space: nowrap; }
.tm-table td.tm-neg b, .tm-table td.tm-neg small { color: var(--red); }
.tm-table td.tm-warn b { color: var(--amber); }
.tm-cell-person { display: inline-flex; align-items: center; gap: 8px; }

/* Équipe › recrutements (Teamtailor) */
.tm-section { margin-top: 28px; }
.tm-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tm-section-head h2 { margin: 0; font-size: var(--fs-lg); }
.tm-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.tm-job { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.tm-job header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tm-job header a { color: var(--ink); text-decoration: none; }
.tm-job header a:hover { color: var(--accent); text-decoration: underline; }
.tm-job-counts { font-size: var(--fs-sm); color: var(--muted); }
.tm-job-counts b { color: var(--ink); font-size: var(--fs-lg); }
.tm-fresh { color: var(--green); font-weight: 600; }
.tm-stages { display: flex; flex-direction: column; gap: 4px; }
.tm-stage { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 8px; font-size: var(--fs-caption); }
.tm-stage-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-stage-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.tm-stage-bar span { display: block; height: 100%; background: var(--aqua); border-radius: 4px; }
.tm-stage b { text-align: right; }

/* Équipe › répartition du temps : une couleur par catégorie, ordre fixe de
   timeModel.CATEGORIES (palette catégorielle validée, adjacent CVD ΔE ≥ 8). */
:root {
  --tc-billable: #2a78d6; --tc-nonbillable: #eb6834; --tc-sales: #1baf7a; --tc-marketing: #eda100;
  --tc-admin: #e87ba4; --tc-strategy: #008300; --tc-tools: #4a3aa7; --tc-internal: #e34948; --tc-unassigned: #c9ced8;
}
:root[data-theme="dark"] {
  --tc-billable: #3987e5; --tc-nonbillable: #d95926; --tc-sales: #199e70; --tc-marketing: #c98500;
  --tc-admin: #d55181; --tc-strategy: #008300; --tc-tools: #9085e9; --tc-internal: #e66767; --tc-unassigned: #4a5268;
}
.tm-splits { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.tm-split { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); text-align: left; color: var(--ink); font: inherit; display: flex; flex-direction: column; gap: 8px; }
button.tm-split { cursor: pointer; }
button.tm-split:hover { border-color: var(--accent); }
.tm-split header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tm-split-body { display: flex; align-items: center; gap: 14px; }
.tm-split-team .tm-split-body { gap: 24px; }
.tm-donut { flex: 0 0 auto; }
.tm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-caption); min-width: 0; flex: 1 1 auto; }
.tm-legend li { display: grid; grid-template-columns: 10px 1fr auto 52px; align-items: center; gap: 6px; }
.tm-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.tm-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-legend b { font-weight: 600; text-align: right; }
.tm-legend small { color: var(--muted); text-align: right; }
.tm-split-types { color: var(--muted); font-size: var(--fs-xs); }
p.tm-hint.tm-warn { color: var(--amber); }
.tm-split-team .tm-legend { max-width: 440px; }
.tm-tag { align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.tm-job-paused { opacity: .8; }
.tm-job-paused .tm-stage-bar span { background: var(--muted); opacity: .5; }
.tm-unclassified { margin-top: 14px; }
.tm-unclassified summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--muted); }
.tm-unclassified .tm-table th { padding: 10px 12px; font-size: var(--fs-caption); color: var(--muted); }

/* ---- Publications (LinkedIn) — publications-ui.js -----------------------------
   S'appuie sur les classes du Labo d'idées (ib-page, ib-modal, ib-field, ib-flash…) ;
   ici, ce qui lui est propre : onglets, lignes du calendrier, grille du mois, cartes
   d'idées, veille, mentions. La couleur d'un compte arrive par --acct. */
.pb-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pb-tab { border: none; background: none; font: inherit; font-weight: 700; color: var(--muted); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pb-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.pb-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: var(--fs-xs); line-height: 18px; text-align: center; }
.pb-count-soft { color: var(--muted); font-weight: 600; font-size: var(--fs-caption); }
.pb-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pb-toolbar input[type="search"] { min-width: 220px; flex: 0 1 320px; }
.pb-check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.pb-block { display: grid; gap: 10px; }
.pb-block h3 { margin: 0; font-size: var(--fs-md); }
.pb-block h3 span { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); margin-left: 4px; }
.pb-hint { margin: 0; color: var(--muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }
.pb-muted { color: var(--muted); font-size: var(--fs-caption); }
.pb-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.pb-info { background: var(--accent-soft); border-color: var(--accent); }
.pb-info strong { color: var(--accent); }

.pb-rows { display: grid; gap: 6px; }
.pb-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left;
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer;
}
.pb-row:hover { border-color: var(--accent); }
.pb-row-static { cursor: default; grid-template-columns: minmax(0, 1fr) auto; }
.pb-row-static:hover { border-color: var(--line); }
.pb-row-annule, .pb-row-publie { opacity: .8; }
.pb-row-date { display: grid; font-size: var(--fs-sm); }
.pb-row-date span { color: var(--muted); font-size: var(--fs-caption); }
.pb-row-main { display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
.pb-row-subject { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pb-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pb-owner { color: var(--muted); font-size: var(--fs-caption); }
.pb-tags { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
.pb-acct { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: var(--fs-xs); font-weight: 800; color: var(--acct); border: 1px solid var(--acct); white-space: nowrap; }
.pb-acct-none { color: var(--muted); border-color: var(--line); }
.pb-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); background: var(--fill); white-space: nowrap; }
.pb-pill-a_valider { color: var(--amber); background: var(--amber-soft); }
.pb-pill-brouillon { color: var(--muted); background: var(--fill); }
.pb-pill-valide { color: var(--blue); background: var(--blue-soft); }
.pb-pill-programme { color: var(--teal-strong); background: var(--aqua-soft); }
.pb-pill-publie { color: var(--green); background: var(--green-soft); }
.pb-pill-echec, .pb-pill-late { color: var(--red); background: var(--red-soft); }
.pb-pill-due { color: var(--teal-strong); background: var(--aqua-soft); }
.pb-pill-annule { text-decoration: line-through; }
.pb-mode { font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.pb-mode-auto { color: var(--green); border-color: var(--green); }

.pb-month { display: grid; gap: 10px; }
.pb-month-nav { display: flex; gap: 10px; align-items: center; }
.pb-month-nav strong { min-width: 160px; text-align: center; }
.pb-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pb-dow { font-size: var(--fs-caption); color: var(--muted); font-weight: 700; padding: 0 4px; }
.pb-day { min-height: 96px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-day.is-out { background: var(--surface); opacity: .6; }
.pb-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pb-day-n { font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
.pb-chip {
  display: block; width: 100%; text-align: left; border: none; border-left: 3px solid var(--acct); border-radius: 4px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: var(--fs-xs); padding: 3px 5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-chip:hover { background: var(--accent-soft); }
.pb-chip-publie { opacity: .7; }
.pb-chip-annule { text-decoration: line-through; opacity: .5; }
.pb-chip-a_valider { background: var(--amber-soft); }
.pb-chip.is-due { background: var(--red-soft); }
.pb-chip-time { font-weight: 700; margin-right: 4px; }
/* 29/10/2026 (Louis) : dans la vue mois, le titre plutôt que l'heure. Il tient sur deux lignes ;
   le compte se lit à la bordure gauche, à la légende et au survol. */
.pb-day .pb-chip { display: flex; gap: 0; align-items: flex-start; white-space: normal; }
.pb-day .pb-chip .pb-dot { margin-top: 4px; }
.pb-chip-title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

.pb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pb-card { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.pb-card h4 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-heading); }
.pb-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pb-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-notes { margin: 0; color: var(--muted); font-size: var(--fs-caption); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pb-source { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.pb-prio { font-size: var(--fs-xs); font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.pb-prio-haute { color: var(--red); background: var(--red-soft); }
.pb-prio-moyenne { color: var(--amber); background: var(--amber-soft); }
.pb-prio-basse { color: var(--muted); background: var(--fill); }
.pb-lab { padding: 14px; border-radius: 12px; background: var(--violet-soft); }

.pb-watch { display: grid; gap: 6px; }
.pb-watch-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.pb-watch-row p { margin: 2px 0 0; font-size: var(--fs-sm); }
.pb-watch-date { font-size: var(--fs-caption); color: var(--muted); font-weight: 700; }
.pb-watch-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.pb-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pb-link-card { display: grid; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; }
.pb-link-card:hover { border-color: var(--accent); }
.pb-link-card span { color: var(--muted); font-size: var(--fs-caption); }

.pb-modal { width: min(760px, calc(100vw - 32px)); }
.pb-modal .ib-modal-form { max-height: calc(100vh - 80px); overflow-y: auto; }
.pb-modal h2 { display: flex; gap: 10px; align-items: center; }
.pb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pb-modal select, .pb-modal input[type="datetime-local"], .pb-modal input[type="url"], .pb-modal input[type="date"], .pb-modal input[type="search"] { font: inherit; width: 100%; box-sizing: border-box; }
.pb-count { float: right; }
.pb-count.is-over { color: var(--red); font-weight: 700; }
.pb-mention-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pb-mention { display: inline-flex; gap: 4px; align-items: center; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: 700; }
.pb-mention.is-manual { background: var(--amber-soft); color: var(--amber); }
.pb-mention button { border: none; background: none; color: inherit; cursor: pointer; font-size: var(--fs-md); line-height: 1; }
.pb-mention-search { display: flex; gap: 10px; align-items: center; }
.pb-mention-search input { flex: 1; }
.pb-mention-options { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.pb-mention-option { text-align: left; border: none; background: none; font: inherit; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.pb-mention-option:hover { background: var(--accent-soft); }
.pb-person-form { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--panel-alt); }
.pb-media { display: flex; gap: 10px; flex-wrap: wrap; }
.pb-media-item { margin: 0; display: grid; gap: 4px; justify-items: start; }
.pb-media-item img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pb-pdf { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 8px; border: 1px solid var(--line); background: var(--fill); color: var(--ink); font-weight: 800; text-align: center; text-decoration: none; font-size: var(--fs-sm); }
.pb-pdf span { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); word-break: break-all; padding: 0 6px; }
.pb-upload { cursor: pointer; justify-self: start; }
.pb-details summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.pb-details[open] { display: grid; gap: 12px; }
.pb-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.pb-copy { display: grid; gap: 8px; }
.pb-copy a.secondary-button { text-decoration: none; }
.pb-copy-text { margin: 0; max-height: 240px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: var(--fs-sm); padding: 12px; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--line); }

/* Événements (salons, webinaires, conférences, presse) : une teinte par type, portée par --evt,
   bandeau plein dans la grille du mois, liseré à gauche dans la liste. */
.pb-event-salon { --evt: var(--violet); --evt-soft: var(--violet-soft); }
.pb-event-webinaire { --evt: var(--teal-strong); --evt-soft: var(--aqua-soft); }
.pb-event-conference { --evt: var(--blue); --evt-soft: var(--blue-soft); }
.pb-event-presse { --evt: var(--amber); --evt-soft: var(--amber-soft); }
.pb-event-autre { --evt: var(--muted); --evt-soft: var(--fill); }
.pb-row.pb-event { border-left: 4px solid var(--evt); background: var(--evt-soft); }
.pb-evt-kind { font-size: var(--fs-xs); font-weight: 800; color: var(--evt); white-space: nowrap; }
.pb-evt {
  display: block; width: calc(100% + 8px); margin: 0 -4px; text-align: left; border: none; border-radius: 0;
  background: var(--evt-soft); color: var(--evt); font: inherit; font-size: var(--fs-xs); font-weight: 800;
  padding: 2px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-evt.is-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-left: 0; width: calc(100% + 4px); }
.pb-evt.is-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: calc(100% + 4px); }
.pb-evt.is-start.is-end { width: 100%; }
.pb-evt:hover { filter: brightness(0.97); }
.pb-day .pb-evt { background: var(--evt); color: #fff; text-transform: uppercase; letter-spacing: .02em; font-size: 10px; padding: 3px 6px; }
.pb-day .pb-evt-gap { height: 2px; }
.pb-legend .pb-legend-swatch.pb-legend-evt { background: var(--evt); box-shadow: none; border-left: none; }
.pb-check-field { align-self: end; padding-bottom: 8px; }

/* Vue mois (28/10/2026) : la couleur du compte se lit sur toute la pastille, son nom en
   tête, une légende sous la navigation ; une case survolée par un glisser se souligne. */
/* 29/10/2026 : un post est une carte blanche (bord du compte à gauche, rond de statut en tête) ;
   un événement est un bandeau plein et coloré. Les deux ne se confondent plus. */
.pb-chip { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--acct); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.pb-chip-a_valider, .pb-chip.is-due { background: var(--panel); }
.pb-chip.is-due { border-color: var(--red); border-left-color: var(--acct); }
.pb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; background: var(--muted); flex: 0 0 auto; }
.pb-dot-brouillon { background: #9aa4b2; }
.pb-dot-a_valider { background: #f59e0b; }
.pb-dot-valide { background: #3b82f6; }
.pb-dot-programme { background: #34d399; }
.pb-dot-publie { background: #15803d; }
.pb-dot-echec { background: #dc2626; }
.pb-dot-annule { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.pb-chip-acct { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--acct); margin-right: 4px; }
.pb-chip[draggable="true"] { cursor: grab; }
.pb-chip.is-dragging { opacity: .4; }
.pb-day.is-drop { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.pb-legend { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; font-size: var(--fs-caption); }
.pb-legend-title { font-weight: 800; color: var(--muted); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .04em; }
.pb-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.pb-legend-swatch { width: 14px; height: 10px; border-radius: 3px; border-left: 3px solid var(--acct); background: color-mix(in srgb, var(--acct) 14%, var(--panel)); }
.pb-legend-swatch.pb-legend-evt { border-left: none; background: var(--evt-soft); box-shadow: inset 0 0 0 1px var(--evt); }
.pb-legend .pb-hint { margin-left: auto; }

/* Aperçu façon LinkedIn, dans la fiche d'un post. */
.pb-preview-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pb-pv { display: grid; gap: 10px; max-width: 555px; padding: 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.pb-pv-head { display: flex; gap: 8px; align-items: center; }
.pb-pv-head > span:last-child { display: grid; }
.pb-pv-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--acct); color: #fff; font-weight: 800; }
.pb-pv-text { font-size: 14px; line-height: 1.43; color: var(--ink); word-break: break-word; }
.pb-pv-mention { color: #0a66c2; font-weight: 700; }
.pb-pv-more { border: none; background: none; padding: 0; color: var(--muted); font: inherit; cursor: pointer; }
.pb-pv-more:hover { color: #0a66c2; text-decoration: underline; }
.pb-pv-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 4px; }
.pb-pv-pdf { padding: 18px; border-radius: 4px; background: var(--fill); font-weight: 700; text-align: center; }

/* Onglet Presse (28/10/2026). */
.pb-press-media { font-size: var(--fs-xs); font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.pb-recipients { display: grid; gap: 4px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pb-recipients legend { padding: 0 4px; }

@media (max-width: 720px) {
  .pb-row { grid-template-columns: 1fr; gap: 6px; }
  .pb-row-meta { justify-content: flex-start; }
  .pb-watch-row { grid-template-columns: 1fr; }
  .pb-watch-actions { justify-content: flex-start; }
  .pb-two, .pb-three { grid-template-columns: 1fr; }
  .pb-day { min-height: 64px; }
  .pb-chip-time { display: none; }
}
/* Publications, lot 3 : connexions LinkedIn et statistiques. */
.pb-row-static .pb-row-meta a.secondary-button { text-decoration: none; }
.pb-error-line { grid-column: 1 / -1; color: var(--red, #b91c1c); font-size: var(--fs-caption); }
.pb-stats-wrap { overflow-x: auto; }
.pb-stats { width: 100%; border-collapse: collapse; font-size: var(--fs-body, 0.9rem); }
.pb-stats th, .pb-stats td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.pb-stats th:nth-child(-n+2), .pb-stats td:nth-child(-n+2) { text-align: left; }
.pb-stats td:nth-child(2) { white-space: normal; min-width: 220px; }
.pb-stats th { color: var(--muted); font-weight: 600; font-size: var(--fs-caption); }
.pb-stats tbody tr { cursor: pointer; }
.pb-stats tbody tr:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
/* Publications › Performances (01/11/2026) : chiffres clés, courbes, ce qui marche, audience. */
.pb-perf-bar { gap: 14px; }
.pb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel); }
.pb-seg button { border: 0; background: transparent; color: var(--muted); padding: 5px 12px; border-radius: 999px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.pb-seg button.is-active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.pb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pb-tile { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pb-tile-label { color: var(--muted); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.pb-tile strong { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pb-tile-sub { color: var(--muted); font-size: var(--fs-caption); }
.pb-up { color: var(--green); font-weight: 700; }
.pb-down { color: var(--red); font-weight: 700; }
.pb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.pb-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pb-card { display: grid; gap: 10px; align-content: start; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pb-card h4 { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.pb-chart { position: relative; height: 220px; }
.pb-hbars { display: grid; gap: 6px; }
.pb-hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: var(--fs-caption); }
.pb-hbar.is-muted { opacity: 0.5; }
.pb-hbar-label { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.pb-hbar-track { height: 10px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.pb-hbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.pb-hbar-value { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pb-insights { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pb-insights li { padding: 8px 12px; background: var(--green-soft); border-radius: 8px; font-size: var(--fs-sm); }
.pb-insights li strong { margin-right: 4px; }
.pb-top { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.pb-top li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: var(--fs-sm); }
.pb-top li .pb-muted { grid-column: 1; font-size: var(--fs-caption); }
.pb-top li strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.pb-top-title { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-top-title:hover { text-decoration: underline; }
.pb-details > summary { cursor: pointer; list-style: none; }
.pb-details > summary::-webkit-details-marker { display: none; }
.pb-details > summary h3::before { content: "▸ "; color: var(--muted); }
.pb-details[open] > summary h3::before { content: "▾ "; }
@media (max-width: 720px) {
  .pb-grid2, .pb-grid3 { grid-template-columns: 1fr; }
  .pb-hbar { grid-template-columns: minmax(80px, 34%) 1fr auto; }
}