/* Le Phare — design system « premium » */

:root {
  --page: #f4f4f1;
  --surface: #ffffff;
  --bg: #eceae5;
  --surface-2: #faf9f6;
  --ink: #131313;
  --ink-2: #4d4c48;
  --muted: #8b8983;
  --grid: #ecebe6;
  --axis: #c9c8bf;
  --border: rgba(19, 18, 12, 0.08);
  --accent: #2a78d6;
  --accent-dark: #1c5cab;
  --accent-deep: #104281;
  --accent-soft: #e9f1fb;
  --green: #0a7d0a;
  --green-soft: #e6f4e6;
  --amber: #96660a;
  --amber-soft: #fbf2d8;
  --red: #c22e2e;
  --red-soft: #fae9e9;
  --violet: #4a3aa7;
  --violet-soft: #edecf8;
  --gray-soft: #f0efeb;
  --side-bg: #efecf9;
  --side-ink: #5c5570;
  --side-ink-dim: #8b85a1;
  --side-strong: #2c2340;
  --side-hover: rgba(74, 58, 150, 0.08);
  --side-active: linear-gradient(90deg, rgba(74, 58, 150, 0.14), rgba(74, 58, 150, 0.03));
  --side-glow: rgba(96, 78, 190, 0.16);
  --side-panel-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  --thead: #fbfbf9;
  --row-hover: #f8f9fb;
  --btn-hover: #fdfdfc;
  --modal-ring: rgba(255, 255, 255, 0.6);
  --tile-glow: rgba(42, 120, 214, 0.07);
  --shadow-1: 0 1px 2px rgba(24, 22, 12, 0.04), 0 2px 8px rgba(24, 22, 12, 0.04);
  --shadow-2: 0 2px 4px rgba(24, 22, 12, 0.05), 0 12px 32px rgba(24, 22, 12, 0.07);
  --shadow-pop: 0 24px 80px rgba(15, 14, 8, 0.28), 0 4px 16px rgba(15, 14, 8, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 14px;
  font-size: 15px;
}

/* thème sombre — indigo profond, accents or (l'or est décoratif, jamais
   porteur de données : les séries de graphique gardent leurs teintes) */
:root[data-theme="dark"] {
  --page: #0d0c13;
  --surface: #16141f;
  --bg: #100e17;
  --surface-2: #1e1b29;
  --ink: #f2f1ec;
  --ink-2: #c5c2b8;
  --muted: #8f8c96;
  --grid: #262333;
  --axis: #363146;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #d9a441;
  --accent-dark: #ecc06a;
  --accent-deep: #8a6420;
  --accent-soft: rgba(217, 164, 65, 0.13);
  --green: #3dbc3d;
  --green-soft: rgba(46, 184, 46, 0.14);
  --amber: #e8b93e;
  --amber-soft: rgba(250, 178, 25, 0.13);
  --red: #e66767;
  --red-soft: rgba(230, 103, 103, 0.14);
  --violet: #9c92ea;
  --violet-soft: rgba(144, 133, 233, 0.16);
  --gray-soft: #221f2e;
  --side-bg: #0a0912;
  --side-ink: #a2a4b0;
  --side-ink-dim: #63656f;
  --side-strong: #ffffff;
  --side-hover: rgba(255, 255, 255, 0.055);
  --side-active: linear-gradient(90deg, rgba(217, 164, 65, 0.16), rgba(217, 164, 65, 0.04));
  --side-glow: rgba(99, 84, 214, 0.28);
  --side-panel-shadow: none;
  --thead: #1b1926;
  --row-hover: #1e1b2a;
  --btn-hover: #201d2c;
  --modal-ring: rgba(255, 255, 255, 0.08);
  --tile-glow: rgba(217, 164, 65, 0.06);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* accents or spécifiques au sombre */
:root[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #ecc472, #d9a441 55%, #b98a2e);
  border-color: var(--accent-deep); color: #1c1503; text-shadow: none;
  box-shadow: 0 2px 8px rgba(217, 164, 65, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(180deg, #f2cf82, #e0af4e 55%, #c2933a);
  box-shadow: 0 5px 18px rgba(217, 164, 65, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root[data-theme="dark"] .logo-mark {
  background: linear-gradient(140deg, #f0ca79 0%, #d9a441 45%, #8a6420 100%);
  color: #1c1503;
  box-shadow: 0 4px 14px rgba(217, 164, 65, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
:root[data-theme="dark"] .nav a.active::before {
  background: linear-gradient(180deg, #f0ca79, var(--accent));
  box-shadow: 0 0 12px rgba(217, 164, 65, 0.8);
}
:root[data-theme="dark"] ::selection { background: rgba(217, 164, 65, 0.3); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; }
::selection { background: rgba(42, 120, 214, 0.22); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(19, 18, 12, 0.14); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(19, 18, 12, 0.3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- layout ---------------------------------------------------------- */

#app { display: flex; min-height: 100vh; }

.sidebar {
  width: 62px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  overflow: visible; z-index: 30;
}
.sidebar-panel {
  position: absolute; inset: 0; width: 62px; height: 100vh;
  background:
    radial-gradient(420px 260px at -30% -10%, var(--side-glow), transparent 60%),
    var(--side-bg);
  color: var(--side-ink);
  display: flex; flex-direction: column;
  padding: 20px 12px; overflow: hidden;
  border-right: 1px solid var(--border);
  transition: width 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sidebar:hover .sidebar-panel {
  width: 224px; box-shadow: var(--shadow-pop); overflow: visible;
}
.logo {
  display: flex; align-items: center; gap: 0; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  padding: 4px 3px 22px; color: var(--side-strong); white-space: nowrap;
}
.sidebar:hover .logo { justify-content: flex-start; padding-left: 7px; gap: 11px; }
.logo-text, .foot-text, .nav-label {
  opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
  transition: opacity 0.15s var(--ease);
}
.sidebar:hover .logo-text, .sidebar:hover .foot-text, .sidebar:hover .nav-label {
  opacity: 1; width: auto;
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, #4d95e8 0%, var(--accent) 45%, var(--accent-deep) 100%);
  color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(42, 120, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 0; justify-content: center;
  padding: 9px 11px; border-radius: 9px;
  color: var(--side-ink); text-decoration: none; font-weight: 500;
  font-size: 14.5px; letter-spacing: 0.01em;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.sidebar:hover .nav a { justify-content: flex-start; gap: 11px; }
.nav-ico { display: flex; position: relative; flex-shrink: 0; }
.nav a svg { width: 18px; height: 18px; opacity: 0.6; transition: opacity 0.18s; }
.nav a:hover { background: var(--side-hover); color: var(--side-strong); }
.nav a:hover svg { opacity: 0.9; }
.nav a:active { transform: scale(0.985); }
.nav a.active {
  background: var(--side-active);
  color: var(--side-strong);
}
.nav a.active svg { opacity: 1; }
.nav a.active::before {
  content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #4d95e8, var(--accent));
  box-shadow: 0 0 12px rgba(77, 149, 232, 0.8);
}
.sidebar-foot {
  margin-top: auto; padding: 12px; font-size: 12px; color: var(--side-ink-dim);
  display: flex; align-items: center; gap: 8px; line-height: 1.4; justify-content: center;
}
.sidebar:hover .sidebar-foot { justify-content: flex-start; }
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.main { flex: 1; min-width: 0; padding: 30px 36px 70px; max-width: 1280px; }

.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
/* bandeau d'en-tête figé : reste en haut au scroll (titre + filtres + chips) */
.missions-topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--page); padding: 30px 0 14px; margin: -30px 0 6px;
  border-bottom: 1px solid var(--border);
}
.missions-topbar .page-head { margin-bottom: 0; }
.missions-topbar .pipe-filter { margin: 0; }
.page-head h1 { font-size: 25px; letter-spacing: -0.025em; font-weight: 700; }
.page-head .spacer { flex: 1; }

/* entrée en cascade des vues */
.view-anim > * { animation: rise 0.55s var(--ease) both; }
.view-anim > *:nth-child(2) { animation-delay: 0.05s; }
.view-anim > *:nth-child(3) { animation-delay: 0.1s; }
.view-anim > *:nth-child(4) { animation-delay: 0.15s; }
.view-anim > *:nth-child(5) { animation-delay: 0.2s; }
.view-anim .tiles > * { animation: rise 0.55s var(--ease) both; }
.view-anim .tiles > :nth-child(2) { animation-delay: 0.06s; }
.view-anim .tiles > :nth-child(3) { animation-delay: 0.12s; }
.view-anim .tiles > :nth-child(4) { animation-delay: 0.18s; }
.view-anim .tiles > :nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---- boutons ---------------------------------------------------------- */

.btn {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; padding: 8px 15px; cursor: pointer;
  font-weight: 570; font-size: 14px;
  box-shadow: var(--shadow-1);
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s;
}
.btn:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }
.btn-primary {
  background: linear-gradient(180deg, #3585e2, var(--accent) 55%, #2265b8);
  border-color: var(--accent-dark); color: #fff;
  box-shadow: 0 2px 6px rgba(42, 120, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3f8de6, #2f7fd9 55%, #2569bd);
  box-shadow: 0 5px 16px rgba(42, 120, 214, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-danger { color: var(--red); border-color: rgba(194, 46, 46, 0.3); }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { padding: 4px 11px; font-size: 13px; border-radius: 8px; }
.icon-btn {
  border: none; background: none; cursor: pointer; color: var(--muted);
  border-radius: 7px; padding: 4px 8px; font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--gray-soft); color: var(--ink); }

/* ---- cartes & tuiles --------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.card-pad { padding: 20px 22px; }
.card h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 680; margin-bottom: 14px;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 17px 19px 15px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100%;
  background: radial-gradient(140px 70px at 12% -20%, var(--tile-glow), transparent 70%);
  pointer-events: none;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tile-label { font-size: 12.5px; color: var(--muted); font-weight: 590; letter-spacing: 0.01em; }
.tile-value {
  font-size: 28px; font-weight: 740; letter-spacing: -0.035em; margin-top: 5px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tile-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; font-weight: 500; }
.tile-sub.good { color: var(--green); }
.tile-sub.bad { color: var(--red); }

/* tuiles KPI composites (une seule ligne) */
.tiles-group { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.tile-group { display: flex; flex-direction: column; padding: 15px 18px 14px; }
.tile-group .tile-label { margin-bottom: 8px; }
.tg-rows { display: flex; flex-direction: column; gap: 2px; }
.tg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; }
.tg-row.tg-click { cursor: pointer; margin: 0 -7px; padding: 2px 7px; border-radius: 7px; transition: background 0.13s; }
.tg-row.tg-click:hover { background: var(--row-hover); }
.tg-k { font-size: 13px; color: var(--muted); font-weight: 550; }
.tg-v { font-size: 18px; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tg-v.good { color: var(--green); }
.tg-v.bad { color: var(--red); }
.tg-foot { margin-top: 9px; font-size: 12.5px; color: var(--ink-2); font-weight: 550; display: flex; align-items: center; gap: 7px; }
.tg-foot.good { color: var(--green); }
.tg-foot.bad { color: var(--red); }
.tg-pct { font-weight: 800; font-size: 15px; }
.tg-pct.good { color: var(--green); }
.tg-pct.warn { color: var(--amber); }
.tg-pct.bad { color: var(--red); }
.tg-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--gray-soft); overflow: hidden; max-width: 90px; }
.tg-bar-in { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.tg-bar-in.good { background: var(--green); }
.tg-bar-in.warn { background: var(--amber); }
.tg-bar-in.bad { background: var(--red); }
.spark-lg { display: block; width: 100%; height: 38px; margin-top: auto; padding-top: 10px; opacity: 0.5; }
.spark-lg path.fill { opacity: 0.12; }
.spark-lg path.line { fill: none; stroke-width: 2; stroke-linejoin: round; }

/* fiche client 360° */
.cl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cl-logo-drop { position: relative; cursor: pointer; border-radius: 16px; padding: 3px;
  border: 2px dashed transparent; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.cl-logo-drop .avatar { width: 52px; height: 52px; border-radius: 14px; font-size: 19px; }
.cl-logo-drop .cl-logo-ov {
  position: absolute; inset: 3px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; opacity: 0;
  transition: opacity 0.15s var(--ease); pointer-events: none;
}
.cl-logo-drop:hover .cl-logo-ov { opacity: 1; }
.cl-logo-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.cl-logo-drop.drag .cl-logo-ov { opacity: 1; background: transparent; color: var(--accent); }
.cl-name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.cl-stat { background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.cl-stat-v { font-size: 18px; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cl-stat-v.good { color: var(--green); }
.cl-stat-v.bad { color: var(--red); }
.cl-stat-v.warn { color: var(--amber); }
.cl-stat-l { font-size: 12px; color: var(--muted); font-weight: 550; margin-top: 3px; }
.cl-stat-s { font-size: 11px; margin-top: 1px; }
.cl-bars { display: flex; flex-direction: column; gap: 7px; }
.cl-bar-row { display: flex; align-items: center; gap: 10px; }
.cl-bar-y { width: 42px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cl-bar-track { flex: 1; height: 9px; background: var(--gray-soft); border-radius: 5px; overflow: hidden; }
.cl-bar-in { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.cl-bar-v { width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* ---- tableaux ---------------------------------------------------------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); font-weight: 680;
  padding: 12px 14px; border-bottom: 1px solid var(--grid); white-space: nowrap;
  background: var(--thead);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.14s; }
tbody tr.rowlink { cursor: pointer; }
tbody tr.rowlink:hover { background: var(--row-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.cell-main { font-weight: 620; letter-spacing: -0.005em; }
.cell-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

td select, .status-select {
  border: 1px solid transparent; border-radius: 8px; padding: 5px 8px;
  background: var(--gray-soft); cursor: pointer; font-size: 13.5px; font-weight: 550;
  transition: border-color 0.15s, background 0.15s;
}
td select:hover { border-color: var(--border); background: #fff; }

/* ---- badges, pastilles -------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 640;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.01em;
}
.b-gray { background: var(--gray-soft); color: var(--ink-2); }
.b-blue { background: var(--accent-soft); color: var(--accent-dark); }
.b-green { background: var(--green-soft); color: var(--green); }
.b-amber { background: var(--amber-soft); color: var(--amber); }
.b-red { background: var(--red-soft); color: var(--red); }
.b-violet { background: var(--violet-soft); color: var(--violet); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.avatar {
  width: 28px; height: 28px; border-radius: 9px; color: #fff;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 750;
  flex-shrink: 0; letter-spacing: 0.02em;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
  background-blend-mode: overlay;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.avatar-logo {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: normal; text-shadow: none; background-color: var(--surface);
}
.avatar-clickable { cursor: pointer; transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease); }
.avatar-clickable:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0, 0, 0, 0.25); }
.pbar {
  display: inline-block; width: 92px; height: 6px; border-radius: 3px;
  background: var(--gray-soft); overflow: hidden; vertical-align: middle;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.pbar-fill {
  display: block; height: 100%; border-radius: 3px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  background-blend-mode: overlay;
  transition: width 0.9s var(--ease);
}

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

/* ---- filtres ------------------------------------------------------------ */

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
  background: var(--surface); box-shadow: var(--shadow-1); font-size: 14px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.filters input[type="search"] { width: 230px; }

.seg { display: inline-flex; background: var(--gray-soft); border-radius: 10px; padding: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); }
.seg button {
  border: none; background: none; padding: 5px 13px; border-radius: 8px;
  cursor: pointer; font-weight: 570; color: var(--ink-2); font-size: 13.5px;
  transition: color 0.15s, background 0.18s var(--ease), box-shadow 0.18s;
}
.seg button.on {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px var(--border);
}

/* ---- formulaires ---------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.grow { flex: 1; }
.field-label { font-size: 12.5px; font-weight: 620; color: var(--ink-2); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  background: var(--surface); width: 100%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.filters select:focus, .filters input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-row { display: flex; gap: 12px; margin-bottom: 15px; }
.form-row > * { flex: 1; }

/* ---- autocomplete stylé (remplace le <datalist> natif) -------------------- */

.ac-wrap { position: relative; }
.ac-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow-pop); padding: 5px; max-height: 230px; overflow-y: auto;
}
.ac-item {
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
  transition: background 0.12s, color 0.12s;
}
.ac-item:hover, .ac-item.active { background: var(--accent-soft); color: var(--accent-dark); }

/* ---- menu « … » (actions secondaires) ------------------------------------ */
.of-wrap { position: relative; display: inline-flex; }
.of-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow-pop); padding: 5px; min-width: 210px;
}
/* variante popover ancrée au <body> (échappe aux contextes d'empilement) */
.of-menu.pop { position: fixed; right: auto; top: auto; z-index: 3000; }

/* fiche CRM : bloc de faits clés (qui / quoi / combien), éditable inline */
.crm-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px;
}
.crm-fact { min-width: 0; }
.crm-fact.wide { grid-column: 1 / -1; }
.crm-fact-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 680; margin-bottom: 3px;
}
.crm-fact-v { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.crm-fact.big .crm-fact-v { font-size: 19px; font-weight: 760; }
.crm-fact-v.editable { cursor: pointer; border-bottom: 1px dashed var(--border); }
.crm-fact-v.editable:hover { border-bottom-color: var(--accent); color: var(--accent); }
.crm-fact-v.link { color: var(--accent); text-decoration: none; cursor: pointer; }
.crm-fact-v.link:hover { text-decoration: underline; }
.crm-fact-v.warn { color: var(--amber); }

/* autocomplete de sélection de mission (fusion) */
.merge-ac { position: relative; }
.merge-ac-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
.merge-ac-input:focus { outline: none; border-color: var(--accent); }
.merge-ac-results {
  position: fixed; z-index: 3000;
  max-height: 260px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px;
}
.merge-ac-item {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.merge-ac-item:hover { background: var(--accent-soft); }

/* fusion de missions : deux valeurs côte à côte, on clique la prioritaire */
.merge-grid-head, .merge-row {
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; align-items: stretch;
}
.merge-grid-head { margin: 10px 0 6px; }
.merge-col-h { font-weight: 680; font-size: 12.5px; padding: 4px 8px; }
.merge-col-h.keep { color: var(--accent); }
.merge-row { margin-bottom: 6px; }
.merge-label { font-size: 12px; color: var(--muted); align-self: center; }
.merge-cell {
  text-align: left; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.merge-cell:hover { border-color: var(--accent); }
.merge-cell.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 620; }

/* brouillon inline du brief commercial (sous la ligne de relance) */
.brief-draft {
  margin: 2px 0 12px 46px; padding: 10px 12px;
  background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px;
}
/* Canaux d'envoi d'un brouillon (Gmail / Outlook / MP LinkedIn / conversation).
   Les boutons LinkedIn s'ajoutent en async → wrap pour ne jamais déborder. */
.out-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Fresh Leads : dry-run des nouvelles relations LinkedIn à qualifier ─────── */
.fl-due { color: var(--amber); font-size: 20px; line-height: 0; margin-left: 4px; }
.fl-log {
  margin: 0; max-height: 190px; overflow-y: auto; font-size: 12px; line-height: 1.55;
  color: var(--muted); white-space: pre-wrap; font-family: var(--mono, ui-monospace, monospace);
}
.fl-list { display: flex; flex-direction: column; }
.fl-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.fl-row:first-child { border-top: 0; }
.fl-cb { flex: none; padding-top: 3px; cursor: pointer; }
/* conteneur de l'avatar partagé (cf. plus bas) — l'<img> carrée et son repli
   « une lettre grise » ont disparu au profit du composant commun. */
.fl-ph { width: 34px; height: 34px; flex: none; }
.fl-main { flex: 1; min-width: 0; }
.fl-name { font-weight: 660; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fl-name a { color: inherit; text-decoration: none; }
.fl-name a:hover { text-decoration: underline; }
.fl-since { font-size: 11px; color: var(--muted); font-weight: 400; }
.fl-co { font-size: 12.5px; margin-top: 1px; }
.fl-head { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.fl-why { font-size: 12px; margin-top: 3px; color: var(--accent-dark); }
.fl-meta { flex: none; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.fl-score {
  color: #fff; font-weight: 750; font-size: 12px; min-width: 24px; text-align: center;
  border-radius: 7px; padding: 2px 6px;
}
.fl-lane { font-size: 12px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--border); }
.fl-flags { white-space: nowrap; }
.fl-done { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
/* Barre d'avancement : l'ajout enchaîne 2-4 appels Attio par lead → sans retour
   visible, le bouton passait pour mort pendant plusieurs secondes. */
.fl-prog-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; font-size: 13px;
}
.fl-prog-head b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-prog-track {
  height: 8px; border-radius: 999px; background: var(--gray-soft);
  overflow: hidden; position: relative;
}
.fl-prog-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--accent);
  transition: width 0.25s var(--ease);
}
/* total inconnu (pull LinkedIn) : balayage, pour ne pas figer à 0 % */
.fl-prog-track.indet .fl-prog-fill { width: 35%; animation: fl-sweep 1.1s ease-in-out infinite; }
@keyframes fl-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(286%); }
}
/* liste gelée pendant l'écriture : plus de coche ni de changement de lane */
.fl-frozen { pointer-events: none; opacity: 0.55; }

/* menu « ⋯ » des actions rares d'une fiche (en-tête de modale).
   NE PAS hériter de `.kbc-del` seul : celui-ci est à `opacity:0` et n'apparaît
   qu'au survol d'une TUILE kanban (`.kb-card:hover`). Dans une modale il n'y a
   pas de `.kb-card` → le bouton restait invisible bien que présent. */
.deal-more-wrap { position: relative; flex: none; }
.deal-more.kbc-del,
.deal-more {
  opacity: 1; font-size: 17px; line-height: 1; padding: 3px 9px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface);
}
.deal-more.kbc-del:hover,
.deal-more:hover { opacity: 1; color: var(--ink); background: var(--gray-soft); }
.deal-more-wrap .of-menu { min-width: 236px; text-align: left; }
.deal-more-wrap .of-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink);
}
.deal-more-wrap .of-item:hover { background: var(--gray-soft); }
.deal-more-wrap .of-item.danger { color: var(--red); }

/* ── « Fait » : la ligne part à droite sur du vert, la pile remonte ────────── */
.row-slide {
  position: relative; overflow: hidden;
  animation: row-away 0.3s var(--ease) forwards;
}
/* le vert apparaît DERRIÈRE le contenu (il ne suit pas le glissement) */
.row-slide::before {
  content: '✓'; position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: flex-start; padding-left: 18px;
  color: #fff; font-weight: 800; font-size: 15px;
  background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 70%, #fff));
  animation: row-green 0.3s var(--ease) forwards;
}
.row-slide > * { position: relative; z-index: 1; }
@keyframes row-green { from { opacity: 0; } to { opacity: 1; } }
@keyframes row-away {
  0% { transform: translateX(0); }
  100% { transform: translateX(46%); opacity: 0; }
}
.row-collapse {
  height: 0 !important; min-height: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  border-width: 0 !important; overflow: hidden;
  transition: height 0.24s var(--ease), padding 0.24s var(--ease),
              margin 0.24s var(--ease), border-width 0.24s var(--ease);
}

/* ── Qualification d'un lead : UN SEUL langage visuel ────────────────────────
   Le chip « 4/5 » (qualité de ciblage) et sa raison s'affichent à l'identique
   sur la tuile kanban, dans le dry-run Fresh Leads et sur la fiche CRM. À ne pas
   confondre avec le cadran « Entrée au pipe » (0-100 %), qui est une action. */
.qchip { letter-spacing: -0.01em; flex: none; }
.qchip-big { font-size: 13px; padding: 2px 8px; }
.qreason-line {
  display: flex; gap: 5px; align-items: baseline;
  margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--accent-dark);
}
.qreason-ico { flex: none; }
.qreason {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* fiche CRM : le chip et sa lane sur une ligne */
.crm-qwrap { display: flex; gap: 8px; align-items: center; }
/* société d'une fiche CRM : logo + nom, comme sur la tuile kanban */
.crm-who { display: inline-flex; gap: 7px; align-items: center; }
/* Bloc haut de la fiche CRM : faits d'identité à gauche, jauge « Entrée au
   pipe » collée à DROITE (elle s'étire sur leur hauteur), raisonnement dessous
   en pleine largeur — même agencement que la fiche affaire. */
.crm-top { display: flex; gap: 14px; align-items: stretch; }
.crm-top-facts { flex: 1; min-width: 0; }
.crm-top-gauge { flex: none; display: flex; flex-direction: column; }
.crm-top-gauge .qd-wrap { flex: 1; align-items: stretch; }
.crm-top-gauge .af-gauge { align-self: stretch; min-height: 84px; }
.crm-reason { margin: 2px 0 10px; }
/* infobulle du nom : le ciblage y reste scannable sans charger la tuile */
.kb-nametip-q { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; }
.kb-nametip-why { font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* Chip flottant d'import : l'écriture Attio continue même si on quitte la vue,
   donc l'avancement doit rester visible partout. Au-dessus du panneau Mentor. */
.fl-chip {
  position: fixed; right: 96px; bottom: 18px; z-index: 88;
  display: flex; gap: 10px; align-items: center;
  min-width: 250px; max-width: 340px; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-pop); font-size: 12.5px;
  animation: pop 0.25s var(--ease);
}
.fl-chip.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.fl-chip.err { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.fl-chip-l { font-weight: 640; white-space: nowrap; }
.fl-chip-s {
  color: var(--muted); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-chip-track {
  flex: none; width: 54px; height: 6px; border-radius: 999px;
  background: var(--gray-soft); overflow: hidden;
}
.fl-chip-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s var(--ease); }
/* total inconnu (lecture LinkedIn) : balayage plutôt qu'une barre figée à 0 % */
.fl-chip-track.indet .fl-chip-fill { width: 35%; animation: fl-sweep 1.1s ease-in-out infinite; }
.fl-chip-spin {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--gray-soft); border-top-color: var(--accent);
  animation: sync-spin 0.8s linear infinite; /* keyframe déjà définie plus haut */
}

/* Réglages : 2 colonnes de cartes EMPILÉES. Une grille terme-à-terme laissait un
   grand blanc sous la carte la plus courte (Offres ~5 lignes vs Clients ~38) —
   ici chaque colonne s'arrête à sa propre hauteur. */
.reg-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-top: 16px;
}
.reg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .reg-cols { grid-template-columns: 1fr; } }

/* Personas de ciblage (Réglages → Fresh Leads) : une carte par lane/liste */
.fl-personas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px; margin: 10px 0 4px;
}
.fl-persona {
  border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px;
  background: var(--gray-soft);
}
.fl-persona .field { margin-bottom: 8px; }
.fl-persona .field > label { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.fl-persona textarea, .fl-persona input[type="text"] { font-size: 12.5px; }
/* le point orange « scan dû » sur le bouton d'en-tête */
button.btn .fl-due { margin-left: 5px; }
.fl-run {
  display: flex; gap: 10px; align-items: center; padding: 5px 0;
  border-top: 1px solid var(--border); font-size: 13px;
}
.fl-run:first-child { border-top: 0; }
.fl-run.clickable { cursor: pointer; }
.fl-run.clickable:hover { color: var(--accent-dark); }
.fl-run-caret { width: 12px; flex: none; color: var(--muted); font-size: 11px; }
/* liste dépliée des personnes ajoutées par un scan → clic = fiche CRM */
.fl-run-people {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 8px 22px; padding-left: 10px;
  border-left: 2px solid var(--border);
}
.fl-run-person {
  display: flex; gap: 8px; align-items: baseline; text-align: left;
  background: none; border: 0; padding: 4px 6px; border-radius: 7px;
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; width: 100%;
}
.fl-run-person:hover { background: var(--gray-soft); }
.fl-run-lane {
  flex: none; font-size: 11px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* verbe d'action en tête de ligne du brief commercial */
.brief-verb { font-weight: 760; color: var(--accent); }
/* double icône d'une ligne de brief : avatar (logo/initiales) + pastille d'étape */
.brief-dualicon { position: relative; flex: none; display: inline-flex; }
.brief-stage-badge {
  position: absolute; right: -5px; bottom: -5px;
  font-size: 12px; line-height: 1; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--bg);
}
/* ---- barre de cycle de vie de la fiche Affaire (cliquable) ---------------- */
.stagebar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
.stagebar-sep { flex: none; color: var(--muted); opacity: .55; font-size: 15px; padding: 0 1px; }
.stagebar-step {
  flex: 1 1 0; min-width: 92px; text-align: center; padding: 6px 8px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: default; white-space: nowrap;
}
.stagebar-step.done { color: var(--fg); opacity: .55; }
.stagebar-step.on { background: var(--accent-soft, rgba(120,110,220,.16)); color: var(--accent); border-color: var(--accent); }
.stagebar-step.lost.on { background: var(--red-soft, rgba(220,70,70,.16)); color: var(--red, #d64646); border-color: var(--red, #d64646); }
.stagebar-step:not(.on):hover { color: var(--fg); }
button.stagebar-step:not(.on) { cursor: pointer; }
button.stagebar-step:not(.on):hover { border-color: var(--border); background: var(--gray-soft); }
.stagebar-lost, .stagebar-reopen { flex: none; border: 1px solid var(--border); background: none; color: var(--muted); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.stagebar-lost:hover { color: var(--red, #d64646); border-color: var(--red, #d64646); }
.stagebar-reopen:hover { color: var(--accent); border-color: var(--accent); }
/* ---- fiche Affaire : rail éditable (gauche) + contenu (droite) ------------ */
.affaire-2col { display: grid; grid-template-columns: 232px 1fr; gap: 20px; align-items: start; }
.affaire-rail { border-right: 1px solid var(--grid); padding-right: 18px; }
.affaire-main { min-width: 0; }
.af-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
.af-row { margin-bottom: 12px; min-width: 0; }
.af-lbl { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.af-val { font-size: 13px; }
.af-val.link { color: var(--accent); cursor: pointer; }
.af-val.editable { cursor: pointer; border-bottom: 1px dashed transparent; }
.af-val.editable:hover { border-bottom-color: var(--border); }
/* champs du rail = design system (arrondi, fond profond, pleine largeur, pas de débordement) */
.affaire-rail select, .affaire-rail input {
  font-size: 13px; width: 100%; box-sizing: border-box; max-width: 100%;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.affaire-rail select:focus, .affaire-rail input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.affaire-rail .kb-inline { width: 100%; }
.af-attio-ok { font-size: 12px; color: var(--green, #2e9e6b); border-top: 1px solid var(--grid); padding-top: 10px; margin-top: 2px; }
.af-attio-no { font-size: 12px; color: var(--muted); border-top: 1px solid var(--grid); padding-top: 10px; margin-top: 2px; }
.af-suivi { border-top: 1px solid var(--grid); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.af-state { font-size: 12.5px; font-weight: 650; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 1px; padding: 5px 9px; border-radius: 9px; background: var(--page); max-width: 100%; box-sizing: border-box; }
.af-state .muted { font-weight: 500; }
.af-state.st-reply { background: var(--red-soft); color: var(--red); }
.af-state.st-due { background: color-mix(in srgb, #e08a1e 16%, var(--page)); color: #b26a12; }
.af-state.st-planned { background: var(--green-soft); color: var(--green); }
/* rail étroit → on empile libellé + date, chacun pleine largeur (plus de débordement) */
.af-step-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.af-step-txt, .af-step-date { width: 100%; box-sizing: border-box; }
.af-relance-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 8px; }
/* bloc du haut : Montant + Probabilité (gauche), jauge win% VERTICALE (droite).
   align-items:stretch → la jauge prend la hauteur du bloc de gauche (plus de
   surconsommation de hauteur). */
.af-top { display: flex; gap: 12px; align-items: stretch; }
.af-top-facts { flex: 1; min-width: 0; }
.af-top-slider { flex: 0 0 auto; display: flex; }
.af-proba-val { font-size: 18px; font-weight: 760; font-variant-numeric: tabular-nums; }
/* jauge thermomètre : fond = spectre rouge→vert atténué (l'échelle), remplissage
   vif clippé à la valeur, paliers tous les 10 %. */
.af-gauge {
  position: relative; width: 20px; align-self: stretch; min-height: 92px;
  border-radius: 10px; overflow: hidden; cursor: pointer; touch-action: none;
  border: 1px solid var(--border);
  background: linear-gradient(to top, rgba(224, 72, 75, 0.16), rgba(230, 160, 32, 0.16), rgba(46, 158, 107, 0.16));
}
.af-gauge-fill {
  /* dégradé plein cadre (couleur = niveau) ; on révèle le bas via clip-path —
     évite le quirk height:% = 0 sous un parent stretch/flex imbriqué. */
  position: absolute; inset: 0;
  background: linear-gradient(to top, #e0484b 0%, #e6a020 42%, #86c33a 72%, #2e9e6b 100%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.75s var(--ease);
}
.af-gauge-ticks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.af-gauge-tick { position: absolute; left: 3px; right: 3px; height: 1px; background: rgba(255, 255, 255, 0.28); }
:root[data-theme='light'] .af-gauge-tick { background: rgba(0, 0, 0, 0.13); }
/* Début / Fin sur une ligne, mois compacts « JAN-26 » (input natif transparent) */
.af-dates { display: flex; gap: 10px; margin-top: 4px; }
.af-date-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.af-lbl-sm { font-size: 11px; color: var(--muted); }
.af-mchip { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.af-mchip:hover { border-color: var(--accent); }
.af-mchip-lbl { font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; }
.af-mchip-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.af-contacts { border-top: 1px solid var(--grid); padding-top: 12px; margin-top: 12px; }
.af-member { margin-bottom: 10px; }
.af-member-name { font-size: 13px; font-weight: 620; margin-bottom: 3px; }
.af-member-coord { display: block; font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-member-coord:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .affaire-2col { grid-template-columns: 1fr; gap: 0; }
  .affaire-rail { border-right: none; border-bottom: 1px solid var(--grid); padding-right: 0; padding-bottom: 14px; margin-bottom: 14px; }
}
/* fiche CRM zoom (deal non encore mission) : rail un peu plus large (coordonnées
   des membres) + on aplatit les cartes internes pour ne pas imbriquer de cartes */
.crm-2col { grid-template-columns: 320px minmax(0, 1fr); }
.crm-2col .affaire-rail > .card { border: none; background: none; padding: 0; margin: 0 0 16px; box-shadow: none; }
.crm-2col .affaire-rail .crm-facts { grid-template-columns: 1fr; gap: 10px; }
.crm-2col .affaire-rail .crm-cco { justify-content: flex-start; margin-top: 0; }
@media (max-width: 820px) { .crm-2col { grid-template-columns: 1fr; } }
/* ✓ « fait » (masque/snooze) + sentinel « voir plus » du brief commercial */
.cco-done {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
  font-size: 14px; line-height: 1; transition: border-color .12s, color .12s;
}
.cco-done:hover { border-color: var(--green); color: var(--green); }
.cco-done:disabled { opacity: .5; cursor: default; }
/* ⏰ « Plus tard » — même gabarit que le ✓ mais ambre : reporter n'est pas
   traiter. Vire au plein dès le 1er report, pour qu'une carte qu'on repousse
   sans cesse se voie revenir marquée. */
.cco-snooze {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
  font-size: 13px; line-height: 1; transition: border-color .12s, color .12s;
}
.cco-snooze:hover { border-color: var(--amber); color: var(--amber); }
.cco-snooze.warn { border-color: var(--amber); color: var(--amber); }
.cco-snooze:disabled { opacity: .4; cursor: default; }
/* 3e report d'affilée : la ligne tremble avant de partir. */
.shake { animation: shake .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
.cco-more { text-align: center; padding: 10px 0 2px; margin-top: 6px; border-top: 1px dashed var(--grid); cursor: pointer; }
.cco-more:hover { color: var(--accent); }
.cco-cleanup { margin-top: 12px; border-top: 1px solid var(--grid); padding-top: 8px; }
.cco-cleanup > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; list-style: none; }
.cco-cleanup > summary:hover { color: var(--fg); }
.cco-cleanup[open] > summary { margin-bottom: 4px; }
/* lecteur d'un échange (email/note/RDV) — rendu lisible, pas monospace */
.reader-meta { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.reader-from { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.reader-body {
  white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; max-height: 52vh; overflow: auto;
}

/* ---- le Greffier : mini-panneau de capture (bas droite) -------------------- */
.grf-pane {
  position: fixed; right: 96px; bottom: 18px; z-index: 72; /* au-dessus du panneau CFO (70) */
  width: 360px; max-height: 62vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-pop); padding: 12px;
}
.grf-head { display: flex; align-items: center; margin-bottom: 8px; }
.grf-input {
  width: 100%; box-sizing: border-box; resize: none; font: inherit; font-size: 13.5px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px;
}
.grf-input:focus { outline: none; border-color: var(--accent); }
.grf-list { overflow-y: auto; margin-top: 8px; }
.grf-row { padding: 7px 4px; border-bottom: 1px solid var(--grid); }
.grf-row.done { opacity: 0.5; }
.grf-row.done .grf-text { text-decoration: line-through; }
.grf-text { font-size: 13px; overflow-wrap: anywhere; }
.grf-text a { color: var(--accent); }
.grf-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.grf-chip {
  font-size: 10.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px;
  background: var(--gray-soft); color: var(--muted); border: 1px solid var(--border);
  cursor: pointer;
}
.grf-chip:hover { border-color: var(--accent); color: var(--accent); }
.grf-topic { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); cursor: default; }
.grf-date { margin-left: auto; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grf-done {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 1px 5px; border-radius: 6px;
}
.grf-done:hover { color: var(--green); background: var(--green-soft); }
.grf-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 0; }
.grf-toggle-done { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 11.5px; text-decoration: underline; }
/* autocomplete @ du Greffier */
.grf-mention-dd {
  position: absolute; left: 12px; right: 12px; top: 92px; z-index: 3000;
  max-height: 210px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px;
}
.grf-mention-it { display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 7px; cursor: pointer; }
.grf-mention-it.on, .grf-mention-it:hover { background: var(--accent-soft); }
.grf-mention-l { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grf-mention-s { font-size: 11px; color: var(--muted); }

/* journal des alertes levées : replié par défaut, discret, dépliable */
.issue-section.trail { margin-top: 22px; }
.trail-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); padding: 6px 2px;
}
.trail-summary::-webkit-details-marker { display: none; }
.trail-summary::before {
  content: '▸'; color: var(--muted); font-size: 11px;
  transition: transform 0.12s var(--ease);
}
.issue-section.trail[open] .trail-summary::before { transform: rotate(90deg); }
.trail-tick {
  color: var(--green); font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-soft); font-size: 11px;
}
.issue-section.trail .card { opacity: 0.7; }
.issue-section.trail .trail-row { cursor: default; }
/* pile « en pause » (snooze) : même dépliant discret, badge lune */
.issue-section.snoozed { margin-top: 14px; }
.issue-section.snoozed .card { opacity: 0.82; }
.snz-badge {
  width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-soft);
}
/* bouton snooze par ligne : discret, révélé au survol de la ligne */
.issue-snooze { opacity: 0; transition: opacity 0.12s; }
.issue-row:hover .issue-snooze { opacity: 0.6; }
.issue-snooze:hover { opacity: 1; }
.issue-section.trail .i-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }

/* ---- en-têtes figés au scroll (desktop seulement — sur mobile le sticky
   mange trop d'écran et le scroll horizontal des tables doit rester) ------- */
@media (min-width: 900px) {
  /* /factures : l'en-tête de la table colle en haut du viewport. Nécessite de
     libérer l'overflow-x du wrap (sinon le sticky se cale sur le wrap, pas la
     page) — sur desktop la table tient en largeur. */
  .view-factures .table-wrap { overflow-x: visible; }
  .view-factures .table-wrap thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--thead); box-shadow: 0 1px 0 var(--border);
  }
  /* /charge : la carte d'aperçu (jauges + barres + LIGNE DES MOIS) reste
     figée en haut pendant qu'on parcourt les lignes missions/personnes. */
  .view-charge .charge-overview {
    position: sticky; top: 0; z-index: 20;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.25);
  }
  /* /factures Kanban : tout le bandeau du haut (titre + KPI + filtres + chips)
     reste figé ; seules les tuiles des colonnes défilent. */
  .view-factures .fact-topbar {
    position: sticky; top: 0; z-index: 15;
    background: var(--page); padding: 30px 0 12px; margin: -30px 0 10px;
    border-bottom: 1px solid var(--border);
  }
  .view-factures .fact-topbar .tiles { margin-bottom: 14px; }
  .view-factures .fact-topbar .filters { margin-bottom: 10px; }
  .view-factures .fact-topbar .fact-bars { margin-bottom: 0; }
}
.of-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; color: var(--ink); white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.of-item:hover { background: var(--gray-soft); }
.of-item.danger { color: var(--red); }
.of-item.danger:hover { background: var(--red-soft); }
.of-ico { width: 16px; text-align: center; flex-shrink: 0; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset, 0 2px 8px rgba(0, 0, 0, 0.25); transform: scale(1.08); }

/* ---- modales --------------------------------------------------------------- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(17, 16, 11, 0.42);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1);
  display: grid; place-items: center; z-index: 95; padding: 24px;
  animation: fade 0.22s var(--ease);
  /* au-dessus du panneau Mentor/CFO (70) et du Greffier (72) : une confirmation
     déclenchée DEPUIS le panneau (ex. « Envoyer sur LinkedIn ») doit passer
     par-dessus, pas se glisser derrière — sinon le panneau reste net et
     cliquable au-dessus de la modale censée la bloquer. */
}
.modal {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-pop);
  width: 570px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column;
  animation: pop 0.32s var(--ease);
  border: 1px solid var(--modal-ring);
}
.modal-wide { width: 780px; }
/* feuille de temps active → modale élargie et haussée (la grille respire) */
.modal-wide:has(.ts-root) { width: min(1180px, 94vw); }
.modal-wide:has(.ts-root) .modal-body { min-height: min(64vh, 660px); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px;
}
.modal-head h2 { font-size: 17.5px; letter-spacing: -0.015em; }
.modal-body { padding: 8px 22px 22px; overflow-y: auto; }
.modal-foot {
  padding: 15px 22px; border-top: 1px solid var(--grid);
  display: flex; justify-content: flex-end; gap: 10px;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop {
  0% { opacity: 0; transform: scale(0.94) translateY(14px); }
  60% { opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.confirm-msg { margin: 6px 0 2px; color: var(--ink-2); line-height: 1.5; }

/* ---- onglets modale --------------------------------------------------------- */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--grid); margin-bottom: 18px; }
.tabs button {
  border: none; background: none; padding: 9px 15px; cursor: pointer;
  font-weight: 570; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-size: 14px;
  transition: color 0.15s, border-color 0.2s var(--ease);
}
.tabs button.on { color: var(--accent-dark); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
/* onglets fiche Affaire : icône + libellé ; mode compact = icônes seules */
.tabs { overflow: hidden; flex-wrap: nowrap; }
/* barre d'onglets qui DOIT tout montrer (sélecteur de pipes) : passe à la ligne,
   jamais d'ascenseur horizontal, chaque nom reste lisible en entier */
.tabs.tabs-wrap { overflow: visible; flex-wrap: wrap; row-gap: 2px; }
/* emoji cliquable d'un onglet de pipe (changer l'icône) + sa grille de choix */
.pipe-emo { cursor: pointer; border-radius: 5px; padding: 0 1px; transition: background 0.12s; }
.pipe-emo:hover { background: var(--gray-soft); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-pick { font-size: 22px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.emoji-pick:hover { border-color: var(--accent); background: var(--gray-soft); transform: scale(1.12); }
/* onglets de l'inbox (Commerce / Financière / COO) : bulle de compte par onglet */
.inbox-tabs { overflow: visible; flex-wrap: wrap; margin-bottom: 18px; gap: 4px; }
.inbox-tabs button { display: inline-flex; align-items: center; gap: 2px; }
.inbox-tab-badge { margin-left: 5px; font-size: 11px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.inbox-brief { display: block; }
.inbox-brief .cco-more { margin-top: 8px; }
.tabs button { white-space: nowrap; }
.tabs .tb-ic { margin-right: 5px; }
.tabs.compact button { padding: 9px 11px; }
.tabs.compact .tb-lb { display: none; }
/* onglets ICÔNE + TITRE empilés : titre toujours visible sous l'icône, la barre
   passe à la ligne au lieu de scroller horizontalement quand elle est à l'étroit. */
.tabs.tabs-stack { overflow: visible; flex-wrap: wrap; row-gap: 0; }
.tabs.tabs-stack button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 9px; }
.tabs.tabs-stack .tb-ic { margin-right: 0; font-size: 17px; line-height: 1; }
.tabs.tabs-stack .tb-lb { display: inline; font-size: 10.5px; line-height: 1.1; }
.tabs.compact .tb-ic { margin-right: 0; font-size: 16px; }

/* ---- toasts ------------------------------------------------------------------ */

/* centré en bas : évite le bouton flottant CFO et le panneau (côté droit) */
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 100; }
.toast {
  background: rgba(19, 19, 19, 0.92); color: #fff; padding: 11px 17px; border-radius: 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-pop); font-size: 14px; font-weight: 530;
  animation: slide 0.35s var(--ease); max-width: 340px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.toast-err { background: rgba(178, 34, 34, 0.94); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
@keyframes slide { from { transform: translateY(14px) scale(0.97); opacity: 0; } }

/* ---- états vides --------------------------------------------------------------- */

.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-icon {
  font-size: 26px; margin: 0 auto 12px; width: 58px; height: 58px;
  display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(160deg, var(--thead), var(--gray-soft));
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.empty-title { font-weight: 650; color: var(--ink-2); font-size: 15px; }
.empty-hint { font-size: 13.5px; margin-top: 5px; }

/* ---- dashboard ------------------------------------------------------------------- */

.dash-grid { display: grid; grid-template-columns: 1fr 350px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.list-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 8px;
  border-bottom: 1px solid var(--grid); cursor: pointer;
  margin: 0 -8px; border-radius: 9px;
  transition: background 0.15s;
}
.list-row:last-of-type { border-bottom: none; }
.list-row:hover { background: var(--row-hover); }
.list-row .grow { flex: 1; min-width: 0; }
.list-amount { font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; }

/* ---- graphique ----------------------------------------------------------------- */

.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.chart-tick { font-size: 11px; fill: var(--muted); font-family: inherit; }
.chart-legend { display: flex; gap: 18px; justify-content: flex-end; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; font-weight: 550; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart .bar {
  transform-box: fill-box; transform-origin: bottom;
  animation: grow 0.8s var(--ease) both;
  transition: opacity 0.2s;
}
.chart.no-anim .bar { animation: none; }
.chart.dimmed .bar { opacity: 0.35; }
.chart.dimmed .bar.lit { opacity: 1; }
@keyframes grow { from { transform: scaleY(0); } }
.chart-tip {
  /* fond OPAQUE (pas de transparence/flou) : sur les charts avec bande de
     surbrillance (.cf-hi-band), un fond translucide + backdrop-blur laissait
     la bande transparaître à travers le tooltip — lisible comme « la bande
     passe devant », alors que l'ordre d'empilement était déjà correct. Un
     fond plein règle ça sans ambiguïté, quel que soit l'empilement réel. */
  position: absolute; background: #131313; color: #fff; border-radius: 10px;
  padding: 10px 13px; font-size: 12.5px; pointer-events: none; z-index: 20;
  box-shadow: var(--shadow-pop); min-width: 155px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.tip-title { font-weight: 660; margin-bottom: 6px; }
.tip-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- grille avancement ------------------------------------------------------------ */

.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.prog-cell {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 9px 7px;
  text-align: center; background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease);
}
.prog-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.prog-cell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.prog-cell.past { background: var(--thead); }
.prog-cell .pm { font-size: 11.5px; color: var(--muted); font-weight: 620; }
.prog-cell input {
  width: 100%; border: none; text-align: center; font-weight: 680; font-size: 15.5px;
  margin-top: 2px; background: transparent; font-variant-numeric: tabular-nums;
}
.prog-cell input:focus { outline: none; color: var(--accent-dark); }
.prog-summary { display: flex; gap: 20px; margin-top: 15px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.prog-summary b { font-variant-numeric: tabular-nums; }

/* ---- feuille de temps (onglet Équipe) --------------------------------------- */
.ts-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ts-sep { width: 1px; height: 18px; background: var(--grid); margin: 0 4px; }
.ts-scroll { overflow-x: auto; border: 1px solid var(--grid); border-radius: 10px; }
.ts-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ts-table th {
  padding: 7px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); text-align: left; border-bottom: 1px solid var(--grid);
  white-space: nowrap; background: var(--surface);
}
.ts-table td { padding: 4px 4px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.ts-table tbody tr:last-child td { border-bottom: none; }
.ts-table input, .ts-table select { padding: 5px 7px; font-size: 13px; }
.ts-act { width: 140px; }
.ts-person, .ts-entity { max-width: 130px; }
.ts-num { width: 62px; }
.ts-d { width: 44px; text-align: center; padding: 5px 2px !important; }
.ts-day { text-align: center; }
.ts-split { white-space: nowrap; }
.ts-split .ts-num { width: 52px; margin-right: 4px; }
.ts-tot { font-weight: 650; white-space: nowrap; text-align: right; }
.ts-footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ts-totals { display: flex; align-items: baseline; gap: 12px; }
.ts-net { font-size: 17px; color: var(--accent-dark); }
.ts-entities { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ts-ent-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.ts-ent-chip .avatar { width: 18px; height: 18px; font-size: 8px; }
.ts-ent-chip.rest { border-style: dashed; color: var(--muted); }
.ts-actions { white-space: nowrap; }
.ts-fill-cell { width: 30px; padding: 0 2px !important; text-align: center; }
.ts-fill-cell .icon-btn { padding: 2px 5px; font-size: 15px; }
/* onglet Entités : répartition 100 % par ligne */
.ts-split-line {
  border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.ts-split-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ts-split-row { display: flex; align-items: center; gap: 8px; }
.ts-split-row .ts-entity { min-width: 180px; }
.ts-split-amt { font-weight: 650; min-width: 84px; text-align: right; }
.tip-row .avatar { width: 20px; height: 20px; font-size: 8px; }

/* ---- fiche personne ---------------------------------------------------------- */
.pp-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pp-head .form-row { margin-bottom: 2px; }
.pp-stats { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pp-stat {
  flex: 1; min-width: 110px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface);
}
.pp-stat-v { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pp-stat-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---- où passe mon temps (Analyse) ------------------------------------------ */
.tt-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .tt-grid { grid-template-columns: 1fr; } }
.tt-chart { position: relative; }
.tt-cols { display: flex; gap: 8px; align-items: flex-end; }
.tt-col { flex: 1; min-width: 0; text-align: center; }
.tt-bar {
  height: 160px; display: flex; flex-direction: column-reverse;
  background: var(--gray-soft); border-radius: 8px; overflow: hidden; position: relative;
}
.tt-bar.now { box-shadow: inset 0 0 0 2px var(--accent); }
.tt-seg { width: 100%; transition: height 0.4s var(--ease); }
.tt-capline {
  position: absolute; left: 0; right: 0; top: 0;
  border-top: 2px dashed var(--axis); pointer-events: none;
}
.tt-wlab { font-size: 10px; color: var(--muted); margin-top: 5px; white-space: nowrap; min-height: 13px; }
.tt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.tt-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 560; }
.tt-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tt-kpi {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-align: center;
}
.tt-kpi-v { font-size: 15px; font-weight: 740; font-variant-numeric: tabular-nums; }
.tt-kpi-l { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.tt-cmp-row { margin-bottom: 10px; }
.tt-cmp-head { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 4px; }
.tt-cmp-lbl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-cmp-bar { height: 6px; background: var(--gray-soft); border-radius: 4px; position: relative; }
.tt-cmp-fill { height: 100%; border-radius: 4px; }
.tt-cmp-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink); border-radius: 1px; opacity: 0.7;
}
.tt-delta {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 2px;
}
.tt-delta.ok { background: var(--green-soft); color: var(--green); }
.tt-delta.mid { background: var(--amber-soft); color: var(--amber); }
.tt-delta.bad { background: var(--red-soft); color: var(--red); }
.tt-goals { border-top: 1px solid var(--grid); margin-top: 16px; padding-top: 12px; }
.tt-goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.tt-goal-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 560; }
.tt-goal-row input { width: 64px; padding: 5px 8px; font-size: 13px; }
.tt-warn { color: var(--amber); }

/* ---- timeline des missions (Gantt mensuel) --------------------------------- */
.mtl-wrap { padding: 0; overflow: visible; }
.mtl-hd {
  overflow: hidden; position: sticky; top: var(--mtl-top, 0px); z-index: 5;
  background: var(--page); border-radius: var(--radius) var(--radius) 0 0;
}
.mtl-bd { overflow-x: auto; border-radius: 0 0 var(--radius) var(--radius); }
.mtl-months { display: flex; border-bottom: 1px solid var(--grid); background: var(--page); }
.mtl-mcell {
  flex: none; padding: 9px 0 7px; text-align: center; font-size: 11px; font-weight: 680;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.mtl-mcell.now { color: var(--accent-dark); }
.mtl-year { font-weight: 500; opacity: 0.6; text-transform: none; letter-spacing: 0; }
.mtl-grid { position: relative; }
.mtl-vline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); opacity: 0.6; }
.mtl-today { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); }
.mtl-bar {
  position: absolute; height: 30px; border-radius: 999px; cursor: grab;
  display: flex; align-items: center; gap: 7px; padding: 0 10px 0 4px;
  background: color-mix(in srgb, var(--bar) 26%, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--bar);
  user-select: none; touch-action: none; overflow: hidden; white-space: nowrap;
  transition: box-shadow 0.15s;
}
.mtl-bar:hover { box-shadow: inset 0 0 0 1.5px var(--bar), var(--shadow-1); z-index: 2; }
.mtl-bar.dragging { cursor: grabbing; opacity: 0.85; z-index: 3; }
.mtl-bar.scenario {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--bar) 20%, var(--surface)) 0 6px,
    color-mix(in srgb, var(--bar) 9%, var(--surface)) 6px 12px);
}
.mtl-bar .avatar { width: 22px; height: 22px; font-size: 9px; flex: none; }
.mtl-bar-label {
  font-size: 12.5px; font-weight: 640; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; pointer-events: none;
}
.mtl-h {
  position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; opacity: 0;
  transition: opacity 0.15s;
}
.mtl-h-l { left: 0; border-radius: 999px 0 0 999px; }
.mtl-h-r { right: 0; border-radius: 0 999px 999px 0; }
.mtl-bar:hover .mtl-h { opacity: 1; background: color-mix(in srgb, var(--bar) 45%, transparent); }

/* fiche mission : bandeau client + offre */
.deal-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--grid);
}
.deal-header-client {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--accent);
  font-size: 14px; font-weight: 640;
}
.deal-header-client:hover { text-decoration: underline; }
.deal-header-rel { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.deal-header-via { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.deal-header-via .deal-header-client { font-size: 13px; font-weight: 600; }
.deal-header-offer { display: flex; align-items: center; gap: 7px; flex: none; }
.deal-header-team { display: inline-flex; align-items: center; flex: none; padding-left: 4px; }
.deal-header-team .avatar {
  width: 26px; height: 26px; font-size: 10px; margin-left: -6px;
  box-shadow: 0 0 0 2px var(--surface); transition: transform 0.12s;
}
.deal-header-team .avatar:first-child { margin-left: 0; }
.deal-header-team .avatar:hover { transform: translateY(-2px); z-index: 2; }
.deal-header-more { margin-left: 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
/* kanban CRM (miroir Attio) : nombre de colonnes libre → UNE ligne + ascenseur
   horizontal (jamais de retour à la ligne, contrairement à la grid de base) */
.kanban.crm {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px;
  /* flex-start (et NON stretch) : chaque colonne prend la hauteur de SON contenu.
     Avec stretch + hauteur bornée + scroll interne, les colonnes se calaient sur
     la hauteur VISIBLE du pane (~322px) et les cartes débordaient sous le fond
     gris de la colonne. En flex-start le fond couvre toutes ses cartes. */
  align-items: flex-start; padding-bottom: 8px;
  /* FULL-BLEED : le kanban échappe au max-width (1280px) de .main pour exploiter
     toute la largeur fenêtre — sinon la dernière colonne est coupée alors qu'il
     reste de la place à droite. Le board démarre à 98px du bord (rail latéral 62
     + padding gauche .main 36) ; on retranche ~18px (gouttière + scrollbar) pour
     ne pas provoquer de scroll horizontal de page. Le scroll interne reste actif
     quand il y a vraiment trop de colonnes. */
  width: calc(100vw - 98px - 18px);
  max-width: calc(100vw - 98px - 18px);
  /* HAUTEUR BORNÉE : les cartes défilent DANS le pane → le haut de page (titre,
     onglets, recherche) reste visible, et les EN-TÊTES de colonnes se figent
     (sticky ci-dessous). L'offset ≈ hauteur du bandeau haut (titre+onglets+
     recherche). overflow auto sur les 2 axes (le scroll horizontal reste actif). */
  max-height: calc(100vh - 262px); /* haut du board mesuré ≈ 247px + marge */
  min-height: 340px;               /* petites fenêtres : ne pas écraser le board */
  overflow: auto;
}
/* toutes les colonnes descendent jusqu'à la plus haute (align-items:stretch) */
.kanban.crm .kb-col { flex: 0 0 244px; min-width: 244px; max-width: 244px; display: flex; flex-direction: column; }
/* en-tête de colonne FIGÉ en haut du pane pendant le défilement vertical */
.kanban.crm .kb-col-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg); margin: -10px -10px 0; padding: 10px 14px 8px;
  border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--border);
}
.kanban.crm .kb-col-body { flex: 1; }
/* drag : on grise le board, la colonne survolée reste nette + halo accent —
   on voit d'un coup d'œil où la tuile atterrira si on lâche. */
.kanban.crm.kb-dnd .kb-col { opacity: 0.5; transition: opacity 0.12s var(--ease); }
.kanban.crm.kb-dnd .kb-col.kb-over {
  opacity: 1; border-color: var(--accent); border-style: dashed;
  background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-soft);
}
/* pied fusionné sur la ligne des tags : 💬 + compteur poussés à droite */
.kbc-foot-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* logo société sur la ligne liée, cliquable → fiche société */
.kbc-co-logo {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--border);
}
.kbc-sub-link { cursor: pointer; }
.kbc-sub-link:hover span:last-child { color: var(--accent); text-decoration: underline; }
/* tuile CRM façon Attio : identité, société, montant/date, tags, pied méta */
.kbc-head { display: flex; gap: 7px; align-items: center; min-width: 0; }
.kbc-name { font-weight: 660; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbc-sub { display: flex; gap: 6px; align-items: center; margin-top: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.kbc-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbc-line { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.kbc-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.kbc-tag {
  font-size: 10.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px;
  background: var(--gray-soft); color: var(--muted); border: 1px solid var(--border);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbc-foot {
  display: flex; gap: 6px; align-items: center; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--grid);
}
/* ✕ suppression de tuile : discret, révélé au survol de la carte */
.kbc-del {
  flex: none; border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px;
  border-radius: 6px; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.kb-card:hover .kbc-del { opacity: 0.55; }
.kbc-del:hover { opacity: 1; color: var(--red); background: var(--red-soft); }
/* 📦 archiver : même discrétion, révélé au survol ; « on » = déjà archivé */
.kbc-arch {
  flex: none; border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px;
  border-radius: 6px; opacity: 0; transition: opacity 0.12s, background 0.12s;
}
.kb-card:hover .kbc-arch { opacity: 0.5; }
.kbc-arch:hover { opacity: 1; background: var(--gray-soft); }
.kbc-arch.on { opacity: 0.9; }
.kb-card.archived { opacity: 0.6; }
.kb-card.archived .kbc-name { text-decoration: line-through; text-decoration-color: var(--border); }
.kb-arch-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.kb-arch-toggle input { margin: 0; }
.kbc-age { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* paliers du chrono « dernier contact » : <7 j vert, 7-15 noir, 15-30 jaune, 30+ rouge */
.kbc-age.t-fresh { color: var(--green); font-weight: 650; }
.kbc-age.t-mid { color: var(--ink); }
.kbc-age.t-warn { color: var(--amber); font-weight: 650; }
.kbc-age.t-old { color: var(--red); font-weight: 700; }
/* pastille d'état de relance sur la tuile (affaire dans la boucle) */
.kbc-state { font-size: 12px; line-height: 1; }
.kbc-state.st-reply { animation: pulse-soft 2s ease-in-out infinite; }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* emoji fast-track (affaire hors-pipe → un clic pour la suivre) */
.kbc-fast { border: none; background: none; cursor: pointer; font-size: 13px; padding: 0 2px; opacity: 0.35; transition: opacity 0.15s, transform 0.15s; line-height: 1; }
.kbc-fast:hover { opacity: 1; transform: scale(1.2); }
/* tooltip immédiat sur le titre d'une tuile : nom complet + gens liés */
.kb-nametip { position: fixed; z-index: 200; max-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); padding: 8px 11px; pointer-events: none; }
.kb-nametip-title { font-weight: 680; font-size: 13px; margin-bottom: 2px; }
.kb-nametip-sub { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
.kb-nametip-p { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.kb-nametip-p.muted { color: var(--muted); }
/* puce win% colorée (rouge→vert) sur la tuile */
.kbc-proba { font-size: 11px; font-weight: 750; padding: 1px 6px; border-radius: 6px; color: #fff; background: var(--pc, var(--accent)); font-variant-numeric: tabular-nums; }
/* indicateur de réordonnancement vertical (drag dans la même colonne) */
.kb-card.kb-drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.kb-card.kb-drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
/* cadran de qualification (vue légère) : barre horizontale rouge→vert */
.qd-wrap { display: flex; align-items: center; gap: 8px; width: 100%; }
.qd-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--page); border: 1px solid var(--border); position: relative; cursor: pointer; touch-action: none; overflow: hidden; min-width: 90px; }
.qd-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; transition: width 0.15s var(--ease); }

/* édition inline sur tuile kanban + chip offre + menu déroulant */
.kb-inline {
  font-size: 12px; padding: 1px 6px; border: 1px solid var(--accent);
  border-radius: 6px; background: var(--surface); color: var(--ink);
}
.kb-inline:focus { outline: none; }
.kbc-offer { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.kbc-offer.empty { border-style: dashed; color: var(--muted); min-width: 22px; justify-content: center; }
.kbc-offer.empty:hover { color: var(--accent); border-color: var(--accent); }
.kb-offer-menu {
  position: fixed; z-index: 120; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.kb-offer-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  font-size: 12.5px; border: none; background: none; color: var(--ink);
  border-radius: 7px; cursor: pointer; text-align: left;
}
.kb-offer-item:hover { background: var(--grid); }
.kb-offer-item.on { font-weight: 700; }

/* barre de filtres par offre du board CRM — les PUCES elles-mêmes sont les
   `.pipe-chip` partagées avec le Sales Dashboard et Missions (un seul composant
   dans toute l'app) ; il ne reste ici que la mise en page de la barre. */
.kb-offerbar { gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 2px; }

/* mini-indicateur de synchro du pipe (bas gauche) : spinner puis tick discret */
.sync-ind {
  position: fixed; left: 14px; bottom: 12px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px; box-shadow: var(--shadow-1);
  opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.sync-ind.loading { opacity: 1; }
.sync-ind.done { opacity: 0.55; }
.sync-spin {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: sync-spin 0.7s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }
.sync-tick { color: var(--muted); font-weight: 800; }

/* zone de consignes libres avant génération d'un mail (CCO) */
.cco-brief {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
}
.cco-brief:focus { outline: none; border-color: var(--accent); }
.kbc-coord {
  flex: none; font-size: 12px; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbc-coord:hover { color: var(--accent); }
.kbc-copy {
  flex: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); border-radius: 6px; cursor: pointer; line-height: 1;
  font-size: 12px; padding: 3px 6px; transition: color 0.12s, border-color 0.12s;
}
.kbc-copy:hover { color: var(--accent); border-color: var(--accent); }
.kbc-copy.ok { color: var(--green); border-color: var(--green); }
.hist-row { cursor: default; border-radius: 6px; transition: background 0.1s; }
.hist-row:hover { background: var(--grid); }

/* ---- flux historique unifié (dossier CRM) : logo par plateforme ---- */
.plat-ico { flex: none; display: inline-flex; align-items: center; width: 15px; height: 15px; }
.plat-ico svg { display: block; border-radius: 3px; }

/* ---- Playbook commercial (matrice moments × offres) ---- */
.pb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pb-ta {
  width: 100%; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 10px; resize: vertical;
  background: var(--surface); color: var(--ink); font-family: inherit;
}
.pb-ta:focus { outline: none; border-color: var(--accent); }
.pb-sample { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--grid); }
.pb-sample-text { flex: 1; min-width: 0; font-size: 12.5px; font-style: italic; color: var(--ink); }
.pb-mini-sel { flex: none; }
.pb-matrix { border-collapse: collapse; width: 100%; }
.pb-matrix th, .pb-matrix td { padding: 5px 6px; text-align: left; }
.pb-matrix thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pb-row-head, .pb-col-head {
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 12.5px; font-weight: 650; padding: 4px 6px; border-radius: 8px; text-align: left;
}
.pb-row-head:hover, .pb-col-head:hover { background: var(--grid); color: var(--accent); }
.pb-cell {
  width: 100%; padding: 5px 8px; font-size: 11px; border-radius: 8px; cursor: pointer;
  border: 1px dashed var(--border); background: none; color: var(--muted);
}
.pb-cell:hover { border-color: var(--accent); color: var(--accent); }
.pb-cell.ov { border-style: solid; border-color: var(--accent); color: var(--accent); font-weight: 650; }
.pb-inherit {
  font-size: 12px; line-height: 1.5; color: var(--muted); background: var(--grid);
  padding: 10px 12px; border-radius: 10px; white-space: pre-wrap; margin: 0; max-height: 220px; overflow-y: auto;
}
.pb-example {
  font-size: 12.5px; line-height: 1.55; color: var(--ink); background: var(--surface);
  border: 1px solid var(--accent); padding: 12px 14px; border-radius: 10px;
  white-space: pre-wrap; margin: 10px 0 0;
}
.pb-asset { padding: 8px 0; border-bottom: 1px solid var(--grid); }
.pb-asset-stages { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.pb-stage-chip {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
}
.pb-stage-chip.on { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.pb-adopt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.pb-adopt input { margin-top: 3px; flex: none; }
.pb-adopt pre { flex: 1; min-width: 0; }

/* ---- barre de recherche d'un pipe kanban ---- */
.kb-toolbar { margin-bottom: 12px; }
.kb-search {
  width: 100%; max-width: 380px; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
.kb-search:focus { outline: none; border-color: var(--accent); }
.kb-search::placeholder { color: var(--muted); }

/* carte brouillon d'email du CCO (draft_email) */
.cfo-draft {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  background: var(--surface); margin-top: 4px;
}
.cfo-draft-h { font-weight: 700; font-size: 13px; }
.cfo-draft-s { font-weight: 650; font-size: 13.5px; margin: 6px 0 4px; }
.cfo-draft-b {
  font-family: inherit; font-size: 13px; white-space: pre-wrap; margin: 0;
  color: var(--ink); background: var(--page); border-radius: 8px; padding: 8px 10px;
  max-height: 260px; overflow-y: auto;
}

/* tuiles connecteurs (Réglages) : une par catégorie, détail en modale */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.conn-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: left; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.conn-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--axis); }
.conn-ico { font-size: 26px; flex: none; }
.conn-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.conn-name { font-size: 14.5px; font-weight: 700; margin: 1px 0; }
.conn-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* toggle pilule « Mon plan » (plan de charge) */
.chip-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted); user-select: none;
  /* « Mon plan » se cassait en deux lignes dans sa pastille dès que la barre
     devenait étroite : l'interrupteur faisait alors 40 px de haut au lieu de 25
     et désalignait toute la rangée. */
  white-space: nowrap;
}
.chip-toggle input { display: none; }
.chip-toggle.on { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }

/* avancement : barre proéminente + grille de KPIs */
.prog-bar-wrap { margin-top: 16px; }
.prog-bar-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.prog-bar-head b { font-size: 20px; font-variant-numeric: tabular-nums; }
.prog-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.prog-kpi { background: var(--panel-2, var(--thead)); border-radius: 10px; padding: 9px 11px; }
.prog-kpi-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.prog-kpi-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.prog-kpi-s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* facture : barre de couverture (planifié / vendu) */
.inv-cover { margin: 4px 0 14px; }
.inv-cover-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.inv-cover-top b { font-variant-numeric: tabular-nums; }

/* table factures de la fiche mission : compacte pour tenir sans ascenseur */
.inv-table th, .inv-table td { padding-left: 6px; padding-right: 6px; }
.inv-table input[type='month'] { width: 140px; box-sizing: border-box; }
.inv-table .icon-btn { padding: 4px 6px; }

/* ---- prévisionnel ------------------------------------------------------------------- */

.fc-table th, .fc-table td { padding: 6px 6px; font-size: 12.5px; }
.fc-table td { font-variant-numeric: tabular-nums; text-align: right; }
.fc-table td:first-child, .fc-table th:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface);
  font-weight: 560; min-width: 130px; z-index: 1;
  box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.12);
}
.fc-table th:first-child { background: var(--thead); }
.fc-table .fc-total td { font-weight: 720; border-top: 2px solid var(--axis); }
.fc-table .fc-section td {
  color: var(--muted); font-weight: 680; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.08em; padding-top: 16px; border-bottom: none; background: var(--surface);
}
.fc-neg { color: var(--red); }
.fc-pos { color: var(--green); }
.fc-now { background: var(--accent-soft); }
.fc-table td:first-child.fc-now { background: var(--accent-soft); }

/* ---- login --------------------------------------------------------------------------- */

.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(700px 420px at 18% 8%, rgba(42, 120, 214, 0.16), transparent 65%),
    radial-gradient(600px 400px at 85% 90%, rgba(74, 58, 167, 0.12), transparent 65%),
    var(--page);
}
.login-box { width: 350px; text-align: center; padding: 38px 32px; animation: pop 0.45s var(--ease); }
.login-box .logo-mark { width: 48px; height: 48px; margin: 0 auto 16px; font-size: 23px; border-radius: 15px; }
.login-box input { margin: 4px 0 2px; text-align: center; }

/* ---- divers ---------------------------------------------------------------------------- */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.right { margin-left: auto; }
.nowrap { white-space: nowrap; }
a.plain { color: var(--accent-dark); text-decoration: none; font-weight: 570; }
a.plain:hover { text-decoration: underline; }
.section-title { font-size: 15px; font-weight: 660; margin: 20px 0 10px; letter-spacing: -0.01em; }
.note-item { padding: 11px 0; border-bottom: 1px solid var(--grid); }
.note-item:last-child { border-bottom: none; }
.note-date { font-size: 12px; color: var(--muted); margin-bottom: 3px; display: flex; justify-content: space-between; }
.note-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; }

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

/* ---- scrollbar sombre -------------------------------------------------- */

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid transparent; background-clip: content-box;
}

/* ---- toggle de thème (sidebar) : un seul bouton, calqué sur la nav ------- */

.theme-toggle {
  margin-top: 10px; width: 100%;
  display: flex; align-items: center; gap: 0; justify-content: center;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  border: none; background: none; color: var(--side-ink);
  font: inherit; font-size: 14.5px; font-weight: 500; text-align: left;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.sidebar:hover .theme-toggle { justify-content: flex-start; gap: 11px; }
.theme-toggle:hover { background: var(--side-hover); color: var(--side-strong); }
.theme-toggle .tt-icon svg { width: 18px; height: 18px; opacity: 0.6; transition: opacity 0.18s; }
.theme-toggle:hover .tt-icon svg { opacity: 0.9; }

/* ---- wizard nouvelle mission --------------------------------------------- */

.wiz-dots {
  display: flex; align-items: center; margin: 2px 0 22px;
}
.wiz-dot {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 620; color: var(--muted); white-space: nowrap;
  background: none; border: none; padding: 0; cursor: default;
}
.wiz-dot.clickable { cursor: pointer; }
.wiz-dot .n {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--gray-soft); color: var(--muted);
  transition: background 0.25s var(--ease), color 0.25s, box-shadow 0.25s;
}
.wiz-dot.on { color: var(--ink); }
.wiz-dot.on .n {
  background: linear-gradient(160deg, #4d95e8, var(--accent-deep));
  color: #fff; box-shadow: 0 3px 10px rgba(42, 120, 214, 0.4);
}
.wiz-dot.done { color: var(--ink-2); }
.wiz-dot.done .n { background: var(--green-soft); color: var(--green); }
.wiz-line {
  flex: 1; height: 1.5px; margin: 0 10px;
  background: var(--grid); border-radius: 1px; min-width: 14px;
}
.wiz-step { animation: wizin 0.35s var(--ease); min-height: 208px; }
@keyframes wizin { from { opacity: 0; transform: translateX(18px); } }
.wiz-step.back { animation: wizback 0.35s var(--ease); }
@keyframes wizback { from { opacity: 0; transform: translateX(-18px); } }
.wiz-title { font-size: 16.5px; font-weight: 680; letter-spacing: -0.015em; margin-bottom: 3px; }
.wiz-hint { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; background: var(--surface); text-align: left;
  transition: border-color 0.18s, background 0.18s, transform 0.15s var(--ease), box-shadow 0.18s;
}
.choice-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.choice-card.on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.choice-card .c-title { font-weight: 650; font-size: 14px; }
.choice-card .c-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.choice-card-hi {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice-card-hi .c-title { color: var(--accent-dark); }

.wiz-preview {
  margin-top: 16px; border: 1px dashed var(--axis); border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px;
}
.wiz-preview .p-row {
  display: flex; justify-content: space-between; padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.wiz-preview .p-row b { font-weight: 650; }
.wiz-recap { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* ---- plan de charge --------------------------------------------------------- */

.year-nav {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-1); padding: 3px 6px;
}
.year-nav b { min-width: 56px; text-align: center; font-size: 14.5px; letter-spacing: 0.02em; }
.year-nav button {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; padding: 4px 8px; border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}
.year-nav button:hover { background: var(--gray-soft); color: var(--ink); }

.sel-wrap { position: relative; display: inline-flex; }
.sel-wrap select.sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 8px 30px 8px 13px; cursor: pointer;
  font-weight: 570; font-size: 14px; box-shadow: var(--shadow-1);
  transition: box-shadow 0.16s var(--ease), background 0.16s;
}
.sel-wrap select.sel:hover { background: var(--btn-hover); }
.sel-wrap select.sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sel-wrap .sel-arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-55%);
  pointer-events: none; color: var(--muted); font-size: 10px;
}
/* variante compacte (leviers du simulateur, filtres denses) */
.sel-wrap select.sel.sel-sm {
  padding: 5px 26px 5px 11px; font-size: 12.5px; font-weight: 560; box-shadow: none;
}
.sel-wrap:has(.sel-sm) .sel-arrow { right: 10px; font-size: 9px; }

/* pastille de couleur DANS le select (chip offre) : suit --dot, mis à jour au
   changement — jamais une pastille externe qui pourrait se désynchroniser. */
.sel-dot-wrap::before {
  content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--muted));
  pointer-events: none; z-index: 1;
}
.sel-dot-wrap select.sel.sel-dot { padding-left: 28px; }
.sel-dot-wrap:has(.sel-sm) { padding-left: 0; }
.sel-dot-wrap select.sel.sel-dot.sel-sm { padding-left: 24px; }

.wl-table { table-layout: fixed; } /* colonnes de mois égales → calées sur les barres */
.wl-table th, .wl-table td { padding: 6px 6px; font-size: 12.5px; }
.wl-table td { font-variant-numeric: tabular-nums; text-align: right; }
.wl-table td:first-child, .wl-table th:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface);
  width: 240px; min-width: 240px; max-width: 240px; z-index: 1; font-weight: 560;
  box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.12);
}
.wl-table th:first-child { background: var(--thead); }
.wl-table th { text-align: right; }
.wl-table .wl-pct {
  display: block; font-size: 11px; margin-top: 3px; border-radius: 999px;
  padding: 1px 7px; font-weight: 700; text-align: center;
}
.wl-cell { border-radius: 6px; }
.wl-total td { font-weight: 720; border-top: 2px solid var(--axis); }
.wl-now { background: var(--accent-soft); }
/* vue hebdomadaire : colonnes étroites (min-width posé en JS selon le nombre) */
.wl-table.wl-weeks th, .wl-table.wl-weeks td { padding: 6px 3px; font-size: 11px; }
.wl-table.wl-weeks th.wl-sub { color: var(--muted); font-weight: 500; }
.wl-table.wl-weeks .wl-fill-d { font-size: 10px; }

/* wizard : pastille active dorée en sombre */
:root[data-theme="dark"] .wiz-dot.on .n {
  background: linear-gradient(160deg, #f0ca79, #b98a2e);
  color: #1c1503; box-shadow: 0 3px 10px rgba(217, 164, 65, 0.4);
}

/* ---- badge de navigation (inbox) ------------------------------------------ */

/* overlay ancré au coin de l'icône (position:absolute) — jamais dans le flux,
   donc l'icône reste centrée quand la barre est repliée */
.nav-badge {
  position: absolute; top: -6px; left: 11px;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 750; display: grid; place-items: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 2px var(--side-bg);
  pointer-events: none;
}

/* ---- inbox « À traiter » ---------------------------------------------------- */

.issue-section { margin-bottom: 18px; }
.issue-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-size: 13px; font-weight: 680; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.issue-head .badge { font-size: 11px; }
.issue-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--grid);
}
.issue-row:last-child { border-bottom: none; }
.issue-row .grow { flex: 1; min-width: 0; }
.issue-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px;
  background: var(--gray-soft);
}
.issue-row .i-title { font-weight: 620; font-size: 14px; cursor: pointer; }
.issue-row .i-title:hover { color: var(--accent-dark); }
.issue-row .i-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.issue-amount { font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.issue-fix { white-space: nowrap; }
.issue-inline-pct {
  width: 64px; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; text-align: center; font-weight: 650;
  background: var(--surface);
}
.issue-inline-pct:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ---- sparklines dans les tuiles ---------------------------------------------- */

.spark { position: absolute; right: 14px; bottom: 12px; width: 84px; height: 30px; opacity: 0.55; }
.tile-label, .tile-value, .tile-sub { position: relative; z-index: 1; }
.spark path.line {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.spark path.fill { opacity: 0.13; }
.tile.has-spark { padding-right: 106px; }

/* ---- jauges (ratios santé) --------------------------------------------------- */

.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; }
.gauge { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 8px 10px; }
.gauge-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 680; margin-bottom: 2px;
}
.gauge-svg { width: 100%; max-width: 210px; height: auto; display: block; }
.gauge-svg .gauge-end { fill: var(--muted); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.gauge-svg .gauge-num { font-size: 30px; font-weight: 780; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-family: inherit; }
.gauge-sub { font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 210px; line-height: 1.35; }

/* ---- vue d'ensemble Dépenses : répartition (gauche) + courbe (droite) --------- */

.dep-overview { display: flex; align-items: stretch; margin-bottom: 14px; overflow: hidden; }
.dep-rep {
  flex: 0 0 210px; min-width: 0; padding: 14px 16px;
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.dep-rep-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dep-rep-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 680; }
.dep-rep-total { font-size: 15px; font-weight: 740; font-variant-numeric: tabular-nums; }
.dep-rep-list { display: flex; flex-direction: column; gap: 8px; }
.dep-rep-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 3px; }
.dep-rep-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.dep-rep-amt { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11.5px; }
.dep-rep-bar { height: 5px; border-radius: 3px; background: var(--gray-soft); overflow: hidden; }
.dep-rep-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.5s var(--ease); }
.dep-rep-fill.over { background: var(--red); }
.dep-rep-nav { display: flex; align-items: center; gap: 6px; }
.dep-rep-nav .icon-btn { width: 24px; height: 24px; font-size: 15px; }
.dep-trend { flex: 1; min-width: 0; padding: 14px 0 6px; display: flex; flex-direction: column; }

.trend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; padding: 0 14px; }
.trend-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 680; }
.trend-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.trend-legend .tl-real { color: var(--accent-dark); font-weight: 650; }
.trend-val { font-size: 23px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.trend-delta { font-size: 12px; font-weight: 650; margin-top: 2px; }
.trend-delta.good { color: var(--green); }
.trend-delta.warn { color: var(--amber); }
.trend-delta.bad { color: var(--red); }
.trend-svg { width: 100%; height: 150px; display: block; overflow: visible; margin-top: auto; }
.trend-bud-area { fill: var(--axis); opacity: 0.12; stroke: none; }
.trend-bud-line { fill: none; stroke: var(--axis); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.8; }
.trend-real { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.trend-proj { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0.65; }
/* pipeline (ex-scénario) : pointillé violet, code couleur de la catégorie */
.cf-proj { fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0.9; }
.trend-svg .tg0 { stop-color: var(--accent); stop-opacity: 0.28; }
.trend-svg .tg1 { stop-color: var(--accent); stop-opacity: 0; }
.trend-now { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; }
.trend-x { fill: var(--muted); font-size: 10.5px; text-anchor: middle; font-family: inherit; }
/* points + valeurs sur la ligne réel (comme la trésorerie) */
.trend-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.trend-val-lbl { fill: var(--ink-2); font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- palette de commandes ⌘K --------------------------------------------------- */

.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(10, 9, 15, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 80; display: flex; justify-content: center;
  padding-top: 12vh; animation: fade 0.15s var(--ease);
}
.cmdk {
  width: 560px; max-width: calc(100% - 40px); align-self: flex-start;
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-pop); border: 1px solid var(--modal-ring);
  overflow: hidden; animation: pop 0.25s var(--ease);
}
.cmdk input {
  width: 100%; border: none; background: none; padding: 16px 20px;
  font-size: 16px; outline: none; border-bottom: 1px solid var(--grid);
}
.cmdk-list { max-height: 48vh; overflow-y: auto; padding: 8px; }
.cmdk-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700; padding: 10px 12px 4px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: none; background: none; border-radius: 10px;
  cursor: pointer; text-align: left; font-size: 14px;
}
.cmdk-item .k-sub { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.cmdk-item.sel { background: var(--accent-soft); }
.cmdk-item.sel .k-sub { color: var(--accent-dark); }
.cmdk-icon {
  width: 26px; height: 26px; border-radius: 8px; display: grid;
  place-items: center; font-size: 13px; background: var(--gray-soft); flex-shrink: 0;
}
.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14px; }
.cmdk-foot {
  display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--grid);
  font-size: 11.5px; color: var(--muted);
}
.cmdk-foot kbd {
  background: var(--gray-soft); border-radius: 5px; padding: 1px 5px;
  font-family: inherit; font-size: 11px; border: 1px solid var(--border);
}

