/* Buzz — console d'exploitation zelij-os. Refonte CEO 03/10 (skill UI/UX : console dense, style suisse, charte zelij.ai).
   Mobile d'abord ; barre latérale à partir de 1024 px ; mode sombre par préférence système ou bascule (data-theme).
   Règles : contraste ≥ 4,5:1, cibles ≥ 44 px pour les actions, focus visible, mouvements réduits respectés. */

:root {
  color-scheme: light;
  /* charte zelij.ai */
  --paper: #f6f3ec;
  --paper-deep: #efeade;
  --surface: #ffffff;
  --surface-2: #fbfaf6;
  --ink: #12151c;
  --ink-soft: #1c2029;
  --muted: #5c6270;
  --line: #ddd6c8;
  --line-strong: #c9c0ad;
  --cobalt: #1a3ad6;
  --cobalt-deep: #12298f;
  --cobalt-soft: #eef1ff;
  --saffron: #b8700c;          /* texte : 4,6:1 sur blanc */
  --saffron-fill: #dc921c;     /* remplissages */
  --saffron-soft: #fdf3e2;
  --emerald: #0d6b4f;
  --emerald-soft: #e6f3ee;
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --shadow: 0 1px 2px rgba(18, 21, 28, .06), 0 8px 24px -16px rgba(18, 21, 28, .25);
  --ring: 0 0 0 3px rgba(26, 58, 214, .35);
  /* rétro-compatibilité des anciens noms utilisés par quelques gabarits */
  --accent: var(--cobalt);
  --bg: var(--paper);
  --border: var(--line);
  --text: var(--ink);
  --success: var(--emerald);
  --warning: var(--saffron);
  --f-leadership: #e0b565; --f-growth: #7fc98a; --f-product: #6fb1e0; --f-sales: #e08a3e; --f-support: #c98ac0; --f-meta: #b5651d; --f-human: #f1ece1;
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --r: 10px;
  --r-sm: 6px;
  --nav-w: 232px;
  --topbar-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #12151c; --paper-deep: #0d1016; --surface: #1b1f29; --surface-2: #171b24;
    --ink: #efeade; --ink-soft: #e4ddcc; --muted: #a9adb8; --line: #2a2f3b; --line-strong: #3a4150;
    --cobalt: #7b93ff; --cobalt-deep: #a7b6ff; --cobalt-soft: #1e2744;
    --saffron: #f0b13a; --saffron-fill: #dc921c; --saffron-soft: #3a2b12;
    --emerald: #3fbf8f; --emerald-soft: #15302a; --danger: #ff7b72; --danger-soft: #3b1a18;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
    --ring: 0 0 0 3px rgba(123, 147, 255, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12151c; --paper-deep: #0d1016; --surface: #1b1f29; --surface-2: #171b24;
  --ink: #efeade; --ink-soft: #e4ddcc; --muted: #a9adb8; --line: #2a2f3b; --line-strong: #3a4150;
  --cobalt: #7b93ff; --cobalt-deep: #a7b6ff; --cobalt-soft: #1e2744;
  --saffron: #f0b13a; --saffron-fill: #dc921c; --saffron-soft: #3a2b12;
  --emerald: #3fbf8f; --emerald-soft: #15302a; --danger: #ff7b72; --danger-soft: #3b1a18;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
  --ring: 0 0 0 3px rgba(123, 147, 255, .45);
}

/* ------------------------------------------------------------------ socle */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cobalt-deep); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
p { margin: 0 0 .6rem; }
pre, code { font-family: var(--font-mono); font-size: .85em; }
table { border-collapse: collapse; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ coquille */
.shell { display: grid; min-height: 100vh; grid-template-rows: var(--topbar-h) 1fr; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 22px; height: 22px; }
.brand .accent { color: var(--cobalt); }
.brand .brand-sep { color: var(--muted); font-weight: 400; }
.topbar-title { margin: 0 auto 0 6px; min-width: 0; flex: 1 1 auto; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .logout-form .small { display: none; } .brand .brand-sep, .brand .brand-buzz { display: none; } }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 13px; gap: 6px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--paper-deep); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { display: inline-flex; }
.logout-form { display: inline; }
.link-btn { background: none; border: none; color: var(--muted); font-size: 13px; padding: 0; }
.link-btn:hover { color: var(--ink); }