/* ---- plan de charge : vue d'ensemble (jauge calée + barres alignées) --------- */

.charge-overview { display: flex; align-items: stretch; margin-bottom: 0; overflow: hidden; }
.charge-gauge-pane {
  flex: 0 0 240px; min-width: 0; padding: 14px 16px 12px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
}
.charge-strip-pane { flex: 1; min-width: 0; padding: 16px 0 14px; }

.cap-card { padding: 20px 22px 18px; }
.cap-strip { display: flex; gap: 0; align-items: flex-end; position: relative; }
.cap-spacer { pointer-events: none; }
/* La tuile quota remplit toute sa hauteur : la bande de barres s'étire et les
   barres grandissent pour occuper l'espace (au lieu d'un vide sous les mois). */
.quota-card { display: flex; flex-direction: column; height: 100%; }
.quota-card .cap-strip { flex: 1; align-items: stretch; min-height: 120px; }
.quota-card .cap-col { justify-content: flex-end; }
.quota-card .cap-bar { height: auto; flex: 1; min-height: 90px; }
.cap-tip {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
  background: rgba(19, 19, 19, 0.94); color: #fff; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; min-width: 168px;
  box-shadow: var(--shadow-pop); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.cap-tip .tip-row { color: #e9eaf0; }
.cap-tip .tip-row b { color: #fff; }
.cap-tip-scn { margin-left: 6px; font-size: 11px; opacity: 0.6; font-style: italic; }
.cap-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.cap-pct { font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cap-bar {
  width: 100%; max-width: 46px; height: 108px; border-radius: 10px;
  background: var(--gray-soft); position: relative; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.cap-bar.now { box-shadow: inset 0 0 0 2px var(--accent); }
.cap-fill {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 10px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transition: height 0.9s var(--ease);
}
/* segments empilés par offre dans une barre quota : couleur d'accent par
   défaut, couleur EXACTE de l'offre (--oc) au survol de la colonne */
.cap-seg {
  position: absolute; left: 0; right: 0;
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  transition: height 0.9s var(--ease), background-color 0.18s ease;
}
.cap-col:hover .cap-seg { background-color: var(--oc); }
/* part scénario (provisoire) : hachures + moins opaque, comme le tableau */
.cap-fill.cap-scn {
  opacity: 0.5;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.32) 0 3px, transparent 3px 7px);
}
.cap-month {
  font-size: 11px; color: var(--muted); font-weight: 640;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cap-col.now .cap-month { color: var(--accent-dark); }

/* cellules de mission : mini-barres qui se remplissent */
.wl-table td { text-align: center; }
.wl-table td:first-child, .wl-table th:first-child { text-align: left; }
.wl-table td:last-child { text-align: right; }
.wl-fill { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.wl-fill-track {
  width: 15px; height: 34px; border-radius: 5px; background: var(--gray-soft);
  position: relative; overflow: hidden;
}
.wl-fill-in {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  transition: height 0.8s var(--ease);
}
/* scénario : provisoire → moins opaque + hachures diagonales (comme le dashboard) */
.wl-fill-in.scenario {
  opacity: 0.5;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 2px, transparent 2px 5px);
}
.wl-fill-d { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- avancement : pointages hors période --------------------------------- */

.stray-block {
  margin-top: 16px; border: 1px solid var(--red-soft); border-radius: 12px;
  padding: 12px 14px; background: color-mix(in srgb, var(--red) 5%, transparent);
}
.stray-head { font-size: 12.5px; color: var(--red); font-weight: 560; margin-bottom: 10px; line-height: 1.45; }
.prog-cell.stray { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.prog-cell.stray .pm { color: var(--red); }

/* ---- tableaux triables / filtrables -------------------------------------- */

.stbl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.stbl-search {
  position: relative; flex: 1; min-width: 200px; max-width: 320px;
}
.stbl-search input {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px 9px 34px; background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 14px; transition: box-shadow 0.15s, border-color 0.15s;
}
.stbl-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.stbl-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.stbl-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

th.stbl-th { cursor: default; user-select: none; }
th.stbl-th.sortable { cursor: pointer; transition: color 0.15s; }
th.stbl-th.sortable:hover { color: var(--ink); }
.stbl-th .stbl-h { display: inline-flex; align-items: center; gap: 5px; }
th.stbl-th.num .stbl-h { flex-direction: row-reverse; }
.stbl-caret {
  display: inline-flex; width: 12px; opacity: 0; transition: opacity 0.15s, transform 0.2s var(--ease);
  font-size: 10px;
}
th.stbl-th.sortable:hover .stbl-caret { opacity: 0.4; }
th.stbl-th.sorted .stbl-caret { opacity: 1; color: var(--accent-dark); }
th.stbl-th.sorted.desc .stbl-caret { transform: rotate(180deg); }
.stbl-empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ---- tiles cliquables ------------------------------------------------------ */

.tile.clickable { cursor: pointer; }
.tile.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tile.clickable::after {
  content: "›"; position: absolute; top: 12px; right: 15px; color: var(--muted);
  font-size: 18px; opacity: 0; transition: opacity 0.18s, transform 0.18s var(--ease);
}
.tile.clickable:hover::after { opacity: 0.7; transform: translateX(2px); }

/* ---- éditeur de montant inline (factures) -------------------------------- */

.amt-edit {
  display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end;
}
.amt-in {
  width: 82px; text-align: right; border: 1px solid transparent; border-radius: 7px;
  padding: 5px 7px; background: var(--gray-soft); font-weight: 620;
  font-variant-numeric: tabular-nums; transition: border-color 0.15s, background 0.15s;
  -moz-appearance: textfield; appearance: textfield; flex: none;
}
/* pas de flèches spinner (elles rognaient les chiffres → débordement) */
.amt-in::-webkit-outer-spin-button,
.amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt-in.amt-pct { width: 56px; font-weight: 500; }
.amt-in:hover { background: var(--surface); border-color: var(--border); }
.amt-in:focus {
  outline: none; background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.amt-u { color: var(--muted); font-size: 12.5px; margin-right: 3px; }
/* l'unité active (celle qui fait foi) est mise en relief */
.amt-edit:not(.is-pct) .amt-in:first-child { color: var(--ink); }
.amt-edit.is-pct .amt-pct { color: var(--ink); }
.amt-edit:not(.is-pct) .amt-pct { color: var(--muted); }

/* ---- factures « pipeline » (prévisions de deals non gagnés) --------------- */
tr.inv-pipe > td:not(:first-child) { opacity: 0.45; }
.kb-card.inv-pipe, .fcal-chip.inv-pipe { opacity: 0.5; }
.kb-card.inv-pipe { border-style: dashed; }
.inv-pipe-cb { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; flex: none; }

/* ---- calendrier annuel des factures --------------------------------------- */
.fcal-year-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 2px 12px; gap: 12px;
}
.fcal-year-head b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fcal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1100px) { .fcal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .fcal-grid { grid-template-columns: repeat(2, 1fr); } }
.fcal-month {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.fcal-month.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fcal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.fcal-mname { font-weight: 700; text-transform: capitalize; font-size: 13px; }
.fcal-mtot { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.fcal-pipe-tot { font-size: 11px; color: var(--muted); font-style: italic; margin-top: -3px; }
.fcal-chips { display: flex; flex-direction: column; gap: 5px; }
.fcal-chip {
  display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer;
  background: var(--gray-soft); border-radius: 8px; padding: 5px 8px;
  transition: background 0.15s;
}
.fcal-chip:hover { background: var(--row-hover); }
.fcal-chip.has-liseret { box-shadow: inset 3px 0 0 var(--liseret); }
.fcal-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fcal-chip-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 550;
}
.fcal-chip-amt { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); flex: none; }

/* ---- wizard : répartition de charge ------------------------------------- */

.wiz-spread { display: flex; flex-wrap: wrap; gap: 7px; }
.wiz-spread .spread-cell {
  flex: 1 1 64px; min-width: 60px; text-align: center;
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 6px;
  background: var(--surface);
}
.wiz-spread .spread-cell .pm {
  font-size: 10.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.wiz-spread .spread-cell b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- cellules éditables « tableur » --------------------------------------- */

.sheet-in {
  width: 62px; text-align: right; border: 1px solid transparent; border-radius: 7px;
  padding: 4px 4px; background: transparent; font-weight: 570;
  font-variant-numeric: tabular-nums; transition: border-color 0.15s, background 0.15s;
  -moz-appearance: textfield; appearance: textfield;
}
/* pas de flèches spinner (elles rognaient les chiffres) */
.sheet-in::-webkit-outer-spin-button,
.sheet-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sheet-in::placeholder { color: var(--muted); opacity: 0.6; }
.sheet-in:hover { background: var(--gray-soft); }
.sheet-in:focus {
  outline: none; background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sheet-in[readonly] { color: var(--muted); pointer-events: none; }

.sheet-table th, .sheet-table td { padding: 5px 6px; font-size: 12.5px; white-space: nowrap; }
.sheet-table td { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-table td:first-child, .sheet-table th:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface);
  width: 210px; min-width: 210px; max-width: 210px; z-index: 1; white-space: normal;
  box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.12);
}
.sheet-table th { text-align: right; }
.sheet-table th:first-child { background: var(--thead); }
.sheet-table .sheet-total td { font-weight: 720; border-top: 2px solid var(--axis); }
.sheet-table .row-label { font-weight: 600; font-size: 13.5px; cursor: pointer; }
.sheet-table .row-label:hover { color: var(--accent-dark); }
.sheet-table .row-label.plain { cursor: default; }
.sheet-table .row-label.plain:hover { color: inherit; }
.sheet-table .row-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* ---- « Lundi matin » : brief hebdo en modale centrée ---- */
.monday-backdrop {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  background: rgba(10, 10, 14, 0.55); backdrop-filter: blur(3px); padding: 20px;
}
.monday-modal {
  width: min(540px, 100%); max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-pop);
  animation: pop 0.3s var(--ease);
}
.monday-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.monday-head b { font-size: 15px; }
.monday-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 7px; border-radius: 7px; }
.monday-x:hover { background: var(--gray-soft); color: var(--ink); }
.monday-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.monday-headline { font-size: 15px; font-weight: 680; line-height: 1.45; letter-spacing: -0.01em; }
.monday-sec { display: flex; flex-direction: column; gap: 8px; }
.monday-sec-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); }
.monday-week { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.monday-week li { color: var(--ink-2); }
.monday-actions { display: flex; flex-direction: column; gap: 8px; }
.monday-action {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.monday-action-n { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.monday-action-label { font-size: 13.5px; font-weight: 650; }
.monday-action-why { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.monday-action-amount { flex-shrink: 0; font-weight: 800; font-size: 14px; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.monday-charge { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.monday-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.monday-line b { color: var(--ink); font-weight: 700; }

/* ---- Kanban factures ---- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.kb-col {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px; min-height: 120px; transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.kb-col-todo { background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.kb-col.kb-over { border-color: var(--accent); background: var(--accent-soft); }
.kb-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 4px 10px; }
.kb-col-title { font-size: 12px; font-weight: 680; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kb-col-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-col-body { display: flex; flex-direction: column; gap: 8px; }
.kb-empty { text-align: center; color: var(--muted); opacity: 0.4; padding: 14px 0; font-size: 13px; }
.kb-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 11px; cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), border-color 0.12s var(--ease);
}
.kb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.kb-card.kb-dragging { opacity: 0.45; }
.kb-card-todo { border-style: dashed; }
.kb-card-top { display: flex; align-items: center; gap: 8px; }
.kb-card-name { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card-bot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kb-card-bot b { font-size: 15px; font-weight: 740; }
.kb-card-meta { font-size: 11.5px; color: var(--muted); }
.kb-card-acompte { margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--accent-dark); }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }

/* nom long : tronque, ne pousse jamais les boutons d'action hors du cadre */
.sheet-table td:first-child, .sheet-table th:first-child { max-width: 240px; }
.sheet-table .row-label { min-width: 0; align-items: center; }
.sheet-table .row-label > input, .sheet-table .row-label > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-table .row-label > button, .sheet-table .row-label > .badge { flex-shrink: 0; }
.sheet-off { color: var(--muted); opacity: 0.45; }
.sheet-pending td:first-child { border-left: 2px solid var(--accent); }

/* ---- analyse : barres de mix ---------------------------------------------- */

.mix-row { padding: 9px 0; border-bottom: 1px solid var(--grid); }
.mix-row:last-child { border-bottom: none; }
.mix-row.rowlink { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 9px; }
.mix-row.rowlink:hover { background: var(--row-hover); }
.mix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mix-label { font-weight: 620; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-nums { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.mix-pct { font-weight: 700; min-width: 44px; text-align: right; color: var(--accent-dark); }
.mix-margin {
  font-weight: 730; font-variant-numeric: tabular-nums; font-size: 12.5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--ink-2); background: var(--gray-soft);
}
.mix-margin .mm-cap { font-weight: 600; opacity: 0.6; font-size: 11px; }
.mix-margin.mg-good { color: var(--green); background: var(--green-soft); }
.mix-margin.mg-mid { color: var(--amber); background: var(--amber-soft); }
.mix-margin.mg-low { color: var(--red); background: var(--red-soft); }
.mix-bar {
  height: 8px; border-radius: 4px; background: var(--gray-soft); overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.mix-fill {
  display: block; height: 100%; border-radius: 4px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  transition: width 0.9s var(--ease);
}
.ana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .ana-grid { grid-template-columns: 1fr; } }

/* ---- inbox : mise en évidence d'une section ciblée ------------------------ */

@keyframes flashring {
  0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-2); }
  100% { box-shadow: var(--shadow-1); }
}
.issue-section.flash > .card { animation: flashring 1.9s var(--ease) both; }
.issue-section.flash .issue-head { color: var(--accent-dark); }

/* ---- réglages : intégrations ----------------------------------------------- */

.integ-name { font-weight: 680; font-size: 15px; }
.integ-map {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px;
}
.integ-map select {
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
  background: var(--surface); font-size: 13px; margin-left: auto;
}

/* ---- célébration deal gagné (confettis + yéti) ----------------------------- */

.party {
  position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden;
}
.party.out { opacity: 0; transition: opacity 0.6s; }
.confetti {
  position: absolute; top: -24px; border-radius: 3px;
  animation: confall 2600ms cubic-bezier(0.25, 0.6, 0.45, 1) both;
}
@keyframes confall {
  0% { transform: translate(0, -24px) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--drift, 0px), 106vh) rotate(var(--spin, 720deg)); opacity: 0.6; }
}
.yeti {
  position: absolute; left: 50%; bottom: -6px; width: 200px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
  animation:
    yetipop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
    yetidance 0.55s ease-in-out 0.75s 5 alternate;
}
@keyframes yetipop {
  from { transform: translateX(-50%) translateY(110%); }
  to { transform: translateX(-50%) translateY(0); }
}
@keyframes yetidance {
  from { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  to { transform: translateX(-50%) translateY(-10px) rotate(3deg); }
}
.yeti .arm { transform-box: view-box; }
.yeti .arm-l {
  transform: translate(52px, 96px) rotate(24deg);
  animation: wavel 0.4s ease-in-out 0.7s 6 alternate;
}
.yeti .arm-r {
  transform: translate(148px, 96px) rotate(-24deg);
  animation: waver 0.4s ease-in-out 0.7s 6 alternate;
}
@keyframes wavel {
  from { transform: translate(52px, 96px) rotate(24deg); }
  to { transform: translate(52px, 96px) rotate(52deg); }
}
@keyframes waver {
  from { transform: translate(148px, 96px) rotate(-24deg); }
  to { transform: translate(148px, 96px) rotate(-52deg); }
}
.yeti .eye { animation: blink 2.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}
.party-banner {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%);
  text-align: center; background: var(--surface); border: 1px solid var(--modal-ring);
  border-radius: 18px; padding: 18px 34px; box-shadow: var(--shadow-pop);
  animation: bannerpop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes bannerpop {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}
.pb-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pb-amount {
  font-size: 19px; font-weight: 750; margin-top: 6px;
  color: var(--accent-dark); font-variant-numeric: tabular-nums;
}

/* ---- logo SVG inline (deux-tons, thème-aware) ----------------------------- */
/* Tuile claire + encre aubergine ; en sombre, tuile indigo + encre or.       */

/* Le signe « Le Phare » porte ses propres couleurs (dégradés violet/or) : la
   tuile est donc SOMBRE dans les deux thèmes, comme la nuit d'où sort le
   faisceau. Une tuile blanche en thème clair écraserait le halo, qui est
   justement l'élément le plus clair du signe. */
.logo-mark.has-svg {
  background: linear-gradient(150deg, #241049 0%, #150a30 100%);
  padding: 4px;
  box-shadow: 0 4px 14px rgba(30, 12, 60, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.logo-mark.has-svg svg { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .logo-mark.has-svg {
  background: linear-gradient(150deg, #2a1256 0%, #170b34 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* La tuile étant sombre dans les DEUX thèmes, le fût doit être éclairci dans les
   deux aussi : à ses teintes d'origine (#5B2A93 → #19265D) il se confond avec le
   fond de tuile et il ne reste que le faisceau à l'écran — constaté. */
.logo-mark.has-svg svg {
  --lp-tour-1: #8B63C8;
  --lp-tour-2: #6247B4;
  --lp-tour-3: #4453A0;
}

/* la tile blanche du logo doit primer sur le dégradé or du thème sombre */
:root[data-theme="dark"] .logo-mark.has-img {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ---- prévisionnel : lignes de référence (calculé, non éditable) ----------- */
.fc-table .fc-ref td { opacity: 0.75; font-style: italic; }
.fc-table .fc-ref td:first-child { font-style: normal; }

/* ---- grille dépenses : groupes pliables + ligne budget --------------------- */

.grp-head td {
  background: var(--thead); cursor: pointer; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--axis);
}
.grp-head:hover td { background: var(--row-hover); }
.grp-caret {
  display: inline-block; transition: transform 0.18s var(--ease);
  color: var(--muted); font-size: 11px; width: 12px;
}
.grp-caret.open { transform: rotate(90deg); }
.grp-grip { color: var(--muted); opacity: 0.35; cursor: grab; font-size: 12px; letter-spacing: -2px; }
.grp-head:hover .grp-grip { opacity: 0.7; }
.grp-head.dragging td { opacity: 0.4; }
.grp-head.drag-over td { box-shadow: inset 0 2px 0 var(--accent); }
.grp-bud td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.grp-bud .sheet-in::placeholder { color: var(--accent-dark); opacity: 0.5; }

/* ---- CFO panel (assistant overlay bas-droite) ------------------------------ */

.cfo-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 56px; height: 56px; border-radius: 18px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-2); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cfo-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-pop); }
.cfo-fab .logo-mark { width: 34px; height: 34px; }
.cfo-fab-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 750; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(194, 46, 46, 0.4);
}

.cfo-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 380px; height: 560px; max-height: calc(100vh - 48px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; animation: pop 0.28s var(--ease);
}
.cfo-head {
  display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px;
  border-bottom: 1px solid var(--grid); flex-shrink: 0;
}
.cfo-head-ctrls { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cfo-icon-btn {
  border: none; background: none; cursor: pointer; color: var(--muted);
  /* boîtes carrées de même hauteur → les 3 glyphes sont calés et alignés,
     quelle que soit la métrique propre de chaque caractère (⚙ ⟳ ⌄) */
  width: 30px; height: 30px; padding: 0; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font-size: 16px; /* +15 % vs 14px */
  transition: background 0.15s, color 0.15s;
}
.cfo-icon-btn:hover { background: var(--gray-soft); color: var(--ink); }
.cfo-icon-btn > svg { display: block; }
/* bandeau des 4 postures : tuile haute (avatar) + nom dessous */
.cfo-personas { display: flex; gap: 6px; }
.cfo-ptab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 4px 4px 5px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; color: var(--muted);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.cfo-ptab .cfo-av { height: 58px; border-radius: 9px; font-size: 26px; }
.cfo-ptab-name { font-size: 11.5px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cfo-ptab:hover { border-color: var(--accent-soft); background: var(--gray-soft); }
.cfo-ptab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.cfo-model-sel {
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px;
  background: var(--surface); font-size: 12.5px;
}

.cfo-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.cfo-body, .cfo-msg { overflow-wrap: anywhere; word-break: break-word; }
.cfo-msg { max-width: 92%; font-size: 13.5px; line-height: 1.5; }
.cfo-msg.user {
  align-self: flex-end; background: var(--accent-soft);
  border-radius: 14px 14px 4px 14px; padding: 9px 13px;
}
.cfo-msg.assistant { align-self: flex-start; display: flex; gap: 8px; align-items: flex-start; max-width: 96%; }
.cfo-msg.assistant .cfo-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 2px; }
/* avatar de posture (fab, en-tête, bulles) */
.cfo-av {
  border-radius: 9px; background-size: cover; background-position: center; background-repeat: no-repeat;
  display: inline-grid; place-items: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--border);
}
.cfo-av-icon { background: var(--accent-soft); }
.cfo-head-av { display: inline-flex; }
.cfo-head-av .cfo-av.clickable:hover { box-shadow: 0 0 0 2px var(--accent); }
.cfo-fab-inner { width: 100%; height: 100%; display: grid; place-items: center; }
.cfo-fab-inner .cfo-av { box-shadow: none; }
/* éditeur de persona : overlay dans le panneau */
.cfo-persona-edit {
  position: absolute; inset: 0; z-index: 3; background: var(--surface);
  display: flex; flex-direction: column; border-radius: inherit;
}
.cfo-pe-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cfo-pe-head b { font-size: 14px; }
.cfo-pe-body { flex: 1; overflow: auto; padding: 14px; }
.cfo-pe-md {
  width: 100%; resize: vertical; font: 12px/1.5 ui-monospace, monospace;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--bg); color: var(--ink);
}
.cfo-pe-foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.cfo-pe-drop { position: relative; width: 76px; height: 76px; border-radius: 18px; cursor: pointer; flex-shrink: 0; border: 2px dashed transparent; }
.cfo-pe-drop .cfo-av { width: 76px; height: 76px; border-radius: 16px; font-size: 34px; }
.cfo-pe-drop .avatar { width: 76px !important; height: 76px !important; border-radius: 16px; font-size: 28px !important; }
.cfo-pe-drop-ov {
  position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 26px; opacity: 0; transition: opacity 0.15s var(--ease); pointer-events: none;
}
.cfo-pe-drop:hover .cfo-pe-drop-ov { opacity: 1; }
.cfo-pe-drop.drag { border-color: var(--accent); }
.cfo-pe-drop.drag .cfo-pe-drop-ov { opacity: 1; background: transparent; color: var(--accent); }
.cfo-msg.sys, .cfo-msg.tool { align-self: center; color: var(--muted); font-size: 12px; text-align: center; }
.cfo-msg.err {
  align-self: flex-start; color: var(--red); background: var(--red-soft);
  border-radius: 12px; padding: 8px 12px; font-size: 12.5px;
}
.cfo-md p { margin: 0 0 7px; }
.cfo-md p:last-child { margin-bottom: 0; }
.cfo-md h4 { margin: 10px 0 5px; font-size: 13px; }
.cfo-md ul { margin: 4px 0 8px; padding-left: 19px; }
.cfo-md li { margin-bottom: 3px; }
.cfo-md code {
  background: var(--gray-soft); border-radius: 5px; padding: 1px 5px;
  font-size: 12px; font-family: ui-monospace, monospace;
}
.cfo-md pre {
  background: var(--gray-soft); border-radius: 10px; padding: 10px 12px;
  overflow-x: auto; font-size: 12px; margin: 6px 0;
}
.cfo-md pre code { background: none; padding: 0; }
.cfo-tbl { border-collapse: collapse; margin: 6px 0; font-size: 12px; width: 100%; }
.cfo-tbl th, .cfo-tbl td { border-bottom: 1px solid var(--grid); padding: 4px 7px; text-align: left; }
.cfo-tbl th { color: var(--muted); font-weight: 650; }

.cfo-action {
  align-self: stretch; border: 1px solid var(--accent);
  border-radius: 12px; padding: 10px 12px; background: var(--accent-soft);
  font-size: 12.5px;
}
.cfo-action-head { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.cfo-action-sum { font-variant-numeric: tabular-nums; word-break: break-word; }
.cfo-action-why { color: var(--muted); font-style: italic; margin-top: 4px; }
.cfo-action-btns { display: flex; gap: 8px; margin-top: 9px; }
.cfo-action.applied { border-color: var(--green); background: var(--green-soft); }
.cfo-action.rejected { border-color: var(--border); background: var(--gray-soft); opacity: 0.75; }
.cfo-action-state { margin-top: 6px; font-weight: 650; }
.cfo-action.applied .cfo-action-state { color: var(--green); }
.cfo-action.rejected .cfo-action-state { color: var(--muted); }

.cfo-busy { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px; padding: 2px 4px; }
.cfo-dots { display: inline-flex; gap: 4px; }
.cfo-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: cfoblink 1.2s infinite var(--ease);
}
.cfo-dots i:nth-child(2) { animation-delay: 0.18s; }
.cfo-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes cfoblink { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } }

.cfo-foot {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--grid); flex-shrink: 0;
}
.cfo-input {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 11px;
  padding: 9px 12px; background: var(--page); font-size: 13.5px; line-height: 1.4;
  max-height: 96px;
}
.cfo-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.cfo-send {
  border: none; border-radius: 11px; width: 38px; height: 38px; flex-shrink: 0;
  background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
  transition: transform 0.15s var(--ease), opacity 0.15s;
}
:root[data-theme="dark"] .cfo-send { color: #1c1503; }
.cfo-send:hover:not(:disabled) { transform: scale(1.06); }
.cfo-send:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 520px) {
  .cfo-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
}

/* ---- trésorerie (ligne d'eau) ---------------------------------------------- */

.cf-card { margin-bottom: 0; }
.cf-low { text-align: right; }
.cf-low-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 680; }
.cf-low-val { font-size: 24px; font-weight: 760; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cf-low-sub { font-size: 12px; color: var(--muted); }
.cf-low.good .cf-low-val { color: var(--green); }
.cf-low.warn .cf-low-val { color: var(--amber); }
.cf-low.bad .cf-low-val { color: var(--red); }
.cf-val { fill: var(--ink-2); font-size: 11px; text-anchor: middle; font-weight: 650; font-variant-numeric: tabular-nums; }
.cf-val.neg { fill: var(--red); }
.cf-neg-zone { fill: var(--red); opacity: 0.07; }
.cf-zero { stroke: var(--red); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.55; }
.cf-pct-in {
  width: 58px; text-align: right; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 7px; background: var(--surface); font-variant-numeric: tabular-nums;
}
.cf-dot { fill: var(--accent); }
.cf-dot.neg { fill: var(--red); }
.cf-dot.past { fill: var(--muted); }
.cf-now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
/* surbrillance du mois survolé (fond clair, derrière la courbe) */
.cf-hi-band { fill: var(--ink); opacity: 0.08; pointer-events: none; transition: opacity 0.12s ease; }
[data-theme='dark'] .cf-hi-band { fill: #fff; opacity: 0.11; }
.cf-settings { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, var(--bg)); }
.cf-settings > label:first-child { margin-bottom: 2px; }
.chart-tip .cf-tip-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin: 7px 0 2px; font-weight: 700; }
.chart-tip .cf-tip-h:first-child { margin-top: 0; }
.chart-tip .cf-pos { color: #6ee7a8; }
.chart-tip .cf-neg { color: #ff9b9b; }
/* code couleur des encaissements : facturé = blanc, brouillon = jaune, pipeline = violet */
.chart-tip .cf-in-sent { color: #f4f2ec; }
.chart-tip .cf-in-draft { color: #e8b93e; }
.chart-tip .cf-in-pipe { color: #b3a9f2; }
.chart-tip .tip-row.muted { opacity: 0.6; }
.chart-tip .cf-tip-net { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 5px; padding-top: 5px; font-weight: 700; }

/* ---- Mode confidentiel --------------------------------------------------- */
body.confidential .avatar-logo {
  background-image: none !important;
  display: inline-grid; place-items: center;
  background-color: var(--surface);
  color: var(--muted); font-size: 13px;
}
body.confidential .avatar-logo::after { content: '🔒'; }
body.confidential .cl-logo-drop .avatar-logo::after { font-size: 20px; }
body.confidential input[type='number'] { filter: blur(5px); }
.conf-badge {
  position: fixed; top: 12px; right: 14px; z-index: 90;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-size: 12px; font-weight: 650;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.conf-badge button {
  border: none; background: transparent; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 7px;
}
.conf-badge button:hover { background: var(--border); color: var(--ink); }
.conf-lock {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 7px; line-height: 1;
}
.conf-lock:hover { color: var(--ink); background: var(--border); }

/* ---- Sélecteur de workspace -------------------------------------------- */
.ws-switch {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 10px 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 650; cursor: pointer;
  max-width: calc(100% - 20px);
}
.ws-switch:hover { color: var(--ink); border-color: var(--accent); }
.ws-switch .ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch .ws-caret { opacity: 0.7; font-size: 10px; }

/* ---- Actions par ligne dans le sélecteur de workspace ------------------ */
.ws-row-actions { display: flex; gap: 2px; margin-left: 8px; }
.ws-row-actions .icon-btn { padding: 3px 7px; font-size: 13px; }
.ws-row-actions .ws-del:hover { color: var(--red); }

/* ---- Report de temps quotidien (carte du persona compta) ---------------- */
.tl-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-edit-note {
  color: var(--amber); background: var(--amber-soft);
  border: 1px solid var(--amber); border-radius: 8px; padding: 6px 9px; line-height: 1.35;
}
.tl-rows { display: flex; flex-direction: column; gap: 6px; }
.tl-row { display: flex; align-items: center; gap: 7px; }
.tl-name {
  flex: 0 0 34%; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-row input[type='range'] { flex: 1; min-width: 60px; accent-color: var(--accent); }
.tl-chip {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 7px; font-size: 10.5px; font-weight: 650; padding: 2px 6px; cursor: pointer;
}
.tl-chip:hover { color: var(--ink); border-color: var(--accent); }
.tl-val { font-size: 12px; min-width: 34px; text-align: right; }
.tl-add {
  font-size: 12px; color: var(--muted); border: 1px dashed var(--border);
  border-radius: 8px; padding: 5px 8px; background: transparent; max-width: 100%;
}
.tl-nl {
  flex: 1; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink);
}
.tl-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

/* ---- Mentions @ : chips cliquables + autocomplete ------------------------ */
.mention {
  display: inline-block; padding: 0 5px; border-radius: 6px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 650; font-size: 0.95em; line-height: 1.45;
}
.mention:hover { text-decoration: underline; }
[data-theme='dark'] .mention { background: rgba(217, 164, 65, 0.16); color: var(--accent); }
.cfo-mention-dd {
  position: absolute; left: 10px; right: 10px; bottom: 62px; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); overflow: hidden;
  max-height: 260px; overflow-y: auto;
}
.cfo-mention-it {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; cursor: pointer; font-size: 12.5px;
}
.cfo-mention-it.on, .cfo-mention-it:hover { background: var(--accent-soft); }
[data-theme='dark'] .cfo-mention-it.on, [data-theme='dark'] .cfo-mention-it:hover { background: rgba(217, 164, 65, 0.12); }
.cfo-mention-l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfo-mention-s { font-size: 11px; color: var(--muted); }

/* ---- Plan de charge : mode Réel (trait-repère plan + dérive) -------------- */
.cap-tick {
  position: absolute; left: 12%; right: 12%; height: 0;
  border-top: 2px dashed var(--ink); opacity: 0.55; z-index: 2;
  pointer-events: none;
}
.charge-drift {
  margin-top: 8px; font-size: 12px; font-weight: 650; text-align: center;
}
.charge-drift.good { color: var(--green); }
.charge-drift.warn { color: var(--amber); }
.charge-drift.bad { color: var(--red); }

/* ---- Watchtower : signaux proactifs -------------------------------------- */
.wt-card { margin-bottom: 14px; }
.wt-head { display: flex; align-items: center; gap: 8px; }
.wt-head:hover { color: var(--ink); }
.wt-chevron { color: var(--muted); font-size: 12px; width: 12px; }
.wt-card:has(.wt-chevron) .wt-list { margin-top: 8px; }
.wt-list { display: flex; flex-direction: column; gap: 6px; }
/* dashboard (pleine largeur) : 2 colonnes ; le chat (étroit) reste en liste */
.wt-list.cols2 { display: grid; grid-template-columns: 1fr 1fr; }
.wt-list.cols2 .wt-row { min-width: 0; }
.wt-list.cols2 .wt-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .wt-list.cols2 { display: flex; flex-direction: column; } }
.wt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); border-left-width: 3px;
  transition: transform 0.1s var(--ease);
}
.wt-row:hover { transform: translateX(2px); border-color: var(--accent); }
.wt-row.red { border-left-color: var(--red); background: var(--red-soft); }
.wt-row.amber { border-left-color: var(--amber); background: var(--amber-soft); }
.wt-row.info { border-left-color: var(--accent); }
[data-theme='dark'] .wt-row.red { background: rgba(214, 84, 84, 0.1); }
[data-theme='dark'] .wt-row.amber { background: rgba(217, 164, 65, 0.09); }
.wt-ico { font-size: 15px; flex-shrink: 0; }
.wt-title { font-size: 12.5px; font-weight: 650; }
.wt-detail { font-size: 11.5px; color: var(--muted); }
.wt-go { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.wt-list.compact .wt-row { padding: 6px 10px; }
.wt-list.compact .wt-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Simulateur what-if --------------------------------------------------- */
.sim-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; }
@media (max-width: 920px) { .sim-grid { grid-template-columns: 1fr; } .sim-results { position: static; } }
.sim-levers { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* chaque levier = une zone cardée, pour un zoning lisible */
.sim-sec {
  min-width: 0; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.sim-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--page); border-bottom: 1px solid var(--border);
}
.sim-sec-ico {
  font-size: 15px; width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
}
.sim-sec-title { font-size: 13.5px; font-weight: 700; }
.sim-sec-sub { font-size: 11.5px; color: var(--muted); }
.sim-sec-body { padding: 4px 14px; }
.sim-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--grid);
}
.sim-row:last-child { border-bottom: none; }
.sim-row-pipe { flex-direction: column; align-items: stretch; gap: 7px; }
.sim-row-main { display: flex; align-items: center; gap: 10px; }
.sim-row-l { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-row-s { font-size: 11.5px; color: var(--muted); }
.sim-seg { flex-shrink: 0; }
.sim-seg button { font-size: 11px; padding: 3px 8px; }
.sim-row-pipe .sel-wrap { align-self: flex-start; }
.sim-draw { display: flex; gap: 12px; align-items: center; padding: 4px 0; }
.sim-draw input[type='range'] { flex: 1; accent-color: var(--accent); }
.sim-results {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--page); align-self: start; position: sticky; top: 0;
}
.sim-tile-l { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sim-tile-v { font-size: 21px; font-weight: 750; display: flex; align-items: baseline; gap: 8px; }
.sim-tile-s { font-size: 11.5px; color: var(--muted); }
.sim-delta { font-size: 12px; font-weight: 700; }
.sim-delta.good { color: var(--green); }
.sim-delta.bad { color: var(--red); }
/* sparkline isolée dans son cadre, légende au-dessus */
.sim-chart {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 10px 12px 8px;
}
.sim-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; font-weight: 650; margin-bottom: 6px;
}
.sim-spark-svg { display: block; width: 100%; height: 54px; }
.sim-spark-svg path.line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sim-spark-svg path.fill { opacity: 0.14; }
.sim-chart-zero { margin-top: 5px; }
/* graphe de trésorerie du simulateur : réutilise drawChart (identique dashboard) */
.sim-treso { margin-top: 16px; }

/* ---- Halo « regarde ici » (flashTarget) ---------------------------------- */
@keyframes flash-target-kf {
  0%   { box-shadow: 0 0 0 0 rgba(42, 120, 214, 0); }
  15%  { box-shadow: 0 0 0 4px var(--accent), 0 0 26px 6px rgba(42, 120, 214, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(42, 120, 214, 0); }
}
.flash-target {
  animation: flash-target-kf 2.1s var(--ease) both;
  border-radius: 16px;
}
[data-theme='dark'] .flash-target {
  animation-name: flash-target-kf-dark;
}
@keyframes flash-target-kf-dark {
  0%   { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
  15%  { box-shadow: 0 0 0 4px var(--accent), 0 0 30px 8px rgba(217, 164, 65, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-target { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}

/* ---- Cheatsheet des métriques (Réglages) --------------------------------- */
.cheat { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 860px) { .cheat { grid-template-columns: 1fr; } }
.cheat-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.cheat-item {
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface); padding: 12px 14px; margin-bottom: 12px;
}
.cheat-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cheat-ico {
  font-size: 14px; width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--page); border: 1px solid var(--border);
}
.cheat-title { font-size: 13.5px; font-weight: 700; }
.cheat-q { font-size: 11.5px; color: var(--muted); }
.cheat-method { font-size: 11.5px; color: var(--ink-2); margin-bottom: 9px; }
.cheat-metrics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.cheat-metric {
  flex: 1 1 40%; min-width: 90px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 9px;
  padding: 6px 9px; background: var(--page);
}
.cheat-metric.good { border-left-color: var(--green); }
.cheat-metric.warn { border-left-color: var(--amber); }
.cheat-metric.bad { border-left-color: var(--red); }
.cheat-m-v { font-size: 15px; font-weight: 750; }
.cheat-m-l { font-size: 10.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.cheat-m-s { font-size: 10.5px; color: var(--muted); }
.cheat-headline { font-size: 12.5px; font-weight: 650; }
.cheat-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 5px; }

/* ---- Page Pipeline (cockpit sales) ---------------------------------------- */
.pipe-duo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 980px) { .pipe-duo { grid-template-columns: 1fr; } }
/* entonnoir brut → pondéré → gagné */
.pf-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.pf-label { flex: 0 0 34%; font-size: 12.5px; font-weight: 650; }
.pf-sub { color: var(--muted); font-weight: 500; font-size: 11px; }
.pf-track {
  flex: 1; display: flex; align-items: center;
  background: var(--page); border-radius: 10px; padding: 4px; min-height: 26px;
}
.pf-bar {
  height: 18px; border-radius: 7px; min-width: 6px;
  transition: width 0.7s var(--ease);
}
/* entonnoir : progression brut (bleu) → pondéré (violet) → gagné (vert) */
.pf-bar.pf-brut { background: linear-gradient(90deg, var(--accent), rgba(42, 120, 214, 0.28)); }
.pf-bar.pf-pond { background: linear-gradient(90deg, var(--violet), rgba(74, 58, 167, 0.28)); }
.pf-bar.pf-won { background: linear-gradient(90deg, var(--green), var(--green-soft)); }
[data-theme='dark'] .pf-bar.pf-pond { background: linear-gradient(90deg, #7a68e0, rgba(122, 104, 224, 0.28)); }
[data-theme='dark'] .pf-bar.pf-won { background: linear-gradient(90deg, var(--green), rgba(74, 222, 128, 0.22)); }
.pf-val { font-size: 12.5px; white-space: nowrap; flex: 0 0 auto; min-width: 64px; text-align: right; padding-left: 10px; }
.pf-ic { font-size: 12px; }
/* détail du pipe ouvert par étape : dégradé bleu→violet le long de l'entonnoir */
.pf-bar.pf-stage { opacity: 0.92; }
.pf-bar.pf-prospection { background: linear-gradient(90deg, var(--accent), rgba(42, 120, 214, 0.22)); }
.pf-bar.pf-qualified { background: linear-gradient(90deg, #4f8bd6, rgba(79, 139, 214, 0.22)); }
.pf-bar.pf-proposal { background: linear-gradient(90deg, #6a72c8, rgba(106, 114, 200, 0.22)); }
.pf-bar.pf-negotiation { background: linear-gradient(90deg, var(--violet), rgba(74, 58, 167, 0.22)); }
.pf-divider {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid var(--grid);
  font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.pf-divider b { font-size: 12.5px; color: var(--ink); letter-spacing: 0; text-transform: none; }
/* taux de passage entre deux étapes : discret, aligné sous le libellé pour
   qu'il se lise comme une marche de l'entonnoir, pas comme une ligne de plus */
.pf-conv {
  display: flex; align-items: center; gap: 5px;
  padding: 1px 0 1px 26px; margin: -1px 0;
  font-size: 11px; font-weight: 640; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pf-conv-arrow { opacity: 0.5; font-size: 10px; }
.pf-conv-note { font-weight: 500; opacity: 0.7; }
/* cartes deals */
.pipe-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-top: 14px;
}
.pipe-card {
  border: 1px solid var(--border); border-radius: 15px; background: var(--surface);
  padding: 13px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow-1);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), border-color 0.14s;
}
.pipe-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); }
.pipe-card-head { display: flex; align-items: center; gap: 9px; }
.pipe-card-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-card-client { font-size: 11.5px; color: var(--muted); }
.pipe-card-amounts { display: flex; align-items: baseline; gap: 7px; }
.pipe-card-brut { font-size: 13px; color: var(--muted); }
.pipe-card-arrow { color: var(--muted); font-size: 11px; }
.pipe-card-pond { font-size: 17px; font-weight: 750; }
.pipe-card-foot { display: flex; align-items: center; gap: 7px; margin-top: 2px; }

/* ---- Cheatsheet : drill-down ---------------------------------------------- */
.cheat-metric.clickable { cursor: pointer; transition: border-color 0.12s, transform 0.12s var(--ease); }
.cheat-metric.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.cheat-m-more { color: var(--accent); font-size: 12px; font-weight: 700; }
.drill-list { display: flex; flex-direction: column; gap: 7px; }
.drill-row { display: flex; align-items: center; gap: 10px; flex-basis: auto !important; }

/* ---- Pipeline : filtre par offre ----------------------------------------- */
.pipe-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
/* factures : barre légende (statut) + chips offre */
.fact-bars { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.fact-bars .pipe-filter { margin: 4px 0 8px; }
.fact-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fact-leg {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: 20px; padding: 3px 10px;
  font-size: 12px; color: var(--muted); background: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fact-leg:hover { color: var(--ink); }
.fact-leg.on { color: var(--ink); border-color: var(--border); background: var(--surface); }

/* comparaison Le Phare / Attio (mise à jour) */
.cmp-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px 14px; align-items: center; margin-top: 6px; }
.cmp-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.cmp-lbl { font-size: 12.5px; color: var(--muted); }
.cmp-val {
  font-weight: 620; font-variant-numeric: tabular-nums; padding: 6px 10px;
  background: var(--gray-soft); border-radius: 8px; text-align: right;
}
.cmp-val.cmp-diff { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.pipe-filter-l { font-size: 12px; font-weight: 650; color: var(--muted); }
.pipe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 600;
  transition: all 0.12s var(--ease);
}
.pipe-chip:hover { color: var(--ink); }
.pipe-chip.on { color: var(--ink); border-color: var(--chip, var(--accent)); background: color-mix(in srgb, var(--chip, var(--accent)) 10%, var(--surface)); }
.pipe-chip:not(.on) { opacity: 0.55; text-decoration: line-through; }
.pipe-chip:not(.on) .pipe-chip-dot { filter: grayscale(1); }
.pipe-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pipe-chip-all { font-weight: 650; }

/* ---- Tooltip quota : deals indentés sous chaque offre --------------------- */
.cap-tip .tip-deal {
  padding-left: 17px; opacity: 0.75; font-size: 11px; font-weight: 450;
}
.cap-tip .tip-deal .tip-deal-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px;
}

/* ---- Kanban : facture marquée émise mais absente de Qonto ----------------- */
.kb-card-unissued {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 10.5px; font-weight: 650; color: var(--red);
}
.kb-unissued-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  animation: unissued-pulse 1.6s infinite;
}
@keyframes unissued-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 46, 46, 0.45); }
  50% { box-shadow: 0 0 0 4px rgba(194, 46, 46, 0); }
}
.kb-zap {
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  cursor: pointer; font-size: 12px; padding: 1px 7px; line-height: 1.4;
}
.kb-zap:hover { border-color: var(--amber); background: var(--amber-soft); }
@media (prefers-reduced-motion: reduce) { .kb-unissued-dot { animation: none; } }

/* ---- Célébration légère : renard qui flex --------------------------------- */
.party-light .confetti { opacity: 0.9; }
.fox {
  position: fixed; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 150px; z-index: 301;
  animation: fox-pop 0.45s var(--ease) both;
}
@keyframes fox-pop {
  from { transform: translateX(-50%) translateY(90px) scale(0.7); }
  to { transform: translateX(-50%) translateY(0) scale(1); }
}
.fox .fox-arm {
  transform-box: view-box; transform-origin: 66px 122px;
  translate: 66px 122px;
  animation: fox-flex 0.55s ease-in-out 3 alternate;
}
@keyframes fox-flex {
  from { rotate: 6deg; }
  to { rotate: -14deg; }
}
.pb-light { padding: 10px 18px; font-size: 15px; }

/* ---- Réglages Attio : rôles de statuts (gagné/qualifié/perdu) ------------- */
.attio-roles { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.attio-role-row { display: flex; align-items: center; gap: 10px; }
.attio-role-name {
  flex: 0 0 190px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attio-role-seg button { font-size: 11px; padding: 2px 9px; }
.attio-role-seg button.role-won { background: var(--green-soft); color: var(--green); }
.attio-role-seg button.role-qualified { background: var(--violet-soft); color: var(--violet); }
.attio-role-seg button.role-lost { background: var(--red-soft); color: var(--red); }
.attio-role-seg button.role-transform { background: var(--amber-soft, #fef3c7); color: var(--amber, #b45309); }
[data-theme='dark'] .attio-role-seg button.role-transform { background: rgba(217, 164, 65, 0.16); }
[data-theme='dark'] .attio-role-seg button.role-won { background: rgba(74, 222, 128, 0.14); }
[data-theme='dark'] .attio-role-seg button.role-qualified { background: rgba(122, 108, 224, 0.16); }
[data-theme='dark'] .attio-role-seg button.role-lost { background: rgba(214, 84, 84, 0.15); }

/* ---- Liseré couleur d'offre sur les cartes (pipeline, kanban factures) ---- */
.pipe-card.has-liseret, .kb-card.has-liseret {
  border-left: 3px solid var(--liseret, var(--border));
}

/* ---- Réglages : listes clients/offres plafonnées à ~10 lignes ------------- */
.ref-list {
  max-height: 264px; /* ~6 lignes */
  overflow-y: auto; overflow-x: hidden;
  margin: 0; padding: 0;
}
/* les rangées ne débordent plus (annule le margin négatif hérité de .list-row) */
.ref-list .list-row { margin: 0; }
.ref-list::-webkit-scrollbar { width: 8px; }
.ref-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ref-list::-webkit-scrollbar-thumb:hover { background: var(--axis); }

/* ---- Fiche client : bandeau apporteur (intermédiaire) --------------------- */
.cl-broker {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 0 4px; padding: 10px 13px; border-radius: 12px;
  background: var(--violet-soft); border: 1px solid var(--border); border-left: 3px solid var(--violet);
}
[data-theme='dark'] .cl-broker { background: rgba(122, 108, 224, 0.12); }
.cl-broker-ico { font-size: 18px; }
.cl-broker-v { font-size: 15px; font-weight: 750; }
.cl-broker-l { font-size: 11.5px; color: var(--muted); }

/* ---- Modale « Lier facture Qonto » : colonnes HT/TTC + match surligné ----- */
.q-link-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted); padding: 0 8px 4px; border-bottom: 1px solid var(--border);
}
.q-link-list { max-height: 420px; overflow-y: auto; overflow-x: hidden; }
.q-link-row { display: flex; align-items: center; gap: 10px; margin: 0; }
.q-link-amt { display: flex; flex-direction: column; align-items: flex-end; min-width: 72px; }
.q-link-amt b, .q-link-amt span:first-child { font-variant-numeric: tabular-nums; font-size: 13px; }
.q-link-amt-l { font-size: 9.5px; color: var(--muted); text-transform: uppercase; }
.q-link-amt-h { min-width: 72px; text-align: right; }
.q-link-match {
  background: var(--green-soft); border-radius: 9px;
  box-shadow: inset 3px 0 0 var(--green);
}
[data-theme='dark'] .q-link-match { background: rgba(74, 222, 128, 0.12); }

/* Règles de créneaux (Réglages → Google Agenda) : une grille de petites règles
   plutôt qu'un formulaire — on les lit d'un coup d'œil, on n'en édite qu'une. */
.slot-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 16px; margin-top: 4px;
}
.slot-rule { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slot-rule > span:first-child { flex: none; width: 92px; color: var(--muted); }

/* ---- harmonisation lead / affaire ---------------------------------------- */
/* POSTE sur la tuile : sous le nom, avant la société — même info que le
   dry-run Fresh Leads et le brief, qui la perdaient après l'import. */
.kbc-title {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* win% : même pastille que le score de ciblage (.qchip), teinte selon la valeur */
.qchip.winpill { font-variant-numeric: tabular-nums; }
/* carte de pipe : la pastille win% précède le sélecteur de probabilité */
.pipe-card-win { display: flex; align-items: center; gap: 6px; flex: none; }
/* Fresh Leads : l'avatar partagé remplace l'<img> carrée */
.fl-ph { display: flex; align-items: center; justify-content: center; }
.fl-ph .avatar { width: 34px; height: 34px; font-size: 12px; }

/* incident de recherche dans l'historique d'une fiche : une source n'a pas
   répondu. Discret mais visible — c'est ce qui empêche de lire « aucun échange »
   comme un constat alors qu'on n'a pas pu regarder. */
.hist-warn {
  margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  color: var(--amber); font-size: 11.5px; line-height: 1.45;
}

/* ---- justificatifs manquants : dépôt par glisser + accusé optimiste ------- */
/* zone de dépôt : la ligne visée s'assombrit et se souligne d'un liseré, pour
   qu'on sache À QUELLE dépense on rattache le PDF avant de lâcher. */
.issue-row.drop-target { transition: background 0.12s, box-shadow 0.12s; }
.issue-row.drop-over {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 8px;
}
.issue-row.drop-over * { pointer-events: none; } /* le drop reste sur la LIGNE */
/* accusé immédiat : Qonto traite en tâche de fond, on ne fait pas attendre */
.attached-badge {
  flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}
.issue-row.row-attached { opacity: 0.72; }
.issue-row.row-attached .issue-fix, .issue-row.row-attached .issue-snooze { opacity: 0.35; pointer-events: none; }
/* recherche par fournisseur dans l'en-tête de section */
.receipt-search {
  flex: none; width: 190px; font-size: 12px; padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.receipt-search:focus { outline: none; border-color: var(--accent); }
.receipt-hint { flex: none; }
@media (max-width: 720px) { .receipt-hint { display: none; } .receipt-search { width: 130px; } }

/* ---- éclat local (justificatif joint) ------------------------------------- */
/* fond vert qui pulse sur la ligne traitée : l'accusé de réception le plus
   direct, sans occuper l'écran comme une célébration de deal gagné. */
.sparkle-flash { animation: sparkle-bg 0.7s ease-out; border-radius: 8px; }
@keyframes sparkle-bg {
  0% { background: color-mix(in srgb, var(--green) 30%, transparent); }
  100% { background: transparent; }
}
.sparkle-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 120; }
.sparkle-bit {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: sparkle-bit 0.62s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes sparkle-bit {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-flash { animation: none; }
  .sparkle-burst { display: none; }
}

/* ---- OKR : une colonne par objectif -------------------------------------- */
/* Trois objectifs au plus → trois colonnes, tout le semestre d'un seul regard.
   `minmax(0,1fr)` : sans le 0, un long libellé de résultat clé élargit sa
   colonne et casse l'égalité visuelle entre objectifs. */
.okr-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.okr-cols.n1 { grid-template-columns: minmax(0, 420px); }
.okr-cols.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.okr-cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.okr-col { display: flex; flex-direction: column; }
.okr-col-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.okr-obj-n {
  flex: none; margin-top: 1px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 6px; color: #fff; background: var(--accent);
}
.okr-obj-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }

/* jauge en arc : l'aiguille donne l'avancement, le trait fin le rythme attendu */
.arcg-wrap { text-align: center; margin: 2px 0 10px; }
.arcg { display: block; width: 100%; max-width: 190px; margin: 0 auto; overflow: visible; }
.arcg-bg { fill: none; stroke: var(--gray-soft); stroke-width: 9; stroke-linecap: round; }
.arcg-fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke 0.2s; }
.arcg-mark { stroke: var(--ink); stroke-width: 1.6; opacity: 0.55; }
.arcg-needle { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.arcg-hub { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.arcg-scale {
  display: flex; justify-content: space-between; max-width: 190px; margin: -6px auto 0;
  font-size: 10px; color: var(--muted);
}
.arcg-value { font-size: 24px; font-weight: 780; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.arcg-sub { margin-top: 1px; }

/* un résultat clé = un bloc empilé, lisible dans une colonne étroite */
.okr-col-krs { display: flex; flex-direction: column; }
.okr-kr { padding: 10px 0; border-top: 1px solid var(--grid); }
.okr-kr-top { display: flex; align-items: flex-start; gap: 6px; }
.okr-kr-label { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.35; }
.okr-kr-line { display: flex; align-items: center; gap: 6px; margin: 6px 0 5px; }
/* la valeur EST le bouton de relevé : la cible d'action la plus fréquente */
.okr-kr-num {
  flex: none; font-size: 13.5px; font-weight: 750; color: var(--ink); cursor: pointer;
  background: var(--gray-soft); border: 1px solid transparent; border-radius: 7px;
  padding: 2px 8px; font-variant-numeric: tabular-nums; transition: border-color 0.12s, color 0.12s;
}
.okr-kr-num:hover { border-color: var(--accent); color: var(--accent); }
.okr-target-edit { flex: none; background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.45; padding: 0 2px; }
.okr-target-edit:hover { opacity: 1; }
/* le select « charté » (.sel-wrap) est rétréci ICI, en contexte : la colonne
   OKR est étroite, mais le composant partagé garde son rendu arrondi standard
   ailleurs dans l'app. */
.okr-unit { flex: none; max-width: 80px; }
.okr-unit .sel-wrap select.sel.sel-sm { padding: 4px 22px 4px 8px; font-size: 11px; }
.okr-unit .sel-arrow { right: 7px; }
.okr-bool { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.okr-kr-meta { margin-top: 4px; }
.okr-edit { cursor: pointer; border-bottom: 1px dashed transparent; }
.okr-edit:hover { border-bottom-color: var(--accent); color: var(--accent); }
.okr-del { opacity: 0; transition: opacity 0.12s; flex: none; }
.okr-kr:hover .okr-del, .okr-col-head:hover .okr-del { opacity: 1; }
.okr-add-kr { margin-top: 10px; align-self: flex-start; }

/* RELEVÉ : valeur + motif dans le même geste, en place */
.okr-read-host:empty { display: none; }
.okr-reading {
  margin-top: 8px; padding: 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.okr-r-row { display: flex; align-items: center; gap: 6px; }
.okr-r-val { width: 92px; font-weight: 700; font-variant-numeric: tabular-nums; }
.okr-r-note { width: 100%; margin-top: 6px; font-size: 12px; }

/* HISTORIQUE : la mémoire du pourquoi, repliée */
.okr-hist { margin-top: 8px; }
.okr-hist > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; list-style: none; padding: 2px 0; }
.okr-hist > summary:hover { color: var(--ink); }
.okr-hist-list { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.okr-hist-row {
  display: grid; grid-template-columns: 34px auto auto 1fr; gap: 6px;
  align-items: baseline; font-size: 11.5px; padding: 2px 0;
  border-bottom: 1px dotted var(--grid);
}
.okr-hist-d { color: var(--muted); font-variant-numeric: tabular-nums; }
.okr-hist-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.okr-hist-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.okr-hist-delta.up { color: var(--green); }
.okr-hist-delta.down { color: var(--red); }
.okr-hist-n { color: var(--muted); overflow-wrap: anywhere; }

/* aperçu du contexte transmis aux personas */
.okr-ctx { margin: 4px 0 14px; }
.okr-ctx > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; list-style: none; }
.okr-ctx > summary:hover { color: var(--ink); }
.okr-ctx pre { margin-top: 8px; max-height: 260px; overflow: auto; }

@media (max-width: 860px) {
  .okr-cols, .okr-cols.n2, .okr-cols.n3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- actions de contact (icône + un mot) ---------------------------------- */
/* Remplace les adresses en clair : on ne LIT presque jamais une adresse, on
   veut écrire, copier ou appeler. Le texte complet vit dans l'infobulle. */
.ct-row { gap: 10px; padding: 6px 0; align-items: center; flex-wrap: wrap; }
.ct-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.ct-act {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 11.5px; font-weight: 620; text-decoration: none; line-height: 1.5;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ct-act:hover { border-color: var(--accent); color: var(--accent); background: var(--btn-hover); }
.ct-act.ok { border-color: var(--green); color: var(--green); }
.ct-li { display: flex; line-height: 0; }
/* dans la colonne étroite de la fiche affaire, les actions passent à la ligne */
.af-member .ct-acts { margin-top: 4px; }

/* ---- pièces jointes du panneau IA ----------------------------------------- */
.cfo-foot-wrap { display: flex; flex-direction: column; }
.cfo-attach {
  flex: none; width: 32px; height: 32px; align-self: flex-end; margin-bottom: 2px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 9px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: border-color 0.12s, color 0.12s;
}
.cfo-attach:hover { border-color: var(--accent); color: var(--accent); }
/* bandeau des fichiers EN ATTENTE d'envoi, au-dessus du champ */
.cfo-att-tray {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 10px 0;
}
.cfo-att-pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px;
  padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--gray-soft); color: var(--ink);
  border: 1px solid var(--border);
}
.cfo-att-pill > span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfo-att-x {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 10px; padding: 0 0 0 2px; line-height: 1;
}
.cfo-att-x:hover { color: var(--red); }
/* rappel discret des pièces envoyées, sous la bulle */
.cfo-att-sent { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; opacity: 0.85; }
.cfo-att-sent .cfo-att-pill { background: transparent; }
/* voile de dépôt : visible SEULEMENT pendant un glisser de fichiers */
.cfo-drop-veil {
  position: absolute; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 2px dashed var(--accent);
}
.cfo-panel.dropping .cfo-drop-veil { display: flex; }
.cfo-panel.dropping .cfo-drop-veil * { pointer-events: none; }
.cfo-drop-msg { text-align: center; font-weight: 700; color: var(--accent); }
.cfo-drop-msg .small { font-weight: 500; margin-top: 3px; color: var(--muted); }

/* ── Veille : mémo d'avant-contact (actualité société + posts LinkedIn) ────── */
.veille-body { display: flex; flex-direction: column; gap: 14px; }
.veille-sec { display: flex; flex-direction: column; gap: 6px; }
.veille-sec-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--muted);
}
.veille-b { font-size: 13.5px; line-height: 1.45; }
.veille-b-head { display: flex; gap: 10px; align-items: baseline; }
.veille-b-head::before { content: '•'; color: var(--muted); flex: none; }
.veille-b-line { flex: 1 1 auto; min-width: 0; }
.veille-d {
  flex: none; color: var(--muted); font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* « creuser » : sobre, mais TOUJOURS visible. À 50 % d'opacité au repos, à côté
   d'une date grise, l'affordance passait inaperçue — l'action n'existait pas. */
.veille-dig {
  flex: none; margin-left: auto; align-self: flex-start; cursor: pointer;
  font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--gray-soft); color: var(--ink-2);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.veille-b:hover .veille-dig { border-color: var(--accent); color: var(--accent); }
.veille-dig:hover { color: var(--accent); border-color: var(--accent); }
.veille-dig:disabled { cursor: default; opacity: 0.6; }
/* creusage DÉJÀ enregistré : visible au repos, sinon on ne sait pas qu'il existe */
.veille-dig.has {
  opacity: 1; color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
/* sous-puces du creusage : rattachées visuellement à leur ligne mère */
.veille-subs:not(:empty) {
  margin: 6px 0 2px 14px; padding-left: 12px;
  border-left: 2px solid var(--grid); display: flex; flex-direction: column; gap: 5px;
}
.veille-subs.off { display: none; }
.veille-sub { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.veille-sub::before { content: '–'; color: var(--muted); flex: none; }
/* personne connue du CRM citée dans le mémo → accès direct à sa fiche */
.veille-chip {
  display: inline-flex; align-items: center; cursor: pointer; margin-left: 6px;
  font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-dark, var(--accent)); font-weight: 600;
}
.veille-chip:hover { background: var(--accent); color: #fff; }
.veille-t { color: var(--ink-2); }
a.veille-t { color: var(--accent); text-decoration: none; }
a.veille-t:hover { text-decoration: underline; }
.veille-angle {
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 9px 12px; border-radius: 0 8px 8px 0;
}
.veille-src { font-size: 11.5px; color: var(--muted); }
.veille-src a { color: var(--muted); }
.veille-warn {
  font-size: 12.5px; line-height: 1.45; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border-radius: 8px; padding: 8px 10px;
}

/* ── Plateau de tâches de fond : chips empilés, multitâche ─────────────────── */
/* Ils s'empilent vers le HAUT (column-reverse) : le plus récent reste à hauteur
   d'œil, au-dessus du panneau Mentor, et la pile grandit sans jamais recouvrir
   le contenu utile. */
/* z-index AU-DESSUS des modales (95) : une tâche est presque toujours lancée
   DEPUIS une fiche ouverte. À 88, le chip se retrouvait derrière la modale et
   sous son flou — invisible, donc inexistant. */
.tray {
  position: fixed; right: 96px; bottom: 18px; z-index: 140;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.tray-chip {
  pointer-events: auto;
  display: flex; gap: 10px; align-items: center;
  min-width: 250px; max-width: 340px; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-pop); font-size: 12.5px;
  animation: pop 0.25s var(--ease);
}
.tray-chip.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.tray-chip.err { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
/* résultat à ouvrir : il doit se distinguer d'une tâche qui tourne encore */
.tray-chip.ready {
  cursor: pointer; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.tray-chip.ready:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.tray-chip.ready .tray-l { color: var(--accent-dark, var(--accent)); }
.tray-l { font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-s {
  color: var(--muted); font-size: 11.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tray-track {
  flex: none; width: 54px; height: 6px; border-radius: 999px;
  background: var(--gray-soft); overflow: hidden;
}
.tray-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.25s var(--ease); }
.tray-track.indet .tray-fill { width: 35%; animation: fl-sweep 1.1s ease-in-out infinite; }

/* bouton dont la tâche tourne en fond : pulsation discrète, reste CLIQUABLE
   (on peut relancer une veille sur une autre fiche pendant celle-ci) */
.btn.running {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  animation: run-pulse 1.6s ease-in-out infinite;
}
@keyframes run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* Cases et radios DANS un .field : la règle générique `.field input { width:100% }`
   est faite pour les champs texte. Appliquée à une case, elle l'étire sur toute la
   largeur et éjecte son libellé hors du conteneur (constaté : texte illisible
   collé au bord droit de la modale). */
.field input[type="checkbox"], .field input[type="radio"] {
  width: auto; flex: none; padding: 0; box-shadow: none; margin-top: 2px;
}

/* Panneau des personas REMONTÉ : ouvert depuis une fiche (« Rédiger »,
   « Brainstorm »), il doit passer par-dessus la modale, sinon l'action semble
   ne rien produire. Reste sous le plateau de tâches (140) et sous les modales
   ouvertes DEPUIS lui (125, cf. openModal). */
.cfo-panel.above { z-index: 118; }

/* Catalogue de connecteurs : la tuile « ajouter » se distingue des connecteurs
   actifs (pointillés, pas de badge d'état) — c'est une porte, pas un réglage. */
.conn-tile.conn-add { border-style: dashed; background: none; }
.conn-tile.conn-add:disabled { opacity: 0.45; cursor: default; }
.conn-tile.conn-add .conn-ico { opacity: 0.6; }
.conn-pick {
  display: flex; gap: 12px; align-items: center; width: 100%; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); margin-bottom: 8px; text-align: left;
}
.conn-pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.conn-pick-ico { flex: none; font-size: 20px; line-height: 1; }

/* Fresh Leads sans connecteur : une proposition, pas un tableau de bord vide */
.fl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 40px 24px;
}
.fl-empty-ico { font-size: 34px; line-height: 1; }

/* Désignation de la prochaine action après une navigation guidée : un halo qui
   pulse deux fois puis s'efface. Assez visible pour attraper l'œil, assez bref
   pour ne pas devenir un décor permanent. */
.point-to {
  animation: point-to 1.1s var(--ease) 2;
  border-radius: 14px;
}
@keyframes point-to {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 42%, transparent); }
}

/* Onglets réordonnables : la poignée annonce le geste, la ligne survolée pendant
   un glisser montre où l'élément va se poser. */
.mod-list { display: flex; flex-direction: column; }
.mod-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 6px; border-radius: 9px; border-top: 2px solid transparent;
}
.mod-row:hover { background: var(--gray-soft); }
.mod-row.dragging { opacity: 0.4; }
.mod-row.over { border-top-color: var(--accent); }
.mod-grip {
  flex: none; cursor: grab; color: var(--muted); font-size: 15px; line-height: 1.3;
  user-select: none;
}
.mod-grip:active { cursor: grabbing; }

/* Emplacement de montant vide sur une tuile : discret, mais présent — sans lui
   il n'y avait aucun point d'entrée pour saisir un montant depuis le kanban. */
.kb-card b.kb-amount-empty {
  font-weight: 500; color: var(--muted); opacity: 0.65;
  border: 1px dashed var(--border); border-radius: 7px; padding: 0 6px;
  font-size: 11px;
}
.kb-card:hover b.kb-amount-empty { opacity: 1; border-color: var(--accent); color: var(--accent); }

/* ── Journal des versions ──────────────────────────────────────────────────── */
.ver-chip { cursor: pointer; border: none; font-family: inherit; margin-left: 10px; }
.ver-chip:hover { color: var(--accent); background: var(--accent-soft); }
.chg { display: flex; flex-direction: column; gap: 26px; }
.chg-rel { display: flex; flex-direction: column; gap: 8px; }
.chg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.chg-v {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent));
  font-variant-numeric: tabular-nums;
}
.chg-intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.chg-items { display: flex; flex-direction: column; gap: 10px; }
.chg-item { border-left: 2px solid var(--grid); padding-left: 11px; }
.chg-item-t { font-weight: 640; font-size: 13px; }
.chg-item-d { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
/* les limites sont la partie utile : elles ne doivent pas se lire comme du bruit */
.chg-limits {
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  border-radius: 9px; padding: 10px 12px; margin-top: 2px;
}
.chg-limits-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  font-weight: 700; color: var(--amber); margin-bottom: 5px;
}
.chg-limits ul { margin: 0; padding-left: 18px; }
.chg-limits li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 3px; }

/* Lien d'invitation : il doit rester à l'écran et se lire d'un coup d'œil —
   c'est la seule chose que l'utilisateur a à transmettre. */
.inv-link {
  margin-top: 10px; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--accent); background: var(--accent-soft);
}
.inv-link-t { font-weight: 650; font-size: 13px; margin-bottom: 3px; }
.inv-code {
  font-size: 11.5px; word-break: break-all; background: var(--surface);
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border);
}

/* ── Bas de barre : instance, espace, identité ─────────────────────────────── */
/*
 * Le trait sépare deux natures de navigation. Au-dessus : ce qu'on fait DANS
 * l'espace courant (les onglets). En dessous : dans quel espace on est, sous
 * quelle identité, et le pilotage de l'instance — trois choses qui ne changent
 * pas d'un onglet à l'autre. Les trois boutons partagent donc un seul gabarit
 * (.side-btn) : trois styles différents laissaient croire à trois natures.
 */
.side-bottom {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--side-hover);
  display: flex; flex-direction: column; gap: 2px;
}
/* le pied reprend sa place JUSTE en dessous : deux `margin-top:auto` dans la
   même colonne flex se partageraient l'espace libre et feraient flotter le
   groupe au milieu de la barre */
.side-bottom ~ .sidebar-foot { margin-top: 0; }
.side-btn {
  display: flex; align-items: center; gap: 0; justify-content: center;
  width: 100%; padding: 8px 10px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--side-ink);
  font: inherit; font-size: 12.5px; font-weight: 620; text-align: left;
  text-decoration: none; cursor: pointer; max-width: 100%;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.sidebar:hover .side-btn { justify-content: flex-start; gap: 9px; }
.side-btn:hover { background: var(--side-hover); color: var(--side-strong); border-color: transparent; }
.side-admin svg { width: 18px; height: 18px; opacity: 0.6; transition: opacity 0.18s; }
.side-admin:hover svg { opacity: 0.9; }
.side-admin.active { background: var(--side-active); color: var(--side-strong); }
.side-admin.active svg { opacity: 1; }
/* Une seule colonne d'icônes pour les trois : sans largeur commune, chaque
   pictogramme pousse son libellé un peu plus loin et le bas de barre paraît
   désaligné alors que tout est « à gauche ». */
.side-bottom .side-btn > :first-child {
  width: 20px; flex: none; display: flex; align-items: center; justify-content: center;
}
.side-bottom .id-av { width: 20px; height: 20px; font-size: 10px; }
.side-bottom .ws-ico { font-size: 12px; }
/* le chevron file à droite, comme sur le bouton d'identité */
.side-bottom .ws-name { flex: 1; }
.side-bottom .ws-switch { margin: 0; }
.side-bottom .id-btn { margin: 0; color: var(--side-ink); }
.side-bottom .id-btn:hover { background: var(--side-hover); border-color: transparent; }
.ws-ico { flex: none; font-size: 11px; opacity: 0.7; }
.id-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  padding: 8px 10px; margin-top: 4px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--ink-2);
  font-family: inherit; text-align: left;
}
.id-btn:hover { background: var(--gray-soft); border-color: var(--border); }
.id-av {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--gray-soft); color: var(--muted);
}
/* photo du héros : elle remplace l'initiale, jamais elle ne s'y superpose */
.id-av-photo {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* signé = un vrai compte : l'initiale prend la couleur d'accent */
.id-btn.signed .id-av { background: var(--accent-soft); color: var(--accent-dark, var(--accent)); }
.id-name { display: block; font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-sub { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-menu-head { margin-bottom: 10px; }
.id-menu-sec { display: flex; flex-direction: column; gap: 5px; }
.id-menu-ws {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--grid);
}
.id-ws-on { font-weight: 680; color: var(--accent); }

/* ── SuperAdmin : le siège ─────────────────────────────────────────────────── */
/*
 * Densité assumée : un dirigeant qui ouvre cet écran cherche à comparer des
 * espaces entre eux, pas à lire une fiche. Tout ce qui compte pour un espace
 * tient donc sur une carte, sans dépliage.
 */
.sa-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .sa-top { grid-template-columns: 1fr; } }
.sa-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.sa-kpi-v { font-size: 24px; font-weight: 720; letter-spacing: -0.02em; line-height: 1.1; }
.sa-kpi-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sa-kpi-s { font-size: 11px; color: var(--muted); }
.sa-sub {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 6px;
}
.sa-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.sa-leg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sa-growth { display: flex; align-items: flex-end; gap: 10px; height: 96px; margin: 8px 0 6px; }
.sa-gcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.sa-gbars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.sa-gbar { width: 12px; border-radius: 4px 4px 0 0; min-height: 2px; }
.sa-gbar-ws { background: var(--accent); }
.sa-gbar-u { background: var(--green); }
.sa-gm { font-size: 10.5px; color: var(--muted); }
.sa-space { margin-bottom: 12px; }
/* un espace sans connexion depuis deux semaines : pas une alerte, une nuance */
.sa-dormant { border-left: 3px solid var(--amber); }
.sa-row { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.sa-metric { font-size: 12.5px; color: var(--ink-2); }
.sa-metric b { font-weight: 680; color: var(--ink); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chip {
  font-size: 11.5px; font-weight: 620; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent));
}
/* clé héritée de l'instance : grisée, pour distinguer d'un branchement local */
.sa-chip-inst { background: var(--gray-soft); color: var(--ink-2); }
.sa-work { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.sa-w { font-size: 12.5px; color: var(--ink-2); }
.sa-w b { font-size: 15px; font-weight: 700; color: var(--ink); }
.sa-poles { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.sa-pole { font-size: 12px; color: var(--muted); }
.sa-pole b { color: var(--ink-2); }
.sa-member {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  padding: 4px 0; border-bottom: 1px solid var(--grid);
}
.sa-member:last-child { border-bottom: none; }
.sa-secret {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 0; border-bottom: 1px solid var(--grid);
}
.sa-secret:last-of-type { border-bottom: none; }
.sa-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--gray-soft); box-shadow: inset 0 0 0 1px var(--border);
}
.sa-dot.on { background: var(--green); box-shadow: none; }

/* ── Premiers pas : une section d'inbox ────────────────────────────────────── */
/*
 * Le guide d'accueil emprunte tout au reste de l'inbox — section, pile de
 * lignes, bouton d'action à droite. Seules deux choses le distinguent : un
 * liseré violet sur l'étape en cours, et les étapes à venir en retrait. C'est ce
 * qui fait qu'on apprend l'inbox en s'en servant plutôt qu'en lisant un tutoriel.
 */
.wiz-section .card { border-left: 3px solid var(--violet); }
.wiz-row .i-title { cursor: default; font-size: 15px; }
.wiz-row .i-sub { line-height: 1.5; max-width: 74ch; }
/* l'étape en cours : plus grosse, et seule à porter un bouton */
.wiz-now { background: var(--violet-soft); border-radius: 8px; padding: 10px 8px; }
.wiz-now .i-title { font-size: 16px; font-weight: 700; }
/* les suivantes attendent, en retrait, avec leur condition d'ouverture */
.wiz-row:not(.wiz-now):not(.wiz-done) { opacity: 0.62; }
.wiz-done .i-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.wiz-done .issue-icon { color: var(--green); }


/* ---- en-tête du plan de charge : le titre garde sa place ------------------ */
/*
 * Six contrôles dans la même barre écrasaient « Plan de charge » sur trois
 * lignes : le titre de la page devenait le plus petit élément de l'écran. Il a
 * désormais sa colonne, et la convention de lecture des % passe sous lui.
 */
/* Espacement resserré : sans cela la rangée demande 1148 px pour 1136 px
   disponibles à 1280, et le dernier contrôle passe à la ligne. Six intervalles à
   10 px au lieu de 14 rendent les 24 px qui manquaient. */
.charge-head { align-items: center; row-gap: 4px; column-gap: 10px; flex-wrap: wrap; }
.charge-head h1 { white-space: nowrap; }
/* La convention de lecture prend une LIGNE ENTIÈRE sous le titre : `order` la
   renvoie après les contrôles dans le flux, `width:100%` la met à la ligne. Dans
   la colonne du titre, elle débordait — la barre n'avait aucun pixel de marge. */
.ph-note {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  width: 100%; order: 99; margin-top: -2px;
}
/* un groupe de boutons dont le mot commun est sorti une fois, devant */
.seg-group { display: inline-flex; align-items: center; gap: 6px; }
.seg-label { font-size: 12px; color: var(--muted); font-weight: 600; }
/* variante compacte de l'interrupteur, pour les barres déjà chargées */
.chip-sm { padding: 4px 10px; font-size: 12.5px; }
.chip-toggle .avatar { width: 18px; height: 18px; font-size: 7px; }
/*
 * Violet = pipeline, dans toute l'application. La couleur porte déjà ce sens sur
 * les pastilles « Pipeline » des lignes (.b-violet) : l'interrupteur qui inclut
 * ou exclut le pipeline prend donc la même, sinon le même concept aurait deux
 * couleurs selon l'écran. Les interrupteurs d'autre nature gardent l'accent.
 */
.chip-violet.on {
  border-color: var(--violet); color: var(--violet); background: var(--violet-soft);
}
.empty-action { margin-top: 14px; }

/* ---- écran Gmail : une marche à suivre, pas un mur ------------------------ */
/*
 * Le connecteur exige un mot de passe d'application Google, ce qui demande trois
 * gestes hors du Phare. Les énumérer, avec le lien en BOUTON et non noyé dans
 * une phrase, est la différence entre « je le ferai plus tard » et « c'est fait ».
 * Le bloc se replie dès que c'est branché.
 */
.gm-guide { margin: 0 0 6px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.gm-guide > summary { cursor: pointer; font-size: 13px; font-weight: 620; color: var(--ink-2); }
.gm-guide[open] > summary { margin-bottom: 10px; }
.gm-step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--grid); }
.gm-step:first-of-type { border-top: none; }
.gm-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent));
}
.gm-sec {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 6px;
}
/* le verdict d'un test reste à l'écran : une cause d'échec doit pouvoir se lire */
.gm-verdict {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: 13px; line-height: 1.5;
}
.gm-ok { background: var(--green-soft); color: var(--green); }
.gm-err { background: var(--red-soft); color: var(--red); }
.gm-vico { flex: none; font-weight: 800; }