.layout { display: grid; grid-template-columns: 1fr; }
.sidenav {
  position: fixed; inset: var(--topbar-h) auto 0 0; width: min(86vw, 300px); z-index: 25;
  overflow-y: auto; padding: 10px 10px 24px; background: var(--surface); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform .2s ease; box-shadow: none;
}
body.nav-open .sidenav { transform: none; box-shadow: var(--shadow); }
.nav-scrim { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 20; background: rgba(18, 21, 28, .35); display: none; }
body.nav-open .nav-scrim { display: block; }
.nav-group { padding: 6px 0 8px; }
.nav-group + .nav-group { border-top: 1px solid var(--line); }
.nav-head { margin: 6px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 10px;
  border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-size: 14px;
  transition: background-color .15s, color .15s;
}
.nav-link:hover { background: var(--paper-deep); color: var(--ink); }
.nav-link.is-active { background: var(--cobalt-soft); color: var(--cobalt); font-weight: 600; }
.nav-link.is-active::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--cobalt); margin-left: -8px; margin-right: 5px; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.nav-link.has-pending { color: var(--danger); font-weight: 600; }
.nav-ext-mark { color: var(--muted); font-size: 12px; }
.nav-ext { color: var(--muted); }

.content { padding: 14px 12px 96px; max-width: 880px; margin: 0 auto; min-width: 0; }
.content:has(.board-columns), .content:has(.dash-grid), .content:has(.team-table-wrap), .content:has(.wide) { max-width: 1480px; }

@media (min-width: 1024px) {
  .layout { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .sidenav { position: sticky; top: var(--topbar-h); inset: auto; height: calc(100vh - var(--topbar-h)); width: var(--nav-w); transform: none; box-shadow: none; }
  .nav-scrim, .nav-toggle { display: none !important; }
  .content { padding: 22px 28px 96px; }
  .topbar-title { margin-left: 14px; font-size: 14px; }
}

/* ------------------------------------------------------------------ connexion */
.login-card { max-width: 360px; margin: 15vh auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.login-card h1 { margin-bottom: 0; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-card input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: var(--surface); }
.login-card button { padding: 12px; border: none; border-radius: 8px; background: var(--cobalt); color: #fff; font-size: 15px; margin-top: 8px; }
.error { color: var(--danger); font-size: 14px; }

/* ------------------------------------------------------------------ pilules d'ancien menu (encore présentes sur quelques pages) */
.channel-tabs { display: none; }
.tab { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 13px; }
.tab.active { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.tab.tab-pending { background: var(--danger); color: #fff; border-color: var(--danger); }
.tab-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--danger); font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------------------ texte utilitaire */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.page-head h1 { margin: 0; font-size: 1.35rem; }
.live-indicator, #live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--emerald); font-size: 12.5px; margin: 0 0 10px; }
#live-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }

/* ------------------------------------------------------------------ cartes et fil */
.messages { display: flex; flex-direction: column; gap: 8px; }
.message { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; min-width: 0; }
.message-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; min-width: 0; }
.message-head .author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 600; }
.message-head .author .role { color: var(--muted); font-weight: 400; }
.message-head .time { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.message .body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.message .body.clamp-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.message .read-more { margin-top: 4px; cursor: pointer; color: var(--cobalt); min-height: 32px; }
.message details > summary { cursor: pointer; }
.message pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--paper); border: 1px solid var(--line); padding: 8px 10px; border-radius: var(--r-sm); margin-top: 6px; }
.avatar { border-radius: 999px; object-fit: cover; vertical-align: middle; border: 1px solid var(--line); background: var(--paper-deep); flex: none; }
.avatar-sm { width: 22px; height: 22px; margin-right: 6px; }
.avatar-xs { width: 26px; height: 26px; }
.avatar-lg { width: 56px; height: 56px; margin: 0 auto 4px; display: block; }
.avatar-chip { width: 24px; height: 24px; margin-right: 6px; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--paper-deep); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .02em; flex: none; }

.feed { display: flex; flex-direction: column; gap: 10px; }
.day-group, .month-group { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.day-group > summary, .month-group > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 12px; font-size: 13.5px; }
.day-group > summary::-webkit-details-marker, .month-group > summary::-webkit-details-marker { display: none; }
.day-group > summary::before, .month-group > summary::before { content: "▸"; margin-right: 8px; color: var(--muted); }
.day-group[open] > summary::before, .month-group[open] > summary::before { content: "▾"; }
.day-label { font-weight: 600; text-transform: capitalize; }
.day-count { color: var(--muted); font-size: 12px; }
.day-group > .messages { padding: 0 10px 10px; }
.day-group > .messages .message { background: var(--surface-2); }
.month-group { background: transparent; }
.month-group > summary { background: var(--surface); border-radius: var(--r); }
.month-days { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.fav-form { display: inline; margin-left: 4px; }
.fav-btn { font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; min-width: 32px; min-height: 32px; }
.fav-btn.is-fav, .fav-btn:hover { color: var(--saffron-fill); }
.message.is-target { outline: 2px solid var(--cobalt); }

/* ------------------------------------------------------------------ décisions */
.decision-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--cobalt); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); }
.decision-card.decided { border-left-color: var(--line-strong); box-shadow: none; }
.decision-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.decision-card h3 { margin: 4px 0 8px; font-size: 1.05rem; }
.decision-card p { overflow-wrap: anywhere; }
.decision-card .proposal { white-space: pre-wrap; font-size: 15px; }
.decision-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: var(--paper-deep); color: var(--ink-soft); border: 1px solid transparent; }
.chip.warn { background: var(--saffron-soft); color: var(--saffron); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.ok { background: var(--emerald-soft); color: var(--emerald); }
.badge { background: var(--cobalt-soft); color: var(--cobalt); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.deputy-reco { background: var(--emerald-soft); border-left: 3px solid var(--emerald); border-radius: var(--r-sm); padding: 8px 12px; margin: 8px 0; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.decision-actions form { flex: 1 1 140px; min-width: 120px; }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 9px 14px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--paper-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.approve, .btn.primary { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.btn.approve:hover, .btn.primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
:root[data-theme="dark"] .btn.approve, :root[data-theme="dark"] .btn.primary { color: #0d1016; }
.btn.reject { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.reject:hover { background: var(--danger-soft); }
.btn.changes { background: var(--saffron-soft); color: var(--saffron); border-color: var(--saffron-fill); }
.btn.changes:hover { background: var(--saffron-fill); color: #12151c; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn.ghost { background: transparent; }

/* ------------------------------------------------------------------ états */
.outcome { font-weight: 600; }
.outcome-ceo_approved, .outcome-completed, .outcome-success, .outcome-deposit_paid, .outcome-balance_paid, .outcome-accepted { color: var(--emerald); }
.outcome-ceo_rejected, .outcome-failed, .outcome-escalated, .outcome-danger, .outcome-declined { color: var(--danger); }
.outcome-ceo_changes_requested, .outcome-running, .outcome-awaiting_ceo, .outcome-warning, .outcome-pending_ceo_approval, .outcome-deposit_link_sent, .outcome-balance_link_sent { color: var(--saffron); }
.outcome-info, .outcome-sent, .outcome-followed_up { color: var(--cobalt); }
.outcome-muted, .outcome-received, .outcome-under_review, .outcome-closed { color: var(--muted); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--paper-deep); color: var(--ink-soft); }
.pill.live { background: var(--emerald-soft); color: var(--emerald); }
.pill.deferred { background: var(--saffron-soft); color: var(--saffron); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 5px; vertical-align: middle; background: var(--muted); }
.status-dot.live { background: var(--emerald); }
.status-dot.deferred { background: var(--saffron-fill); }

/* ------------------------------------------------------------------ kanban */
.board-columns { display: flex; flex-direction: column; gap: 16px; }
.board-ticket .author { min-inline-size: 0; overflow-wrap: anywhere; word-break: normal; }
.board-column { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.board-col-head { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.board-col-head::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.board-ticket { margin-top: 8px; background: var(--surface); }
.board-ticket-link { text-decoration: none; color: inherit; display: block; }
.board-ticket-link .board-ticket { transition: border-color .15s, box-shadow .15s; }
.board-ticket-link:hover .board-ticket { border-color: var(--cobalt); box-shadow: var(--shadow); }
@media (min-width: 780px) {
  .board-columns { display: grid; grid-auto-flow: column; gap: 12px; grid-auto-columns: minmax(236px, 1fr); align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .board-column { scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ KPI et résumés */
.sales-summary { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 16px; }
.sales-kpi, .sales-rdv, .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.sales-kpi { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sales-kpi b, .kpi b { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--cobalt); }
.sales-kpi span { font-size: 14px; }
.sales-kpi small { font-size: 12px; color: var(--muted); }
.sales-rdv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.sales-rdv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.sales-rdv-list time { color: var(--muted); margin-right: 6px; }
.sales-rdv-who { overflow-wrap: anywhere; }
@media (min-width: 640px) { .sales-summary { grid-template-columns: minmax(150px, 200px) 1fr; } }

/* ------------------------------------------------------------------ formulaires */
input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="date"], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink);
}
textarea { min-height: 96px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--cobalt); }
label { font-size: 13px; color: var(--muted); }
.composer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; display: flex; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.composer input { flex: 1; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 16px; }
.composer button { min-height: 44px; padding: 10px 18px; border: none; border-radius: 999px; background: var(--cobalt); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .composer button { color: #0d1016; }
@media (min-width: 1024px) { .composer { left: var(--nav-w); } }

/* ------------------------------------------------------------------ tableaux */
.team-table-wrap, .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.team-table, .table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.team-table { min-width: 900px; table-layout: fixed; }
.team-table thead th, .table thead th, .message table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.team-table tbody td, .table tbody td, .message table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.team-table tbody tr:last-child td, .table tbody tr:last-child td { border-bottom: none; }
.team-table tbody tr:hover td, .table tbody tr:hover td { background: var(--surface-2); }
.team-table .name-cell { font-weight: 600; font-size: 14px; }
.team-table td.date { white-space: nowrap; }
.team-table th:nth-child(1), .team-table td:nth-child(1) { width: 56px; }
.team-table th:nth-child(2), .team-table td:nth-child(2) { width: 150px; }
.team-table th:nth-child(3), .team-table td:nth-child(3) { width: 130px; }
.team-table th:nth-child(4), .team-table td:nth-child(4) { width: 80px; }
.team-table th:nth-child(5), .team-table td:nth-child(5) { width: 90px; }
.team-table th:nth-child(6), .team-table td:nth-child(6) { width: 110px; }
.team-table th:nth-child(7), .team-table td:nth-child(7) { width: 140px; }
.team-table th:nth-child(8), .team-table td:nth-child(8) { width: 260px; }
.skills-cell { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.skill-tag { display: inline-block; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ tableau de bord */
.dash-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.dash-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.dash-tile-head { display: flex; justify-content: space-between; align-items: baseline; }
.dash-tile-head .name { font-weight: 700; font-size: 17px; }
.dash-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }
.dash-figure { display: flex; flex-direction: column; gap: 2px; }
.dash-n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.dash-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 780px) { .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } }

/* ------------------------------------------------------------------ live, organigramme */
.live-wrap { display: flex; flex-direction: column; gap: 8px; }
.live-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: var(--muted); }
.live-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; vertical-align: middle; }
#live-canvas { width: 100%; border-radius: 12px; display: block; background: #15130f; }
.org-chart { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 12px; }
.org-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 22px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.org-card .name { font-weight: 600; font-size: 15px; }
.org-ceo { background: var(--ink); color: var(--paper); border-color: var(--ink); margin-bottom: 28px; position: relative; }
.org-ceo .name { font-size: 18px; }
.org-ceo .muted { color: rgba(246, 243, 236, .7); }
.org-ceo::after { content: ""; position: absolute; bottom: -28px; left: 50%; width: 1px; height: 28px; background: var(--line); }
.org-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 100%; }
.org-branch { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 230px; }
.org-team { margin-top: 2px; width: 100%; background: var(--paper); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.org-team-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.org-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.org-chip { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.org-chip .code { color: var(--muted); font-size: 10px; margin-right: 3px; }

/* ------------------------------------------------------------------ anciens menus déroulants (pages hors coquille) */
.topnav { display: none; }
.topmenu { position: relative; display: inline-block; }
.topmenu summary { cursor: pointer; list-style: none; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--muted); }
.topmenu summary::-webkit-details-marker { display: none; }
.topmenu > .topmenu-liste { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 0; box-shadow: var(--shadow); }
.topmenu[open] > .topmenu-liste { display: block; }
.topmenu > .topmenu-liste > a { display: block; padding: 7px 14px; white-space: nowrap; text-decoration: none; }
.topmenu > .topmenu-liste > a:hover { background: var(--paper-deep); }