/* ── Utilitaire global ───────────────────────────────────── */
.hidden { display: none !important; }

/* ── Variables & thèmes ──────────────────────────────────── */
:root {
  --bg: #f7f7f5;
  --card: #ffffff;
  --border: #e5e5e3;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --subtle: #f0f0ee;
  --active-bg: #1a1a1a;
  --active-text: #ffffff;
  --success: #22c55e;
  --success-bg: #dcfce7;
  --error: #ef4444;
  --error-bg: #fee2e2;
  --warning: #f59e0b;
  --primary: #0043ff;       /* bleu Tire-Fesses */
  --hover: #f5f5f5;
  --text-muted: #6b6b6b;   /* alias de --muted pour les placeholders/labels */
  --pause-bg: #eef1ff;
  --pause-border: #0043ff;
  --pause-color: #0043ff;
  --pause-active: #002ecc;
  --meeting-bg: #fff7ed;
  --meeting-border: #fed7aa;
  --meeting-color: #c2410c;
  --meeting-active: #9a3412;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 0.15s ease;
}

[data-theme="dark"] {
  --bg: #111111;
  --card: #1e1e1e;
  --border: #2e2e2e;
  --text: #f0f0f0;
  --muted: #888;
  --subtle: #252525;
  --hover: #2a2a2a;       /* ← manquait : fond des items au survol */
  --text-muted: #888888;  /* ← manquait : texte secondaire / placeholder */
  --active-bg: #ffffff;
  --active-text: #111111;
  --success: #4ade80;
  --success-bg: #14532d;
  --error: #f87171;
  --error-bg: #450a0a;
  --pause-bg: #0d1a40;
  --pause-border: #3366ff;
  --pause-color: #7fa3ff;
  --pause-active: #1a4dff;
  --meeting-bg: #1f1208;
  --meeting-border: #7c3a0e;
  --meeting-color: #fb923c;
  --meeting-active: #c2410c;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
}

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 2026-06-05 — Désactive le geste « retour/avance » de Chrome au swipe 2 doigts
   horizontal (navigation historique). TFTOOL est une SPA → aucune page à
   parcourir, et ce geste volait le swipe de navigation calendrier (signalé :
   « ça revient à la page précédente »). preventDefault() en JS arrivait trop
   tard sur les swipes lents — overscroll-behavior-x est la parade fiable. */
html, body { overscroll-behavior-x: none; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ──────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  /* V6.7.137 — z-index élevé pour que le header + ses popovers (menu avatar,
     dropdown bell, etc.) restent toujours au-dessus des sticky thead des panels
     (Accès, etc. à z-index 10). */
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
}

.logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.logo span { color: var(--muted); font-weight: 400; }

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

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}

/* ── Boutons ─────────────────────────────────────────────── */
button { font-family: var(--font); cursor: pointer; }

.btn-primary {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  background: var(--primary);
  color: var(--card);
  border: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition);
}
.btn-primary:hover { opacity: 0.82; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.btn-secondary:hover { background: var(--subtle); }

.btn-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.btn-text:hover { background: var(--subtle); color: var(--text); }

.btn-end-day { color: var(--error); }
.btn-end-day:hover { background: var(--error-bg); color: var(--error); }

.btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
/* V6.7.117 — Hover en bleu Tire-Fesses (--primary) sur tous les btn-icon.
   Donne une identité visuelle cohérente aux survols des icônes UI. */
.btn-icon:hover { background: var(--subtle); color: var(--primary); }
/* V6.7.113 — Pour les .btn-icon contenant un SVG Lucide */
.btn-icon svg { display: block; }
.btn-icon > span[data-lucide],
.btn-icon > span:has(> svg) { display: inline-flex; align-items: center; line-height: 1; }

/* V6.7.113 — Boutons avec icône + label (proj-view-btn, se-primary-tab,
   btn-secondary contenant des icônes inline, etc.). Aligne le SVG avec le texte
   via inline-flex + gap, sans casser les boutons sans icônes. */
.proj-view-btn,
.se-primary-tab,
.ptv-subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.proj-view-btn .tab-icon,
.se-primary-tab .tab-icon,
.ptv-subtab .tab-icon { display: inline-flex; align-items: center; line-height: 1; }
/* Boutons en attente / révoqués / rôles dans le header access — flex pour aligner */
.access-pending-btn,
.access-revoked-btn,
.access-roles-btn { display: inline-flex; align-items: center; gap: 6px; }
.access-pending-btn svg,
.access-revoked-btn svg,
.access-roles-btn svg { display: block; }
/* Gérer clients / Gérer missions */
#btnManageClients,
#btnManageMissions { display: inline-flex; align-items: center; gap: 6px; }
#btnManageClients svg,
#btnManageMissions svg { display: block; }
/* Impersonation banner */
.impersonation-icon { display: inline-flex; align-items: center; line-height: 1; }
.impersonation-icon svg { display: block; }
.impersonation-exit { display: inline-flex; align-items: center; gap: 5px; }
.impersonation-exit svg { display: block; }

/* ── User select wrapper ─────────────────────────────────── */
.user-select-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.btn-refresh-users {
  opacity: 0;
  width: 26px;
  height: 26px;
  font-size: 13px;
  transition: opacity var(--transition);
}
.user-select-wrap:hover .btn-refresh-users { opacity: 1; }

/* ── Dropdown utilisateur custom ──────────────────────────── */
.user-dropdown { position: relative; }
.user-dropdown-btn {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: none;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: border-color var(--transition);
  /* chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.user-dropdown-btn:focus,
.user-dropdown-btn:hover { border-color: var(--muted); }
/* Panneau positionné (contient search + liste) */
.user-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999;
  overflow: hidden;
}
/* Champ de recherche */
.user-dropdown-search-wrap {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border);
}
.user-dropdown-search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.user-dropdown-search:focus { border-color: var(--primary); }
.user-dropdown-search::placeholder { color: var(--text-muted); }

.user-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.user-dropdown-list li {
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-dropdown-list li:hover { background: var(--hover); }
.user-dropdown-list li.selected { color: var(--primary); font-weight: 600; }
.user-dropdown-list li.selected::before { content: '✓'; font-size: 11px; }
.user-dropdown-list li:not(.selected):not(.user-dropdown-group-hd)::before { content: ''; display: inline-block; width: 11px; }
/* En-têtes de groupe */
.user-dropdown-group-hd {
  padding: 8px 12px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted) !important;
  cursor: default !important;
  pointer-events: none;
}
.user-dropdown-group-hd::before { display: none !important; }
.user-dropdown-group-hd + li { /* 1ère entrée du groupe : pas de séparation */}
/* Message "aucun résultat" */
.user-dropdown-empty {
  padding: 10px 14px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: default !important;
  pointer-events: none;
  font-style: italic;
}
.user-dropdown-empty::before { display: none !important; }

/* ── Select ──────────────────────────────────────────────── */
select {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: none;
  max-width: 180px;
  transition: border-color var(--transition);
}
select:focus { border-color: var(--muted); }

/* ── Status bar ──────────────────────────────────────────── */
.status-bar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition);
}

.status-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d1d1;
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.status-dot.active {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
  animation: pulse 2s infinite;
}
.status-dot.paused { background: var(--pause-color); }
.status-dot.meeting { background: var(--meeting-color); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,.1); }
}

.status-label { font-size: 12px; color: var(--muted); }
.status-client { font-size: 16px; font-weight: 700; line-height: 1.3; }
.status-project { font-size: 12px; color: var(--muted); margin-top: 1px; }

.status-timer {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

/* ── Clients grid ────────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.client-btn-wrapper {
  position: relative;
}

.client-btn {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 30px 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.client-btn:hover { border-color: #0043ff; background: #eef1ff; color: #0043ff; }
.client-btn.active {
  background: var(--active-bg);
  border-color: var(--active-bg);
  color: var(--active-text);
}
.client-btn.active:hover { opacity: 0.88; }

/* Timer affiché sur le bouton actif */
.client-btn .btn-timer {
  display: block;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  margin-top: 2px;
}

/* Bouton refresh par client (visible au hover) */
.btn-client-refresh {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}
.client-btn-wrapper:hover .btn-client-refresh { opacity: 1; }
.btn-client-refresh:hover { background: var(--subtle); }
.client-btn.active ~ .btn-client-refresh { color: var(--active-text); opacity: 0; }
.client-btn.active:hover ~ .btn-client-refresh { opacity: 0.6; }

/* ── Special buttons ─────────────────────────────────────── */
.special-btns-row {
  display: flex;
  gap: 8px;
}
.pause-btn {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  transition: all var(--transition);
  background: var(--pause-bg);
  border: 1.5px solid var(--pause-border);
  color: var(--pause-color);
}
.pause-btn:hover { filter: brightness(0.95); }
.pause-btn.active {
  background: var(--pause-active);
  border-color: var(--pause-active);
  color: #fff;
}
.end-task-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  transition: all var(--transition);
  background: var(--error-bg);
  border: 1.5px solid var(--error);
  color: var(--error);
  white-space: nowrap;
}
.end-task-btn:hover { filter: brightness(0.95); }

/* ── FAQ modal ───────────────────────────────────────────── */
.faq-modal { max-width: 560px; }
.faq-body { display: flex; flex-direction: column; gap: 0; }

/* Onglets FAQ / MAJ */
.faq-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--border);
  padding: 0 2px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.faq-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  border-radius: 0;
  /* V6.7.135 — Align icône Lucide ↔ label */
  display: inline-flex; align-items: center; gap: 6px;
}
.faq-tab .faq-tab-icon { display: inline-flex; align-items: center; line-height: 1; }
.faq-tab .faq-tab-icon svg { display: block; }
.faq-tab:hover { color: var(--primary); }
.faq-tab--active { color: var(--primary); border-bottom-color: var(--primary); }
/* V6.7.135 — Icône dans le titre du modal FAQ */
.faq-modal-icon { display: inline-flex; align-items: center; color: var(--primary); vertical-align: -3px; }
.faq-modal-icon svg { display: block; }

/* Panes */
.faq-pane { display: flex; flex-direction: column; gap: 20px; }
.faq-pane--hidden { display: none; }

/* Entrées MAJ */
.maj-entry { margin-bottom: 8px; }
.maj-date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.maj-date::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.maj-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.maj-badge--new  { background: #dcfce7; color: #15803d; }
.maj-badge--fix  { background: #fef9c3; color: #854d0e; }
.maj-badge--imp  { background: #dbeafe; color: #1d4ed8; }
.maj-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.maj-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.maj-list li .maj-badge {
  margin-top: 2px; /* aligne le badge avec la première ligne de texte */
  justify-self: start;
}
.maj-list li strong { color: var(--text-primary); font-weight: 600; }
.faq-section h3 { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }

/* ── FAQ accordéon ── */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
summary.faq-q { list-style: none; }
summary.faq-q::-webkit-details-marker { display: none; }
.faq-q {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: background .15s;
}
.faq-q:hover { background: var(--hover); }
.faq-q::after {
  content: '›';
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform .2s ease;
  display: inline-block;
  line-height: 1;
}
details.faq-item[open] > summary.faq-q::after { transform: rotate(270deg); }
.faq-a {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  border-top: 1px solid var(--border);
}
.faq-hint { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }

/* Tableau dans les réponses FAQ */
.faq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.faq-table th, .faq-table td {
  text-align: left;
  padding: 5px 8px;
  border: 1px solid var(--border);
}
.faq-table th {
  background: var(--subtle);
  font-weight: 700;
  color: var(--text);
}
.faq-table td { color: var(--text-secondary); }
.faq-table tr:nth-child(even) td { background: var(--hover); }

/* ── MAJ accordéon ── */
details.maj-entry { margin-bottom: 10px; }
summary.maj-date { list-style: none; cursor: pointer; user-select: none; }
summary.maj-date::-webkit-details-marker { display: none; }
.maj-date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 0;
  padding: 6px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .15s;
}
.maj-date:hover { color: var(--text-primary); }
.maj-date::before {
  content: '›';
  font-size: 16px;
  font-weight: 400;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform .2s ease;
  display: inline-block;
  line-height: 1;
}
details.maj-entry[open] > summary.maj-date::before { transform: rotate(270deg); }
.maj-date::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
details.maj-entry .maj-list { padding-top: 8px; padding-bottom: 4px; }
.faq-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  resize: vertical;
  transition: border-color var(--transition);
}
.faq-textarea:focus { outline: none; border-color: var(--accent); }

/* ── Log list ────────────────────────────────────────────── */
.log-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--subtle);
  border: 1px solid var(--border);
  font-size: 12px;
  transition: background var(--transition);
}
.log-item:hover { background: var(--border); }

.log-main { flex: 1; min-width: 0; }
.log-client { font-weight: 700; }
.log-project { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.log-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.log-duration { font-weight: 600; color: var(--text); }

.log-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 100px;
  white-space: nowrap;
}
.log-status.sent { background: var(--success-bg); color: var(--success); }
.log-status.error { background: var(--error-bg); color: var(--error); }
.log-status.pending { background: #fef3c7; color: #d97706; }
.log-status.open { background: var(--subtle); color: var(--muted); border: 1px solid var(--border); }

.log-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-edit-entry,
.btn-delete-entry {
  font-size: 12px;
  padding: 3px 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  flex-shrink: 0;
  transition: all var(--transition);
}
.btn-edit-entry:hover  { background: var(--card); color: var(--text); }
.btn-delete-entry:hover { background: var(--error-bg); color: var(--error); border-color: var(--error); }

.btn-delete-entry.confirming {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  animation: pulse-delete 0.5s ease;
}
@keyframes pulse-delete {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Message setup ───────────────────────────────────────── */
.setup-msg {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 12px 0;
}

/* ── Overlay ─────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 50;
  transition: opacity 0.2s;
}
.overlay.hidden { display: none; }

/* ── Drawer (bottom sheet) ───────────────────────────────── */
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 680px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 60;
  box-shadow: var(--shadow-lg);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.open { transform: translateY(0); }
.drawer.hidden { display: none; }

.drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-title-wrap { flex: 1; min-width: 0; }
.drawer-title { font-size: 16px; font-weight: 700; }
.drawer-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.drawer-header-actions { display: flex; gap: 4px; flex-shrink: 0; }

.drawer-rename-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.drawer-rename-row input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  outline: none;
  min-width: 0;
}
.drawer-rename-row input:focus { border-color: var(--text); }
.drawer-rename-row .btn-primary  { padding: 7px 12px; font-size: 12px; }
.drawer-rename-row .btn-secondary { padding: 7px 10px; font-size: 12px; }

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.drawer-footer {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.btn-no-project {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  padding: 11px;
  background: var(--subtle);
  color: var(--muted);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-no-project:hover { background: var(--border); color: var(--text); }

/* Mission groups dans le drawer */
.mission-group { margin-bottom: 16px; }
.mission-group:last-child { margin-bottom: 0; }

.mission-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 8px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.project-btn {
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-btn:hover { border-color: var(--muted); background: var(--subtle); }
.project-btn.selected {
  border-color: var(--active-bg);
  background: var(--active-bg);
  color: var(--active-text);
}

.project-btn-icon { flex-shrink: 0; font-size: 14px; }

/* Mission directe (style subtil) */
.mission-direct-btn {
  font-style: italic;
  color: var(--muted);
  border-style: dashed;
}
.mission-direct-btn:hover { color: var(--text); }

/* ── Accordéon missions (drawer) ─────────────────────────── */
.mission-accordion-group {
  margin-bottom: 5px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition);
}
.mission-accordion-group.accordion-open {
  border-color: var(--muted);
}

.mission-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  background: var(--card);
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.mission-accordion-header:hover { background: var(--subtle); }
.accordion-open .mission-accordion-header { background: var(--subtle); }

.mission-accordion-title { flex: 1; }

.mission-accordion-chevron {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.accordion-open .mission-accordion-chevron { transform: rotate(90deg); }

.accordion-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  background: var(--subtle);
  border-top: 1px solid var(--border);
}
.accordion-body .project-btn {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
}

/* ── Gestionnaire de missions (dans le drawer) ───────────── */
.manage-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 0 2px;
}

.manage-mission-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.manage-mission-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 13px;
  font-weight: 500;
}
.manage-mission-item:hover { background: var(--subtle); }
.manage-mission-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--text);
  flex-shrink: 0;
}
.manage-mission-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.manage-mission-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.manage-mission-actions .btn-primary { width: 100%; text-align: center; padding: 10px; }
.manage-mission-actions .btn-secondary { width: 100%; text-align: center; padding: 10px; font-size: 12px; }

/* Bouton gérer missions (footer drawer) */
.btn-manage-missions {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-manage-missions:hover { background: var(--subtle); color: var(--text); border-color: var(--muted); }

/* Saisie manuelle mission */
.manual-mission-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.manual-mission-row input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  outline: none;
}
.manual-mission-row input:focus { border-color: var(--muted); }

/* Spinner loading */
.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}
.spinner::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--card);
  border-radius: var(--radius);
  z-index: 60;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.2s ease;
}
.modal.hidden { display: none; }

/* 2026-06-04 — FAQ + Historique : ces 2 modals (classe générique .modal/.overlay
   z-index 50/60) s'ouvrent depuis le menu avatar et passaient DERRIÈRE le header
   (z-index 9999, relevé en V6.7.137) → header sur le dessus = ✕/Fermer/overlay
   incliquables, modal visible derrière le header. On les remonte au-dessus du
   header (scopé par id pour ne pas toucher aux drawers qui partagent .overlay). */
#faqModalOverlay, #historyModalOverlay { z-index: 10000; }
#faqModal, #historyModal { z-index: 10001; }

@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.modal-header:active { cursor: grabbing; }

.modal-search-row {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-search-row input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  color: var(--text);
  outline: none;
}
.modal-search-row input:focus { border-color: var(--muted); background: var(--card); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Client manager list ─────────────────────────────────── */
.client-manager-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
  max-height: 400px;
}

.client-manager-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--transition);
}
.client-manager-item:last-child { border-bottom: none; }
.client-manager-item:hover { opacity: 0.75; }

.client-manager-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--text);
}
.client-manager-name { font-size: 13px; font-weight: 600; flex: 1; }
.client-manager-acronym {
  font-size: 11px;
  color: var(--muted);
  background: var(--subtle);
  padding: 2px 8px;
  border-radius: 100px;
}

/* ── Clients masqués ─────────────────────────────────────── */
.excluded-clients-section {
  border-top: 1px solid var(--border);
  padding: 10px 16px 4px;
}
.excluded-clients-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.excluded-client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.excluded-client-row:last-child { border-bottom: none; }
.excluded-client-name { font-size: 13px; color: var(--muted); }
.btn-unexclude {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-unexclude.active {
  background: var(--primary-light, #e8f0fe);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Edit form ───────────────────────────────────────────── */
.edit-form { display: flex; flex-direction: column; gap: 16px; }

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.form-row input[type="datetime-local"] {
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  color: var(--text);
  outline: none;
  width: 100%;
}
.form-row input[type="datetime-local"]:focus { border-color: var(--muted); background: var(--card); }

/* Inline project selector dans la modale d'édition */
.project-selector-inline {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.project-selector-inline .mission-group {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  margin: 0;
}
.project-selector-inline .mission-group:last-child { border-bottom: none; }
.project-selector-inline .project-btn {
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
}

/* ── Récap fin de journée ────────────────────────────────── */
.recap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.recap-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
}
.recap-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.recap-table tr:last-child td { border-bottom: none; }
.recap-table .td-client { font-weight: 700; }
.recap-table .td-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.recap-table .td-count {
  text-align: right;
  color: var(--muted);
}
.recap-total {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--text);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}

/* ── Auth Gate (Google OAuth) ────────────────────────────── */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: authGateIn 0.2s ease;
}
.auth-gate.hidden { display: none !important; }
@keyframes authGateIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.auth-gate--hiding {
  animation: authGateOut 0.38s ease forwards;
}
@keyframes authGateOut {
  to { opacity: 0; transform: scale(1.02); }
}
.auth-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2.5rem 2.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  width: calc(100% - 2rem);
  text-align: center;
}
.auth-gate-logo {
  font-size: 3rem;
  line-height: 1;
  user-select: none;
}
.auth-gate-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.auth-gate-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.auth-gate-btn-wrap {
  margin-top: 0.25rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-gate-error {
  font-size: 0.8125rem;
  color: var(--error);
  background: var(--error-bg);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  max-width: 100%;
  white-space: pre-line;
  text-align: left;
}
.auth-gate-footer {
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  width: 100%;
}

/* ── Bannière impersonation ──────────────────────────────── */
.impersonation-banner {
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 80;
  background: #f59e0b;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245,158,11,.25);
}
.impersonation-banner.hidden { display: none !important; }
.impersonation-icon { font-size: 1rem; flex-shrink: 0; }
.impersonation-label { flex: 1; }
.impersonation-exit {
  background: rgba(0,0,0,.12);
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.impersonation-exit:hover { background: rgba(0,0,0,.22); }

/* Bouton 👁 dans le tableau des accès */
.access-impersonate-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.35;
  padding: 0 0.25rem 0 0;
  vertical-align: middle;
  transition: opacity var(--transition), transform var(--transition);
  line-height: 1;
}
.access-impersonate-btn:hover { opacity: 1; transform: scale(1.2); }
.access-impersonate-btn.active {
  opacity: 1;
  filter: drop-shadow(0 0 3px #f59e0b);
}
/* V6.7.208 — Oeil unlinked = user pas encore lié à un userId Notion.
   Visuel distinct (pointillé) pour signaler qu'il faut un setup avant.    */
.access-impersonate-btn--unlinked {
  opacity: 0.25;
  filter: grayscale(1);
  position: relative;
}
.access-impersonate-btn--unlinked::after {
  content: '?';
  position: absolute;
  top: -3px; right: -4px;
  font-size: 9px;
  font-weight: 700;
  color: #f97316;
  background: var(--card, #fff);
  border-radius: 50%;
  width: 11px; height: 11px;
  line-height: 11px;
  text-align: center;
  border: 1px solid #f97316;
}
.access-impersonate-btn--unlinked:hover {
  opacity: 0.85;
  filter: grayscale(0.3);
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--error); }
.toast.success { background: #16a34a; }

/* ── Discord prod toast ──────────────────────────────────── */
.discord-toast {
  position: fixed;
  bottom: 72px;          /* au-dessus du toast normal */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #5865f2;   /* bleu Discord */
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(88,101,242,.4), var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10010;
  max-width: calc(100vw - 32px);
}
.discord-toast--in {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.discord-toast-icon { font-size: 16px; flex-shrink: 0; }
.discord-toast-msg strong { font-weight: 700; }
.discord-toast-btns {
  display: flex;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}
.discord-toast-yes,
.discord-toast-no {
  padding: 5px 13px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.discord-toast-yes { background: #fff; color: #5865f2; }
.discord-toast-no  { background: rgba(255,255,255,.18); color: #fff; }
.discord-toast-yes:hover,
.discord-toast-no:hover { opacity: .85; }

/* ── Retry banner ────────────────────────────────────────── */
.retry-banner {
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--error);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.retry-banner button {
  font-size: 12px;
  font-weight: 700;
  color: var(--error);
  background: none;
  border: 1px solid var(--error);
  border-radius: 6px;
  padding: 3px 8px;
}


/* ══════════════════════════════════════════════════════════
   LAYOUT DEUX COLONNES
══════════════════════════════════════════════════════════ */
.app-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 20px;
  /* 2026-06-10 — Cap élargi 1400→1760 : sur les grands écrans (1920p, équipe
     prod/montage), l'app exploitait mal l'espace (gros vides latéraux). */
  max-width: 1760px;
  margin: 0 auto;
  padding: 20px 20px 48px;
  align-items: start;
}
/* Très grands écrans : on élargit le volet de gauche (To Do / Graphiste / Montage)
   pour que la liste des contenus respire, en plus du calendrier. */
@media (min-width: 1680px) {
  .app-layout { grid-template-columns: 500px 1fr; gap: 28px; }
}

/* Non-CdP en onglet To Do : volet TT masqué, calendrier pleine largeur.
   En onglet GP, on laisse tracker-panel visible (contient panelProject). */
body.todo-tab .app-layout.no-tracker {
  grid-template-columns: 1fr;
}
body.todo-tab .app-layout.no-tracker .tracker-panel { display: none; }

/* Vue semaine To Do : Time Tracker masqué, calendrier pleine largeur */
.app-layout.week-view {
  grid-template-columns: 1fr;
}
.app-layout.week-view .tracker-panel { display: none; }

/* ── Barre vue To Do (Jour / Semaine) ────────────────────── */
.todo-view-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1760px;
  margin: 0 auto;
  padding: 10px 20px 0;
  gap: 8px;
}
.todo-view-bar.hidden { display: none; }

.tvb-btns {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tvb-btn {
  padding: 5px 18px;
  border: none;
  border-right: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tvb-btn:last-child { border-right: none; }
.tvb-btn.active {
  background: var(--primary);
  color: #fff;
}
.tvb-btn:not(.active):hover {
  background: var(--hover);
  color: var(--text);
}

/* Masquer le toggle Jour/Semaine du header cal sur l'onglet To Do
   (la barre todoViewBar remplace ce contrôle) */
body.todo-tab .cal-view-toggle { display: none; }

/* Bouton WE — dans le header calendrier, visible seulement en vue semaine */
.cal-we-toggle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cal-we-toggle.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.cal-we-toggle.hidden { display: none !important; }

/* ── Vue semaine : masquer les colonnes week-end ─────────── */
.cal-week-day-header[data-weekend="1"],
.cal-day-col[data-weekend="1"] {
  display: none;
}
/* Quand les week-ends sont visibles (classe .show-weekend) */
.cal-grid.show-weekend .cal-day-col[data-weekend="1"],
.cal-week-headers.show-weekend .cal-week-day-header[data-weekend="1"] {
  display: block;
}
/* Adapter la grille en 5 colonnes quand le week-end est masqué */
.cal-grid.week-mode:not(.show-weekend) { grid-template-columns: repeat(5, 1fr); }

.tracker-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── Barres scroll sidebar Équipe TF ── */
.tc-scroll-bar {
  position: fixed;
  left: 0; width: 0;        /* positionnées dynamiquement par JS */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 300;
  user-select: none;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
}
.tc-scroll-bar.visible  { opacity: 1; pointer-events: auto; }
.tc-scroll-bar--down::after { content: "↓"; }
.tc-scroll-bar--up::after   { content: "↑"; }
.tc-scroll-bar--down {
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
}
.tc-scroll-bar--up {
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 100%);
}
.tc-scroll-bar:hover { opacity: .85 !important; }

/* ══════════════════════════════════════════════════════════
   CALENDRIER JOURNALIER
══════════════════════════════════════════════════════════ */
.calendar-panel {
  position: sticky;
  top: 73px; /* hauteur du header */
  max-height: calc(100vh - 93px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition);
}

/* ── Header calendrier ───────────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* 2026-06-05 — Les flèches prev/next collent désormais au libellé de date
   (avant : .cal-date-label flex:1 étirait le libellé sur toute la largeur →
   flèches rejetées aux bords de l'écran, signalé par Floriane). Le groupe
   prend l'espace central (flex:1, centré) → les boutons de droite restent à droite. */
.cal-date-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.cal-date-label {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Barre "journée entière / multi-jours" ──────────────── */
.cal-allday-area {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* V6.6.3 — padding 0 + label 48px → les chips démarrent pile à 48px de l'origine,
     comme .cal-time-axis (44px) + border 1px et .cal-week-headers (padding-left:48px). */
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, var(--bg));
  flex-shrink: 0;
  min-height: 36px;
}
.cal-allday-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: normal;
  line-height: 1.3;
  overflow: hidden;
  padding: 4px 4px 0 8px;
  width: 48px;
  flex-shrink: 0;
  box-sizing: border-box;
}
/* Vue jour : chips empilés horizontalement (flex wrap) */
.cal-allday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
/* V6.6.3 — Vue semaine : grille 7 colonnes alignées sur les colonnes-jours,
   chaque chip se positionne au-dessus de son jour. */
.cal-allday-chips.week-mode {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  align-items: start;
}
.cal-allday-chips.week-mode:not(.show-weekend) {
  grid-template-columns: repeat(5, 1fr);
}
.cal-allday-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 3px;
  min-width: 0; /* permet l'ellipsis sur les enfants */
  border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.cal-allday-col:last-child { border-right: none; }
.cal-allday-col[data-weekend="1"] { display: none; }
.cal-allday-chips.week-mode.show-weekend .cal-allday-col[data-weekend="1"] {
  display: flex;
}
.cal-allday-chip {
  position: relative;       /* pour z-index au hover */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bcolor, #3b82f6) 18%, var(--card));
  border-left: 3px solid var(--bcolor, #3b82f6);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  max-width: 240px;
  /* V6.6.3 — Transition harmonisée avec .cal-block */
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  box-sizing: border-box;
  z-index: 1;
}
/* V6.6.4 — Hover visible : on intensifie le tint + lift (filter brightness sur
   un fond déjà pastel = invisible, on remplace par un mix plus saturé). */
.cal-allday-chip:hover {
  background: color-mix(in srgb, var(--bcolor, #3b82f6) 34%, var(--card));
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  transform: translateY(-1px);
  z-index: 10;
}
/* GCal a un fond #fff distinct → hover dédié */
.cal-allday-chip--gcal:hover {
  background: rgba(148,163,184,.22);
}
[data-theme="dark"] .cal-allday-chip--gcal:hover,
.dark .cal-allday-chip--gcal:hover {
  background: rgba(148,163,184,.32);
}
/* En vue semaine, chaque chip occupe toute la largeur de sa colonne */
.cal-allday-chips.week-mode .cal-allday-chip {
  max-width: none;
  width: 100%;
}
.cal-allday-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bcolor, #3b82f6);
  flex-shrink: 0;
}
.cal-allday-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Chip GCal journée entière — style cohérent avec les blocs GCal */
.cal-allday-chip--gcal {
  background: #fff;
  border-left-color: #94a3b8;
  color: #334155;
}
[data-theme="dark"] .cal-allday-chip--gcal,
.dark .cal-allday-chip--gcal {
  background: rgba(148,163,184,.12);
  border-left-color: #94a3b8;
  color: var(--text);
}

/* ── Scroll & grille ────────────────────────────────────── */
.cal-scroll-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  scroll-behavior: smooth;
}

.cal-time-axis {
  width: 44px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
}

.cal-hour-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px 6px 0 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  box-sizing: border-box;
}

.cal-grid {
  flex: 1;
  position: relative;
  min-width: 0;
}

.cal-hour-row {
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.cal-hour-row:nth-child(odd) { background: var(--subtle); }

/* ── Ligne "maintenant" ─────────────────────────────────── */
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.cal-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error);
  flex-shrink: 0;
  margin-left: -4px;
}
.cal-now-bar {
  flex: 1;
  height: 2px;
  background: var(--error);
  opacity: 0.7;
}

/* ── Blocs calendrier ───────────────────────────────────── */
.cal-block {
  position: absolute;
  border-radius: 6px;
  border-left: 3px solid var(--bcolor, #3b82f6);
  background: color-mix(in srgb, var(--bcolor, #3b82f6) 18%, var(--card));
  cursor: pointer;
  overflow: hidden;
  /* --base-z = position chronologique (croissante), --col-z = décalage par colonne */
  z-index: calc(var(--base-z, 2) + var(--col-z, 0));
  transition: filter 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.cal-block:hover {
  filter: brightness(0.93);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 100 !important; /* remonte toujours devant tous les autres blocs */
}
.cal-block.dragging  { opacity: 0.82; z-index: 20; cursor: grabbing; box-shadow: var(--shadow-lg); }
.cal-day-col--drag-target { background: rgba(0,67,255,.05) !important; outline: 1.5px solid rgba(0,67,255,.18); outline-offset: -1px; transition: background .1s; }
.cal-drag-ghost { box-shadow: 0 8px 28px rgba(0,0,0,.22) !important; transform: none !important; }
.cal-block.resizing  { z-index: 20; }
/* Bloc en cours de sauvegarde (entre fin du drag et réponse Notion) */
.cal-block.cal-block--saving {
  opacity: 0.72;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  pointer-events: none;
  animation: _savingPulse 1s ease-in-out infinite alternate;
}
@keyframes _savingPulse {
  from { outline-color: var(--primary); }
  to   { outline-color: transparent; }
}
/* 2026-06-17 — Bloc « en cours » (timer optimiste, pas encore en base).
   Liseré animé + pastille live pour le distinguer d'un créneau enregistré. */
.cal-block--running {
  outline: 2px solid var(--accent, #0043ff);
  outline-offset: -2px;
  animation: _runningPulse 1.4s ease-in-out infinite;
}
.cal-block--running::after {
  content: '';
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: _runningDot 1.4s ease-out infinite;
}
@keyframes _runningPulse {
  0%,100% { outline-color: color-mix(in srgb, var(--accent, #0043ff) 90%, transparent); }
  50%     { outline-color: color-mix(in srgb, var(--accent, #0043ff) 30%, transparent); }
}
@keyframes _runningDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* Mode éventail : border-left plus épaisse pour voir la "tranche" de la carte en dessous */
.cal-block-cascade   { border-left-width: 4px; }
/* Badge debug col/total — à supprimer une fois le layout validé */
.cal-debug-badge {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 9px; font-weight: 700; opacity: 0.5;
  color: var(--bcolor); pointer-events: none;
}

.cal-block-inner {
  padding: 4px 6px 14px; /* bottom padding pour le handle */
  height: 100%;
  overflow: hidden;
}
.cal-block-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--bcolor-dark, #1d4ed8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────── */
/* V6.7.42 — Adaptive rendering pour les blocs petits/minuscules */
/* ─────────────────────────────────────────────────────────── */

/* Tiny (< 22px) : on n'a la place que pour 1 ligne. On masque l'heure
   et tous les badges secondaires (alert, option, gcal-dot, meet-dot),
   on garde uniquement UN seul indicateur à droite (R/P pour Notion,
   📅 pour GCal). Le tooltip au survol montre tout le reste, et un
   outline plus visible apparait au hover pour faciliter le clic. */
.cal-block--tiny .cal-block-inner {
  padding: 0 22px 0 8px;        /* 22px à droite réserve pour le badge */
  display: flex;
  align-items: center;
  height: 100%;
}
.cal-block--tiny .cal-block-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1px;
}
.cal-block--tiny .cal-block-time,
.cal-block--tiny .cal-block-task {
  display: none;                /* pas la place pour ces 2 lignes */
}
/* Badges secondaires masqués (tooltip au hover montre tout) */
.cal-block--tiny .cal-block-alert,
.cal-block--tiny .cal-block-opt,
.cal-block--tiny .cal-block-gcal-dot,
.cal-block--tiny .cal-block-meet-dot {
  display: none;
}
/* R/P et 📅 : conservés mais centrés verticalement et plus discrets */
.cal-block--tiny .cal-block-rp {
  top: 50%;
  bottom: auto;
  right: 4px;
  transform: translateY(-50%);
  font-size: 8px;
  padding: 1px 4px;
}
.cal-block--tiny .cal-block-br-badges {
  /* V6.7.110 — Bloc tiny : on recentre le conteneur de badges (Meet déjà masqué
     plus haut), pas d'individuel à repositionner. */
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.cal-block--tiny .cal-block-gcal-badge {
  font-size: 10px;
  opacity: .85;
}
/* V6.7.112 — Plus de repositionnement spécifique en tiny : le badge passe
   automatiquement en variante --inline (bas-droite) dès height < 40, géré par
   la classe `cal-block-rsvp-badge--inline` ajoutée par calendar.js. */
/* La poignée resize prend juste 4px en bas — invisible mais cliquable */
.cal-block--tiny .cal-resize-handle { height: 4px; }
/* Hover renforcé sur tiny pour bien faire ressortir le bloc cliquable */
.cal-block--tiny:hover {
  outline: 1.5px solid color-mix(in srgb, var(--bcolor, #3b82f6) 70%, transparent);
  outline-offset: -1px;
  filter: brightness(.96);
}

/* Small (22-40px) : 2 lignes possibles mais serrées. On garde label + heure
   mais on réduit les line-heights et padding vertical, et on hide la
   tâche (3e ligne) qui ne tient pas. */
.cal-block--small .cal-block-inner {
  padding: 2px 6px 8px;
}
.cal-block--small .cal-block-label {
  font-size: 10.5px;
  line-height: 1.15;
}
.cal-block--small .cal-block-time {
  font-size: 9.5px;
  line-height: 1.1;
}
.cal-block--small .cal-block-task {
  display: none;
}
.cal-block--small .cal-resize-handle { height: 6px; }
[data-theme="dark"] .cal-block-label { color: color-mix(in srgb, var(--bcolor, #3b82f6) 100%, white 40%); }
.cal-block-task {
  font-size: 10px;
  color: var(--bcolor-dark, #1d4ed8);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-block-time {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  white-space: nowrap;
}

/* Poignée resize (bas du bloc) */
.cal-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-resize-handle::after {
  content: '';
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--bcolor, #3b82f6);
  opacity: 0;
  transition: opacity 0.15s;
}
.cal-block:hover .cal-resize-handle::after { opacity: 0.5; }

/* Message vide / chargement */
.cal-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Popover édition bloc ───────────────────────────────── */
.cal-popover {
  position: absolute;
  right: 8px;
  width: 290px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  animation: modalIn 0.15s ease;
}

.cal-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.cal-pop-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Swatch cliquable dans le header du popover tâche */
.pop-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.15);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform .1s, box-shadow .1s;
}
.pop-color-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

/* Mini popover de sélection de couleur */
.cal-color-picker-pop {
  position: fixed;
  z-index: 9500;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
  animation: modalIn .12s ease;
}
.cal-color-picker-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cal-color-picker-pop input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px;
  cursor: pointer;
  background: var(--bg);
}
.cal-color-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cal-pop-client {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-pop-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

input[type="color"] {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

.btn-notion-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all var(--transition);
  white-space: nowrap;
  /* V6.7.122 — Align icône Lucide */
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-notion-link svg { display: block; }
.btn-notion-link:hover { background: var(--subtle); color: var(--text); }

/* 2026-06-11 — Ligne « Contenu lié » dans le popover d'un créneau (créa graphisme/montage) */
.cal-pop-content-link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 14px 6px; padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--primary, #0043ff) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 16%, transparent);
}
.cal-pop-content-link[hidden] { display: none; }
.cal-pop-content-link-label { font-size: 11.5px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.cal-pop-content-link-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  background: var(--card); color: var(--primary, #0043ff);
}
.cal-pop-content-link-btn:hover { background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent); }
.cal-pop-content-link-btn svg { flex-shrink: 0; }

.cal-pop-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Bouton « Prochain créneau dispo » dans le popover tâche ── */
.cal-pop-dispo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
}
.cal-pop-dispo-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  /* V6.7.122 — Align icône Lucide target */
  display: inline-flex; align-items: center; gap: 5px;
}
.cal-pop-dispo-btn svg { display: block; }
.cal-pop-dispo-btn:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--primary);
  transform: translateY(-1px);
}
.cal-pop-dispo-btn:active { transform: translateY(0); }
.cal-pop-dispo-status {
  flex: 1;
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cal-pop-dispo-status:empty { display: none; }
.cal-pop-dispo-prop {
  font-style: normal;
  font-weight: 600;
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
}
.cal-pop-dispo-applied {
  font-style: normal;
  font-weight: 600;
  color: var(--success, #16a34a);
}
.cal-pop-dispo-apply,
.cal-pop-dispo-skip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.cal-pop-dispo-apply {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  border: 1px solid color-mix(in srgb, #16a34a 50%, var(--border));
  color: #16a34a;
}
.cal-pop-dispo-apply:hover {
  background: color-mix(in srgb, #16a34a 28%, transparent);
  transform: translateY(-1px);
}
.cal-pop-dispo-skip {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
}
.cal-pop-dispo-skip:hover {
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--text);
}

.cal-pop-body select:disabled,
.cal-pop-body input:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-style: dashed;
}

/* ── Responsable checklist dans le popover tâche ──────────── */
.pop-resp-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Chips externes (ajout manuel) */
.pop-resp-ext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.pop-resp-ext-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(99,102,241,.12);
  color: #4f46e5;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 12px;
  padding: 2px 6px 2px 8px;
  font-size: 11px;
  font-weight: 500;
  max-width: 100%;
}
.pop-resp-ext-rm {
  background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1;
  color: inherit; opacity: .6; padding: 0;
  flex-shrink: 0;
}
.pop-resp-ext-rm:hover { opacity: 1; }
/* Champ de recherche */
.pop-resp-search {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.pop-resp-search:focus { border-color: var(--muted); }
/* Liste à cocher */
.pop-resp-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 110px;
  overflow-y: auto;
  padding: 3px 0;
  background: var(--card);
}
.pop-resp-loading {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px;
  text-align: center;
}
.pop-resp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.pop-resp-item:hover { background: var(--subtle); }
.pop-resp-item input[type="checkbox"] {
  margin: 0;
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--accent, #3b82f6);
}
/* Flash quand un membre connu est auto-coché via l'ajout manuel */
@keyframes popRespFlash {
  0%   { background: rgba(99,102,241,.22); }
  100% { background: transparent; }
}
.pop-resp-item--flash { animation: popRespFlash .6s ease; }
/* Ligne ajout manuel */
.pop-resp-add-row {
  display: flex;
  gap: 4px;
}
.pop-resp-add-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.pop-resp-add-input:focus { border-color: var(--muted); }
.pop-resp-add-btn {
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  transition: background var(--transition);
  flex-shrink: 0;
}
.pop-resp-add-btn:hover { background: var(--border); }

.cal-pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.cal-pop-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Barre Google Agenda dans le popover ──────────────────── */
.cal-pop-gcal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #eef2ff;
  flex-wrap: wrap;
}
.cal-pop-gcal-bar:empty { display: none; }
/* V6.7.351 — Description dépliable dans le popover édition créneau */
.cal-pop-desc {
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
}
.cal-pop-desc > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.cal-pop-desc > summary::-webkit-details-marker { display: none; }
.cal-pop-desc > summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  transition: transform .12s;
}
.cal-pop-desc[open] > summary::before { transform: rotate(90deg); }
.cal-pop-desc > summary:hover { background: var(--subtle, #f9fafb); }
.cal-pop-desc-count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-muted, #9ca3af);
  font-weight: 500;
}
.cal-pop-desc-textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--border, #e5e7eb);
  border-radius: 0 0 6px 6px;
  resize: vertical;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--card, #fff);
  color: var(--text, #111);
  box-sizing: border-box;
  outline: none;
}
.cal-pop-desc-textarea:focus { background: color-mix(in srgb, var(--primary, #0043ff) 4%, var(--card, #fff)); }
.btn-gcal-link {
  font-size: 12px;
  font-weight: 600;
  color: #0043ff;
  text-decoration: none;
  padding: 4px 10px;
  border: 1.5px solid #0043ff;
  border-radius: 6px;
  background: white;
  transition: background .15s, color .15s;
  flex: 1;
  text-align: center;
  /* V6.7.122 — Align icône Lucide */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-gcal-link svg { display: block; }
.btn-gcal-link:hover { background: #0043ff; color: white; }
.btn-gcal-add {
  font-size: 12px;
  font-weight: 600;
  color: #0043ff;
  padding: 4px 10px;
  border: 1.5px solid #0043ff;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: background .15s, color .15s;
  width: 100%;
}
.btn-gcal-add:hover { background: #0043ff; color: white; }
.btn-gcal-add:disabled { opacity: .5; cursor: default; }

/* ── Alerte "Tâche : Client sans Accès Client" ────────────── */
.cal-block-alert {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  z-index: 3;
  pointer-events: auto;
  cursor: help;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.25));
}
/* Sur les petits blocs : seul le badge est visible, on le centre */
.cal-block--tiny .cal-block-alert,
.cal-block--small .cal-block-alert {
  top: 50%;
  transform: translateY(-50%);
}

/* Badge inline dans la liste modulaire */
.mod-task-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: help;
  vertical-align: middle;
  opacity: .9;
}

/* ── Point bleu GCal sur les blocs ───────────────────────── */
.cal-block-gcal-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0043ff;
  border: 2px solid white;
  pointer-events: none;
  z-index: 2;
}

.btn-gcal-invite {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: background .15s;
  /* V6.7.122 — Align icône Lucide */
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-gcal-invite svg { display: block; }
.btn-gcal-invite:hover { background: var(--bg-alt); }

/* ── Bouton Rejoindre Meet ─────────────────────────────────── */
/* V6.7.122 — Couleur Tire-Fesses (var(--primary)) au lieu du bleu Google */
.btn-meet-join {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .15s;
  flex: 1;
  justify-content: center;
}
.btn-meet-join svg { display: block; }
.btn-meet-join:hover { background: color-mix(in srgb, var(--primary) 85%, black); }

/* ── Wrapper GCal checkbox + bouton invités ───────────────── */
.qc-gcal-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Checkbox "Copier dans Google Agenda" ─────────────────── */
.qc-gcal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
}
.qc-gcal-label input { cursor: pointer; accent-color: #0043ff; }

/* ── Modal invitation Google Agenda ──────────────────────── */
.gcal-invite-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}
.gcal-invite-inner {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.gcal-invite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}
.gcal-invite-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}
.gcal-invite-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.gcal-invite-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 6px;
}

/* V6.7.41 — Refonte UX : liste plate scrollable avec headers de catégories */
.gcal-invite-search {
  padding: 10px 16px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.gcal-invite-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--card);
  color: var(--text);
}
.gcal-invite-search input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #3b82f6) 18%, transparent);
}

/* Liste unique scrollable */
.gcal-invite-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Chaque "groupe" = un titre de catégorie + sa liste de contacts. Tout
   est toujours visible (pas de collapse), seul le filtre de recherche
   peut masquer un groupe entier (s'il n'a plus aucun match visible). */
.gcal-invite-group {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.gcal-invite-group:first-child { margin-top: 0; }

.gcal-invite-group-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  margin-bottom: 2px;
  /* Sticky pour que les headers restent visibles pendant le scroll */
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.gcal-invite-group-icon { font-size: 12px; }
.gcal-invite-group-lbl { flex: 1; }
.gcal-invite-group-count {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* État "aucun résultat" */
.gcal-invite-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Affichage Nom + email (le name passe en bold, l'email en secondaire) */
.gcal-contact-name {
  font-weight: 500;
  flex: 1;
}
.gcal-contact-email {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gcal-invite-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.gcal-contact-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gcal-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.gcal-contact-row:hover { background: var(--bg-alt); }
.gcal-contact-row input { accent-color: #0043ff; cursor: pointer; }
.gcal-contact-row--existing {
  cursor: default; opacity: .65; font-style: italic;
}
.gcal-contact-row--existing:hover { background: none; }
.gcal-invited-dot { color: #16a34a; font-size: 12px; font-style: normal; flex-shrink: 0; }
.gcal-contact-list--invited { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.gcal-manual-row {
  display: flex;
  gap: 8px;
}
.gcal-manual-row .qc-title-input { flex: 1; }

.btn-delete-cal {
  font-size: 14px;
  padding: 5px 8px;
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.btn-delete-cal:hover { background: var(--error-bg); }

.btn-duplicate-cal {
  font-size: 14px;
  padding: 5px 8px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.btn-duplicate-cal:hover { background: var(--subtle); color: var(--text); }

/* Poignée de redimensionnement du popover */
.pop-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  border-bottom-right-radius: var(--radius);
  opacity: 0.35;
  transition: opacity var(--transition);
  background:
    linear-gradient(135deg, transparent 45%, var(--muted) 45%, var(--muted) 55%, transparent 55%),
    linear-gradient(135deg, transparent 65%, var(--muted) 65%, var(--muted) 75%, transparent 75%);
}
.pop-resize-handle:hover { opacity: 0.75; }

/* Header draggable du popover */
.cal-pop-header.is-draggable { cursor: grab; }
.cal-pop-header.is-dragging  { cursor: grabbing; user-select: none; }

/* Project selector dans le popover */
.cal-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.cal-pop-task-btn {
  text-align: left;
  font-size: 11px;
  padding: 5px 8px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: background var(--transition);
}
.cal-pop-task-btn:hover { background: var(--subtle); }
.cal-pop-task-btn.selected {
  background: var(--active-bg);
  color: var(--active-text);
}
.cal-pop-proj-btn { padding-left: 20px; }

/* Select dans le popover */
.cal-pop-body select {
  width: 100%;
  max-width: 100%;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .app-layout {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  .calendar-panel {
    position: static;
    max-height: 520px;
  }
}
@media (max-width: 480px) {
  .header { padding: 10px 14px; }
  .status-timer { font-size: 20px; }
  .logo span { display: none; }
  .clients-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .recap-table .td-count { display: none; }
  .cal-popover { right: 4px; left: 4px; width: auto; }
}

/* ── Gestionnaire de couleurs (modal dynamique) ──────────── */
.color-mgr-modal {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
}

.color-mgr-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  max-height: 480px;
}

.color-mgr-section {
  margin-bottom: 16px;
}

.color-mgr-client-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.color-mgr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-radius: 6px;
  transition: background var(--transition);
}
.color-mgr-row:hover { background: var(--subtle); }
.color-mgr-row-proj { padding-left: 20px; }

.color-mgr-icon { font-size: 13px; flex-shrink: 0; }

.color-mgr-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.color-mgr-swatch {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.color-mgr-swatch input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
  pointer-events: auto;
}

.color-mgr-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: block;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.color-mgr-swatch:hover .color-mgr-preview {
  transform: scale(1.15);
  border-color: var(--muted);
}

/* ── Tab navigation ─────────────────────────────────────────── */
/* V6.7.58 — Refonte « onglets » : prennent toute la hauteur du contenu
   du header (entre les paddings), avec un bord biseauté en bas façon
   onglet de classeur. Plus de pilules. */
.tab-nav {
  display: flex;
  gap: 0; /* tabs bord-à-bord */
  align-self: stretch;
  /* Étend les tabs jusqu'aux bords du header (compense le padding vertical) */
  margin-top: -12px;
  margin-bottom: -12px;
}
/* V6.7.60 — Imbriquer parfaitement les parallélogrammes : chaque onglet
   chevauche le précédent de 14px (= la largeur du biseau). Le slant droit
   de l'un et le slant gauche du suivant se rejoignent exactement, plus
   aucun espace blanc visible entre eux. */
.tab-btn + .tab-btn {
  margin-left: -14px;
}
.tab-btn {
  padding: 0 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  /* V6.7.59 — Forme parallélogramme : tous les onglets penchent dans la même
     direction (top-left rentré, bottom-right sortant). Effet italique cohérent
     d'un onglet à l'autre. */
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* V6.7.113 — Espace entre l'icône SVG (.tab-icon) et le label */
  gap: 7px;
}
.tab-btn .tab-icon { display: inline-flex; align-items: center; line-height: 1; }
.tab-btn .tab-icon svg { display: block; }
.tab-btn:hover {
  background: color-mix(in srgb, #0043ff 10%, transparent);
  color: #0043ff;
}
.tab-btn.active {
  background: #0043ff;
  color: #fff;
  font-weight: 600;
  /* V6.7.60 — Devant les autres onglets en cas de chevauchement de bounding box */
  z-index: 1;
}
/* Petit liseré coloré sous l'onglet actif pour bien le détacher du contenu */
.tab-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, #0043ff 60%, black);
}

/* ── Tab panels ─────────────────────────────────────────────── */
.tab-panel { display: flex; flex-direction: column; gap: 12px; }
.tab-panel.hidden { display: none; }

/* ── V6.7.295 — Vue Graphiste (sidebar To Do) ───────────────── */
#panelGraphiste { min-height: 0; }
.graph-header-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.graph-team-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card, #fff);
}
.graph-team-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.graph-team-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
}
.graph-team-btn.active {
  background: var(--primary, #0043ff);
  color: #fff;
}
/* V6.7.397 — Toggle Team grisé quand le tab actif n'est pas 'Ma file' */
.graph-team-toggle.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* V6.7.397 — Tab bar (Ma file / Autre team / En cours) ────────── */
.graph-tab-bar {
  display: flex;
  gap: 4px;
  padding: 6px 12px 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.graph-tab-btn {
  flex: 1;
  /* V6.7.422 — Flex inline pour aligner icône Lucide + label */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
/* V6.7.422 — Icône Lucide aligne pile avec le label */
.graph-tab-btn svg { flex-shrink: 0; }
.graph-tab-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  color: var(--text, #111827);
}
.graph-tab-btn.active {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}

/* V6.7.412 — Custom tooltip stylé au hover des cards Vue Montage/Graphisme.
   Singleton DOM (#graphCardTooltip) positionné en `position: fixed`.
   Apparaît sans délai au survol, disparaît au mouseout. */
.graph-card-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: 320px;
  min-width: 220px;
  padding: 10px 12px;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.graph-card-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.graph-card-tooltip .gct-title {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
  word-break: break-word;
}
.graph-card-tooltip .gct-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.graph-card-tooltip .gct-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.graph-card-tooltip .gct-label {
  flex: 0 0 auto;
  min-width: 78px;
  color: #9ca3af;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}
.graph-card-tooltip .gct-value {
  flex: 1 1 auto;
  color: #f3f4f6;
  word-break: break-word;
}
.graph-card-tooltip .gct-row--accent .gct-value {
  color: #93c5fd;
  font-weight: 600;
}
.graph-card-tooltip .gct-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 6px 0;
}
/* V6.7.414 — Variantes pour le tooltip du bouton Dénomenclature */
.graph-card-tooltip .gct-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.10);
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.graph-card-tooltip .gct-hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
}
/* 2026-06-13 — Tooltip « Équipe du contenu » (bouton 👥 du header modale To Do)
   Grille 2 colonnes : tous les labels partagent la largeur du plus large
   (max-content) → les valeurs s'alignent quelle que soit la longueur du label.
   Les .gct-team-row passent en display:contents pour devenir cellules de grille. */
.graph-card-tooltip .gct-team-grid {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 12px; row-gap: 5px; align-items: center;
}
.graph-card-tooltip .gct-team-row { display: contents; }
.graph-card-tooltip .gct-team-row .gct-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.graph-card-tooltip .gct-team-people { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.graph-card-tooltip .gct-person { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
.graph-card-tooltip .gct-ava {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.graph-card-tooltip .gct-empty { color: #9ca3af; font-style: italic; }

/* V6.7.414 — Bouton Dénomenclature dans le header popover */
.gd-denom-btn {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.gd-denom-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
}
.gd-denom-btn.is-copied {
  background: color-mix(in srgb, #22c55e 16%, var(--card, #fff));
  border-color: #22c55e;
  color: #15803d;
}
body.dark .gd-denom-btn,
[data-theme="dark"] .gd-denom-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .gd-denom-btn.is-copied,
[data-theme="dark"] .gd-denom-btn.is-copied { background: color-mix(in srgb, #22c55e 22%, #1f2937); color: #86efac; }

/* V6.7.404 — Refresh button manuel dans le header (à côté du count) */
.graph-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.graph-refresh-btn {
  /* V6.7.433 — Plus de margin-left:auto (le bouton est désormais dans la
     search-row à côté d'Élargir, plus seul en bas). Légèrement plus petit. */
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s, transform 0.12s;
  flex: 0 0 auto;
  padding: 0;
}
.graph-refresh-btn:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
/* V6.7.435 — Compensation optique : l'icône rotate-cw a sa flèche en
   haut-droite (touche y=3 du viewBox 24×24, alors que l'arc descend
   seulement à ~y=21). Masse visuelle légèrement top-heavy → on pousse
   le SVG de 1px vers le bas pour qu'il paraisse centré dans le cercle. */
.graph-refresh-btn svg { transform: translateY(1px); }
/* V6.7.433 — État loading : battement de cœur léger (opacité + scale) au lieu
   du spin. Plus apaisant, et signifie « j'ai entendu, je travaille ». */
.graph-refresh-btn.is-loading {
  animation: graphRefreshHeartbeat 0.85s ease-in-out infinite;
  pointer-events: none;
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
@keyframes graphRefreshHeartbeat {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.45; transform: scale(0.88); }
}
/* Back-compat : si du code legacy ajoute encore .is-spinning, fallback heartbeat */
.graph-refresh-btn.is-spinning {
  animation: graphRefreshHeartbeat 0.85s ease-in-out infinite;
  pointer-events: none;
}
body.dark .graph-refresh-btn,
[data-theme="dark"] .graph-refresh-btn {
  background: #1f2937;
  border-color: #374151;
  color: #9ca3af;
}

/* V6.7.403 — Sub-filter bar (Tous / Montage / Graphisme) du tab En cours */
.graph-subfilter-bar {
  display: flex;
  gap: 4px;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.graph-subfilter-bar.hidden { display: none; }
.graph-subfilter-btn {
  flex: 1;
  /* V6.7.422 — Flex inline pour icône Lucide + label */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.graph-subfilter-btn svg { flex-shrink: 0; }
.graph-subfilter-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  color: var(--text, #111827);
}
.graph-subfilter-btn.active {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  font-weight: 600;
}
body.dark .graph-subfilter-btn,
[data-theme="dark"] .graph-subfilter-btn { color: #9ca3af; }
body.dark .graph-subfilter-btn.active,
[data-theme="dark"] .graph-subfilter-btn.active { color: #fff; background: color-mix(in srgb, var(--primary, #0043ff) 25%, transparent); }
/* 2026-06-17 — Filtre « par personne » (onglet En cours) : séparé des filtres
   radio Tous/Montage/Graphisme par un petit trait, poussé à droite. */
.graph-subfilter-sep {
  width: 1px; align-self: stretch; margin: 3px 2px;
  background: var(--border);
}
.graph-live-person-sel {
  margin-left: auto; max-width: 150px;
  font-size: 12px; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 8px; cursor: pointer;
}
.graph-live-person-sel:hover { border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, transparent); }
.graph-live-person-sel:focus { outline: none; border-color: var(--primary, #0043ff); }
body.dark .graph-live-person-sel,
[data-theme="dark"] .graph-live-person-sel { color: #e5e7eb; background: #1f2937; border-color: #374151; }
/* En-tête de groupe « par personne » dans la liste En cours */
.graph-live-group { margin-bottom: 10px; }
.graph-live-group-head {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 2px 6px; position: sticky; top: 0; z-index: 1;
}
.graph-live-group-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.graph-live-group-count {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px; padding: 0 7px; line-height: 1.6;
}
/* V6.7.400 — Tabs en bleu TF même côté Montage (cohérence avec le reste de
   l'app, le cyan était trop appuyé). Les autres accents Montage (Démarrer,
   En cours badge…) restent cyan-600 pour différencier la vue. */

/* V6.7.401 — Réservation : badge + bouton + variante de card ─────────── */
/* 2026-06-10 — Réservé/En cours en charte TF (bleu). Réservé = bleu SOFT (pill
   clair, contour) pour rester distinct d'« En cours » = bleu plein (is-running). */
.graph-card.is-reserved-by-me {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 55%, var(--border, #e5e7eb));
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, var(--card, #fff));
}
.graph-card-reserved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.graph-card-reserved svg { flex: 0 0 auto; }
.graph-card-reserve {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px dashed color-mix(in srgb, var(--primary, #0043ff) 55%, transparent);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--primary, #0043ff);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.graph-card-reserve svg { flex: 0 0 auto; }
/* V6.7.402 — Play button : align icon + text */
.graph-card-play { display: inline-flex; align-items: center; gap: 4px; }
.graph-card-play svg { flex: 0 0 auto; }
.graph-card-reserve:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
  border-style: solid;
}
.graph-card-reserve:active { transform: scale(0.96); }
body.dark .graph-card-reserve,
[data-theme="dark"] .graph-card-reserve { background: #1f2937; border-color: color-mix(in srgb, var(--primary,#0043ff) 60%, transparent); color: #93b4ff; }
body.dark .graph-card.is-reserved-by-me,
[data-theme="dark"] .graph-card.is-reserved-by-me {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, #111827);
}
.graph-live-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.graph-live-status--reserved {
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
}
.graph-live-card--reserved {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--primary, #0043ff) 45%, var(--border, #e5e7eb));
}
body.dark .graph-live-status--reserved,
[data-theme="dark"] .graph-live-status--reserved { color: #93b4ff; }

/* Chip « période cible » (mois de diffusion) dans l'en-tête du popover contenu */
.gd-periode-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; vertical-align: middle;
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 28%, transparent);
}

/* V6.7.397 — Live timer card (tab « En cours ») ─────────────── */
.graph-live-card {
  cursor: pointer;
}
.graph-live-dur {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  animation: graphLivePulse 2s ease-in-out infinite;
}
#panelMontage .graph-live-dur {
  color: #0891b2;
  background: color-mix(in srgb, #0891b2 10%, transparent);
}
@keyframes graphLivePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
.graph-live-kind {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.graph-live-kind--montage {
  background: rgba(8,145,178,.14);
  color: #0891b2;
}
.graph-live-kind--graphisme {
  background: rgba(217,70,239,.14);
  color: #a21caf;
}
.graph-live-user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text, #111827);
}
.graph-live-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary, #0043ff);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  flex: 0 0 auto;
}
.graph-live-user-name {
  font-weight: 600;
}
body.dark .graph-tab-btn,
[data-theme="dark"] .graph-tab-btn { color: #9ca3af; }
body.dark .graph-tab-btn.active,
[data-theme="dark"] .graph-tab-btn.active { color: #fff; }
body.dark .graph-live-user,
[data-theme="dark"] .graph-live-user { color: #f3f4f6; }

.graph-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}
.graph-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  font-size: 12px;
  color: var(--text, #111827);
}
.graph-search-input:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.graph-expand-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
}
.graph-expand-label input { margin: 0; cursor: pointer; }
.graph-count-row {
  padding: 0 12px 10px;
}
.graph-count {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

.graph-list-card { padding: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; }
.graph-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.graph-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.graph-card:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 4%, var(--card, #fff));
}
.graph-card:active { transform: scale(0.99); }
.graph-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.graph-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #111827);
  line-height: 1.3;
  /* V6.7.409 — Pas de clamp : titre complet visible (retour Audrey).
     Word-break pour gérer les longs slugs sans casser la carte. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.graph-date-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 14%, transparent);
  color: var(--text-muted, #6b7280);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.graph-date-badge.is-overdue {
  background: color-mix(in srgb, #dc2626 16%, transparent);
  color: #b91c1c;
}
.graph-date-badge.is-today {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}
/* V6.7.332 — Phase 6 : wrapper badges en tête de card + badge « en graphisme depuis X jours » */
.graph-card-head-badges {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.graph-card-since {
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #6366f1 14%, transparent);
  color: #4338ca;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.graph-card-since.is-warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}
.graph-card-since.is-old {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  color: #b91c1c;
}
.graph-card-meta {
  display: flex;
  align-items: center;
  gap: 4px 6px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  min-width: 0;
  /* V6.7.409 — Autorise le wrap pour ne pas masquer le nom client.
     Avant : `white-space: nowrap; overflow: hidden; text-overflow: ellipsis`
     → client + projet truncés ensemble sur une ligne. */
  flex-wrap: wrap;
}
.graph-card-client {
  font-weight: 700;
  color: var(--primary, #0043ff);
  /* V6.7.409 — Pill style + flex-shrink:0 pour rester visible même sur viewport étroit */
  flex: 0 0 auto;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-card-project {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.graph-card-sep { color: var(--text-muted, #9ca3af); flex-shrink: 0; }
/* V6.7.409 — Override accent client pour Vue Montage (cyan-600) */
#panelMontage .graph-card-client {
  color: #0891b2;
  background: color-mix(in srgb, #0891b2 10%, transparent);
}
body.dark .graph-card-client,
[data-theme="dark"] .graph-card-client { color: #93c5fd; background: color-mix(in srgb, #3b82f6 22%, transparent); }
body.dark #panelMontage .graph-card-client,
[data-theme="dark"] #panelMontage .graph-card-client { color: #67e8f9; background: color-mix(in srgb, #0891b2 22%, transparent); }
.graph-card-states {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.graph-card-etat,
.graph-card-etat-graph {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: var(--subtle, #f3f4f6);
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}
.graph-card-etat-graph {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
}

/* V6.7.329 — Phase 5 : badges retours par type sur les cartes graphiste */
.graph-card-ret {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.graph-card-ret--int { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; } /* retour interne — ambre */
.graph-card-ret--cli { background: color-mix(in srgb, #dc2626 18%, transparent); color: #b91c1c; } /* retour client  — rouge */
.graph-card-ret--unk { background: color-mix(in srgb, #6b7280 18%, transparent); color: #374151; } /* à qualifier    — gris */

/* ── 2026-06-09 — Mise en attente (« en attente ») + refonte de la file ── */

/* Bouton « Mettre en attente » sur la carte (icône + confirm inline 2 clics) */
.graph-card-hold {
  margin-left: auto;             /* groupe hold + réserver + play à droite */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.graph-card-hold svg { flex: 0 0 auto; }
.graph-card-hold:hover { color: #b45309; border-color: #f59e0b; }
.graph-card-hold:active { transform: scale(0.96); }
.graph-card-hold .ghold-confirm { display: none; }
.graph-card-hold.is-confirm {
  color: #b45309;
  border-color: #f59e0b;
  border-style: dashed;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}
.graph-card-hold.is-confirm .ghold-default { display: none; }
.graph-card-hold.is-confirm .ghold-confirm { display: inline; }

/* Toggle « Afficher / masquer les contenus en attente » (count-row) */
.graph-held-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.graph-held-toggle.hidden { display: none; }
.graph-held-toggle svg { flex: 0 0 auto; }
.graph-held-toggle:hover { border-color: #f59e0b; color: #b45309; }
.graph-held-toggle.active {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: #f59e0b;
  color: #b45309;
}

/* Section « N en attente » (cartes en attente, distinctes) */
.graph-held-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px dashed color-mix(in srgb, #f59e0b 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 6%, transparent);
}
.graph-held-section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.graph-held-section-title svg { flex: 0 0 auto; }
.graph-card--held { opacity: 0.86; }
.graph-card-unhold {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid #10b981;
  border-radius: 999px;
  background: var(--card, #fff);
  color: #047857;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.graph-card-unhold svg { flex: 0 0 auto; }
.graph-card-unhold:hover { background: #10b981; color: #fff; }
.graph-card-unhold:active { transform: scale(0.96); }

/* Encart « Proposition — haut de la file » (quand rien de réservé/en cours) */
.graph-proposition {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
}
.graph-proposition-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #0043ff);
}
.graph-proposition-label svg { flex: 0 0 auto; }

/* Déroulant « Voir la file (N) » — fermé par défaut */
.graph-file-collapse { display: flex; flex-direction: column; gap: 6px; }
.graph-file-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--subtle, #f3f4f6);
  color: var(--text, #374151);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.graph-file-toggle:hover { border-color: var(--primary, #0043ff); }
.graph-file-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
}
.graph-file-collapse.is-open .graph-file-chevron { transform: rotate(180deg); }
.graph-file-body { display: flex; flex-direction: column; gap: 6px; }
.graph-file-body.hidden { display: none; }

/* Dark mode */
body.dark .graph-team-toggle { background: #1f2937; border-color: #374151; }
body.dark .graph-team-btn { color: #9ca3af; }
body.dark .graph-team-btn.active { color: #fff; }
body.dark .graph-search-input { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .graph-card { background: #1f2937; border-color: #374151; }
body.dark .graph-card-title { color: #f3f4f6; }
body.dark .graph-card-client { color: #f3f4f6; }
body.dark .graph-card-etat { background: #374151; color: #d1d5db; }
body.dark .graph-date-badge { background: #374151; color: #9ca3af; }
/* 2026-06-09 — Mise en attente / refonte file (dark) */
body.dark .graph-card-hold,
[data-theme="dark"] .graph-card-hold { background: #1f2937; border-color: #374151; color: #9ca3af; }
body.dark .graph-card-hold.is-confirm,
[data-theme="dark"] .graph-card-hold.is-confirm { color: #fbbf24; border-color: #f59e0b; }
body.dark .graph-held-toggle,
[data-theme="dark"] .graph-held-toggle { background: #1f2937; border-color: #374151; color: #9ca3af; }
body.dark .graph-held-toggle.active,
[data-theme="dark"] .graph-held-toggle.active { color: #fbbf24; border-color: #f59e0b; }
body.dark .graph-held-section-title,
[data-theme="dark"] .graph-held-section-title { color: #fbbf24; }
body.dark .graph-card-unhold,
[data-theme="dark"] .graph-card-unhold { background: #1f2937; border-color: #10b981; color: #34d399; }
body.dark .graph-file-toggle,
[data-theme="dark"] .graph-file-toggle { background: #1f2937; border-color: #374151; color: #d1d5db; }

/* V6.7.307 — Bandeau « En cours » sticky en haut sidebar Vue Graphiste */
.graph-running-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0043ff) 12%, var(--card, #fff)) 0%, var(--card, #fff) 100%);
  border: 1px solid var(--primary, #0043ff);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  position: sticky;
  top: 0;
  z-index: 5;
}
.graph-running-banner[hidden] { display: none; }
.graph-running-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.graph-running-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  animation: graphPulse 1.6s ease-in-out infinite;
}
@keyframes graphPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}
.graph-running-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary, #0043ff);
  flex: 0 0 auto;
}
.graph-running-timer {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.graph-running-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
  line-height: 1.3;
  margin-bottom: 2px;
  word-break: break-word;
}
.graph-running-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
  min-height: 14px;
}
.graph-running-acts {
  display: flex;
  gap: 6px;
}
.graph-running-btn {
  flex: 1 1 50%;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.graph-running-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
}
.graph-running-btn:active { transform: scale(0.97); }
.graph-running-btn--stop {
  background: color-mix(in srgb, #dc2626 8%, var(--card, #fff));
  border-color: color-mix(in srgb, #dc2626 30%, var(--border, #e5e7eb));
  color: #b91c1c;
}
.graph-running-btn--stop:hover {
  background: color-mix(in srgb, #dc2626 18%, var(--card, #fff));
  border-color: #dc2626;
}
.graph-running-btn--resume {
  background: color-mix(in srgb, #16a34a 12%, var(--card, #fff));
  border-color: color-mix(in srgb, #16a34a 40%, var(--border, #e5e7eb));
  color: #15803d;
}
.graph-running-btn--resume:hover {
  background: color-mix(in srgb, #16a34a 22%, var(--card, #fff));
  border-color: #16a34a;
}

/* État pausé : dégradé ambre + dot statique au lieu de pulsant */
.graph-running-banner.is-paused {
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--card, #fff)) 0%, var(--card, #fff) 100%);
  border-color: #f59e0b;
  box-shadow: 0 2px 8px color-mix(in srgb, #f59e0b 14%, transparent);
}
.graph-running-banner.is-paused .graph-running-dot {
  background: #f59e0b;
  animation: none;
}
.graph-running-banner.is-paused .graph-running-label {
  color: #b45309;
}

/* Bouton ▶ Démarrer dans les cartes */
.graph-card-play {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--primary, #0043ff);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  flex: 0 0 auto;
}
.graph-card-play:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.graph-card-play:active { transform: scale(0.96); }
.graph-card.is-running {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, var(--card, #fff));
}
.graph-card.is-running .graph-card-play {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}

/* Dark mode bandeau */
body.dark .graph-running-banner,
[data-theme="dark"] .graph-running-banner {
  background: linear-gradient(135deg, #1e293b 0%, #111827 100%);
}
body.dark .graph-running-title,
[data-theme="dark"] .graph-running-title { color: #f3f4f6; }
body.dark .graph-running-timer,
[data-theme="dark"] .graph-running-timer { color: #f3f4f6; }
body.dark .graph-running-btn,
[data-theme="dark"] .graph-running-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .graph-card-play,
[data-theme="dark"] .graph-card-play { background: #1f2937; border-color: #374151; }

/* ── Vue Montage — accent couleur (V6.7.393) ────────────────── */
/* Réutilise toutes les classes .graph-* ; seul l'accent diffère */
#panelMontage .graph-card-play {
  color: #0891b2; /* cyan-600 */
}
#panelMontage .graph-card-play:hover,
#panelMontage .graph-card.is-running .graph-card-play {
  background: #0891b2;
  border-color: #0891b2;
  color: #fff;
}
#panelMontage .graph-card.is-running {
  border-color: #0891b2;
  background: color-mix(in srgb, #0891b2 5%, var(--card, #fff));
}
#panelMontage .graph-running-banner {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-color: #a5f3fc;
}
#panelMontage .graph-running-dot {
  background: #0891b2;
  box-shadow: 0 0 0 4px rgba(8,145,178,.18);
}
#panelMontage .graph-running-btn {
  color: #0891b2;
  border-color: rgba(8,145,178,.3);
}
#panelMontage .graph-running-btn:hover { background: rgba(8,145,178,.08); border-color: #0891b2; }
#panelMontage .graph-running-btn--stop { color: #dc2626; border-color: rgba(220,38,38,.3); }
#panelMontage .graph-running-btn--stop:hover { background: rgba(220,38,38,.08); border-color: #dc2626; }
#panelMontage .graph-running-btn--resume { color: #16a34a; border-color: rgba(22,163,74,.3); }
#panelMontage .graph-running-btn--resume:hover { background: rgba(22,163,74,.08); border-color: #16a34a; }
#panelMontage .graph-running-banner.is-paused { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: #fed7aa; }
#panelMontage .graph-running-banner.is-paused .graph-running-dot { background: #f97316; box-shadow: none; animation: none; }
#panelMontage .graph-running-banner.is-paused .graph-running-label { color: #c2410c; }
/* Dark mode overrides montage */
body.dark #panelMontage .graph-running-banner,
[data-theme="dark"] #panelMontage .graph-running-banner {
  background: linear-gradient(135deg, #164e63 0%, #0e3a4a 100%);
  border-color: #164e63;
}

/* ── Gestion de Projet — sélecteur ─────────────────────────── */
.project-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.project-select:focus { outline: none; border-color: var(--accent); }
#projectSelectorWrap { width: 100%; box-sizing: border-box; position: relative; }

/* ── Sélecteur projet/mission searchable (V6.6) ───────────────── */
.project-search-select {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.project-search-select .psr-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease;
}
.project-search-select .psr-trigger:hover { border-color: var(--accent); }
.project-search-select.open .psr-trigger { border-color: var(--accent); }
.psr-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.psr-trigger-label.psr-trigger-placeholder { color: var(--muted); }
.psr-trigger-caret {
  font-size: 11px;
  color: var(--muted);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.project-search-select.open .psr-trigger-caret { transform: rotate(180deg); }

.psr-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(420px, calc(100vh - 120px));
}
/* La règle UA [hidden]{display:none} est masquée par .psr-panel{display:flex}
   à cause de la spécificité. Force display:none quand l'attribut hidden est posé. */
.psr-panel[hidden] { display: none; }

.psr-search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hover);
}
.psr-search-icon {
  color: var(--muted);
  font-size: 13px;
  padding-left: 4px;
  flex: 0 0 auto;
}
.psr-search {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 6px 28px 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.psr-search:focus { border-color: var(--accent); }
.psr-search::-webkit-search-cancel-button { display: none; }
.psr-search-clear {
  position: absolute;
  right: 14px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
}
.psr-search-clear:hover { color: var(--text); background: var(--border); }

.psr-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 4px 0;
}
.psr-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  font-weight: 600;
}
.psr-row {
  padding: 6px 12px 6px 24px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  user-select: none;
}
.psr-row-empty {
  padding-left: 12px;
  color: var(--muted);
  font-style: italic;
}
.psr-row:hover { background: var(--hover); }
.psr-row.selected { background: var(--hover); font-weight: 600; }
.psr-row-icon {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
}
.psr-row-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* V6.7.432 — Projets Terminés : grisés + badge à droite */
.psr-row-done .psr-row-title { color: var(--muted, #6b7280); }
.psr-row-done .psr-row-icon  { opacity: 0.55; }
.psr-row-done-badge {
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  color: var(--success, #10b981);
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 6px;
}

/* V6.7.436 — Toggle « Inclure les terminés » dans le panel de sélection projet */
.psr-toggle-done {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 4px;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.psr-toggle-done:hover { color: var(--text, #111827); }
.psr-toggle-done input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.psr-toggle-done-count {
  margin-left: auto;
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  color: var(--success, #10b981);
  font-weight: 600;
}
.psr-noresults {
  padding: 16px 12px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}

.project-info-box {
  margin-top: 8px;
  padding: 10px;
  background: var(--hover);
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-info-box.hidden { display: none; }
.proj-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* V6.7.125 — Align icône Lucide inline avec le label dans les lignes du bloc projet */
.proj-info-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.proj-info-row > span:first-child svg { display: block; color: var(--muted); }
.proj-info-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.proj-info-action-btn svg { display: block; }
.proj-type-edit-icon, .proj-mois-edit-icon, .ac-edit-btn { display: inline-flex; align-items: center; }
.proj-type-edit-icon svg, .proj-mois-edit-icon svg, .ac-edit-btn svg { display: block; }
.proj-info-row span { color: var(--muted); flex-shrink: 0; padding-top: 2px; }
.proj-info-row strong { text-align: right; }

/* V2 (2026-04-28b) — Ligne 🚦 État + bouton "Marquer terminé / Rouvrir" */
.proj-etat-row { align-items: center; }
.proj-etat-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.proj-etat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.proj-etat-badge.proj-etat-todo {
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 30%, var(--border));
}
.proj-etat-badge.proj-etat-running {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.proj-etat-badge.proj-etat-done {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}
.proj-etat-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.proj-etat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.proj-etat-btn-close {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: color-mix(in srgb, var(--success) 70%, var(--text));
}
.proj-etat-btn-close:hover {
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  border-color: var(--success);
  color: var(--success);
}
.proj-etat-btn-reopen {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}
.proj-etat-btn-reopen:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}

/* V2 (2026-04-28b) — Popover de confirmation État (Terminé / Rouvrir) */
.etat-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  animation: etat-pop-in 0.15s ease-out;
}
@keyframes etat-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.etat-pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--subtle));
}
.etat-pop-title {
  flex: 1;
  font-weight: 700;
  font-size: 13.5px;
}
.etat-pop-close {
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}
.etat-pop-close:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }
.etat-pop-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.etat-pop-clean {
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: color-mix(in srgb, var(--success) 65%, var(--text));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.etat-pop-warn {
  color: var(--text);
  line-height: 1.45;
}
.etat-pop-section {
  border-left: 3px solid color-mix(in srgb, var(--warning, #f59e0b) 70%, transparent);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 6%, var(--surface));
  border-radius: 4px;
}
.etat-pop-section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--warning, #f59e0b) 75%, var(--text));
  margin-bottom: 4px;
}
.etat-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
}
.etat-pop-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.etat-pop-icon { font-size: 12px; opacity: 0.8; }
.etat-pop-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.35;
}
.etat-pop-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--subtle);
}
.etat-pop-cancel,
.etat-pop-confirm {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.etat-pop-cancel:hover { background: color-mix(in srgb, var(--muted) 8%, var(--surface)); }
.etat-pop-confirm-done {
  background: var(--success, #16a34a);
  color: #fff;
  border-color: var(--success, #16a34a);
}
.etat-pop-confirm-done:hover {
  background: color-mix(in srgb, var(--success, #16a34a) 90%, black);
}
.etat-pop-confirm-reopen {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.etat-pop-confirm-reopen:hover {
  background: color-mix(in srgb, var(--accent) 90%, black);
}
.etat-pop-confirm:disabled,
.etat-pop-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ─── V6.7.27 (2026-04-30k) — Ligne 🏷 Type de projet (bouton-badge) ───
   Refonte : harmonisation visuelle avec « 📅 Mois ». Bouton transparent qui
   s'aligne sur le fond `--hover` de la fiche, badge coloré selon le type
   ([data-type]), pencil icon ✎ à droite, click → popover single-select.
   Conditionne l'affichage de la timeline d'étapes (Activation only). */
.proj-type-row { align-items: center; }
.proj-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
  max-width: 70%;
}
.proj-type-btn:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  transform: translateY(-1px);
}
.proj-type-btn-empty { color: var(--muted); font-weight: 500; font-style: italic; }
.proj-type-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.proj-type-empty-label { color: var(--muted); }
.proj-type-edit-icon { opacity: 0.55; font-size: 11px; }
.proj-type-btn:hover .proj-type-edit-icon { opacity: 1; color: var(--accent); }

/* Badge type — palette par valeur (cohérence visuelle, sémantique métier) */
.proj-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--type-c, var(--accent)) 18%, var(--card));
  color: color-mix(in srgb, var(--type-c, var(--accent)) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--type-c, var(--accent)) 40%, var(--border));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Palette par type — partagée par .proj-type-badge et .type-pop-cell-badge */
[data-type="Activation"]    { --type-c: #F97316; } /* orange chaud — événement ponctuel */
[data-type="Fil Rouge"]     { --type-c: #DC2626; } /* rouge — référence au fil rouge */
[data-type="Autre"]         { --type-c: #6366F1; } /* indigo — neutre divers */
[data-type="Pas un projet"] { --type-c: #9CA3AF; } /* gris — exclusion */

/* Popover édition Type — single-select, calqué sur .mois-pop */
.type-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  animation: etat-pop-in 0.15s ease-out;
}
.type-pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--subtle));
}
.type-pop-title {
  flex: 1;
  font-weight: 700;
  font-size: 13.5px;
}
.type-pop-close {
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.type-pop-close:hover {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--text);
}
.type-pop-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.type-pop-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.type-pop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.type-pop-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  text-align: left;
  width: 100%;
}
.type-pop-cell:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--type-c, var(--accent)) 45%, var(--border));
  background: color-mix(in srgb, var(--type-c, var(--accent)) 6%, var(--card));
  transform: translateY(-1px);
}
.type-pop-cell-active {
  border-color: color-mix(in srgb, var(--type-c, var(--accent)) 60%, var(--border));
  background: color-mix(in srgb, var(--type-c, var(--accent)) 12%, var(--card));
}
.type-pop-cell:disabled { opacity: 0.55; cursor: not-allowed; }
.type-pop-cell-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--type-c, var(--accent)) 18%, var(--card));
  color: color-mix(in srgb, var(--type-c, var(--accent)) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--type-c, var(--accent)) 40%, var(--border));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.type-pop-cell-check {
  font-size: 13px;
  color: color-mix(in srgb, var(--type-c, var(--success)) 70%, var(--text));
  font-weight: 700;
}
.type-pop-clear {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.12s, color 0.12s;
}
.type-pop-clear:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 8%, var(--card));
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 25%, var(--border));
}
.type-pop-clear:disabled { opacity: 0.55; cursor: not-allowed; }

/* ─── V6.7.27 — Footer du bloc info projet (bouton d'action principal) ───
   Le bouton « Marquer terminé / Rouvrir » est sorti de la rangée État pour
   gagner en cohérence visuelle (toutes les rangées sont label · badge). */
.proj-info-footer {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
  display: flex;
  justify-content: stretch;
}
/* 2026-06-11 — Bloc Case study explicite (GP, activations) */
.proj-case-study-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px 0; padding: 8px 10px; border-radius: 9px;
  border: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent);
  background: color-mix(in srgb, var(--muted) 5%, transparent);
}
.proj-case-study-row.is-on {
  border-style: solid; border-color: color-mix(in srgb, #f5b301 55%, transparent);
  background: color-mix(in srgb, #f5b301 12%, transparent);
}
.proj-cs-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.proj-cs-state { color: var(--muted); font-size: 11.5px; }
.proj-case-study-row.is-on .proj-cs-state { color: #b07d00; font-weight: 600; }
.proj-cs-toggle {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, #f5b301 55%, transparent);
  background: color-mix(in srgb, #f5b301 14%, transparent); color: #b07d00;
}
.proj-cs-toggle.is-on { background: var(--card); border-color: var(--border); color: var(--muted); }
.proj-cs-toggle:hover { filter: brightness(0.97); }
/* 2026-06-17 (PJ2) — Bloc Case study dans sa card dédiée (#projectCaseStudyCard) */
.proj-cs-card-body { padding: 4px 2px 2px; display: flex; flex-direction: column; gap: 9px; }
.proj-cs-state-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proj-cs-state-line .proj-cs-state { font-size: 12px; }
.proj-cs-state-line.is-on .proj-cs-state { color: #b07d00; font-weight: 600; }
.proj-cs-state--off { color: var(--muted); }
.proj-cs-prepare-btn { width: 100%; text-align: center; }
.proj-cs-loading { color: var(--muted); font-size: 12px; }
.proj-cs-hint { font-size: 11px; color: var(--muted); font-style: italic; }
/* 2026-06-17 — Card Case study « à préparer » : effet shiny pour attirer l'œil
   (halo doré pulsé + balayage de lumière périodique). */
#projectCaseStudyCard.proj-cs-card--shiny {
  position: relative; overflow: hidden;
  border-color: color-mix(in srgb, #f5b301 55%, var(--border));
  animation: _csGlow 2.6s ease-in-out infinite;
}
#projectCaseStudyCard.proj-cs-card--shiny::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: _csSheen 3.4s ease-in-out infinite;
}
@keyframes _csGlow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #f5b301 28%, transparent), 0 3px 14px color-mix(in srgb, #f5b301 18%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, #f5b301 45%, transparent), 0 6px 22px color-mix(in srgb, #f5b301 40%, transparent); }
}
@keyframes _csSheen {
  0%       { transform: translateX(-130%); }
  55%, 100%{ transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  #projectCaseStudyCard.proj-cs-card--shiny { animation: none; }
  #projectCaseStudyCard.proj-cs-card--shiny::after { animation: none; display: none; }
}
/* 2026-06-17 — ★ noire : mini box légère informative (case study écartée). */
.proj-cs-skip-box {
  display: flex; align-items: center; gap: 7px;
  padding: 2px; font-size: 12px; color: var(--muted);
}
.proj-cs-skip-star { color: #4b5563; font-size: 14px; line-height: 1; }
body.dark .proj-cs-skip-star, [data-theme="dark"] .proj-cs-skip-star { color: #9ca3af; }
.proj-cs-skip-msg { font-style: italic; }
.proj-info-action-btn {
  flex: 1;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s, box-shadow 0.12s;
  text-align: center;
}
.proj-info-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.proj-info-action-btn--close {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  color: color-mix(in srgb, var(--success) 75%, var(--text));
  background: color-mix(in srgb, var(--success) 6%, var(--card));
}
.proj-info-action-btn--close:hover:not(:disabled) {
  background: color-mix(in srgb, var(--success) 14%, var(--card));
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
}
.proj-info-action-btn--reopen {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.proj-info-action-btn--reopen:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* ─── V3a (2026-04-28d) — Ligne 📅 Mois (multi_select) + popover + badges ─── */
/* V6.6.2 — bouton transparent (s'aligne avec le fond `--hover` de la fiche)
   et badges colorés par mois via [data-month] (palette saisonnière). */
.proj-mois-row { align-items: flex-start; }
.proj-mois-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
  /* 2026-06-02 — Multi-mois : le bouton prend la largeur restante (après le
     label) et ses chips passent à la ligne (avant : max-width:70% + chips en
     inline-flex span non-shrinkable → débordement coupé/chevauchement label). */
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.proj-mois-btn:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  transform: translateY(-1px);
}
.proj-mois-btn-empty { color: var(--muted); font-weight: 500; font-style: italic; }
/* Sélecteur descendant (.proj-info-row .proj-mois-chips, spécificité 0,2,0) pour
   BATTRE `.proj-info-row span { flex-shrink: 0 }` (0,1,1) — sinon le conteneur
   ne rétrécit pas et les badges débordent sur le label au lieu de wrapper. */
.proj-info-row .proj-mois-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  flex-shrink: 1;
  min-width: 0;
  padding-top: 0;
}
.proj-mois-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  /* Palette : utilise --mois-c défini par [data-month] ; fallback --accent */
  background: color-mix(in srgb, var(--mois-c, var(--accent)) 18%, var(--card));
  color: color-mix(in srgb, var(--mois-c, var(--accent)) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--mois-c, var(--accent)) 40%, var(--border));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Palette saisonnière des 12 mois — partagée par .proj-mois-badge,
   .ptv-mois-badge et .mois-pop-cell[data-mois] (popover édition). */
[data-month="Janvier"],   [data-mois="Janvier"]   { --mois-c: #4F8EF7; } /* bleu glace */
[data-month="Février"],   [data-mois="Février"]   { --mois-c: #7C5CFF; } /* violet froid */
[data-month="Mars"],      [data-mois="Mars"]      { --mois-c: #14B8A6; } /* teal printemps */
[data-month="Avril"],     [data-mois="Avril"]     { --mois-c: #22C55E; } /* vert frais */
[data-month="Mai"],       [data-mois="Mai"]       { --mois-c: #84CC16; } /* lime */
[data-month="Juin"],      [data-mois="Juin"]      { --mois-c: #EAB308; } /* jaune solstice */
[data-month="Juillet"],   [data-mois="Juillet"]   { --mois-c: #F59E0B; } /* ambre été */
[data-month="Août"],      [data-mois="Août"]      { --mois-c: #F97316; } /* orange chaud */
[data-month="Septembre"], [data-mois="Septembre"] { --mois-c: #DC2626; } /* rouge rentrée */
[data-month="Octobre"],   [data-mois="Octobre"]   { --mois-c: #C2410C; } /* terre brûlée */
[data-month="Novembre"],  [data-mois="Novembre"]  { --mois-c: #92400E; } /* brun feuilles */
[data-month="Décembre"],  [data-mois="Décembre"]  { --mois-c: #6366F1; } /* indigo nuit */
.proj-mois-empty-label { color: var(--muted); }
.proj-mois-edit-icon { opacity: 0.55; font-size: 11px; }
.proj-mois-btn:hover .proj-mois-edit-icon { opacity: 1; color: var(--accent); }

/* Popover édition Mois */
.mois-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  animation: etat-pop-in 0.15s ease-out;
}
.mois-pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--subtle));
}
.mois-pop-title {
  flex: 1;
  font-weight: 700;
  font-size: 13.5px;
}
.mois-pop-close {
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}
.mois-pop-close:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }
.mois-pop-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mois-pop-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
.mois-pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mois-pop-cell {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  text-align: center;
}
.mois-pop-cell:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}
.mois-pop-cell-active {
  /* V6.6.2 — couleur du mois actif via --mois-c (data-mois) */
  background: color-mix(in srgb, var(--mois-c, var(--accent)) 18%, var(--surface));
  border-color: var(--mois-c, var(--accent));
  color: color-mix(in srgb, var(--mois-c, var(--accent)) 80%, var(--text));
}
.mois-pop-cell-loading { opacity: 0.6; }
.mois-pop-cell:disabled { cursor: not-allowed; opacity: 0.55; }
.mois-pop-clear {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  align-self: flex-start;
}
.mois-pop-clear:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error, #ef4444) 8%, var(--surface));
  color: var(--error, #ef4444);
  border-color: color-mix(in srgb, var(--error, #ef4444) 35%, var(--border));
}
.mois-pop-clear:disabled { opacity: 0.55; cursor: not-allowed; }
/* Footer Annuler / Enregistrer (multi_select V3a) */
.mois-pop-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--subtle);
}
.mois-pop-cancel,
.mois-pop-confirm {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.mois-pop-cancel:hover:not(:disabled) { background: color-mix(in srgb, var(--muted) 8%, var(--surface)); }
.mois-pop-confirm {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mois-pop-confirm:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 90%, black);
}
.mois-pop-confirm:disabled,
.mois-pop-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Badges Mois côté Suivi de projets (liste + Kanban) — V6.6.2 palette par mois */
.ptv-mois-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mois-c, var(--accent)) 14%, var(--surface));
  color: color-mix(in srgb, var(--mois-c, var(--accent)) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--mois-c, var(--accent)) 32%, var(--border));
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ptv-kb-mois {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Amélio 6 (2026-04-27r) — Ligne 📅 Sortie */
.proj-sortie-row strong { font-variant-numeric: tabular-nums; }
.proj-sortie-pending { color: var(--muted); font-weight: 400; }
.proj-sortie-empty   { color: var(--muted); font-weight: 400; }
.proj-sortie-real    { color: var(--success); }
.proj-sortie-forecast{ color: var(--text); font-style: italic; }
.proj-sortie-icon    {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-right: 2px;
  opacity: .7;
}

/* ── Accès Client — mode lecture */
.proj-ac-row { align-items: flex-start; }
.ac-read-wrap { display: flex; align-items: flex-start; gap: 6px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.ac-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ac-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  background: rgba(0,67,255,.08);
  color: var(--primary);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ac-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  border-radius: 4px;
  transition: color .15s;
  flex-shrink: 0;
}
.ac-edit-btn:hover { color: var(--primary); }

/* ── Accès Client — mode édition */
.ac-edit-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ac-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}
.ac-empty { font-size: 11px; color: var(--muted); font-style: italic; }
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(0,67,255,.1);
  color: var(--primary);
  border-radius: 10px;
  padding: 2px 6px 2px 8px;
  white-space: nowrap;
}
.ac-chip-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: .6;
  transition: opacity .1s;
}
.ac-chip-rm:hover { opacity: 1; }
.ac-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ac-email-input {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 0;
  transition: border-color .15s;
}
.ac-email-input:focus { border-color: var(--primary); }
.ac-add-btn {
  font-size: 11px;
  padding: 5px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ac-actions {
  display: flex;
  gap: 6px;
}
.ac-save-btn, .ac-cancel-btn { font-size: 11px; padding: 5px 12px; }

/* ── Task type buttons ──────────────────────────────────────── */
.task-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.task-type-btn {
  padding: 10px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
  letter-spacing: 0.7px;
  text-align: center;
  width: 100%;
}
.task-type-btn:hover {
  background: #0043ff;
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.task-type-btn:active {
  transform: translateY(0);
  filter: brightness(0.9);
}

/* Dans le quick popup : 3 colonnes (espace plus compact) */
.qc-type-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
/* 2026-06-05 — Sous-panneau PROD (Tournage/Dérush · Retouches) : 2 colonnes larges. */
.qc-type-grid--sub { grid-template-columns: 1fr 1fr; }
.qc-type-grid--sub .task-type-btn { padding: 16px 8px; font-size: 12px; letter-spacing: .3px; }
.qc-subback {
  margin-top: 10px; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.82rem; font-family: inherit; padding: 4px;
}
.qc-subback:hover { color: var(--text); }

/* ── Réel / Prévisionnel radio ──────────────────────────────── */
.radio-group {
  display: flex;
  gap: 14px;
  padding: 6px 0;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: normal;
}

/* ── Form error ─────────────────────────────────────────────── */
.form-error {
  color: var(--error);
  font-size: 12px;
  margin-top: -6px;
}
.form-error.hidden { display: none; }

/* ── Quick create popup ─────────────────────────────────────── */
.quick-create-popup {
  position: fixed;
  z-index: 1000;
  background: var(--card-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  min-width: 280px;
  max-width: 340px;
  padding: 0;
  overflow: visible; /* dropdown doit pouvoir déborder en bas */
}
.quick-create-popup.hidden { display: none; }
.qc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  cursor: grab;
  user-select: none;
}
.qc-header:active { cursor: grabbing; }
#qcBody { padding: 10px 14px; }

.qc-time-row {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: default; /* le header est draggable mais les inputs sont cliquables */
}
.qc-time-input {
  width: 80px;
  padding: 3px 6px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: text;
  text-align: center;
  /* Empêche le drag du header de se déclencher sur le click de l'input */
  pointer-events: auto;
}
.qc-time-input:focus {
  outline: none;
  border-color: var(--accent, var(--primary));
}
.qc-time-sep {
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}
.qc-field-group { margin-top: 10px; }
.qc-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.qc-title-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 2px;
}
.qc-title-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Dropdown searchable (non-CdP quick-create) ──────────────── */
.qc-sd-wrap {
  position: relative;
  width: 100%;
}
.qc-sd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font-size: .88rem;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .15s;
}
.qc-sd-trigger:hover { border-color: var(--accent); }
.qc-sd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-sd-arrow  { font-size: .75rem; color: var(--muted); margin-left: 6px; flex-shrink: 0; }

.qc-sd-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  max-height: 340px;
}
.qc-sd-panel.hidden { display: none; }

.qc-sd-filter {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-size: .85rem;
  color: var(--text);
  box-sizing: border-box;
  outline: none;
  flex-shrink: 0;
}
.qc-sd-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.qc-sd-group {
  padding: 5px 10px 3px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.qc-sd-group:first-child { border-top: none; margin-top: 0; }
.qc-sd-item {
  padding: 6px 12px;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s;
}
.qc-sd-item:hover,
.qc-sd-item.selected { background: var(--hover); }
.qc-sd-none   { font-style: italic; color: var(--muted); padding: 6px 12px; }
.qc-sd-mission { padding-left: 14px; }
.qc-sd-project { padding-left: 24px; font-size: .82rem; color: var(--text-muted); }
.qc-sd-empty, .qc-sd-loading {
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.qc-sd-loadall {
  padding: 7px 12px;
  font-size: .82rem;
  color: var(--primary);
  cursor: pointer;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  font-style: italic;
  transition: background .1s;
}
.qc-sd-loadall:hover { background: var(--hover); }
.qc-type-grid { margin-top: 4px; }
.qc-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
}

/* ── Calendar create preview ────────────────────────────────── */
.cal-create-preview {
  position: absolute;
  left: 1px;
  right: 38px;
  background: var(--accent, #3b82f6);
  opacity: 0.2;
  border-radius: 6px;
  pointer-events: none;
  z-index: 50;
}

/* ── Right buffer on cal-grid ───────────────────────────────── */
.cal-grid {
  cursor: crosshair;
}
.cal-grid::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--border);
  font-size: 18px;
  pointer-events: none;
  opacity: 0.4;
}

/* ── accent variable fallback ───────────────────────────────── */
:root {
  --accent:  #1a1a1a;
  --hover:   var(--subtle);
  --card-bg: var(--card);
  --tf-blue: #0043ff;   /* bleu Tire-Fesses */
  /* Aliases utilisés par certaines règles ajoutées au fil de l'eau
     (Phase 3+/Phase 4b). On les pointe sur les vraies couleurs définies
     en haut du fichier pour éviter les fonds transparents. */
  --surface:   var(--card);     /* surface "carte" (par défaut blanc) */
  --surface-2: var(--subtle);   /* surface 2 (gris très clair) */
  --surface-3: var(--bg);       /* surface 3 (gris du body) */
}
[data-theme="dark"] {
  --surface:   var(--card);
  --surface-2: var(--subtle);
  --surface-3: var(--bg);
}
[data-theme="dark"] { --accent: #f0f0f0; }

/* ── Bloc calendrier sélectionné (popover ouvert) ───────────── */
.cal-block--selected {
  outline: 3px solid #111 !important;
  outline-offset: 1px;
  z-index: 200 !important;
}
[data-theme="dark"] .cal-block--selected { outline-color: #fff !important; }

/* ── Bleu TF appliqué directement dans les règles d'origine ── */

/* ── Spinner chargement calendrier ──────────────────────────── */
@keyframes tf-spin {
  to { transform: rotate(360deg); }
}
.cal-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: #0043ff;
  border-radius: 50%;
  animation: tf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Vue toggle Jour / Semaine ──────────────────────────── */
.cal-view-toggle {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 4px;
}
.cal-view-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card);
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cal-view-btn:first-child { border-right: 1.5px solid var(--border); }
.cal-view-btn.active {
  background: #0043ff;
  color: #fff;
}
/* V6.7.123 — Hover unifié avec les autres btn-icon (tokens --subtle / --primary)
   pour que le rendu dark mode soit cohérent (avant : #eef1ff hardcodé). */
.cal-view-btn:not(.active):hover {
  background: var(--subtle);
  color: var(--primary);
}

/* ── Groupe Zoom 🔍 ─────────────────────────────────────── */
.cal-zoom-group {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  margin-left: 4px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 2px;
  background: var(--card);
}
.cal-zoom-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  transition: background .1s, color .1s;
}
.cal-zoom-btn.active {
  background: #0043ff;
  color: #fff;
}
.cal-zoom-btn:not(.active):hover {
  background: #eef1ff;
  color: #0043ff;
}

/* ── En-têtes jours (vue semaine) ───────────────────────── */
.cal-week-headers {
  display: flex;
  padding-left: 48px; /* aligne avec cal-time-axis */
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
/* display:flex écrase l'attribut hidden du navigateur → on force none */
.cal-week-headers[hidden] { display: none; }
.cal-week-day-header {
  flex: 1;
  text-align: center;
  padding: 5px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.cal-week-day-header:last-child { border-right: none; }
.cal-week-day-header.today { color: #0043ff; }
.cal-wdh-num {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}
.cal-week-day-header.today .cal-wdh-num {
  background: #0043ff;
  color: #fff;
}

/* ── Grille semaine ─────────────────────────────────────── */
.cal-grid.week-mode {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  /* V6.7.264 — `min-height` calculée par JS dans buildHourRows (selon zoom +
     plage horaire courante). Fallback CSS 768px = 12h × 64px (mode 8h–19h,
     zoom medium) si jamais le JS n'a pas encore tourné. */
  min-height: 768px;
}
.cal-hour-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.cal-day-col {
  flex: 1;
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--border);
  z-index: 1;
}
.cal-day-col:last-child { border-right: none; }
.cal-day-col.today { background: rgba(0,67,255,0.03); }

/* ── 2026-06-17 — Mode défilement CONTINU (prototype, vue semaine To Do) ──
   Bande de jours scrollable horizontalement (overflow-x natif = fluidité
   trackpad). Axe heures figé (sibling hors grille). Lignes d'heures via
   gradient (le #calHourBg absolu ne suivrait pas le scroll). */
.cal-grid.week-mode.continuous {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  /* 2026-06-18 — Magnétisme : on ne s'arrête jamais au milieu d'une colonne. */
  scroll-snap-type: x mandatory;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0, var(--border) 1px,
    transparent 1px, transparent var(--cal-hour-h, 64px)
  );
  background-position: 0 0;
}
.cal-grid.week-mode.continuous #calHourBg { display: none; }
.cal-grid.week-mode.continuous .cal-day-col {
  flex: 0 0 var(--cal-col-w, 130px);
  width: var(--cal-col-w, 130px);
  scroll-snap-align: start;    /* magnétisme : bord gauche de colonne */
  /* 2026-06-23 — FIX désync en-têtes : on a RETIRÉ `display: block !important`.
     Il gardait les colonnes week-end visibles côté grille (7 col/sem) alors que
     les en-têtes (qui suivent `.show-weekend`) les masquaient (5 col/sem) → décalage
     + en-têtes manquants. La grille suit désormais `.show-weekend` exactement comme
     les en-têtes (symétrique). Diagnostiqué via Claude-in-Chrome : 49 colonnes vs
     35 en-têtes avec hideWeekend=true. */
}
/* En-têtes synchronisés : spacer 44px (axe) + strip translaté en JS */
.cal-week-headers.continuous { padding-left: 0; overflow: hidden; }
.cal-week-headers.continuous .cal-wh-axis { flex: 0 0 44px; }
.cal-week-headers.continuous .cal-wh-clip { flex: 1; overflow: hidden; }
.cal-week-headers.continuous .cal-wh-strip { display: flex; will-change: transform; }
.cal-week-headers.continuous .cal-week-day-header {
  flex: 0 0 var(--cal-col-w, 130px);
  width: var(--cal-col-w, 130px);
}
.cal-wdh-month { color: var(--primary, #0043ff); font-weight: 700; }
/* Bande « jour entier » en mode continu : strip translaté aligné sur les colonnes */
.cal-allday-chips.week-mode.continuous { display: block; overflow: hidden; }
.cal-allday-chips.continuous .cal-ad-clip { overflow: hidden; }
.cal-allday-chips.continuous .cal-ad-strip { display: flex; will-change: transform; }
.cal-allday-chips.continuous .cal-allday-col {
  flex: 0 0 var(--cal-col-w, 130px);
  width: var(--cal-col-w, 130px);
  display: flex !important;   /* jamais masqué (week-end) en continu */
}
.cal-cont-toggle { font-size: 15px; line-height: 1; font-weight: 700; }
.cal-cont-toggle.active { color: #fff; background: var(--primary, #0043ff); }

/* V6.7.55 — Suppression de l'expansion du bloc au survol en vue semaine.
   Avant : le bloc s'élargissait/agrandissait pour afficher le contenu
   tronqué + le tooltip blanc apparaissait → effet « doublon » signalé
   par l'utilisateur. Maintenant : seul le tooltip blanc gère le survol
   (plus complet : nom client, typologie, R/P en plus). Le bloc reste
   à sa taille initiale. Les règles ci-dessous sont conservées en
   commentaire pour référence si on veut ré-introduire un mode hybride.
   .cal-day-col .cal-block:hover {
     left: 1px !important; right: 6px !important; width: auto !important;
     height: auto !important; min-height: var(--block-h, 28px);
   }
   .cal-day-col .cal-block:hover .cal-block-inner {
     height: auto; min-height: calc(var(--block-h, 28px) - 4px);
     overflow: visible; padding-bottom: 6px;
   }
   .cal-day-col .cal-block:hover .cal-block-label,
   .cal-day-col .cal-block:hover .cal-block-task {
     white-space: normal; overflow: visible; text-overflow: clip;
   }
*/
.cal-week-col-spinner {
  display: flex;
  justify-content: center;
  padding-top: 40px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

/* ── Modale SAV — raccourcis clavier ────────────────────────── */
.sav-modal { max-width: 480px; }
.sav-body  { padding: 16px 20px; }
.sav-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sav-table tr          { border-bottom: 1px solid var(--border); }
.sav-table tr:last-child { border-bottom: none; }
.sav-table td {
  padding: 9px 6px;
  vertical-align: middle;
}
.sav-table td:first-child { white-space: nowrap; width: 220px; }
kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--subtle);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 1px 0 var(--border);
}

/* ══════════════════════════════════════════════════════════
   AVATAR PROFIL
   ══════════════════════════════════════════════════════════ */
.user-avatar-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.user-avatar:hover { opacity: .85; }
.user-avatar-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999;
  padding: 4px 0;
}
/* V6.7.246 — Sélecteurs étendus à <a class="avatar-menu-link"> pour les
   entrées externes (ex: lien Malibou). Look identique aux <button>. */
.user-avatar-menu button,
.user-avatar-menu .avatar-menu-link {
  /* V6.7.113 — flex pour aligner l'icône Lucide avec le label */
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 14px;
  font-size: 13px; text-align: left;
  background: none; border: none;
  cursor: pointer; color: var(--text);
  text-decoration: none; /* pour les <a> */
  box-sizing: border-box;
}
.user-avatar-menu button .menu-icon,
.user-avatar-menu .avatar-menu-link .menu-icon {
  display: inline-flex; align-items: center; line-height: 1;
  color: var(--muted); flex-shrink: 0;
}
.user-avatar-menu button:hover .menu-icon,
.user-avatar-menu .avatar-menu-link:hover .menu-icon { color: var(--text); }
.user-avatar-menu .logout-btn .menu-icon { color: var(--error); }
.user-avatar-menu button:hover,
.user-avatar-menu .avatar-menu-link:hover { background: var(--hover); }
.user-avatar-menu button.hidden { display: none; }
.user-avatar-menu hr { margin: 4px 0; border: none; border-top: 1px solid var(--border); }
.user-avatar-menu .logout-btn { color: var(--error); }
.user-avatar-menu .logout-btn:hover { background: #fff0f0; }

/* ══════════════════════════════════════════════════════════
   MODAL PRÉFÉRENCES
   ══════════════════════════════════════════════════════════ */
.prefs-modal {
  max-width: 480px;
  width: 92vw;
}
.prefs-body {
  padding: 8px 0 4px;
}
.prefs-section {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.prefs-section:last-child { border-bottom: none; }
.prefs-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 10px;
}
.prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}
.prefs-row + .prefs-row { margin-top: 10px; }
.prefs-label {
  font-size: 13px;
  color: var(--text);
  flex: 1;
}
.prefs-toggle-group {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.prefs-toggle-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--card);
  color: var(--text);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.prefs-toggle-btn:last-child { border-right: none; }
.prefs-toggle-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.prefs-toggle-btn:not(.active):hover {
  background: rgba(0,67,255,.07);
  color: var(--primary);
}
.prefs-saved-hint {
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  flex: 1;
}
.prefs-saved-hint.hidden { display: none; }

/* ══════════════════════════════════════════════════════════
   POPOVER GOOGLE AGENDA (To Do)
   ══════════════════════════════════════════════════════════ */
.gcal-popover {
  position: fixed;
  z-index: 9000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 280px;
  /* V6.7.40 — borne max-height pour ne pas dépasser le viewport, et permettre
     le scroll interne du body si le contenu est très long. */
  max-height: calc(100vh - 16px);
}
.gcal-popover .gcal-pop-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.gcal-pop-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--hover);
  /* V6.7.40 — feedback visuel : header draggable */
  cursor: grab;
  user-select: none;
}
.gcal-pop-hd:active { cursor: grabbing; }
/* V6.7.126 — SVG Lucide centré */
.gcal-pop-icon { display: inline-flex; align-items: center; color: var(--primary); }
.gcal-pop-icon svg { display: block; }
.gcal-pop-lbl {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.gcal-pop-close {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--text-muted); padding: 2px 4px;
  border-radius: 4px;
  /* V6.7.126 — Centre le SVG */
  display: inline-flex; align-items: center; justify-content: center;
}
.gcal-pop-close svg { display: block; }
.gcal-pop-close:hover { background: var(--border); color: var(--text); }
.gcal-pop-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 8px; }
.gcal-pop-row { display: flex; flex-direction: column; gap: 3px; }
.gcal-pop-field-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.gcal-pop-value { font-size: 13px; color: var(--text); }
.gcal-pop-input {
  font-family: var(--font);
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.gcal-pop-input:focus { border-color: var(--primary); }
.gcal-pop-organizer { opacity: .75; }

/* Invités d'un event GCal (To Do) — inspiré de la modale Calendriers */
.gcal-pop-att-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; }
.gcal-pop-att-item { display: flex; align-items: center; gap: 8px; }
.gcal-pop-att-status { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.gcal-pop-att-status--ok      { background: #d1fae5; color: #047857; }
.gcal-pop-att-status--no      { background: #fee2e2; color: #b91c1c; }
.gcal-pop-att-status--maybe   { background: #fef3c7; color: #b45309; }
.gcal-pop-att-status--pending { background: #e5e7eb; color: #6b7280; }
.gcal-pop-att-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal-pop-att-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--subtle, #f3f4f6); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
[data-theme="dark"] .gcal-pop-att-status--ok      { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; }
[data-theme="dark"] .gcal-pop-att-status--no      { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
[data-theme="dark"] .gcal-pop-att-status--maybe   { background: rgba(245, 158, 11, 0.25); color: #fcd34d; }
[data-theme="dark"] .gcal-pop-att-status--pending { background: rgba(156, 163, 175, 0.25); color: #d1d5db; }

.gcal-pop-actions {
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.gcal-pop-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  background: var(--hover);
  color: var(--text);
  transition: background .12s;
}
.gcal-pop-btn:hover { background: var(--border); }
/* V6.7.120 — Bouton « Rejoindre Meet » : bleu TF au lieu du vert Google */
.gcal-pop-btn--meet {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
}
.gcal-pop-btn--meet:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.gcal-pop-btn--open {
  background: var(--hover);
  color: var(--text-muted);
}
.gcal-pop-btn--save {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  /* V6.7.126 — Centre icône Lucide */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.gcal-pop-btn--save svg { display: block; }
.gcal-pop-btn--save:hover { opacity: .88; }
.gcal-pop-btn--del {
  background: none;
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
  /* V6.7.126 — Centre icône Lucide */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.gcal-pop-btn--del svg { display: block; }
.gcal-pop-btn--del:hover { background: #fef2f2; }

/* V6.7.127 — Indicateur auto-save inline dans la barre d'actions du popover GCal */
.gcal-pop-autosave {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: italic;
  text-align: right;
  justify-content: flex-end;
  min-height: 18px;
}
.gcal-pop-autosave svg { display: block; }
.gcal-pop-autosave--saving { color: var(--muted); }
.gcal-pop-autosave--saving .gcal-pop-autosave-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  animation: gcal-pop-pulse 1s ease-in-out infinite;
}
.gcal-pop-autosave--saved  { color: #16a34a; font-style: normal; font-weight: 500; }
.gcal-pop-autosave--error  { color: #dc2626; font-style: normal; font-weight: 500; }
@keyframes gcal-pop-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

/* V6.7.21 — Bascule GCal → BDD Orga */
.gcal-pop-import {
  padding: 8px 14px 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--hover);
}
.gcal-pop-import-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  /* V6.7.126 — Centre icône Lucide download */
  display: inline-flex; align-items: center; gap: 5px;
}
.gcal-pop-import-title svg { display: block; }
.gcal-pop-import-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gcal-pop-btn--import-copy,
.gcal-pop-btn--import-move {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 6px 8px;
  /* V6.7.126 — Centre l'icône Lucide ET le label verticalement */
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.gcal-pop-btn--import-copy svg,
.gcal-pop-btn--import-move svg { display: block; flex-shrink: 0; }
.gcal-pop-btn--import-copy:hover:not(:disabled),
.gcal-pop-btn--import-move:hover:not(:disabled) {
  background: var(--border);
}
.gcal-pop-btn--import-copy.is-active,
.gcal-pop-btn--import-move.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.gcal-pop-btn--import-move:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.gcal-pop-import-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.gcal-pop-import-zone[hidden] { display: none; }
.gcal-pop-import-confirm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gcal-pop-btn--cancel {
  background: var(--card);
  color: var(--text-muted);
}
.gcal-pop-btn--confirm {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.gcal-pop-btn--confirm:hover:not(:disabled) { opacity: .88; }
.gcal-pop-btn--confirm:disabled { opacity: .6; cursor: wait; }

/* ── V6.7.21 — Modal de bascule en lot GCal → BDD Orga ────── */
.gcal-batch-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.gcal-batch-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  width: min(1100px, 96vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.gcal-batch-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--hover);
}
.gcal-batch-icon { font-size: 18px; }
.gcal-batch-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.gcal-batch-close {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-muted);
  padding: 4px 8px; border-radius: 6px;
}
.gcal-batch-close:hover { background: var(--border); color: var(--text); }
.gcal-batch-controls {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.gcal-batch-row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.gcal-batch-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 130px;
}
.gcal-batch-field--filter { flex: 1; min-width: 250px; }
.gcal-batch-field > label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.gcal-batch-field input[type="date"],
.gcal-batch-field input[type="text"],
.gcal-batch-field select {
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  outline: none;
  height: 32px;
  box-sizing: border-box;
}
.gcal-batch-field input:focus,
.gcal-batch-field select:focus { border-color: var(--primary); }
.gcal-batch-mode,
.gcal-batch-filter-mode {
  display: flex; gap: 12px; align-items: center;
  height: 32px;
}
.gcal-batch-radio {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; cursor: pointer; color: var(--text);
}
.gcal-batch-radio input { margin: 0; cursor: pointer; }
.gcal-batch-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--card);
  color: var(--text);
  transition: background .12s, opacity .12s;
  height: 32px;
}
.gcal-batch-btn:hover:not(:disabled) { background: var(--border); }
.gcal-batch-btn--load {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.gcal-batch-btn--load:hover:not(:disabled) { opacity: .88; }
.gcal-batch-btn--secondary {
  background: var(--hover);
  color: var(--text-muted);
}
.gcal-batch-btn--cancel {
  background: var(--card);
  color: var(--text-muted);
}
.gcal-batch-btn--confirm {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}
.gcal-batch-btn--confirm:hover:not(:disabled) { opacity: .88; }
.gcal-batch-btn--confirm:disabled,
.gcal-batch-btn:disabled { opacity: .55; cursor: not-allowed; }
.gcal-batch-list-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 16px;
  background: var(--bg);
}
.gcal-batch-list-msg {
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
/* V6.7.28 — hint silencieux « X doublons masqués » */
.gcal-batch-hidden-hint {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent, #4F8EF7) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent, #4F8EF7) 35%, var(--border));
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  cursor: help;
}

/* V6.7.31 — Progress UI pendant le chargement du batch (peut prendre 5-15s
   sur une grosse période → on rassure l'user en montrant que GCal et Notion
   tournent en parallèle, et qu'ils s'achèvent à des moments distincts). */
.gcal-batch-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.gcal-batch-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s, opacity 0.25s;
}
.gcal-batch-progress-step--done {
  color: color-mix(in srgb, var(--success, #10B981) 70%, var(--text-muted));
  opacity: 0.85;
}
/* Spinner par défaut : cercle qui tourne. Quand `--done`, on le remplace par ✓. */
.gcal-batch-progress-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid color-mix(in srgb, var(--accent, #4F8EF7) 30%, transparent);
  border-top-color: var(--accent, #4F8EF7);
  border-radius: 50%;
  animation: gcalBatchSpin 0.7s linear infinite;
  flex-shrink: 0;
}
.gcal-batch-progress-step--done .gcal-batch-progress-spinner {
  border: none;
  background: var(--success, #10B981);
  animation: none;
  position: relative;
}
.gcal-batch-progress-step--done .gcal-batch-progress-spinner::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 9px; font-weight: 800;
  line-height: 1;
}
@keyframes gcalBatchSpin {
  to { transform: rotate(360deg); }
}
.gcal-batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.gcal-batch-table thead {
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
}
.gcal-batch-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gcal-batch-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.gcal-batch-table tr:hover td { background: var(--hover); }
.gcal-batch-col-chk { width: 32px; text-align: center; }
.gcal-batch-col-title { font-weight: 600; color: var(--text); }
.gcal-batch-col-task { width: 240px; }
.gcal-batch-col-typo { width: 200px; }
.gcal-batch-task-sel,
.gcal-batch-typo-sel {
  font-family: var(--font);
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  outline: none;
  width: 100%;
}
.gcal-batch-task-sel { max-width: 240px; }
.gcal-batch-typo-sel { max-width: 200px; }
.gcal-batch-table input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}
.gcal-batch-tr--done { opacity: .55; }
.gcal-batch-tr--done td { background: var(--hover); }
.gcal-batch-tr--blocked { opacity: .65; }
.gcal-batch-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.gcal-batch-tag--ok      { background: #dcfce7; color: #166534; }
.gcal-batch-tag--neutral { background: var(--hover); color: var(--text-muted); }
.gcal-batch-tag--warn    { background: #fef3c7; color: #92400e; }
.gcal-batch-tag--done    { background: #dbeafe; color: #1e40af; }
.gcal-batch-footer {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.gcal-batch-summary {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.gcal-batch-actions { display: flex; gap: 8px; }

/* ─── V6.7.26 (2026-04-30j) ──────────────────────────────────────
   Filtres en chips (inclure / exclure), bouton « Rattacher tout à… »,
   bouton trigger searchable per-row + popover projet/mission. */

/* Hint dans le label « Filtre titre » */
.gcal-batch-field-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: .75;
  font-size: 10px;
}
.gcal-batch-field-hint code {
  font-family: ui-monospace, monospace;
  background: var(--hover);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
}

/* Ligne input + boutons +Inclure / +Exclure */
.gcal-batch-filter-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.gcal-batch-filter-input-row input[type="text"] {
  flex: 1;
  min-width: 140px;
}
.gcal-batch-btn--include {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
  white-space: nowrap;
}
.gcal-batch-btn--include:hover:not(:disabled) {
  background: #bbf7d0;
}
.gcal-batch-btn--exclude {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
  white-space: nowrap;
}
.gcal-batch-btn--exclude:hover:not(:disabled) {
  background: #fecaca;
}

/* Bandeau de chips */
.gcal-batch-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 20px;
}
.gcal-batch-chips-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 0;
}
.gcal-batch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.gcal-batch-chip--include {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.gcal-batch-chip--exclude {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.gcal-batch-chip-icon { font-size: 9px; opacity: .8; }
.gcal-batch-chip-term { font-family: var(--font); }
.gcal-batch-chip-rm {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  color: inherit;
  opacity: .6;
  border-radius: 999px;
}
.gcal-batch-chip-rm:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* Actions globales (bouton Rattacher tout + Tout (dé)cocher) */
.gcal-batch-global-actions {
  display: flex;
  gap: 6px;
  height: 32px;
  align-items: stretch;
}
.gcal-batch-btn--attach {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
  white-space: nowrap;
}
.gcal-batch-btn--attach:hover:not(:disabled) {
  background: #fde68a;
}

/* Bouton trigger « Rattacher à » per-row (remplace le <select>) */
.gcal-batch-task-trigger {
  font-family: var(--font);
  font-size: 11px;
  padding: 4px 6px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  outline: none;
  width: 100%;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.gcal-batch-task-trigger:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--hover);
}
.gcal-batch-task-trigger:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.gcal-batch-task-trigger--empty {
  color: var(--text-muted);
  font-style: italic;
}
.gcal-batch-task-trigger--set {
  color: var(--text);
  font-weight: 600;
  font-style: normal;
}
.gcal-batch-task-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcal-batch-task-chev {
  font-size: 9px;
  opacity: .6;
  flex-shrink: 0;
}

/* Popover searchable projet/mission */
.gcal-batch-projpop {
  position: fixed;
  z-index: 9600;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
  animation: fadeIn .12s ease;
}
.gcal-batch-projpop-search {
  font-family: var(--font);
  font-size: 12px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  flex-shrink: 0;
}
.gcal-batch-projpop-search:focus { background: var(--card); }
.gcal-batch-projpop-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  outline: none;
}
.gcal-batch-projpop-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.gcal-batch-projpop-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  transition: background .08s;
}
.gcal-batch-projpop-opt:hover,
.gcal-batch-projpop-opt:focus-visible {
  background: var(--hover);
  outline: none;
}
.gcal-batch-projpop-icon {
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .8;
}
.gcal-batch-projpop-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.gcal-batch-projpop-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcal-batch-projpop-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcal-batch-projpop-opt--mission .gcal-batch-projpop-label { color: var(--text); }
.gcal-batch-projpop-opt--project .gcal-batch-projpop-label { color: var(--primary); }
.gcal-batch-projpop-opt--none {
  font-style: italic;
  color: var(--text-muted);
}
.gcal-batch-projpop-opt--none .gcal-batch-projpop-label { color: var(--text-muted); font-weight: 500; }

/* V6.7.110 — Conteneur des badges bas-droite (Meet 🎥 + GCal 📅 + futurs).
   Évite l'overlap qu'on avait quand chaque icône était en position:absolute
   avec un right: fixe. */
.cal-block-br-badges {
  position: absolute;
  bottom: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  pointer-events: none;
}
/* V6.7.111 — SVG Lucide héritent `color` → currentColor */
/* V6.7.119 — Passe en bleu TF (au lieu du vert Meet) pour rester dans
   l'identité brandée. */
.cal-block-meet-dot {
  display: inline-flex;
  line-height: 1;
  color: var(--primary);
}
.cal-block-gcal-badge {
  /* V6.7.110 — Plus de position:absolute, vit dans .cal-block-br-badges (flex) */
  /* V6.7.111 — SVG Lucide via currentColor */
  display: inline-flex;
  line-height: 1;
  color: #64748b; /* gris doux pour le marqueur de provenance */
  opacity: .85;
}
/* Blocs GCal lecture seule : curseur default + légère opacité */
.cal-block--gcal-readonly { opacity: .85; cursor: default !important; }

/* ══════════════════════════════════════════════════════════
   LÉGENDE COULEURS CALENDRIER GP
   ══════════════════════════════════════════════════════════ */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.cal-legend[hidden] { display: none; }
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cal-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-legend-label { font-weight: 500; color: var(--text); }

/* ══════════════════════════════════════════════════════════
   MINI DATE PICKER
   ══════════════════════════════════════════════════════════ */
.mini-cal-picker {
  position: absolute;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  width: 224px;
  padding: 10px;
  user-select: none;
}
.mcp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mcp-month {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.mcp-nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1;
}
.mcp-nav:hover { background: var(--hover); color: var(--text); }
.mcp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.mcp-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 0;
}
.mcp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mcp-day {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  border-radius: 5px;
  padding: 4px 0;
  text-align: center;
  line-height: 1.4;
}
.mcp-day:hover { background: var(--hover); }
.mcp-empty { pointer-events: none; }
.mcp-today {
  font-weight: 700;
  color: var(--primary);
}
.mcp-sel {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600;
}

/* Labels de date cliquables dans les calendriers */
#calDateLabel,
.tc-date-label {
  cursor: pointer;
  border-radius: 5px;
  padding: 2px 6px;
  transition: background .15s;
}
#calDateLabel:hover,
.tc-date-label:hover {
  background: var(--hover);
}

/* ══════════════════════════════════════════════════════════
   FEEDBACK FAB (bouton flottant)
   ══════════════════════════════════════════════════════════ */
.feedback-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9500;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,67,255,.35);
  transition: transform .15s, box-shadow .15s;
  font-size: 20px;
  user-select: none;
}
.feedback-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,67,255,.45);
}
.feedback-fab-icon { line-height: 1; pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   V6.7.244 — NOTES FAB (bottom-left) + DRAWER
   ══════════════════════════════════════════════════════════ */
.notes-fab {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9500;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,67,255,.35);
  transition: transform .15s, box-shadow .15s;
  font-size: 20px;
  user-select: none;
}
.notes-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,67,255,.45);
}
.notes-fab.is-open { transform: rotate(8deg) scale(1.05); }
.notes-fab-icon { line-height: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.notes-fab-icon svg { width: 22px; height: 22px; stroke: currentColor; }

.notes-panel {
  position: fixed;
  bottom: 80px;
  left: 22px;
  z-index: 9499;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 460px;
  max-height: calc(100vh - 110px);
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.notes-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.notes-panel-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f9fafb);
  display: flex;
  align-items: center;
  gap: 8px;
}
.notes-panel-head h3 {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
}
.notes-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  color: var(--primary, #0043ff);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.notes-action-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-color: var(--primary, #0043ff);
}
.notes-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #9ca3af);
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notes-close-btn:hover {
  background: var(--hover, #f3f4f6);
  color: var(--text, #111827);
}

/* V6.7.262 — Conteneur des actions du header (help + close).
   Inline-flex pour les aligner à droite, séparés par un petit gap. */
.notes-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* V6.7.262 — Mini-tuto : bouton "?" + popover au hover/focus.
   Pattern mirroré sur ptv-rules-help-* (suivi de projets), adapté au
   contexte panneau Notes (qui est à bottom-left → popover s'ouvre vers le
   bas avec arrow alignée à droite, car le bouton est proche du bord droit
   du panneau). */
.notes-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.notes-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid var(--primary, #0043ff);
  border-radius: 50%;
  background: var(--primary, #0043ff);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: background .15s, transform .15s;
}
.notes-help-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 85%, #000);
  transform: scale(1.08);
}
.notes-help-pop {
  position: absolute;
  top: calc(100% + 10px);
  /* Le bouton est en haut-droite du panneau, mais on veut un popover plus
     large que la zone disponible à droite → on ancre via `right` pour que
     le popover déborde vers la GAUCHE (côté contenu du panneau). */
  right: -6px;
  z-index: 50;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--primary, #0043ff);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #111827);
}
.notes-help-pop::before {
  content: '';
  position: absolute;
  top: -7px; right: 12px;
  width: 12px; height: 12px;
  background: var(--card-bg, #fff);
  border-top: 1px solid var(--primary, #0043ff);
  border-left: 1px solid var(--primary, #0043ff);
  transform: rotate(45deg);
}
.notes-help-wrap:hover .notes-help-pop,
.notes-help-btn:focus + .notes-help-pop,
.notes-help-btn:focus-visible + .notes-help-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.notes-help-pop-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary, #0043ff);
  margin-bottom: 6px;
}
.notes-help-pop p { margin: 4px 0; }
.notes-help-pop kbd {
  display: inline-block;
  padding: 0 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--subtle, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 3px;
  color: var(--text, #111827);
  line-height: 1.4;
  vertical-align: baseline;
}
.notes-help-pop-mute {
  color: var(--text-muted, #6b7280);
  font-size: 11.5px;
  font-style: italic;
  border-top: 1px dashed var(--border, #e5e7eb);
  padding-top: 6px;
  margin-top: 8px !important;
}
body.dark .notes-help-pop {
  background: #1f2937;
  color: #f3f4f6;
}
body.dark .notes-help-pop::before { background: #1f2937; }
body.dark .notes-help-pop kbd {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.notes-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
}

/* V6.7.245 — Liste des todos */
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-item {
  position: relative;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.04));
}
.notes-item:last-child { border-bottom: none; }
.notes-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  transition: background 0.12s;
}
.notes-item-row:hover { background: color-mix(in srgb, var(--primary, #0043ff) 4%, transparent); }

/* Checkbox custom (✓ vert si check, 📅 bleu si slot) */
.notes-check {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px; height: 24px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted, #9ca3af);
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.notes-check:hover { background: var(--hover, #f3f4f6); color: var(--text, #111827); }
.notes-check.is-done           { color: #16a34a; }
.notes-check.is-done.via-slot  { color: var(--primary, #0043ff); }

/* Input éditable inline */
.notes-item-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 4px 6px;
  color: var(--text, #111827);
  border-radius: 4px;
  min-width: 0;
}
.notes-item-input:focus { background: var(--hover, #f3f4f6); }
.notes-item-input.is-done {
  text-decoration: line-through;
  color: var(--text-muted, #9ca3af);
}
.notes-item-input--sub { font-size: 12px; }
.notes-item-input::placeholder { color: var(--text-muted, #9ca3af); font-style: italic; }

/* Actions inline (slot, expand, delete) */
.notes-row-acts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.notes-item-row:hover .notes-row-acts,
.notes-item-row:focus-within .notes-row-acts { opacity: 1; }

.notes-row-act {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px; height: 24px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted, #9ca3af);
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, transform 0.12s;
}
.notes-row-act:hover { background: var(--hover, #f3f4f6); color: var(--text, #111827); }
.notes-row-act--slot:hover { color: var(--primary, #0043ff); background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent); }
.notes-row-act--expand.is-open { transform: rotate(0); color: var(--primary, #0043ff); }

/* V6.7.263 — Le chevron avec sub-items devient plus large pour accueillir
   le badge X/N à côté de l'icône. Toujours visible (opacity:1) car c'est
   un signal d'info important (vs les autres acts qui ne show qu'au hover). */
.notes-row-act--expand.has-subs {
  width: auto;
  min-width: 24px;
  padding: 0 5px;
  gap: 3px;
  color: var(--primary, #0043ff);
  opacity: 1 !important;     /* pousse à travers l'opacity:0 de .notes-row-acts */
}
.notes-subcount {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background: var(--primary, #0043ff);
  color: #fff;
  border-radius: 8px;
  letter-spacing: -0.02em;
}
.notes-subcount.is-all-done {
  background: #16a34a;       /* vert quand toutes les sub-tâches sont done */
}

/* V6.7.263 — État slot pour les sub-items (parité avec le top-level).
   Le check icon passe en bleu (.via-slot ci-dessus), on rajoute juste la
   teinte du texte pour cohérence visuelle. */
.notes-subitem.is-done .notes-item-input--sub {
  text-decoration: line-through;
  color: var(--text-muted, #9ca3af);
}
.notes-subitem.is-slot .notes-item-input--sub {
  color: var(--primary, #0043ff);
  opacity: 0.85;
}
.notes-check--sub.via-slot.is-done { color: var(--primary, #0043ff); }

/* Actions inline des sub-items : opacity hover comme le top-level */
.notes-row-acts--sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
  margin-left: auto;
}
.notes-subitem:hover .notes-row-acts--sub,
.notes-subitem:focus-within .notes-row-acts--sub { opacity: 1; }
.notes-row-acts--sub .notes-row-act { width: 22px; height: 22px; }

/* Sub-items (indentés) */
.notes-sublist {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 0 10px 0 30px;
}
.notes-subitem {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.notes-check--sub { width: 20px; height: 20px; }
.notes-subitem-add { padding: 4px 0 6px 0; }
.notes-add-sub {
  background: none;
  border: none;
  color: var(--text-muted, #9ca3af);
  font-size: 11.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.notes-add-sub:hover { color: var(--primary, #0043ff); background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent); }

/* "Ajouter une ligne" bouton bas de liste */
.notes-add-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px;
  padding: 8px 12px;
  background: var(--hover, #f3f4f6);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  width: calc(100% - 24px);
  transition: all 0.12s;
}
.notes-add-line:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}

.notes-panel-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f9fafb);
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  min-height: 28px;
  display: flex;
  align-items: center;
}
.notes-status.is-saving  { color: var(--text-muted, #9ca3af); font-style: italic; }
.notes-status.is-dirty   { color: #f59e0b; }
.notes-status.is-saved   { color: #16a34a; }

body.dark .notes-panel { background: rgba(20,20,22,0.98); border-color: rgba(255,255,255,0.08); }
body.dark .notes-panel-head, body.dark .notes-panel-foot { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }

/* Cache la fab notes dans les contextes où la feedback FAB est elle aussi cachée */
@media print {
  .notes-fab, .notes-panel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   V6.7.248 — NotesSlotPicker (popover dédié création créneau depuis Notes)
   ══════════════════════════════════════════════════════════ */
.nsp-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nsp-overlay.is-open { opacity: 1; }
.nsp-modal {
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  width: 880px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.18s ease;
}
.nsp-overlay.is-open .nsp-modal { transform: scale(1); }
.nsp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.nsp-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.nsp-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-muted, #9ca3af);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.nsp-close:hover { background: var(--hover, #f3f4f6); color: var(--text, #111827); }
.nsp-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nsp-loading { padding: 30px; text-align: center; color: var(--text-muted, #9ca3af); }

.nsp-row { display: flex; gap: 12px; align-items: center; }
.nsp-title-label {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
}
.nsp-title-label > span {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted, #6b7280); letter-spacing: 0.04em;
}
.nsp-title-input {
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 14px;
  background: var(--card, #fff);
  color: var(--text, #111827);
}
.nsp-title-input:focus { outline: none; border-color: var(--primary, #0043ff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent); }

.nsp-section { display: flex; flex-direction: column; gap: 6px; }
.nsp-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--text-muted, #6b7280); letter-spacing: 0.04em;
}
.nsp-section-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* V6.7.253 — Combobox custom (panel s'ouvre vers le bas) */
.nsp-combo { position: relative; }
.nsp-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  font-size: 13px;
  color: var(--text, #111827);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.nsp-combo-trigger:hover { border-color: var(--text-muted, #9ca3af); }
.nsp-combo[aria-expanded="true"] .nsp-combo-trigger,
.nsp-combo .nsp-combo-trigger[aria-expanded="true"] {
  border-color: var(--primary, #0043ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.nsp-combo-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsp-combo-caret {
  margin-left: 8px;
  color: var(--text-muted, #9ca3af);
  font-size: 10px;
  flex-shrink: 0;
}
.nsp-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 10010;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* V6.7.254 — Override l'attribut [hidden] : sans ça mon `display: flex`
   ci-dessus écrasait la propriété browser-default `display: none` du `[hidden]`,
   et les 2 panels s'ouvraient en même temps à l'ouverture du picker. */
.nsp-combo-panel[hidden] { display: none !important; }
.nsp-combo-search-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
  background: var(--subtle, #f9fafb);
}
.nsp-combo-search-icon { color: var(--text-muted, #9ca3af); font-size: 12px; }
.nsp-combo-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text, #111827);
  font-family: inherit;
}
.nsp-combo-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.nsp-combo-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text, #111827);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nsp-combo-item:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
}
.nsp-combo-item.is-selected {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
  font-weight: 500;
}
/* V6.7.251 — Bouton toggle weekends */
.nsp-weekend-toggle {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.nsp-weekend-toggle:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
}

/* V6.7.256 — Navigation semaine dans le picker */
.nsp-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nsp-nav-btn {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  min-width: 28px;
}
.nsp-nav-btn:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
}
.nsp-nav-today {
  min-width: 110px;
  text-align: center;
  font-weight: 500;
}
.nsp-nav-today.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}

.nsp-suggestions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.nsp-sugg {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
  display: flex; flex-direction: column; gap: 3px;
}
.nsp-sugg:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 4%, transparent);
}
.nsp-sugg.is-selected {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.nsp-sugg-label { font-size: 12px; font-weight: 600; color: var(--text, #111827); }
.nsp-sugg-time { font-size: 11px; color: var(--text-muted, #6b7280); }
.nsp-no-sugg { font-size: 12px; color: var(--text-muted, #9ca3af); font-style: italic; padding: 6px 0; }

/* V6.7.250 — Grille hebdo refondue : chaque jour = une track unique avec
   quarts en fond (drag-select) + slots existants positionnés absolu par-dessus
   avec leur titre visible (cohérent avec la vue To do). */
.nsp-grid-wrap {
  overflow: auto;
  max-height: 460px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  user-select: none;
}
.nsp-grid {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  font-size: 11px;
  min-width: 700px;
}
.nsp-grid-corner { background: var(--subtle, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); position: sticky; top: 0; left: 0; z-index: 3; }
.nsp-grid-day-h {
  padding: 6px 8px;
  font-weight: 600;
  text-align: center;
  background: var(--subtle, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  border-left: 1px solid var(--border-light, rgba(0,0,0,0.05));
  position: sticky; top: 0; z-index: 2;
}
/* Colonne des heures (track gauche) */
.nsp-grid-hours {
  background: var(--subtle, #f9fafb);
  border-right: 1px solid var(--border, #e5e7eb);
  position: sticky; left: 0; z-index: 1;
  display: flex; flex-direction: column;
}
.nsp-grid-hour {
  padding: 2px 6px;
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  text-align: right;
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.05));
  box-sizing: border-box;
}
/* Colonne jour : track relative avec quarts en fond + slots en absolu */
.nsp-grid-day {
  position: relative;
  border-left: 1px solid var(--border-light, rgba(0,0,0,0.05));
  box-sizing: border-box;
}
.nsp-grid-day.is-today { background: color-mix(in srgb, var(--primary, #0043ff) 3%, transparent); }
.nsp-grid-day.is-weekend { background: color-mix(in srgb, var(--text-muted, #9ca3af) 6%, transparent); }

/* Quart d'heure (drag-select) */
.nsp-q {
  cursor: pointer;
  transition: background 0.08s;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
/* Borders horizontales toutes les heures (1 quart sur 4) */
.nsp-q:nth-child(4n+1) { border-top: 1px solid var(--border-light, rgba(0,0,0,0.05)); }
.nsp-q:hover { background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent); }
.nsp-q.is-sel {
  background: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent) !important;
}

/* Slot existant : positionné absolu, titre visible, pointer-events: none
   pour laisser le drag-select fonctionner dessous */
.nsp-slot {
  position: absolute;
  left: 2px;
  right: 2px;
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, var(--card, #fff));
  border-left: 3px solid var(--primary, #0043ff);
  border-radius: 4px;
  padding: 2px 6px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  font-size: 10px;
  line-height: 1.2;
  color: var(--text, #111827);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* V6.7.252 — Couleur par source (cohérent avec la sidebar agenda Home) */
.nsp-slot--orga {
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, var(--card, #fff));
  border-left-color: var(--primary, #0043ff);
}
.nsp-slot--gcal {
  background: color-mix(in srgb, #8b5cf6 14%, var(--card, #fff));
  border-left-color: #8b5cf6;
}
.nsp-slot--malibou {
  background: color-mix(in srgb, #f59e0b 16%, var(--card, #fff));
  border-left-color: #f59e0b;
}
/* Légende sources sous le header de la grille */
.nsp-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 6px 2px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.nsp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.nsp-legend-dot {
  width: 12px; height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.nsp-legend-dot--orga    { background: color-mix(in srgb, var(--primary, #0043ff) 14%, var(--card, #fff)); border-left: 3px solid var(--primary, #0043ff); }
.nsp-legend-dot--gcal    { background: color-mix(in srgb, #8b5cf6 14%, var(--card, #fff));               border-left: 3px solid #8b5cf6; }
.nsp-legend-dot--malibou { background: color-mix(in srgb, #f59e0b 16%, var(--card, #fff));               border-left: 3px solid #f59e0b; }
.nsp-slot-time {
  font-size: 9px;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}
.nsp-slot-title {
  font-size: 10.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsp-slot-sub {
  font-size: 9px;
  color: var(--text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nsp-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f9fafb);
}
.nsp-foot-info { flex: 1; font-size: 12.5px; color: var(--text, #111827); font-weight: 500; }
.nsp-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  color: var(--text, #111827);
  transition: all 0.12s;
}
.nsp-btn:hover { background: var(--hover, #f3f4f6); }
.nsp-btn--confirm {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.nsp-btn--confirm:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 90%, #000);
}
.nsp-btn:disabled { opacity: 0.5; cursor: wait; }

body.dark .nsp-modal { background: rgba(20,20,22,0.98); border-color: rgba(255,255,255,0.08); }
body.dark .nsp-grid-corner, body.dark .nsp-grid-day-h, body.dark .nsp-grid-hour, body.dark .nsp-foot { background: rgba(255,255,255,0.03); }

/* Panel feedback */
.feedback-panel {
  position: fixed;
  bottom: 80px;
  right: 22px;
  z-index: 9500;
  width: 320px;
  background: var(--bg-card, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feedback-panel.hidden { display: none; }

.feedback-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  background: var(--primary);
  color: #fff;
}
.feedback-panel-title { font-size: 13px; font-weight: 700; }
.feedback-panel-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.8); font-size: 14px;
  padding: 2px 4px; border-radius: 4px;
  transition: color .12s;
}
.feedback-panel-close:hover { color: #fff; }

.feedback-panel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.feedback-type-group { display: flex; gap: 8px; }
.feedback-type-btn {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--hover);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.feedback-type-btn:hover { border-color: var(--primary); color: var(--primary); }
.feedback-type-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.feedback-textarea {
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  outline: none;
  min-height: 100px;
  line-height: 1.5;
  transition: border-color .12s;
}
.feedback-textarea:focus { border-color: var(--primary); }
.feedback-textarea::placeholder { color: var(--text-muted); }

.feedback-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.feedback-char-count { font-size: 11px; color: var(--text-muted); }
.feedback-send-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .12s;
}
.feedback-send-btn:hover { opacity: .88; }
.feedback-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════
   POPOVER RENOMMAGE PROJET / MISSION
   ══════════════════════════════════════════════════════════ */
.rename-pop {
  position: fixed;
  z-index: 1100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 14px 16px 12px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rename-pop.hidden { display: none; }
.rename-pop-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rename-pop-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
}
.rename-pop-input:focus { outline: none; border-color: var(--primary); }
.rename-pop-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════
   BANDEAU MISE À JOUR
   ══════════════════════════════════════════════════════════ */
.update-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--primary, #3b5bdb);
  color: #fff;
  font-size: 13px;
  font-family: var(--font, sans-serif);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  animation: updateBannerSlide .3s ease;
}
.update-banner.hidden { display: none; }

@keyframes updateBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.update-banner-icon { font-size: 16px; flex-shrink: 0; }
.update-banner-msg  { flex: 1; }

.update-banner-btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--primary, #3b5bdb);
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font, sans-serif);
  transition: opacity .12s;
}
.update-banner-btn:hover { opacity: .85; }

/* Décale le header sticky pour ne pas être masqué par le bandeau */
body.has-update-banner .header {
  margin-top: 42px;
}

/* Zone image feedback */
.feedback-img-zone {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  overflow: hidden;
}
.feedback-img-zone:hover { border-color: var(--primary); background: rgba(59,130,246,.06); }
.feedback-img-zone.drag-over { border-color: var(--primary); background: rgba(59,130,246,.12); }

.feedback-img-placeholder {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  color: var(--text-muted);
  font-size: 12px;
  user-select: none;
}
.feedback-img-icon { font-size: 15px; }

.feedback-img-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(0,0,0,.2);
}
.feedback-img-preview.hidden { display: none; }
.feedback-img-preview img {
  max-height: 100px;
  max-width: 100%;
  border-radius: 5px;
  object-fit: contain;
}
.feedback-img-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.65);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background .12s;
}
.feedback-img-remove:hover { background: #e53e3e; }

/* ══════════════════════════════════════════════════════════
   WELCOME POPUP
   ══════════════════════════════════════════════════════════ */
.welcome-overlay.hidden { display: none; }
.welcome-modal.hidden  { display: none; }
.welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10000;
}
.welcome-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  max-width: 460px;
  width: calc(100vw - 40px);
  z-index: 10001;
  text-align: center;
  box-shadow: 0 16px 56px rgba(0,0,0,.25);
}
.welcome-logo { font-size: 52px; margin-bottom: 16px; line-height: 1; }
.welcome-message {
  font-size: 16px; line-height: 1.55;
  margin-bottom: 28px;
  opacity: .95;
}
.welcome-selector-wrap { margin-bottom: 24px; }
.welcome-user-dropdown { display: inline-block; }
.welcome-user-dropdown .user-dropdown-btn {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  min-width: 220px;
}
.welcome-user-dropdown .user-dropdown-btn:hover { background: rgba(255,255,255,.28); }
.welcome-user-dropdown .user-dropdown-panel {
  background: #fff;
  color: var(--text);
  min-width: 220px;
  text-align: left;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.welcome-user-dropdown .user-dropdown-search {
  background: #f5f5f5;
  color: #111;
  border-color: #ddd;
}
.welcome-user-dropdown .user-dropdown-list {
  background: #fff;
  color: #111;
}
.welcome-confirm-btn {
  background: #fff !important;
  color: var(--primary) !important;
  border: none;
  font-size: 15px; font-weight: 700;
  padding: 12px 32px;
  border-radius: 10px;
}
.welcome-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Historique modal ─────────────────────────────────── */
.history-list { list-style: none; padding: 0; margin: 0; }
.history-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-client { font-weight: 600; font-size: 13px; color: var(--primary); }
.history-task   { font-size: 13px; color: var(--text); margin: 1px 0; }
.history-time   { font-size: 11px; color: var(--muted); }
.history-item--cal { background: var(--bg-secondary); }
.history-item--cal .history-client { color: var(--text-secondary); font-weight: 500; }
.log-cal-action { font-weight: 700; color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   ONGLET PROJETS MODULAIRES — Layout
   ══════════════════════════════════════════════════════════ */

/* ── Collapsible cards ──────────────────────────────────── */
.card-collapsible .collapsible-trigger {
  cursor: pointer;
  user-select: none;
  margin: -4px -8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.card-collapsible .collapsible-trigger:hover { background: var(--subtle); }
.collapse-chevron { font-size: 11px; color: var(--muted); }
.card-collapsible .collapsible-body { padding-top: 10px; }
.card-collapsible .collapsible-body.hidden { display: none; }

/* ── Timeline Suivi de projet (read-only) ───────────────── */
/* Outer : aligne sur la largeur de .app-layout (max 1400, padding 20) */
.proj-timeline {
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 0 20px;
  overflow: visible;
}
.proj-timeline.hidden { display: none; }
@media (max-width: 767px) {
  .proj-timeline { padding: 0 16px; margin-top: 12px; }
}
/* Inner card — look cohérent avec les autres .card de l'app */
.pt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
}
.pt-track {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: fit-content;
}
/* Variante compacte — utilisée dans les lignes dépliées du tableau Suivi projets */
/* V6.7.171 — flex: 1 1 0 sur chaque step → uniforme + tient sur 1 ligne quoi qu'il arrive */
.pt-track-compact {
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}
.pt-track-compact .pt-step {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 5px 4px 3px;
  gap: 1px;
  overflow: hidden;
}
.pt-track-compact .pt-step-icon { font-size: 14px; }
.pt-track-compact .pt-step-name {
  font-size: 9.5px; line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pt-track-compact .pt-step-date {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pt-track-compact .pt-arrow {
  font-size: 10px;
  align-self: center;
  flex: 0 0 auto;
  color: var(--muted);
  opacity: 0.5;
}
/* Le badge « ignorée » est moins prominent en compact (manque de place) */
.pt-track-compact .pt-step.ignored::after {
  font-size: 7px;
  padding: 0 3px;
  top: 1px; right: 1px;
}
.pt-step {
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 140px;
  padding: 8px 10px 6px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  text-align: center;
  transition: all var(--transition);
}
/* V6.7.125 — Conteneur display flex pour aligner soit emoji (fallback) soit SVG Lucide.
   color: var(--primary) → l'icône SVG hérite la couleur brand. */
.pt-step-icon {
  font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
}
.pt-step-icon svg { display: block; }
.pt-pop-icon { display: inline-flex; align-items: center; justify-content: center; }
.pt-pop-icon svg { display: block; }
.pt-pop-close { display: inline-flex; align-items: center; justify-content: center; }
.pt-pop-close svg { display: block; }
.pt-step-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.pt-step-state {
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  height: 15px;
  font-weight: 700;
}
.pt-step-date {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1;
}

/* États */
.pt-step.done {
  background: var(--success-bg);
  border-color: var(--success);
}
.pt-step.done .pt-step-state { color: var(--success); }

/* V6.7.172 — Homogénéisation visuelle : tous les états « avancés » en bleu TF.
   Plus de mix vert/bleu — un seul accent (var(--primary) = #0043ff).
   - validated     : bleu plein (border 2px)
   - passed        : bleu pâle (implicitement dépassée)
   - current/next  : contour pointillés bleu (= étape à traiter)
   - ignored       : grise (inchangée, V6.7.164)
   - to-do         : neutre (inchangée) */
.pt-step.validated {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border-color: var(--primary);
  border-width: 2px;
}
.pt-step.validated .pt-step-state { color: var(--primary); font-weight: 700; }
.pt-step.validated .pt-step-date.pt-date-validated {
  color: var(--primary);
  font-weight: 600;
}
/* V6.7.205 — Compteur « Xj » à côté de la date de validation */
.pt-step-date-ago {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 0.78em;
  font-weight: 600;
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}
body.dark .pt-step-date-ago {
  background: rgba(99,102,241,0.20);
  color: #c7d2fe;
}

.pt-step.passed:not(.validated) {
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  opacity: 0.78;
}
.pt-step.passed:not(.validated) .pt-step-state { color: var(--primary); opacity: 0.7; }
.pt-step.passed:not(.validated) .pt-step-name { font-weight: 500; }

/* Override de .current pour ajouter le contour pointillés + couleur bleu */
.pt-step.current:not(.validated):not(.passed):not(.ignored) {
  background: var(--card);
  border: 2px dashed var(--primary);
  color: var(--primary);
}
.pt-step.current:not(.validated):not(.passed):not(.ignored) .pt-step-state {
  color: var(--primary);
}

[data-theme="dark"] .pt-step.validated {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--primary);
}
[data-theme="dark"] .pt-step.passed:not(.validated) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* V6.7.174 — Tooltip hover JS-driven appendé au body (position: fixed).
   Échappe à l'overflow:hidden de .pt-card qui clippait la version pseudo-element.
   Plus de double affichage : on a viré le `title=` natif côté HTML. */
.pt-step-hover-tip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  white-space: pre-wrap;
  max-width: 340px;
  width: max-content;
  padding: 9px 12px;
  background: rgba(20, 20, 20, 0.96);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  animation: pt-step-tip-pop .08s ease-out;
}
@keyframes pt-step-tip-pop {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* V6.7.164 — Étape ignorée : grisée, barrée, badge "ignorée" */
.pt-step.ignored {
  background: var(--subtle);
  border-color: var(--border);
  opacity: 0.55;
  position: relative;
}
.pt-step.ignored .pt-step-name,
.pt-step.ignored .pt-step-date {
  text-decoration: line-through;
  color: var(--muted) !important;
}
.pt-step.ignored .pt-step-icon { filter: grayscale(1); opacity: 0.6; }
.pt-step.ignored .pt-step-state { color: var(--muted); }
.pt-step.ignored::after {
  content: 'ignorée';
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--card);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
[data-theme="dark"] .pt-step.ignored {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .pt-step.ignored::after {
  background: var(--card);
  border-color: rgba(255,255,255,0.15);
}

/* V6.7.166 — Popover refondu pour click-to-validate */
.pt-pop-state-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 8px;
  text-align: center;
}
.pt-pop-state-icon {
  font-size: 28px; line-height: 1;
}
.pt-pop-state-title {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.pt-pop-state-sub {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  max-width: 260px;
}
.pt-pop-state-validated {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
}
.pt-pop-state-validated .pt-pop-state-icon { color: var(--success); }
.pt-pop-state-validated .pt-pop-state-title { color: var(--success); }
/* V6.7.205 — Justification de validation tardive */
.pt-pop-late-reason {
  margin-top: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, #f97316 12%, transparent);
  border: 1px solid color-mix(in srgb, #f97316 35%, var(--border, #e5e7eb));
  border-radius: 6px;
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
}
.pt-pop-late-reason-tag {
  font-weight: 700;
  color: #c2410c;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.pt-pop-late-reason-txt {
  color: var(--text, #111827);
  font-style: italic;
}
body.dark .pt-pop-late-reason-tag { color: #fdba74; }
body.dark .pt-pop-late-reason-txt { color: #f3f4f6; }
.pt-pop-state-ignored {
  background: var(--subtle);
  border: 1px solid var(--border);
}
.pt-pop-state-ignored .pt-pop-state-icon { color: var(--muted); }
.pt-pop-state-passed {
  background: color-mix(in srgb, var(--success) 4%, transparent);
  border: 1px solid var(--border);
}
.pt-pop-state-todo {
  background: var(--subtle);
  border: 1px solid var(--border);
}
.pt-pop-state-todo .pt-pop-state-icon { color: var(--primary); }

.pt-pop-actions-row {
  display: flex; gap: 8px;
  width: 100%; justify-content: center;
  margin-top: 4px;
}
.pt-pop-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: filter .12s, transform .08s;
  border: 1px solid var(--border);
}
.pt-pop-action:active { transform: translateY(1px); }
.pt-pop-action-validate {
  background: var(--success);
  color: white;
  border-color: var(--success);
}
.pt-pop-action-validate:hover { filter: brightness(1.08); }
.pt-pop-action-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.pt-pop-action-secondary:hover {
  background: var(--subtle);
  border-color: var(--muted);
}

/* V6.7.182 — Popover Kanban : élargi pour que le texte des options ne soit
   pas tronqué. Emojis virés du select (les `<option>` ne supportent pas SVG). */
.pt-pop--kanban { width: min(460px, calc(100vw - 24px)); }
.pt-pop-kb-hint {
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 5%, var(--subtle));
  border-radius: 6px;
  margin-bottom: 12px;
}
.pt-pop-kb-hint strong { color: var(--primary); }
.pt-pop-kb-select-label {
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.pt-pop-kb-select {
  width: 100%;
  min-width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.pt-pop-kb-select:focus { outline: none; border-color: var(--primary); }
.pt-pop-kb-select-hint {
  margin-top: 8px;
  font-size: 11px; color: var(--muted); font-style: italic;
}

.pt-pop-ignored-note {
  margin-top: 6px;
  font-size: 11px; color: var(--muted); font-style: italic;
}

.pt-pop-details {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.pt-pop-details-summary {
  cursor: pointer;
  font-size: 11px; color: var(--muted);
  padding: 4px 0;
  user-select: none;
  list-style: revert;
}
.pt-pop-details-summary:hover { color: var(--text); }

/* V6.7.169 — Ligne forecast compacte (toujours visible, déplie pour éditer) */
.pt-pop-foretext {
  font-size: 12px;
  color: var(--text);
  padding: 6px 0;
}
.pt-pop-foretext.has-date strong { color: var(--text); font-weight: 600; }
.pt-pop-foretext.no-date em { color: var(--muted); }
.pt-pop-foretext-add {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.pt-pop-details-body { padding-top: 8px; }

[data-theme="dark"] .pt-pop-state-validated {
  background: color-mix(in srgb, var(--success) 14%, transparent);
}

/* V6.7.164 — Section "Ignorer" dans le popover */
.pt-pop-ignore-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.pt-pop-ignore-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.pt-pop-ignore-btn:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--subtle);
}
.pt-pop-ignored-info {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pt-pop-ignored-badge {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 2px 8px;
  font-size: 10px; font-weight: 700;
  background: var(--muted); color: var(--card);
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pt-pop-ignored-reason { font-size: 13px; color: var(--text); line-height: 1.4; }
.pt-pop-ignored-note {
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
  font-style: italic;
}

.pt-step.locked {
  opacity: 0.5;
}

/* Sautée : optionnelle passée (une étape suivante a été validée directement) */
.pt-step.skipped {
  opacity: 0.55;
  background: var(--subtle);
}
.pt-step.skipped .pt-step-name { text-decoration: line-through; }
.pt-step.skipped .pt-step-state { color: var(--text-muted); font-size: 15px; }

/* Étape rajoutée : insérée dans la config après que ce projet l'ait déjà dépassée.
   Look neutre / informationnel (pas un "reproche" visuel envers le CdP). */
.pt-step.added-after {
  border-style: solid;
  border-color: var(--primary);
  background: rgba(0, 67, 255, 0.06);
  color: var(--text);
  opacity: .85;
  position: relative;
}
.pt-step.added-after .pt-step-icon  { opacity: .75; }
.pt-step.added-after .pt-step-name  { font-weight: 500; }
.pt-step.added-after .pt-step-state { color: var(--primary); font-size: 16px; }
/* Badge "AJOUTÉE" en haut de la boîte */
.pt-step.added-after::after {
  content: 'AJOUTÉE';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.3;
  white-space: nowrap;
}
/* Neutralise les autres modificateurs — on veut un look stable, pas de late/skipped */
.pt-step.added-after.late    { background: rgba(0, 67, 255, 0.06); border-color: var(--primary); }
.pt-step.added-after.skipped { opacity: .85; background: rgba(0, 67, 255, 0.06); }
.pt-step.added-after.skipped .pt-step-name { text-decoration: none; }
.pt-step.added-after.optional { border-color: var(--primary); background: rgba(0, 67, 255, 0.06); }
.pt-step.added-after.optional::before { display: none; } /* masque "OPT" — on garde "AJOUTÉE" */

/* Non suivie : l'étape n'a pas été suivie sur ce projet (ni validée, ni en retard) */
.pt-step.not-tracked {
  border-style: dashed;
  border-color: var(--text-muted);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(0,0,0,0.04) 6px,
      rgba(0,0,0,0.04) 12px
    );
  color: var(--text-muted);
  opacity: .8;
}
.pt-step.not-tracked .pt-step-name  { text-decoration: line-through; color: var(--text-muted); }
.pt-step.not-tracked .pt-step-icon  { filter: grayscale(1); opacity: .7; }
.pt-step.not-tracked .pt-step-state { color: var(--text-muted); font-size: 16px; }
/* Non suivie prend le pas sur les autres états visuels (late, skipped, etc.) */
.pt-step.not-tracked.late { background: transparent; border-color: var(--text-muted); }
.pt-step.not-tracked.optional { border-color: var(--text-muted); }
.pt-step.not-tracked.optional::before { background: var(--text-muted); }

.pt-step.optional {
  border-style: dashed;
  border-width: 2px;
  border-color: var(--warning);
  background: repeating-linear-gradient(
    45deg,
    var(--subtle),
    var(--subtle) 6px,
    transparent 6px,
    transparent 12px
  );
}
.pt-step.optional::before {
  content: 'OPT';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warning);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.3;
}
/* Une optionnelle validée reprend le vert */
.pt-step.optional.done {
  border-color: var(--success);
  background: var(--success-bg);
}
/* Une optionnelle en retard reprend le rouge */
.pt-step.optional.late {
  border-color: var(--error);
}

.pt-step.current {
  box-shadow: 0 0 0 2px var(--primary);
  background: rgba(0, 67, 255, 0.06);
  border-color: var(--primary);
}
.pt-step.current .pt-step-state { color: var(--primary); }

.pt-step.final { border-width: 2px; }
.pt-step.final .pt-step-icon { filter: drop-shadow(0 0 2px var(--warning)); }

/* V6.7.432 — Pseudo-step « Terminé » : visuel doré quand validée,
   subtil quand à venir, click pour basculer (cf. _wireCompletionGlobal). */
.pt-step.pt-step-completion {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--success, #10b981) 50%, var(--border, #d1d5db));
}
.pt-step.pt-step-completion:not(.validated) .pt-step-icon { opacity: 0.55; filter: none; }
.pt-step.pt-step-completion.validated {
  border-style: solid;
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  border-color: var(--success, #10b981);
}
.pt-step.pt-step-completion.validated .pt-step-icon { filter: drop-shadow(0 0 3px var(--success, #10b981)); opacity: 1; }
.pt-step.pt-step-completion.validated .pt-step-name { font-weight: 700; color: var(--success, #10b981); }
.pt-step.pt-step-completion.validated .pt-step-state { color: var(--success, #10b981); }
.pt-step.pt-step-completion:hover {
  border-color: var(--success, #10b981);
  background: color-mix(in srgb, var(--success, #10b981) 8%, transparent);
}

/* Retard : accentuation indépendante du done/locked */
.pt-step.late {
  border-color: var(--error);
  background: var(--error-bg);
}
.pt-step.late.done { background: var(--success-bg); }

.pt-late-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 2;
}

.pt-arrow {
  align-self: center;
  color: var(--border);
  font-size: 16px;
  user-select: none;
}

.pt-loading, .pt-error {
  padding: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.pt-error { color: var(--error); }

/* Cases cliquables */
.pt-step.clickable { cursor: pointer; }
.pt-step.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.03);
}

/* ── Modal de validation ────────────────────────────────── */
.pt-modal-wrapper {
  position: fixed; inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-modal-wrapper.hidden { display: none; }
.pt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pt-modal {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.2s ease;
}
.pt-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.pt-modal-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.pt-modal-subtitle {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.pt-modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.pt-modal-close:hover { background: var(--hover); color: var(--text); }
.pt-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Modal de confirmation générique */
.pcf-modal { max-width: 480px; }
.pcf-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.pcf-message strong { color: var(--text-strong, var(--text)); }
.pt-modal-info {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.pt-modal-info.hidden { display: none; }
.pt-info-late {
  color: var(--error);
  font-weight: 600;
}
.pt-info-nt {
  color: var(--text-muted);
  font-weight: 600;
}
.pt-info-aa {
  color: var(--primary);
  font-weight: 600;
  line-height: 1.5;
}
.pt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pt-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pt-field input[type="date"],
.pt-field select {
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.pt-field input[type="date"]:focus,
.pt-field select:focus {
  border-color: var(--primary);
  background: var(--card);
}
.pt-field-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
/* Fieldset regroupant plusieurs options — ex: application rétroactive à la création d'étape */
.pt-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--subtle);
}
.pt-fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 0 6px;
}
.pt-fieldset .pt-field-hint {
  margin-bottom: 4px;
}
.pt-fieldset .pt-field-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}
.pt-fieldset .pt-field-inline input[type="radio"] { margin-top: 2px; }
.pt-fieldset .pt-field-inline em {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11.5px;
}
.pt-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.pt-btn-primary, .pt-btn-secondary, .pt-btn-danger {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.pt-btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.pt-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.pt-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.pt-btn-secondary {
  background: var(--subtle);
  color: var(--text);
  border-color: var(--border);
}
.pt-btn-secondary:hover { background: var(--hover); }
.pt-btn-danger {
  background: transparent;
  color: var(--error);
  border-color: var(--border);
}
.pt-btn-danger:hover:not(:disabled) { background: var(--error-bg); border-color: var(--error); }
.pt-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.pt-btn-danger.hidden { display: none; }

/* Bouton rouge plein (pour confirmation destructive) */
.pt-btn-danger-solid {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--error);
  background: var(--error);
  color: #fff;
  transition: all var(--transition);
}
.pt-btn-danger-solid:hover:not(:disabled) { filter: brightness(.9); }
.pt-btn-danger-solid:disabled { opacity: .6; cursor: not-allowed; }

/* Bandeau de confirmation de retrait (inline dans la modal) */
.pt-confirm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--error-bg);
  border-top: 1px solid var(--error);
  border-bottom: 1px solid var(--error);
  animation: slideDown .18s ease;
}
.pt-confirm-bar.hidden { display: none; }
.pt-confirm-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--error);
}
.pt-confirm-actions { display: flex; gap: 8px; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tags inline dans le sous-titre */
.pt-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--warning);
  color: #fff;
}
.pt-tag-final { background: var(--primary); }

/* ── Popover étape (refonte 2026-04-27o) ──────────────────
   Anchored popover : un par étape, ouvert au clic sur la box
   d'étape dans le bandeau. Permet de poser :
   - une date prévisionnelle (alerte sur home si proche/dépassée)
   - une tâche BDD Orga rattachée (sa Date d'exécution = date réelle)
   ─────────────────────────────────────────────────────────── */
.pt-pop {
  position: absolute;
  z-index: 60;
  width: min(380px, calc(100vw - 24px));
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.12s ease;
}
.pt-pop.pt-pop-below { /* flèche en haut */ }
.pt-pop.pt-pop-above { /* flèche en bas  */ }
.pt-pop-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  transform: rotate(45deg);
  left: 24px;
}
.pt-pop.pt-pop-below .pt-pop-arrow {
  top: -7px;
  border-right: none;
  border-bottom: none;
}
.pt-pop.pt-pop-above .pt-pop-arrow {
  bottom: -7px;
  border-left: none;
  border-top: none;
}
.pt-pop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
}
.pt-pop-icon { font-size: 18px; line-height: 1; }
.pt-pop-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.pt-pop-close {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.pt-pop-close:hover { background: var(--hover); color: var(--text); }
.pt-pop-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.pt-pop-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-pop-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.pt-pop-date-row,
.pt-pop-task-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-pop-date-row input[type="date"] {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
}
.pt-pop-date-row input[type="date"]:focus {
  outline: none;
  border-color: var(--primary);
}
.pt-pop-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

/* V6.7.59 — Bouton Valider + preview de la date saisie */
.pt-pop-validate {
  background: var(--primary, #3b82f6);
  color: white;
  border: 1px solid var(--primary, #3b82f6);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font);
  transition: filter 0.12s;
  white-space: nowrap;
}
.pt-pop-validate:hover { filter: brightness(1.08); }
.pt-pop-preview {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
  min-height: 14px;
}
.pt-pop-preview-ok {
  color: color-mix(in srgb, var(--success, #10b981) 80%, var(--text));
  font-style: normal;
  font-weight: 500;
}
.pt-pop-preview-error {
  color: var(--error, #f43f5e);
  font-style: normal;
  font-weight: 500;
}
.pt-pop-clear:hover { color: var(--error); border-color: var(--error); }
.pt-pop-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
/* 2026-06-11 — Champ « Date de bascule » optionnel (validation d'étape) */
.pt-pop-toggle-date {
  display: flex; flex-direction: column; gap: 5px;
  margin: 8px 0 4px; padding: 9px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
}
.pt-pop-toggle-date .pt-pop-label { font-size: 11.5px; font-weight: 600; color: var(--text); }
.pt-pop-toggle-date .pt-pop-opt { font-weight: 400; color: var(--text-muted); }
.pt-pop-toggle-date input[type="date"] {
  font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.pt-pop-toggle-date input[type="date"]:focus { outline: none; border-color: var(--primary, #0043ff); }
.pt-pop-task-wrap {
  flex: 1;
  min-width: 0;
}
.pt-pop-task-current {
  display: block;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.pt-pop-task-current a { color: var(--primary); text-decoration: none; }
.pt-pop-task-current a:hover { text-decoration: underline; }
.pt-pop-task-date {
  color: var(--text-muted);
  font-size: 11px;
}
.pt-pop-muted {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.pt-pop-secondary {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  background: var(--subtle);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.pt-pop-secondary:hover {
  background: var(--hover);
  border-color: var(--primary);
  color: var(--primary);
}
.pt-pop-late {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
}
.pt-pop-late strong { font-weight: 700; }
.pt-pop-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--subtle);
  min-height: 30px;
  display: flex;
  align-items: center;
}
.pt-pop-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}
.pt-pop-status-ok      { color: var(--success); font-weight: 600; }
.pt-pop-status-error   { color: var(--error);   font-weight: 600; }
.pt-pop-status-pending { color: var(--text-muted); font-style: italic; }

/* V6.7.222 — Bouton "Pinguer CdP" injecté dans le footer du popover Kanban.
   Cohérent avec .ptv-ping-cdp-btn (Suivi expanded). */
.pt-pop-footer .pt-pop-ping-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.pt-pop-footer .pt-pop-ping-btn:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 67, 255, 0.25);
}
.pt-pop-footer .pt-pop-ping-btn--disabled,
.pt-pop-footer .pt-pop-ping-btn--disabled:hover {
  border-color: var(--border, #e5e7eb);
  background: transparent;
  color: var(--text-muted, #9ca3af);
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Picker tâche (recherche) ── inline dans le popover */
.pt-pop-search {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  margin-bottom: 6px;
}
.pt-pop-search:focus { outline: none; border-color: var(--primary); }
.pt-pop-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  background: var(--card);
}
.pt-pop-task-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  transition: all var(--transition);
}
.pt-pop-task-item:hover {
  background: var(--hover);
  border-color: var(--primary);
}
.pt-pop-task-title { font-size: 13px; font-weight: 500; }
.pt-pop-task-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  gap: 6px;
}
.pt-pop-task-typo {
  background: var(--subtle);
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 600;
}
.pt-pop-error {
  color: var(--error);
  font-size: 12px;
  padding: 4px;
}

/* Mini formulaire de création de tâche (amélio 3 — 2026-04-27r) */
.pt-pop-create-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pt-pop-create-date {
  font-family: var(--font);
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
}
.pt-pop-create-date:focus { outline: none; border-color: var(--primary); }
.pt-pop-create-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pt-pop-create-submit {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.pt-pop-create-submit:hover {
  filter: brightness(1.05);
}

/* Date affichée sur la box d'étape — distingue prévi (pointillé) / réelle / vide */
.pt-step-date.pt-date-real     { color: var(--success); font-weight: 600; }
.pt-step-date.pt-date-forecast { color: var(--text-muted); font-style: italic; }
.pt-step-date.pt-date-empty    { color: var(--text-muted); opacity: .6; font-style: italic; }

/* Étape avec data posée (date prévi OU tâche) — léger contour bleu */
.pt-step.has-data:not(.done):not(.late):not(.current) {
  border-color: rgba(0, 67, 255, 0.4);
  background: rgba(0, 67, 255, 0.03);
}

/* ── Toggle vue Calendrier / Liste ──────────────────────── */
.proj-view-switch {
  display: flex;
  padding: 10px 14px 8px;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.proj-view-switch.hidden { display: none; }
.proj-view-btn[data-view] {
  flex: 1;
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
  /* V6.7.126 — Centre icône + label horizontalement et verticalement (sinon le
     `flex:1` étalait le contenu à gauche). */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.proj-view-btn[data-view] .tab-icon { display: inline-flex; align-items: center; line-height: 1; }
.proj-view-btn[data-view] .tab-icon svg { display: block; }
.proj-view-btn[data-view]:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.proj-view-btn[data-view]:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.proj-view-btn[data-view].active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── calInner (wrapper contenu calendrier) ──────────────── */
#calInner { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#calInner.hidden { display: none; }

/* ── Vue liste tâches du projet ─────────────────────────── */
.proj-list-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.proj-list-panel.hidden { display: none; }
.mod-tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.mod-tasks-title { font-weight: 600; font-size: 14px; }
.mod-tasks-actions { display: flex; gap: 4px; }
/* Refresh silencieux : bouton 🔄 tourne pendant le re-fetch */
.mod-tasks-actions .btn-icon.spinning { animation: spin 0.7s linear infinite; pointer-events: none; opacity: 0.6; }
/* Indicateur de refresh silencieux sur le panel suivi du temps */
#projTimePanel[data-refreshing]::after {
  content: '';
  position: absolute; top: 12px; right: 16px;
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}
#projTimePanel { position: relative; }
.mod-tasks-wrap {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
}

/* ── Catégories ─────────────────────────────────────────── */
.mod-category-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 8px;
}
.mod-cat-btn {
  padding: 4px 10px;
  font-size: 12px; border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.mod-cat-btn:hover  { border-color: var(--primary); color: var(--primary); }
.mod-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Boutons d'action ───────────────────────────────────── */
.mod-buttons-list { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.mod-action-btn {
  padding: 8px 12px; text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--primary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.mod-action-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.mod-action-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Tableau tâches panneau droit ───────────────────────── */
.mod-tasks-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.mod-tasks-table th {
  padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.mod-task-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.mod-task-row:hover { background: var(--hover); }
.mod-task-row td { padding: 9px 10px; vertical-align: middle; }
.mod-task-title { font-weight: 500; max-width: 220px; }
.mod-task-date  { white-space: nowrap; color: var(--muted); font-size: 12px; }
.mod-task-typo  { color: var(--muted); font-size: 12px; }
.mod-task-reel.reel { color: var(--success, #22c55e); font-size: 12px; }
.mod-task-reel.prev { color: var(--muted); font-size: 12px; }

/* ── Statuts visuels ─────────────────────────────────────── */
.mod-task-status { width: 18px; padding: 0 6px !important; }
.mod-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mod-status-dot--past    { background: #f43f5e; }
.mod-status-dot--soon    { background: #f97316; }
.mod-status-dot--future  { background: #22c55e; }
.mod-status-dot--nodate  { background: var(--border); }

/* ── Ligne prochaine échéance ────────────────────────────── */
.mod-task-row--next { background: rgba(59,130,246,.07) !important; }
.mod-task-row--next:hover { background: rgba(59,130,246,.13) !important; }
.mod-next-badge { font-size: 12px; }
.mod-task-date--next { color: #3b82f6 !important; font-weight: 600; }

/* ── Ligne passée — atténuée ─────────────────────────────── */
.mod-task-row--past { opacity: .55; }
.mod-task-row--past:hover { opacity: .8; }

/* ─────────────────────────────────────────────────────────── */
/* V6.7.36 — Sélection multi-tâches & barre d'action en lot   */
/* ─────────────────────────────────────────────────────────── */

/* Checkbox column dans le table */
.mod-tasks-table--bulk .mod-th-check,
.mod-tasks-table--bulk .mod-task-check {
  width: 28px;
  padding: 4px 4px 4px 8px;
  text-align: center;
}
.mod-row-check, .mod-tasks-table--bulk #modSelectAll {
  cursor: pointer;
  accent-color: var(--primary, #3b82f6);
  width: 14px; height: 14px;
}

/* Ligne sélectionnée — fond bleuté discret */
.mod-task-row--selected {
  background: color-mix(in srgb, var(--primary, #3b82f6) 8%, transparent) !important;
}
.mod-task-row--selected:hover {
  background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent) !important;
}

/* Cellules cliquables inline (typo / R-P) */
.mod-cell-editable {
  cursor: pointer;
  position: relative;
}
.mod-cell-editable:hover {
  background: color-mix(in srgb, var(--primary, #3b82f6) 6%, transparent);
  outline: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 25%, transparent);
  border-radius: 3px;
}
.mod-cell-saving {
  opacity: 0.5;
  pointer-events: none;
}

/* Barre d'action en lot — sticky en haut du panel */
.mod-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 30%, var(--border));
  transition: opacity 0.15s;
}
/* État vide (aucune sélection) — barre toute discrète avec hint clavier */
.mod-bulk-bar--empty {
  background: color-mix(in srgb, var(--text-muted, #64748b) 4%, transparent);
  border-style: dashed;
  border-color: var(--border);
  box-shadow: none;
  padding: 6px 12px;
  justify-content: flex-start;
}
.mod-bulk-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.mod-bulk-hint kbd {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: monospace;
  color: var(--text);
  margin: 0 2px;
}

.mod-bulk-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.mod-bulk-count strong {
  font-size: 16px;
  color: var(--primary, #3b82f6);
}
.mod-bulk-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px; height: 22px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.mod-bulk-clear:hover {
  background: color-mix(in srgb, var(--error, #f43f5e) 15%, transparent);
  color: var(--error, #f43f5e);
  border-color: var(--error, #f43f5e);
}

.mod-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mod-bulk-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
  font-family: var(--font);
}
.mod-bulk-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #3b82f6) 10%, var(--card));
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
}
.mod-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mod-bulk-btn--dup:hover:not(:disabled) {
  background: color-mix(in srgb, #10b981 10%, var(--card));
  border-color: #10b981;
  color: #10b981;
}
.mod-bulk-btn--del:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error, #f43f5e) 10%, var(--card));
  border-color: var(--error, #f43f5e);
  color: var(--error, #f43f5e);
}

/* Popover inline-edit (typo, R-P, date shift, responsable) */
.mod-inline-pop {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
  font-family: var(--font);
}
.mod-inline-pop-hd {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--primary, #3b82f6) 8%, var(--card));
  border-bottom: 1px solid var(--border);
}
.mod-inline-pop-body {
  padding: 10px 12px;
}
.mod-inline-pop-help {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.mod-inline-pop-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}
.mod-inline-pop-item {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s;
}
.mod-inline-pop-item:last-child { border-bottom: none; }
.mod-inline-pop-item:hover {
  background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
  color: var(--primary, #3b82f6);
}
.mod-inline-pop-item.is-active {
  background: color-mix(in srgb, var(--primary, #3b82f6) 6%, transparent);
  font-weight: 600;
}
.mod-inline-check {
  color: var(--primary, #3b82f6);
  font-weight: 700;
}
.mod-inline-pop-loading,
.mod-inline-pop-empty {
  padding: 12px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}
.mod-inline-pop-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font);
  background: var(--card);
  color: var(--text);
  margin-bottom: 8px;
}
.mod-inline-pop-input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
}

/* Date shift specifically */
.mod-inline-pop-shift-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.mod-inline-pop-shift-row .mod-inline-pop-input {
  margin-bottom: 0;
  flex: 1;
}
.mod-inline-pop-unit {
  font-size: 12px;
  color: var(--text-muted);
}
.mod-inline-pop-shift-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.mod-inline-pop-btn-cancel,
.mod-inline-pop-btn-confirm {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
}
.mod-inline-pop-btn-cancel {
  background: var(--card);
  color: var(--text);
}
.mod-inline-pop-btn-confirm {
  background: var(--primary, #3b82f6);
  color: white;
  border-color: var(--primary, #3b82f6);
  font-weight: 600;
}
.mod-inline-pop-btn-confirm:hover { filter: brightness(1.1); }
.mod-inline-pop-btn-cancel:hover { background: var(--subtle); }


/* ── Barre filtres ───────────────────────────────────────── */
.mod-list-filterbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.mod-list-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.mls-total  { font-weight: 600; color: var(--text); }
.mls-past   { color: #f43f5e; }
.mls-soon   { color: #f97316; }
.mls-future { color: #22c55e; }
.mls-nodate { color: var(--text-muted); }
.mod-list-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mod-list-ctrl-btn {
  font-family: var(--font);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--hover);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.mod-list-ctrl-btn:hover    { background: var(--border); }
.mod-list-ctrl-btn.active   { background: var(--primary); border-color: var(--primary); color: #fff; }
.mod-list-ctrl-sel {
  font-family: var(--font);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--hover);
  color: var(--text);
  cursor: pointer;
}
.mod-list-export-btn { margin-left: auto; }
.mod-list-typo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mod-list-pill {
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.mod-list-pill:hover  { border-color: var(--primary); color: var(--primary); }
.mod-list-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ══════════════════════════════════════════════════════════
   POPUP CRÉATION DE TÂCHES
   ══════════════════════════════════════════════════════════ */
.mod-task-popup {
  max-width: 1200px; width: calc(100vw - 40px);
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.mod-popup-body {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 12px 0 0;
}
/* Sélecteur de rattachement à un projet (vue mission) */
.mod-popup-proj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 10px;
  background: var(--surface-alt, rgba(59,130,246,.04));
  border-bottom: 1px solid var(--border);
}
.mod-proj-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.mod-proj-sel {
  min-width: 200px;
  max-width: 360px;
  flex: 1;
}
.mod-popup-table-wrap {
  flex: 1; overflow-y: auto;
  padding: 0 16px;
}
/* 2026-06-10 — Édition groupée par colonne (popup création modulaire) */
.mod-th-flex { display: inline-flex; align-items: center; gap: 5px; }
.mod-colbulk-btn {
  border: none; background: transparent; cursor: pointer; padding: 2px 4px;
  border-radius: 5px; font-size: 13px; line-height: 1;
  color: var(--primary, #0043ff); opacity: .9;
  transition: opacity .12s, background .12s;
}
.mod-colbulk-btn:hover { opacity: 1; background: var(--accent-soft, rgba(0,67,255,.12)); }
.mod-colbulk-ico { width: 14px; height: 14px; display: block; }
#modPopupSelectAll { cursor: pointer; }
/* Mini-popover ancré sous l'icône de colonne */
.mod-colbulk-pop {
  position: fixed; z-index: 100000; min-width: 220px; max-width: 280px;
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
  font-size: 12.5px;
}
/* Variante Responsable : le picker Avail déploie sa liste juste sous le champ.
   On supprime le padding bas pour que cette liste prolonge le popover au lieu
   de le chevaucher. */
.mod-colbulk-pop--resp { min-width: 260px; padding-bottom: 4px; }
.mod-colbulk-pop--resp .mod-avail-slot { margin-bottom: 0; }
.mod-colbulk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mod-colbulk-head-lbl { font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mod-colbulk-input { width: 100%; font-size: 13px; padding: 5px 7px; box-sizing: border-box; }
.mod-colbulk-hint { font-size: 11px; color: var(--muted); }
.mod-colbulk-gcal { display: flex; gap: 8px; }
.mod-colbulk-apply {
  border: none; background: var(--accent, #0043ff); color: #fff;
  padding: 6px 12px; border-radius: 7px; font-size: 12.5px; cursor: pointer;
}
.mod-colbulk-apply:hover { filter: brightness(1.06); }
.mod-colbulk-apply--ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.mod-colbulk-pop .mod-avail-slot { min-width: 100%; }
.mod-popup-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.mod-popup-table th {
  padding: 6px 8px; text-align: left;
  font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; background: var(--card);
}
.mod-popup-table td { padding: 6px 4px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.col-check  { width: 32px; text-align: center; }
.col-title  { min-width: 220px; }
.col-resp   { width: 220px; }
.col-typo   { width: 190px; }
.col-date   { width: 170px; }
.col-gcal   { width: 90px; text-align: center; white-space: nowrap; }
.col-actions{ width: 70px; text-align: center; white-space: nowrap; }

/* Colonne GCal dans le popup modulaire */
.mod-gcal-label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; font-size: 13px; user-select: none;
}
.mod-gcal-label input { cursor: pointer; accent-color: var(--accent); }
.btn-mod-gcal-guests {
  display: inline-block; margin-top: 4px;
  font-size: 11px; padding: 2px 6px;
  border-radius: 4px; border: 1px solid var(--border);
  background: var(--subtle); cursor: pointer; color: var(--text);
}
.btn-mod-gcal-guests:hover { background: var(--bg-alt); }
.gcal-guest-count {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: var(--accent); color: #fff;
  border-radius: 10px; padding: 0 5px; margin-left: 3px;
  vertical-align: middle;
}
.mod-input-title,
.mod-input-resp,
.mod-sel-typo,
.mod-sel-option,
.mod-input-date {
  width: 100%; padding: 4px 6px;
  font-size: 12px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text);
}
.col-option { width: 90px; }
.mod-sel-option:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--muted);
  border-style: dashed;
}
.mod-input-date { font-size: 11px; }
.mod-popup-table tr.row-unchecked { opacity: .45; }
.mod-popup-actions {
  padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.mod-popup-hint { font-size: 11px; color: var(--muted); }
.mod-prefix-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mod-prefix-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.mod-prefix-input {
  width: 120px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.mod-prefix-input:focus { border-color: var(--primary); }
.mod-prefix-input::placeholder { color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   MODAL NOUVELLE MISSION
   ══════════════════════════════════════════════════════════ */
.nm-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nm-input {
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  color: var(--text);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.nm-input:focus { border-color: var(--accent); background: var(--card); }
.nm-loading { font-size: 12px; color: var(--muted); }

/* Marque searchable */
.nm-marque-wrap { position: relative; }
.nm-marque-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
}
.nm-marque-dropdown.hidden { display: none; }
.nm-marque-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.nm-marque-option:hover { background: var(--subtle); }
.nm-marque-acronym { color: var(--muted); font-size: 11px; }
.nm-marque-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); }

/* Accès Client chips */
.nm-access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 0;
}
.nm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--accent-light, #e8f0fe);
  color: var(--accent, #1a73e8);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.nm-chip--warn {
  background: #fff3cd;
  color: #856404;
}
.nm-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
  opacity: 0.6;
}
.nm-chip-remove:hover { opacity: 1; }
.nm-access-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nm-access-row .nm-input { flex: 1; }
.nm-add-btn { white-space: nowrap; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   POPUP DÉTAIL TÂCHE
   ══════════════════════════════════════════════════════════ */
.mod-detail-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mod-detail-left, .mod-detail-right { display: flex; gap: 8px; align-items: center; }
/* Footer alternatif : confirmation inline de suppression (remplace le confirm() natif) */
.mod-detail-confirm {
  background: color-mix(in srgb, var(--error, #ef4444) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--error, #ef4444) 30%, transparent);
}
.mod-detail-confirm-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--error, #ef4444);
}
.mod-detail-confirm-actions { display: flex; gap: 8px; align-items: center; }

/* ══════════════════════════════════════════════════════════
   ACTIONS DANGEREUSES : projet/mission (double confirmation)
   ══════════════════════════════════════════════════════════ */

/* Bouton ⚠️ dans le header du picker projet/mission */
.btn-icon-danger {
  color: var(--error, #ef4444);
}
.btn-icon-danger:hover {
  background: color-mix(in srgb, var(--error, #ef4444) 12%, transparent);
}

/* Popover ouvert au clic sur le bouton ⚠️ — propose les actions destructives */
.danger-actions-pop {
  position: fixed;
  z-index: 9000;
  min-width: 320px;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.danger-action-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition);
}
.danger-action-btn:hover {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}
.danger-action-btn--critical:hover {
  background: color-mix(in srgb, var(--error, #ef4444) 10%, transparent);
  border-color: color-mix(in srgb, var(--error, #ef4444) 35%, transparent);
}
.danger-action-icon { font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
.danger-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.danger-action-title { font-weight: 600; font-size: 0.92rem; }
.danger-action-sub   { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }

/* V6.7.428 — Modale décalage de créneaux */
.shift-slots-modal .modal-header { background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent); }
.shift-slots-target {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border-left: 3px solid var(--primary, #0043ff);
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--text, #111827);
}
.shift-slots-row { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.shift-slots-row label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem; color: var(--text, #111827);
}
.shift-date-input {
  padding: 6px 10px; border: 1px solid var(--border, #d1d5db); border-radius: 6px;
  font-size: 0.92rem; background: var(--bg, #fff); color: var(--text, #111827);
}
.shift-slots-delta {
  margin: 12px 0; padding: 8px 12px; text-align: center;
  font-weight: 600; font-size: 0.95rem;
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  border-radius: 6px; color: var(--primary, #0043ff);
}
.shift-slots-preview {
  margin: 12px 0; padding: 10px 12px;
  background: var(--surface-2, #f9fafb); border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; font-size: 0.86rem; max-height: 280px; overflow-y: auto;
}
.shift-slots-hint { color: var(--muted, #6b7280); font-style: italic; }
.shift-slots-preview ul { margin: 4px 0 0; padding-left: 18px; }
.shift-slots-preview li { margin: 3px 0; line-height: 1.4; }
.shift-slots-preview .shift-li-conflict { color: var(--warning, #d97706); }
.shift-slots-preview .shift-li-mirror   { color: var(--text-muted, #6b7280); }
.shift-slots-preview .shift-li-skipped  { color: var(--error, #ef4444); }
.shift-slots-summary {
  font-weight: 600; margin-bottom: 6px; color: var(--text, #111827);
}
.shift-slots-progress {
  margin-top: 10px; height: 6px; background: var(--border, #e5e7eb); border-radius: 3px; overflow: hidden;
}
.shift-slots-progress-fill {
  height: 100%; width: 0%; background: var(--primary, #0043ff); transition: width .2s;
}
body.dark .shift-date-input,
[data-theme="dark"] .shift-date-input { background: var(--surface-2, #1f2937); color: var(--text, #f3f4f6); }
body.dark .shift-slots-preview,
[data-theme="dark"] .shift-slots-preview { background: var(--surface-2, #1f2937); }

/* Modal de confirmation double-niveau */
.danger-confirm-modal .modal-header { background: color-mix(in srgb, var(--error, #ef4444) 10%, transparent); }
.danger-desc {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.danger-desc strong { color: var(--error, #ef4444); }
.danger-impact {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error, #ef4444);
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.danger-impact-spinner { color: var(--muted); font-style: italic; }
.danger-impact ul { margin: 4px 0 0; padding-left: 18px; }
.danger-impact li { margin: 2px 0; }
.danger-step { margin: 12px 0; }
.danger-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--error, #ef4444) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--error, #ef4444) 25%, transparent);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.45;
  user-select: none;
}
.danger-check input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.danger-step-2-label { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }
.danger-code {
  display: inline-block;
  padding: 8px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: var(--subtle);
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--error, #ef4444);
  user-select: all;
  margin-bottom: 8px;
}
#dangerCodeInput {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  text-transform: uppercase;
  box-sizing: border-box;
}
#dangerCodeInput:focus {
  outline: none;
  border-color: var(--error, #ef4444);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--error, #ef4444) 15%, transparent);
}
#dangerCodeInput.is-match {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 15%, transparent);
}
.danger-progress { margin-top: 14px; }
.danger-progress-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.danger-progress-bar {
  height: 8px;
  background: var(--subtle);
  border-radius: 4px;
  overflow: hidden;
}
.danger-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--error, #ef4444);
  transition: width .2s ease;
}
.btn-danger {
  padding: 7px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--error, #ef4444); color: #fff;
  font-size: 13px; cursor: pointer;
}
.btn-danger:hover { opacity: .85; }
.btn-notion-link {
  text-decoration: none; display: inline-flex; align-items: center;
  padding: 7px 14px; font-size: 13px;
}
.md-gcal-bar { padding-top: 6px; }
.gcal-linked { font-size: 12px; color: var(--primary); }

/* 2026-06-02 — Combobox « Rattaché à » (détail tâche) */
.md-projcombo { position: relative; }
.md-projcombo > input[type="text"] {
  width: 100%; box-sizing: border-box;
}
.md-projcombo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30;
  max-height: 240px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.md-projcombo-list.hidden { display: none; }
.md-projopt {
  padding: 7px 11px; font-size: 13px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-projopt:hover { background: var(--subtle); }
.md-projopt.is-cur { color: var(--primary); font-weight: 600; }
.md-projopt-all {
  font-weight: 600; color: var(--primary); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface, #fff);
}
.md-projempty { color: var(--muted); cursor: default; font-style: italic; }

/* ══════════════════════════════════════════════════════════
   AVAIL — Sélecteur responsable + vérification disponibilité
   ══════════════════════════════════════════════════════════ */

/* ── Compact (dans le popup de création de tâches) ──────── */
/* ── Multi-resp selector ─────────────────────────────────── */
.avail-multi-wrap { width: 100%; }
.avail-multi-top  { display: flex; align-items: center; gap: 4px; width: 100%; }
.avail-multi-trigger {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left; padding: 4px 7px; font-size: 12px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text); cursor: pointer;
}
.avail-multi-trigger:hover { background: var(--hover); }
.avail-multi-count {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--accent); color: #fff;
  border-radius: 9px; padding: 0 5px; margin-left: 3px; vertical-align: middle;
}
/* Panel (portal → body) */
.avail-multi-panel {
  position: fixed; z-index: 99999;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 240px; max-width: 280px; max-height: 360px;
  overflow-y: auto; overflow-x: hidden;
  font-size: 12px; color: var(--text);
}
.avail-mp-search-row { padding: 8px 10px 4px; position: sticky; top: 0; background: var(--card); z-index: 1; border-bottom: 1px solid var(--border); }
.avail-mp-search {
  width: 100%; padding: 4px 8px; font-size: 12px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text); box-sizing: border-box;
}
.avail-mp-section { padding: 6px 0; border-bottom: 1px solid var(--border); }
.avail-mp-section:last-child { border-bottom: none; }
.avail-mp-label { padding: 2px 10px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.avail-mp-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; cursor: pointer; transition: background .1s;
}
.avail-mp-row:hover { background: var(--hover); }
.avail-mp-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.avail-mp-ext { cursor: default; }
.avail-mp-ext:hover { background: none; }
.avail-mp-ext-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.amp-del-ext { flex-shrink: 0; font-size: 10px; padding: 1px 4px; opacity: .6; }
.amp-del-ext:hover { opacity: 1; }
.avail-mp-email-row {
  display: flex; gap: 5px; padding: 5px 10px;
}
.amp-email-input {
  flex: 1; padding: 4px 6px; font-size: 12px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text);
}
.amp-email-add { flex-shrink: 0; padding: 4px 10px; font-size: 13px; font-weight: 700; }
/* Nom de la personne dans le tooltip de conflit multi-perso */
.avail-tt-person { display: block; font-weight: 600; font-size: 11px; color: var(--accent); margin-top: 4px; }

.avail-compact {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; width: 100%;
}
.avail-compact-sel {
  flex: 1; min-width: 0;
  padding: 4px 6px; font-size: 12px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text);
}
.avail-compact-btn {
  flex-shrink: 0;
  padding: 3px 6px; font-size: 13px; line-height: 1;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--subtle); color: var(--text); cursor: pointer;
  transition: background .15s;
}
.avail-compact-btn:hover { background: var(--hover); }
.avail-compact-btn:disabled { opacity: .5; cursor: wait; }

/* ── Compact status + tooltip ───────────────────────────── */
.avail-compact-status { position: relative; flex-shrink: 0; }
.avail-icon {
  font-size: 14px; line-height: 1; cursor: default;
  display: inline-block; min-width: 18px; text-align: center;
}
.avail-icon.avail-ok   { color: var(--success); }
.avail-icon.avail-warn { color: var(--warning); cursor: help; }
.avail-icon.avail-error{ color: var(--error); }

.avail-tooltip {
  position: fixed; z-index: 99999;
  min-width: 220px; max-width: 320px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px 10px;
  font-size: 12px; color: var(--text);
  pointer-events: none;
}
.avail-tooltip.hidden { display: none; }
.avail-tt-title {
  font-weight: 600; margin-bottom: 6px;
  color: var(--warning); font-size: 12px;
}
.avail-tt-item {
  padding: 4px 0; border-top: 1px solid var(--border);
  line-height: 1.4;
}
.avail-tt-src  { color: var(--muted); font-size: 11px; }
.avail-tt-lbl  { font-weight: 500; }
.avail-tt-time { color: var(--muted); font-size: 11px; }

/* ── Inline (dans les modals de création détaillée) ─────── */
.avail-inline { display: flex; flex-direction: column; gap: 6px; }
.avail-inline-row { display: flex; align-items: center; gap: 8px; }
.avail-inline-label {
  font-size: 12px; font-weight: 600;
  color: var(--muted); white-space: nowrap; min-width: 90px;
}
.avail-inline-controls { display: flex; align-items: center; gap: 6px; flex: 1; }
.avail-select {
  flex: 1; padding: 6px 8px;
  font-size: 13px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--subtle); color: var(--text);
}
.avail-check-btn {
  padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--subtle); color: var(--text); cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.avail-check-btn:hover { background: var(--hover); }
.avail-check-btn:disabled { opacity: .5; cursor: wait; }
.avail-status-wrap { position: relative; display: flex; align-items: center; }
.avail-email-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 0 98px;
}
.avail-email-row.hidden { display: none; }
.avail-email-input {
  flex: 1; padding: 6px 8px; font-size: 13px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--subtle); color: var(--text);
}
.avail-email-note { font-size: 11px; color: var(--muted); white-space: nowrap; }
.avail-cal-btn { font-size: 14px; line-height: 1; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   MINI CALENDRIER AVAIL — popup planning d'une personne
   ══════════════════════════════════════════════════════════ */
.avail-mini-cal {
  position: fixed;
  z-index: 10200;
  width: min(540px, calc(100vw - 16px));
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 36px rgba(0,0,0,.20);
  overflow: hidden;
  font-size: 12px;
  user-select: none;
}
.amc-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg2, #f9fafb);
  cursor: grab;
}
.amc-header:active { cursor: grabbing; }
.amc-label {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.amc-member {
  font-size: 11px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  font-weight: 500;
}
.amc-today-btn {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: var(--card, #fff);
  cursor: pointer;
  color: var(--text, #374151);
  line-height: 1.5;
  flex-shrink: 0;
}
.amc-today-btn:hover { background: var(--hover, #f3f4f6); }
.amc-legend {
  display: flex;
  gap: 10px;
  padding: 3px 10px;
  background: var(--bg2, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 10px;
  color: var(--muted, #6b7280);
}
.amc-leg { display: flex; align-items: center; gap: 3px; }
.amc-leg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.amc-body {
  overflow-y: auto;
  max-height: 420px;
}
.amc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 120px;
  color: var(--muted, #9ca3af);
  font-size: 12px;
}
.amc-grid-wrap {
  display: flex;
  align-items: flex-start;
}
.amc-time-axis {
  width: 38px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border, #e5e7eb);
  position: sticky;
  left: 0;
  background: var(--card, #fff);
  z-index: 2;
}
.amc-axis-spacer { flex-shrink: 0; }
.amc-hour-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 4px 0 0;
  font-size: 9px;
  color: var(--muted, #9ca3af);
  flex-shrink: 0;
  box-sizing: border-box;
}
.amc-week-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.amc-week-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--card, #fff);
  z-index: 3;
}
.amc-wdh {
  padding: 4px 2px 3px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  border-left: 1px solid var(--border, #e5e7eb);
  line-height: 1.3;
}
.amc-wdh:first-child { border-left: none; }
.amc-wdh-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text, #374151);
}
.amc-wdh-num.amc-today,
.amc-wdh.amc-today    { color: var(--accent, #3b82f6); }
.amc-wdh.amc-today .amc-wdh-num {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 11px;
}
.amc-allday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  min-height: 18px;
  position: sticky;
  top: 28px; /* height of .amc-week-headers */
  background: var(--card, #fff);
  z-index: 2;
}
.amc-ad-cell {
  padding: 1px 2px;
  border-left: 1px solid var(--border, #e5e7eb);
  min-height: 4px;
}
.amc-ad-cell:first-child { border-left: none; }
.amc-ad-chip {
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  cursor: default;
}
.amc-week-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
}
.amc-day-col {
  position: relative;
  border-left: 1px solid var(--border, #e5e7eb);
}
.amc-day-col:first-child { border-left: none; }
.amc-day-col.amc-today { background: rgba(59,130,246,.03); }
.amc-hour-row {
  border-bottom: 1px solid rgba(0,0,0,.05);
  box-sizing: border-box;
  width: 100%;
}
.amc-hour-row:nth-child(even) { background: rgba(0,0,0,.012); }
.amc-event {
  position: absolute;
  border-radius: 2px;
  padding: 1px 2px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: default;
  font-size: 9px;
  line-height: 1.3;
}
.amc-ev-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amc-ev-time { font-size: 8px; opacity: .75; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   R/P BADGE — Réel / Prévisionnel sur les blocs calendrier
   ══════════════════════════════════════════════════════════ */
.cal-block-rp {
  position: absolute;
  bottom: 8px;
  right: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  z-index: 3;
  user-select: none;
  line-height: 1.4;
  transition: opacity .15s;
}
.cal-block-rp:hover { opacity: .75; }
.cal-block-rp.rp-reel { background: rgba(0,67,255,.18); color: #0043ff; }
.cal-block-rp.rp-prev { background: rgba(0,0,0,.10); color: var(--muted); }

/* V6.7.388 — Toggle prévisionnel (3 états : normal / dim / hidden) appliqués
   via data-attribute sur #calPanel. Cible le block parent qui contient un
   badge .rp-prev (= créneau Prévisionnel). Utilise :has() — supporté Chrome
   105+, Safari 15.4+, Firefox 121+. Aucun impact pour state="normal". */
#calPanel[data-prev-display="dim"]    .cal-block:has(.rp-prev) { opacity: 0.42; }
#calPanel[data-prev-display="dim"]    .cal-block:has(.rp-prev):hover { opacity: 0.85; }
#calPanel[data-prev-display="hidden"] .cal-block:has(.rp-prev) { display: none !important; }

/* Le bouton toggle lui-même — petit indicateur visuel selon l'état */
.cal-prev-toggle {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  position: relative;
}
.cal-prev-toggle[data-state="normal"] { opacity: 1; }
.cal-prev-toggle[data-state="dim"]    { opacity: 0.55; }
.cal-prev-toggle[data-state="hidden"] { opacity: 0.4; text-decoration: line-through; }
.cal-prev-toggle[data-state="hidden"]::after {
  content: '∅';
  position: absolute;
  font-size: 10px;
  top: 1px; right: 1px;
  opacity: 0.7;
}
.cal-block--tiny .cal-block-rp { display: none; }
.cal-block--small .cal-block-rp { bottom: 2px; right: 3px; }

/* ══════════════════════════════════════════════════════════
   TEAMCAL — Calendriers équipe (lecture seule)
   ══════════════════════════════════════════════════════════ */
.teamcal-layout {
  display: flex;
  height: calc(100dvh - var(--header-h, 52px));
  background: var(--bg);
  overflow: hidden;
}
.teamcal-layout.hidden { display: none; }

/* Sidebar gauche */
.tc-sidebar {
  width: 196px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--card);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tc-sidebar-hd {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  padding: 14px 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* V6.7.280 — Bouton « Mes liens Book Me » dans la sidebar Calendriers */
.tc-bookme-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
  border-radius: 8px;
  color: var(--primary, #0043ff);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
.tc-bookme-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  border-color: var(--primary, #0043ff);
}
.tc-bookme-icon { font-size: 14px; line-height: 1; }
.tc-bookme-label { flex: 1; text-align: left; }

/* Recherche membres sidebar */
.tc-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tc-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.tc-search-input:focus { border-color: var(--primary); }
.tc-search-input::placeholder { color: var(--muted); }

.tc-pole-hd {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px;
  background: var(--primary);
  margin-top: 1px;
}
.tc-member-item {
  padding: 7px 10px 7px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  border-left: 3px solid transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-member-item:hover {
  background: rgba(0,67,255,.07);
  color: var(--primary);
  border-left-color: rgba(0,67,255,.25);
}
/* 2026-06-10 — Calendrier « Production (toute l'équipe) » : item spécial */
.tc-member-item--special .tc-member-name { font-weight: 600; }
.tc-member-item--special:hover { background: rgba(16,185,129,.08); color: #059669; border-left-color: rgba(16,185,129,.35); }
.tc-member-item.active {
  background: rgba(0,67,255,.11);
  color: var(--primary);
  font-weight: 700;
  border-left-color: var(--primary);
}
.tc-loading { padding: 12px; font-size: 12px; color: var(--muted); }

/* Squelette de chargement sidebar */
@keyframes tc-skel-pulse {
  0%, 100% { opacity: .45; }
  50%       { opacity: .9; }
}
.tc-skel-group {
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
}
.tc-skel-hd {
  height: 9px;
  margin: 4px 12px 8px;
  border-radius: 4px;
  background: var(--primary);
  opacity: .35;
  animation: tc-skel-pulse 1.4s ease-in-out infinite;
}
.tc-skel-row {
  height: 10px;
  margin: 6px 12px 6px 20px;
  border-radius: 5px;
  background: var(--border);
  animation: tc-skel-pulse 1.4s ease-in-out infinite;
}
.tc-skel-row:nth-child(2)  { animation-delay: .1s; }
.tc-skel-row:nth-child(3)  { animation-delay: .2s; }
.tc-skel-row:nth-child(4)  { animation-delay: .3s; }
.tc-skel-row:nth-child(5)  { animation-delay: .4s; }
.tc-skel-row:nth-child(6)  { animation-delay: .5s; }

/* Zone principale */
.tc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.tc-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  height: 100%;
}

/* Header calendrier */
.tc-cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.tc-view-toggle { display: flex; gap: 2px; }
.tc-view-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
}
.tc-view-btn.active { background: var(--active-bg); color: var(--active-text); border-color: var(--active-bg); }
.tc-date-label { font-size: 13px; font-weight: 600; flex: 1; text-align: center; }

/* Body calendrier */
.tc-cal-body {
  flex: 1;
  overflow: auto;
  position: relative;
  min-height: 0;
}

/* Légende sources */
.tc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 5px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.tc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tc-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
/* 2026-06-10 — Légende interactive (3 états : normal → atténué → masqué) */
.tc-legend-item--clickable { cursor: pointer; user-select: none; padding: 1px 4px; border-radius: 5px; transition: background .12s; }
.tc-legend-item--clickable:hover { background: var(--accent-soft, rgba(0,67,255,.08)); }
.tc-legend-item.is-dimmed { opacity: .5; }
.tc-legend-item.is-dimmed .tc-legend-dot { opacity: .45; }
.tc-legend-item.is-hidden { opacity: .45; text-decoration: line-through; }
.tc-legend-item.is-hidden .tc-legend-dot { background: transparent !important; border: 1px solid var(--border); }
/* Événements atténués via la légende */
.tc-ev--dimmed { opacity: .28; }
.tc-ev--dimmed:hover { opacity: .7; }

/* Grille */
.tc-grid-wrap {
  display: flex;
  width: 100%;
}
.tc-time-axis {
  width: 46px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 5;
  border-right: 1px solid var(--border);
}
.tc-hour-label {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 10px;
  color: var(--muted);
  box-sizing: border-box;
}
.tc-week-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-week-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 4;
  flex-shrink: 0;
}
.tc-wdh {
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.tc-wdh:last-child { border-right: none; }
.tc-wdh.today { color: var(--primary); }
.tc-week-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.tc-day-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tc-day-header {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  text-transform: capitalize;
  position: sticky;
  top: 0;
  z-index: 4;
}
.tc-day-header.today { color: var(--primary); }
.tc-day-col {
  position: relative;
  border-right: 1px solid var(--border);
  cursor: crosshair;
}
.tc-day-col:last-child { border-right: none; }
.tc-day-col.today { background: rgba(0,67,255,.02); }
.tc-day-col-single { position: relative; cursor: crosshair; }
.tc-create-preview {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--primary, #3b82f6);
  opacity: 0.18;
  border-radius: 5px;
  pointer-events: none;
  z-index: 50;
}
.tc-hour-row { border-top: 1px solid var(--border); box-sizing: border-box; }
.tc-col-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  z-index: 10;
}
.tc-error { padding: 16px; color: var(--error); font-size: 13px; }

/* Événements */
.tc-event {
  position: absolute;
  border-radius: 4px;
  padding: 3px 5px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.3;
  cursor: default;
  transition: filter .1s;
}
.tc-event:hover { filter: brightness(.93); }

/* V6.7.443 — Slots éditables (responsable courant + source notion + pas all-day)
   Brillance animée pour signaler qu'on peut interagir + curseur grab.
   V6.7.451 — retiré `position: relative` qui surchargeait `position: absolute`
   de `.tc-event` → events Notion rendus 670+ px trop bas (flow naturel après
   les hour-rows). Le ::before reste containing-block par l'absolute parent. */
.tc-event--editable {
  cursor: grab;
  overflow: hidden;
}
.tc-event--editable::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    color-mix(in srgb, #fff 35%, transparent) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  animation: tcEventShimmer 3.5s ease-in-out infinite;
  border-radius: inherit;
  opacity: 0.7;
  mix-blend-mode: overlay;
}
@keyframes tcEventShimmer {
  0%   { background-position: 150% 0; }
  60%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
.tc-event--editable:hover::before { opacity: 1; }

/* Active drag : curseur grabbing + halo */
.tc-event--editable:active { cursor: grabbing; }
.tc-event--dragging {
  cursor: grabbing !important;
  box-shadow: 0 0 0 2px var(--primary, #0043ff), 0 4px 12px rgba(0,0,0,0.18);
  z-index: 12;
}
.tc-event--ghost {
  pointer-events: none;
  opacity: 0.85;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  outline: 2px solid var(--primary, #0043ff);
  z-index: 11;
}

/* Flash post-drop pour confirmer le PATCH OK */
@keyframes tcEventJustMoved {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #10b981) 80%, transparent); }
  60%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--success, #10b981) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tc-event--just-moved { animation: tcEventJustMoved 0.9s ease-out; }
.tc-event-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-event-time  { font-size: 10px; opacity: .8; }

/* V6.7.477 — Poignée resize bord bas (visible au hover du slot éditable) */
.tc-event-resize-handle {
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 6px;
  cursor: ns-resize;
  border-radius: 0 0 4px 4px;
  background: transparent;
  transition: background 0.1s;
  z-index: 3;
}
.tc-event--editable:hover .tc-event-resize-handle {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary, #0043ff) 30%, transparent) 60%, color-mix(in srgb, var(--primary, #0043ff) 50%, transparent) 100%);
}
.tc-event-resize-handle:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent) !important;
}
.tc-event--resizing {
  cursor: ns-resize !important;
  box-shadow: 0 0 0 2px var(--primary, #0043ff), 0 4px 12px rgba(0,0,0,0.15);
}
.tc-event--resizing .tc-event-resize-handle {
  background: color-mix(in srgb, var(--primary, #0043ff) 60%, transparent) !important;
}

/* V6.7.454 — Popover édition inline d'un créneau dans l'onglet Calendriers
   Click sur slot éditable → mini popover : titre / projet / option / R-P /
   description / boutons (Notion · Supprimer). Save au blur/change. */
.tc-slot-edit-pop {
  position: fixed;
  z-index: 1000;
  width: 340px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  color: var(--text, #111827);
  overflow: hidden;
  animation: tcSepFadeIn 0.12s ease-out;
}
@keyframes tcSepFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-sep-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-soft, #f9fafb);
}
.tc-sep-title {
  flex: 1; min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
  outline: none;
}
.tc-sep-title:focus,
.tc-sep-title:hover { border-color: var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.tc-sep-close,
.tc-sep-reschedule {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tc-sep-reschedule svg { width: 16px; height: 16px; }
.tc-sep-close:hover { background: rgba(0, 0, 0, 0.08); color: var(--text); }
/* V6.7.465 — Bouton reprogrammer : hover bleu (cohérent action de date) */
.tc-sep-reschedule:hover { background: rgba(0, 67, 255, 0.10); color: var(--primary, #0043ff); }
.tc-sep-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}

/* V6.7.472 — Section Rappel Discord : ligne compacte avec icône + select */
.tc-sep-reminder {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.20);
  border-radius: 6px;
}
.tc-sep-reminder-icon {
  display: inline-flex; align-items: center;
  color: #d97706;
}
.tc-sep-reminder-icon svg { width: 14px; height: 14px; }
.tc-sep-reminder-label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.tc-sep-reminder-select {
  padding: 5px 8px;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 5px;
  background: var(--bg-card, #fff);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.tc-sep-reminder-select:focus { border-color: #d97706; }
[data-theme="dark"] .tc-sep-reminder {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
}
[data-theme="dark"] .tc-sep-reminder-select {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}

/* V6.7.473 — Bouton « Répéter… » dans le bloc Date & heure */
.tc-sep-when-recurrence {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px dashed rgba(0, 67, 255, 0.30);
  color: #0043ff;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
  align-self: flex-start;
}
.tc-sep-when-recurrence svg { width: 13px; height: 13px; }
.tc-sep-when-recurrence:hover {
  background: rgba(0, 67, 255, 0.08);
  border-color: #0043ff;
  border-style: solid;
}
.tc-sep-when-recurrence:disabled { opacity: 0.5; cursor: not-allowed; }

/* V6.7.471 — Bandeau warning conflit dans le bloc Date & heure */
.tc-sep-when-conflict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 5px;
  font-size: 11px;
  color: #b45309;
  margin-top: 2px;
}
.tc-sep-when-conflict.hidden { display: none; }
.tc-sep-when-conflict svg { width: 12px; height: 12px; flex: 0 0 12px; }
.tc-sep-when-conflict strong { font-weight: 600; }
.tc-sep-conflict-item { white-space: nowrap; }
.tc-sep-conflict-item + .tc-sep-conflict-item::before { content: '·'; margin: 0 4px; opacity: 0.6; }
[data-theme="dark"] .tc-sep-when-conflict {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.40);
  color: #fcd34d;
}

/* V6.7.471 — Commentaires Notion inline (lazy load au toggle accordéon) */
.tc-sep-comments-list {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto;
}
.tc-sep-comment-item {
  padding: 6px 8px;
  background: var(--bg-soft, #f9fafb);
  border-left: 2px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 12px;
}
.tc-sep-comment-meta {
  font-size: 10px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 3px;
}
.tc-sep-comment-meta strong { color: var(--text); font-weight: 600; }
.tc-sep-comment-body { color: var(--text); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.tc-sep-comment-empty {
  padding: 8px;
  text-align: center;
  font-style: italic;
  color: var(--text-muted, #9ca3af);
  font-size: 11px;
}
.tc-sep-comment-composer {
  display: flex; gap: 6px;
  align-items: flex-end;
}
.tc-sep-comment-input {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical; min-height: 36px;
  background: var(--bg-card, #fff);
  color: var(--text);
  outline: none;
}
.tc-sep-comment-input:focus { border-color: var(--primary, #0043ff); }
.tc-sep-comment-send {
  flex: 0 0 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: var(--primary, #0043ff);
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.tc-sep-comment-send svg { width: 14px; height: 14px; }
.tc-sep-comment-send:disabled { opacity: 0.5; cursor: wait; }
[data-theme="dark"] .tc-sep-comment-item { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .tc-sep-comment-input { background: #111827; border-color: #374151; color: #f3f4f6; }

/* V6.7.470 — Sectionnement visuel (Contexte / Qui / Détails) avec micro-header
   discret + un peu d'espace entre sections pour aérer. */
.tc-sep-section {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 4px;
}
.tc-sep-section-head {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--border, #e5e7eb);
}
.tc-sep-section--collapsible { padding: 0; }
.tc-sep-section--collapsible summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  user-select: none;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
}
.tc-sep-section--collapsible summary::-webkit-details-marker { display: none; }
.tc-sep-section--collapsible summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  transition: transform 0.15s;
  margin-right: 2px;
}
.tc-sep-section--collapsible[open] summary::before { transform: rotate(90deg); }
.tc-sep-section--collapsible[open] .tc-sep-desc { margin-top: 6px; }
.tc-sep-summary-hint {
  color: var(--text-muted, #9ca3af);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  margin-left: 4px;
}

/* V6.7.470 — Activity log mini en bas du popover */
.tc-sep-activity {
  padding: 6px 12px 10px;
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg-soft, #f9fafb);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.tc-sep-activity-sep { opacity: 0.6; }
.tc-sep-activity-item { white-space: nowrap; }
[data-theme="dark"] .tc-sep-activity { background: #111827; border-color: #374151; }

/* V6.7.470 — Mode lecture seule (slot d'un autre user) */
.tc-slot-edit-pop--readonly .tc-sep-head { background: rgba(156, 163, 175, 0.10); }
.tc-sep-readonly-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  background: rgba(156, 163, 175, 0.15);
  color: var(--text-muted, #6b7280);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tc-sep-readonly-badge svg { width: 11px; height: 11px; }
/* V6.7.478 — Badge GCal-only dans le head du popover (event natif GCal) */
.tc-sep-gcal-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tc-sep-gcal-badge svg { width: 11px; height: 11px; }
.tc-slot-edit-pop--gcal .tc-sep-head { background: rgba(34, 197, 94, 0.08); }
.tc-slot-edit-pop--readonly .tc-sep-title { background: transparent; }
.tc-slot-edit-pop--readonly .tc-sep-title:hover { border-color: transparent; }
.tc-slot-edit-pop--readonly select:disabled,
.tc-slot-edit-pop--readonly textarea:disabled,
.tc-slot-edit-pop--readonly input:disabled { opacity: 0.7; cursor: default; background: var(--bg-soft, #f9fafb); }
[data-theme="dark"] .tc-slot-edit-pop--readonly select:disabled,
[data-theme="dark"] .tc-slot-edit-pop--readonly textarea:disabled,
[data-theme="dark"] .tc-slot-edit-pop--readonly input:disabled { background: #1f2937; }

/* V6.7.469 — Liste des invités pré-stagés avant création GCal */
.tc-sep-gcal-prefill-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.tc-sep-att-item--prefill {
  background: rgba(34, 197, 94, 0.10);
}

/* V6.7.470 — Chevron du bouton date du bloc Date & heure */
.tc-sep-when-date svg:last-child {
  width: 12px; height: 12px;
  color: var(--text-muted, #6b7280);
  margin-left: auto;
}

/* V6.7.466 — Bloc Date & heure : date cliquable (ouvre date picker) +
   2 inputs `time` éditables (save au change). Mini bloc compact en haut. */
.tc-sep-when {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: rgba(0, 67, 255, 0.04);
  border: 1px solid rgba(0, 67, 255, 0.12);
  border-radius: 6px;
}
.tc-sep-when-label { color: #0043ff; }
.tc-sep-when-row {
  display: flex; flex-direction: column; gap: 6px;
}
.tc-sep-when-date {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all 0.1s;
}
.tc-sep-when-date svg { width: 14px; height: 14px; color: #0043ff; }
.tc-sep-when-date:hover { background: rgba(0, 67, 255, 0.06); border-color: #0043ff; }
.tc-sep-when-date-label { flex: 1; font-weight: 500; }
.tc-sep-when-times {
  display: flex; align-items: center; gap: 6px;
}
.tc-sep-when-times input[type="time"] {
  flex: 1; min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-card, #fff);
  outline: none;
  transition: border-color 0.1s;
}
.tc-sep-when-times input[type="time"]:focus { border-color: #0043ff; }
.tc-sep-when-arrow {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  font-size: 12px;
}
[data-theme="dark"] .tc-sep-when {
  background: rgba(0, 67, 255, 0.10);
  border-color: rgba(0, 67, 255, 0.25);
}
[data-theme="dark"] .tc-sep-when-times input[type="time"] {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
.tc-sep-field { display: flex; flex-direction: column; gap: 4px; }
.tc-sep-field--half { flex: 1; min-width: 0; }
.tc-sep-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tc-sep-row { display: flex; gap: 8px; }
.tc-sep-body select,
.tc-sep-body textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}
.tc-sep-body select:focus,
.tc-sep-body textarea:focus { border-color: var(--primary, #0043ff); }
.tc-sep-body textarea { resize: vertical; min-height: 60px; }
.tc-sep-status {
  min-height: 16px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.tc-sep-status--saving { color: var(--text-muted, #6b7280); font-style: italic; }
.tc-sep-status--ok     { color: var(--success, #10b981); font-weight: 500; }
.tc-sep-status--err    { color: var(--error, #ef4444); font-weight: 500; }
.tc-sep-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg-soft, #f9fafb);
}
.tc-sep-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
}
.tc-sep-btn svg { width: 13px; height: 13px; }
.tc-sep-btn:hover { background: var(--bg-soft, #f3f4f6); border-color: var(--text-muted, #9ca3af); }
.tc-sep-btn--ghost { color: var(--text-muted); }
.tc-sep-btn--danger { color: var(--error, #ef4444); border-color: rgba(239, 68, 68, 0.3); }
.tc-sep-btn--danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--error); }

/* V6.7.456 — Section « Google Agenda » dans le popover édition :
   invités avec status + champ d'ajout + lien Meet. */
.tc-sep-gcal {
  padding: 10px;
  background: rgba(34, 197, 94, 0.06);  /* léger vert GCal */
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-sep-gcal-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: #16a34a;
  border-bottom: 1px dashed rgba(34, 197, 94, 0.25);
  padding-bottom: 6px;
}
.tc-sep-gcal-icon { display: inline-flex; align-items: center; }
.tc-sep-gcal-icon svg { width: 14px; height: 14px; }
.tc-sep-gcal-title { flex: 1; }
.tc-sep-gcal-open {
  color: #16a34a; text-decoration: none;
  padding: 2px 6px; border-radius: 4px;
  display: inline-flex; align-items: center;
  transition: background 0.1s;
}
.tc-sep-gcal-open svg { width: 13px; height: 13px; }
.tc-sep-gcal-open:hover { background: rgba(34, 197, 94, 0.15); }

/* V6.7.461 — Cas pas de jumeau : bouton « Créer l'event » */
.tc-sep-gcal--empty .tc-sep-gcal-head { border-bottom: none; padding-bottom: 4px; }
.tc-sep-gcal-empty-body {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 4px 0;
}
.tc-sep-gcal-empty-hint {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  text-align: center;
}
.tc-sep-gcal-create {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px;
  border: 1px dashed rgba(34, 197, 94, 0.5);
  background: transparent;
  color: #16a34a;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
}
.tc-sep-gcal-create svg { width: 14px; height: 14px; }
.tc-sep-gcal-create:hover {
  background: rgba(34, 197, 94, 0.08);
  border-color: #16a34a;
  border-style: solid;
}
.tc-sep-gcal-create:disabled { opacity: 0.6; cursor: wait; }

.tc-sep-att-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 110px; overflow-y: auto;
  font-size: 12px;
}
.tc-sep-att-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
[data-theme="dark"] .tc-sep-att-item { background: rgba(255, 255, 255, 0.05); }
.tc-sep-att-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.tc-sep-att-status {
  flex: 0 0 16px; height: 16px; width: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.tc-sep-att-status svg { width: 11px; height: 11px; }
.tc-sep-att-status--ok      { background: #d1fae5; color: #047857; }
.tc-sep-att-status--no      { background: #fee2e2; color: #b91c1c; }
.tc-sep-att-status--maybe   { background: #fef3c7; color: #b45309; }
.tc-sep-att-status--pending { background: #e5e7eb; color: #6b7280; }
.tc-sep-att-empty {
  color: var(--text-muted, #6b7280);
  font-style: italic;
  padding: 4px 6px;
  text-align: center;
}
/* V6.7.459 — Bouton ✕ pour retirer un invité (apparait au hover de l'item) */
.tc-sep-att-remove {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s, color 0.1s;
}
.tc-sep-att-remove svg { width: 11px; height: 11px; }
.tc-sep-att-item:hover .tc-sep-att-remove,
.tc-sep-att-remove--armed { opacity: 1; }
.tc-sep-att-remove:hover { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
.tc-sep-att-remove--armed {
  background: rgba(239, 68, 68, 0.20);
  color: #b91c1c;
  animation: tcSepAttRemoveArmed 0.8s ease-in-out infinite;
}
@keyframes tcSepAttRemoveArmed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0); }
}
/* V6.7.461 — Champ d'ajout invité revu : icône Lucide inline + input borderless
   intégré + bouton + d'ajout style icône (au lieu de texte « Ajouter »).
   Cohérent avec les comboboxes d'autres calendriers (calendar.js / access.js). */
.tc-sep-att-add {
  display: flex; align-items: center;
  gap: 0;
  margin-top: 4px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  padding-left: 8px;
  transition: border-color 0.1s;
}
.tc-sep-att-add:focus-within { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12); }
.tc-sep-att-input-icon {
  display: inline-flex; align-items: center;
  color: var(--text-muted, #6b7280);
  flex: 0 0 auto;
}
.tc-sep-att-input-icon svg { width: 14px; height: 14px; }
.tc-sep-att-input {
  flex: 1; min-width: 0;
  padding: 6px 6px 6px 8px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.tc-sep-att-btn {
  flex: 0 0 28px; height: 28px; width: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: #16a34a;
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background 0.1s;
}
.tc-sep-att-btn svg { width: 14px; height: 14px; }
.tc-sep-att-btn:hover { background: #15803d; }
.tc-sep-att-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* V6.7.462 — Combobox dropdown autocomplete des membres TF */
.tc-sep-att-add { position: relative; }
.tc-sep-att-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1010; /* au-dessus du popover (1000) */
  max-height: 220px;
  overflow-y: auto;
  animation: tcSepDdFadeIn 0.1s ease-out;
}
.tc-sep-att-dropdown.hidden { display: none; }
@keyframes tcSepDdFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-sep-att-dd-item {
  display: flex; flex-direction: column;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.08s;
}
.tc-sep-att-dd-item:hover,
.tc-sep-att-dd-item--active { background: rgba(34, 197, 94, 0.10); }
.tc-sep-att-dd-name {
  font-size: 12px; font-weight: 500;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-sep-att-dd-email {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-sep-att-dd-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.tc-sep-att-dd-empty strong { color: var(--text); font-style: normal; }
[data-theme="dark"] .tc-sep-att-dropdown {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .tc-sep-att-dd-item:hover,
[data-theme="dark"] .tc-sep-att-dd-item--active { background: rgba(34, 197, 94, 0.20); }

.tc-sep-meet {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-size: 12px;
}
[data-theme="dark"] .tc-sep-meet { background: rgba(255, 255, 255, 0.05); }
.tc-sep-meet--empty {
  color: var(--text-muted, #6b7280);
  font-style: italic;
  justify-content: center;
  padding: 4px 8px;
}
/* V6.7.459 — Bouton « Créer un Meet » quand l'event n'en a pas */
.tc-sep-meet-create {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent;
  border: 1px dashed rgba(34, 197, 94, 0.4);
  color: #16a34a;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
}
.tc-sep-meet-create svg { width: 14px; height: 14px; }
.tc-sep-meet-create:hover {
  background: rgba(34, 197, 94, 0.08);
  border-color: #16a34a;
  border-style: solid;
}
.tc-sep-meet-create:disabled { opacity: 0.6; cursor: wait; }
.tc-sep-meet-link {
  flex: 1;
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.tc-sep-meet-link svg { width: 14px; height: 14px; color: #16a34a; }
[data-theme="dark"] .tc-sep-meet-link { color: #f3f4f6; }
.tc-sep-meet-link:hover { text-decoration: underline; }
.tc-sep-meet-copy {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
}
.tc-sep-meet-copy svg { width: 13px; height: 13px; }
.tc-sep-meet-copy:hover { background: rgba(0, 0, 0, 0.06); }
[data-theme="dark"] .tc-sep-meet-copy { border-color: #374151; }
[data-theme="dark"] .tc-sep-meet-copy:hover { background: rgba(255, 255, 255, 0.08); }

/* Dark mode */
[data-theme="dark"] .tc-slot-edit-pop {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .tc-sep-head,
[data-theme="dark"] .tc-sep-footer { background: #111827; border-color: #374151; }
[data-theme="dark"] .tc-sep-body select,
[data-theme="dark"] .tc-sep-body textarea,
[data-theme="dark"] .tc-sep-att-input {
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .tc-sep-btn {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .tc-sep-btn:hover { background: #374151; }
[data-theme="dark"] .tc-sep-gcal {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}
[data-theme="dark"] .tc-sep-att-status--ok      { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; }
[data-theme="dark"] .tc-sep-att-status--no      { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
[data-theme="dark"] .tc-sep-att-status--maybe   { background: rgba(245, 158, 11, 0.25); color: #fcd34d; }
[data-theme="dark"] .tc-sep-att-status--pending { background: rgba(156, 163, 175, 0.25); color: #d1d5db; }

/* V6.7.452 — Petit dot bleu en haut-droite d'un event Notion qui a un
   jumeau dans Google Agenda (sync TFTOOL→GCal). Même esprit que
   `.cal-block-gcal-dot` du To do perso. */
.tc-event-gcal-dot {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;             /* vert Google Agenda — cohérent avec la légende */
  border: 1.5px solid white;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
[data-theme="dark"] .tc-event-gcal-dot { border-color: #1f2937; }
.tc-event-sub   { font-size: 10px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-event-src   { font-size: 9px; opacity: .6; text-transform: uppercase; letter-spacing: .3px; }
.tc-event-rp {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
}
.tc-rp-reel { background: rgba(0,0,0,.18); }
.tc-rp-prev { background: rgba(0,0,0,.09); opacity: .8; }

/* All-day row — per-column grid (tc-week-allday) */
.tc-week-allday {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
  flex-shrink: 0;
}
.tc-week-allday.hidden { display: none; }
.tc-ad-cell {
  min-height: 4px;
  padding: 2px 2px 3px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  /* V6.7.32 — FIX largeur all-day vs colonnes : sans `min-width: 0`, le
     min-content de la cellule = largeur du chip (qui a `white-space: nowrap`),
     ce qui force le `1fr` du grid parent à s'élargir → l'all-day déborde et
     n'est plus aligné avec les en-têtes / colonnes horaires. Avec min-width: 0,
     le `text-overflow: ellipsis` du chip reprend le contrôle. */
  min-width: 0;
}
.tc-ad-cell:last-child { border-right: none; }
.tc-ad-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
/* Time-axis spacer that matches allday row height */
.tc-axis-allday {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-sizing: border-box;
}

/* Tooltip teamcal */
.tc-tooltip.hidden { display: none; }
.tc-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: 10px 13px;
  min-width: 180px;
  max-width: 280px;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.5;
}
.tc-tt-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--text);
  word-break: break-word;
}
.tc-tt-time {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 2px;
}
.tc-tt-sub {
  color: var(--text);
  font-size: 11px;
  opacity: .8;
}
.tc-tt-creator {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}
.tc-tt-src {
  margin-top: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 5px;
}
.tc-tt-reel {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-top: 3px;
}
.tc-tt-reel.rp-reel { background: rgba(0,150,80,.15); color: #009650; }
.tc-tt-reel.rp-prev { background: rgba(220,120,0,.13); color: #c07000; }
.tc-tt-member {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
}

/* ── Multi-agenda : sidebar checkboxes ───────────────────────── */
.tc-sel-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
}
.tc-member-cb {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 2px solid var(--border);
  background: transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
  position: relative;
}
.tc-member-cb.checked::after {
  content: '';
  display: block;
  width: 6px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.tc-member-item.selected {
  background: rgba(0,67,255,.07);
  color: var(--text);
  border-left-color: transparent;
}
.tc-member-item.selected .tc-member-name {
  font-weight: 600;
}
.tc-member-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V6.7.104 — Toggle « afficher en colonne » (œil) sur chaque membre sélectionné */
.tc-member-eye {
  font-size: 12px;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  opacity: 0.35;
  transition: opacity .15s, background .15s;
}
.tc-member-eye:hover { background: rgba(0,0,0,0.08); opacity: 0.8; }
.tc-member-eye.active { opacity: 1; }
.tc-member-item.displayed {
  /* Léger marqueur visuel sur les membres actuellement affichés */
  box-shadow: inset 3px 0 0 0 var(--accent, #3b82f6);
}

/* ── Multi-agenda : vue jour multi-colonnes ──────────────────── */
.tc-multi-day-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: auto;
}
.tc-multi-day-hd-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tc-multi-day-title {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}
.tc-multi-day-title.today { color: var(--primary); }
.tc-multi-day-cols {
  display: flex;
  flex: 1;
  min-height: 0;
}
.tc-member-col {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.tc-member-col:last-child { border-right: none; }
.tc-member-col-hd {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.tc-member-col-hd.today { color: var(--primary); }
.tc-member-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Bouton toggle Mon Google Agenda (cal-header) ────────────── */
/* V6.7.118 — Fond bleu TF (au lieu de vert) quand activé, pour coller à
   l'identité brandée. Texte/icône en bleu primaire sur fond bleu très clair. */
.cal-gcal-toggle.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}

/* ── Bloc Google Agenda perso (fond blanc, lecture seule) ─────── */
.cal-block--gcal {
  border: 1.5px solid #94a3b8 !important;
  background: #fff !important;
  color: #334155 !important;
  opacity: .92;
}
.cal-block--gcal .cal-block-label { color: #334155; font-weight: 500; }
.cal-block--gcal .cal-block-time  { color: #64748b; }
.cal-block--gcal .cal-block-inner { background: transparent; }
/* V6.7.111 — style déplacé plus haut (avec couleur token unifié) */

/* ─────────────────────────────────────────────────────────── */
/* V6.7.38 — Distinction visuelle des blocs GCal selon le RSVP */
/* ─────────────────────────────────────────────────────────── */

/* needsAction = pas encore répondu (proposition d'invitation) :
   bordure pointillée + fond légèrement teinté pour attirer l'œil. */
.cal-block--gcal-needs-action {
  border-style: dashed !important;
  border-color: #f59e0b !important;
  background: color-mix(in srgb, #f59e0b 6%, #fff) !important;
}
.cal-block--gcal-needs-action .cal-block-label { color: #78350f !important; }

/* tentative = "Peut-être" : fond avec rayures diagonales légères. */
.cal-block--gcal-tentative {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 5px,
    color-mix(in srgb, #94a3b8 14%, transparent) 5px,
    color-mix(in srgb, #94a3b8 14%, transparent) 7px
  ) !important;
}

/* declined = "Non" : texte barré + opacité réduite. */
.cal-block--gcal-declined {
  opacity: 0.6 !important;
}
.cal-block--gcal-declined .cal-block-label,
.cal-block--gcal-declined .cal-block-time {
  text-decoration: line-through;
  color: #94a3b8 !important;
}

/* Badge RSVP en haut à droite (à côté du badge 📅 GCal en bas à droite) */
/* V6.7.111 — Adapté pour contenir un SVG Lucide (inline-flex + currentColor) */
.cal-block-rsvp-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  pointer-events: none;
  border-radius: 4px;
  padding: 2px 3px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* V6.7.112 — Variante "inline" : sur blocs compacts (<40 px), le badge RSVP
   vit dans .cal-block-br-badges (bas-droite, flex) à côté du Meet/Calendar
   au lieu de manger l'espace en haut-droite. */
.cal-block-rsvp-badge--inline {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  padding: 1px 2px;
}
.cal-block-rsvp-badge--inline svg { width: 10px; height: 10px; }
.cal-block-rsvp-badge--needs {
  background: #f59e0b;
  color: white;
}
.cal-block-rsvp-badge--tentative {
  background: #94a3b8;
  color: white;
}
.cal-block-rsvp-badge--declined {
  background: #f43f5e;
  color: white;
  font-weight: 800;
}

/* Dark mode : fonds adaptés */
[data-theme="dark"] .cal-block--gcal-needs-action {
  background: color-mix(in srgb, #f59e0b 14%, var(--card)) !important;
  border-color: #f59e0b !important;
}
[data-theme="dark"] .cal-block--gcal-needs-action .cal-block-label { color: #fbbf24 !important; }

/* ─────────────────────────────────────────────────────────── */
/* Boutons RSVP dans le popover GCal                           */
/* ─────────────────────────────────────────────────────────── */
.gcal-pop-rsvp-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.gcal-pop-rsvp-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gcal-pop-rsvp-btn {
  flex: 1;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  /* V6.7.120 — Align SVG Lucide ↔ label */
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.gcal-pop-rsvp-btn svg { display: block; flex-shrink: 0; }
/* V6.7.120 — Couleurs sémantiques par statut (au repos, l'icône colore le sens) */
.gcal-pop-rsvp-btn--yes  svg { color: #16a34a; }   /* vert oui */
.gcal-pop-rsvp-btn--no   svg { color: #dc2626; }   /* rouge non */
.gcal-pop-rsvp-btn--maybe svg { color: #f59e0b; }  /* orange peut-être */
.gcal-pop-rsvp-btn.is-active svg { color: var(--primary); }
.gcal-pop-rsvp-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #3b82f6) 8%, var(--card));
  border-color: var(--primary, #3b82f6);
}
.gcal-pop-rsvp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gcal-pop-rsvp-btn.is-active {
  background: color-mix(in srgb, var(--primary, #3b82f6) 12%, var(--card));
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--primary, #3b82f6) inset;
}
.gcal-pop-rsvp-btn.is-saving {
  position: relative;
  pointer-events: none;
}
.gcal-pop-rsvp-btn.is-saving::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary, #3b82f6) 20%, transparent);
  border-radius: inherit;
}
.gcal-pop-rsvp-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Tooltip hover blocs calendrier (vue jour + semaine) ─────── */
.cal-hover-tooltip {
  position: fixed; z-index: 99999;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: 9px 12px; min-width: 180px; max-width: 280px;
  pointer-events: none; font-size: 12px; line-height: 1.5;
}
.cal-hover-tooltip.hidden { display: none; }
.cal-tt-title  { font-weight: 700; font-size: 13px; margin-bottom: 2px; color: var(--text); word-break: break-word; }
.cal-tt-client { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 1px; display: inline-flex; align-items: center; gap: 4px; }
.cal-tt-resp   { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; display: inline-flex; align-items: center; gap: 4px; }
.cal-tt-client svg, .cal-tt-resp svg { display: block; }
.cal-tt-time   { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.cal-tt-sub    { color: var(--text); font-size: 11px; opacity: .8; margin-bottom: 2px; }
.cal-tt-typo   { color: var(--muted); font-size: 11px; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
.cal-tt-typo svg { display: block; }
.cal-tt-reel   { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

/* ── Récurrence — trigger button ────────────────────────────── */
.rec-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  width: 100%;
  text-align: left;
}
.rec-trigger-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.rec-trigger-btn.rec-active {
  border-color: var(--primary);
  background: rgba(0,67,255,.06);
  color: var(--primary);
  font-weight: 600;
}

/* ── Récurrence — picker modal ──────────────────────────────── */
/* Doit passer au-dessus de tout (y compris quick-create-popup z-index:1000
   et tout contexte d'empilement créé par des transforms parents) */
#recurrenceOverlay,
#recEditScopeOverlay,
#recDeleteScopeOverlay { z-index: 9990 !important; }

.rec-modal,
.rec-scope-modal { z-index: 9995 !important; }

.rec-modal {
  width: 480px;
  max-width: 95vw;
}
.rec-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Preset buttons row */
.rec-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rec-preset-btn {
  padding: 6px 13px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.rec-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.rec-preset-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* Custom panel */
.rec-custom-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.rec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rec-row-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.rec-num-input {
  width: 60px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  text-align: center;
}
.rec-num-input:focus { border-color: var(--primary); outline: none; }
.rec-select {
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}
.rec-select:focus { border-color: var(--primary); outline: none; }

/* Day picker */
.rec-day-picker {
  display: flex;
  gap: 4px;
}
.rec-day-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.rec-day-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.rec-day-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* End section */
.rec-end-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.rec-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.rec-end-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.rec-end-row input[type="radio"] { accent-color: var(--primary); }
.rec-end-row input[type="date"] {
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}
.rec-end-row input[type="date"]:not(:disabled):focus { border-color: var(--primary); outline: none; }
.rec-end-row input:disabled { opacity: .4; cursor: not-allowed; }

/* Preview line */
.rec-preview {
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.rec-preview strong { color: var(--primary); }

/* ── V6.7.9 — Toggle "Créneau sans client" dans la modale Récurrence ── */
.rec-no-client-section {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.rec-no-client-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.rec-no-client-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.rec-no-client-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}
.rec-no-client-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.rec-no-client-hint {
  font-size: 11.5px;
  color: var(--muted);
}

/* ── Récurrence — scope modals ──────────────────────────────── */
.rec-scope-modal {
  width: 360px;
  max-width: 95vw;
}
.rec-scope-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.rec-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-scope-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.rec-scope-btn:hover {
  border-color: var(--primary);
  background: rgba(0,67,255,.05);
  color: var(--primary);
}
.rec-scope-btn--danger {
  border-color: var(--error);
  color: var(--error);
}
.rec-scope-btn--danger:hover {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

/* ── Calendrier — badge série récurrente ────────────────────── */
.cal-pop-rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0,67,255,.10);
  color: var(--primary);
  border: 1px solid rgba(0,67,255,.18);
  margin-left: 6px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   SUIVI DU TEMPS PASSÉ
══════════════════════════════════════════════════════════ */
.proj-time-panel.hidden { display: none; }
.proj-time-panel {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* ── État vide / chargement / erreur */
.tt-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.tt-error { color: var(--error) !important; }

/* ── Lot 2+3 — Bandeau de provenance du budget ───────────────────── */
.tt-budget-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  background: var(--surface-2, #f8fafc);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.tt-budget-banner--warn {
  border-color: var(--warn, #f97316);
  background: color-mix(in srgb, var(--warn, #f97316) 10%, transparent);
}
.tt-budget-banner .tt-bb-ico { font-size: 14px; line-height: 1; }
.tt-budget-banner .tt-bb-txt { color: var(--text, #1e293b); }
.tt-budget-banner .tt-bb-hint { color: var(--muted); font-size: 11.5px; }
.tt-budget-banner .tt-bb-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.tt-budget-banner .tt-bb-actions .btn-secondary {
  font-size: 11.5px;
  padding: 3px 9px;
}

/* ── Lot 4 — Bandeau prorata « % du temps » (vue projet) ─────────── */
.tt-prorata-banner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  margin-bottom: 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid var(--primary, #0043ff);
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, var(--surface-2, #f8fafc));
  font-size: 12.5px;
}
.tt-prorata-banner--loading,
.tt-prorata-banner--empty {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-left-color: var(--border, #e2e8f0);
  background: var(--surface-2, #f8fafc);
  color: var(--muted);
}
.tt-prorata-banner .tt-pb-ico { font-size: 14px; line-height: 1; }
.tt-prorata-banner .tt-pb-txt { color: var(--muted); }
.tt-prorata-banner .tt-pb-main {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tt-prorata-banner .tt-pb-headline { color: var(--text, #1e293b); }
.tt-prorata-banner .tt-pb-pct { color: var(--primary, #0043ff); }
.tt-prorata-banner .tt-pb-detail {
  color: var(--muted);
  font-size: 11.5px;
  padding-left: 21px;
}
.tt-prorata-banner .tt-pb-detail strong { color: var(--text, #1e293b); }
.tt-prorata-banner .tt-pb-sub { color: var(--muted); }
.tt-prorata-banner .tt-pb-nobudget { font-style: italic; }
.tt-prorata-banner .tt-pb-orphan { color: var(--muted); }

/* ── Lot 2+3 — Modale de bascule de mode budget ──────────────────── */
.tt-switch-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.tt-switch-modal {
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.tt-switch-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.tt-switch-title { font-weight: 700; font-size: 14.5px; }
.tt-switch-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  line-height: 1;
}
.tt-switch-body { padding: 14px 16px; overflow-y: auto; }
.tt-switch-intro, .tt-switch-empty {
  font-size: 12.5px;
  color: var(--text, #1e293b);
  margin: 0 0 12px;
  line-height: 1.5;
}
.tt-switch-empty { color: var(--muted); }
.tt-switch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tt-switch-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.tt-switch-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--surface-2, #f1f5f9);
  vertical-align: middle;
}
.tt-switch-table .tt-sw-num { font-variant-numeric: tabular-nums; }
.tt-sw-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.tt-sw-res {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--bg, #fff);
  color: var(--text, #1e293b);
}
.tt-sw-auto { color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-sw-allsum { margin-top: 10px; font-size: 11.5px; padding: 4px 10px; }
.tt-switch-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e2e8f0);
}

/* ── Filtres réel / prévisionnel */
.tt-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tt-filter-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.tt-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tt-filter-btn:not(.active):hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Lot 1b — Réel/Prévi par catégorie ───────────────────────── */
.tt-rp-affine-btn {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1.5px dashed var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-rp-affine-btn:hover { border-color: var(--accent); color: var(--accent); }
.tt-rp-affine-btn.active { border-style: solid; border-color: var(--accent); color: var(--accent); }
.tt-rp-mixed-dot { color: var(--warn, #f97316); font-size: 9px; }
.tt-rp-affine-btn.has-overrides { border-color: var(--warn, #f97316); color: var(--warn, #f97316); }

/* Lot 5 — Bouton export XLSX (header Suivi du temps) */
.tt-export-btn {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tt-export-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, rgba(0,67,255,.06)); }
.tt-export-wrap { position: relative; margin-left: auto; display: inline-flex; }
.tt-export-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: var(--card, #fff); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px;
}
.tt-export-menu[hidden] { display: none; }
.tt-export-item {
  text-align: left; padding: 7px 10px; border: 0; background: transparent;
  border-radius: 7px; font-size: 12.5px; color: var(--text, #1e293b); cursor: pointer;
}
.tt-export-item:hover { background: var(--accent-soft, rgba(0,67,255,.08)); color: var(--accent); }

/* Bandeau « modes mixtes » remplaçant la jauge globale */
.tt-total--mixed {
  border-style: dashed;
  background: color-mix(in srgb, var(--warn, #f97316) 8%, var(--card));
}
.tt-total-mixed-msg {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.tt-total-mixed-msg strong { color: var(--warn, #f97316); }

/* Ligne d'affinage sous l'en-tête de catégorie */
.tt-rp-affine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px 6px 30px;
  font-size: 11.5px;
}
.tt-rp-affine-lbl { color: var(--muted); font-weight: 500; }
.tt-rp-cat-select {
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text, inherit);
  cursor: pointer;
}
.tt-rp-forced-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn, #f97316) 18%, transparent);
  color: var(--warn, #f97316);
}
.tt-rp-reset-agg {
  font-size: 10.5px;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.tt-rp-reset-agg:hover { opacity: .8; }
.tt-rp-mixity {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}

/* ── Card total */
.tt-total {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-total-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tt-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.tt-total-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.tt-total-days {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.tt-total-hrs {
  font-size: 13px;
  color: var(--muted);
}
.tt-total-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,67,255,.08);
  border-radius: 4px;
  padding: 1px 6px;
}
.tt-total-pct.over {
  color: #f43f5e;
  background: rgba(244,63,94,.1);
}
.tt-total-budget-block { text-align: right; }
/* Barre totale */
.tt-total-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.tt-total-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .4s ease;
}
.tt-total-bar-fill.over { background: #f43f5e; }

/* ── Liste des catégories */
.tt-cats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-cat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.tt-cat-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.tt-cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tt-cat-lbl {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-cat-spent {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tt-cat-hrs {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.tt-cat-budget-wrap { margin-left: 4px; }

/* Bouton budget cliquable */
.tt-budget-btn {
  padding: 2px 9px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tt-budget-btn:not([disabled]):hover { border-color: var(--accent); color: var(--accent); }
.tt-budget-btn[disabled] { cursor: default; opacity: .75; }
.tt-budget-btn.over {
  border-color: #f43f5e;
  color: #f43f5e;
  background: rgba(244,63,94,.07);
}
/* Bouton "+ budget" */
.tt-budget-add {
  padding: 2px 9px;
  border-radius: 4px;
  border: 1.5px dashed var(--border);
  background: none;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.tt-budget-add:hover { border-color: var(--accent); color: var(--accent); }

/* V6.7.24 — Catégorie vide (0 spent + 0 budget) en mode édition projet */
.tt-cat--empty {
  opacity: .6;
  transition: opacity .15s;
}
.tt-cat--empty:hover { opacity: .95; }
.tt-cat--empty .tt-cat-hd { cursor: default; }
.tt-cat-chevron--empty {
  display: inline-block;
  width: 12px; /* aligne le contenu avec les lignes qui ont un chevron */
}
.tt-cat-empty-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.tt-empty-hint {
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(139, 92, 246, .08);
  border-left: 3px solid #8b5cf6;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
}

/* Barre de progression */
.tt-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.tt-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .35s ease;
  opacity: .9;
}
.tt-bar-fill.over { opacity: 1; }
.tt-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tt-bar-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.tt-bar-pct.over { color: #f43f5e; }
.tt-bar-remain {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
}

/* ── Autres typologies */
.tt-autre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}
.tt-autre-ico { font-size: 14px; }
.tt-autre-hrs { color: var(--muted); }
.tt-autre-note {
  margin-left: auto;
  font-size: 10px;
  font-style: italic;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── Note bas de page */
.tt-note {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}

/* ── Formulaire d'édition du budget (inline) */
.tt-budget-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tt-budget-edit-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 7px;
}
.tt-budget-edit-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.tt-budget-input {
  width: 90px;
  padding: 5px 9px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.tt-budget-input:focus { border-color: var(--accent); }
.tt-budget-unit {
  font-size: 12px;
  color: var(--muted);
  margin-left: -2px;
}

/* ── Chevron toggle catégorie */
.tt-cat-chevron {
  font-size: 10px;
  color: var(--muted);
  width: 12px;
  flex-shrink: 0;
  transition: transform .15s;
}
.tt-cat-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.tt-cat.open { background: var(--bg); }
.tt-cat-hd:hover { opacity: .85; }

/* ── Répartition par projet (vue mission) */
.tt-proj-breakdown {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.tt-proj-row {
  border-radius: 6px;
  overflow: hidden;
}
.tt-proj-hd {
  display: grid;
  grid-template-columns: 14px 1fr auto 80px auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}
.tt-proj-hd:hover { background: rgba(0,0,0,.04); }
.tt-proj-chevron {
  font-size: 10px;
  color: var(--muted);
}
.tt-proj-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tt-proj-row.orphan .tt-proj-name {
  color: var(--muted);
  font-style: italic;
}
.tt-proj-count {
  font-size: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  color: var(--muted);
  white-space: nowrap;
}
.tt-proj-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.tt-proj-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s ease;
}
.tt-proj-bar.orphan { background: var(--muted); }
.tt-proj-spent {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}
.tt-proj-hrs {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}
.tt-proj-pct {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  min-width: 30px;
}
.tt-proj-row .tt-task-list {
  margin: 0 0 6px 22px;
  border-top: none;
  padding-top: 4px;
}

/* ── Liste de tâches dépliée */
.tt-task-list {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-task-row {
  display: grid;
  grid-template-columns: 8px 1fr 48px 36px auto 16px;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .1s;
}
.tt-task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tt-task-row:hover { background: rgba(0,0,0,.055); }
.tt-task-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tt-task-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.tt-task-dur {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
/* Chips Réel / Prévi */
.tt-task-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.tt-task-chip--prev {
  background: rgba(245,158,11,.15);
  color: #d97706;
}
.tt-task-chip--reel {
  background: rgba(34,197,94,.13);
  color: #16a34a;
}
.tt-task-chip--mult {
  background: rgba(99,102,241,.13);
  color: #4f46e5;
}
/* Lot 0 — statut Réel/Prévi non renseigné (neutre gris) */
.tt-task-chip--none {
  background: rgba(100,116,139,.13);
  color: #64748b;
}
/* Icône crayon — visible uniquement au survol */
.tt-task-row-edit {
  font-size: 11px;
  opacity: 0;
  transition: opacity .12s;
  text-align: center;
}
.tt-task-row:hover .tt-task-row-edit { opacity: .6; }

.tt-tasklist-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── Autres typologies cliquable */
.tt-autre--clickable {
  flex-wrap: wrap;
  position: relative;
}
.tt-autre-count {
  font-size: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
}
.tt-autre--clickable .tt-task-list {
  width: 100%;
  flex-basis: 100%;
}


/* ══════════════════════════════════════════════════════════
   DARK MODE — OVERRIDES COULEURS HARDCODÉES
   (éléments qui ne s'adaptent pas via variables CSS)
   ══════════════════════════════════════════════════════════ */

/* ── Formulaires natifs (datetime-local, date, time, select) ── */
/* color-scheme: dark dit au navigateur d'utiliser son thème sombre
   pour le rendu natif des widgets de formulaire              */
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
  color-scheme: dark;
}

/* ── Dropdown de sélection du nom à l'accueil ─────────────── */
[data-theme="dark"] .welcome-user-dropdown .user-dropdown-panel {
  background: #252525;
  border-color: #3a3a3a;
}
[data-theme="dark"] .welcome-user-dropdown .user-dropdown-search {
  background: #1e1e1e;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .welcome-user-dropdown .user-dropdown-list {
  background: #252525;
  color: var(--text);
}
[data-theme="dark"] .welcome-user-dropdown .user-dropdown-list li:hover {
  background: #333333;
}
[data-theme="dark"] .welcome-user-dropdown .user-dropdown-group-hd {
  color: var(--muted);
  border-bottom-color: var(--border);
}

/* ── Boutons GCal (blancs hardcodés) ──────────────────────── */
[data-theme="dark"] .btn-gcal-link,
[data-theme="dark"] .btn-gcal-add,
[data-theme="dark"] .btn-gcal-invite {
  background: var(--card);
  color: #6699ff;
  border-color: #3355cc;
}
[data-theme="dark"] .btn-gcal-link:hover,
[data-theme="dark"] .btn-gcal-add:hover {
  background: #1a2a66;
  color: #fff;
  border-color: #3355cc;
}
[data-theme="dark"] .btn-gcal-invite:hover {
  background: var(--hover);
}

/* Point GCal sur les blocs calendrier */
[data-theme="dark"] .cal-block-gcal-dot {
  border-color: var(--card);
}

/* ── Chip d'avertissement (jaune hardcodé) ────────────────── */
[data-theme="dark"] .nm-chip--warn {
  background: rgba(180, 120, 0, 0.25);
  color: #fbbf24;
}

/* ── Blocs GCal (blanc hardcodé) ──────────────────────────── */
[data-theme="dark"] .cal-block--gcal {
  background: #1a2535 !important;
  border-color: #4a6080 !important;
  color: #c8d8f0 !important;
}
[data-theme="dark"] .cal-block--gcal .cal-block-label { color: #c8d8f0; }
[data-theme="dark"] .cal-block--gcal .cal-block-time  { color: #8aaaca; }

/* Chip all-day GCal */
[data-theme="dark"] .cal-allday-chip--gcal {
  background: #1a2535;
  border-left-color: #4a6080;
  color: #c8d8f0;
}

/* ── Bouton "C'est parti" / confirm accueil ───────────────── */
[data-theme="dark"] .welcome-confirm-btn {
  background: rgba(255,255,255,.92) !important;
  color: var(--primary) !important;
}

/* ── Badge Réel/Prév en vue sombre ───────────────────────── */
[data-theme="dark"] .tc-tt-reel.rp-reel { background: rgba(0,200,100,.15); color: #4ade80; }
[data-theme="dark"] .tc-tt-reel.rp-prev { background: rgba(251,146,60,.15); color: #fb923c; }

/* ══════════════════════════════════════════════════════════
   MINI DATE PICKER (openDatePicker — partagé TT / GP / TC)
   ══════════════════════════════════════════════════════════ */
.mini-cal-picker {
  position: absolute;
  z-index: 9200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  width: 224px;
  user-select: none;
  animation: modalIn .12s ease;
}

/* En-tête mois + nav */
.mcp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mcp-month {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.mcp-nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.mcp-nav:hover {
  background: var(--hover);
  color: var(--text);
}

/* Ligne jours de la semaine */
.mcp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Grille des jours */
.mcp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mcp-day {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  border-radius: 6px;
  padding: 5px 0;
  text-align: center;
  transition: background .1s, color .1s;
}
.mcp-day:hover {
  background: var(--hover);
}
.mcp-empty {
  pointer-events: none;
}
.mcp-today {
  font-weight: 700;
  color: var(--primary);
}
.mcp-sel {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600;
}

/* Mode sombre */
[data-theme="dark"] .mini-cal-picker {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .mcp-day:hover {
  background: rgba(255,255,255,.08);
}
[data-theme="dark"] .mcp-sel {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   POPOVER ÉDITION TÂCHE — Suivi du temps (GP)
   ══════════════════════════════════════════════════════════ */
.tt-task-edit-pop {
  position: fixed;
  z-index: 9300;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 420px;
  animation: modalIn .12s ease;
  overflow: hidden;
}
.tt-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.tt-edit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tt-edit-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tt-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tt-edit-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tt-edit-row--2col > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tt-edit-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tt-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.tt-edit-input:focus { border-color: var(--primary); }
.tt-edit-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.tt-edit-select:focus { border-color: var(--primary); }
.tt-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
}

/* Mode sombre */
[data-theme="dark"] .tt-task-row:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .tt-task-chip--prev { background: rgba(245,158,11,.2); }
[data-theme="dark"] .tt-task-chip--reel { background: rgba(34,197,94,.18); }
[data-theme="dark"] .tt-task-chip--none { background: rgba(100,116,139,.2); color: #94a3b8; }
[data-theme="dark"] .tt-edit-input,
[data-theme="dark"] .tt-edit-select { background: var(--card); }

/* ── Activity Log Admin Modal ───────────────────────────────── */
.admin-log-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-log-modal {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  width: min(96vw, 1100px);
  max-height: 88vh;
  overflow: hidden;
}
.admin-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.admin-log-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  /* V6.7.121 — Align icône Lucide */
  display: inline-flex; align-items: center; gap: 8px;
}
.admin-log-title svg { display: block; }
.admin-log-search { display: inline-flex; align-items: center; gap: 6px; }
.admin-log-search svg { display: block; }
.admin-log-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-log-close,
.admin-log-refresh {
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.admin-log-close:hover,
.admin-log-refresh:hover { background: var(--hover); color: var(--text); }
.admin-log-refresh {
  font-size: 1.1rem;
  padding: 4px 7px;
}
.admin-log-refresh.spinning {
  animation: _al-spin .6s linear infinite;
}
@keyframes _al-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.admin-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.admin-log-select,
.admin-log-date {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: .85rem;
}
.admin-log-select { min-width: 160px; }
.admin-log-date   { min-width: 130px; }
.admin-log-search { height: 34px; padding: 0 14px; }

.admin-log-table-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.admin-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.admin-log-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-log-table tbody tr { border-bottom: 1px solid var(--border); }
.admin-log-table tbody tr:hover { background: var(--hover); }
.admin-log-table td {
  padding: 8px 12px;
  vertical-align: middle;
  color: var(--text);
}
.al-date  { white-space: nowrap; color: var(--text-muted); font-size: .8rem; }
.al-user  { font-weight: 500; }
.al-details { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-client  { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .82rem; }
.al-action-icon { margin-right: 4px; display: inline-flex; align-items: center; vertical-align: -2px; color: var(--muted); }
.al-action-icon svg { display: block; }
.al-action { display: inline-flex; align-items: center; gap: 6px; }

/* Tab chips */
.al-tab-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.al-tab-todo   { background: rgba(99,102,241,.12); color: #6366f1; }
.al-tab-gp     { background: rgba(245,158,11,.12); color: #b45309; }
.al-tab-cal    { background: rgba(34,197,94,.12);  color: #15803d; }
.al-tab-global { background: rgba(100,116,139,.12); color: #475569; }

.admin-log-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
}
.admin-log-count { font-size: .83rem; color: var(--text-muted); }

.admin-log-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}
.admin-log-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--text-muted);
  font-size: .85rem;
}

/* Dark mode */
[data-theme="dark"] .admin-log-modal   { box-shadow: 0 8px 40px rgba(0,0,0,.55); }
[data-theme="dark"] .admin-log-select,
[data-theme="dark"] .admin-log-date    { background: var(--card); }
[data-theme="dark"] .al-tab-todo       { background: rgba(99,102,241,.2); }
[data-theme="dark"] .al-tab-gp        { background: rgba(245,158,11,.2); }
[data-theme="dark"] .al-tab-cal       { background: rgba(34,197,94,.2); }
[data-theme="dark"] .al-tab-global    { background: rgba(100,116,139,.2); }

/* ── Password gate modal ────────────────────────────────────── */
/* V6.7.141 — Refonte compacte : suppression du gros cadenas circulaire 64×64
   au profit d'un header inline lock + nom (~30px de haut). Padding réduit. */
.pwd-gate-modal {
  width: min(92vw, 320px);
  background: var(--card);
  color: var(--text);
  padding: 22px 24px 18px;
  box-shadow: 0 24px 72px rgba(0,0,0,.25), 0 0 0 1px var(--border);
  border-radius: 14px;
}
/* Header inline : petit icône cadenas + nom user, sur une seule ligne */
.pwd-gate-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pwd-gate-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  flex-shrink: 0;
}
.pwd-gate-mini-icon svg { display: block; }
/* Nom utilisateur (compact) */
.pwd-gate-modal .pwd-gate-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  margin: 0;
  line-height: 1.2;
}
/* Sous-titre */
.pwd-gate-modal .welcome-message {
  font-size: .825rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  text-align: center;
  opacity: 1;
}
/* Anciennes règles `.pwd-gate-name` sans modal parent : neutralisées (cas dégradé) */
.pwd-gate-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.pwd-input {
  width: 100%;
  /* V6.7.141 — hauteur 44 → 40 (compacité) */
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.pwd-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,67,255,.10);
}
.pwd-gate-btn {
  width: 100%;
  height: 40px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 9px;
  letter-spacing: .01em;
  /* V6.7.141 — Align icône Lucide ↔ label */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.pwd-gate-btn svg { display: block; }
/* V6.7.141 — Lien Retour avec icône */
.pwd-gate-modal .btn-link { display: inline-flex; align-items: center; gap: 4px; }
.pwd-gate-modal .btn-link svg { display: block; }
.pwd-error {
  font-size: .82rem;
  color: #ef4444;
  text-align: center;
  min-height: 18px;
}
.pwd-forgot {
  font-size: .82rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.pwd-forgot:hover { color: var(--primary); }
.pwd-code-display {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
  color: var(--accent);
  background: var(--hover);
  border-radius: 10px;
  padding: 12px 20px;
  font-variant-numeric: tabular-nums;
}

/* Inline pwd section in welcome modal */
.welcome-pwd-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}
/* Pas de règle .hidden globale dans ce CSS → on la déclare explicitement ici */
.welcome-pwd-section.hidden { display: none; }
/* Section Google Sign-In dans la modale welcome */
.welcome-google-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.25rem;
}
.welcome-google-section.hidden { display: none !important; }
.welcome-google-subtitle {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.welcome-google-btn {
  display: flex;
  justify-content: center;
}
.welcome-google-error {
  font-size: 0.8rem;
  color: var(--error);
  background: var(--error-bg);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  max-width: 300px;
  text-align: center;
  white-space: pre-line;
}
.welcome-google-error.hidden { display: none !important; }
/* Steps du modal mot de passe */
.pwd-gate-modal [id^="pwdStep"].hidden { display: none; }
/* Journal d'activité */
.admin-log-spinner.hidden { display: none; }
.admin-log-empty.hidden   { display: none; }
.pwd-error.hidden         { display: none; }

/* Shake animation for wrong password */
@keyframes _shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(4px); }
}
.shake { animation: _shake .45s ease; }

/* Prefs — btn-sm */
.btn-sm { padding: 6px 14px; font-size: .85rem; height: auto; }

/* Footer de la porte mot de passe (oublié + changer d'utilisateur) */
.pwd-gate-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.pwd-change-user {
  font-size: .8rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: none;
  transition: color .15s;
}
.pwd-change-user:hover { color: var(--primary); }

/* "Mot de passe oublié" dans le welcome modal */
.pwd-forgot-welcome {
  display: block;
  text-align: center;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: -2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.pwd-forgot-welcome:hover { color: rgba(255,255,255,.85); }

/* Bouton journal dans le header */
#btnAdminLog.hidden { display: none; }

.pwd-hint {
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin-top: -4px;
}
.prefs-hint {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

/* Dark mode */
[data-theme="dark"] .pwd-input { background: var(--card); }

/* ══════════════════════════════════════════════════════════
   ONGLET ACCÈS — Gestion des permissions (admin)
   ══════════════════════════════════════════════════════════ */

#panelAccess {
  height: calc(100dvh - var(--header-h, 52px));
  overflow-y: auto;
  /* V6.7.131 — On supprime le padding-top du scroll container : sinon le
     thead sticky se positionne au top du content-box (= sous le padding),
     créant un « trou » de 20 px entre le header de l'app et le thead où le
     contenu pouvait passer en scrollant. On garde le padding via .access-wrap
     pour préserver le breathing room au scroll=0. */
  padding: 0 16px 20px;
  box-sizing: border-box;
}
#panelAccess.hidden { display: none; }

.access-wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* V6.7.131 — Breathing room au scroll=0 (récupéré du #panelAccess padding-top) */
  padding-top: 20px;
}

.access-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* V6.7.128 — `overflow: hidden` créait un scroll context qui empêchait le
     thead sticky de remonter au scope #panelAccess. `clip` clippe les coins
     arrondis sans bloquer sticky. */
  overflow: clip;
}

.access-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.access-table-wrap {
  /* V6.7.129 — IMPORTANT : on doit clipper les DEUX axes. CSS recompute
     `overflow-y: visible` en `auto` quand `overflow-x` n'est pas visible/clip,
     ce qui re-crée un scroll context Y → sticky coincé.
     `overflow: clip` (both axes) clippe sans créer de scroll context sur aucun
     des deux axes → sticky thead remonte au scope #panelAccess. */
  overflow: clip;
}

/* V6.7.97 — Le panel Accès est plus compact maintenant (paddings réduits +
 * dot/bouton compacts à la place des 2 colonnes), il rentre généralement sans
 * scroll latéral. Au cas où, on garde overflow-x: auto. */

/* ── Table ───────────────────────────────────────────────── */
/* V6.7.361 — width: auto (au lieu de 100%) → la table shrink-wrap à son
   contenu. Les colonnes Membre/Rôle ne s'élargissent plus inutilement pour
   remplir le panneau. Lignes de séparation conservées. */
.access-table {
  width: auto;
  border-collapse: collapse;
  font-size: 13px;
}

/* V6.7.361 — bg + sticky portés par le <thead> (au lieu de chaque <th>).
   Raison : avec sticky+bg par th, les ths siblings se peignent en ordre doc
   et le bg du th[N+1] recouvrait le débordement (rotated text) du th[N].
   Maintenant thead a le bg, ths sont transparents → débordement visible. */
.access-table thead {
  background: var(--subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}
.access-table thead th {
  background: transparent;
  padding: 8px 4px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.access-table thead th.access-th-name { text-align: left; min-width: 220px; padding-left: 12px; }
/* V6.7.361 — Largeur Rôle figée pour matcher le combo (150px) + padding. */
.access-table thead th.access-th-role,
.access-table td.access-td-role {
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  text-align: left;
  padding-left: 6px;
}

/* V6.7.359 — Colonnes toggles : headers rotés -50°, largeur fixe 48px.
   Gain ~50% sur la largeur totale, le tableau ne déborde plus en 1200-1400px.
   La rotation est portée par le <span> interne, avec transform-origin au coin
   bottom-left → le texte slope du bas-gauche vers le haut-droit, parallèlement
   d'une colonne à l'autre, sans collision (label de 13 chars ≈ 71px → projection
   horizontale ≈ 46px ≤ 48px de colonne). */
.access-table thead th.access-th-toggle {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 95px;
  padding: 0;
  vertical-align: bottom;
  text-align: left;
  /* On garde sticky + background du th générique. */
}
.access-table thead th.access-th-toggle > span {
  display: inline-block;
  transform-origin: 0 100%;
  transform: translate(24px, -6px) rotate(-50deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.access-table td.access-td-toggle {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding: 6px 2px;
  text-align: center;
}

.access-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.access-table td.access-td-name { padding-left: 12px; }
.access-table td.access-td-actions { padding-right: 12px; }
.access-table td.access-td-name {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  /* V6.7.362 — On garde display: table-cell (default) sur le td pour que
     `border-collapse: collapse` fusionne correctement les bordures avec les
     cellules voisines (sinon cassure visible sur la ligne inférieure entre
     Membre et Rôle). Le flex est porté par le .access-td-name-inner. */
}
/* V6.7.210 — Bloc d'actions sur le nom (rename + discord) aligné à droite
   de la cellule, alignement constant peu importe la longueur du nom. */
.access-name-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding-left: 8px;
}
/* V6.7.362 — Wrapper flex à l'intérieur du td (au lieu de flex sur le td). */
.access-td-name-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Groupes ─────────────────────────────────────────────── */
/* V6.7.226 — Layout en grid 3 colonnes : spacer | titre centré | bouton à droite.
   Le spacer fait la même largeur que la zone des boutons → le titre reste
   parfaitement centré quel que soit la longueur du libellé du bouton. */
.access-group-row td {
  background: var(--subtle);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 5px 12px;
  border-top: 1px solid var(--border);
}
.access-group-row:first-child td { border-top: none; }
.access-group-row-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.access-group-row-title {
  grid-column: 2;
  text-align: center;
  justify-self: center;
}
.access-group-row-actions {
  grid-column: 3;
  justify-self: end;
}
.access-group-row-inner > .access-group-row-spacer {
  grid-column: 1; /* placeholder pour symétrie */
}

.access-group-count {
  font-weight: 400;
  opacity: 0.7;
}

/* V6.7.210 → V6.7.226 — Bouton « Configurer Home » aligné à droite (colonne dédiée). */
/* V6.7.356 — Plus visible : tint primary léger au repos, full au hover. */
.access-group-config-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 25%, var(--border, #e5e7eb));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
  color: var(--primary, #0043ff);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: middle;
  transition: all .15s;
}
.access-group-config-btn:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, var(--card, #fff));
}

/* V6.7.210 — Modale « Cards Home pour <rôle> » */
.access-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.access-modal {
  background: var(--card, #fff);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  overflow: hidden;
}
body.dark .access-modal,
[data-theme="dark"] .access-modal { background: #1f2937; color: #f3f4f6; }
.access-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.access-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--primary, #0043ff); }
.access-modal-close {
  border: none; background: none; cursor: pointer;
  font-size: 18px;
  color: var(--text-muted, #6b7280);
  padding: 4px 8px;
  border-radius: 4px;
}
.access-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--text, #111827); }
.access-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}
.access-modal-body > p { margin: 0 0 12px; }
.access-modal-info {
  background: color-mix(in srgb, #eab308 12%, transparent);
  border-left: 3px solid #eab308;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text, #111827);
}

/* V6.7.375 — Liste des users affectés par la config (clarté admin) */
.access-modal-affected {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border-left: 3px solid var(--primary, #0043ff);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.6;
}
.access-modal-affected--empty {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  border-left-color: #ef4444;
}
.access-modal-affected-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.access-modal-affected-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.access-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 4%, transparent);
}
body.dark .access-modal-foot,
[data-theme="dark"] .access-modal-foot { border-top-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }

/* V6.7.356 — Suppression du CSS mort (V1 modal cards V6.7.210, V2 mood
   V6.7.214) : remplacé par .access-cards-matrix en V6.7.225/226. */

/* V6.7.225 — V2 Gestion des cards : matrice role × card */
.access-modal--wide {
  max-width: 920px;  /* large pour la matrice à 5 colonnes */
  width: 95vw;
}
.access-cards-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 6px;
}
.access-cards-matrix thead th {
  position: sticky; top: 0;
  background: var(--surface, #fff);
  text-align: center;
  font-weight: 600;
  font-size: 11.5px;
  padding: 8px 6px;
  border-bottom: 2px solid var(--border, #e5e7eb);
  color: var(--text, #1a1a1a);
  z-index: 2;
}
.access-cards-th-name { text-align: left; padding-left: 10px !important; }
.access-cards-th-chk  { width: 76px; }
.access-cards-th-num  { width: 90px; }
/* Home V2 (Release 4) — colonne Strate (select) dans la matrice cards */
.access-cards-th-strate { width: 130px; }
.access-cards-cell-strate { text-align: center; }
.access-cards-cell-strate select {
  width: 100%;
  max-width: 124px;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}
.access-cards-matrix tbody tr {
  border-bottom: 1px solid var(--border, #f0f0f0);
  transition: background 0.12s;
}
.access-cards-matrix tbody tr:hover { background: color-mix(in srgb, var(--primary, #0043ff) 4%, transparent); }
.access-cards-matrix td { padding: 8px 6px; vertical-align: middle; }
.access-cards-cell-name {
  display: flex; align-items: center; gap: 10px;
  padding-left: 10px !important;
}
.access-cards-icon { font-size: 18px; flex-shrink: 0; }
.access-cards-name { font-weight: 600; font-size: 13px; color: var(--text, #1a1a1a); }
.access-cards-desc { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.access-cards-cell-chk { text-align: center; }
.access-cards-cell-chk input[type="checkbox"] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--primary, #0043ff);
}
.access-cards-cell-num { text-align: center; }
.access-cards-cell-num input[type="number"] {
  width: 72px;
  padding: 4px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  background: var(--card, #fff);
  color: var(--text, #1a1a1a);
}
.access-cards-cell-num input[type="number"]:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.access-cards-cell-num input[type="number"]::placeholder {
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}
/* V6.7.356 — Suppression du CSS mort (collapse + mapping body) — remplacé
   par la matrice cards-matrix V6.7.225+. */

/* ── Hover rows ──────────────────────────────────────────── */
/* V6.7.132 — Hover en bleu TF tinté (8 % d'opacité) au lieu de --subtle gris */
.access-table tbody tr:not(.access-group-row):hover td {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.access-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Toggle checkbox ─────────────────────────────────────── */
.access-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1;
}
.access-toggle.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.access-toggle:hover:not(:disabled):not(.on) {
  border-color: var(--primary);
  color: var(--primary);
}
.access-toggle:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* V6.7.97 — Compact dot statut sync GCal à côté du nom */
.access-gcal-dot {
  display: inline-block;
  /* V6.7.356 — Agrandi de 8 → 11px pour meilleure affordance (cible click-able) */
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  cursor: help;
  transition: transform .12s, box-shadow .12s;
}
/* V6.7.138 — Dot click-able (data-pageid) → feedback hover */
.access-gcal-dot[data-pageid]:hover {
  transform: scale(1.35);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.access-gcal-dot--ok      { background: #22c55e; }
.access-gcal-dot--error   { background: #ef4444; }
.access-gcal-dot--pending { background: #f59e0b; }
.access-gcal-dot--off     { background: #d1d5db; }
.access-gcal-dot--none    { background: transparent; border: 1px dashed #d1d5db; }

/* V6.7.97 — Bouton Révoquer (✕) en fin de ligne */
.access-th-actions { width: 32px; }
.access-td-actions { text-align: center; }
.access-revoke-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  width: 24px; height: 24px;
  font-size: 13px;
  cursor: pointer;
  /* V6.7.356 — Désamorcé : opacité basse au repos, visible au row-hover
     pour éviter les mis-clicks accidentels sur une action destructive. */
  opacity: 0.25;
  transition: opacity .12s, background .12s, border-color .12s, color .12s;
  line-height: 1;
}
.access-table tbody tr:hover .access-revoke-btn { opacity: 0.85; border-color: var(--border); }
.access-revoke-btn:hover {
  opacity: 1 !important;
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

/* V6.7.356 → V6.7.358 — Séparateur retiré : la frontière activity/admin
   ne faisait pas sens (Accueil et Envoi msg sont généralement ouverts à
   tous, pas spécifiquement « admin »). */

/* V6.7.99 — Bouton + badge « Révoqués » dans header Access */
.access-revoked-btn {
  font-size: 12px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.access-revoked-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  /* V6.7.133 — Plus de rouge (qui criait à l'urgence sans raison). Ton neutre :
     fond gris très clair, texte gris foncé. Just un compteur informatif. */
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.access-revoked-count.hidden { display: none; }

/* V6.7.99 — Popover « Révoqués » */
.access-revoked-popover {
  position: fixed;
  top: 70px; right: 30px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  width: 460px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-size: 13px;
}
.access-revoked-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
.access-revoked-popover-body {
  overflow-y: auto;
  padding: 8px 0;
}
.access-revoked-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 12px;
}
.access-revoked-item:last-child { border-bottom: none; }
.access-revoked-item-info {
  flex: 1;
  min-width: 0;
}
.access-revoked-item-name {
  font-weight: 500;
}
.access-revoked-item-meta {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.access-revoked-item-email {
  font-family: monospace;
}
.access-reactivate-btn {
  font-size: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* V6.7.100 — Bouton + badge « En attente » dans header Access */
.access-pending-btn {
  font-size: 12px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.access-pending-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #f59e0b;
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.access-pending-count.hidden { display: none; }

/* V6.7.100 — Popover « En attente » */
.access-pending-popover {
  position: fixed;
  top: 70px; right: 30px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  width: 520px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-size: 13px;
}
.access-pending-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
/* V6.7.284 — Cluster d'actions header (bouton "Nettoyer" + close) */
.access-pending-popover-header-acts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.access-pending-cleanup-btn {
  font-size: 11.5px;
  padding: 5px 10px;
}
.access-pending-cleanup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.access-pending-popover-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #f59e0b;
  color: white;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.access-pending-popover-body {
  overflow-y: auto;
  padding: 8px 0;
}
.access-pending-hint {
  font-size: 12px;
  color: var(--muted, #6b7280);
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid var(--border, #e5e7eb);
  line-height: 1.4;
}
.access-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 12px;
}
.access-pending-item:last-child { border-bottom: none; }
.access-pending-item-info {
  flex: 1;
  min-width: 0;
}
.access-pending-item-name {
  font-weight: 500;
}
.access-pending-item-meta {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.access-pending-item-email {
  font-family: monospace;
}
.access-pending-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.access-pending-role-select {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface, #fff);
  max-width: 150px;
}
.access-pending-revoke-btn {
  font-size: 12px;
  padding: 4px 10px;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
/* V6.7.101 — État « confirm » : 2e clic pour exécuter */
.access-pending-revoke-btn--confirm {
  background: #ef4444 !important;
  border-color: #b91c1c !important;
  color: white !important;
  font-weight: 600;
  animation: access-pending-pulse 1s ease-in-out infinite;
}
@keyframes access-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* V6.7.102 — Bouton « Rôles » dans le header */
.access-roles-btn {
  font-size: 12px;
  padding: 4px 10px;
}

/* V6.7.102 — Popover « Gestion des rôles » */
.access-roles-popover {
  position: fixed;
  top: 70px; right: 30px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-size: 13px;
}
.access-roles-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
.access-roles-popover-body {
  overflow-y: auto;
  padding: 8px 0 12px;
}
.access-roles-hint {
  font-size: 12px;
  color: var(--muted, #6b7280);
  padding: 10px 16px;
  background: rgba(59, 130, 246, 0.06);
  border-bottom: 1px solid var(--border, #e5e7eb);
  line-height: 1.45;
}
.access-roles-section { padding: 8px 0; }
.access-roles-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #6b7280);
  padding: 6px 16px;
}
.access-roles-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  gap: 10px;
}
.access-roles-item:hover {
  background: rgba(0,0,0,0.03);
}
.access-roles-item--system {
  opacity: 0.85;
}
.access-roles-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.access-roles-item-name {
  font-weight: 500;
}
.access-roles-item-count {
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  color: var(--muted, #6b7280);
  border-radius: 10px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.access-roles-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.access-roles-lock {
  font-size: 13px;
  opacity: 0.55;
}
.access-roles-rename-btn,
.access-roles-delete-btn {
  font-size: 13px;
  padding: 4px 6px;
}
.access-roles-delete-btn:hover {
  background: rgba(239, 68, 68, 0.12);
}
.access-roles-rename-input {
  font-size: 13px;
  font-weight: 500;
  padding: 2px 6px;
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 4px;
  background: var(--surface, #fff);
  width: 200px;
}
.access-roles-empty {
  padding: 10px 16px;
  color: var(--muted, #6b7280);
  font-style: italic;
}
.access-roles-add {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 6px;
}
.access-roles-add-input {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
}
.access-roles-add-btn {
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* V6.7.102 — Modale de réaffectation forcée */
.access-roles-reassign-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.access-roles-reassign-modal-inner {
  background: var(--surface, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.access-roles-reassign-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
.access-roles-reassign-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  line-height: 1.45;
}
.access-roles-reassign-modal-body p { margin: 0 0 10px; }
.access-roles-reassign-list {
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  margin: 0 0 14px;
  padding: 8px 12px 8px 28px;
  list-style: disc;
  font-size: 12px;
}
.access-roles-reassign-list li { padding: 2px 0; }
.access-roles-reassign-email {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted, #6b7280);
}
.access-roles-reassign-label {
  display: block;
  font-weight: 500;
  margin-top: 8px;
}
.access-roles-reassign-select {
  display: block;
  margin-top: 6px;
  width: 100%;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
}
.access-roles-reassign-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* V6.7.102 — Renommage inline d'un user dans le tableau */
.access-user-name {
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s;
}
.access-user-name:hover {
  border-bottom-color: var(--muted, #9ca3af);
}
/* V6.7.356 — Hover-reveal uniformisé : toutes les actions secondaires
   (rename / discord ID / test DM) sont opacity: 0 au repos, révélées au
   survol de la ligne. La cellule nom respire, l'attention reste sur les
   checkboxes (l'objet principal du panneau). Indicateur visuel pour les
   « configuré » : color au lieu d'opacity. */
.access-rename-btn,
.access-discord-btn,
.access-discord-test-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
  padding: 2px 4px;
  margin-left: 2px;
  border-radius: 3px;
  color: var(--text-muted, #6b7280);
  transition: opacity .15s, background .15s, color .15s, transform .15s;
}
.access-rename-btn { margin-left: 4px; }
/* Row hover → toutes visibles */
.access-table tbody tr:hover .access-rename-btn,
.access-table tbody tr:hover .access-discord-btn,
.access-table tbody tr:hover .access-discord-test-btn { opacity: 0.7; }
/* Hover de l'élément lui-même → fully visible */
.access-rename-btn:hover,
.access-discord-btn:hover,
.access-discord-test-btn:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.08);
}
.access-discord-btn:hover { color: var(--primary, #0043ff); }
.access-discord-btn.has-id { color: var(--primary, #0043ff); }
.access-discord-test-btn {
  color: var(--primary, #0043ff);
}
.access-discord-test-btn:hover {
  background: rgba(0, 67, 255, 0.08);
  transform: translateX(1px);
}
.access-discord-test-btn:hover {
  opacity: 1 !important;
  background: rgba(0, 67, 255, 0.08);
  transform: translateX(1px);
}
.access-discord-test-btn:disabled { cursor: wait; }
/* V6.7.215 — État pending-confirm (anti-miss-click) : 1er click → l'icône
   devient ⚠️ pulsant, 2e click dans les 4s = action confirmée. */
.access-discord-test-btn.pending-confirm {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border: 1px solid #f59e0b;
  color: #f59e0b;
  opacity: 1 !important;
  font-weight: 700;
  animation: access-pulse-warn 1s ease-in-out infinite;
}
.access-gcal-dot.pending-confirm {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
  animation: access-pulse-warn 1s ease-in-out infinite;
}
@keyframes access-pulse-warn {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.access-rename-input {
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 4px;
  background: var(--surface, #fff);
  width: 160px;
}

/* V6.7.97 — Popover confirmation révocation */
.access-revoke-popover {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  width: 320px;
  font-size: 13px;
}
.access-revoke-popover-title {
  font-weight: 600;
  margin-bottom: 8px;
}
.access-revoke-popover-msg {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.access-revoke-popover-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.access-revoke-popover-btns .access-revoke-confirm {
  background: #ef4444;
  border-color: #ef4444;
}
.access-revoke-popover-btns .access-revoke-confirm:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
}

/* ── Combobox Rôle + Team intégré (V6.7.358) ────────────────
   Remplace l'ancien <select> + segmented control séparé. UN seul control
   par ligne : un bouton trigger affichant le rôle + badge Team éventuel,
   et un popover qui propose Rôle (liste) + Team (boutons A/B) ensemble. */

/* Trigger (cellule Rôle) — V6.7.359 : bordure transparente par défaut pour
   que le trait inférieur de la ligne du tableau (border-bottom de td) reste
   visuellement continu et ne soit pas brisé par la box du combo.
   V6.7.360 : largeur fixe 150px (au lieu de min/max 110-170px) → tous les
   combos ont la même taille quel que soit le rôle. Le label ellipsis si trop long. */
.access-role-combo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  width: 150px;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.access-role-combo:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 30%, var(--border));
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
}
.access-role-combo.is-open {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, var(--surface));
}
.access-role-combo-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.access-role-combo-team {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary, #0043ff);
  color: #fff;
  letter-spacing: 0.03em;
}
.access-role-combo-arrow {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(--muted);
  line-height: 1;
  margin-left: 2px;
}

/* Popover */
.access-role-combo-pop {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  padding: 8px;
  animation: accessComboFade 0.12s ease;
}
@keyframes accessComboFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.access-role-combo-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 6px 6px;
}
.access-role-combo-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.access-role-combo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  border-radius: 5px;
  transition: background 0.1s ease;
}
.access-role-combo-item:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
}
.access-role-combo-item.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  font-weight: 600;
}
.access-role-combo-item-check {
  flex: 0 0 14px;
  font-size: 11px;
  color: var(--primary, #0043ff);
  font-weight: 700;
}
.access-role-combo-item-label {
  flex: 1 1 auto;
}
.access-role-combo-team-row {
  display: flex;
  gap: 4px;
  padding: 0 2px 2px;
}
.access-role-combo-team-btn {
  flex: 1 1 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.access-role-combo-team-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border));
}
.access-role-combo-team-btn.is-active {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}

/* Dark mode */
[data-theme="dark"] .access-role-combo-pop,
[data-theme="dark"] .access-role-combo-team-btn {
  background: #1f2937;
  border-color: #374151;
}
[data-theme="dark"] .access-role-combo:hover {
  border-color: color-mix(in srgb, var(--primary, #4d80ff) 40%, #374151);
}
[data-theme="dark"] .access-role-combo.is-open {
  background: rgba(77, 128, 255, 0.12);
  border-color: var(--primary, #4d80ff);
}
[data-theme="dark"] .access-role-combo-pop {
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .pwd-code-display { background: rgba(255,255,255,.06); }

/* ── Option (faible / normal / forte) ────────────────────── */

/* Calendar blocks — diagonal stripe overlay */
.cal-block--opt-faible {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(107,107,107,.13) 3px,
    rgba(107,107,107,.13) 5px
  ) !important;
}
.cal-block--opt-normal {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(245,158,11,.18) 6px,
    rgba(245,158,11,.18) 9px
  ) !important;
}
.cal-block--opt-forte {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 11px,
    rgba(34,197,94,.18) 11px,
    rgba(34,197,94,.18) 14px
  ) !important;
}

/* Calendar badge (O– / O / O+) */
.cal-block-opt {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.cal-block-opt--faible { color: #6b6b6b; background: rgba(107,107,107,.1); }
.cal-block-opt--normal { color: #b45309; background: rgba(245,158,11,.15); }
.cal-block-opt--forte  { color: #16a34a; background: rgba(34,197,94,.15);  }

/* Calendar tooltip option line */
.cal-tt-option {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-block;
}
.cal-tt-option--faible { color: #6b6b6b; background: rgba(107,107,107,.1); }
.cal-tt-option--normal { color: #b45309; background: rgba(245,158,11,.15); }
.cal-tt-option--forte  { color: #16a34a; background: rgba(34,197,94,.15);  }

/* TeamCal blocks — diagonal stripe overlay */
.tc-event--opt-faible {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(107,107,107,.13) 3px,
    rgba(107,107,107,.13) 5px
  ) !important;
}
.tc-event--opt-normal {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(245,158,11,.18) 6px,
    rgba(245,158,11,.18) 9px
  ) !important;
}
.tc-event--opt-forte {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 11px,
    rgba(34,197,94,.18) 11px,
    rgba(34,197,94,.18) 14px
  ) !important;
}

/* TeamCal badge */
.tc-event-opt {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.tc-event-opt--faible { color: #6b6b6b; background: rgba(107,107,107,.12); }
.tc-event-opt--normal { color: #b45309; background: rgba(245,158,11,.18);  }
.tc-event-opt--forte  { color: #16a34a; background: rgba(34,197,94,.18);   }

/* TeamCal tooltip option line */
.tc-tt-option {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-block;
}
.tc-tt-option--faible { color: #6b6b6b; background: rgba(107,107,107,.1); }
.tc-tt-option--normal { color: #b45309; background: rgba(245,158,11,.15); }
.tc-tt-option--forte  { color: #16a34a; background: rgba(34,197,94,.15);  }

/* Modulaire table option badge */
.mod-task-option { text-align: center; width: 44px; }
.mod-opt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.mod-opt-badge--faible { color: #6b6b6b; background: rgba(107,107,107,.1); }
.mod-opt-badge--normal { color: #b45309; background: rgba(245,158,11,.15); }
.mod-opt-badge--forte  { color: #16a34a; background: rgba(34,197,94,.15);  }

/* ══════════════════════════════════════════════════════════
   DISPONIBILITÉ COMMUNE — bouton header + modal
   ══════════════════════════════════════════════════════════ */

/* Bouton dans le header TeamCal */
.tc-dispo-btn {
  margin-left: auto;
  color: var(--primary);
  font-size: 12px;
  white-space: nowrap;
}
.tc-dispo-btn:hover { opacity: .8; }

/* Taille du modal dispo (override .modal) */
.tc-dispo-modal {
  width: min(500px, calc(100vw - 32px));
}

/* Rang membres */
.tc-dispo-members-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tc-dispo-lbl {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 4px;
}
.tc-dispo-members-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tc-dispo-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 20px;
  border: 1.5px solid;   /* couleur via style inline */
  font-size: 12px;
  color: var(--text);
}
.tc-dispo-member-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* couleur via style inline */
}

/* Formulaire */
.tc-dispo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.tc-dispo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Input durée libre */
.tc-dispo-dur-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-dispo-dur-input {
  width: 72px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  -moz-appearance: textfield;
}
.tc-dispo-dur-input::-webkit-inner-spin-button,
.tc-dispo-dur-input::-webkit-outer-spin-button { opacity: 1; }
.tc-dispo-dur-input:focus { border-color: var(--primary); outline: none; }
.tc-dispo-dur-unit {
  font-size: 12px;
  color: var(--muted);
}
.tc-dispo-dur-hint {
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

/* Input date */
.tc-dispo-date-input {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  width: fit-content;
  max-width: 180px;
}
.tc-dispo-date-input:focus { border-color: var(--primary); outline: none; }

/* Mode radio (3 prochains / 3 dates différentes) */
.tc-dispo-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.tc-dispo-mode-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.tc-dispo-mode-opt input[type="radio"] { cursor: pointer; accent-color: var(--primary); }

/* Bouton recherche */
.tc-dispo-search-btn {
  width: 100%;
  padding: 9px;
  font-size: 14px;
  margin-bottom: 14px;
}

/* Zone résultats */
.tc-dispo-results {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.tc-dispo-results-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.tc-dispo-results-title { font-weight: 600; color: var(--text); }
.tc-dispo-results-dur {
  color: var(--muted);
  background: rgba(0,0,0,.06);
  padding: 2px 8px;
  border-radius: 10px;
}
[data-theme="dark"] .tc-dispo-results-dur { background: rgba(255,255,255,.1); }

/* Créneau */
.tc-dispo-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.tc-dispo-slot:last-child { border-bottom: none; }
.tc-dispo-slot:hover { background: var(--row-hover, rgba(0,0,0,.03)); }
[data-theme="dark"] .tc-dispo-slot:hover { background: rgba(255,255,255,.04); }
.tc-dispo-slot-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tc-dispo-slot-info { flex: 1; min-width: 0; }
.tc-dispo-slot-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-dispo-slot-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tc-dispo-slot-go {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.tc-dispo-slot-go:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.tc-dispo-slot-create {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light, rgba(59,130,246,.1));
  border: 1px solid var(--primary, #3b82f6);
  border-radius: 6px;
  cursor: pointer;
  color: var(--primary, #3b82f6);
  transition: background .12s, color .12s;
}
.tc-dispo-slot-create:hover { background: var(--primary, #3b82f6); color: #fff; }

/* Chips agendas déselectionnables (mode « Déplacer ») */
.tc-dispo-member-chip[data-mid] { cursor: pointer; transition: opacity .12s, border-color .12s; user-select: none; }
.tc-dispo-member-chip[data-mid]:hover { border-color: var(--primary, #3b82f6); }
.tc-dispo-member-chip.is-excluded { opacity: .5; text-decoration: line-through; text-decoration-color: var(--muted); }
.tc-dispo-member-chip.is-excluded .tc-dispo-member-dot { opacity: .4; }
.tc-dispo-member-x { font-size: 13px; line-height: 1; color: var(--muted); margin-left: 1px; font-weight: 700; }
.tc-dispo-member-chip[data-mid]:hover .tc-dispo-member-x { color: var(--primary, #3b82f6); }

/* Bouton « Déplacer ici » — action primaire pleine (révision UI 2026-06-22) */
.tc-dispo-slot-move {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary, #3b82f6);
  border: 1px solid var(--primary, #3b82f6);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary, #3b82f6) 35%, transparent);
  transition: filter .12s, transform .06s, box-shadow .12s;
}
.tc-dispo-slot-move:hover { filter: brightness(1.07); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #3b82f6) 45%, transparent); }
.tc-dispo-slot-move:active { transform: translateY(1px); }

/* États vide / chargement / erreur */
.tc-dispo-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  font-size: 13px;
  color: var(--muted);
}
.tc-dispo-empty {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.tc-dispo-error {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--error, #dc2626);
  text-align: center;
}

/* Barre de navigation dispo (persistante sous le header) */
.tc-dispo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tc-dispo-bar.hidden { display: none; }
.tc-dispo-bar-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
  white-space: nowrap;
}
.tc-dispo-bar-slot {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.tc-dispo-bar-slot:hover {
  background: var(--primary);
  color: #fff;
}
.tc-dispo-bar-back {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.tc-dispo-bar-back:hover { border-color: var(--primary); color: var(--primary); }
.tc-dispo-bar-close {
  padding: 4px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}
.tc-dispo-bar-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }

/* ══════════════════════════════════════════════════════════
   SUIVI DES CONTENUS
══════════════════════════════════════════════════════════ */
.proj-contents-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.proj-contents-panel.hidden { display: none; }

/* ── Barre de filtres ───────────────────────────────────── */
.contents-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  gap: 8px;
}
.contents-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.contents-filter-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: all .12s;
}
.contents-filter-btn:hover  { border-color: var(--primary); color: var(--primary); }
.contents-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.contents-filter-clear {
  padding: 4px 9px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: all .12s;
}
.contents-filter-clear:hover { border-color: var(--error); color: var(--error); }

.contents-refresh-btn { flex-shrink: 0; }

/* ── Dropdown filtres (positionné en fixed) ─────────────── */
.contents-filter-dropdown {
  position: fixed; z-index: 3000;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,.14);
  padding: 6px 4px; min-width: 170px; max-height: 240px; overflow-y: auto;
}
.contents-filter-option {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; font-size: 12.5px; cursor: pointer;
  border-radius: 4px; transition: background .1s; user-select: none;
}
.contents-filter-option:hover { background: var(--subtle); }
.contents-filter-option input { cursor: pointer; accent-color: var(--primary); }

/* ── Zone scrollable (sous la filter-bar) ───────────────── */
.contents-scroll-area {
  flex: 1; overflow-y: auto; min-height: 0;
  /* Empêche le scroll de "passer" à la page quand on arrive en bout de liste */
  overscroll-behavior: contain;
}

/* ── Sections ───────────────────────────────────────────── */
.contents-section {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border);
}
.contents-section:last-child { border-bottom: none; }

/* Le fond coloré ne touche QUE le header de section, pas les lignes du tableau */
.contents-section--orphans > .contents-section-hd {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}
[data-theme="dark"] .contents-section--orphans > .contents-section-hd {
  background: #1c1600; border-bottom-color: #3d2e00;
}

.contents-section-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 6px; font-size: 13px; font-weight: 600;
  background: var(--card); flex-shrink: 0;
}
.contents-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 9px;
}
.contents-section-hint {
  font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px;
}

/* ── Tableau ────────────────────────────────────────────── */
.contents-table-wrap {
  overflow-x: auto;
}

.contents-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.contents-table th {
  position: sticky; top: 0; z-index: 2;
  padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 2px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 0 var(--border); /* ligne sous le header quand il colle */
}
.contents-row {
  transition: background .1s; cursor: pointer;
}
.contents-row:hover { background: var(--subtle); }
.contents-row td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.contents-table tbody tr:last-child td { border-bottom: none; }

.contents-th-date   { width: 110px; }
.contents-th-period { width: 120px; }
.contents-th-state  { width: 100px; }
.contents-th-act    { width: 64px; text-align: right; }
.contents-td-title  { font-weight: 500; color: var(--text); }
.contents-td-date   { color: var(--muted); font-size: 12px; white-space: nowrap; }
.contents-td-period { font-size: 12px; }
.contents-td-act    { text-align: right; white-space: nowrap; }

.contents-null { color: var(--muted); opacity: .5; }

/* État badge */
.contents-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--subtle); color: var(--muted);
}

/* Bouton + */
.contents-plus-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1.5px solid var(--primary); border-radius: 50%;
  background: transparent; color: var(--primary);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: all .12s; flex-shrink: 0;
}
.contents-plus-btn:hover  { background: var(--primary); color: #fff; }
.contents-plus-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Bouton ✕ écarter */
.contents-ecart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1.5px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer;
  transition: all .12s; flex-shrink: 0;
}
.contents-ecart-btn:hover  { border-color: var(--error); color: var(--error); }
.contents-ecart-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Popup de confirmation d'écartement */
.contents-ecart-confirm {
  position: fixed; z-index: 9999;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.15);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  max-width: 300px;
}
.contents-ecart-confirm-title {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.contents-ecart-confirm-title em { font-style: normal; color: var(--primary); }
.contents-ecart-confirm-hint {
  font-size: 11px; color: var(--muted); line-height: 1.5;
}
.contents-ecart-confirm-btns {
  display: flex; gap: 8px; justify-content: flex-end; padding-top: 2px;
}

/* ── Bandeau résumé orphelins (ligne fixe sous la filter-bar) ── */
.contents-orphan-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 500;
  background: #fffbeb; border-bottom: 2px solid #fde68a;
  flex-shrink: 0;
}
.contents-orphan-banner--ok    { background: #f0fdf4; border-bottom-color: #bbf7d0; color: #16a34a; }
.contents-orphan-banner--error { background: #fff7ed; border-bottom-color: #fed7aa; color: #92400e; }
[data-theme="dark"] .contents-orphan-banner        { background: #1c1600; border-bottom-color: #3d2e00; color: var(--text); }
[data-theme="dark"] .contents-orphan-banner--ok    { background: #052e16; border-bottom-color: #166534; color: #4ade80; }
[data-theme="dark"] .contents-orphan-banner--error { background: #1c1008; border-bottom-color: #7c2d12; color: #fbbf24; }

.contents-orphan-banner-icon { font-size: 15px; }
.contents-orphan-banner-link {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none; white-space: nowrap;
}
.contents-orphan-banner-link:hover { text-decoration: underline; }
.contents-orphan-retry-btn {
  margin-left: 10px; font-size: 11px; padding: 2px 10px;
  border: 1px solid #fed7aa; border-radius: 4px; background: transparent;
  color: #92400e; cursor: pointer;
}
.contents-orphan-retry-btn:hover { background: #fed7aa; }

/* Séparation marquée avant la section orphelins */
.contents-section--orphans {
  border-top: 3px solid var(--border);
  margin-top: 8px;
}

/* Lien Notion */
.contents-notion-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 13px; border-radius: 4px;
  text-decoration: none; opacity: .5; transition: opacity .12s;
  vertical-align: middle;
}
.contents-notion-link:hover { opacity: 1; }

.contents-empty {
  padding: 32px 20px; text-align: center;
  color: var(--muted); font-size: 13px;
}
.contents-empty--error { color: var(--error); }
.contents-loading {
  padding: 32px 20px; text-align: center;
  color: var(--muted); font-size: 13px;
}
.contents-table-empty {
  padding: 14px 14px; color: var(--muted); font-size: 12px; font-style: italic;
}

/* ── Sélecteur de projet orphelin (mission) ─────────────── */
.contents-proj-picker {
  position: fixed; z-index: 3100;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,.16);
  padding: 8px 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 220px; max-width: 260px;
}
.contents-proj-picker-title {
  padding: 4px 8px 6px; font-size: 12px; font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.contents-proj-picker-opt {
  padding: 6px 10px; font-size: 13px; text-align: left;
  background: transparent; border: none; border-radius: 4px; cursor: pointer;
  color: var(--text); transition: background .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contents-proj-picker-opt:hover { background: var(--subtle); color: var(--primary); }
.contents-proj-picker-cancel {
  padding: 6px 10px; font-size: 12px; text-align: left; font-weight: 500;
  background: transparent; border: none; border-radius: 4px; cursor: pointer;
  color: var(--muted); margin-top: 4px; border-top: 1px solid var(--border);
}
.contents-proj-picker-cancel:hover { color: var(--error); }

/* ── Popover édition ────────────────────────────────────── */
.contents-popover {
  position: fixed; z-index: 3200;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 32px rgba(0,0,0,.18);
  width: 330px; display: flex; flex-direction: column;
}
.contents-popover-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border);
}
.contents-popover-title {
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.contents-popover-close {
  background: none; border: none; font-size: 14px; color: var(--muted);
  cursor: pointer; padding: 2px 4px; flex-shrink: 0; border-radius: 4px;
  transition: color .1s;
}
.contents-popover-close:hover { color: var(--text); }

.contents-popover-body {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.contents-popover-row {
  display: flex; flex-direction: column; gap: 4px;
}
.contents-popover-row label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.contents-popover-date,
.contents-popover-input,
.contents-popover-select {
  padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font-family: var(--font); width: 100%; box-sizing: border-box;
  transition: border-color .12s;
}
.contents-popover-date:focus,
.contents-popover-input:focus,
.contents-popover-select:focus {
  outline: none; border-color: var(--primary);
}

.contents-popover-ft {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px 12px; border-top: 1px solid var(--border);
}
.contents-popover-notion-link {
  font-size: 12px; color: var(--muted); text-decoration: none;
  transition: color .12s;
}
.contents-popover-notion-link:hover { color: var(--primary); }
.contents-popover-btns {
  display: flex; gap: 6px; justify-content: flex-end;
}
.contents-popover-error {
  font-size: 12px; color: var(--error); padding: 4px 0;
}

/* ══════════════════════════════════════════════════════════
   ONBOARDING — bouton Projets Modulaires
══════════════════════════════════════════════════════════ */

/* Bouton Onboarding — variante violette dans la liste Projets Modulaires */
.mod-action-btn--onboard {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff !important;
  border-color: #4f46e5 !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.mod-action-btn--onboard:hover {
  opacity: .88;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}
/* 2026-06-17 — Hero « Case Study » : même traitement que l'onboarding mais en
   bleu TF (--primary). Utilisé dans Projets Modulaires ET dans le bloc Case
   study du panneau GP (bouton « Préparer le Case Study »). */
.mod-action-btn--casestudy {
  background: linear-gradient(135deg, #3b6cff 0%, var(--primary, #0043ff) 100%);
  color: #fff !important;
  border-color: var(--primary, #0043ff) !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.mod-action-btn--casestudy:hover {
  opacity: .9;
  background: linear-gradient(135deg, #3b6cff 0%, var(--primary, #0043ff) 100%);
}

/* ── Bouton group : gestion correcte avec N boutons ─────── */
/* Tous sauf le dernier : pas de border-right pour éviter les doubles bordures */
.proj-view-btn[data-view]:not(:last-child) { border-right: none; }
/* Boutons du milieu : pas de radius */
.proj-view-btn[data-view]:not(:first-child):not(:last-child) { border-radius: 0; }

/* ═════════════════════════════════════════════════════════════
   Suivi projets — vue agrégée (panelPtView)
   ═════════════════════════════════════════════════════════════ */
#panelPtView {
  height: calc(100dvh - var(--header-h, 52px));
  overflow-y: auto;
  padding: 20px 16px;
  box-sizing: border-box;
}
#panelPtView.hidden { display: none; }

.ptv-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.ptv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ptv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.ptv-subtabs {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ptv-subtab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.ptv-subtab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.ptv-subtab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.ptv-refresh {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.ptv-refresh:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Filtres ───────────────────────────────────────────── */
.ptv-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--subtle);
}
.ptv-filters.hidden { display: none; }

/* 2026-06-02 — Champ de recherche du Suivi de projets (liste + kanban) */
.ptv-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ptv-search-icon {
  position: absolute;
  left: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
}
.ptv-search-icon svg { display: block; }
.ptv-search-input {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  padding: 5px 26px 5px 28px;
  border-radius: 6px;
  font-size: 13px;
  width: 220px;
  transition: border-color .15s, box-shadow .15s;
}
.ptv-search-input::placeholder { color: var(--muted); }
.ptv-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.ptv-search-clear {
  position: absolute;
  right: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  line-height: 0;
}
.ptv-search-clear svg { display: block; }
.ptv-search-clear:hover { color: var(--text); background: var(--subtle); }
/* Affiche la croix quand le champ contient du texte */
.ptv-search-input:not(:placeholder-shown) ~ .ptv-search-clear { display: inline-flex; }

.ptv-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.ptv-filter select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.ptv-filter select:focus {
  outline: none;
  border-color: var(--primary);
}

/* 2026-06-11 — Filtres compacts : pilule (label seul) + select natif invisible
   par-dessus (s'ouvre au clic, prend la place du label, pas de « case »). */
.ptv-dd { position: relative; display: inline-flex; }
.ptv-dd-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--card); color: var(--text);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  white-space: nowrap; pointer-events: none; transition: all .15s;
}
.ptv-dd-ic { display: inline-flex; align-items: center; color: var(--muted); }
.ptv-dd-ic svg { display: block; }
.ptv-dd-caret { font-size: 10px; opacity: .55; margin-left: 1px; }
.ptv-dd-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; border: 0; padding: 0; opacity: 0; cursor: pointer; appearance: none;
}
.ptv-dd:hover .ptv-dd-pill { border-color: var(--primary); color: var(--primary); }
.ptv-dd:hover .ptv-dd-ic { color: var(--primary); }
.ptv-dd.is-active .ptv-dd-pill {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); border-color: var(--primary);
}
.ptv-dd.is-active .ptv-dd-ic { color: var(--primary); }

/* ── Contenu / Table ───────────────────────────────────── */
.ptv-content {
  padding: 0;
}

.ptv-counter {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
}
/* Bandeau "X projets masqués (non-Activation)" — V1 2026-04-28a */
.ptv-notice-filter {
  padding: 6px 12px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  font-style: italic;
  cursor: help;
  /* V6.7.115 — Align inline SVG (Icons.get('info')) avec le texte */
  display: flex; align-items: center; gap: 6px;
}
.ptv-notice-filter svg { flex-shrink: 0; }
/* V6.7.115 — Icon dans le chip À risque (.ptv-chip est déjà flex/gap ailleurs) */
.ptv-chip-icon { display: inline-flex; align-items: center; line-height: 1; }
.ptv-chip-icon svg { display: block; }

.ptv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ptv-table thead th {
  background: var(--subtle);
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ptv-table thead th.ptv-num { text-align: right; }

.ptv-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ptv-table td.ptv-num {
  text-align: right;
  white-space: nowrap;
}
/* V6.7.178 — Icône Lucide inline dans la cellule "Étape courante" */
.ptv-step-ic {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--primary);
}
.ptv-kb-col-icon svg { display: inline-block; vertical-align: middle; color: var(--primary); }

.ptv-row:hover td {
  background: var(--subtle);
}
.ptv-table tbody tr:last-child td { border-bottom: none; }

/* Tableau dépliable — ligne projet cliquable + ligne dépliée */
.ptv-expandable .ptv-row { cursor: pointer; }
.ptv-expandable .ptv-expand-col { width: 28px; padding-right: 0 !important; padding-left: 10px !important; }
.ptv-expand-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--text-muted);
  font-size: 12px;
  border-radius: 4px;
  transition: background .12s ease, color .12s ease;
}
.ptv-expand-btn:hover { background: var(--hover); color: var(--text); }
.ptv-expand-caret { display: inline-block; }
.ptv-row.ptv-row-open .ptv-expand-btn { color: var(--primary); }

.ptv-row-expanded > td {
  padding: 10px 14px 14px !important;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
}
.ptv-row-expanded .pt-track-compact {
  max-width: 100%;
}
/* 2026-06-02 — FIX scroll horizontal timeline dépliée (liste Suivi équipes).
   En auto table-layout, la cellule `<td colspan>` grandit à la largeur
   max-content de la timeline → la table déborde `.ptv-card { overflow:hidden }`
   qui clippe tout (donc « Terminé » + scroll invisibles). `max-width:0` retire
   la cellule du calcul de largeur de la table : la table reste à la largeur des
   lignes normales, et `.ptv-track-scroll` (width:100% de la cellule pleine
   largeur via colspan) scrolle enfin son contenu débordant. */
.ptv-row-expanded > td {
  max-width: 0;
}
/* V6.7.221 — Wrapper scrollable horizontalement pour la timeline expanded.
   Si on a beaucoup d'étapes (ou de très longs noms) et que la largeur ne
   suffit pas, le user peut scroller à l'intérieur de la ligne sans déborder
   le tableau. Min-width sur chaque step garantit la lisibilité des noms. */
.ptv-track-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* 2026-06-02 — scrollbar toujours visible (sinon « Terminé » qui dépasse le
     bord droit semble absent, l'utilisateur ne devine pas qu'il peut scroller). */
  padding-bottom: 2px;
}
.ptv-track-scroll::-webkit-scrollbar { height: 8px; }
.ptv-track-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--border, #d1d5db) 30%, transparent);
  border-radius: 4px;
}
.ptv-track-scroll::-webkit-scrollbar-thumb {
  background: var(--muted, #9ca3af);
  border-radius: 4px;
}
.ptv-track-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #6b7280);
}
/* Force min-width par step → quand la timeline ne tient pas sur 1 ligne,
   les étapes restent lisibles et le wrapper scroll devient actif.
   Override du flex:1 1 0 de .pt-track-compact pour permettre l'overflow. */
.ptv-track-scroll .pt-track-compact {
  width: max-content;        /* prend la largeur naturelle nécessaire */
  min-width: 100%;            /* mais s'étend si peu d'étapes (pas de scroll inutile) */
}
.ptv-track-scroll .pt-track-compact .pt-step {
  flex: 0 0 110px;            /* largeur fixe : 110px par step → noms lisibles */
  min-width: 110px;
  max-width: 110px;
}
/* V6.7.214 → V6.7.219 — Zone d'actions sous la timeline (Ping CdP du client).
   V6.7.219 : passage en `justify-content: flex-start` (gauche) — sur les
   écrans étroits le timeline + le bouton à droite débordaient hors viewport,
   coupant le label "Pinguer [Name]". À gauche, le bouton reste toujours
   visible quel que soit le nombre d'étapes affichées. */
.ptv-expanded-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ptv-ping-cdp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ptv-ping-cdp-btn:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 67, 255, 0.25);
}
.ptv-ping-cdp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* V6.7.218 — Bouton désactivé : marque sans Chef de Projet SM.
   Transparent, pas d'effet hover, cursor not-allowed. */
.ptv-ping-cdp-btn--disabled,
.ptv-ping-cdp-btn--disabled:hover {
  border-color: var(--border, #e5e7eb);
  background: transparent;
  color: var(--text-muted, #9ca3af);
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ptv-proj-title {
  font-weight: 600;
  color: var(--text);
}
.ptv-proj-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.ptv-muted { color: var(--muted); }

/* ── Retard badge ──────────────────────────────────────── */
.ptv-late {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Pastille "À risque" sur ligne projet (amélio 5 — 2026-04-27r) ── */
.ptv-risk-pill {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  filter: drop-shadow(0 0 2px rgba(255, 90, 0, .35));
  vertical-align: -1px;
}
.ptv-row-risk td:nth-child(3) .ptv-proj-title {
  /* léger surlignage pour repérer la ligne d'un coup d'œil */
  color: var(--text);
}

/* Chip "🔥 À risque" — toggle dans la toolbar */
.ptv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ptv-chip .ptv-chip-icon svg { width: 12px; height: 12px; }
.ptv-chip:hover {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-bg);
}
.ptv-chip.active {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error) inset;
}
.ptv-chip.ptv-chip-empty {
  opacity: .55;
}
.ptv-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--subtle);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.ptv-chip.active .ptv-chip-count {
  background: var(--error);
  color: #fff;
}
.ptv-chip.hidden { display: none; }

/* ── Toggle vue Liste / Kanban (2026-04-27u) ──────────── */
/* 2026-06-11 — Barre « Affichage » : segmented Kanban|Liste + toggles, à droite */
.ptv-viewbar {
  margin-left: auto;            /* pousse à droite — UN wrapper, pas chaque bouton */
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.ptv-seg {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 16px; background: var(--card); overflow: hidden;
}
.ptv-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; background: transparent;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ptv-seg-btn + .ptv-seg-btn { border-left: 1px solid var(--border); }
.ptv-seg-btn:hover { color: var(--primary); }
.ptv-seg-btn.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.ptv-seg-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--card);
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ptv-seg-toggle:hover { border-color: var(--primary); color: var(--primary); }
.ptv-seg-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); border-color: var(--primary);
}
.ptv-seg-sub { font-weight: 500; }
.ptv-seg-link {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 4px 6px; font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--primary); cursor: pointer; white-space: nowrap;
}
.ptv-seg-link:hover { text-decoration: underline; }
.ptv-seg-toggle.hidden, .ptv-seg-link.hidden { display: none; }

/* 2026-06-11 — Vue mensuelle : sections par mois de diffusion (repliables) */
.ptv-month-groups { display: flex; flex-direction: column; gap: 14px; }
.ptv-month-group-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  margin: 0 0 6px; padding: 7px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  position: sticky; top: 0; z-index: 2;
}
.ptv-month-group-head:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ptv-month-chevron { display: inline-flex; color: var(--muted); transition: transform .15s; }
.ptv-month-group.is-collapsed .ptv-month-chevron { transform: rotate(-90deg); }
.ptv-month-group.is-collapsed .ptv-month-group-body { display: none; }
.ptv-month-group-icon { color: var(--primary); display: inline-flex; }
.ptv-month-group-label { font-weight: 700; font-size: 13.5px; color: var(--text); }
.ptv-month-group.is-past .ptv-month-group-label,
.ptv-month-group.is-past .ptv-month-group-icon { color: var(--muted); }
.ptv-month-group.is-past .ptv-month-group-head {
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  border-color: color-mix(in srgb, var(--muted) 18%, transparent);
}
.ptv-month-group.is-current .ptv-month-group-head { box-shadow: 0 0 0 1.5px var(--primary) inset; }
.ptv-month-badge-now {
  font-size: 10px; font-weight: 700; color: #fff; background: var(--primary);
  border-radius: 999px; padding: 1px 8px; text-transform: uppercase; letter-spacing: .03em;
}
.ptv-month-group-count {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}
.ptv-month-group .ptv-counter { display: none; }
/* PJ2 — Colonnes ALIGNÉES d'un mois à l'autre : layout fixe + largeurs
   identiques sur toutes les tables mensuelles (sinon chaque table s'auto-
   dimensionne sur son propre contenu → décalage visible entre sections). */
.ptv-month-group .ptv-table { table-layout: fixed; width: 100%; }
.ptv-month-group .ptv-table th:nth-child(1),
.ptv-month-group .ptv-table td:nth-child(1) { width: 34px; }       /* expand */
.ptv-month-group .ptv-table th:nth-child(2),
.ptv-month-group .ptv-table td:nth-child(2) { width: 13%; }        /* Client */
.ptv-month-group .ptv-table th:nth-child(3),
.ptv-month-group .ptv-table td:nth-child(3) { width: 23%; }        /* Projet */
.ptv-month-group .ptv-table th:nth-child(4),
.ptv-month-group .ptv-table td:nth-child(4) { width: 14%; }        /* CdP */
.ptv-month-group .ptv-table th:nth-child(5),
.ptv-month-group .ptv-table td:nth-child(5) { width: 11%; }        /* Mois */
.ptv-month-group .ptv-table th:nth-child(6),
.ptv-month-group .ptv-table td:nth-child(6) { width: 16%; }        /* Étape courante */
.ptv-month-group .ptv-table th:nth-child(7),
.ptv-month-group .ptv-table td:nth-child(7) { width: 15%; }        /* % accompli */
.ptv-month-group .ptv-table th:nth-child(8),
.ptv-month-group .ptv-table td:nth-child(8) { width: 11%; }        /* Retard cumulé */
/* La ligne timeline dépliée (colspan=8) ne doit pas être contrainte par les largeurs */
.ptv-month-group .ptv-table .ptv-row-expanded td { width: auto; }
/* Barre de progression raccourcie en vue mensuelle pour laisser le % visible
   (le layout fixe rend la colonne plus étroite que la vue plate). */
.ptv-month-group .ptv-progress { width: 56px; margin-right: 6px; }
/* Ellipsis uniquement sur les colonnes texte mono-ligne (Client / CdP) —
   pas sur Projet (qui s'enroule) ni sur les colonnes numériques (% / retard). */
.ptv-month-group .ptv-table td:nth-child(2),
.ptv-month-group .ptv-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; }
/* Bouton « Afficher » dans le bandeau « passé masqué » */
.ptv-notice-act {
  margin-left: 8px; border: none; background: none; cursor: pointer;
  color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline;
}

/* ── Vue Kanban Suivi de projets (2026-04-27u) ────────── */
/* V6.7.172 — Toggle colonnes vides */
.ptv-kb-controls {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 12px;
}
.ptv-kb-toggle-empty {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.ptv-kb-toggle-empty:hover {
  color: var(--text);
  border-color: var(--text);
}
.ptv-kanban.hide-empty .ptv-kb-col.is-empty { display: none; }

.ptv-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scroll-snap-type: x proximity;
}
.ptv-kb-col {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  max-height: 70vh;
}
.ptv-kb-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.88rem;
}
.ptv-kb-col-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.ptv-kb-col-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptv-kb-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--subtle);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ptv-kb-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ptv-kb-empty {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 14px 8px;
  opacity: 0.45;
  font-style: italic;
}
.ptv-kb-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 4px;
  outline: none;
}
.ptv-kb-card:hover,
.ptv-kb-card:focus-visible {
  border-color: var(--primary);
  background: var(--hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ptv-kb-card.is-risk {
  border-left: 3px solid #f59e0b;
  padding-left: 9px;
}
/* V6.7.214 — Drag & drop kanban : feedback visuel */
.ptv-kb-card[draggable="true"] { cursor: grab; }
.ptv-kb-card[draggable="true"]:active { cursor: grabbing; }
.ptv-kb-card.is-dragging {
  opacity: 0.4;
  transform: rotate(1deg) scale(0.98);
}
.ptv-kb-col.drop-target {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  outline: 2px dashed var(--primary, #0043ff);
  outline-offset: -2px;
  transition: background 0.15s, outline-color 0.15s;
}
/* 2026-06-02 — Colonne « Terminé » en bout de Kanban (vue En cours) : teinte
   verte discrète pour la distinguer des colonnes d'étapes actives. */
.ptv-kb-col--done {
  background: color-mix(in srgb, var(--success, #10b981) 7%, var(--subtle));
  border-color: color-mix(in srgb, var(--success, #10b981) 30%, var(--border));
}
.ptv-kb-col--done .ptv-kb-col-head { color: var(--success, #10b981); }
.ptv-kb-col--done .ptv-kb-col-icon { color: var(--success, #10b981); }
.ptv-kb-col--done.drop-target {
  background: color-mix(in srgb, var(--success, #10b981) 12%, transparent);
  outline-color: var(--success, #10b981);
}
.ptv-kb-col.drop-target .ptv-kb-col-head {
  color: var(--primary, #0043ff);
}
.ptv-kb-card-client {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ptv-kb-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.ptv-kb-card-sub {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptv-kb-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
}

/* V6.7.374 — Badges commentaires (kanban + liste) + popover */
.ptv-kb-comment-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ptv-kb-comment-badge:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, var(--surface));
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
.ptv-kb-comment-badge.has-comments {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, var(--surface));
  color: var(--primary, #0043ff);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border));
}
/* V6.7.376 — Rouge si ≥1 non-lu pour le viewer courant */
.ptv-kb-comment-badge.has-unread {
  background: color-mix(in srgb, #ef4444 14%, var(--surface));
  color: #dc2626;
  border-color: color-mix(in srgb, #ef4444 50%, var(--border));
  animation: pcBadgePulse 2s ease-in-out infinite;
}
@keyframes pcBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.ptv-kb-comment-count { font-weight: 700; }

.ptv-kb-card { position: relative; }

/* 2026-06-11 — Étoile Case Study (intent manuel) — liste + kanban */
.ptv-cs-star {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 0 3px; border: none; background: none;
  font-size: 14px; line-height: 1; cursor: pointer; color: var(--muted);
  filter: grayscale(1); opacity: .55; transition: opacity .12s, filter .12s, transform .12s;
}
.ptv-cs-star:hover { opacity: 1; transform: scale(1.15); }
.ptv-cs-star.is-starred { filter: none; opacity: 1; color: #f5b301; }
/* 2026-06-17 — état « à ne pas faire » : étoile pleine sombre */
.ptv-cs-star.is-skip { filter: none; opacity: 1; color: var(--text, #1f2937); }
.ptv-kb-cs-star { position: absolute; top: 6px; right: 30px; margin: 0; }

.ptv-row-comment-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ptv-row-comment-badge:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 30%, var(--border));
  color: var(--primary, #0043ff);
}
.ptv-row-comment-badge.has-comments {
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  color: var(--primary, #0043ff);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 30%, var(--border));
}
/* V6.7.376 — Rouge si ≥1 non-lu pour le viewer courant (liste) */
.ptv-row-comment-badge.has-unread {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #dc2626;
  border-color: color-mix(in srgb, #ef4444 40%, var(--border));
}
.ptv-row-comment-count { font-weight: 700; }

/* Popover commentaires */
.project-comments-pop {
  width: 420px;
  max-height: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  animation: pcPopFade 0.14s ease;
}
@keyframes pcPopFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pc-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--subtle) 0%, var(--surface) 100%);
}
.pc-pop-title { font-size: 13px; font-weight: 700; color: var(--text); }
.pc-pop-proj { color: var(--muted); font-weight: 500; margin-left: 4px; }
.pc-pop-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 4px;
}
.pc-pop-close:hover { background: var(--subtle); color: var(--text); }

.pc-pop-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-pop-loading,
.pc-pop-empty {
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 18px 8px;
}
.pc-pop-item {
  padding: 8px 10px;
  background: var(--subtle);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* V6.7.376 — Comment non lu par le viewer courant */
.pc-pop-item.is-unread {
  background: color-mix(in srgb, #ef4444 8%, var(--subtle));
  border-color: color-mix(in srgb, #ef4444 35%, var(--border));
  border-left: 3px solid #ef4444;
  padding-left: 8px;
}
.pc-pop-unread-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.pc-pop-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11.5px;
}
.pc-pop-author { color: var(--text); font-weight: 700; }
.pc-pop-date { color: var(--muted); font-size: 10.5px; }
.pc-pop-mention-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.pc-pop-del {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  opacity: 0.5;
  padding: 2px 4px;
  border-radius: 4px;
}
.pc-pop-item:hover .pc-pop-del { opacity: 0.9; }
.pc-pop-del:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
.pc-pop-body {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  word-wrap: break-word;
}

.pc-pop-composer {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  background: var(--surface);
}
.pc-pop-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.pc-pop-input:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
}
.pc-pop-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.pc-pop-mention-btn,
.pc-pop-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.pc-pop-mention-btn:hover { background: var(--subtle); }
.pc-pop-mention-count {
  display: inline-block;
  background: var(--primary, #0043ff);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.pc-pop-submit {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.pc-pop-submit:disabled {
  background: var(--subtle);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}
.pc-pop-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #0043ff) 90%, #000);
}

/* Mention picker */
.pc-mention-picker {
  width: 280px;
  max-height: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc-mention-search {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.pc-mention-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  box-sizing: border-box;
}
.pc-mention-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.pc-mention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}
.pc-mention-row:hover { background: var(--subtle); }
.pc-mention-row.is-selected { background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent); }
.pc-mention-row input { margin: 0; }
.pc-mention-name { flex: 1 1 auto; font-weight: 500; color: var(--text); }
.pc-mention-role { font-size: 10.5px; color: var(--muted); }
.pc-mention-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
}
.pc-mention-cancel,
.pc-mention-ok {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.pc-mention-ok {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}

[data-theme="dark"] .project-comments-pop,
[data-theme="dark"] .pc-mention-picker { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .pc-pop-item { background: #232b3a; border-color: #374151; }
[data-theme="dark"] .pc-pop-input { background: #1f2937; border-color: #374151; }
.ptv-kb-card-cdp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
.ptv-kb-late {
  color: #dc2626;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.76rem;
}
.ptv-kb-card-progress {
  height: 4px;
  background: var(--subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ptv-kb-card-progress-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* ── Terminé badge ─────────────────────────────────────── */
.ptv-done-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Progress bar ──────────────────────────────────────── */
.ptv-progress {
  display: inline-block;
  width: 100px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.ptv-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #3b82f6);
  border-radius: 3px;
  transition: width .3s ease;
}
.ptv-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   Panneau "Étapes & Laps" (CRUD)
   ══════════════════════════════════════════════════════════ */
.ptv-config {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ptv-config-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0;
}

.ptv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.ptv-toggle input { cursor: pointer; }

.ptv-config-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.ptv-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
}
.ptv-config-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.ptv-config-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptv-cfg-table {
  font-size: 13px;
}
.ptv-cfg-table th,
.ptv-cfg-table td {
  padding: 7px 10px;
  vertical-align: middle;
}
.ptv-cfg-table th.ptv-center,
.ptv-cfg-table td.ptv-center { text-align: center; }

.ptv-cfg-table input[type="text"],
.ptv-cfg-table input[type="number"],
.ptv-cfg-table select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.ptv-cfg-table input[type="text"]   { width: 100%; min-width: 160px; }
.ptv-cfg-table input[type="number"] { width: 70px; text-align: right; }
.ptv-cfg-table select               { min-width: 110px; }
.ptv-cfg-table input[type="text"]:focus,
.ptv-cfg-table input[type="number"]:focus,
.ptv-cfg-table select:focus {
  outline: none;
  border-color: var(--primary);
}

.ptv-cfg-table button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
  transition: background .12s, border-color .12s;
}
.ptv-cfg-table button:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--subtle);
}
.ptv-cfg-table button:disabled {
  cursor: wait;
  opacity: .6;
}

.ptv-archived {
  opacity: 0.55;
  background: var(--subtle);
}
.ptv-archived-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.ptv-orphan {
  background: var(--error-bg);
}
.ptv-orphan:hover td { background: var(--error-bg); }

/* ── Modal création d'étape — placement ───────────────── */
.psc-placement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.psc-placement label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
}
.psc-placement select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 180px;
}
.psc-placement .psc-end { width: 100%; }

.pt-field-inline {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
}

/* ── Ligne Icône + Nom côte-à-côte dans la modal étape ─── */
.psc-name-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.psc-icon-field  { flex: 0 0 auto; }
.psc-name-field  { flex: 1 1 auto; }

.psc-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: border-color .12s, background .12s;
}
.psc-icon-btn:hover {
  border-color: var(--primary);
  background: var(--subtle);
}

/* ── Bouton icône dans la table des étapes ─────────────── */
.ptv-cfg-icon-btn {
  width: 36px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Palette de picker d'icônes ────────────────────────── */
.pic-modal { max-width: 520px; }

.pic-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.pic-cell {
  aspect-ratio: 1 / 1;
  font-size: 22px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.pic-cell:hover {
  border-color: var(--primary);
  background: var(--subtle);
}
.pic-cell.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.pic-cell:active {
  transform: scale(.95);
}

#pic-custom {
  text-align: center;
  font-size: 18px;
  width: 80px;
  margin-left: 8px;
}

/* ── Hint discret sous la modal lap ────────────────────── */
.plc-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--subtle);
  border-radius: 6px;
  line-height: 1.4;
}

/* ── Spinner de chargement ─────────────────────────────── */
.ptv-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: ptv-spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes ptv-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════
   🔔 Cloche alertes Suivi projets (header + dropdown)
   ════════════════════════════════════════════════════════════ */
.bell-alerts-wrap { position: relative; display: inline-flex; }
.bell-alerts-wrap.hidden { display: none !important; }

.btn-bell {
  position: relative;
  overflow: visible;
}
.btn-bell.has-critical {
  animation: bell-pulse 1.6s ease-in-out infinite;
}
@keyframes bell-pulse {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(-12deg); }
  20%      { transform: rotate(10deg);  }
  30%      { transform: rotate(-8deg);  }
  40%      { transform: rotate(6deg);   }
  50%      { transform: rotate(0deg);   }
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--error, #e74c3c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
.bell-badge.hidden { display: none; }

/* Dropdown panel */
.bell-dropdown {
  position: fixed;
  z-index: 1000;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bell-dropdown.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bell-drop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, #fafafa);
}
.bell-drop-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  /* V6.7.121 — Align SVG Lucide */
  display: inline-flex; align-items: center; gap: 6px;
}
.bell-drop-title svg { display: block; }
.bell-drop-btn { display: inline-flex; align-items: center; gap: 5px; }
.bell-drop-btn svg { display: block; }
.bell-alert-read { display: inline-flex; align-items: center; justify-content: center; }
.bell-alert-read svg { display: block; }
.bell-drop-footer a { display: inline-flex; align-items: center; gap: 5px; }
.bell-drop-footer a svg { display: block; }
.bell-drop-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: var(--error, #e74c3c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}
.bell-drop-actions {
  display: flex;
  gap: 6px;
}
.bell-drop-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bell-drop-btn:hover {
  background: var(--surface-3, #f0f0f0);
  color: var(--text);
}
.bell-drop-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bell-drop-body {
  overflow-y: auto;
  padding: 4px 0;
}
.bell-drop-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Une ligne d'alerte */
.bell-alert {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  gap: 10px;
  align-items: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft, #f0f0f0);
  cursor: pointer;
  transition: background .12s;
}
.bell-alert:hover { background: var(--surface-2, #fafafa); }
.bell-alert:last-child { border-bottom: none; }

.bell-alert.is-unread {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.bell-alert.is-unread:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.bell-alert.is-read .bell-alert-body { opacity: 0.72; }

.bell-alert.sev-critical .bell-alert-icon { filter: saturate(1.4); }
.bell-alert.sev-critical {
  border-left: 3px solid var(--error, #e74c3c);
  padding-left: 11px;
}
.bell-alert.sev-warn {
  border-left: 3px solid #f59e0b;
  padding-left: 11px;
}
.bell-alert.sev-info {
  border-left: 3px solid var(--primary);
  padding-left: 11px;
}

.bell-alert-icon {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
.bell-alert-body {
  min-width: 0;
  font-size: 12px;
}
.bell-alert-line1 {
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bell-alert-line2 {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bell-alert-read {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.bell-alert-read:not(:disabled):hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.bell-alert-read:disabled {
  opacity: 0.5;
  cursor: default;
  background: var(--surface-2);
}

.bell-drop-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, #fafafa);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.bell-drop-footer a {
  color: var(--primary);
  text-decoration: none;
}
.bell-drop-footer a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   📋 Log alertes — sous-onglet de Suivi projets
   ════════════════════════════════════════════════════════════ */
.ptv-alerts {
  padding: 4px 0 24px;
}
.ptv-alerts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.ptv-alerts-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.ptv-alerts-toolbar select,
.ptv-alerts-toolbar input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}
.ptv-alerts-toolbar .ptv-alerts-scan {
  margin-left: auto;
}
.ptv-alerts-count {
  font-size: 12px;
  color: var(--text-muted);
}
.ptv-alerts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ptv-alerts-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ptv-alerts-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft, #f0f0f0);
  vertical-align: top;
}
.ptv-alerts-table tr.resolved td { opacity: 0.55; }
.ptv-sev-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ptv-sev-pill.critical { background: var(--error, #e74c3c); color: #fff; }
.ptv-sev-pill.warn     { background: #f59e0b; color: #fff; }
.ptv-sev-pill.info     { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.ptv-sev-pill.resolved { background: var(--surface-3); color: var(--text-muted); }

/* ── Stats header ─────────────────────────────── */
.ptv-alerts-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}
.ptv-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68px;
}
.ptv-stat-card.critical { border-left: 4px solid var(--error, #e74c3c); }
.ptv-stat-card.warn     { border-left: 4px solid #f59e0b; }
.ptv-stat-card.info     { border-left: 4px solid var(--primary); }
.ptv-stat-card.total    { border-left: 4px solid var(--text); }
.ptv-stat-card.projects { border-left: 4px solid #8b5cf6; }
.ptv-stat-card.cdps,
.ptv-stat-card.last     { border-left: 4px solid var(--surface-3); }
.ptv-stat-n {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.ptv-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-top: 2px;
}
.ptv-stat-meta {
  font-size: 12px;
  color: var(--text);
  margin-top: 2px;
}
.ptv-stat-row {
  font-size: 12px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.ptv-stat-pill {
  background: var(--surface-3);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ── Search input ─────────────────────────────── */
.ptv-alerts-toolbar .ptv-alerts-search input {
  min-width: 180px;
}

/* ── Sortable headers ─────────────────────────── */
.ptv-alerts-table th.sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ptv-alerts-table th.sort:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* ── Action buttons per row ───────────────────── */
.ptv-alerts-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
}
.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-mini:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--primary);
}
.btn-mini:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-mini.ok {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 40%, var(--border));
}
.btn-mini.ok:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  border-color: #16a34a;
}

/* ════════════════════════════════════════════════════════════
   ACCUEIL — Tableau de bord CdP
   ════════════════════════════════════════════════════════════ */

.home-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

/* ── Hero "Phrase du jour TF" ──────────────────────────── */
.home-hero {
  position: relative;
  border-radius: 18px;
  /* V6.7 — padding allégé (-25%) pour libérer du vertical au-dessus du pli.
     La 4e colonne sidebar élargit déjà le hero, on profite de la respiration
     horizontale pour réduire la hauteur sans serrer le contenu. */
  padding: 22px 32px;
  margin-bottom: 18px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0043ff 0%, #6366f1 60%, #8b5cf6 100%);
  box-shadow: 0 10px 40px rgba(0,67,255,.18), 0 4px 12px rgba(0,0,0,.08);
}
/* V6.7.350 — Bouton refresh top-right du hero Home */
.home-hero-refresh {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s, transform .12s;
  backdrop-filter: blur(4px);
}
.home-hero-refresh:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
}
.home-hero-refresh:active { transform: scale(0.94); }
/* V6.7.485 — État loading : battement de cœur (opacité + scale) sur tout
   le bouton plutôt que spin du SVG seul. Cohérent avec le bouton refresh
   graphiste (V6.7.433) : plus apaisant, signale « j'ai entendu, je bosse ». */
.home-hero-refresh.is-spinning {
  animation: homeHeroHeartbeat 0.85s ease-in-out infinite;
  pointer-events: none;
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.5);
}
.home-hero-refresh.is-spinning svg { animation: none; }
@keyframes homeHeroHeartbeat {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.88); }
}

/* Variantes de gradient selon la tranche horaire */
.home-hero[data-slot="dawn"]      { background: linear-gradient(135deg, #f59e0b 0%, #f97316 40%, #db2777 100%); }
.home-hero[data-slot="morning"]   { background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #6366f1 100%); }
.home-hero[data-slot="noon"]      { background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%); }
.home-hero[data-slot="afternoon"] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #ec4899 100%); }
.home-hero[data-slot="evening"]   { background: linear-gradient(135deg, #c026d3 0%, #7c3aed 50%, #1e1b4b 100%); }
.home-hero[data-slot="night"]     { background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 60%, #020617 100%); }

/* Variantes mood — léger overlay */
.home-hero[data-mood="storm"]::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(127,29,29,.25));
  pointer-events: none;
}
.home-hero[data-mood="party"]::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none;
}

/* Pictos d'ambiance flottants en arrière-plan */
.home-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.home-hero-bg .hero-ico {
  position: absolute;
  opacity: 0.12;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
  animation: heroFloat 12s ease-in-out infinite;
  user-select: none;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(8deg); }
}

.home-hero-inner {
  position: relative;
  z-index: 1;
}
.home-hero-date {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 500;
  margin-bottom: 8px;
}
.home-hero-hello {
  /* V6.7 — taille légèrement réduite (-10%) pour densifier le hero */
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.home-hero-phrase {
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.45;
  max-width: 640px;
  opacity: 0.94;
  font-weight: 400;
  font-style: italic;
}
.home-hero-sub {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  opacity: 0.92;
}
.home-hero-sub .sev-crit { color: #fecaca; }
.home-hero-sub .sev-warn { color: #fde68a; }

/* ── Home V2 (Release 2) — Hero refondu : greeting + mood + lissage footer ── */
.home-hero-greeting {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.home-hero-greeting strong { font-weight: 700; opacity: 1; }
.home-hero-mood {
  margin-top: 8px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.5;
  opacity: 0.97;
  /* Pas de max-width : la phrase tient sur 1 ligne sur les écrans larges et
     wrappe naturellement sur mobile. Padding droit (32px) géré par .home-hero. */
}
.home-hero-mood em { font-style: normal; font-weight: 500; }
.home-hero-lissage {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}
.home-hero-lissage:hover { color: #fff; }
.home-hero-lissage.is-nocap { cursor: default; }
.home-hero-lissage svg { opacity: 0.85; flex-shrink: 0; }
.home-hero-lissage-label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.62rem; opacity: 0.8; }
.home-hero-lissage-num { font-weight: 600; font-feature-settings: "tnum"; color: #fff; }
.home-hero-lissage-pct { font-weight: 700; font-size: 0.66rem; color: #fff; background: var(--hl, rgba(255,255,255,0.2)); padding: 1px 7px; border-radius: 6px; }
.home-hero-lissage-muted { opacity: 0.7; }
.home-hero-lissage-bar { flex: 1; max-width: 180px; height: 3px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.home-hero-lissage-bar > span { display: block; height: 100%; background: var(--hl, #fff); border-radius: 2px; }
.home-hero-lissage-link { margin-left: auto; color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; opacity: 0.9; }
.home-hero-lissage-link:hover { opacity: 1; }
@media (max-width: 560px) {
  .home-hero-lissage { flex-wrap: wrap; gap: 6px 8px; }
  .home-hero-lissage-bar { max-width: none; flex-basis: 100%; order: 5; }
  .home-hero-lissage-link { order: 6; margin-left: 0; }
}

.hero-mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-weight: 600;
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
}
.hero-mood-pill.ok    { background: rgba(34,197,94,.25); }
.hero-mood-pill.calm  { background: rgba(255,255,255,.18); }
.hero-mood-pill.busy  { background: rgba(245,158,11,.28); }
.hero-mood-pill.storm { background: rgba(239,68,68,.32); }

/* ── Home V2 (Release 1) — Quickbar pastilles signaux ──
   4 icônes Lucide flottantes centrées sous le hero (inbox / messages /
   notifs / notes). Pastille colorée si count>0 (tone), grise si 0.
   Pas de bloc-conteneur — affordance pure (icône + badge).               */
.home-quickbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 10px 0 22px;
  padding: 0;
  background: transparent;
  border: 0;
}
.home-quickbar-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform .15s ease, color .15s ease;
}
.home-quickbar-btn:hover { color: var(--text); transform: translateY(-2px); }
.home-quickbar-btn:hover svg { filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--primary) 25%, transparent)); }
.home-quickbar-btn svg { display: block; }
.home-quickbar-btn.has-items { color: var(--text); }
.home-quickbar-btn .badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg, #fff);
  font-feature-settings: "tnum";
}
.home-quickbar-btn .badge.zero { background: var(--subtle, #e5e7eb); color: var(--muted); }
.home-quickbar-btn[data-tone="warn"] .badge { background: #f59e0b; color: #3a2a08; }
.home-quickbar-btn[data-tone="crit"] .badge { background: #dc2626; color: #fff; }
@media (max-width: 420px) {
  .home-quickbar { gap: 12px; margin: 6px 0 16px; }
}

/* ── V6.1 — Encart jauge plan de lissage du jour (sous-header Home) ──
   Cliquable → bascule sur l'onglet To Do en mode Jour. Reprend la palette
   d'alerte SeLissage (gray/blue/teal/green/yellow/orange/red) côté liseré
   gauche pour rester homogène avec la jauge du calendrier (V5).            */
.home-workload-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hwb-color, #94a3b8);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.home-workload-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border-color: var(--hwb-color, var(--border));
}
.home-workload-banner:active { transform: translateY(0); }
.home-workload-banner:focus-visible {
  outline: 2px solid var(--hwb-color, #2563eb);
  outline-offset: 2px;
}

.home-workload-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hwb-color, #94a3b8) 14%, transparent);
}

.home-workload-banner-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-workload-banner-title {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--text);
}
.home-workload-banner-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  overflow: hidden;
}
.home-workload-banner-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--hwb-color, #94a3b8);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.home-workload-banner-over {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(239,68,68,.85) 0 6px,
    rgba(127,29,29,.85) 6px 12px
  );
  border-radius: 0 999px 999px 0;
  z-index: 1;
}
.home-workload-banner-target {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--text);
  opacity: 0.55;
  z-index: 2;
}
.home-workload-banner-stats {
  font-size: 0.86rem;
  color: var(--text);
}
.home-workload-banner-stats .hwb-muted { color: var(--text-muted); font-weight: 400; }
.home-workload-banner-stats .hwb-off   {
  color: var(--text);
  background: color-mix(in srgb, var(--hwb-color, #94a3b8) 16%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.home-workload-banner-cta {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--hwb-color, var(--text-muted));
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hwb-color, #94a3b8) 10%, transparent);
}

/* Variantes d'alerte — reprend les couleurs SeLissage (V5) */
.home-workload-banner--gray   { --hwb-color: #94a3b8; }
.home-workload-banner--blue   { --hwb-color: #3b82f6; }
.home-workload-banner--teal   { --hwb-color: #0ea5e9; }
.home-workload-banner--green  { --hwb-color: #22c55e; }
.home-workload-banner--yellow { --hwb-color: #eab308; }
.home-workload-banner--orange { --hwb-color: #f97316; }
.home-workload-banner--red    { --hwb-color: #ef4444; }

/* Cas "no capacity" — pas de barre, juste le motif (WE / Férié / Off plein) */
.home-workload-banner.is-nocap {
  cursor: default;
  opacity: 0.85;
}
.home-workload-banner.is-nocap:hover { transform: none; }

/* Skeleton pendant le chargement de l'agenda */
.home-workload-banner.is-skeleton {
  cursor: progress;
  border-left-color: var(--border);
}

/* Responsive : sur mobile, on cache le CTA texte (la card reste cliquable) */
@media (max-width: 640px) {
  .home-workload-banner { grid-template-columns: auto 1fr; padding: 12px 14px; }
  .home-workload-banner-cta { display: none; }
}

/* Mode sombre — léger ajustement de la barre de fond */
body.dark .home-workload-banner-bar {
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}

/* ── V6.5 — Encart agenda en footer ────────────────────── */
.home-agenda-footer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(180px, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  align-items: stretch;
}
.home-agenda-footer:hover:not(:disabled) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}
.home-agenda-footer.is-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.home-agenda-footer.is-skeleton {
  cursor: progress;
  display: grid;
}
.home-agenda-foot-icon { font-size: 1.1rem; }
.home-agenda-foot-empty { font-size: 0.9rem; }

/* Cellule "En cours" (gauche) */
.home-agenda-foot-now {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #16a34a 10%, transparent);
  border: 1px solid color-mix(in srgb, #16a34a 35%, var(--border));
  position: relative;
}
.home-agenda-foot-now-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #16a34a;
}
.home-agenda-foot-now-pill .pulse {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,.6);
  animation: home-agenda-foot-pulse 2s infinite;
}
@keyframes home-agenda-foot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.home-agenda-foot-now-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-agenda-foot-now-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Cellule "Prochain principal" (centre) */
.home-agenda-foot-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}
.home-agenda-foot-main.is-empty {
  background: var(--subtle);
  border-style: dashed;
  color: var(--muted);
  font-size: 0.85rem;
}
.home-agenda-foot-main-icon { font-size: 1.4rem; flex-shrink: 0; }
.home-agenda-foot-main-body { flex: 1; min-width: 0; }
.home-agenda-foot-main-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.home-agenda-foot-main-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.home-agenda-foot-main-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cellule "Mini suivants" (droite) */
.home-agenda-foot-minis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-agenda-foot-minis.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}
.home-agenda-foot-mini {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--subtle);
  font-size: 0.82rem;
  min-height: 28px;
}
.home-agenda-foot-mini-when {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.home-agenda-foot-mini-title {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Boutons Meet (à droite des cellules) */
.home-agenda-foot-meet,
.home-agenda-foot-mini-meet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  flex-shrink: 0;
  transition: all var(--transition);
}
.home-agenda-foot-meet:hover,
.home-agenda-foot-mini-meet:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
}
.home-agenda-foot-mini-meet { width: 22px; height: 22px; font-size: 0.85rem; }

/* Responsive : empile en 2 colonnes puis 1 colonne sur mobile */
@media (max-width: 1024px) {
  .home-agenda-footer { grid-template-columns: 1fr 1fr; }
  .home-agenda-foot-minis { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .home-agenda-footer { grid-template-columns: 1fr; }
  .home-agenda-foot-minis { grid-column: auto; }
}

/* ── Grille de cards ────────────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

.home-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 20px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow);
}
.home-card:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.home-card:disabled,
.home-card.empty {
  cursor: default;
  opacity: 0.62;
}
.home-card.empty:hover {
  transform: none;
  box-shadow: var(--shadow);
  border-color: var(--border);
}
/* V6.7.493 — Card empty non-disabled (ex: orphan-slots avec ignorés) :
   reste cliquable → curseur pointer + hover léger. */
.home-card.empty:not([disabled]) {
  cursor: pointer;
}
.home-card.empty:not([disabled]):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, var(--shadow));
  border-color: color-mix(in srgb, #16a34a 25%, var(--border));
}

.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.home-card-icon {
  font-size: 1.4rem;
  line-height: 1;
  /* V6.7.144 — Pour les SVG Lucide : flex centré + couleur héritée via currentColor.
     Par défaut bleu primaire ; override via tones (cf. règles ci-dessous). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.home-card-icon svg { display: block; }
.home-card-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--subtle);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.home-card-n {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  margin: 8px 0 6px;
  letter-spacing: -0.03em;
}
.home-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.home-card-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.home-card-sub a.home-link {
  color: var(--primary);
  text-decoration: none;
}
.home-card-sub a.home-link:hover {
  text-decoration: underline;
}

/* Tons par card (couleur chiffre + accent gauche + icône SVG) */
.home-card.tone-ok    .home-card-n { color: #16a34a; }
.home-card.tone-warn  .home-card-n { color: #d97706; }
.home-card.tone-crit  .home-card-n { color: #dc2626; }
.home-card.tone-info  .home-card-n { color: var(--primary); }

.home-card.tone-warn  { border-left: 3px solid #f59e0b; }
.home-card.tone-crit  { border-left: 3px solid #dc2626; }
.home-card.tone-ok    { border-left: 3px solid #22c55e; }

/* V6.7.144 — Couleur de l'icône Lucide alignée sur le tone (currentColor) */
.home-card.tone-crit    .home-card-icon { color: #dc2626; }
.home-card.tone-warn    .home-card-icon { color: #d97706; }
.home-card.tone-ok      .home-card-icon { color: #16a34a; }
.home-card.tone-info    .home-card-icon { color: var(--primary); }
.home-card.tone-neutral .home-card-icon { color: var(--primary); }
/* État vide (zone "FAIT") : icône plus discrète */
.home-card.empty .home-card-icon { color: var(--muted); opacity: .7; }

/* ─────────────────────────────────────────────────────────────────────
   V6.7 — Nouveau layout Home : 3 zones (urgent / todo / done) + sidebar
   agenda en 4e colonne sticky.

   • home-layout         : grid 2 colonnes (cards | sidebar)
   • home-cards          : colonne gauche, contient les 3 zones empilées
   • home-zone           : section logique (header + grid de cards)
   • home-zone-cards     : grid 3-col (= ancien .home-grid)
   • home-zone--urgent   : full size + accent rouge + animation pulse douce
   • home-zone--todo     : full size, neutre — c'est l'état "normal"
   • home-zone--done     : compact (5 col, mini cards), fond bleu validant
   • home-sidebar        : sticky top, agenda vertical
   ───────────────────────────────────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1280px) {
  /* Sur écran < 1280px : la sidebar bascule au-dessus de la grille (au lieu
     d'être tassée en colonne étroite). Reste visible sans scroll. */
  .home-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-sidebar {
    order: -1;
    position: static !important;
  }
}

.home-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* ── Zone (urgent / todo / done) ───────────────────────── */
.home-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.home-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--zone-c, var(--muted));
  flex: 0 0 auto;
}
.home-zone-label { color: var(--zone-c, var(--text)); }
.home-zone-count {
  /* V6.7.235 — Collé au titre (avant : margin-left: auto poussait à droite). */
  font-size: 0.72rem;
  background: var(--subtle);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}

.home-zone-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .home-zone-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .home-zone-cards { grid-template-columns: 1fr; }
}

/* ── Home V2 (Release 4) — sections strates « Aujourd'hui » / « Cette semaine » ── */
.home-section { margin-bottom: 18px; }
.home-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; padding: 0 4px; }
.home-section-head h2 { margin: 0; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.home-section-count { font-size: 11px; color: var(--muted); opacity: 0.7; font-feature-settings: "tnum"; }
.home-section-strap { font-size: 11px; color: var(--muted); opacity: 0.65; margin-left: auto; font-style: italic; }
/* « Aujourd'hui » → cards XL : chiffres et padding renforcés (impact 2× plus fort) */
.home-section--today .home-card { padding: 22px 24px; }
.home-section--today .home-card-n { font-size: 42px; }
.home-section--today .home-card-title { font-size: 14px; font-weight: 600; }
@media (max-width: 720px) {
  .home-section--today .home-card { padding: 16px 18px; }
  .home-section--today .home-card-n { font-size: 34px; }
}
/* Chip footer portant un compteur (card en strate 'footer' avec des items) */
.home-ok-chip.has-n { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); color: var(--text); }
.home-ok-n { font-weight: 700; font-feature-settings: "tnum"; color: var(--primary); margin-left: 2px; }

/* Variantes de zone — couleurs d'accent et tailles
   V6.7.1 — urgent + todo ont fusionné en zone "active" (grille 3-col continue,
   sans header). Les cards critiques (tone-crit) gardent leur pulse via le
   sélecteur direct (plus besoin de parent .home-zone--urgent).               */
.home-zone--done   { --zone-c: #2563eb; }

/* ── Home V2 (Release 3) — Footer « Tout est OK côté » ──
   Remplace la zone « Fait » (mini-cards) par une ligne compacte de chips.   */
.home-ok-footer {
  margin-top: 18px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--success, #16a34a) 6%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--success, #16a34a) 30%, var(--border));
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.home-ok-label {
  color: var(--success, #16a34a);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.home-ok-label svg { flex-shrink: 0; }
.home-ok-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft, var(--muted));
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.home-ok-chip svg { flex-shrink: 0; opacity: .7; }
.home-ok-chip:hover { background: var(--subtle, var(--card)); color: var(--text); border-color: color-mix(in srgb, var(--success, #16a34a) 40%, var(--border)); }
@media (max-width: 420px) {
  .home-ok-footer { padding: 8px 10px; gap: 6px; }
}

/* Pulse doux sur toutes les cards critiques, peu importe la zone parente.
   La diagonale de priorité décroissante (urgent → trivial) suffit à
   l'utilisateur ; le pulse est juste un rappel d'attention sur les crit. */
.home-card.tone-crit {
  animation: home-card-pulse 2.4s ease-in-out infinite;
}
@keyframes home-card-pulse {
  0%, 100% { box-shadow: var(--shadow); }
  50%      { box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 25%, transparent), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-card.tone-crit { animation: none; }
}

/* Done : zone "c'est fait" — cards compactes, fond bleu pâle validant.
   On veut que la zone respire visuellement le calme : layout dense,
   teinte unifiée, suppression de l'opacity sombre des cards empty. */
.home-zone--done .home-zone-cards {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) {
  .home-zone--done .home-zone-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .home-zone--done .home-zone-cards { grid-template-columns: repeat(2, 1fr); }
}
.home-zone--done .home-card.empty {
  /* Override de l'opacité grisée par défaut : ici on est en mode "validant" */
  opacity: 1;
  padding: 12px 12px 14px;
  background: color-mix(in srgb, #2563eb 6%, var(--card));
  border-color: color-mix(in srgb, #2563eb 18%, var(--border));
  border-left: 3px solid color-mix(in srgb, #16a34a 55%, transparent);
}
.home-zone--done .home-card.empty .home-card-icon {
  font-size: 1.05rem;
  opacity: 0.7;
}
.home-zone--done .home-card.empty .home-card-n {
  /* Le "0" est anecdotique en zone done — on le rend petit et discret */
  font-size: 1.2rem;
  margin: 4px 0 2px;
  color: #16a34a;
}
.home-zone--done .home-card.empty .home-card-title {
  font-size: 0.82rem;
}
.home-zone--done .home-card.empty .home-card-sub {
  font-size: 0.74rem;
  margin-top: 3px;
}

/* ── Sidebar agenda (4e colonne, sticky) ─────────────────
   Le ~80px de top correspond à l'en-tête fixe de l'app + un petit gap.
   Sur écran < 1280px, le media query global plus haut neutralise le sticky.
   V6.7.1 — Hauteur étendue (était calc(100vh - 100px), un peu juste en pratique
   quand la sidebar accueille 6 minis avec titres multilignes). On élargit à
   calc(100vh - 70px) et on ajoute un petit padding-bottom pour aérer. */
.home-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.home-sidebar::-webkit-scrollbar { width: 6px; }
.home-sidebar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 3px;
}

/* ── Compat : .home-grid (legacy) garde une définition au cas où un
   ancien chemin d'appel l'utiliserait. La nouvelle home n'en dépend plus. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Variante side de l'agenda (vertical, mêmes blocs que le footer) ──
   On reprend la même structure DOM que .home-agenda-footer (now / main /
   minis) mais en flex-column. Toutes les cellules deviennent full width.   */
.home-agenda-footer.home-agenda-footer--side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding: 14px;
  border-radius: 14px;
}
.home-agenda-footer--side.is-empty {
  flex-direction: row;
}
.home-agenda-footer--side .home-agenda-foot-now,
.home-agenda-footer--side .home-agenda-foot-main {
  width: 100%;
  box-sizing: border-box;
}
.home-agenda-footer--side .home-agenda-foot-minis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-agenda-footer--side .home-agenda-foot-mini {
  width: 100%;
  box-sizing: border-box;
  /* V6.7.1 — titres multilignes : on aligne en haut pour que le when reste
     en face de la 1re ligne du titre, pas centré verticalement. */
  align-items: start;
  /* V6.7.212 — Fix overflow : la colonne "when" était à 64px (trop étroit
     pour "Demain (journée)" ou "Demain 9h15" qui débordaient sur le titre).
     On élargit à 88px et on autorise wrap si vraiment trop long. */
  grid-template-columns: 88px 1fr auto;
}
.home-agenda-footer--side .home-agenda-foot-mini-when {
  white-space: normal;
  word-break: break-word;
  font-size: 0.74rem;
  line-height: 1.25;
}
.home-agenda-footer--side.is-skeleton {
  display: flex;
  flex-direction: column;
}

/* V6.7.1 — Titres complets en mode side : on autorise le wrap multi-lignes
   sur les 3 cellules (now / main / mini). Sans ces overrides, les titres
   sont coupés à la 1re ligne avec une ellipsis. */
.home-agenda-footer--side .home-agenda-foot-now-title,
.home-agenda-footer--side .home-agenda-foot-main-title,
.home-agenda-footer--side .home-agenda-foot-mini-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
}
/* La meta du main reste en nowrap (compact) — on coupe à l'ellipsis si elle
   déborde (généralement rare car courte : "Auj. 14h · Google Agenda · 👥 3"). */

/* ── Popover détaillé ──────────────────────────────────── */
.home-popover {
  position: fixed;
  z-index: 100;
  min-width: 320px;
  max-width: min(420px, calc(100vw - 24px));
  /* max-height fallback (avant que _positionPopover ne le clampe à l'espace dispo) */
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: homePopIn 0.15s ease-out;
}
/* V6.7.238 — Variante wide pour les popovers avec beaucoup de contenu par
   item (ex: agenda — titre + horaires + invités + lieu + source). */
.home-popover.home-popover--wide {
  min-width: 480px;
  max-width: min(560px, calc(100vw - 24px));
}
/* V6.7.242 — Variante centered : popover positionné au centre du viewport,
   indépendant du trigger. Z-index plus haut + ombre plus prononcée pour la
   sensation modale. */
.home-popover.home-popover--centered {
  z-index: 200;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.08);
}
@keyframes homePopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-pop-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-pop-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.home-pop-list {
  overflow-y: auto;
  /* flex:1 + min-height:0 → la liste prend toute la place restante du popover
     (head + foot fixes) et scrolle à l'intérieur quand elle déborde. */
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0;
}
.home-pop-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.home-pop-foot {
  padding: 10px 16px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--subtle);
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.home-pop-foot-why {
  display: block;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #8b5cf6) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #8b5cf6) 10%, transparent);
  border-radius: 6px;
  color: var(--text, inherit);
  font-size: 0.78rem;
  line-height: 1.5;
}
.home-pop-foot-why strong { color: var(--text, inherit); }
.home-pop-foot-why em { font-style: normal; font-weight: 600; }

/* V6.2 — Lien dans le footer du popover (créneaux orphelins / ignorés) */
.home-pop-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--primary, #0043ff);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.82rem;
}
.home-pop-link:hover { text-decoration: underline; }

/* V6.2 — Boutons d'action 🚫 / ↺ dans la liste des créneaux orphelins */
.home-pop-act.home-pop-ignore-slot,
.home-pop-act.home-pop-restore-slot {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text, inherit);
}
.home-pop-act.home-pop-ignore-slot:hover {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: #ef4444;
}
.home-pop-act.home-pop-restore-slot:hover {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  border-color: #22c55e;
}
.home-pop-act.home-pop-ignore-slot:disabled,
.home-pop-act.home-pop-restore-slot:disabled {
  opacity: 0.5; cursor: progress;
}
/* État « armé » (1er clic) — label explicite rouge plein, impossible à rater
   (avant : simple swap 🚫→⚠️ sur un bouton icône, trop discret → les users
   croyaient que « rien ne se passe » et ne re-cliquaient pas). */
.home-pop-act.home-pop-ignore-slot.pending-confirm {
  background: #ef4444; border-color: #ef4444; color: #fff;
  font-size: .76rem; font-weight: 700; padding: 2px 10px; white-space: nowrap;
}
.home-pop-act.home-pop-ignore-slot.pending-confirm:hover {
  background: #dc2626; border-color: #dc2626;
}

/* ── Footer "Pourquoi c'est important ?" repliable (Contenus dépassés) ── */
/* Discret par défaut : juste une ligne cliquable. Dévoile l'explication au clic. */
.home-pop-foot-why-toggle {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.home-pop-foot-why-toggle > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 2px 0;
  color: var(--muted);
  transition: color var(--transition);
}
.home-pop-foot-why-toggle > summary::-webkit-details-marker { display: none; }
.home-pop-foot-why-toggle > summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  margin-right: 2px;
  transition: transform var(--transition);
  font-size: 0.7rem;
  opacity: 0.7;
}
.home-pop-foot-why-toggle[open] > summary::before { transform: rotate(90deg); }
.home-pop-foot-why-toggle > summary:hover { color: var(--text); }
.home-pop-foot-why-content {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #8b5cf6) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #8b5cf6) 10%, transparent);
  border-radius: 6px;
  color: var(--text, inherit);
}
.home-pop-foot-why-content em { font-style: normal; font-weight: 600; }
.home-pop-foot-truncated {
  margin-top: 6px;
  opacity: 0.7;
  font-size: 0.75rem;
}

/* En-tête de jour dans le popover Agenda */
.home-pop-day-sep {
  padding: 6px 16px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: color-mix(in srgb, var(--subtle) 60%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.home-pop-day-sep:first-child { border-top: none; }
.home-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: background var(--transition);
}
/* Quand un item a plusieurs boutons d'action côte à côte, gap léger entre eux */
.home-pop-item .home-pop-act + .home-pop-act,
.home-pop-item .home-pop-act + a.home-pop-act {
  margin-left: 4px;
}
.home-pop-item:last-child { border-bottom: none; }
.home-pop-item:hover      { background: var(--hover); }
/* V6.7.418 — Item « Retour à qualifier » : 3 boutons d'action inline (Interne / Client / Pas un retour) */
.home-pop-item--retq .home-pop-retq-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.home-pop-retq-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.home-pop-retq-btn:hover { transform: scale(1.02); }
.home-pop-retq-btn--internal:hover {
  background: color-mix(in srgb, #f59e0b 16%, var(--card, #fff));
  border-color: #f59e0b;
  color: #92400e;
}
.home-pop-retq-btn--client:hover {
  background: color-mix(in srgb, #dc2626 16%, var(--card, #fff));
  border-color: #dc2626;
  color: #991b1b;
}
.home-pop-retq-btn--none:hover {
  background: color-mix(in srgb, #6b7280 16%, var(--card, #fff));
  border-color: #6b7280;
  color: #374151;
}
body.dark .home-pop-retq-btn,
[data-theme="dark"] .home-pop-retq-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; }
.home-pop-icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.home-pop-body {
  flex: 1;
  min-width: 0;
}
.home-pop-line1 {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
}
.home-pop-line1 .late {
  color: #dc2626;
  font-weight: 600;
}
.home-pop-line2 {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Popover "Échéanciers incomplets" : ratio prévi posées + pastilles d'étapes manquantes */
.home-pop-ratio {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.home-pop-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  font-size: 0.85rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px dashed color-mix(in srgb, #f59e0b 50%, var(--border));
  border-radius: 6px;
  cursor: help;
  transition: all var(--transition);
}
.home-pop-step-pill:hover {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
}
.home-pop-act {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all var(--transition);
}
.home-pop-act:hover:not(:disabled) {
  background: var(--hover);
  border-color: var(--primary);
}
.home-pop-act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.home-pop-act.archive:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  border-color: #16a34a;
}
.home-pop-act.ignore:hover:not(:disabled) {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: #f59e0b;
}
/* Card "Projets sans étapes" — actions */
.home-pop-act.configure:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
}
/* V6.7.213 → V6.7.215 — Card Inbox récente : actions par item.
   V6.7.215 : passage en rangée horizontale (au lieu du stack vertical) →
   alignement consistant quel que soit la hauteur du sujet/snippet du mail.
   Les boutons s'alignent en haut, fixes, indépendants de la longueur. */
.home-pop-acts-stack {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
  align-self: flex-start;  /* en haut, indépendamment de la hauteur du body */
  align-items: center;
}
.home-pop-acts-stack .home-pop-act {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
}
.home-pop-act.mark-read:hover:not(:disabled) {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  border-color: #16a34a;
  color: #16a34a;
}
.home-pop-act.trash:hover:not(:disabled) {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  border-color: #dc2626;
  color: #dc2626;
}
/* Confirm state — visuel d'avertissement avant la 2e cliquée */
.home-pop-act.trash.pending-confirm {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  border-color: #dc2626;
  color: #dc2626;
  font-weight: 600;
  animation: home-pop-pulse 1s ease-in-out infinite;
}
@keyframes home-pop-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
/* CdP → bouton "Ouvrir dans Gestion de projet" (même teinte que .configure) */
.home-pop-act.open-gp:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
}
/* Compat ancien lien Notion (gardé au cas où des popovers le réutilisent) */
a.home-pop-act.open {
  text-decoration: none;
  color: var(--text);
}
a.home-pop-act.open:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
}

/* V6.7.265 — Bouton 🎥 « Revue vidéo » sur la card À valider */
.home-pop-act--video {
  color: var(--primary, #0043ff);
}
.home-pop-act--video:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  border-color: var(--primary, #0043ff);
}

/* V6.7.271 — Bouton 📁 « Revue Drive » (couleur ambre pour distinguer Frame.io) */
.home-pop-act--drive {
  color: #d97706; /* amber-600 */
}
.home-pop-act--drive:hover:not(:disabled) {
  background: color-mix(in srgb, #d97706 14%, transparent);
  border-color: #d97706;
}

/* V6.7.269 — Status de scan Frame.io dans le foot du popover À valider.
   Discret pendant le scan, persiste après en mode info une fois terminé. */
.home-pop-scan-status {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-radius: 999px;
  color: var(--primary, #0043ff);
  transition: opacity 0.2s;
}

/* ── V6.7.265 → V6.7.267 — Popover « Revue vidéo » (Frame.io + commentaires)
   V6.7.267 : passe en quasi-fullscreen (95vw × 90vh) pour donner l'espace
   nécessaire au player Frame.io en reel (vertical) + ses propres commentaires
   en bas qui étaient à l'étroit. Capé à 1600 × 1000 pour les très grands écrans. */
.home-popover.home-popover--video-review {
  width: 95vw;
  max-width: 1600px;
  height: 90vh;
  max-height: 1000px;
  /* min-width inutile : 95vw clampe déjà raisonnablement, et un floor
     trop élevé pète sur mobile. */
}

/* V6.7.312 — Backdrop pour click-outside (le popover position:fixed centré
   n'attrape pas les clicks hors lui-même → backdrop séparé qui couvre tout) */
.graph-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  animation: graphDetailBackdropIn 0.15s ease-out;
}
@keyframes graphDetailBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.dark .graph-detail-backdrop,
[data-theme="dark"] .graph-detail-backdrop { background: rgba(0, 0, 0, 0.6); }

/* V6.7.310 — Popover détail Vue Graphiste (mêmes dimensions que Video Review) */
.home-popover.graph-detail-popover {
  width: 95vw;
  max-width: 1500px;
  height: 90vh;
  max-height: 1000px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* V6.7.311 — Centrage CSS direct (sans dépendance JS au _positionCenteredPopover
     interne à home.js). Animation dédiée car la base `homePopIn` set
     `transform: translateY(0)` qui écrasait `translate(-50%, -50%)`. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: graphDetailPopIn 0.15s ease-out;
}
@keyframes graphDetailPopIn {
  from { opacity: 0; transform: translate(-50%, -52%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.graph-detail-popover .home-pop-head {
  flex: 0 0 auto;
}
.graph-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.graph-detail-loading {
  padding: 32px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.graph-detail-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 900px) {
  .graph-detail-grid { grid-template-columns: 1fr; }
}
.graph-detail-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border, #e5e7eb);
  min-height: 0;
}
/* V6.7.379 — Tabs Notion / Drive en haut du panel gauche */
.graph-detail-left-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.graph-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.graph-detail-tab:hover { background: var(--subtle); color: var(--text); }
.graph-detail-tab.is-active {
  color: var(--primary, #0043ff);
  border-bottom-color: var(--primary, #0043ff);
  background: transparent;
}
.graph-detail-tab-badge {
  display: inline-block;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--primary, #0043ff) 15%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 2px;
}
.graph-detail-tab.is-active .graph-detail-tab-badge {
  background: var(--primary, #0043ff);
  color: #fff;
}
.graph-detail-left-pane {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 0;
}
.graph-detail-left-pane--drive { padding: 16px 20px; }

/* V6.7.387 — Pane Frame (preview vidéo Frame.io inline) */
.graph-detail-left-pane--frame {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}
.graph-detail-frame-switcher {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: #1f2937;
  border-bottom: 1px solid #374151;
  flex-wrap: wrap;
}
.graph-detail-frame-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: #111827;
  color: #d1d5db;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
}
.graph-detail-frame-switcher-btn:hover { background: #1f2937; color: #fff; }
.graph-detail-frame-switcher-btn.is-active {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.graph-detail-frame-embed {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  display: flex;
}
.graph-detail-frame-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.graph-detail-frame-link {
  padding: 8px 12px;
  background: #1f2937;
  border-top: 1px solid #374151;
  text-align: right;
}
.graph-detail-frame-link a {
  color: #93c5fd;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.graph-detail-frame-link a:hover { color: #fff; text-decoration: underline; }

/* ── 2026-06-12 — Commentaires Frame.io (résolution in-app, module frameComments.js) ── */
.fc-mount { margin-top: 8px; }
.fc-loading, .fc-empty, .fc-error {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); padding: 9px 12px;
  background: var(--subtle); border: 1px solid var(--border); border-radius: 9px;
}
.fc-spin {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary, #0043ff) 30%, transparent);
  border-top-color: var(--primary, #0043ff); animation: driveDlSpin .7s linear infinite;
}
.fc-retry { border: none; background: none; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.fc-connect {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text); padding: 10px 12px;
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary, #0043ff) 35%, transparent); border-radius: 9px;
}
.fc-connect-btn {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 700; text-decoration: none;
  padding: 6px 12px; border-radius: 8px; color: #fff; background: var(--primary, #0043ff);
}
.fc-connect-btn:hover { filter: brightness(1.1); }
.fc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px; border: 1px solid var(--border); border-bottom: none;
  border-radius: 9px 9px 0 0; background: var(--subtle);
}
.fc-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); }
.fc-count {
  font-size: 10.5px; font-weight: 700; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
}
.fc-refresh {
  border: none; background: none; cursor: pointer; color: var(--muted);
  display: inline-flex; padding: 3px; border-radius: 5px;
}
.fc-refresh:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.fc-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 0 0 9px 9px;
  max-height: 240px; overflow-y: auto; background: var(--card);
}
.fc-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fc-row:last-child { border-bottom: none; }
.fc-row.is-done .fc-text { text-decoration: line-through; color: var(--muted); }
.fc-row.is-done { opacity: .75; }
.fc-check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--primary, #0043ff) 50%, transparent);
  border-radius: 5px; background: var(--card); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: #fff; transition: all .12s;
}
.fc-check:hover { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.fc-check.is-done { background: var(--success, #10b981); border-color: var(--success, #10b981); }
.fc-body { min-width: 0; flex: 1; }
.fc-text { font-size: 12.5px; color: var(--text); line-height: 1.4; word-break: break-word; }
.fc-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 10.5px; color: var(--muted); flex-wrap: wrap; }
.fc-tc {
  font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 5px; padding: 0 5px; font-variant-numeric: tabular-nums;
}
.fc-owner { font-weight: 600; }
/* Dans le tab Frame des modales (fond sombre du pane) : panneau sur fond clair, déjà OK via var(--card) */
.graph-detail-frame-empty {
  padding: 24px;
  color: var(--text-muted, #888);
  font-style: italic;
  text-align: center;
}

[data-theme="dark"] .graph-detail-left-tabs { background: #1f2937; border-color: #374151; }
.graph-detail-right {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}

/* Blocks rendered */
.graph-detail-blocks {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #111827);
}
.graph-detail-blocks-empty {
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}
/* 2026-06-15 — Carte d'aide quand le brief est un bloc synchronisé non partagé */
.graph-detail-blocks-empty.gd-blocks-synced {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  background: var(--surface-2, rgba(0,67,255,0.05));
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 12px;
  color: var(--text, #1f2937);
}
.gd-blocks-synced .gd-synced-title { font-weight: 700; font-size: 1.05em; }
.gd-blocks-synced p { margin: 0; color: var(--text-muted, #6b7280); line-height: 1.5; }
.gd-blocks-synced .gd-synced-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px 16px;
  background: var(--primary, #0043ff);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .15s ease;
}
.gd-blocks-synced .gd-synced-cta:hover { filter: brightness(1.08); }
.graph-detail-blocks .gd-p { margin: 0 0 12px; }
.graph-detail-blocks .gd-h { margin: 18px 0 8px; font-weight: 700; }
.graph-detail-blocks .gd-h1 { font-size: 1.55em; }
.graph-detail-blocks .gd-h2 { font-size: 1.3em; }
.graph-detail-blocks .gd-h3 { font-size: 1.1em; }
.graph-detail-blocks .gd-divider {
  border: 0;
  border-top: 1px solid var(--border, #e5e7eb);
  margin: 16px 0;
}
.graph-detail-blocks .gd-list { padding-left: 22px; margin: 0 0 12px; }
.graph-detail-blocks .gd-list li { margin: 2px 0; }
.graph-detail-blocks .gd-quote {
  border-left: 3px solid var(--primary, #0043ff);
  padding: 6px 14px;
  margin: 12px 0;
  color: var(--text, #111827);
  background: color-mix(in srgb, var(--primary, #0043ff) 4%, transparent);
}
.graph-detail-blocks .gd-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  /* V6.7.400 — Fond plus léger + bordure subtile pour gagner en lisibilité.
     Avant : `background: var(--subtle, #f3f4f6)` (gris ~tertiary, parfois
     trop sombre selon le thème). Maintenant : très léger tint TF blue + bordure. */
  background: color-mix(in srgb, var(--primary, #0043ff) 3%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  margin: 12px 0;
}

/* V6.7.402 — Commentaires inline (sous chaque block Notion qui en a) */
.graph-detail-blocks .gd-inline-comments {
  margin: 6px 0 12px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--primary, #0043ff) 25%, transparent);
}
.graph-detail-blocks .gd-inline-comment {
  background: color-mix(in srgb, #fbbf24 6%, #fff);
  border: 1px solid color-mix(in srgb, #fbbf24 22%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.graph-detail-blocks .gd-inline-comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.graph-detail-blocks .gd-inline-comment-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.graph-detail-blocks .gd-inline-comment-author {
  font-weight: 600;
  color: var(--text, #111827);
}
.graph-detail-blocks .gd-inline-comment-time {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-left: auto;
}
.graph-detail-blocks .gd-inline-comment-body {
  color: var(--text, #111827);
  white-space: pre-wrap;
  word-wrap: break-word;
}
body.dark .graph-detail-blocks .gd-inline-comment,
[data-theme="dark"] .graph-detail-blocks .gd-inline-comment {
  background: color-mix(in srgb, #fbbf24 10%, #111827);
  border-color: color-mix(in srgb, #fbbf24 30%, transparent);
}
body.dark .graph-detail-blocks .gd-inline-comment-author,
[data-theme="dark"] .graph-detail-blocks .gd-inline-comment-author { color: #f3f4f6; }
body.dark .graph-detail-blocks .gd-inline-comment-body,
[data-theme="dark"] .graph-detail-blocks .gd-inline-comment-body { color: #f3f4f6; }
.graph-detail-blocks .gd-callout-icon { flex-shrink: 0; font-size: 18px; line-height: 1; }
.graph-detail-blocks .gd-callout-icon--img {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.graph-detail-blocks .gd-callout-icon--img img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.graph-detail-blocks .gd-callout-body { flex: 1 1 auto; min-width: 0; }
.graph-detail-blocks .gd-nested { margin-top: 6px; margin-left: 0; }
.graph-detail-blocks .gd-list .gd-nested { margin-left: 14px; }
.graph-detail-blocks .gd-p-wrap { margin: 0; }

/* V6.7.312 — Columns layout (column_list → columns side-by-side) */
.graph-detail-blocks .gd-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 14px 0;
}
.graph-detail-blocks .gd-column {
  flex: 1 1 0;
  min-width: 200px;
}
.graph-detail-blocks .gd-code {
  background: #1f2937;
  color: #f3f4f6;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  margin: 12px 0;
}
.graph-detail-blocks .gd-image {
  margin: 14px 0;
  max-width: 100%;
}
.graph-detail-blocks .gd-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.graph-detail-blocks .gd-image figcaption {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  text-align: center;
}
.graph-detail-blocks .gd-bookmark,
.graph-detail-blocks .gd-file {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--primary, #0043ff);
  text-decoration: none;
  font-size: 12.5px;
  margin: 6px 0;
  word-break: break-all;
}
.graph-detail-blocks .gd-bookmark:hover,
.graph-detail-blocks .gd-file:hover { background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff)); }

/* V6.7.315 — Card lien éditorialisée (Drive/Docs/Figma/etc.) */
.graph-detail-blocks .gd-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--card, #fff);
  text-decoration: none;
  color: inherit;
  margin: 8px 0;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  max-width: 100%;
}
.graph-detail-blocks .gd-link-card:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 4%, var(--card, #fff));
}
.graph-detail-blocks .gd-link-card:active { transform: scale(0.99); }
.graph-detail-blocks .gd-link-icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--subtle, #f3f4f6);
  border-radius: 6px;
}
.graph-detail-blocks .gd-link-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.graph-detail-blocks .gd-link-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-detail-blocks .gd-link-host {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V6.7.319 → V6.7.320 — Card sociale layout Notion-like :
   - Meta à gauche (titre + description + URL avec icône host)
   - Image carrée ~140px à droite
   Cible : LinkedIn, Instagram, TikTok, Pinterest. */
.graph-detail-blocks .gd-link-card--social {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  text-decoration: none;
  color: inherit;
  margin: 12px 0;
  transition: border-color 0.12s;
  max-width: 100%;
  min-height: 120px;
}
.graph-detail-blocks .gd-link-card--social:hover {
  border-color: var(--primary, #0043ff);
}
.graph-detail-blocks .gd-social-meta {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.graph-detail-blocks .gd-social-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.graph-detail-blocks .gd-social-desc {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.graph-detail-blocks .gd-social-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  min-width: 0;
}
.graph-detail-blocks .gd-social-foot .gd-link-icon {
  width: 18px;
  height: 18px;
  font-size: 12px;
  flex-shrink: 0;
  background: transparent;
}
.graph-detail-blocks .gd-social-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.graph-detail-blocks .gd-social-media {
  flex: 0 0 200px;
  width: 200px;
  background: var(--subtle, #f3f4f6);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.graph-detail-blocks .gd-social-media img {
  width: 100%;
  height: 100%;
  /* V6.7.324 — `contain` au lieu de `cover` pour respecter le ratio natif
     (carré / portrait / paysage). L'image n'est plus cropée. */
  object-fit: contain;
  display: block;
}
@media (max-width: 700px) {
  /* En mobile : retour au layout vertical */
  .graph-detail-blocks .gd-link-card--social { flex-direction: column-reverse; min-height: 0; }
  .graph-detail-blocks .gd-social-media { width: 100%; flex-basis: auto; max-height: 240px; }
}

body.dark .graph-detail-blocks .gd-link-card--social,
[data-theme="dark"] .graph-detail-blocks .gd-link-card--social { background: #1f2937; border-color: #374151; }
body.dark .graph-detail-blocks .gd-social-media,
[data-theme="dark"] .graph-detail-blocks .gd-social-media { background: #111827; }
body.dark .graph-detail-blocks .gd-social-title,
[data-theme="dark"] .graph-detail-blocks .gd-social-title { color: #f3f4f6; }

/* V6.7.317 — Card lien enrichie via OG fetch (réseaux sociaux) */
.graph-detail-blocks .gd-link-card--rich {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  min-height: 88px;
}
.graph-detail-blocks .gd-link-thumb {
  flex: 0 0 120px;
  background: var(--subtle, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.graph-detail-blocks .gd-link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.graph-detail-blocks .gd-link-card--rich .gd-link-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.graph-detail-blocks .gd-link-card--rich .gd-link-title {
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
}
.graph-detail-blocks .gd-link-desc {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* V6.7.316 — Liens inline dans le rich_text : wrap si URL longue */
.graph-detail-blocks .gd-rt-link {
  color: var(--primary, #0043ff);
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.graph-detail-blocks .gd-p,
.graph-detail-blocks .gd-callout-body,
.graph-detail-blocks .gd-list li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* V6.7.316 — Embed iframe (YouTube / Vimeo) avec ratio 16:9 */
.graph-detail-blocks .gd-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 14px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.graph-detail-blocks .gd-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* V6.7.315 → V6.7.326 — Galerie d'images consécutives. Le crop carré
   180×180 forçait les visuels à être tronqués (cas vu sur les briefs
   créatifs avec packs Gariguette, mosaïques épisodes, etc.). Passé en
   height:auto + ratio natif. Les hauteurs varient mais le contenu est
   respecté. align-items:start évite que les images plus courtes étirent. */
.graph-detail-blocks .gd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
  align-items: start;
}
.graph-detail-blocks .gd-gallery-item {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--subtle, #f3f4f6);
}
.graph-detail-blocks .gd-gallery-item img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
}
.graph-detail-blocks .gd-gallery-item figcaption {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* V6.7.315 — Headings éditorialisés avec touche couleur */
.graph-detail-blocks .gd-h1 {
  position: relative;
  padding-left: 12px;
  margin-top: 28px;
  margin-bottom: 12px;
}
.graph-detail-blocks .gd-h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--primary, #0043ff);
  border-radius: 2px;
}
.graph-detail-blocks .gd-h2 {
  margin-top: 22px;
  color: var(--text, #111827);
}
.graph-detail-blocks .gd-p-unknown {
  color: var(--text-muted, #6b7280);
  font-style: italic;
  font-size: 13px;
}

body.dark .graph-detail-blocks .gd-link-card,
[data-theme="dark"] .graph-detail-blocks .gd-link-card { background: #1f2937; border-color: #374151; }
body.dark .graph-detail-blocks .gd-link-icon,
[data-theme="dark"] .graph-detail-blocks .gd-link-icon { background: #111827; }
body.dark .graph-detail-blocks .gd-link-title,
[data-theme="dark"] .graph-detail-blocks .gd-link-title { color: #f3f4f6; }
body.dark .graph-detail-blocks .gd-gallery-item,
[data-theme="dark"] .graph-detail-blocks .gd-gallery-item { background: #1f2937; }
.graph-detail-blocks .gd-toggle { margin: 8px 0; }
.graph-detail-blocks .gd-toggle summary { cursor: pointer; font-weight: 600; }
.graph-detail-blocks .gd-toggle-body { padding: 6px 0 0 22px; font-style: italic; color: var(--text-muted, #6b7280); }
.graph-detail-blocks .gd-todo { display: flex; gap: 6px; margin: 4px 0; }
.graph-detail-blocks .gd-todo.is-checked span { text-decoration: line-through; color: var(--text-muted, #9ca3af); }
.graph-detail-blocks .gd-childpage {
  padding: 8px 12px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 6px;
  margin: 8px 0;
  color: var(--text-muted, #6b7280);
}
.graph-detail-blocks .gd-unsupported {
  padding: 6px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  color: #b45309;
  font-size: 11px;
  margin: 6px 0;
}

/* Drive section inline en bas du panneau gauche */
.graph-detail-drive {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.graph-detail-drive-list {
  list-style: none;
  padding: 0;
  margin: 6px 0;
}
.graph-detail-drive-list li { margin: 2px 0; font-size: 12px; }
.graph-detail-drive-hint {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  margin-top: 4px;
}

/* V6.7.327 → V6.7.328 — Zone DnD upload Drive (panneau droite, compact) */
.graph-detail-section--upload {
  flex: 0 0 auto;
}

/* V6.7.331 → V6.7.335 — Timer désormais en PILL dans le header de la popover */
.gd-head-timer-slot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.gd-head-timer-slot:empty { display: none; }
.gd-head-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  font-size: 12px;
  line-height: 1;
}
.gd-head-timer--active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0043ff) 12%, var(--card, #fff)) 0%, var(--card, #fff) 100%);
  border-color: var(--primary, #0043ff);
}
.gd-head-timer--paused {
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--card, #fff)) 0%, var(--card, #fff) 100%);
  border-color: #f59e0b;
}
/* V6.7.337 — Variant « ready to start » (bouton autonome) */
button.gd-head-timer--ready {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary, #0043ff);
  padding: 4px 12px;
  transition: background .12s, border-color .12s;
}
button.gd-head-timer--ready:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
}
.gd-head-timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: graphPulse 1.6s ease-in-out infinite;
}
.gd-head-timer--paused .gd-head-timer-dot { background: #f59e0b; animation: none; }
.gd-head-timer-elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text, #111827);
  min-width: 44px;
  text-align: center;
}
.gd-head-timer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.gd-head-timer-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  color: var(--primary, #0043ff);
}
.gd-head-timer-btn--stop:hover {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  color: #b91c1c;
}
.gd-head-timer-btn--resume:hover {
  background: color-mix(in srgb, #16a34a 18%, transparent);
  color: #15803d;
}
body.dark .gd-head-timer,
[data-theme="dark"] .gd-head-timer { background: #1f2937; border-color: #374151; }
body.dark .gd-head-timer-elapsed,
[data-theme="dark"] .gd-head-timer-elapsed { color: #f3f4f6; }

/* V6.7.331 dark rules pour la vieille section timer — gardées au cas où d'autres composants les utilisent (no-op si inutilisé). */

/* V6.7.332 → V6.7.336 — Jauge budget Création — version compacte (2 lignes max) */
.graph-detail-section--budget { flex: 0 0 auto; }
.gd-budget-compact {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gd-budget-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #6b7280);
}
.gd-budget-label {
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}
.gd-budget-values {
  flex: 1 1 auto;
  color: var(--text, #111827);
}
.gd-budget-values strong { color: var(--text, #111827); font-weight: 700; }
.gd-budget-pct {
  font-weight: 700;
  color: var(--text-muted, #6b7280);
}
.gd-budget-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 12%, transparent);
  overflow: hidden;
}
.gd-budget-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981 0%, #16a34a 100%);
  transition: width .35s ease;
}
.gd-budget--warn .gd-budget-fill { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.gd-budget--warn .gd-budget-pct { color: #b45309; }
.gd-budget--over .gd-budget-fill { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
.gd-budget--over .gd-budget-pct { color: #b91c1c; }
body.dark .gd-budget-compact,
[data-theme="dark"] .gd-budget-compact { background: #1f2937; border-color: #374151; }
body.dark .gd-budget-values,
[data-theme="dark"] .gd-budget-values { color: #f3f4f6; }
body.dark .gd-budget-values strong,
[data-theme="dark"] .gd-budget-values strong { color: #f3f4f6; }

/* V6.7.330 — Section Retours (Phase 5) */
.graph-detail-section--returns {
  flex: 0 0 auto;
}
.gd-returns-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 2px;
}
.gd-ret-row {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  font-size: 11.5px;
}
.gd-ret-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.gd-ret-type-pill {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.gd-ret--int .gd-ret-type-pill { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.gd-ret--cli .gd-ret-type-pill { background: color-mix(in srgb, #dc2626 18%, transparent); color: #b91c1c; }
.gd-ret--unk .gd-ret-type-pill { background: color-mix(in srgb, #6b7280 18%, transparent); color: #374151; }
.gd-ret--none .gd-ret-type-pill { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.gd-ret-when {
  font-size: 10.5px;
  color: var(--text-muted, #9ca3af);
}
.gd-ret-trans {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  flex-wrap: wrap;
}
.gd-ret-from, .gd-ret-to {
  padding: 1px 5px;
  background: var(--subtle, #f3f4f6);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
}
.gd-ret-arrow { color: var(--text-muted, #9ca3af); }
.gd-ret-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.gd-ret-btn {
  padding: 3px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: var(--card, #fff);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text, #111827);
  transition: all 0.12s;
}
.gd-ret-btn:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.gd-ret-btn:disabled { opacity: 0.5; cursor: wait; }

body.dark .gd-ret-row,
[data-theme="dark"] .gd-ret-row { background: #1f2937; border-color: #374151; }
body.dark .gd-ret-from, body.dark .gd-ret-to,
[data-theme="dark"] .gd-ret-from, [data-theme="dark"] .gd-ret-to { background: #111827; }
body.dark .gd-ret-btn,
[data-theme="dark"] .gd-ret-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; }
/* V6.7.380 — Skeleton loaders dans le popover graphiste (render progressif) */
.graph-detail-blocks-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.gd-skel {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--border) 50%, transparent) 0%,
    color-mix(in srgb, var(--border) 30%, transparent) 50%,
    color-mix(in srgb, var(--border) 50%, transparent) 100%);
  background-size: 200% 100%;
  animation: gdSkelShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.gd-skel--line { height: 14px; width: 100%; }
.gd-skel--short { width: 60%; }
.gd-skel--block { height: 80px; width: 100%; margin: 6px 0; }
@keyframes gdSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* V6.7.378 — Drive picker (switcher + breadcrumb + grille fichiers) */
.gd-drive-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.gd-drive-switch-btn {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  /* V6.7.413 — Vire le underline natif des <a> (V6.7.407 les a passés en
     <a> pour permettre le clic droit Copier le lien). */
  text-decoration: none;
  display: inline-block;
}
.gd-drive-switch-btn.is-active {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.gd-drive-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 12px;
}
.gd-drive-crumb {
  padding: 2px 8px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.gd-drive-crumb:hover { background: var(--subtle, #f9fafb); }
.gd-drive-crumb.is-current { background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent); color: var(--primary, #0043ff); font-weight: 600; }
.gd-drive-crumb-sep { color: var(--muted); font-size: 11px; opacity: 0.6; }

.gd-drive-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.gd-drive-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px 8px;
  font-size: 12px;
  color: var(--muted);
}
.gd-drive-empty.gd-drive-error { color: #ef4444; }
.gd-drive-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s ease, border-color 0.1s ease;
}
/* 2026-06-11 — Bouton de téléchargement par dossier (apparait au survol) */
.gd-drive-dl-folder {
  position: absolute; top: 3px; right: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, var(--card));
  color: var(--primary, #0043ff); opacity: 0; transition: opacity .12s, background .12s;
}
.gd-drive-item--folder:hover .gd-drive-dl-folder { opacity: 1; }
.gd-drive-dl-folder:hover { background: color-mix(in srgb, var(--primary, #0043ff) 24%, var(--card)); }
/* En-tête du panneau Drive : titre + bouton « Télécharger le dossier » */
.gd-drive-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gd-drive-dl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 4px 9px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  color: var(--primary, #0043ff);
}
.gd-drive-dl-btn:hover { background: color-mix(in srgb, var(--primary, #0043ff) 18%, transparent); }

/* 2026-06-11 — Overlay de progression du téléchargement de dossier Drive */
.drive-dl-progress {
  position: fixed; right: 18px; bottom: 18px; z-index: 100000;
  width: 280px; max-width: calc(100vw - 36px);
  background: var(--card, #fff); color: var(--text, #111);
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22); padding: 12px 14px;
  font-size: 12.5px;
}
.drive-dl-progress-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.drive-dl-progress-title { font-weight: 700; flex: 1; }
.drive-dl-progress-cancel {
  border: none; background: none; cursor: pointer; color: var(--muted, #6b7280);
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.drive-dl-progress-cancel:hover { background: color-mix(in srgb, var(--muted, #6b7280) 14%, transparent); color: var(--text); }
.drive-dl-progress-spin {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary, #0043ff) 30%, transparent);
  border-top-color: var(--primary, #0043ff); animation: driveDlSpin .7s linear infinite;
}
@keyframes driveDlSpin { to { transform: rotate(360deg); } }
.drive-dl-progress-count { font-weight: 600; color: var(--primary, #0043ff); }
.drive-dl-progress-file { margin-top: 2px; color: var(--muted, #6b7280); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-drive-item:hover {
  background: var(--subtle);
  border-color: var(--border);
}
.gd-drive-item--folder:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, var(--border));
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--surface));
}
.gd-drive-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--subtle);
}
.gd-drive-file-icon {
  font-size: 28px;
  line-height: 1;
}
.gd-drive-file-name {
  font-size: 10.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.graph-detail-drive-dropzone.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.graph-detail-drive-dropzone.is-disabled .gd-drop-pick { cursor: not-allowed; }

[data-theme="dark"] .gd-drive-files,
[data-theme="dark"] .gd-drive-switch-btn { background: #1f2937; border-color: #374151; }

.graph-detail-drive-dropzone {
  padding: 14px 12px;
  border: 2px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--subtle, #f9fafb);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.graph-detail-drive-dropzone:hover,
.graph-detail-drive-dropzone:focus-visible {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, var(--subtle, #f9fafb));
}
/* V6.7.408 — Preview iframe quand lien Drive pointe sur un fichier */
.gd-drive-file-preview {
  margin: 8px 0 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/10;
  width: 100%;
}
.gd-drive-file-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.graph-detail-drive-dropzone.is-dragover {
  border-color: var(--primary, #0043ff);
  border-style: solid;
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, var(--card, #fff));
  transform: scale(1.01);
}
.graph-detail-drive-dropzone .gd-drop-icon {
  font-size: 20px;
  margin-bottom: 2px;
}
.graph-detail-drive-dropzone .gd-drop-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #111827);
}
.graph-detail-drive-dropzone .gd-drop-sub {
  font-size: 10.5px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
  line-height: 1.4;
}
.graph-detail-drive-dropzone .gd-drop-pick {
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  color: var(--primary, #0043ff);
  cursor: pointer;
}
.graph-detail-drive-dropzone .gd-drop-pick:hover {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}

.graph-detail-drive-uploads {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gd-upload-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 11.5px;
}
.gd-upload-icon { flex-shrink: 0; }
.gd-upload-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text, #111827);
}
.gd-upload-size {
  color: var(--text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gd-upload-status {
  flex-shrink: 0;
  color: var(--text-muted, #6b7280);
}
.gd-upload-row--ok  { background: color-mix(in srgb, #16a34a 8%, var(--card, #fff)); border-color: color-mix(in srgb, #16a34a 30%, var(--border, #e5e7eb)); }
.gd-upload-row--ok .gd-upload-icon { color: #16a34a; }
.gd-upload-row--err { background: color-mix(in srgb, #dc2626 8%, var(--card, #fff)); border-color: color-mix(in srgb, #dc2626 30%, var(--border, #e5e7eb)); }
.gd-upload-row--err .gd-upload-icon { color: #b91c1c; }
.gd-upload-row--err .gd-upload-status { color: #b91c1c; }

body.dark .graph-detail-drive-dropzone,
[data-theme="dark"] .graph-detail-drive-dropzone { background: #111827; border-color: #374151; }
body.dark .graph-detail-drive-dropzone .gd-drop-pick,
[data-theme="dark"] .graph-detail-drive-dropzone .gd-drop-pick { background: #1f2937; border-color: #374151; }
body.dark .gd-upload-row,
[data-theme="dark"] .gd-upload-row { background: #1f2937; border-color: #374151; }

/* Right column */
.graph-detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.graph-detail-section--comments {
  flex: 1 1 auto;
  min-height: 0;
}
.graph-detail-section--add {
  margin-top: auto;
}
.graph-detail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.graph-detail-count {
  background: var(--primary, #0043ff);
  color: #fff;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 10px;
  margin-left: 6px;
}
.graph-detail-etat {
  padding: 6px 10px;
  background: var(--subtle, #f3f4f6);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
/* V6.7.343 — 2 boutons côte à côte : Pour validation / Pour montage */
.graph-detail-send-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.graph-detail-send-validation {
  flex: 1 1 50%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s, transform 0.08s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-detail-send-validation--validation {
  background: var(--primary, #0043ff);
}
.graph-detail-send-validation--validation:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #0043ff) 88%, #000);
}
.graph-detail-send-validation--montage {
  background: #d97706; /* ambre / orange — distinct du primary bleu */
}
.graph-detail-send-validation--montage:hover:not(:disabled) {
  background: color-mix(in srgb, #d97706 88%, #000);
}
.graph-detail-send-validation:active:not(:disabled) { transform: scale(0.98); }
.graph-detail-send-validation.is-disabled,
.graph-detail-send-validation:disabled {
  background: var(--subtle, #f3f4f6);
  color: var(--text-muted, #6b7280);
  cursor: not-allowed;
}

.graph-detail-comments-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.graph-detail-comment {
  background: var(--subtle, #f9fafb);
  border-radius: 6px;
  padding: 8px 10px;
}
.graph-detail-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.graph-detail-comment-author { font-size: 11.5px; font-weight: 600; color: var(--text, #111827); }
.graph-detail-comment-time { font-size: 10.5px; color: var(--text-muted, #9ca3af); }
.graph-detail-comment-body { font-size: 12.5px; color: var(--text, #111827); white-space: pre-wrap; word-break: break-word; }
.graph-detail-empty-comments {
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
}
.graph-detail-add-input {
  width: 100%;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  resize: vertical;
  font-size: 13px;
  font-family: inherit;
  color: var(--text, #111827);
  background: var(--card, #fff);
  box-sizing: border-box;
}
.graph-detail-add-input:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.graph-detail-add-input.is-dragover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
}
.graph-detail-add-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.graph-detail-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--primary, #0043ff);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.graph-detail-send-btn:hover { background: color-mix(in srgb, var(--primary, #0043ff) 88%, #000); }
/* V6.7.333 — Pièces jointes Notion sur commentaires : bouton + chips */
.gd-pj-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--card, #fff);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.gd-pj-attach-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
.gd-pj-attach-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.gd-pj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.gd-pj-chips[hidden] { display: none; }
.gd-pj-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 8px;
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--primary, #0043ff) 22%, var(--border, #e5e7eb));
  border-radius: 14px;
  font-size: 11.5px;
  max-width: 220px;
}
.gd-pj-chip .gd-pj-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text, #111827);
}
.gd-pj-chip .gd-pj-size {
  flex: 0 0 auto;
  color: var(--text-muted, #9ca3af);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.gd-pj-remove {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gd-pj-remove:hover {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  color: #b91c1c;
}
body.dark .gd-pj-attach-btn,
[data-theme="dark"] .gd-pj-attach-btn { background: #1f2937; border-color: #374151; color: #d1d5db; }
body.dark .gd-pj-chip .gd-pj-name,
[data-theme="dark"] .gd-pj-chip .gd-pj-name { color: #f3f4f6; }

/* V6.7.333 — Pièces jointes affichées dans les commentaires existants */
.gd-comment-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.gd-comment-att {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text, #111827);
  text-decoration: none;
  background: var(--card, #fff);
  max-width: 240px;
  overflow: hidden;
  transition: background .12s, border-color .12s;
}
.gd-comment-att:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
.gd-comment-att span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd-comment-att--img {
  padding: 2px;
  max-width: 220px;
}
.gd-comment-att--img img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  border-radius: 4px;
  object-fit: contain;
}
body.dark .gd-comment-att,
[data-theme="dark"] .gd-comment-att { background: #1f2937; border-color: #374151; color: #f3f4f6; }

/* Dark mode */
body.dark .graph-detail-popover,
[data-theme="dark"] .graph-detail-popover { background: #111827; color: #f3f4f6; }
body.dark .graph-detail-left,
[data-theme="dark"] .graph-detail-left { border-right-color: #374151; }
body.dark .graph-detail-blocks,
[data-theme="dark"] .graph-detail-blocks { color: #f3f4f6; }
body.dark .graph-detail-etat,
[data-theme="dark"] .graph-detail-etat { background: #1f2937; }
body.dark .graph-detail-comment,
[data-theme="dark"] .graph-detail-comment { background: #1f2937; }
body.dark .graph-detail-add-input,
[data-theme="dark"] .graph-detail-add-input { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .graph-detail-blocks .gd-callout,
[data-theme="dark"] .graph-detail-blocks .gd-callout { background: #1f2937; }
.home-pop-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-muted, #6b7280);
  transition: background 0.12s, color 0.12s;
}
.home-pop-close:hover {
  background: var(--hover, #f3f4f6);
  color: var(--text, #111827);
}

/* V6.7.279 — Cluster d'actions du header (bouton « Notion » + close) */
.home-pop-head-acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.home-pop-head-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #111827);
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.12s;
}
.home-pop-head-act:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
}
.home-pop-head-act svg { display: block; }
/* V6.7.388 — Bouton swap Drive↔Frame dans le header popover (accent visuel pour le distinguer du lien Notion) */
.home-pop-swap-btn {
  cursor: pointer;
  font-family: inherit;
  border-style: dashed !important;
  color: var(--primary, #0043ff) !important;
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent) !important;
}
.home-pop-swap-btn:hover {
  border-style: solid !important;
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent) !important;
}
/* V6.7.340 — Nom du client tronqué si trop long dans le header popover Vue Graphiste */
.home-pop-head-act .gd-client-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  opacity: .85;
}

body.dark .home-pop-head-act {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

.home-vr-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--subtle, #f9fafb);
}
.home-vr-loading {
  padding: 32px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}
.home-vr-grid {
  display: grid;
  /* V6.7.267 — Sidebar Notion plus large (420px) car le popover lui-même est
     plus grand → on rééquilibre. Le 1fr de la zone Frame.io reste prioritaire
     et prend tout le reste. */
  grid-template-columns: 1fr 420px;
  height: 100%;
  gap: 0;
}
@media (max-width: 1100px) {
  .home-vr-grid { grid-template-columns: 1fr 360px; }
}
@media (max-width: 800px) {
  .home-vr-grid { grid-template-columns: 1fr; }
}

/* V6.7.271 — Variante Drive : 3 colonnes (picker + preview + sidebar Notion) */
.home-vr-grid--drive {
  grid-template-columns: 260px 1fr 420px;
}
@media (max-width: 1300px) {
  .home-vr-grid--drive { grid-template-columns: 220px 1fr 360px; }
}
@media (max-width: 1000px) {
  .home-vr-grid--drive { grid-template-columns: 200px 1fr 320px; }
}
@media (max-width: 800px) {
  .home-vr-grid--drive { grid-template-columns: 1fr; }
}

/* V6.7.271 — Picker Drive (colonne de gauche) */
.home-vr-drive-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--subtle, #f9fafb);
  border-right: 1px solid var(--border, #e5e7eb);
  overflow: hidden;
}
.home-vr-drive-files {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* V6.7.294 — Breadcrumb hiérarchique pour drill-down sous-dossiers */
.home-vr-drive-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  font-size: 11px;
  min-height: 28px;
}
.home-vr-drive-crumb {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--primary, #0043ff);
  font-size: 11px;
  line-height: 1;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-vr-drive-crumb:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
}
.home-vr-drive-crumb.is-current {
  color: var(--text, #111827);
  font-weight: 600;
  cursor: default;
}
.home-vr-drive-crumb.is-current:hover { background: transparent; }
.home-vr-drive-crumb-sep {
  color: var(--text-muted, #9ca3af);
  font-size: 11px;
  margin: 0 1px;
}
body.dark .home-vr-drive-crumbs { background: #111827; border-bottom-color: #374151; }
body.dark .home-vr-drive-crumb.is-current { color: #f3f4f6; }
.home-vr-drive-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--text, #111827);
  width: 100%;
  transition: all 0.12s;
  /* V6.7.413 — Vire underline natif <a> (V6.7.406) */
  text-decoration: none;
}
.home-vr-drive-file:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
}
.home-vr-drive-file.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, var(--card, #fff));
  border-color: var(--primary, #0043ff);
  font-weight: 600;
}
.home-vr-drive-file.is-folder {
  font-style: italic;
  color: var(--text-muted, #6b7280);
}
.home-vr-drive-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--subtle, #f3f4f6);
}
.home-vr-drive-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--subtle, #f3f4f6);
  border-radius: 4px;
  flex-shrink: 0;
}
.home-vr-drive-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.3;
}
.home-vr-drive-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
  font-style: italic;
}
.home-vr-drive-open {
  display: block;
  padding: 8px 12px;
  text-align: center;
  background: var(--primary, #0043ff);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
.home-vr-drive-open:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 88%, #000);
}
.home-vr-left--drive {
  background: var(--subtle, #f9fafb); /* fond plus clair que le noir Frame.io */
}
.home-vr-drive-preview {
  background: var(--card, #fff);
}

body.dark .home-vr-drive-list { background: #1f2937; border-right-color: #374151; }
body.dark .home-vr-drive-file { background: #111827; border-color: #374151; color: #f3f4f6; }
body.dark .home-vr-drive-thumb,
body.dark .home-vr-drive-icon { background: #374151; }
body.dark .home-vr-left--drive { background: #111827; }
body.dark .home-vr-drive-preview { background: #1f2937; }
.home-vr-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #000;
}
.home-vr-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  overflow: hidden;
}

/* Liens Frame.io (multi-versions) */
.home-vr-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  overflow-x: auto;
  flex-shrink: 0;
}
.home-vr-links-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex-shrink: 0;
}
.home-vr-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  color: #ccc;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
  /* V6.7.413 — Vire le underline natif <a> (V6.7.407) */
  text-decoration: none;
}
.home-vr-link-btn:hover {
  background: #3a3a3a;
  color: #fff;
}
.home-vr-link-btn.is-active {
  background: var(--primary, #0043ff);
  border-color: var(--primary, #0043ff);
  color: #fff;
}

.home-vr-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #000;
}
.home-vr-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* État vide (aucun lien Frame.io détecté) */
.home-vr-noframe {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: #ccc;
}
.home-vr-noframe-icon {
  margin-bottom: 12px;
  opacity: 0.5;
}
.home-vr-noframe-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}
.home-vr-noframe-hint {
  font-size: 12px;
  color: #888;
  max-width: 320px;
  line-height: 1.5;
}

/* ─── Sidebar droite ─── */
.home-vr-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.home-vr-section--comments {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.home-vr-section--add {
  border-bottom: none;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f9fafb);
}
.home-vr-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}
.home-vr-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  background: var(--primary, #0043ff);
  color: #fff;
  border-radius: 9px;
  text-transform: none;
  letter-spacing: 0;
}
.home-vr-status-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  cursor: pointer;
}
.home-vr-status-select:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
}

.home-vr-comments-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.home-vr-comment {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border, #e5e7eb);
}
.home-vr-comment:last-child { border-bottom: none; }
.home-vr-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.home-vr-comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #111827);
}
.home-vr-comment-date {
  font-size: 10.5px;
  color: var(--text-muted, #9ca3af);
}
.home-vr-comment-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #111827);
  white-space: pre-wrap;
  word-break: break-word;
}
.home-vr-frame-link {
  color: var(--primary, #0043ff);
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
}
.home-vr-frame-link:hover { background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent); }
.home-vr-frame-link[data-unknown="1"] { color: var(--text-muted, #6b7280); }
/* 2026-06-11 — Liens externes dans les commentaires (review + popovers détail) */
.home-vr-ext-link, .gd-cmt-link {
  color: var(--primary, #0043ff); text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all; cursor: pointer;
}
.home-vr-ext-link:hover, .gd-cmt-link:hover { text-decoration: none; }

.home-vr-empty-comments {
  padding: 16px 4px;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
  font-style: italic;
}
.home-vr-toggle-all {
  margin-top: 8px;
  padding: 6px 10px;
  background: none;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--primary, #0043ff);
  cursor: pointer;
  width: 100%;
}
.home-vr-toggle-all:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border-style: solid;
}

.home-vr-add-input {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  resize: vertical;
}
.home-vr-add-input:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
}
.home-vr-add-input.is-dragover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, var(--card, #fff));
}
.home-vr-add-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.home-vr-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--primary, #0043ff);
  border: 1px solid var(--primary, #0043ff);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.home-vr-send-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #0043ff) 88%, #000);
}
.home-vr-send-btn:disabled { cursor: not-allowed; }

body.dark .home-vr-body { background: #1f2937; }
body.dark .home-vr-right { background: #111827; border-left-color: #374151; }
body.dark .home-vr-section { border-bottom-color: #374151; }
body.dark .home-vr-section--add { background: #1f2937; border-top-color: #374151; }
body.dark .home-vr-status-select,
body.dark .home-vr-add-input {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}
body.dark .home-vr-comment { border-bottom-color: #374151; }
body.dark .home-vr-comment-author { color: #f3f4f6; }
body.dark .home-vr-comment-body { color: #e5e7eb; }

/* ── V6.4 — Card/Popover « Projets non planifiés » multi-causes ────── */
/* Étiquettes colorées (sous-titre carte + ligne de badges popover) */
.home-cause-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-cause-tag + .home-cause-tag { margin-left: 4px; }

/* V6.7.322 — Badge cause résolue (optimiste après PATCH Type/Mois/...) */
.home-cause-tag.is-resolved {
  text-decoration: line-through;
  opacity: 0.55;
  background: color-mix(in srgb, #16a34a 14%, transparent) !important;
  border-color: color-mix(in srgb, #16a34a 35%, var(--border)) !important;
}
.home-cause-tag.is-resolved::after {
  content: ' ✓';
  font-weight: 700;
  color: #16a34a;
  text-decoration: none;
  display: inline-block;
  margin-left: 2px;
}

/* Item entier résolu (toutes les causes décochées) */
.home-pop-item.is-resolved {
  background: color-mix(in srgb, #16a34a 6%, transparent);
  position: relative;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.home-pop-item.is-resolved::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
}
.home-pop-item.is-resolved .home-pop-line1 strong {
  color: var(--text-muted, #6b7280);
}
.home-cause-no-task   { background: color-mix(in srgb, #2563eb 12%, transparent); border-color: color-mix(in srgb, #2563eb 35%, var(--border)); color: var(--text); }
.home-cause-no-mois   { background: color-mix(in srgb, #6b7280 12%, transparent); border-color: color-mix(in srgb, #6b7280 35%, var(--border)); color: var(--text); }
.home-cause-no-type   { background: color-mix(in srgb, #8b5cf6 12%, transparent); border-color: color-mix(in srgb, #8b5cf6 35%, var(--border)); color: var(--text); }
.home-cause-no-budget { background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--border)); color: var(--text); }
/* V6.7.183 — Nouvelles causes (click-to-validate)
 * V6.7.191 — Ajout palier 'stagnation-standard' (orange, entre warn jaune et critique rouge)
 */
.home-cause-no-step-validated   { background: color-mix(in srgb, #0043ff 12%, transparent); border-color: color-mix(in srgb, #0043ff 35%, var(--border)); color: var(--text); }
.home-cause-stagnation          { background: color-mix(in srgb, #eab308 14%, transparent); border-color: color-mix(in srgb, #eab308 45%, var(--border)); color: var(--text); }
.home-cause-stagnation-standard { background: color-mix(in srgb, #f97316 14%, transparent); border-color: color-mix(in srgb, #f97316 45%, var(--border)); color: var(--text); font-weight: 600; }
.home-cause-stagnation-critical { background: color-mix(in srgb, #ef4444 16%, transparent); border-color: color-mix(in srgb, #ef4444 50%, var(--border)); color: var(--text); font-weight: 600; }
/* V6.7.209 — Card « Nouveaux users à configurer » (rôle KPO) */
.home-cause-no-role    { background: color-mix(in srgb, #eab308 14%, transparent); border-color: color-mix(in srgb, #eab308 45%, var(--border)); color: var(--text); }
.home-cause-no-discord { background: color-mix(in srgb, #6366f1 12%, transparent); border-color: color-mix(in srgb, #6366f1 35%, var(--border)); color: var(--text); }
.home-pop-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  margin: 8px 0 4px;
  padding: 0 4px;
}
.home-pop-section-title:first-child { margin-top: 0; }

/* V6.7.183 — Indicateur stagnation dans le popover (« il y a X jours...») */
.home-pop-stagnation {
  display: inline-flex; gap: 4px;
  font-size: 11.5px; color: var(--muted);
  font-style: italic;
}
.home-pop-stagnation strong { color: var(--text); font-weight: 600; font-style: normal; }

/* Sévérité d'item dans le popover
 * V6.7.191 — Palier 'standard' ajouté (orange, entre warn jaune et critical rouge).
 */
.home-pop-item.sev-warn     { border-left: 3px solid #eab308; }
.home-pop-item.sev-standard { border-left: 3px solid #f97316; background: color-mix(in srgb, #f97316 4%, transparent); }
.home-pop-item.sev-critical { border-left: 3px solid #ef4444; background: color-mix(in srgb, #ef4444 5%, transparent); }

/* Item popover multi-causes : on autorise plusieurs lignes (badges + éditeurs) */
.home-pop-item-multi { align-items: flex-start; }
.home-pop-item-multi .home-pop-line2 { white-space: normal; overflow: visible; text-overflow: clip; }
.home-pop-causes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.home-pop-editors {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.home-pop-editor-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.home-pop-mois-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.home-pop-mois-chip {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--transition);
}
.home-pop-mois-chip:hover:not(:disabled) {
  background: var(--hover);
  border-color: var(--primary);
}
.home-pop-mois-chip.is-on {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--primary);
  color: var(--text);
  font-weight: 600;
}
.home-pop-type-select,
.home-pop-step-start-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.home-pop-step-start-select:focus,
.home-pop-type-select:focus { outline: none; border-color: var(--primary); }
/* V6.7.186 — L'éditeur de step doit prendre la largeur du body */
.home-pop-editor-step-start { display: block; width: 100%; }
.home-pop-budget-open {
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border));
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--transition);
}
.home-pop-budget-open:hover {
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  border-color: #f59e0b;
}

/* ── Popover Contents (Phase 3) ─────────────────────────── */
/* Mode compact : item plus dense, action date masquée par défaut.
   Utilisé par le popover Contenus dépassés (souvent 50+ items). */
.home-pop-item-compact { padding: 8px 14px; gap: 8px; }
.home-pop-item-compact .home-pop-line2 { margin-top: 1px; }
.home-pop-item-compact .home-pop-inline-action {
  margin-top: 6px;
  /* Quand révélé, force le retour à la ligne et un petit cadre subtil */
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--subtle);
  white-space: normal;
}

/* Bouton 📅 (reschedule) : teinte ambre au hover + état actif quand l'input est ouvert */
.home-pop-act.reschedule:hover:not(:disabled) {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: #f59e0b;
}
.home-pop-act.reschedule.is-active {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border-color: #f59e0b;
}

/* Action inline dans le body de l'item (date picker / select projet) */
.home-pop-inline-action {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.home-pop-inline-action label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-pop-inline-action input[type="date"],
.home-pop-inline-action select {
  font: inherit;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  max-width: 200px;
}
.home-pop-inline-action input[type="date"]:hover,
.home-pop-inline-action select:hover {
  border-color: var(--primary);
}
.home-pop-inline-action input[type="date"]:disabled,
.home-pop-inline-action select:disabled {
  opacity: 0.5;
  cursor: progress;
}
.home-pop-badge {
  display: inline-block;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
}

/* Flash de la ligne projet ciblée par "Configurer" depuis Home */
@keyframes ptv-row-flash {
  0%   { background-color: color-mix(in srgb, var(--primary) 28%, transparent); }
  100% { background-color: transparent; }
}
.ptv-row-flash > td {
  animation: ptv-row-flash 1.6s ease-out;
}

/* ── Skeleton cards (chargement progressif) ──
   La card garde sa hauteur, son icône et son titre → seul le compteur + sub-titre
   sont remplacés par des barres animées pour ne pas faire bouger la grille. */
.home-card.is-skeleton {
  cursor: default;
  pointer-events: none;
}
.home-card.is-skeleton .home-card-n {
  display: flex;
  align-items: center;
  min-height: 2.6rem;
}
@keyframes home-skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton-bar {
  display: inline-block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text) 8%, transparent) 0%,
    color-mix(in srgb, var(--text) 16%, transparent) 50%,
    color-mix(in srgb, var(--text) 8%, transparent) 100%
  );
  background-size: 400px 100%;
  animation: home-skeleton-shimmer 1.4s linear infinite;
}
.skeleton-bar-num {
  width: 56px;
  height: 32px;
  border-radius: 8px;
}
.skeleton-bar-sub {
  width: 70%;
  height: 10px;
}

/* Petites pastilles de sévérité dans les popovers */
.home-pop-item.sev-critical .home-pop-icon { filter: drop-shadow(0 0 4px rgba(220,38,38,.4)); }
.home-pop-item.sev-standard .home-pop-icon { filter: drop-shadow(0 0 4px rgba(249,115,22,.4)); }
.home-pop-item.sev-warn     .home-pop-icon { filter: drop-shadow(0 0 4px rgba(234,179,8,.4));  }

/* Responsive */
@media (max-width: 720px) {
  .home-wrap         { padding: 16px; }
  .home-hero         { padding: 28px 22px; }
  .home-hero-hello   { font-size: 1.5rem; }
  .home-hero-phrase  { font-size: 0.96rem; }
  .home-grid         { grid-template-columns: 1fr; gap: 12px; }
  .home-card-n       { font-size: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   📬 Messages internes — bell, popover Home, onglet
   ════════════════════════════════════════════════════════════ */

/* Bell messages (réutilise les classes .bell-alerts-wrap, .btn-bell, .bell-badge) */
#btnMsgBell.has-urgent {
  animation: bell-pulse 1.6s ease-in-out infinite;
}
.msg-bell-dropdown .bell-alert.prio-urgent {
  border-left: 3px solid var(--error, #e74c3c);
  padding-left: 11px;
}
.msg-bell-dropdown .bell-alert.prio-important {
  border-left: 3px solid #f59e0b;
  padding-left: 11px;
}
.msg-bell-dropdown .bell-alert.prio-info {
  border-left: 3px solid var(--primary);
  padding-left: 11px;
}
.msg-bell-dropdown .msg-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-bell-dropdown .msg-link {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}

/* Popover Home — message non lu = barre latérale colorée */
.home-pop-item.msg-unread {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.home-pop-item.msg-unread strong { font-weight: 700; }

/* ── Onglet Messages ────────────────────────────────────── */
.msg-tab-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
}
.msg-tab-header {
  margin-bottom: 18px;
}
.msg-tab-h1 {
  margin: 0 0 14px 0;
  font-size: 1.6rem;
  color: var(--text);
  /* V6.7.116 — Align SVG inline (icône inbox au début du titre) */
  display: flex; align-items: center; gap: 10px;
}
.msg-tab-h1 svg { display: block; }
.msg-tab-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.msg-tab-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  /* V6.7.116 — Align icon Lucide ↔ label */
  display: inline-flex; align-items: center; gap: 6px;
}
.msg-tab-tab .msg-tab-icon { display: inline-flex; align-items: center; line-height: 1; }
.msg-tab-tab .msg-tab-icon svg { display: block; }
.msg-tab-tab:hover { color: var(--text); }
.msg-tab-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.msg-tab-pill {
  display: inline-block;
  margin-left: 4px;
  min-width: 18px;
  padding: 0 6px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.msg-tab-refresh {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px;
  /* V6.7.116 — Centre le SVG dans le bouton */
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-tab-refresh svg { display: block; }
.msg-tab-refresh:hover { background: var(--surface-2); }
.msg-tab-body { padding-top: 18px; }

/* Composer */
.msg-composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.msg-row { display: flex; flex-direction: column; gap: 6px; }
.msg-row-inline { flex-direction: row; gap: 14px; align-items: flex-start; }
.msg-row-inline .msg-grow { flex: 1; }
.msg-row-inline > div { display: flex; flex-direction: column; gap: 6px; }
.msg-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.msg-row input[type="text"],
.msg-row input[type="url"],
.msg-row textarea,
.msg-row select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.msg-row textarea { resize: vertical; min-height: 100px; }
.msg-row select[multiple] { min-height: 120px; }
.msg-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Person Picker (multi-select recherchable) ─────────── */
.mp-picker {
  position: relative;
  width: 100%;
  z-index: 1;
}
.mp-picker.is-open {
  /* Élève la totalité du picker (input + dropdown) au-dessus des
     éléments suivants du composer (Destinataires groupes, Sujet, etc.) */
  z-index: 100;
}
.mp-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.mp-picker.is-open .mp-input-wrap {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.mp-chip-name { white-space: nowrap; }
.mp-chip-x {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
.mp-chip-x:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text);
}
.mp-input {
  flex: 1;
  min-width: 140px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 4px 2px;
  font-family: inherit;
}
.mp-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.mp-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.mp-item:last-child { border-bottom: none; }
.mp-item:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}
.mp-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.msg-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msg-group-chip {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.msg-group-chip:hover { filter: brightness(1.1); }
.msg-group-chip.on { font-weight: 600; }
.msg-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
/* V6.7.116 — Align icon Send dans le bouton Envoyer */
.msg-actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.msg-actions .btn-primary svg { display: block; }
.msg-error {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--error, #e74c3c) 10%, transparent);
  color: var(--error, #e74c3c);
  border-radius: 6px;
  font-size: 12px;
}

/* Listes (Sent / Inbox / Archived) */
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-card.is-unread {
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}
.msg-card.prio-urgent { border-left: 3px solid var(--error, #e74c3c); }
.msg-card.prio-important { border-left: 3px solid #f59e0b; }
.msg-card.is-archived { opacity: 0.75; }

.msg-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-card-prio { font-size: 16px; }
.msg-card-sujet {
  font-size: 14px;
  color: var(--text);
}
.msg-card-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.msg-card-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.msg-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.msg-tag.persons { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); color: var(--primary); }
.msg-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.msg-card-corps {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  margin-top: 2px;
}
.msg-card-link {
  display: inline-block;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  margin-top: 2px;
}
.msg-card-link:hover { text-decoration: underline; }
.msg-card-stats {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  margin-top: 4px;
}
.msg-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.msg-card-act {
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.msg-card-act:hover {
  background: var(--surface-2);
  color: var(--text);
}
.msg-card-act:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
  .msg-tab-wrap { padding: 16px; }
  .msg-row-inline { flex-direction: column; gap: 14px; }
  .msg-tab-tabs { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
 *  SUIVI DES ÉQUIPES — sous-onglets primaires + panes
 * ════════════════════════════════════════════════════════════ */

.se-primary-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
  flex-wrap: wrap;
}
.se-primary-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.se-primary-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.se-primary-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent);
}

.se-pane.hidden { display: none; }
.se-pane { padding-top: 6px; }

/* ── Pane Alertes ──────────────────────────────────────── */
.se-alerts-wrap {
  margin: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, var(--surface));
  overflow: hidden;
}
.se-alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.se-alerts-title {
  font-weight: 600;
  font-size: 15px;
}
.se-alerts-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.se-alerts-content {
  padding: 16px;
  min-height: 220px;
}

/* ════════════════════════════════════════════════════════════
   ── Pane Plan de lissage (charge / dispo par collab) ───────
   ════════════════════════════════════════════════════════════ */
.se-lis-wrap {
  margin: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, var(--surface));
  overflow: hidden;
}
.se-lis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.se-lis-title {
  font-weight: 600;
  font-size: 15px;
  /* V6.7.115 — Align SVG inline (Icons.get) */
  display: inline-flex; align-items: center; gap: 7px;
}
.se-lis-title svg { display: block; }
.se-lis-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.se-lis-week-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
}
.se-lis-week-label {
  font-weight: 600;
  font-size: 12.5px;
  min-width: 130px;
  text-align: center;
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
}
.se-lis-role-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--primary) 3%, transparent);
  border-bottom: 1px solid var(--border);
}
.se-lis-role-toggle {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}
.se-lis-role-toggle:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  transform: translateY(-1px);
}
.se-lis-role-toggle.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  color: var(--primary);
}
.se-lis-content {
  padding: 16px;
  min-height: 280px;
}

/* ── KPIs récap ── */
.se-lis-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.se-lis-kpi {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.se-lis-kpi--red    { background: color-mix(in srgb, #ef4444 12%, var(--surface)); border-color: color-mix(in srgb, #ef4444 35%, var(--border)); color: #b91c1c; }
.se-lis-kpi--orange { background: color-mix(in srgb, #f97316 12%, var(--surface)); border-color: color-mix(in srgb, #f97316 35%, var(--border)); color: #c2410c; }
.se-lis-kpi--yellow { background: color-mix(in srgb, #eab308 12%, var(--surface)); border-color: color-mix(in srgb, #eab308 35%, var(--border)); color: #a16207; }
.se-lis-kpi--green  { background: color-mix(in srgb, #22c55e 12%, var(--surface)); border-color: color-mix(in srgb, #22c55e 35%, var(--border)); color: #15803d; }
.se-lis-kpi--blue   { background: color-mix(in srgb, #3b82f6 12%, var(--surface)); border-color: color-mix(in srgb, #3b82f6 35%, var(--border)); color: #1d4ed8; }
.se-lis-kpi--gray   { background: color-mix(in srgb, var(--muted) 10%, var(--surface)); border-color: var(--border); color: var(--muted); }

/* ── Liste des collabs ── */
.se-lis-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.se-lis-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.se-lis-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--team-color, var(--border));
  transition: width var(--transition);
}
.se-lis-row:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 5%, transparent);
}
.se-lis-row:hover::before { width: 5px; }

.se-lis-row-head {
  display: grid;
  grid-template-columns: auto minmax(160px, 240px) 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  cursor: pointer;
  user-select: none;
}
.se-lis-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: hsl(var(--role-hue, 218), 70%, 95%);
  border: 1.5px solid hsl(var(--role-hue, 218), 60%, 75%);
  flex-shrink: 0;
}
.se-lis-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.se-lis-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-lis-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.se-lis-role-chip,
.se-lis-team-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  color: var(--muted);
}
.se-lis-team-chip {
  background: color-mix(in srgb, var(--team-color, var(--primary)) 14%, transparent);
  border-color: color-mix(in srgb, var(--team-color, var(--primary)) 38%, var(--border));
  color: color-mix(in srgb, var(--team-color, var(--primary)) 75%, var(--text));
}

/* ── Barre semaine principale ── */
.se-lis-week-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.se-lis-week-bar {
  position: relative;
  height: 16px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.se-lis-week-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color, #22c55e) 92%, white), var(--bar-color, #22c55e));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Couche "hors-staffing" (grisé hachuré) — empilée à droite du fill staffing */
.se-lis-week-bar-fill-non {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 38%, var(--surface)) 0 5px,
    color-mix(in srgb, var(--muted) 22%, var(--surface)) 5px 10px);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  opacity: 0.85;
}
.se-lis-week-bar-overflow {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 18px;
  background: repeating-linear-gradient(45deg, #ef4444 0 6px, #fca5a5 6px 12px);
  border-left: 1px solid #b91c1c;
  animation: lisOverflow 1.5s linear infinite;
}
.se-lis-week-bar-target {
  position: absolute;
  top: -2px; bottom: -2px;
  left: 75%;
  width: 2px;
  background: color-mix(in srgb, var(--text) 65%, transparent);
  pointer-events: none;
  z-index: 2;
  border-radius: 1px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 80%, transparent);
}
.se-lis-week-bar-target::after {
  content: '🎯';
  position: absolute;
  top: -14px;
  left: -7px;
  font-size: 10px;
  line-height: 1;
}
@keyframes lisOverflow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.se-lis-week-numbers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
}
.se-lis-week-h {
  color: var(--muted);
}
.se-lis-week-pct {
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bar-color, var(--muted)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bar-color, var(--muted)) 40%, transparent);
  color: var(--bar-color, var(--text));
}
.se-lis-week-pct-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.se-lis-week-pct-total {
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 22%, var(--surface)) 0 4px,
    color-mix(in srgb, var(--muted) 12%, var(--surface)) 4px 8px);
  border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--border));
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  font-style: italic;
}
.se-lis-week-pct-total::before {
  content: 'Σ ';
  font-style: normal;
  opacity: 0.7;
  font-weight: 700;
  margin-right: 1px;
}
.se-lis-week-non {
  font-weight: 500;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
  font-style: italic;
  margin-left: 4px;
}
.se-lis-toggle {
  font-size: 14px;
  color: var(--muted);
  width: 18px;
  text-align: center;
}

/* ── Niveaux d'alerte (couleurs des barres) — cible 75% ── */
.se-lis-lvl--blue   { --bar-color: #3b82f6; } /* sous-charge < 50% */
.se-lis-lvl--teal   { --bar-color: #0ea5e9; } /* léger 50-65% */
.se-lis-lvl--green  { --bar-color: #22c55e; } /* idéal 65-85% (autour de 75%) */
.se-lis-lvl--yellow { --bar-color: #eab308; } /* tendu 85-100% */
.se-lis-lvl--orange { --bar-color: #f97316; } /* saturé 100-115% */
.se-lis-lvl--red    { --bar-color: #ef4444; } /* surchargé > 115% */
.se-lis-lvl--gray   { --bar-color: #94a3b8; }

/* ── Hint cible 75% (sous les KPIs) ── */
.se-lis-target-hint {
  margin: 6px 20px 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 8px;
}
.se-lis-target-hint strong { color: var(--text); }

/* ── KPI teal (léger) ── */
.se-lis-kpi--teal   { background: color-mix(in srgb, #0ea5e9 12%, var(--surface)); border-color: color-mix(in srgb, #0ea5e9 35%, var(--border)); color: #0ea5e9; }

/* ── Bloc expand (days + projets) ── */
.se-lis-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.se-lis-row.is-expanded .se-lis-expand {
  max-height: 2400px;
}
.se-lis-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 18px 4px;
}
.se-lis-empty {
  padding: 6px 18px 14px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* ── Barres journalières ── */
.se-lis-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 4px 14px 8px 18px;
}
.se-lis-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bar-color, var(--muted)) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bar-color, var(--muted)) 20%, var(--border));
  border-radius: 6px;
  font-size: 10.5px;
}
.se-lis-day-name {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.se-lis-day-bar {
  position: relative;
  height: 6px;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  border-radius: 3px;
  overflow: hidden;
}
.se-lis-day-bar-fill {
  height: 100%;
  background: var(--bar-color, #22c55e);
  transition: width 0.4s ease;
}
/* Couche "hors-staffing" (grisé hachuré) — empilée à droite du fill staffing */
.se-lis-day-bar-fill-non {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 42%, var(--surface)) 0 3px,
    color-mix(in srgb, var(--muted) 22%, var(--surface)) 3px 6px);
  transition: left 0.4s ease, width 0.4s ease;
  z-index: 1;
  opacity: 0.85;
}
.se-lis-day-bar-target {
  position: absolute;
  top: 0; bottom: 0;
  left: 75%;
  width: 1px;
  background: color-mix(in srgb, var(--text) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}
.se-lis-day-h {
  font-weight: 600;
  color: color-mix(in srgb, var(--bar-color, var(--text)) 70%, var(--text));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.se-lis-day-h-non {
  font-weight: 500;
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
  font-style: italic;
  font-size: 9.5px;
}
.se-lis-day--off {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 8%, var(--surface)) 0 4px,
    color-mix(in srgb, var(--muted) 14%, var(--surface)) 4px 8px);
  border-style: dashed;
}
.se-lis-day-off-badge {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
}
/* Cellule jour cliquable — affordance visuelle */
.se-lis-day-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.se-lis-day-clickable:hover {
  border-color: color-mix(in srgb, var(--bar-color, var(--accent)) 55%, var(--border));
  background: color-mix(in srgb, var(--bar-color, var(--accent)) 12%, var(--surface));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--bar-color, var(--accent)) 25%, transparent);
  transform: translateY(-1px);
}
.se-lis-day-clickable:active {
  transform: translateY(0);
}
.se-lis-day-clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 1px;
}

/* ── Liste projets touchés (dans expand) ── */
.se-lis-projects {
  padding: 2px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.se-lis-projects--non {
  background: color-mix(in srgb, var(--muted) 4%, transparent);
}
.se-lis-projects-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 4px;
}
.se-lis-project {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.se-lis-project.is-non-staffing {
  border-style: dashed;
  opacity: 0.85;
}
.se-lis-project.is-clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.se-lis-project.is-clickable:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-1px);
}
.se-lis-proj-count {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ── Popover : liste des tâches d'un projet ── */
.se-lis-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
  animation: lisPopIn 0.15s ease-out;
}
@keyframes lisPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.se-lis-pop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  gap: 8px;
}
.se-lis-pop-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.se-lis-pop-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.se-lis-pop-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}
.se-lis-pop-close:hover {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--text);
}
.se-lis-pop-tasks {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  overflow-y: auto;
  flex: 1;
}
.se-lis-pop-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.se-lis-pop-task:last-child { border-bottom: none; }
.se-lis-pop-task:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.se-lis-pop-task-cat {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}
.se-lis-pop-task-main {
  flex: 1;
  min-width: 0;
}
.se-lis-pop-task-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-lis-pop-task-meta {
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.se-lis-pop-task-typo {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.se-lis-pop-task-time {
  margin-left: auto;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 75%, var(--muted));
  font-variant-numeric: tabular-nums;
}
.se-lis-pop-task-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.se-lis-pop-task-link:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.se-lis-pop-attach-btn {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: color-mix(in srgb, var(--primary) 85%, var(--text));
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}
.se-lis-pop-attach-btn:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}
.se-lis-pop-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
  list-style: none;
}

/* ── Overlay "Rattacher à un projet" ── */
.se-lis-attach-overlay {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
}
.se-lis-attach-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-lis-attach-search {
  margin: 6px 8px 4px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.se-lis-attach-search:focus {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}
.se-lis-attach-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.se-lis-attach-loading,
.se-lis-attach-empty {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 12px;
  text-align: center;
}
.se-lis-attach-group {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px 2px;
}
.se-lis-attach-item {
  font-size: 12px;
  padding: 5px 14px;
  cursor: pointer;
  color: var(--text);
  border-left: 3px solid transparent;
}
.se-lis-attach-item.is-mission {
  font-weight: 600;
}
.se-lis-attach-item.is-project {
  padding-left: 26px;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}
.se-lis-attach-item:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-left-color: var(--primary);
}
.se-lis-attach-item.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.se-lis-attach-item.is-error {
  color: var(--error);
}
.se-lis-attach-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}
.se-lis-attach-cancel {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.se-lis-attach-cancel:hover {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--text);
}
.se-lis-project-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.se-lis-project-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.se-lis-project-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.se-lis-proj-state,
.se-lis-proj-type {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
}
.se-lis-proj-type {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: color-mix(in srgb, var(--primary) 80%, var(--text));
}
.se-lis-project-bar {
  height: 4px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border-radius: 2px;
  overflow: hidden;
}
.se-lis-project-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 65%, white), var(--primary));
  transition: width 0.4s ease;
}
.se-lis-project.is-non-staffing .se-lis-project-bar-fill {
  background: color-mix(in srgb, var(--muted) 50%, var(--surface));
}
.se-lis-project-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.se-lis-cat-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cat-color, var(--muted)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--muted)) 35%, var(--border));
  color: color-mix(in srgb, var(--cat-color, var(--muted)) 70%, var(--text));
}

/* ── Skeleton ── */
.se-lis-row--skeleton .se-lis-skeleton-bar {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--muted) 12%, transparent) 0%,
    color-mix(in srgb, var(--muted) 22%, transparent) 50%,
    color-mix(in srgb, var(--muted) 12%, transparent) 100%);
  background-size: 200% 100%;
  animation: lisSkeleton 1.4s ease-in-out infinite;
}
@keyframes lisSkeleton {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}
.se-lis-loading-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 8px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .se-lis-row-head {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .se-lis-week-summary {
    grid-column: 1 / -1;
  }
  .se-lis-days {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 600px) {
  .se-lis-wrap { margin: 10px 12px; }
  .se-lis-days { grid-template-columns: repeat(2, 1fr); }
}

/* ── Pane Mercato ──────────────────────────────────────── */
.se-mercato-wrap {
  margin: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, var(--surface));
  overflow: hidden;
}
.se-mercato-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.se-mercato-title {
  font-weight: 600;
  font-size: 15px;
  /* V6.7.115 — Align SVG inline (Icons.get) */
  display: inline-flex; align-items: center; gap: 7px;
}
.se-mercato-title svg { display: block; }
.se-mercato-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.se-view-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.se-view-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.se-view-btn:hover { color: var(--primary); }
.se-view-btn.active {
  background: var(--primary);
  color: #fff;
}

.se-mercato-filters {
  display: flex;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--subtle);
}
.se-mercato-content {
  padding: 16px;
  min-height: 320px;
}

.se-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.se-filter input,
.se-filter select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: inherit;
}

/* ── Barre Simulation (mode brouillon) ─────────────────── */
.se-sim-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 28%, transparent);
  flex-wrap: wrap;
}
.se-sim-bar.hidden { display: none; }
.se-sim-bar-label {
  font-weight: 600;
  color: var(--warn, #f59e0b);
}
.se-sim-bar-count {
  font-size: 13px;
  opacity: .8;
}
.se-sim-draft-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  min-width: 180px;
}

@media (max-width: 720px) {
  .se-primary-tabs { padding: 10px 12px 0; }
  .se-alerts-wrap, .se-mercato-wrap { margin: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════
 *  V6.7.439 — Mercato cockpit refonte (vague 1 : A + B + C)
 *  Header riche + stats + Outils dropdown + filterbar moderne
 * ════════════════════════════════════════════════════════════ */

/* Cockpit (remplace .se-mercato-header) */
.se-mercato-cockpit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.se-cockpit-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}
.se-cockpit-stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.se-stat { display: inline-flex; align-items: center; gap: 4px; }
.se-stat strong { color: var(--text, inherit); font-variant-numeric: tabular-nums; }
.se-stat-primary strong { color: var(--primary); }
.se-stat-sep { opacity: .55; }
.se-stat-warn {
  color: var(--warn, #f59e0b);
  background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
}
.se-stat-warn strong { color: inherit; }
.se-stat-warn svg { color: var(--warn, #f59e0b); }
.se-stat-draft {
  color: color-mix(in srgb, var(--primary) 80%, #000);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
}
.se-stat-draft strong { color: inherit; }

/* Boutons cockpit avec icône */
.se-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.se-btn-icon svg { display: block; }

/* Outils dropdown */
.se-tools-wrap { position: relative; }
.se-tools-menu {
  position: absolute;
  z-index: 1000;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.se-tools-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.se-tools-item:hover { background: var(--subtle); }
.se-tools-item.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.se-tools-item.is-active .se-tools-state {
  background: var(--primary);
  color: #fff;
}
.se-tools-icon { display: inline-flex; align-items: center; color: var(--muted); }
.se-tools-item.is-active .se-tools-icon { color: var(--primary); }
.se-tools-label { font-weight: 500; }
.se-tools-state {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--border);
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* Sim bar V2 — 2 lignes propres */
.se-sim-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.se-sim-bar-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.se-sim-bar-icon { color: var(--warn, #f59e0b); display: inline-flex; }
.se-sim-bar-icon svg { display: block; }
.se-sim-bar-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Filterbar (remplace .se-mercato-filters) */
.se-mercato-filterbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
}
.se-filterbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Search avec icône inline */
.se-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
}
.se-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: inline-flex;
  pointer-events: none;
}
.se-search-icon svg { display: block; }
#seMercatoSearch {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  font-size: 13px;
}
#seMercatoSearch:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Scope toggle (segmented control) */
.se-scope-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.se-scope-btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
  font-weight: 500;
}
.se-scope-btn:hover { color: var(--text, inherit); background: var(--subtle); }
.se-scope-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.se-scope-btn.active .se-scope-count {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.se-scope-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
}

/* Filter group (Team / CdP) */
.se-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.se-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}

/* Chips (Team filter) */
.se-chips {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
}
.se-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-weight: 500;
  --chip-color: var(--muted);
}
.se-chip:hover {
  border-color: color-mix(in srgb, var(--chip-color, var(--primary)) 50%, var(--border));
  color: var(--text, inherit);
}
.se-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--primary));
  display: inline-block;
  flex-shrink: 0;
}
.se-chip.is-on {
  background: color-mix(in srgb, var(--chip-color, var(--primary)) 16%, transparent);
  border-color: color-mix(in srgb, var(--chip-color, var(--primary)) 55%, transparent);
  color: var(--text, inherit);
  font-weight: 600;
}

/* Combobox (CdP filter) */
.se-combo {
  position: relative;
  min-width: 180px;
}
.se-combo-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: inherit;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  min-width: 160px;
}
.se-combo-trigger:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.se-combo-trigger[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.se-combo-trigger.has-value { font-weight: 600; }
.se-combo-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.se-combo-caret { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.se-combo-caret svg { display: block; }
.se-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 800;
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 6px;
}
/* V6.7.479 — Override `display: flex` quand l'attribut `hidden` est présent.
   Sans cette règle, l'attribut HTML `hidden` est ignoré par le navigateur
   (la propriété CSS `display` explicite gagne) → le panel restait toujours
   visible peu importe le toggle JS. */
.se-combo-panel[hidden] { display: none; }
.se-combo-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--subtle);
  border-radius: 6px;
  margin-bottom: 4px;
}
.se-combo-search svg { color: var(--muted); display: block; flex-shrink: 0; }
.se-combo-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 12.5px;
  flex: 1;
  color: inherit;
  min-width: 0;
}
.se-combo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.se-combo-option {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-combo-option:hover { background: var(--subtle); }
.se-combo-option.is-selected {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
}

/* Table : ligne inactive */
.se-mercato-table tbody tr.is-inactive {
  opacity: 0.55;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 8px,
    color-mix(in srgb, var(--muted) 5%, transparent) 8px,
    color-mix(in srgb, var(--muted) 5%, transparent) 10px
  );
}
.se-mercato-table tbody tr.is-inactive:hover { opacity: 0.75; }

/* Kanban : colonne en surcharge */
.se-kanban-col.is-overload {
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 55%, var(--border));
  background: color-mix(in srgb, var(--warn, #f59e0b) 6%, var(--subtle));
}
.se-kanban-col-count.is-overload {
  background: color-mix(in srgb, var(--warn, #f59e0b) 22%, transparent);
  color: var(--warn, #f59e0b);
}

/* V6.7.475 — Kanban header enrichi (avatar initiales + bar de charge) */
.se-kanban-col-avatar {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  color: var(--primary, #0043ff);
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}
[data-theme="dark"] .se-kanban-col-avatar,
body.dark .se-kanban-col-avatar {
  background: color-mix(in srgb, var(--primary, #0043ff) 24%, transparent);
}
.se-kanban-col-count--tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Bar de charge horizontale sous le head — seuils :
   low <3 (vert) / mid 3-5 (jaune) / high 5-7 (orange) / overload >7 (rouge) */
.se-load-bar {
  position: relative;
  height: 3px;
  background: color-mix(in srgb, var(--text, #111827) 8%, transparent);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0 6px;
}
.se-load-bar-fill {
  height: 100%;
  transition: width 0.2s ease, background 0.2s ease;
  border-radius: 2px;
}
.se-load-bar--low  .se-load-bar-fill { background: #10b981; }
.se-load-bar--mid  .se-load-bar-fill { background: #eab308; }
.se-load-bar--high .se-load-bar-fill { background: #f59e0b; }
.se-load-bar--overload .se-load-bar-fill { background: #ef4444; }
[data-theme="dark"] .se-load-bar,
body.dark .se-load-bar {
  background: color-mix(in srgb, var(--text, #f3f4f6) 12%, transparent);
}

/* Dark mode tweaks */
[data-theme="dark"] .se-tools-menu,
body.dark .se-tools-menu,
[data-theme="dark"] .se-combo-panel,
body.dark .se-combo-panel {
  background: #1f2937;
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .se-scope-btn:not(.active):hover,
body.dark .se-scope-btn:not(.active):hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .se-chip,
body.dark .se-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }

/* Responsive */
@media (max-width: 780px) {
  .se-mercato-cockpit { flex-direction: column; align-items: stretch; }
  /* En mode colonne, flex-basis devient HEIGHT — il faut le reset pour pas étirer */
  .se-mercato-cockpit > .se-cockpit-main,
  .se-mercato-cockpit > .se-mercato-controls { flex: 0 0 auto; }
  .se-mercato-controls { justify-content: space-between; }
  .se-filterbar-row { gap: 8px; }
  .se-scope-toggle { width: 100%; justify-content: space-between; }
  .se-scope-btn { flex: 1; justify-content: center; }
  /* V6.7.475 — Sim bar : wrap propre des 4 actions sur mobile */
  .se-sim-bar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .se-sim-bar-actions .btn-primary,
  .se-sim-bar-actions .btn-secondary { flex: 1 1 auto; min-width: 80px; }
  .se-combo { width: 100%; }
  /* V6.7.475 — Kanban scroll horizontal explicite + colonnes min-width pour
     que les cards restent lisibles */
  .se-mercato-kanban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .se-kanban-col { min-width: 260px; scroll-snap-align: start; }
}

/* V6.7.475 — Table : header sticky pour scroll long de la liste clients */
.se-mercato-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface, #fff);
}
.se-mercato-table thead th {
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 var(--border);
}
[data-theme="dark"] .se-mercato-table thead,
body.dark .se-mercato-table thead,
[data-theme="dark"] .se-mercato-table thead th,
body.dark .se-mercato-table thead th {
  background: var(--surface, #1f2937);
}

/* V6.7.475 — Dark mode complet — overrides manquants */
/* Rangée inactive : le repeating-linear-gradient devient quasi-invisible en dark
   parce que muted est sombre sur sombre. On bascule sur du blanc semi-transparent. */
[data-theme="dark"] .se-mercato-table tbody tr.is-inactive,
body.dark .se-mercato-table tbody tr.is-inactive {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 8px,
    rgba(255, 255, 255, 0.04) 8px,
    rgba(255, 255, 255, 0.04) 10px
  );
}
/* Colonne kanban en surcharge : couleur warn dark un peu plus saturée */
[data-theme="dark"] .se-kanban-col.is-overload,
body.dark .se-kanban-col.is-overload {
  background: color-mix(in srgb, var(--warn, #f59e0b) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, var(--border));
}

/* V6.7.475 — A11y : focus visible sur tous les boutons / chips / scope-btn /
   kbd nav active (alternative à :hover pour clavier) */
.se-scope-btn:focus-visible,
.se-chip:focus-visible,
.se-tools-trigger:focus-visible,
.se-combo-trigger:focus-visible,
.se-tools-item:focus-visible {
  outline: 2px solid var(--primary, #0043ff);
  outline-offset: 2px;
}
/* Active visuel quand navigué au clavier dans une liste de popover */
.se-people-option.is-kb-active,
.se-tools-item.is-kb-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
}
[data-theme="dark"] .se-people-option.is-kb-active,
body.dark .se-people-option.is-kb-active,
[data-theme="dark"] .se-tools-item.is-kb-active,
body.dark .se-tools-item.is-kb-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 25%, transparent);
}

/* ════════════════════════════════════════════════════════════
 *  SeAlerts — V6.7.365 sections empilées par rôle
 * ════════════════════════════════════════════════════════════ */
.se-alerts-section {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.se-alerts-section:last-child {
  margin-bottom: 8px;
}
.se-alerts-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px 10px;
  background: linear-gradient(180deg, var(--subtle) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}
.se-alerts-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.se-alerts-section-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.se-alerts-section .se-alerts-table {
  border-radius: 0;
}

/* ── Table (1 ligne par membre × N mini-cards) ── */
.se-alerts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--surface);
}
.se-alerts-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 6%, var(--subtle)) 0%,
    var(--subtle) 100%
  );
  text-align: center;          /* ← titres de colonnes centrés */
  padding: 12px 10px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
/* Colonne CdP : header reste à gauche, plus large, fond plus marqué */
.se-alerts-table thead th.se-alerts-cdp-col,
.se-alerts-table thead th:first-child {
  text-align: left;
  padding-left: 16px;
  border-right: 1px solid var(--border);
}
.se-alerts-cdp-col { min-width: 180px; }

.se-alerts-row { transition: background .12s ease; }
.se-alerts-row:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}
.se-alerts-row > td {
  padding: 10px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  vertical-align: middle;
}
.se-alerts-row:last-child > td { border-bottom: none; }

.se-alerts-cdp-cell {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color, var(--subtle)) 10%, var(--subtle)) 0%,
    var(--subtle) 100%
  );
  border-right: 1px solid var(--border);
  /* Filet coloré à gauche pour matérialiser l'équipe (cohérent avec Mercato) */
  box-shadow: inset 4px 0 0 0 var(--team-color, transparent);
  padding-left: 16px !important;
}
.se-alerts-cdp-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.se-alerts-cdp-team {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--team-color, var(--muted)) 16%, transparent);
  color: color-mix(in srgb, var(--team-color, var(--muted)) 75%, var(--text, #111));
  border: 1px solid color-mix(in srgb, var(--team-color, var(--muted)) 35%, transparent);
}
[data-theme="dark"] .se-alerts-cdp-team {
  color: color-mix(in srgb, var(--team-color, var(--muted)) 90%, #fff);
  background: color-mix(in srgb, var(--team-color, var(--muted)) 22%, transparent);
}

.se-alerts-cell {
  text-align: center;
  vertical-align: middle;
  width: 14%;
}
.se-mini-card {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  transition: transform .12s ease, box-shadow .15s ease, border-color .12s, background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.se-mini-card:hover:not(:disabled):not(.empty) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
}
.se-mini-card:active:not(:disabled):not(.empty) {
  transform: translateY(0) scale(1);
}
.se-mini-card:disabled,
.se-mini-card.empty {
  opacity: .28;
  cursor: default;
  font-weight: 500;
  border-style: dashed;
  background: transparent;
}
.se-mini-card.tone-crit {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--error, #dc2626) 18%, var(--surface)) 0%,
    color-mix(in srgb, var(--error, #dc2626) 10%, var(--surface)) 100%
  );
  border-color: color-mix(in srgb, var(--error, #dc2626) 40%, var(--border));
  color: var(--error, #dc2626);
}
.se-mini-card.tone-warn {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--warn, #f59e0b) 18%, var(--surface)) 0%,
    color-mix(in srgb, var(--warn, #f59e0b) 10%, var(--surface)) 100%
  );
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 40%, var(--border));
  color: color-mix(in srgb, var(--warn, #f59e0b) 85%, var(--text));
}
.se-mini-card.tone-info {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 14%, var(--surface)) 0%,
    color-mix(in srgb, var(--primary) 7%, var(--surface)) 100%
  );
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: var(--primary);
}
.se-mini-card.is-expanded {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.se-mini-n { line-height: 1; }

.se-alerts-detail-row > td {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.se-alerts-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.se-alerts-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.se-alerts-detail-head {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--muted);
}
.se-alerts-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.se-alerts-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.se-alerts-detail-item:hover { background: var(--subtle); }
.se-alerts-late {
  font-weight: 700;
  font-size: 11px;
  background: color-mix(in srgb, var(--error, #dc2626) 18%, transparent);
  color: var(--error, #dc2626);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.se-alerts-detail-item.sev-warn .se-alerts-late {
  background: color-mix(in srgb, var(--warn, #f59e0b) 22%, transparent);
  color: color-mix(in srgb, var(--warn, #f59e0b) 90%, var(--text));
}
.se-alerts-detail-item.sev-info .se-alerts-late {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
}
.se-alerts-stepname { font-weight: 600; }
.se-alerts-projlabel { flex: 1; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-alerts-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.se-alerts-link:hover { text-decoration: underline; }
.se-alerts-detail-empty { color: var(--muted); font-style: italic; padding: 4px 6px; }
.se-alerts-detail-more { font-size: 11px; opacity: .7; margin-top: 6px; text-align: center; }
.se-alerts-totals {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--subtle);
}

/* ════════════════════════════════════════════════════════════
 *  SeMercato — table BDD MARQUES
 * ════════════════════════════════════════════════════════════ */
.se-mercato-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.se-mercato-table thead th {
  background: var(--subtle);
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 10px 8px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.se-mercato-table thead th:hover {
  color: var(--primary);
}
.se-mercato-table thead th.sorted-asc::after  { content: ' ↑'; color: var(--primary); }
.se-mercato-table thead th.sorted-desc::after { content: ' ↓'; color: var(--primary); }
.se-mercato-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.se-mercato-table tbody tr:hover { background: var(--subtle); }
.se-mercato-table tbody tr.is-dirty {
  background: color-mix(in srgb, var(--warn, #f59e0b) 9%, transparent);
}
/* Coloration par équipe — bordure gauche + tint discret de la ligne */
.se-mercato-table tbody tr.has-team {
  box-shadow: inset 4px 0 0 0 var(--team-color, transparent);
  background: color-mix(in srgb, var(--team-color, transparent) 4%, transparent);
}
.se-mercato-table tbody tr.has-team:hover {
  background: color-mix(in srgb, var(--team-color, transparent) 9%, var(--subtle));
}
.se-mercato-table tbody tr.has-team.is-dirty {
  background: color-mix(in srgb, var(--warn, #f59e0b) 9%, color-mix(in srgb, var(--team-color, transparent) 4%, transparent));
}

/* Badge équipe — pastille colorée (utilisée en table + kanban) */
.se-team-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  background: color-mix(in srgb, var(--team-color, var(--primary)) 16%, transparent);
  color: color-mix(in srgb, var(--team-color, var(--primary)) 75%, var(--text, #111));
  border: 1px solid color-mix(in srgb, var(--team-color, var(--primary)) 35%, transparent);
  white-space: nowrap;
}
[data-theme="dark"] .se-team-badge {
  color: color-mix(in srgb, var(--team-color, var(--primary)) 90%, #fff);
  background: color-mix(in srgb, var(--team-color, var(--primary)) 22%, transparent);
}
.se-mercato-rank {
  font-weight: 700;
  text-align: center;
  width: 50px;
  color: var(--muted);
}
.se-mercato-name {
  font-weight: 600;
  min-width: 180px;
}
.se-mercato-cell {
  min-width: 140px;
}
.se-mercato-cell select,
.se-mercato-cell .se-people-select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}
.se-mercato-cell select:hover,
.se-mercato-cell .se-people-select:hover { border-color: var(--border); }
.se-mercato-cell select:focus { border-color: var(--primary); outline: none; }
.se-mercato-cell select.is-changed,
.se-mercato-cell .se-people-select.is-changed {
  background: color-mix(in srgb, var(--warn, #f59e0b) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, var(--border));
}
.se-mercato-cell .se-people-display {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 12px;
  display: inline-block;
  min-height: 22px;
}
.se-mercato-cell .se-people-display:hover { border-color: var(--border); }
.se-mercato-cell .se-people-display.is-empty { color: var(--muted); font-style: italic; }
.se-mercato-cell .se-people-display.is-changed {
  background: color-mix(in srgb, var(--warn, #f59e0b) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, var(--border));
}
.se-mercato-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  padding: 2px 6px;
}
.se-mercato-link:hover { text-decoration: underline; }
.se-mercato-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--muted);
}
.se-mercato-totals {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--subtle);
}

/* ── People-picker popover ────────────────────────────────── */
.se-people-popover {
  position: absolute;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 8px;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
}
.se-people-popover input {
  width: 100%;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: inherit;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.se-people-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.se-people-option {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.se-people-option:hover { background: var(--subtle); }
.se-people-option.is-selected {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.se-people-option.is-clear {
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}

/* ── Cellule "people" toujours cliquable (édition immédiate hors sim) ── */
.se-mercato-cell .se-people-display.is-clickable { cursor: pointer; }
.se-mercato-cell .se-people-display.is-clickable:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* ── Cellule États (multi-select) ─────────────────────────── */
.se-mercato-cell .se-states-display {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  align-items: center;
}
.se-mercato-cell .se-states-display:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.se-mercato-cell .se-states-display.is-changed {
  background: color-mix(in srgb, var(--warn, #f59e0b) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, var(--border));
}
.se-state-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  white-space: nowrap;
}
/* Couleurs par état (slug = lowercase, [^a-z0-9]→-) */
.se-state-chip.se-state-recurrent,
.se-state-chip.se-state-r-current,
.se-state-chip.se-state-r-current- {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #047857;
  border-color: color-mix(in srgb, #10b981 50%, transparent);
}
.se-state-chip.se-state-nouveau {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #1d4ed8;
  border-color: color-mix(in srgb, #3b82f6 50%, transparent);
}
.se-state-chip.se-state-ponctuel {
  background: color-mix(in srgb, #a855f7 18%, transparent);
  color: #7e22ce;
  border-color: color-mix(in srgb, #a855f7 50%, transparent);
}
.se-state-chip.se-state-prospection {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
  border-color: color-mix(in srgb, #f59e0b 50%, transparent);
}
.se-state-chip.se-state-stand-by,
.se-state-chip.se-state-pause {
  background: color-mix(in srgb, #6b7280 18%, transparent);
  color: #4b5563;
  border-color: color-mix(in srgb, #6b7280 50%, transparent);
}
.se-state-chip.se-state-fini {
  background: color-mix(in srgb, #ef4444 16%, transparent);
  color: #b91c1c;
  border-color: color-mix(in srgb, #ef4444 50%, transparent);
}
.se-state-chip.se-state-interne,
.se-state-chip.se-state-test {
  background: color-mix(in srgb, #14b8a6 18%, transparent);
  color: #0f766e;
  border-color: color-mix(in srgb, #14b8a6 50%, transparent);
}
[data-theme="dark"] .se-state-chip {
  color: color-mix(in srgb, currentColor 60%, #fff);
}

/* ── Popover États (multi-select avec checkboxes) ────────── */
.se-states-popover { min-width: 220px; }
.se-state-option {
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.se-state-option:hover { background: var(--subtle); }
.se-state-option.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.se-state-checkbox {
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--muted);
}
.se-state-option.is-selected .se-state-checkbox { color: var(--primary); }
.se-states-clear {
  font-size: 11px;
  padding: 4px 10px;
}

/* ── Vue Kanban (par CdP) ─────────────────────────────────── */
.se-mercato-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  align-items: flex-start;
  min-height: 320px;
}
.se-kanban-col {
  flex: 0 0 280px;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  transition: background .12s, outline .12s;
}
.se-kanban-col.is-drop-target {
  background: color-mix(in srgb, var(--primary) 14%, var(--subtle));
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.se-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.se-kanban-col-name { font-size: 14px; }
.se-kanban-col-count {
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.se-kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: grab;
  font-size: 13px;
  transition: box-shadow .12s, transform .08s;
  position: relative;
}
.se-kanban-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}
.se-kanban-card.is-dragging {
  opacity: .4;
  cursor: grabbing;
}
.se-kanban-card.is-dirty {
  background: color-mix(in srgb, var(--warn, #f59e0b) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, var(--border));
}
.se-kanban-card.has-team {
  border-left: 4px solid var(--team-color, var(--border));
  padding-left: 8px;
}
.se-kanban-card-name { font-weight: 600; }
.se-kanban-card-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
/* (.se-kanban-card-team — remplacé par .se-team-badge, conservé inutilisé) */
.se-kanban-empty {
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 4px;
}

/* ── Modal légère "+ Client" ───────────────────────────────── */
.se-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-modal-overlay.hidden { display: none; }
.se-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  width: 460px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.se-modal-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 14px;
}
.se-modal-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.se-modal-row label { font-size: 12px; color: var(--muted); font-weight: 600; }
.se-modal-row input,
.se-modal-row select {
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: inherit;
}
.se-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── V3b — Sous-onglet « ⏱ Règles » ──────────────────────────── */
.ptv-rules-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 4px;
}

.ptv-rules-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.ptv-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ptv-rules-title {
  font-weight: 600;
  font-size: 15px;
  /* V6.7.121 — Align SVG Lucide inline */
  display: inline-flex; align-items: center; gap: 7px;
}
.ptv-rules-title svg { display: block; }
.ptv-rules-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
}
.ptv-rules-help {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
  line-height: 1.45;
}
.ptv-rules-empty {
  padding: 14px 6px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.ptv-rules-mute {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* ── V6.7.194 — R6.1b : Panneau Règles multi-règles par étape ─────────── */

/* Bouton help + popover bleu (au hover) */
.ptv-rules-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.ptv-rules-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid var(--primary, #0043ff);
  border-radius: 50%;
  background: var(--primary, #0043ff);
  color: #fff;
  cursor: help;
  transition: background .15s, transform .15s;
}
.ptv-rules-help-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 85%, #000);
  transform: scale(1.08);
}
.ptv-rules-help-btn svg { display: block; }
.ptv-rules-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 320px;
  max-width: 380px;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--primary, #0043ff);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #111827);
}
.ptv-rules-help-pop::before {
  content: '';
  position: absolute;
  top: -7px; left: 8px;
  width: 12px; height: 12px;
  background: var(--card-bg, #fff);
  border-top: 1px solid var(--primary, #0043ff);
  border-left: 1px solid var(--primary, #0043ff);
  transform: rotate(45deg);
}
.ptv-rules-help-wrap:hover .ptv-rules-help-pop,
.ptv-rules-help-btn:focus + .ptv-rules-help-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ptv-rules-help-pop-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary, #0043ff);
  margin-bottom: 6px;
}
.ptv-rules-help-pop p { margin: 4px 0; }
.ptv-rules-help-pop-mute {
  color: var(--text-muted, #6b7280);
  font-size: 11.5px;
  font-style: italic;
  border-top: 1px dashed var(--border, #e5e7eb);
  padding-top: 6px;
  margin-top: 8px !important;
}
body.dark .ptv-rules-help-pop {
  background: #1f2937;
  color: #f3f4f6;
}
body.dark .ptv-rules-help-pop::before { background: #1f2937; }

/* Liste des étapes (cards) */
.ptv-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ptv-step-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.ptv-step-card.is-saving { opacity: 0.55; pointer-events: none; }
.ptv-step-card:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, var(--border, #e5e7eb));
}
/* V6.7.196 — R6.2 : Drag & drop visuals */
.ptv-step-handle { cursor: grab; }
.ptv-step-card[draggable="true"] .ptv-step-handle { cursor: grabbing; }
.ptv-step-card.is-dragging {
  opacity: 0.4;
  border-style: dashed;
  border-color: var(--primary, #0043ff);
}
.ptv-step-card.drop-above {
  box-shadow: inset 0 3px 0 0 var(--primary, #0043ff);
}
.ptv-step-card.drop-below {
  box-shadow: inset 0 -3px 0 0 var(--primary, #0043ff);
}

/* Header de la card — layout fixe (FIX du point 5 : alignement quels que
   soient les longueurs des noms d'étape) */
.ptv-step-card-head {
  display: grid;
  grid-template-columns: 18px 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 4%, transparent);
}
.ptv-step-handle {
  color: var(--text-muted, #cbd5e1);
  cursor: grab;
  font-size: 14px;
  user-select: none;
  text-align: center;
}
.ptv-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary, #0043ff);
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.ptv-step-icon svg { display: block; }
.ptv-step-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ptv-step-name-line {
  display: inline-flex; align-items: center; gap: 8px;
}
.ptv-step-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptv-step-type-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  color: var(--primary, #0043ff);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ptv-step-meta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
}
.ptv-step-ordre { font-variant-numeric: tabular-nums; }
.ptv-step-next { font-style: italic; }
.ptv-step-mute { color: var(--text-muted, #9ca3af); }
.ptv-step-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.ptv-step-archive-btn { color: var(--text-muted, #6b7280); transition: color .15s; }
.ptv-step-archive-btn:hover { color: #dc2626; }

/* Zone rules sous chaque étape */
.ptv-step-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 12px;
}
.ptv-rule-empty {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  padding: 6px 8px;
}
.ptv-rule-empty i { font-style: italic; }
.ptv-rule-add-btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: all .15s;
}
.ptv-rule-add-btn:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
}

/* Rule row — layout flex compact (V6.7.195) */
.ptv-rule-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 5%, transparent);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: opacity .15s, border-color .15s, background .15s;
}
.ptv-rule-row .ptv-rule-target { width: 200px; flex-shrink: 0; }
.ptv-rule-row .ptv-rule-arrow  { flex-shrink: 0; }
.ptv-rule-row .ptv-rule-seuil  { flex-shrink: 0; }
.ptv-rule-row.is-draft {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 45%, transparent);
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
}
.ptv-rule-row.is-saving { opacity: 0.55; pointer-events: none; }
.ptv-rule-arrow {
  color: var(--text-muted, #9ca3af);
  font-size: 14px;
  text-align: center;
}
.ptv-rule-target {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  background: var(--card-bg, #fff);
  color: var(--text, #111827);
}
.ptv-rule-target:focus { outline: none; border-color: var(--primary, #0043ff); }
.ptv-rule-seuil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 0;
}
.ptv-rule-seuil-lbl {
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  min-width: 50px;
}
.ptv-rule-seuil-crit .ptv-rule-seuil-lbl { color: #dc2626; }
body.dark .ptv-rule-seuil-crit .ptv-rule-seuil-lbl { color: #fca5a5; }
.ptv-rule-input {
  width: 50px;
  padding: 3px 5px;
  font-size: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  background: var(--card-bg, #fff);
  color: var(--text, #111827);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ptv-rule-input:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
}
.ptv-rule-seuil-suffix { color: var(--text-muted, #9ca3af); font-size: 11px; }

/* Save button — agrandi + bleu accent (V6.7.195) */
.ptv-rule-save-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary, #0043ff);
  color: #fff;
  border: 1px solid var(--primary, #0043ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.ptv-rule-save-btn svg { width: 16px; height: 16px; }
.ptv-rule-save-btn:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 85%, #000);
  transform: scale(1.05);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
}
.ptv-rule-delete-btn {
  color: var(--text-muted, #6b7280);
  flex-shrink: 0;
}
.ptv-rule-delete-btn:hover {
  color: #dc2626;
  background: color-mix(in srgb, #dc2626 10%, transparent);
}

/* Bouton "+ Ajouter une étape" */
.ptv-step-add-btn {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1.5px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.ptv-step-add-btn:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
}

/* Dark mode */
body.dark .ptv-step-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
body.dark .ptv-step-card-head { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.10); }
body.dark .ptv-step-name { color: #f3f4f6; }
body.dark .ptv-rule-row { background: rgba(255,255,255,0.04); }
body.dark .ptv-rule-row.is-draft {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.55);
}
body.dark .ptv-rule-target,
body.dark .ptv-rule-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #f3f4f6;
}

/* Responsive — sur petit écran, rule row passe en colonne pour rester lisible */
@media (max-width: 780px) {
  .ptv-rule-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ptv-rule-row .ptv-rule-target { width: 100%; }
}


/* ══ V4 — Tour de contrôle ══════════════════════════════════ */
.tdc-wrap {
  padding: 16px 20px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Header — filtres + plage */
.tdc-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tdc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.tdc-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 160px;
  min-width: 130px;
}
.tdc-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tdc-field select,
.tdc-field input {
  padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card-bg, #fff);
  color: inherit;
  font-family: inherit;
}
.tdc-search-field {
  flex: 2 1 220px;
}
.tdc-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}
.tdc-range-label {
  font-weight: 600;
}
.tdc-range input[type="date"] {
  padding: 4px 6px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--card-bg, #fff);
  color: inherit;
}

.tdc-meta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 0 4px 10px;
}

/* Mois */
.tdc-months {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tdc-month {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.tdc-month-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 10px;
  flex-wrap: wrap;
}
.tdc-month-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text, #111827);
  /* V6.7.134 — Align icône Lucide */
  display: inline-flex; align-items: center; gap: 8px;
}
.tdc-month-title .tdc-month-icon { display: inline-flex; align-items: center; color: var(--primary); }
.tdc-month-title .tdc-month-icon svg { display: block; }
.tdc-month-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tdc-month-count {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.tdc-month-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}
.tdc-month-toggle {
  background: transparent;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tdc-month-toggle:hover {
  background: var(--bg-soft, #f3f4f6);
  color: var(--text, #111827);
  border-color: var(--primary, #0043ff);
}

/* Clients (sous-groupes) */
.tdc-clients {
  display: flex;
  flex-direction: column;
}
.tdc-client + .tdc-client {
  border-top: 1px solid var(--border, #e5e7eb);
}
.tdc-client-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-soft, #f9fafb);
  border-bottom: 1px solid var(--border, #f3f4f6);
}
.tdc-client-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #111827);
}
.tdc-client-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-bg, #fff);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
}

/* Table contenus */
.tdc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  /* V5.1 — alignement des colonnes entre tous les clients d'un même mois.
     Sans table-layout:fixed, chaque table dimensionnait ses colonnes selon
     son propre contenu → décalage visuel entre clients. */
  table-layout: fixed;
}
/* Largeurs partagées des 6 colonnes (Contenu / État / Date Valid / Date Pub / Projet / ↗) */
.tdc-table th:nth-child(1), .tdc-table td:nth-child(1) { width: 28%; }
.tdc-table th:nth-child(2), .tdc-table td:nth-child(2) { width: 20%; }
.tdc-table th:nth-child(3), .tdc-table td:nth-child(3) { width: 13%; }
.tdc-table th:nth-child(4), .tdc-table td:nth-child(4) { width: 13%; }
.tdc-table th:nth-child(5), .tdc-table td:nth-child(5) { width: 22%; }
.tdc-table th:nth-child(6), .tdc-table td:nth-child(6) { width: 4%;  }
.tdc-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 14px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border, #f3f4f6);
}
.tdc-table tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border, #f3f4f6);
  vertical-align: middle;
}
.tdc-table tbody tr:last-child td {
  border-bottom: 0;
}
.tdc-table tbody tr:hover {
  background: var(--bg-soft, #fafafa);
}
.tdc-row-title {
  font-weight: 500;
  color: var(--text, #111827);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdc-row-proj {
  color: var(--text-muted, #6b7280);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* V5.7 — Sélecteur projet inline (link/unlink contenu → projet) */
.tdc-row-proj-select {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 0.85em;
  padding: 4px 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: var(--bg, #fff);
  color: var(--text, #111827);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tdc-row-proj-select:hover:not(:disabled) {
  border-color: var(--accent, #2563eb);
}
.tdc-row-proj-select:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.tdc-row-proj-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tdc-row-actions {
  text-align: right;
  /* width forcée à 4% via .tdc-table td:nth-child(6) (table-layout: fixed) */
  white-space: nowrap;
}
.tdc-mute {
  color: var(--text-muted, #9ca3af);
}
.tdc-month-source {
  color: var(--text-muted, #9ca3af);
  font-size: 11px;
}

/* Badges État (groupage visuel par grande étape) */
.tdc-etat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #e5e7eb;
  color: #374151;
}
.tdc-etat-badge.etat-bacrouge { background: #fee2e2; color: #991b1b; }
.tdc-etat-badge.etat-valclient{ background: #d1fae5; color: #065f46; }
.tdc-etat-badge.etat-valcdp   { background: #ede9fe; color: #5b21b6; }
.tdc-etat-badge.etat-prod     { background: #fef3c7; color: #92400e; }
.tdc-etat-badge.etat-mont     { background: #dbeafe; color: #1e40af; }
.tdc-etat-badge.etat-graph    { background: #dbeafe; color: #1e40af; }
.tdc-etat-badge.etat-pub      { background: #fce7f3; color: #9d174d; }
.tdc-etat-badge.etat-ads      { background: #fde68a; color: #92400e; }
.tdc-etat-badge.etat-other    { background: #e5e7eb; color: #374151; }
.tdc-etat-badge.etat-na       { background: transparent; color: var(--text-muted, #9ca3af); border: 1px dashed var(--border, #d1d5db); }

/* V6.7.441 — Dropdown État inline dans le tableau Contenus. Reprend les
   classes etat-* du badge pour la coloration. Compact, pas de chevron par
   défaut, mais visible au hover. */
.tdc-row-etat-select {
  display: inline-block;
  padding: 2px 22px 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: #e5e7eb;
  color: #374151;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 11px) 9px, calc(100% - 7px) 9px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: filter 0.12s, box-shadow 0.12s;
}
.tdc-row-etat-select:hover { filter: brightness(0.96); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 18%, transparent); }
.tdc-row-etat-select:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #0043ff) 35%, transparent); }
.tdc-row-etat-select:disabled { opacity: 0.6; cursor: wait; }
/* Réutilise les couleurs etat-* du badge */
.tdc-row-etat-select.etat-bacrouge { background-color: #fee2e2; color: #991b1b; }
.tdc-row-etat-select.etat-valclient{ background-color: #d1fae5; color: #065f46; }
.tdc-row-etat-select.etat-valcdp   { background-color: #ede9fe; color: #5b21b6; }
.tdc-row-etat-select.etat-prod     { background-color: #fef3c7; color: #92400e; }
.tdc-row-etat-select.etat-mont     { background-color: #dbeafe; color: #1e40af; }
.tdc-row-etat-select.etat-graph    { background-color: #dbeafe; color: #1e40af; }
.tdc-row-etat-select.etat-pub      { background-color: #fce7f3; color: #9d174d; }
.tdc-row-etat-select.etat-ads      { background-color: #fde68a; color: #92400e; }
.tdc-row-etat-select.etat-other    { background-color: #e5e7eb; color: #374151; }

/* V6.7.442 — Flash de confirmation après changement d'état (900ms) */
@keyframes tdcEtatJustChanged {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #10b981) 60%, transparent); }
  35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success, #10b981) 30%, transparent); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
.tdc-row-etat-select.etat-just-changed {
  animation: tdcEtatJustChanged 0.9s ease-out;
}

/* V6.7.442 — Header de colonne triable (cliquable) + indicateur ↑/↓ */
.tdc-th-sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
.tdc-th-sortable:hover { color: var(--primary, #0043ff); }
.tdc-th-sort {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.35;
  font-size: 0.9em;
  transition: opacity 0.12s, color 0.12s;
}
.tdc-th-sort.is-active { opacity: 1; color: var(--primary, #0043ff); }
.tdc-th-sortable:hover .tdc-th-sort { opacity: 0.7; }

/* V6.7.442 — Toggle Densité compacte (paddings/font réduits) */
.tdc-table--compact { font-size: 11.5px; }
.tdc-table--compact th { padding: 4px 6px; }
.tdc-table--compact td { padding: 3px 6px; }
.tdc-table--compact .tdc-row-etat-select { padding: 1px 20px 1px 6px; font-size: 10.5px; }
.tdc-table--compact .tdc-row-proj-select { font-size: 11px; padding: 2px 4px; }
.tdc-field--toggle {
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}
.tdc-field--toggle input[type="checkbox"] { margin: 0; cursor: pointer; }

/* V6.7.442 — Mini-résumé inline dans header Mois (3 plus gros états + reste) */
.tdc-month-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  margin-left: 8px;
}
.tdc-month-summary-bit {
  display: inline-flex; align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #e5e7eb;
  color: #374151;
  letter-spacing: 0.01em;
}
.tdc-month-summary-bit.etat-bacrouge { background: #fee2e2; color: #991b1b; }
.tdc-month-summary-bit.etat-valclient{ background: #d1fae5; color: #065f46; }
.tdc-month-summary-bit.etat-valcdp   { background: #ede9fe; color: #5b21b6; }
.tdc-month-summary-bit.etat-prod     { background: #fef3c7; color: #92400e; }
.tdc-month-summary-bit.etat-mont     { background: #dbeafe; color: #1e40af; }
.tdc-month-summary-bit.etat-graph    { background: #dbeafe; color: #1e40af; }
.tdc-month-summary-bit.etat-pub      { background: #fce7f3; color: #9d174d; }
.tdc-month-summary-bit.etat-ads      { background: #fde68a; color: #92400e; }
.tdc-month-summary-bit.etat-other    { background: #e5e7eb; color: #374151; }
.tdc-month-summary-bit--rest { background: transparent; color: var(--text-muted, #6b7280); font-weight: 500; }

/* V6.7.441 — Breakdown par état dans header de groupe Mois */
.tdc-month-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 16px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-2, #fafbfc);
}
.tdc-breakdown-pill {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #e5e7eb;
  color: #374151;
}
.tdc-breakdown-pill.etat-bacrouge { background: #fee2e2; color: #991b1b; }
.tdc-breakdown-pill.etat-valclient{ background: #d1fae5; color: #065f46; }
.tdc-breakdown-pill.etat-valcdp   { background: #ede9fe; color: #5b21b6; }
.tdc-breakdown-pill.etat-prod     { background: #fef3c7; color: #92400e; }
.tdc-breakdown-pill.etat-mont     { background: #dbeafe; color: #1e40af; }
.tdc-breakdown-pill.etat-graph    { background: #dbeafe; color: #1e40af; }
.tdc-breakdown-pill.etat-pub      { background: #fce7f3; color: #9d174d; }
.tdc-breakdown-pill.etat-ads      { background: #fde68a; color: #92400e; }
.tdc-breakdown-pill.etat-other    { background: #e5e7eb; color: #374151; }

/* Empty state */
.tdc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted, #6b7280);
}
.tdc-empty-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.tdc-empty-hint {
  font-size: 12px;
  margin-top: 6px;
  color: var(--text-muted, #9ca3af);
}

/* Dark mode tweaks */
body.dark .tdc-month-head {
  background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(99,102,241,0.04));
}
body.dark .tdc-etat-badge.etat-bacrouge { background: rgba(239, 68, 68, 0.20);  color: #fecaca; }
body.dark .tdc-etat-badge.etat-valclient{ background: rgba(16, 185, 129, 0.18); color: #a7f3d0; }
body.dark .tdc-etat-badge.etat-valcdp   { background: rgba(139, 92, 246, 0.20); color: #ddd6fe; }
body.dark .tdc-etat-badge.etat-prod     { background: rgba(245, 158, 11, 0.18); color: #fde68a; }
body.dark .tdc-etat-badge.etat-mont,
body.dark .tdc-etat-badge.etat-graph    { background: rgba(59, 130, 246, 0.18); color: #bfdbfe; }
body.dark .tdc-etat-badge.etat-pub      { background: rgba(236, 72, 153, 0.18); color: #fbcfe8; }
body.dark .tdc-etat-badge.etat-ads      { background: rgba(245, 158, 11, 0.18); color: #fde68a; }
body.dark .tdc-etat-badge.etat-other    { background: rgba(156, 163, 175, 0.20); color: #e5e7eb; }

/* État "Terminé" — vert calme, distinct des verts ValClient */
.tdc-etat-badge.etat-done { background: #dcfce7; color: #166534; }
body.dark .tdc-etat-badge.etat-done { background: rgba(34, 197, 94, 0.18); color: #bbf7d0; }

/* ── TdC V5 — Sous-onglets (Contenus / Activations) ─────────────────────── */
.tdc-subtabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elevated, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  margin-right: auto;
}
.tdc-subtab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text, #374151);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  /* V6.7.134 — Align icône Lucide ↔ label */
  display: inline-flex; align-items: center; gap: 6px;
}
.tdc-subtab .tdc-subtab-icon { display: inline-flex; align-items: center; line-height: 1; }
.tdc-subtab .tdc-subtab-icon svg { display: block; }
/* V6.7.134 — Couleurs en bleu Tire-Fesses (au lieu du fallback indigo #6366f1) */
.tdc-subtab:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); }
.tdc-subtab.is-active {
  background: var(--surface, #ffffff);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
body.dark .tdc-subtabs { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
body.dark .tdc-subtab { color: #d1d5db; }
body.dark .tdc-subtab:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
body.dark .tdc-subtab.is-active { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); box-shadow: none; }

/* ── TdC V5 — Toggle "Voir tous les états" ──────────────────────────────── */
.tdc-meta-toggle {
  appearance: none;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tdc-meta-toggle:hover { border-color: var(--primary, #0043ff); color: var(--primary, #0043ff); }
.tdc-meta-toggle.is-on {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
body.dark .tdc-meta-toggle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #9ca3af; }
body.dark .tdc-meta-toggle.is-on { background: rgba(99,102,241,0.20); border-color: rgba(99,102,241,0.55); color: #c7d2fe; }

/* ── TdC V5 — Vue Activations (cards par projet) ────────────────────────── */
.tdc-activations {
  display: grid;
  /* V6.7.227 — minmax(0, 1fr) force la colonne à respecter la largeur du
     conteneur (sinon grid auto-size = min-content = la timeline interne
     fait déborder la card). */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 8px 12px 14px;
}
.tdc-activation-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0; /* V6.7.227 — permet à la card de shrink ; le scroll wrapper interne prend le relais */
}
.tdc-activation-card:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border, #e5e7eb));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tdc-activation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tdc-activation-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.tdc-activation-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
}
.tdc-activation-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tdc-activation-source {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 10%, transparent);
}
/* V6.7.226 → V6.7.227 — Variante cliquable (Mois éditable au clic)
   Full reset des styles browser default pour <button>. */
button.tdc-activation-source.tdc-month-edit {
  appearance: none;
  -webkit-appearance: none;
  border: 1px dashed transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: inherit;
  transition: all 0.15s;
}
button.tdc-activation-source.tdc-month-edit:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
}
/* V6.7.227 — Mois cliquable inline dans la ligne contexte ("Mars 2026"). */
.tdc-month-edit-inline {
  appearance: none;
  -webkit-appearance: none;
  border: 1px dashed transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 4px;
  border-radius: 3px;
  transition: all 0.15s;
}
.tdc-month-edit-inline:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  color: var(--primary, #0043ff);
}
/* V6.7.226 — Modal d'édition du Mois (grid 3×4 checkboxes) */
.tdc-month-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.tdc-month-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.tdc-month-edit-row:hover {
  border-color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
}
.tdc-month-edit-row input { accent-color: var(--primary, #0043ff); cursor: pointer; }
.tdc-activation-edit {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
}
.tdc-activation-track {
  margin-top: 2px;
  min-width: 0;
}
/* V6.7.227 — TdC : steps de timeline réduits (80px au lieu de 110px du Suivi
   expanded). Les cards TdC sont plus compactes que les lignes Suivi → les
   labels restent lisibles avec un ellipsis bien serré. */
.tdc-activation-track .ptv-track-scroll .pt-track-compact .pt-step {
  flex: 0 0 80px;
  min-width: 80px;
  max-width: 80px;
  padding: 4px 3px 2px;
}
.tdc-activation-track .ptv-track-scroll .pt-track-compact .pt-step-name {
  font-size: 9px;
  line-height: 1.1;
}
.tdc-activation-track .ptv-track-scroll .pt-track-compact .pt-step-icon {
  font-size: 12px;
}
body.dark .tdc-activation-card {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
body.dark .tdc-activation-card:hover { border-color: rgba(99,102,241,0.55); }
body.dark .tdc-activation-name { color: #f3f4f6; }

/* ── TdC R4 (V6.7.188) — Controls Activations : tri + chip risque ─────── */
.tdc-act-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px 4px;
  border-top: 1px dashed var(--border, #e5e7eb);
  margin-top: 6px;
}
.tdc-act-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tdc-act-sort-label {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-right: 2px;
}
.tdc-act-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tdc-act-sort-btn:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border, #e5e7eb));
  color: var(--text, #111827);
}
.tdc-act-sort-btn.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent);
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  font-weight: 600;
}
.tdc-act-sort-icon { display: inline-flex; align-items: center; }
.tdc-act-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tdc-act-chip:hover {
  border-color: color-mix(in srgb, #ef4444 40%, var(--border, #e5e7eb));
  color: #ef4444;
}
.tdc-act-chip.is-active {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-color: #ef4444;
  color: #ef4444;
  font-weight: 600;
}
.tdc-act-chip-icon { display: inline-flex; align-items: center; }
body.dark .tdc-act-controls { border-top-color: rgba(255,255,255,0.08); }
body.dark .tdc-act-sort-btn,
body.dark .tdc-act-chip {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
  color: #9ca3af;
}
body.dark .tdc-act-sort-btn:hover,
body.dark .tdc-act-chip:hover { color: #f3f4f6; }
body.dark .tdc-act-sort-btn.is-active {
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.55);
  color: #c7d2fe;
}
body.dark .tdc-act-chip.is-active {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  color: #fecaca;
}

/* ── TdC R4 — Compteurs alertes dans la barre meta ────────────────────── */
.tdc-meta-counts {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 12px;
}
.tdc-meta-count {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
}
.tdc-meta-count--critical {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  border-color: color-mix(in srgb, #dc2626 35%, transparent);
  color: #dc2626;
}
.tdc-meta-count--standard {
  background: color-mix(in srgb, #f97316 12%, transparent);
  border-color: color-mix(in srgb, #f97316 35%, transparent);
  color: #c2410c;
}
.tdc-meta-count--warn {
  background: color-mix(in srgb, #eab308 14%, transparent);
  border-color: color-mix(in srgb, #eab308 35%, transparent);
  color: #a16207;
}
.tdc-meta-count--noval {
  background: color-mix(in srgb, #6366f1 12%, transparent);
  border-color: color-mix(in srgb, #6366f1 35%, transparent);
  color: #4f46e5;
}
body.dark .tdc-meta-count--critical { color: #fca5a5; }
body.dark .tdc-meta-count--standard { color: #fdba74; }
body.dark .tdc-meta-count--warn     { color: #fde047; }
body.dark .tdc-meta-count--noval    { color: #c7d2fe; }

/* ── TdC R4 — Vue plate (tri Urgence) ─────────────────────────────────── */
.tdc-activations--flat {
  padding: 8px 16px 14px;
  grid-template-columns: 1fr;
}

/* ── TdC R4 — Badge stagnation sur carte ──────────────────────────────── */
.tdc-stagn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tdc-stagn-icon { display: inline-flex; align-items: center; }
.tdc-stagn--critical {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  border-color: color-mix(in srgb, #dc2626 45%, transparent);
  color: #dc2626;
}
.tdc-stagn--standard {
  background: color-mix(in srgb, #f97316 14%, transparent);
  border-color: color-mix(in srgb, #f97316 45%, transparent);
  color: #c2410c;
}
.tdc-stagn--warn {
  background: color-mix(in srgb, #eab308 16%, transparent);
  border-color: color-mix(in srgb, #eab308 45%, transparent);
  color: #a16207;
}
.tdc-stagn--noval {
  background: color-mix(in srgb, #6366f1 14%, transparent);
  border-color: color-mix(in srgb, #6366f1 45%, transparent);
  color: #4f46e5;
}
body.dark .tdc-stagn--critical { color: #fca5a5; }
body.dark .tdc-stagn--standard { color: #fdba74; }
body.dark .tdc-stagn--warn     { color: #fde047; }
body.dark .tdc-stagn--noval    { color: #c7d2fe; }

/* Cartes : liseré gauche selon le niveau pour scan rapide */
.tdc-activation-card--critical { border-left: 3px solid #dc2626; }
.tdc-activation-card--standard { border-left: 3px solid #f97316; }
.tdc-activation-card--warn     { border-left: 3px solid #eab308; }
.tdc-activation-card--noval    { border-left: 3px solid #6366f1; }
body.dark .tdc-activation-card--critical { border-left-color: #ef4444; }
body.dark .tdc-activation-card--standard { border-left-color: #f97316; }
body.dark .tdc-activation-card--warn     { border-left-color: #eab308; }
body.dark .tdc-activation-card--noval    { border-left-color: #6366f1; }

/* V6.7.436 — Projets Terminés (TdC Activations) : opacité légère + badge */
.tdc-activation-card--finished { border-left: 3px solid var(--success, #10b981); opacity: 0.78; }
.tdc-activation-card--finished:hover { opacity: 1; }
.tdc-activation-done-badge,
.tdc-kb-card-done-pill {
  display: inline-flex; align-items: center;
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  color: var(--success, #10b981);
  font-weight: 600;
  margin-left: 6px;
  flex-shrink: 0;
}
.tdc-kb-card--finished { opacity: 0.75; }
.tdc-kb-card--finished:hover { opacity: 1; }
/* 2026-06-11 — Badge « ⭐ Case study » (TdC Activations) */
.tdc-activation-cs-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.72rem; padding: 1px 8px; border-radius: 10px;
  background: color-mix(in srgb, #f5b301 18%, transparent);
  color: #b07d00; font-weight: 700; margin-left: 6px; flex-shrink: 0;
}
.tdc-kb-card-done-pill { margin-left: 0; }

/* Chip toggle « Inclure terminés » : visuel cohérent avec les autres chips */
.tdc-act-chip--finished {}
.tdc-act-chip--finished.is-active {
  background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
  border-color: var(--success, #10b981);
  color: var(--success, #10b981);
}
.tdc-act-chip-count {
  font-size: 0.7rem;
  padding: 0 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--success, #10b981) 18%, transparent);
  color: var(--success, #10b981);
  font-weight: 700;
  margin-left: 4px;
}

/* ── TdC R4 — Contexte (client · mois) en mode flat ───────────────────── */
.tdc-activation-ctx {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  margin-top: -4px;
}
.tdc-activation-ctx-client { font-weight: 600; color: var(--text, #111827); }
.tdc-activation-ctx-sep    { opacity: 0.5; }
.tdc-activation-ctx-month  { font-style: italic; }
body.dark .tdc-activation-ctx-client { color: #f3f4f6; }

/* ── TdC R4 — Pastilles étape courante / suivante ─────────────────────── */
.tdc-step-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  margin-top: -2px;
}
.tdc-step-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 10%, transparent);
  color: var(--text-muted, #6b7280);
  font-size: 10.5px;
  font-weight: 500;
}
.tdc-step-pill--cur {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
  font-weight: 600;
}
.tdc-step-pill--next {
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
body.dark .tdc-step-pill--cur { color: #c7d2fe; }

/* ── TdC R5 (V6.7.189) — Switcher Vue (Liste / Kanban) ─────────────────── */
.tdc-act-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px dashed var(--border, #e5e7eb);
}
.tdc-act-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tdc-act-view-btn:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border, #e5e7eb));
  color: var(--text, #111827);
}
.tdc-act-view-btn.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent);
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  font-weight: 600;
}
body.dark .tdc-act-view { border-right-color: rgba(255,255,255,0.10); }
body.dark .tdc-act-view-btn {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.10);
  color: #9ca3af;
}
body.dark .tdc-act-view-btn:hover { color: #f3f4f6; }
body.dark .tdc-act-view-btn.is-active {
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.55);
  color: #c7d2fe;
}

/* ── TdC R5 — Wrapper chips (À risque + Case Study) ────────────────────── */
.tdc-act-chips {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
/* R4 chip était margin-left:auto en standalone → on l'override quand wrappé */
.tdc-act-chips .tdc-act-chip { margin-left: 0; }

/* Chip Case Study : palette violette pour la distinguer de "À risque" (rouge) */
.tdc-act-chip--cs:hover {
  border-color: color-mix(in srgb, #8b5cf6 45%, var(--border, #e5e7eb));
  color: #8b5cf6;
}
.tdc-act-chip--cs.is-active {
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  border-color: #8b5cf6;
  color: #8b5cf6;
}
body.dark .tdc-act-chip--cs.is-active {
  background: rgba(139,92,246,0.20);
  border-color: rgba(139,92,246,0.55);
  color: #ddd6fe;
}

/* Meta count Case Study */
.tdc-meta-count--cs {
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 35%, transparent);
  color: #7c3aed;
}
body.dark .tdc-meta-count--cs { color: #ddd6fe; }

/* ── TdC R5 — Vue Kanban Activations ──────────────────────────────────── */
.tdc-kb-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 16px 8px;
}
.tdc-kb-hint {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.tdc-kb-toggle-empty {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  background: var(--surface, #ffffff);
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.tdc-kb-toggle-empty:hover {
  color: var(--text, #111827);
  border-color: var(--text, #111827);
}
.tdc-kb-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 16px 16px;
  scroll-snap-type: x proximity;
}
.tdc-kb-board.hide-empty .tdc-kb-col.is-empty { display: none; }
.tdc-kb-col {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 6%, transparent);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  max-height: 70vh;
}
.tdc-kb-col.is-empty { opacity: 0.65; }
/* 2026-06-02 — Colonne « Terminé » en bout de Kanban Activations (teinte verte) */
.tdc-kb-col--done {
  background: color-mix(in srgb, var(--success, #10b981) 7%, transparent);
  border-color: color-mix(in srgb, var(--success, #10b981) 30%, var(--border, #e5e7eb));
}
.tdc-kb-col--done .tdc-kb-col-head { color: var(--success, #10b981); }
.tdc-kb-col--done .tdc-kb-col-icon { color: var(--success, #10b981); }
.tdc-kb-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #ffffff);
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12.5px;
}
.tdc-kb-col-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--primary, #0043ff);
}
.tdc-kb-col-icon svg { display: inline-block; vertical-align: middle; }
.tdc-kb-col-name {
  flex: 1;
  font-weight: 600;
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdc-kb-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 18%, transparent);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tdc-kb-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tdc-kb-empty {
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
  text-align: center;
  padding: 14px 8px;
  opacity: 0.5;
  font-style: italic;
}
.tdc-kb-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  outline: none;
}
.tdc-kb-card:hover,
.tdc-kb-card:focus-visible {
  border-color: var(--primary, #0043ff);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tdc-kb-card-client {
  font-size: 10.5px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdc-kb-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #111827);
  line-height: 1.3;
  word-break: break-word;
}
.tdc-kb-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.tdc-kb-month {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.tdc-kb-month svg { display: inline-block; vertical-align: middle; }
.tdc-kb-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.tdc-kb-pill.tdc-stagn--critical {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  border-color: color-mix(in srgb, #dc2626 45%, transparent);
  color: #dc2626;
}
.tdc-kb-pill.tdc-stagn--standard {
  background: color-mix(in srgb, #f97316 14%, transparent);
  border-color: color-mix(in srgb, #f97316 45%, transparent);
  color: #c2410c;
}
.tdc-kb-pill.tdc-stagn--warn {
  background: color-mix(in srgb, #eab308 16%, transparent);
  border-color: color-mix(in srgb, #eab308 45%, transparent);
  color: #a16207;
}
.tdc-kb-pill.tdc-stagn--noval {
  background: color-mix(in srgb, #6366f1 14%, transparent);
  border-color: color-mix(in srgb, #6366f1 45%, transparent);
  color: #4f46e5;
}
.tdc-kb-pill--cs {
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 45%, transparent);
  color: #7c3aed;
}
body.dark .tdc-kb-pill.tdc-stagn--critical { color: #fca5a5; }
body.dark .tdc-kb-pill.tdc-stagn--standard { color: #fdba74; }
body.dark .tdc-kb-pill.tdc-stagn--warn     { color: #fde047; }
body.dark .tdc-kb-pill.tdc-stagn--noval    { color: #c7d2fe; }
body.dark .tdc-kb-pill--cs                 { color: #ddd6fe; }
.tdc-kb-card-progress {
  height: 4px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 18%, transparent);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.tdc-kb-card-progress-bar {
  height: 100%;
  background: var(--primary, #0043ff);
  transition: width 0.3s ease;
}
/* Liseré gauche pour scan rapide d'urgence (cohérent avec list view) */
.tdc-kb-card--critical { border-left: 3px solid #dc2626; padding-left: 9px; }
.tdc-kb-card--standard { border-left: 3px solid #f97316; padding-left: 9px; }
.tdc-kb-card--warn     { border-left: 3px solid #eab308; padding-left: 9px; }
.tdc-kb-card--noval    { border-left: 3px solid #6366f1; padding-left: 9px; }

body.dark .tdc-kb-col {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
body.dark .tdc-kb-col-head {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark .tdc-kb-col-name { color: #f3f4f6; }
body.dark .tdc-kb-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
body.dark .tdc-kb-card:hover,
body.dark .tdc-kb-card:focus-visible { border-color: rgba(99,102,241,0.55); }
body.dark .tdc-kb-card-title { color: #f3f4f6; }
body.dark .tdc-kb-toggle-empty {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: #9ca3af;
}
body.dark .tdc-kb-toggle-empty:hover { color: #f3f4f6; border-color: #f3f4f6; }

/* ── TdC V5 — Skeleton loader ───────────────────────────────────────────── */
.tdc-months.tdc-skel { padding: 8px 0; }
.tdc-skel-month {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin: 0 0 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #ffffff);
}
.tdc-skel-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text-muted, #9ca3af) 12%, transparent) 0%,
    color-mix(in srgb, var(--text-muted, #9ca3af) 22%, transparent) 50%,
    color-mix(in srgb, var(--text-muted, #9ca3af) 12%, transparent) 100%);
  background-size: 200% 100%;
  animation: tdc-skel-shimmer 1.4s ease-in-out infinite;
}
.tdc-skel-bar--head { width: 40%; height: 16px; }
.tdc-skel-bar--row  { width: 100%; height: 24px; }
@keyframes tdc-skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.dark .tdc-skel-month { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); }


/* ── V5 — Jauge de charge dans l'en-tête du calendrier To Do ──────────────── */
.todo-gauge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  user-select: none;
  cursor: help;
}
.todo-gauge-bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.todo-gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 3px;
  transition: width .25s ease;
  background: var(--todo-gauge-color, #94a3b8);
}
.todo-gauge-over {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg,
    rgba(220, 38, 38, .85) 0,
    rgba(220, 38, 38, .85) 3px,
    rgba(127, 29, 29, .85) 3px,
    rgba(127, 29, 29, .85) 6px);
  z-index: 1;
}
.todo-gauge-target {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--text);
  opacity: .55;
  pointer-events: none;
  z-index: 2;
}
.todo-gauge-pct {
  flex: 0 0 auto;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--todo-gauge-color, var(--text-muted));
}
/* Niveaux d'alerte (mêmes seuils que Plan de lissage) */
.todo-gauge--gray   { --todo-gauge-color: #94a3b8; }
.todo-gauge--blue   { --todo-gauge-color: #3b82f6; }
.todo-gauge--teal   { --todo-gauge-color: #0ea5e9; }
.todo-gauge--green  { --todo-gauge-color: #22c55e; }
.todo-gauge--yellow { --todo-gauge-color: #eab308; }
.todo-gauge--orange { --todo-gauge-color: #f97316; }
.todo-gauge--red    { --todo-gauge-color: #ef4444; }

/* Gauge dans les en-têtes de colonnes (vue semaine) — plus compacte */
#calWeekHeaders .cal-week-day-header .todo-gauge {
  margin-top: 2px;
  font-size: 9.5px;
  gap: 4px;
}
#calWeekHeaders .cal-week-day-header .todo-gauge-bar { height: 5px; }
#calWeekHeaders .cal-week-day-header .todo-gauge-pct { min-width: 24px; }

/* Gauge en vue jour — bandeau juste sous la barre de navigation */
.todo-gauge-day-wrap {
  padding: 4px 12px 6px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.todo-gauge-day-wrap .todo-gauge {
  margin-top: 0;
  font-size: 11px;
}
.todo-gauge-day-wrap .todo-gauge-bar { height: 7px; }
.todo-gauge-day-wrap .todo-gauge-pct { min-width: 36px; }

/* Dark mode tweaks */
body.dark .todo-gauge-bar       { background: color-mix(in srgb, var(--muted) 25%, transparent); }
body.dark .todo-gauge-day-wrap  { background: color-mix(in srgb, var(--surface) 55%, transparent); }




/* ═══════════════════════════════════════════════════════════════════════════
 * V6.7.107 — Modales in-app (Modals.confirm/choice/prompt/alert)
 * Remplace les confirm()/alert()/prompt() natifs du navigateur.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tf-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
  opacity: 0;
  transition: opacity .15s ease;
}
.tf-modal-overlay--show { opacity: 1; }
.tf-modal-overlay--leaving { opacity: 0; }

.tf-modal {
  background: var(--surface, #fff);
  color: var(--text, #111);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  width: 440px; max-width: 92vw;
  padding: 22px 24px 18px;
  font-size: 14px;
  transform: scale(0.96);
  transition: transform .15s ease;
}
.tf-modal-overlay--show .tf-modal { transform: scale(1); }

.tf-modal-title {
  font-size: 16px; font-weight: 600;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.tf-modal-icon { font-size: 20px; line-height: 1; }
.tf-modal-message {
  color: var(--muted, #4b5563);
  line-height: 1.5;
  margin-bottom: 18px;
}
.tf-modal-label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--muted, #6b7280); margin-bottom: 6px;
}
.tf-modal-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  font-size: 14px;
  margin-bottom: 18px;
}
.tf-modal-input:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.tf-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
}
.tf-modal-footer--single { justify-content: center; }

.tf-modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
/* V6.7.347 — Boutons modal : utiliser --primary (bleu TF, stable cross-mode)
   pour le primary, et --subtle + --text (dark-aware) pour secondary. Avant :
   --accent (= #f0f0f0 en dark) → fond presque blanc + texte blanc = invisible. */
.tf-modal-btn--primary {
  background: var(--primary, #0043ff);
  color: #fff;
}
.tf-modal-btn--primary:hover { background: color-mix(in srgb, var(--primary, #0043ff) 88%, black); }
.tf-modal-btn--danger {
  background: #ef4444;
  color: #fff;
}
.tf-modal-btn--danger:hover { background: #dc2626; }
.tf-modal-btn--secondary {
  background: var(--subtle, #f3f4f6);
  color: var(--text, #111);
  border-color: var(--border, #d1d5db);
}
.tf-modal-btn--secondary:hover { background: var(--border, #e5e7eb); }
.tf-modal-btn--ghost {
  background: transparent;
  color: var(--muted, #6b7280);
  border-color: var(--border, #d1d5db);
}
.tf-modal-btn--ghost:hover { background: var(--subtle, #f3f4f6); color: var(--text, #111); }

/* ── Home V2 (Release 5) — Modale popup d'inactivité ── */
.tf-modal--idle { width: 460px; }
.tf-modal-idle-head { margin-bottom: 14px; }
.tf-modal-idle-sub { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 4px; line-height: 1.45; }
.tf-modal-idle-body { margin-bottom: 18px; }
/* La card affichée dans la modale est une preview — non cliquable (l'action passe par « Voir → ») */
.home-idle-card-wrap .home-card { pointer-events: none; width: 100%; cursor: default; }

/* Choix multi-options */
.tf-modal--choice { width: 520px; }
.tf-modal-choices {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.tf-modal-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .05s;
  color: var(--text, #111);
}
.tf-modal-choice:hover {
  border-color: var(--accent, #3b82f6);
  background: rgba(59,130,246,0.04);
}
.tf-modal-choice:active { transform: scale(0.98); }
.tf-modal-choice-icon { font-size: 20px; flex-shrink: 0; }
.tf-modal-choice-label { font-weight: 500; flex: 1; }
.tf-modal-choice-hint {
  font-size: 11px; color: var(--muted, #6b7280);
  font-weight: 400;
}
.tf-modal-choice--danger:hover {
  border-color: #ef4444;
  background: rgba(239,68,68,0.06);
}
.tf-modal-choice--warn:hover {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}

/* Dark mode */
/* V6.7.347 — App utilise [data-theme="dark"] sur <html>, pas body.dark. Les
   overrides body.dark étaient dead code. Doublure pour rétrocompat éventuelle. */
body.dark .tf-modal,
[data-theme="dark"] .tf-modal { background: var(--surface, #1f2937); }
body.dark .tf-modal-btn--secondary,
[data-theme="dark"] .tf-modal-btn--secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: var(--text, #e5e7eb);
}
body.dark .tf-modal-btn--secondary:hover,
[data-theme="dark"] .tf-modal-btn--secondary:hover { background: rgba(255,255,255,0.14); }
body.dark .tf-modal-choice,
[data-theme="dark"] .tf-modal-choice { background: rgba(255,255,255,0.03); }
body.dark .tf-modal-choice:hover,
[data-theme="dark"] .tf-modal-choice:hover { background: rgba(59,130,246,0.10); }

/* ════════════════════════════════════════════════════════════
 * ROADMAP (V6.7.147)
 * Onglet plein écran : Timeline verticale OU Matrice impact/effort.
 * ════════════════════════════════════════════════════════════ */

#panelRoadmap { padding: 20px 28px 80px; max-width: 1400px; margin: 0 auto; }
.roadmap-wrap { width: 100%; }

/* ── Header ─────────────────────────────────────────────── */
.roadmap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.roadmap-header-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.roadmap-header-title h1 {
  margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text);
}
.roadmap-header-title svg { color: var(--primary); flex-shrink: 0; }
.roadmap-subtitle {
  font-size: 13px; color: var(--muted); margin-left: 4px;
  line-height: 1.3;
}
.roadmap-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bandeau sticky : view switch + filtres collent au top au scroll */
.roadmap-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  margin: 0 -28px 14px;
  padding: 12px 28px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
/* Ombre subtile quand la barre est "stuck" (un peu au-dessus de top:0) */
.roadmap-sticky::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: transparent;
}
/* Pseudo de fin pour rendre la transition vers le contenu plus propre */
.roadmap-sticky::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
}

/* Wrapper centré pour le switch Timeline/Matrice (V6.7.153) */
.roadmap-view-switch-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.roadmap-view-switch {
  display: inline-flex;
  background: var(--subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.roadmap-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  background: transparent; border: none; border-radius: 6px;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.roadmap-view-btn:hover { color: var(--text); }
.roadmap-view-btn.is-active {
  background: var(--card); color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Variante "big" : taille double, plus visible. */
.roadmap-view-switch--big {
  padding: 5px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.roadmap-view-switch--big .roadmap-view-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  gap: 8px;
}
.roadmap-view-switch--big .roadmap-view-btn.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(0,67,255,0.12);
}
.roadmap-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  background: var(--primary); color: white;
  border: none; border-radius: 8px; cursor: pointer;
  transition: filter .15s;
}
.roadmap-add-btn:hover { filter: brightness(1.1); }

/* ── Filtres ───────────────────────────────────────────── */
.roadmap-filters {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
/* Mode rétracté : toute la zone est cliquable pour expand */
.roadmap-filters.is-collapsed {
  display: flex; align-items: center; gap: 0;
  padding: 4px 6px 4px 4px;
  cursor: pointer;
  transition: background .12s;
}
.roadmap-filters.is-collapsed:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
/* Mode ouvert : layout flex column avec toggle + sections */
.roadmap-filters.is-open {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 14px 12px;
}
.roadmap-filters-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.roadmap-filters.is-collapsed .roadmap-filters-toggle { flex: 1; justify-content: flex-start; }
.roadmap-filters.is-open      .roadmap-filters-toggle { align-self: flex-start; margin: -2px 0 -4px -4px; }
.roadmap-filters-toggle:hover { background: var(--subtle); color: var(--text); }
.roadmap-filters-toggle svg { flex-shrink: 0; }
.roadmap-filters-toggle svg:last-child {
  margin-left: 4px;
  opacity: 0.6;
  transition: transform .15s;
}
.roadmap-filters-summary { display: inline-flex; gap: 6px; margin-left: 4px; }
.roadmap-filters-tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-radius: 999px;
}
.roadmap-filters-count {
  margin-left: auto;
  font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 0 4px;
}
.roadmap-filters-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
  cursor: pointer; transition: all .15s;
  margin-right: 2px;
}
.roadmap-filters-clear:hover {
  border-color: var(--error); color: var(--error); background: var(--error-bg);
}

/* V6.7.161 — Header row (toggle + actions) en mode ouvert */
.roadmap-filters-hd {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 4px 6px 6px;
  margin: -4px -6px -2px;
  border-radius: 6px;
}
.roadmap-filters-hd:hover { background: var(--subtle); }
.roadmap-filters-hd > .roadmap-filters-toggle { margin: 0; pointer-events: none; }

/* Actions (search + PDF + activité + add) à droite dans la sticky bar */
.roadmap-filters-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  cursor: default;
}
.roadmap-filters.is-open .roadmap-filters-actions { margin-left: auto; }

/* Search input compact */
.roadmap-search-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  background: var(--subtle);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color .15s, background .15s;
  width: 180px;
}
.roadmap-search-wrap:focus-within {
  border-color: var(--primary);
  background: var(--card);
}
.roadmap-search-wrap svg { color: var(--muted); flex-shrink: 0; }
.roadmap-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  min-width: 0;
}
.roadmap-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--muted); color: var(--card);
  border: none; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  font-size: 10px;
}
.roadmap-search-clear:hover { background: var(--text); }

/* V6.7.161 — Row status tabs + author filter */
.roadmap-status-author-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.roadmap-author-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  margin-left: auto;
}
.roadmap-author-filter-label { font-weight: 600; }
.roadmap-author-filter select {
  padding: 4px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.roadmap-author-filter select:focus { outline: none; border-color: var(--primary); }

/* V6.7.161 — Dépendances dans la modal d'édition */
.roadmap-deps-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 30px;
}
.roadmap-deps-empty {
  font-size: 11px; color: var(--muted); font-style: italic;
  align-self: center;
}
.roadmap-dep-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: 999px;
}
.roadmap-dep-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: transparent; color: inherit;
  border: none; border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
}
.roadmap-dep-remove:hover { background: rgba(255,255,255,0.4); opacity: 1; }
.roadmap-dep-add-select {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 12px; color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}

/* Affichage des dépendances sur la carte */
.roadmap-card-deps {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--muted);
  border-radius: 6px;
  border-left: 2px solid var(--primary);
}
.roadmap-card-deps svg { color: var(--primary); flex-shrink: 0; }
.roadmap-card-deps-label { color: var(--text); font-weight: 600; }
.roadmap-card-dep-link {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.roadmap-card-dep-link:hover { text-decoration-style: solid; }

/* V6.7.161 — Activity drawer */
.roadmap-activity-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1990;
  animation: roadmap-fade-in .15s;
}
.roadmap-activity-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 92vw;
  background: var(--card);
  z-index: 2000;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  animation: roadmap-drawer-in .2s ease-out;
}
@keyframes roadmap-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.roadmap-activity-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.roadmap-activity-hd h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
}
.roadmap-activity-hd h3 svg { color: var(--primary); }
.roadmap-activity-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--muted);
  border-radius: 6px; cursor: pointer;
}
.roadmap-activity-close:hover { background: var(--subtle); color: var(--text); }
.roadmap-activity-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.roadmap-activity-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 20px; color: var(--muted); font-size: 13px;
  justify-content: center;
}
.roadmap-activity-list {
  list-style: none; margin: 0; padding: 0;
}
.roadmap-activity-item {
  display: flex; gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.roadmap-activity-item:hover { background: var(--subtle); }
.roadmap-activity-icon {
  font-size: 16px; line-height: 1;
  width: 24px; text-align: center; flex-shrink: 0;
  margin-top: 1px;
}
.roadmap-activity-content { flex: 1; min-width: 0; }
.roadmap-activity-line {
  font-size: 13px; line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}
.roadmap-activity-card {
  background: transparent; border: none;
  color: var(--primary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.roadmap-activity-card:hover { text-decoration-style: solid; }
.roadmap-activity-time {
  margin-top: 2px;
  font-size: 11px; color: var(--muted);
}

/* Dark mode */
[data-theme="dark"] .roadmap-search-wrap { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .roadmap-search-wrap:focus-within { background: var(--card); }
[data-theme="dark"] .roadmap-author-filter select { background: var(--card); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .roadmap-card-deps { background: color-mix(in srgb, var(--primary) 14%, transparent); }
[data-theme="dark"] .roadmap-filters-hd:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .roadmap-activity-drawer { background: var(--card); }
[data-theme="dark"] .roadmap-activity-item:hover { background: rgba(255,255,255,0.04); }
.roadmap-filter-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.roadmap-scope-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roadmap-scope-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: all .15s;
}
.roadmap-scope-chip:hover { border-color: var(--scope-color, var(--primary)); color: var(--text); }
.roadmap-scope-chip.is-on {
  background: color-mix(in srgb, var(--scope-color, var(--primary)) 18%, transparent);
  border-color: var(--scope-color, var(--primary));
  color: var(--scope-color, var(--primary));
}
.roadmap-scope-clear {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: transparent; color: var(--primary);
  border: 1px dashed var(--primary); border-radius: 999px;
  cursor: pointer;
}

/* Wrapper chip + bouton de gestion (kebab, admin only) */
.roadmap-scope-chip-wrap {
  position: relative;
  display: inline-flex; align-items: center;
}
.roadmap-scope-manage {
  position: absolute;
  top: 50%; right: -1px;
  transform: translate(50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s;
  z-index: 2;
}
.roadmap-scope-chip-wrap:hover .roadmap-scope-manage { opacity: 1; }
.roadmap-scope-manage:hover { color: var(--text); border-color: var(--text); }

.roadmap-scope-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.roadmap-scope-add:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Badge "En cours" sur la carte la plus haute */
.roadmap-card.is-current {
  border-color: #fca5a5;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}
.roadmap-card-current-badge {
  position: absolute;
  top: -10px; right: 12px;
  padding: 2px 9px;
  font-size: 10px; font-weight: 700;
  background: #ef4444;
  color: white;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(239,68,68,0.3);
  z-index: 2;
}

/* Score ICE pill — V6.7.158
   Affiché dans le header de chaque carte, à droite du titre.
   Couleur selon tier : top (doré) > high (vert) > mid (bleu) > low (gris). */
.roadmap-card-score {
  display: inline-flex; align-items: center;
  margin-left: auto;
  padding: 2px 9px;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.roadmap-card-score--top  { background: rgba(245,158,11,0.15); color: #b45309; }
.roadmap-card-score--high { background: rgba(34,197,94,0.15);  color: #15803d; }
.roadmap-card-score--mid  { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.roadmap-card-score--low  { background: rgba(148,163,184,0.15); color: var(--muted); }

[data-theme="dark"] .roadmap-card-score--top  { color: #fbbf24; }
[data-theme="dark"] .roadmap-card-score--high { color: #4ade80; }
[data-theme="dark"] .roadmap-card-score--low  { color: #cbd5e1; }

/* Row titre + score pour le popover matrice */
.roadmap-pop-title-row {
  display: flex; align-items: flex-start; gap: 8px;
}
.roadmap-pop-title-row .roadmap-pop-title { flex: 1; }
.roadmap-pop-title-row .roadmap-card-score { margin-left: 0; }

.roadmap-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.roadmap-status-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: none; border-radius: 6px; cursor: pointer;
  transition: all .15s;
}
.roadmap-status-tab:hover { background: var(--subtle); color: var(--text); }
.roadmap-status-tab.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.roadmap-status-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 600;
  background: var(--subtle); color: var(--muted); border-radius: 9px;
}
.roadmap-status-tab.is-active .roadmap-status-count {
  background: var(--primary); color: white;
}

/* ── Sections ──────────────────────────────────────────── */
.roadmap-section { margin-bottom: 28px; }
.roadmap-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.roadmap-section-title svg { color: var(--primary); }
.roadmap-section-hint {
  margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted);
  font-style: italic;
}
.roadmap-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 600;
  background: var(--primary); color: white; border-radius: 10px;
}
.roadmap-section-inbox .roadmap-section-title { color: #c2410c; }
.roadmap-section-inbox .roadmap-section-title svg { color: #ea580c; }
.roadmap-section-inbox .roadmap-section-count { background: #ea580c; }

.roadmap-section-body { display: flex; flex-direction: column; gap: 10px; }
.roadmap-timeline-list { gap: 10px; }

/* ── Timeline en zigzag : axe vertical central, cards alternées G/D ── */
.roadmap-tl-stem {
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  padding: 8px 0;
}
.roadmap-tl-row {
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  align-items: center;
  position: relative;
}
.roadmap-tl-slot {
  display: flex;
  min-height: 1px; /* Garde la grille stable même quand vide */
}
.roadmap-tl-slot-left  { justify-content: flex-end;   padding-right: 4px; }
.roadmap-tl-slot-right { justify-content: flex-start; padding-left:  4px; }
.roadmap-tl-slot > .roadmap-card {
  flex: 1;
  max-width: 540px;
}
.roadmap-tl-axis {
  position: relative;
  height: 100%;
  min-height: 60px;
}
/* L'axe vertical : barre fine continue du haut au bas de la row. */
.roadmap-tl-axis::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: var(--border);
  border-radius: 2px;
}
/* Connecteur horizontal : ligne fine du dot vers le bord du slot où la card vit. */
.roadmap-tl-row[data-side="left"]  .roadmap-tl-axis::after,
.roadmap-tl-row[data-side="right"] .roadmap-tl-axis::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}
.roadmap-tl-row[data-side="left"]  .roadmap-tl-axis::after { left: 0;   right: 50%; }
.roadmap-tl-row[data-side="right"] .roadmap-tl-axis::after { left: 50%; right: 0;   }
/* Le dot. Coloré par scope (--dot-color), ring autour pour effet "perlé". */
.roadmap-tl-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: var(--primary);
  border-radius: 50%;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--primary), 0 2px 6px rgba(0,0,0,0.12);
  z-index: 3;
  transition: transform .15s;
}
.roadmap-tl-row:hover .roadmap-tl-dot { transform: translate(-50%, -50%) scale(1.2); }
/* Dot "en cours" (le plus haut de la timeline) : rouge + pulse */
.roadmap-tl-dot.is-current {
  width: 20px; height: 20px;
  background: #ef4444;
  box-shadow: 0 0 0 3px #ef4444, 0 4px 10px rgba(239,68,68,0.35);
  z-index: 4;
}
.roadmap-tl-dot.is-current::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: #ef4444;
  opacity: 0.35;
  animation: roadmap-current-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes roadmap-current-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Indicateur de drop : barre bleue propre sur toute la largeur de la row. */
.roadmap-tl-row.drop-before::before,
.roadmap-tl-row.drop-after::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
  animation: roadmap-drop-pulse .25s ease-out;
}
.roadmap-tl-row.drop-before::before { top: -4px; }
.roadmap-tl-row.drop-after::before  { bottom: -4px; }

/* La row pendant le drag : opacité réduite, plus de hover sur dot. */
.roadmap-tl-row.is-dragging-row .roadmap-tl-dot { opacity: 0.3; }

/* Responsive : sur petits écrans, axe à gauche, cards toutes à droite. */
@media (max-width: 900px) {
  .roadmap-tl-row { grid-template-columns: 40px 1fr; }
  .roadmap-tl-axis { grid-column: 1; }
  /* Le slot qui contient effectivement la card va en colonne 2 ;
     l'autre (vide) est planqué. Marche pour data-side="left" comme "right". */
  .roadmap-tl-row[data-side="left"]  .roadmap-tl-slot-left  { grid-column: 2; justify-content: flex-start; padding-right: 0; padding-left: 4px; }
  .roadmap-tl-row[data-side="left"]  .roadmap-tl-slot-right { display: none; }
  .roadmap-tl-row[data-side="right"] .roadmap-tl-slot-right { grid-column: 2; }
  .roadmap-tl-row[data-side="right"] .roadmap-tl-slot-left  { display: none; }
  .roadmap-tl-row[data-side="left"]  .roadmap-tl-axis::after,
  .roadmap-tl-row[data-side="right"] .roadmap-tl-axis::after {
    left: 50%; right: -4px;
  }
}
.roadmap-backlog-grid, .roadmap-done-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.roadmap-empty {
  padding: 20px; text-align: center;
  color: var(--muted); font-size: 13px;
  background: var(--subtle); border-radius: 8px;
  border: 1px dashed var(--border);
}

/* ── Card ──────────────────────────────────────────────── */
.roadmap-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.roadmap-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,67,255,0.08);
  transform: translateY(-1px);
}
.roadmap-card.is-dragging {
  opacity: 0.35;
  transform: scale(0.98);
  transition: opacity .12s, transform .12s;
}
/* Drop indicators — barre bleue propre entre les cards, sans saut de layout */
.roadmap-card.drop-before::before,
.roadmap-card.drop-after::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
  animation: roadmap-drop-pulse .25s ease-out;
}
.roadmap-card.drop-before::before { top: -6px; }
.roadmap-card.drop-after::before  { bottom: -6px; }
@keyframes roadmap-drop-pulse {
  from { opacity: 0; transform: scaleX(0.6); }
  to   { opacity: 1; transform: scaleX(1); }
}

.roadmap-card-inbox {
  background: color-mix(in srgb, #ea580c 4%, var(--card));
  border-color: #fed7aa;
}
.roadmap-card-done {
  opacity: 0.7;
  background: color-mix(in srgb, var(--success) 3%, var(--card));
}
.roadmap-card-done .roadmap-card-title { text-decoration: line-through; color: var(--muted); }
.roadmap-card.is-overdue { border-color: #fca5a5; }

.roadmap-card-hd { display: flex; align-items: center; gap: 8px; }
.roadmap-card-handle {
  cursor: grab; color: var(--muted); display: flex; align-items: center;
  margin-left: -4px;
}
.roadmap-card-handle:active { cursor: grabbing; }
.roadmap-card-title {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  flex: 1; line-height: 1.3;
}
.roadmap-card-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.roadmap-card-accept { color: var(--success); }
.roadmap-card-accept:hover { background: var(--success-bg); border-color: var(--success); }
.roadmap-card-reject { color: var(--error); }
.roadmap-card-reject:hover { background: var(--error-bg); border-color: var(--error); }

.roadmap-card-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.roadmap-card-scope {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, var(--scope-color) 15%, transparent);
  color: var(--scope-color);
  border-radius: 999px;
  line-height: 1.4;
}

.roadmap-card-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
/* Stats Impact / Effort / Priorité — labels complets + barres colorées */
.roadmap-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 6px;
  background: var(--subtle);
  border-radius: 6px;
}
.roadmap-stat-label {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.roadmap-stat-bar {
  width: 42px; height: 5px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.roadmap-stat-bar-fill { display: block; height: 100%; border-radius: 3px; }
.roadmap-stat-val { font-weight: 700; color: var(--text); font-size: 11px; }
.roadmap-stat-max { font-weight: 400; color: var(--muted); font-size: 10px; }
.roadmap-stat-stars {
  color: #f59e0b;
  letter-spacing: 1.5px;
  font-size: 12px;
  line-height: 1;
}
/* Couleurs distinctes par stat */
.roadmap-stat--impact   .roadmap-stat-bar-fill { background: var(--primary); }
.roadmap-stat--impact   .roadmap-stat-label    { color: var(--primary); }
.roadmap-stat--effort   .roadmap-stat-bar-fill { background: #f59e0b; }
.roadmap-stat--effort   .roadmap-stat-label    { color: #d97706; }
.roadmap-stat--priority .roadmap-stat-label    { color: #d97706; }
.roadmap-card-due {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px;
  background: var(--subtle); border-radius: 4px;
}
.roadmap-card-due.is-overdue { background: #fee2e2; color: #b91c1c; font-weight: 600; }
/* Footer de la carte : hint description + comment button alignés */
.roadmap-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px;
}
.roadmap-card-desc-hint {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: 11px; font-style: italic;
  color: var(--muted);
  background: var(--subtle);
  border-radius: 6px;
  transition: all .15s;
}
.roadmap-card:hover .roadmap-card-desc-hint {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--subtle));
}
.roadmap-card-desc-hint svg { flex-shrink: 0; }

/* ── Comment button (dans le footer, plus en absolute) ─── */
.roadmap-card-comment-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font-size: 11px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.roadmap-card-comment-btn:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}
.roadmap-card-comment-btn svg { flex-shrink: 0; }
.roadmap-card-comment-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--primary); color: white;
  border-radius: 7px;
}
.roadmap-card.is-quick-comment .roadmap-card-comment-btn {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}

/* Inline quick-comment form (collapsed by default, expand quand .is-quick-comment) */
.roadmap-quick-comment {
  display: none;
  flex-direction: column; gap: 6px;
  margin-top: 6px;
  padding: 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--subtle));
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
  animation: roadmap-quick-in .18s ease-out;
}
.roadmap-card.is-quick-comment .roadmap-quick-comment { display: flex; }
@keyframes roadmap-quick-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.roadmap-quick-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px; font-family: inherit;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  min-height: 50px;
}
.roadmap-quick-input:focus { outline: none; border-color: var(--primary); }
.roadmap-quick-actions {
  display: flex; justify-content: flex-end; gap: 6px;
}
.roadmap-quick-cancel,
.roadmap-quick-send {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 500;
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
}
.roadmap-quick-cancel { background: transparent; color: var(--muted); }
.roadmap-quick-cancel:hover { color: var(--text); border-color: var(--text); }
.roadmap-quick-send {
  background: var(--primary); color: white; border-color: var(--primary);
}
.roadmap-quick-send:hover:not([disabled]) { filter: brightness(1.1); }
.roadmap-quick-send[disabled] { opacity: 0.5; cursor: wait; }

.roadmap-card-subs {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px; padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.roadmap-sub-card {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-size: 12px; color: var(--muted);
  background: var(--subtle); border-radius: 6px;
  cursor: pointer; transition: background .15s;
}
.roadmap-sub-card:hover { background: color-mix(in srgb, var(--primary) 10%, var(--subtle)); }
.roadmap-sub-card strong { color: var(--text); }
.roadmap-sub-due { margin-left: auto; font-size: 10px; }

/* ── Matrice impact/effort ─────────────────────────────── */
.roadmap-matrix {
  position: relative;
  padding: 40px 40px 30px 50px;
}
.roadmap-matrix-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
}
.roadmap-matrix-quadrant {
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 12px;
  font-size: 11px; color: var(--muted);
  border-right: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  pointer-events: none;
  text-align: left;
}
.roadmap-matrix-quadrant span { line-height: 1.4; font-weight: 600; opacity: 0.5; }
.roadmap-matrix-quadrant em { font-style: italic; font-weight: 400; font-size: 10px; }
.roadmap-matrix-q-tr { border-right: none; }
.roadmap-matrix-q-bl { border-bottom: none; }
.roadmap-matrix-q-br { border-right: none; border-bottom: none; }
.roadmap-matrix-q-tr span, .roadmap-matrix-q-br span { color: var(--primary); opacity: 0.8; }

.roadmap-matrix-axis-x {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--muted);
}
/* V6.7.159 — Axe Y en vertical-rl plutôt que rotate(-90deg).
   Avec rotate(-90deg), un « ↓ » devenait visuellement « → » (= flèche
   pointant à droite, contradictoire). writing-mode garde l'orientation
   des caractères : « ↓ » reste un ↓ visuellement. */
.roadmap-matrix-axis-y {
  position: absolute; top: 50%; left: 10px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px; font-weight: 600; color: var(--muted);
}

.roadmap-dot {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.roadmap-dot-pin {
  display: block;
  width: var(--dot-size, 14px); height: var(--dot-size, 14px);
  background: var(--dot-color, var(--primary));
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .15s, box-shadow .15s;
}
.roadmap-dot:hover { z-index: 8; }
.roadmap-dot:hover .roadmap-dot-pin {
  transform: scale(1.35);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* Label permanent sous le point (ou au-dessus pour priorité haute). */
.roadmap-dot-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
  padding: 1px 6px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font-size: 10.5px; font-weight: 500;
  line-height: 1.4;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}
.roadmap-dot-name.is-above {
  top: auto;
  bottom: calc(100% + 4px);
}
.roadmap-dot:hover .roadmap-dot-name {
  background: var(--dot-color, var(--primary));
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

/* ── Popover hover sur les dots de la matrice ──────────── */
.roadmap-popover {
  position: fixed;
  z-index: 2500;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  padding: 14px 16px;
  pointer-events: auto;
  animation: roadmap-pop-in .14s ease-out;
}
@keyframes roadmap-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.roadmap-pop-card { display: flex; flex-direction: column; gap: 10px; }
.roadmap-pop-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.3;
}
.roadmap-pop-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.roadmap-pop-scope {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 10.5px; font-weight: 500;
  background: color-mix(in srgb, var(--scope-color) 15%, transparent);
  color: var(--scope-color);
  border-radius: 999px;
  line-height: 1.4;
}
.roadmap-pop-metrics { display: flex; flex-direction: column; gap: 5px; }
.roadmap-pop-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.roadmap-pop-label {
  width: 50px;
  color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 10px;
}
.roadmap-pop-bar {
  flex: 1;
  height: 6px;
  background: var(--subtle);
  border-radius: 3px;
  overflow: hidden;
}
.roadmap-pop-bar-fill {
  display: block; height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
.roadmap-pop-bar-fill--effort { background: #f59e0b; }
.roadmap-pop-priority {
  flex: 1; letter-spacing: 2px;
  color: #f59e0b; font-size: 11px;
}
.roadmap-pop-val {
  font-weight: 600; color: var(--text);
  min-width: 36px; text-align: right;
  font-size: 11px;
}
.roadmap-pop-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--subtle);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
}
.roadmap-pop-meta > span {
  display: inline-flex; align-items: center; gap: 4px;
}
.roadmap-pop-meta .is-overdue { color: #b91c1c; font-weight: 600; }
.roadmap-pop-status { margin-left: auto; font-weight: 600; color: var(--text); }
.roadmap-pop-desc {
  font-size: 12px; color: var(--text); line-height: 1.5;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  max-height: 120px; overflow: hidden;
}
.roadmap-pop-desc code {
  background: var(--subtle); padding: 1px 4px;
  border-radius: 3px; font-size: 11px;
}
.roadmap-pop-hint {
  margin-top: 4px;
  font-size: 10px; color: var(--muted);
  font-style: italic;
  text-align: right;
}

/* Variante popover "description" : plus large, fond doux, focus sur le texte */
.roadmap-popover--desc { width: 380px; max-width: 90vw; }
.roadmap-pop-desc-full {
  font-size: 13px; color: var(--text); line-height: 1.55;
  max-height: 360px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--subtle);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
  white-space: pre-wrap;
}
.roadmap-pop-desc-full code {
  background: var(--card); padding: 1px 5px;
  border-radius: 3px; font-size: 12px;
}

[data-theme="dark"] .roadmap-dot-name {
  background: rgba(30,30,30,0.92);
  color: var(--text);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .roadmap-popover {
  background: var(--card);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .roadmap-pop-meta { background: rgba(255,255,255,0.05); }

/* ── Bouton Export PDF (header roadmap) ────────────────── */
.roadmap-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.roadmap-export-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Print header (caché par défaut, visible uniquement en impression) */
.roadmap-print-header { display: none; }

/* ─────────────────────────────────────────────────────────
 * IMPRESSION / EXPORT PDF
 * Le user clique « PDF » → window.print() → l'utilisateur
 * choisit « Enregistrer en PDF » dans la boîte de dialogue.
 * On nettoie tout ce qui n'a pas de sens sur papier.
 * ───────────────────────────────────────────────────────── */
@media print {
  /* Reset général */
  body { background: white !important; }
  body.dark { color: black !important; }
  body.dark .roadmap-card { background: white !important; color: black !important; }
  body.dark .roadmap-card-title,
  body.dark .roadmap-stat-val { color: black !important; }

  /* Masquer toute la chrome de l'app */
  .header, .tab-nav, .header-actions,
  #panelTimeTracking, #panelProject, #panelTeamCal, #panelHome,
  #panelPtView, #panelTdc, #panelAccess, #panelMessages,
  #appLayout, #projViewSwitch, #todoViewBar,
  .feedback-fab, .feedback-panel,
  .roadmap-filters, .roadmap-view-switch-wrap,
  .roadmap-header-actions,
  .roadmap-section-inbox, .roadmap-section-backlog, .roadmap-section-done,
  .roadmap-card-comment-btn, .roadmap-card-handle, .roadmap-card-desc-hint,
  .roadmap-quick-comment, .roadmap-card-action,
  .roadmap-section-title svg,
  .roadmap-section-hint { display: none !important; }

  /* Header roadmap : sobre */
  .roadmap-header { display: none !important; }
  .roadmap-print-header {
    display: block !important;
    margin: 0 0 24px;
    padding: 0 0 12px;
    border-bottom: 2px solid #333;
  }
  .roadmap-print-header h1 { margin: 0; font-size: 24px; color: black; }
  .roadmap-print-header p { margin: 4px 0 0; color: #666; font-size: 12px; }

  /* Timeline : flat, lisible */
  #panelRoadmap { padding: 0 !important; max-width: none !important; }
  .roadmap-section-title { color: black !important; border-bottom-color: #333 !important; }

  /* Pas d'animation sur le dot "en cours" en print */
  .roadmap-tl-dot.is-current::after { display: none !important; }
  .roadmap-tl-dot.is-current {
    background: #ef4444 !important;
    box-shadow: 0 0 0 2px #ef4444 !important;
  }
  .roadmap-tl-dot {
    background: #0043ff !important;
    box-shadow: 0 0 0 2px #0043ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Cards : fond blanc, border net, pas d'ombre */
  .roadmap-card {
    background: white !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    color: black !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .roadmap-card.is-current {
    border-color: #ef4444 !important;
    border-width: 2px !important;
  }
  .roadmap-card-current-badge {
    background: #ef4444 !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .roadmap-card-title { color: black !important; }
  .roadmap-card-scope, .roadmap-stat {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .roadmap-tl-row { page-break-inside: avoid; break-inside: avoid; }

  /* Force impression des couleurs */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ── Modal édition / commentaires ──────────────────────── */
.roadmap-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  animation: roadmap-fade-in .2s;
}
@keyframes roadmap-fade-in { from { opacity: 0; } to { opacity: 1; } }

.roadmap-modal {
  position: relative;
  width: 100%; max-width: 720px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 32px 36px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.roadmap-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--muted); cursor: pointer;
  border-radius: 8px; transition: background .15s;
}
.roadmap-modal-close:hover { background: var(--subtle); color: var(--text); }

.roadmap-edit { display: flex; flex-direction: column; gap: 16px; }
.roadmap-edit-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  background: transparent; border: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  width: 100%;
  letter-spacing: -0.3px;
}
.roadmap-edit-title:focus {
  outline: none;
  border-bottom-color: var(--primary);
}
.roadmap-edit-row { display: flex; flex-direction: column; gap: 6px; }
.roadmap-edit-row-double { flex-direction: row; gap: 24px; }
.roadmap-edit-row-double > div { flex: 1; }
.roadmap-edit-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.roadmap-edit-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.roadmap-edit-scope {
  display: inline-flex; align-items: center;
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: all .15s;
}
.roadmap-edit-scope:hover { border-color: var(--scope-color); }
.roadmap-edit-scope.is-on {
  background: color-mix(in srgb, var(--scope-color) 20%, transparent);
  border-color: var(--scope-color);
  color: var(--scope-color);
}
.roadmap-edit-scope-add {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 8px; font-size: 12px;
  background: transparent;
  color: var(--primary);
  border: 1px dashed var(--primary); border-radius: 999px;
  cursor: pointer;
}
.roadmap-edit-slider {
  width: 100%;
  accent-color: var(--primary);
}
.roadmap-edit-date {
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-size: 13px;
}
.roadmap-edit-date:focus { outline: none; border-color: var(--primary); }
.roadmap-edit-desc {
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-size: 13px; line-height: 1.5;
  resize: vertical;
  font-family: inherit;
}
.roadmap-edit-desc:focus { outline: none; border-color: var(--primary); }
.roadmap-edit-status { display: flex; gap: 6px; flex-wrap: wrap; }
.roadmap-edit-status-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all .15s;
}
.roadmap-edit-status-btn:hover { border-color: var(--primary); color: var(--text); }
.roadmap-edit-status-btn.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}
.roadmap-edit-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.roadmap-edit-autosave {
  font-size: 12px; color: var(--muted); font-style: italic;
}
.roadmap-edit-delete {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: transparent;
  color: var(--error);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all .15s;
}
.roadmap-edit-delete:hover { border-color: var(--error); background: var(--error-bg); }

.roadmap-readonly { display: flex; flex-direction: column; gap: 14px; }
.roadmap-readonly-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text); }
.roadmap-readonly-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--muted);
  padding: 12px; background: var(--subtle); border-radius: 8px;
}
.roadmap-readonly-meta strong { color: var(--text); font-weight: 600; }
.roadmap-readonly-desc {
  font-size: 14px; color: var(--text); line-height: 1.6;
  padding: 12px;
  background: var(--subtle); border-radius: 8px;
}

/* ── Commentaires ──────────────────────────────────────── */
.roadmap-modal-comments {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.roadmap-comments-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.roadmap-comments-title svg { color: var(--primary); }
.roadmap-comments-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 600;
  background: var(--subtle); color: var(--muted); border-radius: 10px;
}
.roadmap-comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.roadmap-comment {
  padding: 10px 14px;
  background: var(--subtle); border-radius: 8px;
}
.roadmap-comment-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 4px;
}
.roadmap-comment-hd strong { color: var(--text); font-weight: 600; }
.roadmap-comment-date { color: var(--muted); }
.roadmap-comment-delete {
  margin-left: auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); border-radius: 4px;
}
.roadmap-comment-delete:hover { background: var(--error-bg); color: var(--error); }
.roadmap-comment-body {
  font-size: 13px; color: var(--text); line-height: 1.5;
  word-break: break-word;
}
.roadmap-comment-body code {
  background: var(--card); padding: 1px 5px;
  border-radius: 3px; font-size: 12px;
}
.roadmap-comment-form { display: flex; gap: 8px; align-items: stretch; }
.roadmap-comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font-size: 13px; font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.roadmap-comment-input:focus { outline: none; border-color: var(--primary); }
.roadmap-comment-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; font-size: 13px; font-weight: 600;
  background: var(--primary); color: white;
  border: none; border-radius: 8px; cursor: pointer;
  align-self: flex-end;
  height: 36px;
}
.roadmap-comment-send:hover { filter: brightness(1.1); }
.roadmap-comments-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 14px; color: var(--muted); font-size: 13px;
}
.roadmap-comments-loading svg { animation: roadmap-spin 1s linear infinite; }
@keyframes roadmap-spin { to { transform: rotate(360deg); } }

.roadmap-error {
  padding: 20px; text-align: center;
  background: var(--error-bg); color: var(--error);
  border-radius: 8px;
}

/* ── Badge "À valider" dans le menu avatar ─────────────── */
.avatar-menu-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 6px;
  font-size: 10px; font-weight: 700;
  background: #ea580c; color: white;
  border-radius: 9px;
}
/* L'attribut [hidden] doit gagner sur inline-flex (specificity match → !important pour être sûr) */
.avatar-menu-badge[hidden] { display: none !important; }

/* ── Dark mode ─────────────────────────────────────────── */
/* Sélecteur de dark mode = [data-theme="dark"] sur <html>, pas .dark sur body. */
[data-theme="dark"] .roadmap-card { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .roadmap-card:hover { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .roadmap-modal { background: var(--card); }
[data-theme="dark"] .roadmap-sub-card { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .roadmap-readonly-meta,
[data-theme="dark"] .roadmap-readonly-desc,
[data-theme="dark"] .roadmap-comment { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .roadmap-card-due { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .roadmap-status-count { background: rgba(255,255,255,0.08); }

/* Matrice dark mode — V6.7.162 : lignes blanches visibles (utilisateur a demandé) */
[data-theme="dark"] .roadmap-matrix-grid {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.22);   /* outer border bien marquée */
}
[data-theme="dark"] .roadmap-matrix-quadrant {
  border-color: rgba(255,255,255,0.18);   /* lignes intérieures visibles */
}
[data-theme="dark"] .roadmap-matrix-quadrant span {
  color: var(--text);                      /* uniformise tous les libellés en blanc */
  opacity: 0.75;
}
/* On vire l'accent bleu spécifique aux quadrants Quick wins / Gros chantiers
   en dark mode — l'inconsistance bleu/blanc faisait sale. */
[data-theme="dark"] .roadmap-matrix-q-tr span,
[data-theme="dark"] .roadmap-matrix-q-br span {
  color: var(--text);
  opacity: 0.85;                            /* un poil plus marqué pour signaler le "bon" quadrant */
}
[data-theme="dark"] .roadmap-matrix-axis-x,
[data-theme="dark"] .roadmap-matrix-axis-y {
  color: var(--text);
  opacity: 0.85;
}
[data-theme="dark"] .roadmap-dot { border-color: var(--card); }
[data-theme="dark"] .roadmap-tl-dot { border-color: var(--bg); }

/* Stats (impact/effort/priorité) en dark : fond légèrement contrasté */
[data-theme="dark"] .roadmap-stat {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .roadmap-stat-bar {
  background: rgba(255,255,255,0.08);
}

/* Filtres bar en dark */
[data-theme="dark"] .roadmap-filters.is-collapsed:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
[data-theme="dark"] .roadmap-status-tab:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .roadmap-status-tab.is-active {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* View switch big en dark */
[data-theme="dark"] .roadmap-view-switch--big {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .roadmap-view-switch--big .roadmap-view-btn.is-active {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Scope manage button en dark */
[data-theme="dark"] .roadmap-scope-manage {
  background: var(--bg);
  border-color: rgba(255,255,255,0.15);
}

/* Footer & quick comment en dark */
[data-theme="dark"] .roadmap-card-desc-hint { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .roadmap-card-comment-btn {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .roadmap-quick-comment {
  background: color-mix(in srgb, var(--primary) 8%, rgba(255,255,255,0.03));
}
[data-theme="dark"] .roadmap-quick-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════
 * V6.7.162 — Layout grid main + sidebar
 * Le body principal + le panneau Tâches de fond cohabitent en
 * grid. Le panneau est "sticky" dans la grille, sous la sticky bar.
 * ═══════════════════════════════════════════════════════════ */
.roadmap-main-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: flex-start;
}
.roadmap-main-grid > .roadmap-body {
  min-width: 0; /* permet à la timeline de rétrécir si besoin */
}

/* V6.7.160 / 162 — Side tasks panel (intégré dans la grid, sticky) */
.roadmap-side-tasks {
  position: sticky;
  /* Top calculé pour passer SOUS la sticky bar : view-switch (~50px)
     + filters-bar collapsed (~50px) + marges (~20px) = ~120px.
     On laisse 140px pour avoir un peu de gap visuel. Si filters ouverts,
     la sticky bar prend +100px et masquera juste le haut du sidebar
     (z:30 sticky > z:auto sidebar) — acceptable. */
  top: 140px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  z-index: 5;
}
.roadmap-side-tasks-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.roadmap-side-tasks.is-collapsed .roadmap-side-tasks-toggle {
  border-bottom: none;
}
.roadmap-side-tasks-ro {
  font-size: 10px; font-weight: 500;
  color: var(--muted);
  font-style: italic;
  margin-left: 4px;
}
.roadmap-side-task-bullet {
  display: inline-block;
  width: 14px; text-align: center;
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.roadmap-side-tasks.is-readonly .roadmap-side-task.is-done .roadmap-side-task-bullet {
  color: var(--success);
}
.roadmap-side-tasks-toggle:hover { background: var(--subtle); }
.roadmap-side-tasks-toggle svg { flex-shrink: 0; color: var(--primary); }
.roadmap-side-tasks-toggle svg:last-child { color: var(--muted); margin-left: auto; }
.roadmap-side-tasks-title { flex: 1; }
.roadmap-side-tasks-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 10px; font-weight: 700;
  background: var(--primary); color: white; border-radius: 9px;
}

.roadmap-side-tasks-body {
  display: flex; flex-direction: column;
  min-height: 0;
}
.roadmap-side-tasks-list {
  list-style: none;
  margin: 0; padding: 6px;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
}
.roadmap-side-tasks-empty {
  padding: 20px 12px; text-align: center;
  font-size: 12px; color: var(--muted); font-style: italic;
}
.roadmap-side-task {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  border-radius: 6px;
  transition: background .12s;
}
.roadmap-side-task:hover { background: var(--subtle); }
.roadmap-side-task.is-done .roadmap-side-task-title {
  text-decoration: line-through;
  color: var(--muted);
}
.roadmap-side-task-check {
  margin-top: 2px;
  width: 14px; height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.roadmap-side-task-title {
  flex: 1;
  color: var(--text);
  word-break: break-word;
  cursor: text;
  line-height: 1.4;
  padding: 1px 2px;
  border-radius: 3px;
  min-width: 0;
}
.roadmap-side-task-title:hover { background: rgba(0,0,0,0.04); }
.roadmap-side-task-title.is-editing {
  background: var(--card);
  outline: 1px solid var(--primary);
}
.roadmap-side-task-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: transparent;
  color: var(--muted);
  border: none; border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
  flex-shrink: 0;
}
.roadmap-side-task:hover .roadmap-side-task-del { opacity: 1; }
.roadmap-side-task-del:hover { background: var(--error-bg); color: var(--error); }

.roadmap-side-tasks-add {
  padding: 6px;
  border-top: 1px solid var(--border);
}
.roadmap-side-tasks-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
}
.roadmap-side-tasks-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--card);
}

/* Dark mode */
[data-theme="dark"] .roadmap-side-tasks { background: var(--card); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .roadmap-side-tasks-toggle:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .roadmap-side-task:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .roadmap-side-task-title:hover { background: rgba(255,255,255,0.05); }

/* Responsive : sur petits écrans (< 1100px), le sidebar passe SOUS le body
   (grid 1 colonne au lieu de 2). Le sticky retombe à top:auto pour ne pas
   bloquer le scroll. */
@media (max-width: 1100px) {
  .roadmap-main-grid {
    grid-template-columns: 1fr;
  }
  .roadmap-side-tasks {
    position: static;
    max-height: 400px;
  }
}

/* En print, ne pas l'imprimer */
@media print {
  .roadmap-side-tasks { display: none !important; }
  .roadmap-main-grid { display: block !important; }
}

/* ── V6.7.199 — Tutoriel Suivi de projets (ptViewTutorial.js) ─────────── */
.ptvt-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(15, 23, 42, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: ptvt-fade-in 0.18s ease-out;
}
@keyframes ptvt-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ptvt-modal {
  background: var(--card-bg, #fff);
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
body.dark .ptvt-modal { background: #1f2937; color: #f3f4f6; }

.ptvt-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.ptvt-close:hover { background: rgba(0,0,0,0.06); color: var(--text, #111827); }

.ptvt-content {
  padding: 28px 32px 12px;
  overflow-y: auto;
  flex: 1;
}
.ptvt-slide { display: flex; flex-direction: column; gap: 14px; }
.ptvt-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary, #0043ff);
  line-height: 1.3;
}
.ptvt-body { font-size: 14px; line-height: 1.55; color: var(--text, #111827); }
.ptvt-body p { margin: 6px 0; }
.ptvt-body strong { font-weight: 600; color: var(--text, #111827); }
.ptvt-body ul.ptvt-list { padding-left: 20px; margin: 6px 0; }
.ptvt-body ul.ptvt-list li { margin: 3px 0; }
.ptvt-body kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.03);
  color: var(--text, #111827);
}
.ptvt-tip {
  font-size: 12.5px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  border-left: 3px solid var(--primary, #0043ff);
  border-radius: 4px;
  color: var(--text, #111827);
  margin-top: 8px !important;
}

/* Mockup container */
.ptvt-mockup {
  margin-top: 10px;
  padding: 16px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 6%, transparent);
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
}
body.dark .ptvt-mockup { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }

/* Footer + nav */
.ptvt-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 4%, transparent);
}
body.dark .ptvt-footer { border-top-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.ptvt-prev, .ptvt-next {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--text, #111827);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ptvt-prev:hover:not(:disabled),
.ptvt-next:hover { border-color: var(--primary, #0043ff); color: var(--primary, #0043ff); }
.ptvt-next {
  background: var(--primary, #0043ff);
  color: #fff;
  border-color: var(--primary, #0043ff);
}
.ptvt-next:hover { background: color-mix(in srgb, var(--primary, #0043ff) 85%, #000); color: #fff; }
.ptvt-prev:disabled { opacity: 0.4; cursor: not-allowed; }
.ptvt-progress {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted, #6b7280);
}
.ptvt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border, #e5e7eb);
  transition: background .15s, transform .15s;
}
.ptvt-dot.is-done { background: color-mix(in srgb, var(--primary, #0043ff) 50%, transparent); }
.ptvt-dot.is-current { background: var(--primary, #0043ff); transform: scale(1.4); }
.ptvt-progress-txt { margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ── Mockup styles ───────────────────────────────────────────── */

/* Timeline horizontale */
.ptvt-tl { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.ptvt-tl-step {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--text-muted, #9ca3af);
}
.ptvt-tl-step.ptvt-tl-validated {
  background: var(--primary, #0043ff);
  border-color: var(--primary, #0043ff);
  color: #fff;
  position: relative;
}
.ptvt-tl-step.ptvt-tl-passed {
  background: color-mix(in srgb, var(--primary, #0043ff) 22%, #fff);
  border-color: color-mix(in srgb, var(--primary, #0043ff) 35%, transparent);
  color: var(--primary, #0043ff);
}
.ptvt-tl-step.ptvt-tl-current {
  border-color: var(--primary, #0043ff);
  border-style: dashed;
  color: var(--primary, #0043ff);
  background: var(--card-bg, #fff);
}
.ptvt-tl-check {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 14px; height: 14px;
  background: var(--primary, #0043ff);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  border: 2px solid var(--card-bg, #fff);
}
.ptvt-tl-link {
  flex: 1; height: 2px;
  background: var(--border, #e5e7eb);
}
.ptvt-tl-labels {
  display: flex; gap: 4px;
  font-size: 10.5px; color: var(--text-muted, #6b7280);
  margin-top: 6px;
}
.ptvt-tl-labels span {
  flex: 0 0 32px;
  text-align: center;
}
.ptvt-tl-labels span:not(:first-child) { margin-left: calc(100% / 9); /* compensé pour les links */ }
/* Simpler : equal-flex labels */
.ptvt-tl-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 4px; }
.ptvt-tl-labels span { text-align: center; }

/* Popover validation mockup */
.ptvt-validatepop {
  max-width: 280px;
  margin: 0 auto;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
body.dark .ptvt-validatepop { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-vp-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 10px;
  color: var(--text, #111827);
}
.ptvt-vp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--primary, #0043ff);
  color: #fff;
}
.ptvt-vp-body { display: flex; gap: 6px; }
.ptvt-vp-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 8px;
  font-size: 11.5px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  cursor: default;
}
.ptvt-vp-validate { background: var(--primary, #0043ff); color: #fff; border-color: var(--primary, #0043ff); }
.ptvt-vp-ignore { color: #c2410c; border-color: color-mix(in srgb, #f97316 35%, var(--border, #e5e7eb)); }
.ptvt-vp-cancel { color: var(--text-muted, #6b7280); }

/* Bell alert mockup */
.ptvt-bell {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 8px;
  max-width: 360px; margin: 0 auto;
}
body.dark .ptvt-bell { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-bell-head {
  font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280);
  padding: 4px 6px 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ptvt-bell-row {
  display: flex; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, #eab308 12%, transparent);
}
.ptvt-bell-row.ptvt-bell-critical { background: color-mix(in srgb, #ef4444 12%, transparent); }
.ptvt-bell-row.ptvt-bell-standard { background: color-mix(in srgb, #f97316 12%, transparent); }
.ptvt-bell-icon { font-size: 14px; }
.ptvt-bell-line { font-size: 12.5px; color: var(--text, #111827); }
.ptvt-bell-sub { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }

/* GP Mois mockup */
.ptvt-gp {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 420px; margin: 0 auto;
}
body.dark .ptvt-gp { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-gp-row { display: flex; align-items: center; gap: 12px; }
.ptvt-gp-label { font-weight: 600; min-width: 60px; font-size: 13px; }
.ptvt-gp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ptvt-gp-chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 10%, transparent);
  color: var(--text-muted, #6b7280);
}
.ptvt-gp-chip-on {
  background: color-mix(in srgb, var(--primary, #0043ff) 18%, transparent);
  color: var(--primary, #0043ff);
  font-weight: 600;
}
.ptvt-gp-chip-add {
  font-size: 13px;
  padding: 2px 9px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 999px;
  color: var(--text-muted, #9ca3af);
}
.ptvt-gp-help {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* Rule mockup */
.ptvt-rule {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 460px; margin: 0 auto;
}
body.dark .ptvt-rule { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-rule-head {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text, #111827);
  margin-bottom: 8px;
}
.ptvt-rule-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--primary, #0043ff);
  color: #fff;
}
.ptvt-rule-meta { font-size: 11.5px; color: var(--text-muted, #6b7280); margin-left: 4px; }
.ptvt-rule-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 6%, transparent);
  border-radius: 6px;
  flex-wrap: wrap;
}
.ptvt-rule-arrow { color: var(--text-muted, #9ca3af); }
.ptvt-rule-target {
  padding: 2px 8px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px;
}
.ptvt-rule-crit { color: #dc2626; }
.ptvt-rule-save {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--primary, #0043ff);
  color: #fff;
  border-radius: 6px;
}

/* TdC card mockup */
.ptvt-tdc {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid #eab308;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 460px; margin: 0 auto;
}
body.dark .ptvt-tdc { background: #111827; border-color: rgba(255,255,255,0.10); border-left-color: #eab308; }
.ptvt-tdc-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ptvt-tdc-client {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.06em;
}
.ptvt-tdc-title {
  font-size: 13.5px;
  font-weight: 600;
  flex: 1;
}
.ptvt-tdc-badge {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #eab308 16%, transparent);
  color: #a16207;
  font-weight: 600;
}

/* Quote inline (slide workflow — exemple discussion CdP) */
.ptvt-quote {
  margin: 6px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  font-size: 12.5px;
  color: var(--text, #111827);
}
body.dark .ptvt-quote { color: #f3f4f6; }

/* Liste ordonnée du tutoriel */
.ptvt-body ol.ptvt-list { list-style: decimal; padding-left: 22px; }
.ptvt-body ol.ptvt-list > li { margin: 4px 0; }
.ptvt-body ol.ptvt-list ul { list-style: disc; padding-left: 18px; margin-top: 2px; }

/* Mockup : mini vue Liste (table compacte) */
.ptvt-list-mock {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 11.5px;
  max-width: 480px; margin: 0 auto;
  overflow: hidden;
}
body.dark .ptvt-list-mock { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-list-head, .ptvt-list-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 0.7fr 0.5fr;
  gap: 6px;
  padding: 6px 10px;
  align-items: center;
}
.ptvt-list-head {
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 8%, transparent);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ptvt-list-row + .ptvt-list-row, .ptvt-list-head + .ptvt-list-row { border-top: 1px solid var(--border, #e5e7eb); }
body.dark .ptvt-list-row + .ptvt-list-row, body.dark .ptvt-list-head + .ptvt-list-row { border-top-color: rgba(255,255,255,0.06); }
.ptvt-list-step { display: inline-flex; align-items: center; gap: 4px; }
.ptvt-list-late { color: #dc2626; font-weight: 600; }
.ptvt-list-mute { color: var(--text-muted, #9ca3af); }
.ptvt-list-pct { font-variant-numeric: tabular-nums; text-align: right; }

/* Mockup : toggle Liste / Kanban + mini Kanban */
.ptvt-toggle {
  display: inline-flex; gap: 4px;
  padding: 3px;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 10%, transparent);
  border-radius: 7px;
  margin-bottom: 10px;
}
.ptvt-toggle-btn {
  font-size: 11.5px; padding: 4px 10px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: default;
}
.ptvt-toggle-active {
  background: var(--card-bg, #fff);
  color: var(--text, #111827);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.ptvt-kanban-mock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ptvt-kb-col {
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 6%, transparent);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 6px;
}
.ptvt-kb-col-faded { opacity: 0.55; }
.ptvt-kb-col-head {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 5px;
}
body.dark .ptvt-kb-col-head { border-bottom-color: rgba(255,255,255,0.10); }
.ptvt-kb-count {
  margin-left: auto;
  background: color-mix(in srgb, var(--text-muted, #9ca3af) 18%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
}
.ptvt-kb-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10.5px;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark .ptvt-kb-card { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-kb-card-risk { border-left: 2px solid #dc2626; }

/* Mockup : log alertes */
.ptvt-log {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 11.5px;
  max-width: 520px; margin: 0 auto;
  overflow: hidden;
}
body.dark .ptvt-log { background: #111827; border-color: rgba(255,255,255,0.10); }
.ptvt-log-row {
  display: grid;
  grid-template-columns: 20px 60px 1fr 1.6fr 0.7fr;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
}
.ptvt-log-row + .ptvt-log-row { border-top: 1px solid var(--border, #e5e7eb); }
body.dark .ptvt-log-row + .ptvt-log-row { border-top-color: rgba(255,255,255,0.06); }
.ptvt-log-sev { text-align: center; }
.ptvt-log-when, .ptvt-log-cdp { color: var(--text-muted, #6b7280); }
.ptvt-log-proj { font-weight: 600; }
.ptvt-log-msg { color: var(--text, #111827); }
body.dark .ptvt-log-msg { color: #f3f4f6; }

/* Slide GP : encart « Avant / Maintenant » (V2 post-review Ben & Glenn) */
.ptvt-avant-apres {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 10px 0;
}
.ptvt-aa-col {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
  font-size: 12.5px;
}
.ptvt-aa-avant {
  background: color-mix(in srgb, #dc2626 6%, transparent);
  border-color: color-mix(in srgb, #dc2626 25%, var(--border, #e5e7eb));
}
.ptvt-aa-apres {
  background: color-mix(in srgb, #16a34a 6%, transparent);
  border-color: color-mix(in srgb, #16a34a 30%, var(--border, #e5e7eb));
}
.ptvt-aa-tag {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.ptvt-aa-avant .ptvt-aa-tag { color: #dc2626; }
.ptvt-aa-apres .ptvt-aa-tag { color: #16a34a; }
.ptvt-aa-col ul {
  margin: 0; padding-left: 18px;
}
.ptvt-aa-col li {
  margin: 2px 0;
  color: var(--text, #111827);
}
.ptvt-aa-avant ul li { text-decoration: line-through; opacity: 0.7; }
.ptvt-aa-empty { font-style: italic; color: var(--text-muted, #9ca3af); list-style: none; margin-left: -18px !important; text-decoration: none !important; opacity: 1 !important; }
.ptvt-aa-arrow {
  align-self: center;
  text-align: center;
  font-size: 20px;
  color: var(--primary, #0043ff);
  font-weight: 700;
}
body.dark .ptvt-aa-col li { color: #f3f4f6; }
@media (max-width: 600px) {
  .ptvt-avant-apres { grid-template-columns: 1fr; }
  .ptvt-aa-arrow { transform: rotate(90deg); margin: -4px auto; }
}

/* ── Bouton Tutoriel dans la barre PtView ───────────────────── */
.ptv-tuto-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  font-size: 12.5px;
  border: 1px solid var(--primary, #0043ff);
  border-radius: 999px;
  background: transparent;
  color: var(--primary, #0043ff);
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.ptv-tuto-btn:hover {
  background: var(--primary, #0043ff);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   V6.7.280 — BOOK ME : modale de gestion des liens (CRUD)
   ════════════════════════════════════════════════════════════ */
.bookme-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bookmeOverlayIn 0.15s ease-out;
}
@keyframes bookmeOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bookme-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 6px 20px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bookmeModalIn 0.18s ease-out;
}
@keyframes bookmeModalIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bookme-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--subtle, #f9fafb);
}
.bookme-modal-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #111827);
}
.bookme-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted, #6b7280);
  padding: 4px 8px;
  border-radius: 6px;
}
.bookme-close:hover {
  background: var(--hover, #f3f4f6);
  color: var(--text, #111827);
}
.bookme-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
}
.bookme-loading {
  padding: 32px;
  text-align: center;
  color: var(--text-muted, #6b7280);
}
.bookme-empty {
  padding: 32px 16px;
  text-align: center;
}
.bookme-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.bookme-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 4px;
}
.bookme-empty-hint {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.5;
}

.bookme-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.bookme-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--primary, #0043ff);
  border: 1px solid var(--primary, #0043ff);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.bookme-btn-primary:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 88%, #000);
}
.bookme-btn-secondary {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text, #111827);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
}
.bookme-btn-secondary:hover {
  background: var(--hover, #f3f4f6);
}

.bookme-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bookme-link {
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  transition: border-color 0.12s;
}
.bookme-link:hover {
  border-color: color-mix(in srgb, var(--primary, #0043ff) 30%, var(--border, #e5e7eb));
}
.bookme-link-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.bookme-link-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text, #111827);
}
.bookme-link-meta {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bookme-link-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  margin-top: 2px;
}
.bookme-link-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.bookme-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text, #111827);
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.bookme-act:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
.bookme-act--danger:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: color-mix(in srgb, #dc2626 6%, transparent);
}
.bookme-link-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e7eb);
  font-size: 11px;
}
.bookme-link-url code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted, #6b7280);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bookme-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.bookme-badge--on {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
}
.bookme-badge--off {
  background: var(--subtle, #f3f4f6);
  color: var(--text-muted, #6b7280);
}
.bookme-mini {
  font-size: 10.5px;
  color: var(--text-muted, #6b7280);
}

/* Form */
.bookme-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bookme-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bookme-form-title {
  font-weight: 600;
  font-size: 14px;
}
.bookme-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary, #0043ff);
  font-size: 12px;
  padding: 4px 0;
}
.bookme-back:hover { text-decoration: underline; }
.bookme-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bookme-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bookme-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text, #111827);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bookme-req { color: #dc2626; }
.bookme-hint {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  cursor: help;
}
.bookme-input,
.bookme-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  transition: border-color 0.12s;
}
.bookme-textarea {
  min-height: 60px;
  resize: vertical;
}
.bookme-input:focus,
.bookme-textarea:focus {
  outline: none;
  border-color: var(--primary, #0043ff);
}
.bookme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text, #111827);
  cursor: pointer;
}
.bookme-advance-row {
  margin-top: 8px;
  margin-left: 24px;
}
.bookme-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
}

body.dark .bookme-modal { background: #111827; }
body.dark .bookme-modal-head { background: #1f2937; border-bottom-color: #374151; }
body.dark .bookme-modal-title { color: #f3f4f6; }
body.dark .bookme-link { background: #1f2937; border-color: #374151; }
body.dark .bookme-link-title { color: #f3f4f6; }
body.dark .bookme-act { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .bookme-input,
body.dark .bookme-textarea { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .bookme-toggle { color: #f3f4f6; }
body.dark .bookme-form-actions { border-top-color: #374151; }

/* ════════════════════════════════════════════════════════════
   V6.7.281 — BOOK ME : comboboxes custom + tooltips immédiats
   ════════════════════════════════════════════════════════════ */

/* Combobox custom (durée, buffer, anti-take) avec option "Autre…" */
.bookme-combo {
  position: relative;
  width: 100%;
}
.bookme-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  color: var(--text, #111827);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}
.bookme-combo-trigger:hover { border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, var(--border, #e5e7eb)); }
.bookme-combo-trigger:focus { outline: none; border-color: var(--primary, #0043ff); }
.bookme-combo-chevron {
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
  margin-left: 6px;
  transition: transform 0.12s;
}
.bookme-combo-trigger[aria-expanded="true"] .bookme-combo-chevron,
.bookme-combo:has(.bookme-combo-panel:not([hidden])) .bookme-combo-chevron {
  transform: rotate(180deg);
}
.bookme-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 250;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 240px;
  overflow-y: auto;
  animation: bookmeComboPanelIn 0.12s ease-out;
}
/* V6.7.286 — Force display:none quand [hidden] (sinon le display:flex
   ci-dessus l'override → panneau visible par défaut au render du form). */
.bookme-combo-panel[hidden] {
  display: none !important;
}
@keyframes bookmeComboPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bookme-combo-opt {
  display: block;
  padding: 7px 10px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  color: var(--text, #111827);
  transition: background 0.1s;
}
.bookme-combo-opt:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
}
.bookme-combo-opt.is-active {
  background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent);
  color: var(--primary, #0043ff);
  font-weight: 600;
}
.bookme-combo-opt--custom {
  border-top: 1px dashed var(--border, #e5e7eb);
  margin-top: 4px;
  padding-top: 8px;
  font-style: italic;
  color: var(--text-muted, #6b7280);
}
.bookme-combo-opt--custom:hover {
  color: var(--primary, #0043ff);
}
.bookme-combo-custom-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
/* V6.7.286 — Idem : force display:none avec [hidden] (sinon display:flex override) */
.bookme-combo-custom-wrap[hidden] {
  display: none !important;
}
.bookme-combo-custom {
  flex: 1;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--card, #fff);
  border: 1px solid var(--primary, #0043ff);
  border-radius: 7px;
  color: var(--text, #111827);
}
.bookme-combo-custom:focus { outline: none; }
.bookme-combo-custom-unit {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
}

/* Tooltip immédiat (CSS :hover, pas de delay browser) */
.bookme-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}
.bookme-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--text-muted, #9ca3af);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  font-style: normal;
  line-height: 1;
}
.bookme-help-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card, #fff);
  border: 1px solid var(--primary, #0043ff);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  width: 280px;
  color: var(--text, #111827);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s;
  z-index: 300;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.bookme-help-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--primary, #0043ff);
}
.bookme-help:hover .bookme-help-pop,
.bookme-help:focus .bookme-help-pop,
.bookme-help:focus-visible .bookme-help-pop {
  opacity: 1;
  pointer-events: auto;
}

body.dark .bookme-combo-trigger { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .bookme-combo-panel { background: #1f2937; border-color: #374151; }
body.dark .bookme-combo-opt { color: #f3f4f6; }
body.dark .bookme-combo-custom { background: #1f2937; color: #f3f4f6; }
body.dark .bookme-help-pop { background: #1f2937; color: #f3f4f6; }

/* ════════════════════════════════════════════════════════════
   V6.7.283 — BOOK ME : booker popover (côté responder)
   ════════════════════════════════════════════════════════════ */
.bookme-booker-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
}
.bookme-booker-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.bookme-booker-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.bookme-booker-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111827);
}
.bookme-booker-info-desc {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.bookme-booker-info-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  flex-shrink: 0;
  text-align: right;
}
.bookme-booker-self {
  padding: 8px 18px;
  background: color-mix(in srgb, #d97706 8%, transparent);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 11.5px;
  color: #92400e;
}

.bookme-booker-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 720px) {
  .bookme-booker-grid {
    grid-template-columns: 1fr;
  }
}
.bookme-booker-cal {
  padding: 16px 18px;
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
}
.bookme-booker-slots {
  padding: 16px 14px;
  background: var(--subtle, #f9fafb);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Calendrier mois */
.bookme-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.bookme-cal-month {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
}
.bookme-cal-nav {
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  width: 28px; height: 28px;
  font-size: 16px;
  color: var(--text, #111827);
  cursor: pointer;
  line-height: 1;
}
.bookme-cal-nav:hover { background: var(--hover, #f3f4f6); }
.bookme-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.bookme-cal-dow span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #9ca3af);
  padding: 4px 0;
}
.bookme-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.bookme-cal-cell {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
  text-align: center;
  font-weight: 500;
  min-height: 32px;
}
.bookme-cal-cell--empty {
  background: transparent;
  cursor: default;
}
.bookme-cal-cell.has-slots {
  background: color-mix(in srgb, var(--primary, #0043ff) 8%, transparent);
  color: var(--primary, #0043ff);
  cursor: pointer;
  font-weight: 600;
}
.bookme-cal-cell.has-slots:hover {
  background: color-mix(in srgb, var(--primary, #0043ff) 16%, transparent);
}
.bookme-cal-cell.is-past {
  opacity: 0.3;
  cursor: not-allowed;
}
.bookme-cal-cell.is-today {
  border-color: var(--primary, #0043ff);
}
.bookme-cal-cell.is-selected {
  background: var(--primary, #0043ff);
  color: #fff;
}
.bookme-cal-cell:disabled { cursor: not-allowed; }

/* Slots list */
.bookme-slots-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #111827);
  margin-bottom: 10px;
  padding: 0 4px;
  flex-shrink: 0;
}
.bookme-slots-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.bookme-slot {
  padding: 8px 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #111827);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.bookme-slot:hover {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
}
.bookme-slot.is-selected {
  background: var(--primary, #0043ff);
  border-color: var(--primary, #0043ff);
  color: #fff;
}
.bookme-slots-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
  font-style: italic;
}

/* Footer */
.bookme-booker-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--card, #fff);
}
.bookme-booker-selection {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.bookme-booker-hint {
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}
.bookme-booker-selected {
  color: var(--primary, #0043ff);
  font-weight: 600;
}
.bookme-booker-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Success state */
.bookme-success {
  padding: 32px 24px;
  text-align: center;
}
.bookme-success-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.bookme-success-title {
  font-size: 18px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 12px;
}
.bookme-success-detail {
  font-size: 13px;
  color: var(--text, #111827);
  line-height: 1.6;
  margin-bottom: 16px;
}
.bookme-success-step {
  font-size: 12px;
  color: #16a34a;
  margin: 4px 0;
}
.bookme-success-step--warn {
  color: #d97706;
}
.bookme-success-actions {
  margin-top: 20px;
}

body.dark .bookme-booker-info { background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent); }
body.dark .bookme-booker-slots { background: #1f2937; }
body.dark .bookme-cal-cell { background: #1f2937; color: #9ca3af; }
body.dark .bookme-cal-cell.has-slots { background: color-mix(in srgb, var(--primary, #0043ff) 18%, transparent); }
body.dark .bookme-slot { background: #1f2937; border-color: #374151; color: #f3f4f6; }
body.dark .bookme-booker-footer { background: #111827; border-top-color: #374151; }

/* V6.7.286 — Bandeau « aucun slot dispo » dans le booker popover */
.bookme-booker-empty-banner {
  padding: 12px 18px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 12.5px;
  color: #92400e;
  line-height: 1.5;
}
body.dark .bookme-booker-empty-banner {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 20%, transparent);
}

/* V6.7.289 — Bouton « Nettoyer les doublons » dans le header du popover Home */
.home-pop-cleanup-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  color: var(--text, #111827);
  cursor: pointer;
  transition: all 0.12s;
}
.home-pop-cleanup-btn:hover:not(:disabled) {
  border-color: var(--primary, #0043ff);
  color: var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary, #0043ff) 6%, transparent);
}
.home-pop-cleanup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body.dark .home-pop-cleanup-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; }

/* ════════════════════════════════════════════════════════════════
 *  Trombinoscope (V7.0 — Phase 1)
 *  Vue annuaire publique accessible via menu avatar.
 *  Brand TF : --primary (#0043ff).
 * ════════════════════════════════════════════════════════════════ */

#panelTrombi {
  padding: 24px 32px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.trombi-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.trombi-head-left {
  display: flex; align-items: baseline; gap: 12px;
}
.trombi-title {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--primary); margin: 0;
}
.trombi-count {
  font-size: 0.9rem; color: var(--muted);
  background: var(--surface-2, var(--subtle));
  padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.trombi-count-sep { opacity: 0.5; margin: 0 2px; }
.trombi-count-total { opacity: 0.7; }
.trombi-refresh {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--card); border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all 0.15s ease;
}
.trombi-refresh:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: var(--primary);
}

.trombi-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--surface-2, var(--subtle));
  border-radius: 12px;
}

.trombi-search-wrap {
  position: relative; flex: 1; min-width: 220px;
}
.trombi-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--muted); display: inline-flex;
}
.trombi-search {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.9rem; background: var(--card); color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.trombi-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.trombi-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.trombi-chip {
  border: 1px solid var(--border); background: var(--card);
  color: var(--text);
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s ease;
}
.trombi-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.trombi-chip.is-active {
  background: var(--primary); border-color: var(--primary); color: white;
}

.trombi-alumni-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--muted); cursor: pointer;
  user-select: none; white-space: nowrap;
}
.trombi-alumni-toggle input { cursor: pointer; }

/* ── Grille de cards ─────────────────── */
.trombi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .trombi-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

.trombi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  font: inherit;
  color: var(--text);
}
.trombi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.trombi-card.is-alumni { opacity: 0.65; }
.trombi-card.is-alumni:hover { opacity: 1; }

.trombi-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2, var(--subtle)));
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.trombi-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* V7.0.8 — pour des portraits, le visage est généralement dans la moitié
     supérieure de la photo. object-position: center 25% évite que le crop
     1:1 coupe la tête (exemple : Benjamin R. visage tronqué avec default). */
  object-position: center 25%;
  display: block;
  background: var(--subtle);
}
/* Même réglage dans le popover détail */
.trombi-pop-photo-img { object-position: center 25%; }
.trombi-photo-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; font-weight: 700;
  color: color-mix(in srgb, var(--primary) 50%, transparent);
  letter-spacing: -0.02em;
  z-index: 0;
}
.trombi-photo img { position: relative; z-index: 1; }
.trombi-photo.no-img .trombi-photo-initials { color: color-mix(in srgb, var(--primary) 70%, transparent); }

.trombi-alumni-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--text); color: var(--card);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
}

.trombi-info {
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.trombi-name {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  line-height: 1.2;
}
.trombi-subtitle {
  font-size: 0.78rem; color: var(--muted);
  line-height: 1.3;
}
.trombi-chips-contact {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.trombi-chip-contact {
  font-size: 0.7rem; color: var(--muted);
  background: var(--subtle); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.trombi-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 0.95rem;
  background: var(--surface-2, var(--subtle));
  border-radius: 12px;
}

/* Skeleton state */
.trombi-card.is-skeleton {
  pointer-events: none;
  animation: trombiSkel 1.4s ease-in-out infinite;
}
.trombi-card.is-skeleton .trombi-name { background: var(--subtle); border-radius: 4px; height: 14px; }
@keyframes trombiSkel { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.8; } }

/* ── Popover détail ─────────────────── */
.trombi-pop-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: color-mix(in srgb, var(--text) 35%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: trombiPopFade 0.18s ease-out;
}
@keyframes trombiPopFade { from { opacity: 0; } to { opacity: 1; } }
.trombi-pop {
  background: var(--card); border-radius: 16px;
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--text) 30%, transparent);
  position: relative;
  animation: trombiPopSlide 0.22s cubic-bezier(.16,.84,.45,1);
}
@keyframes trombiPopSlide { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.trombi-pop-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: var(--card); border: 1px solid var(--border);
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all 0.15s ease;
}
.trombi-pop-close:hover {
  background: var(--subtle); color: var(--text);
}

.trombi-pop-head {
  display: flex; gap: 18px; align-items: center;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 6%, var(--card)) 0%,
    var(--card) 100%);
}
.trombi-pop-photo {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2, var(--subtle)));
  position: relative;
  border: 3px solid var(--card);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 18%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.trombi-pop-photo.is-alumni { filter: grayscale(0.7); }
.trombi-pop-photo-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 1;
}
.trombi-pop-photo-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 700;
  color: color-mix(in srgb, var(--primary) 65%, transparent);
  z-index: 0;
}

.trombi-pop-id h2 {
  margin: 0 0 4px; font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
}
.trombi-pop-sub {
  font-size: 0.9rem; color: var(--muted); font-weight: 500;
}
.trombi-pop-role {
  display: inline-block; margin-top: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  letter-spacing: 0.02em;
}
/* V7.0.7 — nouvelle hiérarchie header popover */
.trombi-pop-role-line {
  font-size: 0.95rem; color: var(--text); font-weight: 600;
  line-height: 1.3; margin-bottom: 2px;
}
.trombi-pop-position {
  font-size: 0.82rem; color: var(--muted); font-weight: 500;
  margin-bottom: 8px;
}
.trombi-pop-team-chip {
  display: inline-block;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.trombi-pop-body {
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.trombi-pop-section h3 {
  margin: 0 0 8px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.trombi-pop-section pre {
  margin: 0; padding: 10px 12px;
  background: var(--surface-2, var(--subtle));
  border-radius: 8px;
  font-family: inherit; font-size: 0.88rem; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.trombi-pop-section p { margin: 0; font-size: 0.92rem; color: var(--text); }

/* V7.0.7 — Row contact en 3 colonnes : icône · label · valeur */
.trombi-pop-row {
  display: grid;
  grid-template-columns: 24px 110px 1fr;
  align-items: center; gap: 12px;
  padding: 8px 0;
  font-size: 0.92rem; color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.trombi-pop-row:last-child { border-bottom: none; }
.trombi-pop-icon {
  color: var(--primary); display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 6px;
}
.trombi-pop-label {
  font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.trombi-pop-val {
  color: var(--text); text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}
.trombi-pop-val:is(a):hover {
  color: var(--primary); text-decoration: underline;
}
@media (max-width: 480px) {
  .trombi-pop-row { grid-template-columns: 24px 1fr; }
  .trombi-pop-label { grid-column: 2 / 3; font-size: 0.7rem; margin-bottom: -4px; }
  .trombi-pop-val   { grid-column: 2 / 3; }
}

.trombi-pop-empty {
  padding: 20px; text-align: center; color: var(--muted);
  font-size: 0.9rem; font-style: italic;
}

.trombi-pop-foot {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, var(--subtle));
  border-radius: 0 0 16px 16px;
  display: flex; justify-content: flex-end;
}
.trombi-pop-fiche {
  background: var(--primary); color: white;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.trombi-pop-fiche:hover { opacity: 0.9; transform: translateY(-1px); }
.trombi-pop-fiche:active { transform: translateY(0); }

/* V7.1.8 — Boutons d'accès lecture (Travailler avec moi / À propos de moi) */
.trombi-pop-readbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.trombi-pop-readbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 10px;
  font-size: 0.88rem; font-weight: 600; color: var(--primary);
  cursor: pointer; transition: all 0.15s ease;
}
.trombi-pop-readbtn:hover {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 25%, transparent);
}
.trombi-pop-readbtn svg { display: block; }

/* Mini-modale de lecture (empilée au-dessus du détail) */
.trombi-read-backdrop { z-index: 9300; }
.trombi-read { max-width: 600px; }
.trombi-read-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 6%, var(--card)) 0%, var(--card) 100%);
}
.trombi-read-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.trombi-read-ico {
  color: var(--primary); display: inline-flex;
  width: 32px; height: 32px; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 8px;
}
.trombi-read-block {
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 2%, var(--card));
}
.trombi-read-block + .trombi-read-block { margin-top: 12px; }
.trombi-read-block h4 {
  margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--text);
}
.trombi-read-block h5 {
  margin: 10px 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--muted);
}
.trombi-read-block h5:first-of-type { margin-top: 0; }
.trombi-read-text { font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.trombi-read-meta {
  margin: 0 0 6px; padding-left: 18px;
  font-size: 0.85rem; color: var(--text);
}
.trombi-read-qa { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.trombi-read-qa:last-child { border-bottom: none; }
.trombi-read-q {
  font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px;
}
.trombi-read-a { font-size: 0.9rem; line-height: 1.5; color: var(--text); }
/* 2026-06-05 — lien cliquable dans une réponse « À propos de moi » (reconnaissance d'URL) */
.trombi-read-link { color: var(--primary); text-decoration: underline; word-break: break-word; }
.trombi-read-link:hover { text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
 *  Page Perso (V7.1 — Phase 2)
 *  Layout 3 colonnes + header. Accessible via menu avatar « Ma fiche perso »
 *  ou bouton « Ouvrir fiche perso » du popover Trombi.
 *  Brand TF : --primary (#0043ff).
 * ════════════════════════════════════════════════════════════════ */

#panelMember {
  padding: 20px 28px 60px;
  max-width: 1560px; /* 2026-06-04 — élargi (colonnes latérales + larges) */
  margin: 0 auto;
}

.member-loading,
.member-empty {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 80px 20px;
  color: var(--muted);
  font-size: 0.95rem;
}
.member-empty {
  background: var(--surface-2, var(--subtle));
  border-radius: 12px;
}

/* ── Header ─────────────────────────────────────────── */
/* V7.1.x — Header sur bandeau bleu TF (dégradé + texte blanc) */
.member-head {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center; gap: 20px;
  margin-bottom: 28px;
  padding: 22px 28px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 78%, #6f5cff) 0%, transparent 60%),
    linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #001a8c) 100%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 30%, transparent);
}
.member-head-back { justify-self: start; }
.member-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, #fff 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 8px;
  font-size: 0.85rem; color: #fff; cursor: pointer;
  transition: all 0.15s ease;
}
.member-back-btn:hover {
  background: color-mix(in srgb, #fff 28%, transparent);
  border-color: color-mix(in srgb, #fff 45%, transparent);
}

.member-head-id { text-align: center; }
.member-head-id h1 {
  margin: 0 0 4px;
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: -0.02em; color: #fff;
}
.member-head-sub {
  font-size: 0.95rem; color: color-mix(in srgb, #fff 82%, transparent); font-weight: 500;
}

.member-head-meta {
  justify-self: end;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.member-badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 999px;
}
.member-link-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: color-mix(in srgb, #fff 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.15s ease;
}
.member-link-btn:hover { background: color-mix(in srgb, #fff 28%, transparent); border-color: color-mix(in srgb, #fff 45%, transparent); }
.member-badge-alumni { background: #fff; color: var(--primary); }
.member-badge-public {
  background: color-mix(in srgb, #fff 20%, transparent);
  color: #fff;
}

/* ── Grid 3 colonnes ─────────────────────────────────── */
.member-grid {
  display: grid;
  grid-template-columns: 330px 1fr 330px; /* 2026-06-04 — colonnes gauche/droite élargies (260→330) */
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .member-grid { grid-template-columns: 260px 1fr 260px; gap: 16px; }
  .member-head { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .member-head-back, .member-head-meta { justify-self: center; }
}
@media (max-width: 800px) {
  .member-grid { grid-template-columns: 1fr; }
  .member-col-left, .member-col-right { order: 2; }
  .member-col-center { order: 1; }
}

.member-col {
  display: flex; flex-direction: column; gap: 16px;
}
.member-col-center {
  align-items: stretch;
}

/* ── 2026-06-10 Lot 1 — Centre à 2 onglets (Suivi RH / Échanges) ───────── */
.member-center-tabs {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.member-center-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--border); background: var(--card);
  border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--muted); transition: background .12s, color .12s, border-color .12s;
}
.member-center-tab:hover { border-color: var(--primary); color: var(--primary); }
.member-center-tab.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.member-center-stack { position: relative; }
.member-center-panel.is-hidden { display: none; }
/* 2026-06-11 — Le panneau défaut occupe toute la hauteur de la colonne :
   photo + infos en haut, ancres reléguées en pied. */
.member-col-center { align-self: stretch; }
.member-center-stack { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.member-center-default {
  flex: 1; display: flex; flex-direction: column;
  padding-top: 8px;
}
.member-id-top { display: flex; flex-direction: column; align-items: center; }
.member-id-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.member-id-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2, var(--subtle)));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.member-id-chip svg { color: var(--primary); }
/* Panneaux onglet : hauteur bornée + scroll interne pour tenir sur une page */
.member-center-rh, .member-center-exch {
  max-height: 62vh; overflow: auto;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  padding: 4px;
}
/* L'Échanges réutilise le footer existant : neutralise ses marges/bordure top */
.member-center-exch .member-foot,
.member-center-exch .member-exchanges {
  margin: 0; border-top: none; padding: 12px;
}

/* ── Timeline « Suivi RH » (zigzag gauche/droite) ─────────────────────── */
.member-rh-loading { display: flex; justify-content: center; padding: 32px 0; }
.member-rh-tl {
  list-style: none; margin: 0; padding: 12px 0; position: relative;
}
.member-rh-tl::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--border); transform: translateX(-50%);
}
.member-rh-item {
  position: relative; width: 50%; box-sizing: border-box; padding: 8px 18px; cursor: pointer;
}
.member-rh-item.is-right { margin-left: 50%; }
.member-rh-item.is-left  { margin-left: 0; text-align: right; }
.member-rh-dot {
  position: absolute; top: 16px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--card); z-index: 1;
}
.member-rh-item.is-right .member-rh-dot { left: -5px; }
.member-rh-item.is-left  .member-rh-dot { right: -5px; }
.member-rh-item.is-future .member-rh-dot { background: var(--muted); }
.member-rh-card {
  display: inline-flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--subtle));
  padding: 7px 10px; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.member-rh-item:hover .member-rh-card { border-color: var(--primary); box-shadow: 0 3px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.member-rh-item.is-future .member-rh-card { border-style: dashed; }
.member-rh-card-kind { font-size: 10.5px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
.member-rh-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.member-rh-card-date { font-size: 11px; color: var(--muted); }
@media (max-width: 800px) {
  .member-rh-tl::before { left: 7px; }
  .member-rh-item, .member-rh-item.is-right, .member-rh-item.is-left { width: 100%; margin-left: 0; text-align: left; padding-left: 24px; padding-right: 4px; }
  .member-rh-item.is-left .member-rh-dot, .member-rh-item.is-right .member-rh-dot { left: 2px; right: auto; }
}

/* Popover RDV RH */
.member-rh-pop-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
/* 2026-06-17 — Déplacer un créneau RH (management) */
.member-rh-move-row { margin: -6px 0 14px; }
.member-rh-move-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--primary, #0043ff); background: none; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 8px; padding: 6px 11px; }
.member-rh-move-btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.member-rh-move-form { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.member-rh-move-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.member-rh-move-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.member-rh-move-fields input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.member-rh-move-acts { display: flex; justify-content: flex-end; gap: 8px; }
.member-rh-pop-date { font-size: 12.5px; color: var(--muted); }
.member-rh-pop-sec { margin-bottom: 16px; }
.member-rh-pop-sec h4 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0 0 6px; color: var(--text); }
.member-rh-pop-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--primary); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; }
.member-rh-pop-link:hover { background: var(--accent-soft, rgba(0,67,255,.08)); }
.member-rh-pop-empty { font-size: 12px; color: var(--muted); margin: 0; }
.member-rh-pop-soon { opacity: .75; }
/* Notes par point RH (page blanche remplissable) */
.member-rh-notes-loading { display: flex; justify-content: center; padding: 14px 0; }
.member-rh-notes-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  font: inherit; font-size: 13px; line-height: 1.5; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text);
}
.member-rh-notes-input:focus { outline: none; border-color: var(--primary, #0043ff); }
.member-rh-notes-ro { font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.member-rh-notes-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.member-rh-notes-saved { font-size: 11.5px; color: var(--muted); margin-right: auto; }
/* Bouton « vivant » : pulse en sauvegarde, vert quand enregistré */
.member-rh-notes-btn { display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.member-rh-notes-btn.is-saving { opacity: .85; animation: rhSavePulse 1s ease-in-out infinite; }
.member-rh-notes-btn.is-saved { background: var(--ok, #16a34a) !important; border-color: var(--ok, #16a34a) !important; color: #fff !important; }
@keyframes rhSavePulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ── Photo centrale ─────────────────────────────────── */
.member-photo {
  /* 2026-06-11 — responsive : suit la largeur de la colonne centrale,
     bornée pour rester ronde et lisible (plus grande qu'avant : 320 → ~440). */
  width: clamp(240px, 78%, 440px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-2, var(--subtle)));
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--card);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}
.member-photo.is-alumni { filter: grayscale(0.7); }
.member-photo-img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%;
  display: block; position: relative; z-index: 1;
}
.member-photo-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; font-weight: 700;
  color: color-mix(in srgb, var(--primary) 60%, transparent);
  letter-spacing: -0.02em;
  z-index: 0;
}

/* ── Ancres (Coordonnées / Do-Don't / Sandbox) ──────── */
.member-anchors {
  display: flex; justify-content: center; gap: 12px;
  margin: 24px 0 4px;
  margin-top: auto; /* 2026-06-11 — reléguées en pied de colonne centrale */
  padding-top: 20px;
  flex-wrap: wrap;
}
.member-anchor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: all 0.15s ease;
}
.member-anchor:hover {
  background: var(--primary); color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 25%, transparent);
}
.member-anchor svg { display: block; }
/* 2026-06-05 — Ancre lien externe (Profil DISC) : <a> stylé comme un bouton ancre. */
.member-anchor--link { text-decoration: none; }
.member-anchor--link > span { display: inline-flex; align-items: center; gap: 5px; }
.member-anchor--link > span svg { opacity: .7; }

/* ── Sections (placeholders Phase 3-6) ─────────────── */
.member-section,
.member-foot {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.member-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-2, var(--subtle)));
  border-bottom: 1px solid var(--border);
}
.member-section-head h3 {
  margin: 0; flex: 1;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.member-section-icon {
  color: var(--primary); display: inline-flex; align-items: center;
}
.member-section-phase {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
}
.member-section-body {
  padding: 14px;
}
.member-placeholder {
  font-size: 0.85rem; color: var(--muted);
  line-height: 1.5;
  padding: 16px;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    color-mix(in srgb, var(--primary) 3%, transparent) 10px,
    color-mix(in srgb, var(--primary) 3%, transparent) 20px
  );
  border-radius: 8px;
  text-align: center;
}
.member-foot {
  margin-top: 16px;
}
.member-foot .member-placeholder { margin: 14px; }

/* ── Phase 5 — Calendrier RH (colonne gauche) ───────── */
.ptv-spinner--sm { width: 20px; height: 20px; border-width: 2px; margin: 0; }
.member-calendar .member-section-head { flex-wrap: wrap; row-gap: 8px; }
.member-calendar .member-section-head h3 { flex: 1; min-width: 100px; }
.member-cal-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.member-cal-tab {
  border: 0; background: transparent; cursor: pointer;
  font-size: 0.7rem; font-weight: 600; color: var(--muted);
  padding: 3px 10px; border-radius: 999px; transition: background .12s, color .12s;
}
.member-cal-tab.is-active { background: var(--primary); color: #fff; }
.member-cal-loading { display: flex; justify-content: center; padding: 24px 0; }

.member-cal-foot {
  padding: 0 14px 14px;
}
.member-cal-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 9px 12px; border-radius: 9px; white-space: nowrap;
  transition: filter .12s;
}
.member-cal-add:hover { filter: brightness(1.08); }
.member-cal-add svg { flex-shrink: 0; }

.member-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.member-cal-title {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  text-transform: capitalize;
}
.member-cal-arrow {
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
  width: 26px; height: 26px; border-radius: 7px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.member-cal-arrow:hover { background: var(--subtle); border-color: var(--primary); }

.member-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.member-cal-dow {
  text-align: center; font-size: 0.62rem; font-weight: 700;
  color: var(--muted); padding: 2px 0 4px;
}
.member-cal-cell {
  /* 2026-06-10 Lot 1 — calendrier compacté (aspect 1/0.78) pour tenir sur une page */
  position: relative; aspect-ratio: 1 / 0.78;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 0.7rem; color: var(--text);
}
.member-cal-cell.is-out { color: var(--muted); opacity: 0.4; }
.member-cal-cell.is-today { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.member-cal-cell.is-today .member-cal-num { font-weight: 700; color: var(--primary); }
.member-cal-cell.has-ev { cursor: default; }
.member-cal-cell.is-clickable { cursor: pointer; }
.member-cal-cell.is-clickable:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.member-cal-item.is-clickable { cursor: pointer; transition: background .12s; }
.member-cal-item.is-clickable:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.member-cal-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

.member-cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.member-cal-item {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--card);
}
.member-cal-item-date {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: var(--primary);
  text-transform: capitalize; min-width: 62px;
}
.member-cal-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.member-cal-item-title { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.member-cal-item-time { font-size: 0.7rem; color: var(--muted); }

/* Vue « Historique » — timeline verticale des points RH passés */
.member-cal-timeline { list-style: none; margin: 0; padding: 2px 0 2px 4px; position: relative; }
.member-cal-timeline::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border);
}
.member-cal-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 14px 0; }
.member-cal-tl-item:last-child { padding-bottom: 2px; }
.member-cal-tl-dot {
  position: relative; z-index: 1; flex: 0 0 auto; margin-top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--card);
}
.member-cal-tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.member-cal-tl-title { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.member-cal-tl-meta { font-size: 0.7rem; color: var(--muted); text-transform: capitalize; }

/* ── 2026-06-04 — Lot Restructure fiche (point 3) ───── */
/* Points d'attention (colonne droite, sous PMC) */
.member-attention .member-section-head h3 { margin-right: auto; }
.member-att-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary); cursor: pointer; transition: background .15s;
}
.member-att-edit:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.member-att-edit.is-disabled {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-muted, #8a93a3); cursor: not-allowed; opacity: .7;
}
.member-att-edit.is-disabled:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.member-att-actions { display: inline-flex; gap: 6px; }

/* Tooltip interne (hover dynamique) — utilisé par les boutons inopérants (limite 3 points) */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); right: 0;
  width: max-content; max-width: 240px;
  background: var(--bg-elev, #1f2530); color: #fff;
  font-size: 11.5px; line-height: 1.35; font-weight: 500;
  padding: 7px 10px; border-radius: 8px; white-space: normal; text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease; z-index: 50;
}
.has-tip::before {
  content: ''; position: absolute; bottom: calc(100% + 2px); right: 12px;
  border: 6px solid transparent; border-top-color: var(--bg-elev, #1f2530);
  opacity: 0; transition: opacity .14s ease; pointer-events: none; z-index: 51;
}
.has-tip:hover::after, .has-tip:hover::before { opacity: 1; transform: translateY(0); }
.member-att-stbtn.is-disabled { cursor: not-allowed; opacity: .45; }
.member-att-statusctl .member-att-stbtn.has-tip::after { left: 0; right: auto; }
.member-att-statusctl .member-att-stbtn.has-tip::before { left: 12px; right: auto; }
.member-att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* 2026-06-11 — Carte cliquable (titre + statut), couleur par statut */
.member-att-card {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 11px; border-radius: 10px; color: var(--text);
  background: var(--surface-2, var(--subtle)); border: 1px solid var(--border);
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.member-att-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.07); transform: translateY(-1px); }
.member-att-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #f5b50a; }
.member-att-card-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.member-att-card-title { font-size: 0.88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-att-card-status { font-size: 0.7rem; font-weight: 700; }
.member-att-card > svg:last-child { color: var(--muted); flex: 0 0 auto; }
.member-att-loading { display: flex; justify-content: center; padding: 18px 0; }

/* Détail point d'attention (popover) */
.member-att-detail-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.member-att-detail-desc { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; margin-bottom: 18px; }
.member-att-sec { margin-bottom: 16px; }
.member-att-sec h4 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0 0 8px; color: var(--text); }
.member-att-statusctl { display: flex; gap: 6px; flex-wrap: wrap; }
.member-att-stbtn {
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--muted);
}
.member-att-stbtn:hover { border-color: var(--c); color: var(--c); }
.member-att-stbtn.is-active { background: var(--c); border-color: var(--c); color: #fff; font-weight: 600; }
.member-att-detail-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.member-att-del { border: 1px solid var(--border); background: none; color: #b91c1c; cursor: pointer; border-radius: 8px; padding: 5px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.member-att-del:hover { background: #fef2f2; border-color: #b91c1c; }
/* Phase B — échanges par point d'attention */
.member-att-arch-body { min-width: 320px; }
.member-att-cmt-feed { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.member-att-cmt { border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; background: var(--surface-2, var(--subtle)); }
.member-att-cmt.is-mine { background: color-mix(in srgb, var(--primary, #0043ff) 7%, var(--card, #fff)); border-color: color-mix(in srgb, var(--primary, #0043ff) 25%, var(--border)); }
.member-att-cmt-meta { font-size: 11px; color: var(--muted); display: flex; gap: 7px; align-items: baseline; margin-bottom: 3px; }
.member-att-cmt-meta strong { color: var(--text); font-size: 12px; }
.member-att-cmt-body { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; }
.member-att-cmt-pj { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--primary, #0043ff); text-decoration: none; }
.member-att-cmt-pj:hover { text-decoration: underline; }
.member-att-composer { display: flex; flex-direction: column; gap: 7px; }
.member-att-cmt-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px; font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); }
.member-att-composer-row { display: flex; align-items: center; gap: 8px; }
.member-att-pj { border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.member-att-pj:hover { border-color: var(--primary); color: var(--primary); }
.member-att-pj-pending { flex: 1; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.member-att-pj-pending button { border: none; background: none; cursor: pointer; color: var(--muted); display: inline-flex; }
.member-att-cmt-send { margin-left: auto; }

/* Échanges (bandeau central, logs internes invisibles du collab) */
.member-exchanges .member-section-head { display: flex; align-items: center; gap: 8px; }
.member-exch-private {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.member-log-composer {
  display: flex; flex-direction: column; gap: 10px;
  margin: 10px 0 16px; padding: 12px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface-2, color-mix(in srgb, var(--text) 3%, transparent));
}
.member-log-input {
  width: 100%; resize: vertical; min-height: 42px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 0.88rem;
  background: var(--surface, #fff); color: var(--text);
}
.member-log-composer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.member-log-pols { display: inline-flex; gap: 6px; }
.member-log-pol {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  transition: all .15s;
}
.member-log-pol:hover { border-color: var(--pol); color: var(--pol); }
.member-log-pol.active {
  border-color: var(--pol); color: var(--pol);
  background: color-mix(in srgb, var(--pol) 12%, transparent);
}
.member-log-send {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 0.85rem;
}
.member-log-send:disabled { opacity: .5; cursor: default; }
.member-log-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.member-log-item {
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pol);
  background: color-mix(in srgb, var(--pol) 5%, transparent);
}
.member-log-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--muted); margin-bottom: 4px;
}
.member-log-meta strong { color: var(--text); font-size: 0.82rem; }
.member-log-pol-dot { display: inline-flex; color: var(--pol); }
.member-log-date { color: var(--muted); }
.member-log-src {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; font-size: 0.7rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.member-log-del {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--muted);
}
.member-log-del:hover { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.member-log-body { font-size: 0.88rem; line-height: 1.45; color: var(--text); }
.member-pop-hint { font-size: 0.8rem; color: var(--muted); margin: 0 0 4px; line-height: 1.4; }

/* Composer commentaire Q&A (visible du collab) */
.member-cmt-composer { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0 12px; }
.member-cmt-input {
  flex: 1; resize: none; min-height: 40px; max-height: 140px;
  border: 1px solid var(--border); border-radius: 20px;
  padding: 9px 14px; font: inherit; font-size: 0.88rem; line-height: 1.4;
  background: var(--surface, #fff); color: var(--text);
}
.member-cmt-composer .member-log-send { margin-left: 0; align-self: stretch; }

/* 2026-06-10 — Échanges en mode conversation (WhatsApp) ──────────────── */
.member-chat-body { display: flex; flex-direction: column; }
.member-chat-feed {
  list-style: none; margin: 0 0 4px; padding: 6px 2px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto;
}
.member-chat-row { display: flex; }
.member-chat-row.is-mine  { justify-content: flex-end; }
.member-chat-row.is-other { justify-content: flex-start; }
.member-chat-bubble {
  max-width: 76%; padding: 7px 11px; border-radius: 14px;
  font-size: 0.88rem; line-height: 1.42; position: relative;
  word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.member-chat-row.is-other .member-chat-bubble {
  background: var(--surface-2, var(--subtle)); color: var(--text);
  border-bottom-left-radius: 4px;
}
.member-chat-row.is-mine .member-chat-bubble {
  background: var(--primary, #0043ff); color: #fff;
  border-bottom-right-radius: 4px;
}
.member-chat-author { display: block; font-size: 0.7rem; font-weight: 700; color: var(--primary, #0043ff); margin-bottom: 2px; }
.member-chat-text { white-space: pre-wrap; }
.member-chat-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.member-chat-time {
  margin-left: auto; font-size: 0.62rem; opacity: .65;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.member-chat-row.is-mine .member-chat-time { color: rgba(255,255,255,.85); }
.member-chat-del { border: none; background: none; cursor: pointer; padding: 0; color: inherit; opacity: .6; display: inline-flex; }
.member-chat-del:hover { opacity: 1; }

/* Réactions emoji sur les messages */
.member-chat-col { display: flex; flex-direction: column; max-width: 76%; }
.member-chat-row.is-mine  .member-chat-col { align-items: flex-end; }
.member-chat-row.is-other .member-chat-col { align-items: flex-start; }
.member-chat-col .member-chat-bubble { max-width: 100%; }
/* Chips de réaction : collent à la bulle (léger chevauchement façon WhatsApp) */
.member-react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -7px; z-index: 1; position: relative; padding: 0 4px; }
.member-react-chip {
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; line-height: 1.55;
  display: inline-flex; align-items: center; gap: 3px; color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,.10); transition: transform .1s, box-shadow .12s, border-color .12s;
}
.member-react-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 7px rgba(0,0,0,.16); border-color: var(--primary); }
.member-react-chip.is-mine { background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent); border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, transparent); color: var(--primary, #0043ff); font-weight: 600; }

/* ── 2026-06-17 — Réactions emoji sur les commentaires Notion (CommentReactions) ──
   Surface partagée : graphisteDetail, monteurDetail, Home Video/Drive Review.
   Réaction = mini-commentaire emoji dans le même fil Notion (ajout seul). */
.cr-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 6px;
}
.cr-chip {
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; line-height: 1.55;
  display: inline-flex; align-items: center; gap: 3px; color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .1s, box-shadow .12s, border-color .12s;
}
.cr-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 7px rgba(0,0,0,.16); border-color: var(--primary); }
.cr-chip.is-mine { background: color-mix(in srgb, var(--primary, #0043ff) 14%, transparent); border-color: color-mix(in srgb, var(--primary, #0043ff) 40%, transparent); color: var(--primary, #0043ff); font-weight: 600; }
.cr-chip .cr-n { font-size: 11px; opacity: .85; }
.cr-add {
  border: 1px dashed var(--border); background: transparent; cursor: pointer;
  border-radius: 999px; width: 24px; height: 21px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); opacity: .55; transition: opacity .12s, color .12s, border-color .12s;
}
.cr-add:hover { opacity: 1; color: var(--primary); border-color: var(--primary); }
.cr-add svg { width: 13px; height: 13px; }
.cr-picker {
  position: fixed; z-index: 100001; width: 232px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 8px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.cr-picker-btn { border: none; background: none; cursor: pointer; font-size: 17px; padding: 4px; border-radius: 7px; line-height: 1; }
.cr-picker-btn:hover { background: var(--accent-soft, rgba(0,67,255,.1)); }
body.dark .cr-chip { background: #1f2937; color: #e5e7eb; border-color: #374151; }
body.dark .cr-chip.is-mine { background: color-mix(in srgb, var(--primary, #0043ff) 22%, #1f2937); color: #cdd9ff; }

/* Actions bulle (réagir + répondre) — groupe flottant au survol */
.member-chat-acts {
  position: absolute; top: 50%; transform: translateY(-50%); display: none; gap: 4px;
}
/* Zone tampon invisible : on prolonge la bulle vers les boutons pour que le
   curseur ne traverse pas de « trou » (sinon les boutons disparaissaient). */
.member-chat-acts::before {
  content: ''; position: absolute; top: -8px; bottom: -8px;
}
.member-chat-row.is-mine  .member-chat-acts { left: -56px; }
.member-chat-row.is-mine  .member-chat-acts::before { left: 0; right: -10px; }
.member-chat-row.is-other .member-chat-acts { right: -56px; }
.member-chat-row.is-other .member-chat-acts::before { right: 0; left: -10px; }
/* Affiché tant qu'on survole la LIGNE entière (plus juste la bulle) → cliquable. */
.member-chat-row:hover .member-chat-acts { display: inline-flex; }
.member-chat-acts > button {
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.member-chat-acts > button:hover { border-color: var(--primary); color: var(--primary); }

/* Citation (réponse) DANS une bulle — couleurs explicites (lisible light + dark) */
.member-chat-quote {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; border-left: 3px solid var(--primary, #0043ff); border-radius: 7px;
  padding: 5px 9px; margin: 0 0 6px;
  background: color-mix(in srgb, var(--primary, #0043ff) 9%, var(--card, #fff));
  color: var(--text);
}
.member-chat-quote-author { display: block; font-size: .72rem; font-weight: 700; color: var(--primary, #0043ff); }
.member-chat-quote-text { display: block; font-size: .78rem; opacity: .9; }
/* Bulle « mine » (fond bleu) : citation sur fond blanc → texte FORCÉ sombre
   (sinon en dark mode var(--text) est clair → invisible). */
.member-chat-row.is-mine .member-chat-quote { background: #fff; border-left-color: #93b4ff; }
.member-chat-row.is-mine .member-chat-quote .member-chat-quote-author { color: #0043ff; }
.member-chat-row.is-mine .member-chat-quote .member-chat-quote-text { color: #1f2937; }

/* Footer source (commentaire miroir Objectif / PMC) */
.member-chat-source {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: .72rem; font-weight: 600; opacity: .85; color: inherit;
}
.member-chat-row.is-other .member-chat-source { color: var(--primary, #0043ff); }
.member-chat-source:hover { text-decoration: underline; opacity: 1; }

/* Barre « réponse à… » au-dessus du composer */
.member-cmt-wrap { display: flex; flex-direction: column; margin: 10px 0 12px; }
.member-cmt-wrap .member-cmt-composer { margin: 0; }
.member-reply-bar {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--surface-2, var(--subtle)); border: 1px solid var(--border);
  border-bottom: none; border-radius: 12px 12px 0 0; font-size: .8rem; color: var(--muted);
}
.member-reply-bar-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-reply-bar-main strong { color: var(--primary, #0043ff); }
.member-reply-cancel { border: none; background: none; cursor: pointer; color: var(--muted); display: inline-flex; padding: 0; }
.member-reply-cancel:hover { color: var(--text); }

/* Flash de surlignage quand on saute vers un message cité */
.member-chat-row.is-flash .member-chat-bubble { animation: memberChatFlash 1.2s ease; }
@keyframes memberChatFlash {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0043ff) 45%, transparent); }
}

/* Bouton + picker emoji */
.member-cmt-emoji {
  flex: 0 0 auto; align-self: stretch; border: 1px solid var(--border);
  background: var(--card); border-radius: 20px; cursor: pointer; padding: 0 10px;
  color: var(--muted); display: inline-flex; align-items: center;
}
.member-cmt-emoji:hover { border-color: var(--primary); color: var(--primary); }
.member-cmt-send { border-radius: 20px !important; }
.member-cmt-attach {
  flex: 0 0 auto; align-self: stretch; border: 1px solid var(--border);
  background: var(--card); border-radius: 20px; cursor: pointer; padding: 0 10px;
  color: var(--muted); display: inline-flex; align-items: center;
}
.member-cmt-attach:hover { border-color: var(--primary); color: var(--primary); }
/* Barre PJ en attente / upload en cours */
.member-attach-bar {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--surface-2, var(--subtle)); border: 1px solid var(--border);
  border-bottom: none; border-radius: 12px 12px 0 0; font-size: .8rem; color: var(--muted);
}
.member-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.member-attach-cancel { border: none; background: none; cursor: pointer; color: var(--muted); display: inline-flex; padding: 0; }
.member-attach-cancel:hover { color: var(--text); }
/* Chip PJ dans une bulle */
.member-chat-attach {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  padding: 5px 9px; border-radius: 8px; text-decoration: none; font-size: .8rem;
  background: rgba(0,0,0,.06); color: inherit; max-width: 100%;
}
.member-chat-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chat-row.is-mine .member-chat-attach { background: rgba(255,255,255,.2); }
.member-chat-attach:hover { text-decoration: underline; }
.member-emoji-picker {
  position: fixed; z-index: 100000; width: 232px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 8px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
}
.member-emoji-btn { border: none; background: none; cursor: pointer; font-size: 18px; padding: 4px; border-radius: 7px; line-height: 1; }
.member-emoji-btn:hover { background: var(--accent-soft, rgba(0,67,255,.1)); }

/* Bloc « + Log interne » (management uniquement, distinct des commentaires) */
.member-log-add {
  margin: 0 0 14px; border: 1px dashed var(--border); border-radius: 11px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.member-log-add > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 12px; font-size: 0.8rem; font-weight: 600; color: var(--muted);
  list-style: none;
}
.member-log-add > summary::-webkit-details-marker { display: none; }
.member-log-add > summary:hover { color: var(--text); }
.member-log-add[open] > summary { border-bottom: 1px solid var(--border); }
.member-log-add .member-exch-private { margin-left: auto; }
.member-log-add .member-log-composer { border: none; background: transparent; margin: 0; }
.member-log-send--log { background: #475569; }

/* Item commentaire (neutre, distinct des logs colorés) */
.member-log-item--comment {
  border-left-color: var(--border);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.member-log-item--comment .member-log-pol-dot { color: var(--muted); }
.member-log-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 999px; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
}

/* Sous-tâches en attente dans le popover de création d'objectif */
.obj-stage .obj-subs { margin-top: 6px; }
.obj-stage .obj-subs-add { margin-top: 8px; }
.obj-stage-list { margin: 0; }
/* Missions PMC dans le popover de création — même altitude que les sous-tâches
   (pas de bordure/marge héritées du détail, label cohérent sans icône). */
.obj-stage-mis { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.obj-stage-mis .obj-subs-empty { margin: 0; }
.obj-stage-mis .obj-mis-chips { margin: 0; }

/* Liaison objectif ↔ mission PMC (Lot Liaisons étape 2) */
.obj-mis { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.obj-mis-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.obj-mis-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 0.82rem; line-height: 1.2;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--text);
}
.obj-mis-chip--link { cursor: pointer; background: transparent; }
.obj-mis-chip--link:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.obj-mis-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: none; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--muted); padding: 0;
}
.obj-mis-x:hover { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
.obj-mis-add { margin-top: 6px; }
.obj-mis-sel {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 0.85rem; background: var(--surface, #fff); color: var(--text); cursor: pointer;
}
.obj-mis-count {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: 0.72rem; font-weight: 600; color: var(--primary);
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* Missions liées affichées dans le hero (sous le titre) */
.obj-mis--hero {
  margin: 12px 0 0; padding: 0; border: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px;
}
.obj-mis-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted);
}
.obj-mis--hero .obj-mis-sel { width: auto; min-width: 160px; padding: 4px 8px; font-size: 0.8rem; }
.obj-mis-none { font-size: 0.8rem; color: var(--muted); font-style: italic; }

.pmc-linked-objs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pmc-linked-title { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

/* ── V7.2 — Objectifs (Phase 3) ─────────────────────── */

/* ── V7.2 — Objectifs (Phase 3) ─────────────────────── */
.obj-head-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.obj-add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--primary); cursor: pointer;
  transition: all 0.15s ease;
}
.obj-add-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.obj-seeall {
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: var(--primary);
}
.obj-seeall:hover { text-decoration: underline; }

.obj-tiroir {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; overflow: hidden; background: var(--card);
  transition: border-color 0.15s ease;
}
.obj-tiroir.is-open { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.obj-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit;
}
.obj-head:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.obj-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.obj-title { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.obj-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.72rem; color: var(--muted);
}
.obj-status-pill { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.obj-detail { padding: 0 12px 12px; border-top: 1px solid var(--border); }
.obj-body { font-size: 0.86rem; line-height: 1.5; color: var(--text); padding: 10px 0; white-space: pre-wrap; }
.obj-body-empty { color: var(--muted); font-style: italic; }
.obj-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.obj-status-sel { padding: 5px 8px; font-size: 0.8rem; flex: 1; min-width: 110px; }
.obj-mini {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--text); cursor: pointer; font-size: 0.78rem;
  transition: all 0.15s ease;
}
.obj-mini:hover { border-color: var(--primary); color: var(--primary); }
.obj-mini-danger:hover { border-color: #dc2626; color: #dc2626; }
.obj-insights { border-top: 1px dashed var(--border); padding-top: 10px; }
.obj-ins-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.obj-ins { margin-bottom: 8px; }
.obj-ins-meta { font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.obj-ins-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); display: inline-flex; padding: 2px; border-radius: 4px; }
.obj-ins-del:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.obj-ins-body { font-size: 0.85rem; line-height: 1.45; color: var(--text); margin-top: 2px; }
.obj-ins-empty, .obj-ins-loading { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.obj-ins-add { display: flex; gap: 6px; align-items: flex-end; margin-top: 8px; }
.obj-ins-input {
  flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; font-size: 0.85rem; resize: vertical;
}
.obj-ins-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.obj-ins-send {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; border-radius: 8px;
  background: var(--primary); color: #fff; cursor: pointer; transition: opacity 0.15s ease;
}
.obj-ins-send:hover { opacity: 0.9; }
.obj-add-slot {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; border: 1px dashed var(--border); border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 0.82rem; font-weight: 600;
  transition: all 0.15s ease;
}
.obj-add-slot:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* « Voir tous » */
.obj-all-filter { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text); margin-bottom: 12px; cursor: pointer; }
.obj-all-list { display: flex; flex-direction: column; gap: 6px; }
.obj-all-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card);
}
.obj-all-row[draggable="true"] { cursor: grab; }
.obj-all-row.is-dragging { opacity: 0.4; }
.obj-grip { color: var(--muted); display: inline-flex; cursor: grab; }
.obj-all-title { flex: 1; font-size: 0.9rem; color: var(--text); }
.obj-all-hint { font-size: 0.78rem; color: var(--muted); margin: 12px 0 0; font-style: italic; }
.obj-all-row { cursor: pointer; }
.obj-all-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.obj-all-date {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.75rem; color: #16a34a; font-weight: 600; white-space: nowrap;
}
.obj-arch-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: var(--subtle);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
/* Onglets Actifs / Archivés */
.obj-all-tabs { display: inline-flex; gap: 4px; margin-bottom: 14px; background: var(--subtle); padding: 3px; border-radius: 10px; }
.obj-tab {
  padding: 6px 16px; border: none; background: transparent; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.15s ease;
}
.obj-tab.is-active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 12%, transparent); }
/* Date de terminé sur la card sidebar */
.obj-done-date {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.72rem; color: #16a34a; font-weight: 600; white-space: nowrap;
}

/* V7.2.1 — carte objectif cliquable (sidebar) */
.obj-card {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer; text-align: left; font: inherit;
  transition: all 0.15s ease;
}
/* 2026-06-04 — progression sous-tâches : chip n/N + barre de remplissage en bas. */
.obj-card.has-progress { position: relative; padding-bottom: 13px; }
.obj-sub-chip {
  font-size: 0.7rem; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.obj-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--border); border-radius: 0 0 10px 10px; overflow: hidden;
}
.obj-progress-fill { display: block; height: 100%; background: #16a34a; transition: width .2s; }

/* Sous-tâches dans le popover objectif (checklist « quête »). */
.obj-subs { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.obj-subs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.obj-subs-title { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.obj-subs-pct { font-size: 0.78rem; font-weight: 700; color: #16a34a; }
.obj-subs-bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.obj-subs-bar > span { display: block; height: 100%; background: #16a34a; transition: width .2s; }
.obj-subs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.obj-sub { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.obj-sub-check { background: none; border: none; cursor: pointer; color: var(--muted); display: inline-flex; padding: 0; flex-shrink: 0; }
.obj-sub-check:not(:disabled):hover { color: #16a34a; }
.obj-sub-check:disabled { cursor: default; }
.obj-sub.is-done .obj-sub-check { color: #16a34a; }
.obj-sub.is-done .obj-sub-label { text-decoration: line-through; color: var(--muted); }
.obj-sub-label { flex: 1; line-height: 1.35; }
.obj-sub-del { background: none; border: none; cursor: pointer; color: var(--muted); opacity: .5; padding: 0; display: inline-flex; flex-shrink: 0; }
.obj-sub-del:hover { opacity: 1; color: var(--error, #dc2626); }
.obj-subs-empty { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.obj-subs-add { display: flex; gap: 6px; margin-top: 10px; }
.obj-sub-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 0.85rem; }
.obj-sub-add { padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; color: var(--primary); display: inline-flex; align-items: center; }
.obj-sub-add:hover { background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.obj-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  transform: translateY(-1px);
}

/* Hero statut (sous le titre, centré) */
.obj-pop-hero { margin-bottom: 18px; text-align: center; }
.obj-status-pill-hero {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border: 1.5px solid; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* Stepper statut À faire → En cours → Fait */
.obj-steps {
  display: inline-flex; width: fit-content;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.obj-step {
  padding: 8px 18px; border: none; border-right: 1px solid var(--border);
  background: var(--card); color: var(--muted);
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.obj-step:last-child { border-right: none; }
.obj-step.is-filled { background: color-mix(in srgb, var(--obj-c) 14%, var(--card)); color: var(--obj-c); }
.obj-step.is-active { background: var(--obj-c); color: #fff; }
.obj-step:not([disabled]):hover { background: color-mix(in srgb, var(--obj-c) 22%, var(--card)); }
.obj-step.is-active:not([disabled]):hover { background: var(--obj-c); filter: brightness(1.05); }
.obj-step[disabled] { cursor: default; }

/* Footer custom du popover détail */
.obj-pop-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.obj-pop-foot-left { display: flex; gap: 8px; flex: 1; }

/* Popover détail objectif — 2 colonnes (détail + commentaires) */
.obj-pop { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; }
.obj-pop-main { padding-right: 20px; }
.obj-pop-comments {
  padding-left: 20px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.obj-pop-status { margin-bottom: 12px; }
.obj-pop-status .obj-status-sel { max-width: 200px; }
.obj-pop-body {
  font-size: 0.95rem; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.obj-pop-body.obj-body-empty { color: var(--muted); font-style: italic; }
.obj-pop-actions { display: flex; gap: 8px; margin-top: 18px; }
.obj-pop-ins-list { flex: 1; overflow-y: auto; max-height: 50vh; margin-bottom: 10px; }
@media (max-width: 680px) {
  .obj-pop { grid-template-columns: 1fr; }
  .obj-pop-main { padding-right: 0; padding-bottom: 16px; }
  .obj-pop-comments { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 16px; }
}

/* ── V7.3 — PMC (Phase 4) ──────────────────────────── */
.pmc-def-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); background: var(--card); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 999px;
}
.pmc-legend { font-size: 0.72rem; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
.pmc-axis { margin-bottom: 14px; }
.pmc-axis-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 6px;
}
.pmc-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 5px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  cursor: pointer; text-align: left; font: inherit; transition: all 0.15s ease;
}
.pmc-item:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
.pmc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pmc-item-label { flex: 1; font-size: 0.85rem; color: var(--text); }
.pmc-levels { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.pmc-lv {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 0.72rem; font-weight: 700; color: var(--text);
  background: var(--subtle); border-radius: 5px;
}
.pmc-lv-sep { color: var(--muted); font-size: 0.72rem; }
.pmc-count { display: inline-flex; align-items: center; gap: 2px; font-size: 0.68rem; color: var(--muted); flex-shrink: 0; }

/* Popover item PMC */
.pmc-desc { font-size: 0.92rem; line-height: 1.55; color: var(--text); margin-bottom: 16px; }
.pmc-slider { margin-bottom: 16px; }
.pmc-slider-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pmc-slider-val { color: var(--muted); font-weight: 700; }
.pmc-dots { display: flex; gap: 5px; }
.pmc-sdot {
  flex: 1; height: 30px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: all 0.12s ease;
}
.pmc-sdot.on { background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.pmc-sdot.cur { background: var(--primary); color: #fff; border-color: var(--primary); }
.pmc-sdot:not([disabled]):hover { border-color: var(--primary); }
.pmc-sdot[disabled] { cursor: default; opacity: 0.85; }
.pmc-ro { font-size: 0.82rem; color: var(--muted); font-style: italic; margin: 4px 0 0; }

/* ── PMC V2 — missions par poste × niveau (V7.3.4) ── */
.pmc-fiche-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.pmc-fiche-btn:hover { border-color: var(--primary); color: var(--primary); }
.pmc-missions { display: flex; flex-direction: column; gap: 7px; }
/* 2026-06-04 — Bouton « Voir plus » (board PMC limité à 3) + liste popover. */
.pmc-more {
  margin-top: 8px; width: 100%; padding: 8px 10px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--radius-sm); transition: background .15s;
}
.pmc-more:hover { background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.pmc-missions-all { gap: 8px; }
@media (min-width: 620px) {
  .pmc-missions-all { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* 2026-06-04 — Lot Progression : contour vert progressif (--pmc-pct 0..100,
   avance d'1 cran par mission acquise) + pastille X/N + cards acquises vertes. */
.pmc-progress-frame { position: relative; }
.pmc-progress-frame::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from -90deg, #16a34a calc(var(--pmc-pct, 0) * 1%), var(--border) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pmc-progress-frame--pop { border-radius: var(--radius-sm); padding: 10px; }
.pmc-progress-pophead { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pmc-progress-chip {
  margin-left: auto; font-size: 0.72rem; font-weight: 700; color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.pmc-mission.is-acquis {
  border-color: color-mix(in srgb, #16a34a 38%, var(--border));
  background: color-mix(in srgb, #16a34a 7%, var(--card));
}
.pmc-mission.is-acquis .pmc-status-mini { font-weight: 700; }
.pmc-mission {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--card); cursor: pointer; width: 100%;
  transition: border-color .12s, background .12s;
}
.pmc-mission:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
.pmc-mission .pmc-dot { margin-top: 4px; }
.pmc-mission-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmc-mission-title { font-size: 0.86rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.pmc-mission-ctx {
  font-size: 0.76rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pmc-mission-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.pmc-status-mini { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.pmc-ref-tag {
  margin-left: 6px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle;
  background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #7c3aed;
}
/* Stepper statut (popover détail) */
.pmc-steps { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.pmc-step {
  font-size: 0.76rem; font-weight: 600; padding: 5px 14px; border: none;
  background: var(--card); color: var(--muted); cursor: pointer; border-right: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.pmc-step:last-child { border-right: none; }
.pmc-step:not([disabled]):hover { background: var(--subtle); color: var(--text); }
.pmc-step.active { background: var(--pmc-c, var(--primary)); color: #fff; }
.pmc-step[disabled] { cursor: default; }
.pmc-situation {
  display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted);
  font-style: italic; margin-bottom: 12px;
}
.pmc-situation svg { color: var(--primary); flex-shrink: 0; }
.pmc-row-label { font-size: 0.82rem; font-weight: 700; color: var(--primary); margin: 4px 0 6px; }
.pmc-ctx { font-size: 0.92rem; line-height: 1.55; color: var(--text); margin-bottom: 10px; }
.pmc-crit { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pmc-crit li { font-size: 0.85rem; line-height: 1.45; color: var(--text); }
.pmc-row-sep { border: none; border-top: 1px dashed var(--border); margin: 12px 0; }
.pmc-fiche-md { font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.pmc-fiche-md h4 { font-size: 0.98rem; margin: 16px 0 6px; color: var(--text); }
.pmc-fiche-md h5 { font-size: 0.86rem; margin: 12px 0 4px; color: var(--primary); }
.pmc-fiche-md p { margin: 0 0 8px; }
.pmc-fiche-md ul { margin: 0 0 10px; padding-left: 20px; }
.pmc-fiche-md li { margin-bottom: 3px; }

/* ── Fiche poste : éditeur Markdown + tableau référentiel (2026-06-04) ── */
.pmc-fiche-editor {
  width: 100%; min-height: 320px; resize: vertical;
  font: 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.pmc-fiche-hint { font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; }
.pmc-fiche-hint code { background: var(--bg-alt, rgba(0,0,0,.05)); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }

.pmc-ref { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px; }
.pmc-ref-title { font-size: 0.98rem; margin: 0 0 10px; color: var(--text); }
.pmc-ref-scroll { overflow-x: auto; }
.pmc-ref-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.pmc-ref-table th, .pmc-ref-table td {
  border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; text-align: left;
}
.pmc-ref-table thead th {
  background: var(--bg-alt, rgba(0,0,0,.04)); font-weight: 700; color: var(--primary);
  position: sticky; top: 0; white-space: nowrap;
}
.pmc-ref-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.pmc-ref-mission { min-width: 160px; max-width: 220px; }
.pmc-ref-mission strong { display: block; line-height: 1.35; }
.pmc-ref-afest { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 4px; font-style: italic; }
.pmc-ref-ctx { line-height: 1.45; margin-bottom: 5px; }
.pmc-ref-crit { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.pmc-ref-crit li { line-height: 1.35; }
.pmc-ref-empty { color: var(--muted); }
.pmc-ref-referent { margin-top: 16px; }
.pmc-ref-referent h5 { font-size: 0.86rem; margin: 0 0 8px; color: var(--primary); }
.pmc-ref-refmission { margin-bottom: 10px; font-size: 0.85rem; }
.pmc-ref-refmission > ul { margin: 4px 0 0; padding-left: 18px; }
.pmc-fiche-grade { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px; }
.pmc-fiche-grade .pmc-fiche-hint { margin: 0 0 8px; }

/* ── Popover édit ─────────────────────────────────── */
.member-pop-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: color-mix(in srgb, var(--text) 38%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: memberPopFade 0.18s ease-out;
}
@keyframes memberPopFade { from { opacity: 0; } to { opacity: 1; } }
.member-pop {
  background: var(--card); border-radius: 16px;
  max-width: 540px; width: 100%;
  max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--text) 30%, transparent);
  position: relative;
  animation: memberPopSlide 0.22s cubic-bezier(.16,.84,.45,1);
}
@keyframes memberPopSlide {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.member-pop-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  background: transparent; border: 1px solid transparent;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all 0.15s ease;
}
.member-pop-close:hover {
  background: var(--subtle); color: var(--text);
}
.member-pop-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 6%, var(--card)) 0%,
    var(--card) 100%);
}
.member-pop-head h2 {
  margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
}
.member-pop-icon {
  color: var(--primary); display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 8px;
}
.member-pop-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.member-pop-form { display: flex; flex-direction: column; gap: 16px; }
.member-pop-field { display: flex; flex-direction: column; gap: 6px; }
.member-pop-label {
  font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  display: inline-flex; align-items: center; gap: 6px;
}
.member-pop-label svg { color: var(--primary); }
.member-pop-field input,
.member-pop-field textarea,
.member-pop-textarea {
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font: inherit; font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.member-pop-field input:focus,
.member-pop-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.member-pop-field input[readonly],
.member-pop-textarea[readonly] {
  background: var(--subtle); color: var(--muted); cursor: default;
}
.member-pop-textarea {
  width: 100%; box-sizing: border-box;
  resize: vertical; min-height: 120px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.88rem; line-height: 1.5;
}
.member-pop-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, var(--subtle));
}
.member-pop-foot-readonly {
  justify-content: space-between; align-items: center;
}
.member-pop-foot-readonly em {
  font-size: 0.82rem; color: var(--muted); font-style: italic;
}
.member-pop-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.member-pop-btn-cancel {
  background: var(--card); border-color: var(--border); color: var(--text);
}
.member-pop-btn-cancel:hover { background: var(--subtle); }
.member-pop-btn-save {
  background: var(--primary); color: white;
}
.member-pop-btn-save:hover { opacity: 0.92; transform: translateY(-1px); }
.member-pop-btn-save.is-saving { opacity: 0.6; cursor: wait; }

/* ── V7.1.6 — Popover « Travailler avec moi » + « À propos de moi » ── */

/* Pastille bleue « à compléter » sur les ancres */
.member-anchor { position: relative; }
.member-anchor-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  margin-left: 4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  animation: memberDotPulse 2.2s ease-in-out infinite;
}
@keyframes memberDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent); }
}
.member-anchor:hover .member-anchor-dot {
  background: white;
  box-shadow: 0 0 0 3px color-mix(in srgb, white 35%, transparent);
}

/* Popover large (TWM + À propos) */
.member-pop-wide { max-width: 760px; }

/* Sections internes (TWM 3 sections) */
.member-pop-form-twm { gap: 22px; }
.member-pop-form-about { gap: 12px; }
.mp-section {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 2%, var(--card));
  display: flex; flex-direction: column; gap: 12px;
}
.mp-section-title {
  margin: 0;
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.01em;
}
.mp-section-title svg { color: var(--primary); }
.mp-section-sub {
  margin: -4px 0 4px; padding: 0;
  font-size: 0.82rem; color: var(--muted); line-height: 1.4;
}
.mp-intro {
  margin: 0 0 4px;
  font-size: 0.85rem; line-height: 1.55; color: var(--muted);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 5%, var(--subtle));
  border-left: 3px solid var(--primary);
  border-radius: 6px;
}
.mp-intro strong { color: var(--primary); font-weight: 700; }
/* 2026-06-05 — intertitre de section dans « À propos de moi » (sépare les
   questions riches du bloc « infos pratiques »). */
.mp-about-sep {
  margin: 10px 0 2px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}

/* Field row (label inline + chips) */
.mp-field-row {
  display: flex; flex-direction: column; gap: 6px;
}

/* Chip group (multi-select audience / channel) */
.mp-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 500; color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.mp-chip:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.mp-chip input[type="checkbox"],
.mp-chip input[type="radio"] {
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.mp-chip:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.mp-chip input:disabled { cursor: default; }

/* Select dans popover */
.member-pop-select {
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
  font: inherit; font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.member-pop-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.member-pop-select:disabled { background: var(--subtle); color: var(--muted); cursor: default; }

/* Override textarea : pas mono dans TWM/about (texte libre, pas markdown) */
.member-pop-form-twm .member-pop-textarea,
.member-pop-form-about .member-pop-textarea {
  font-family: inherit;
  font-size: 0.9rem;
  min-height: unset;
}

/* V7.1.10 — distinction visuelle champ rempli / à remplir (live via
   :placeholder-shown — fonctionne aussi en lecture seule). */
.member-pop-textarea:placeholder-shown,
.member-pop-field input[type="tel"]:placeholder-shown,
.member-pop-field input[type="email"]:placeholder-shown {
  border-style: dashed;
  background: color-mix(in srgb, var(--muted) 5%, transparent);
}
.member-pop-textarea:not(:placeholder-shown),
.member-pop-field input[type="tel"]:not(:placeholder-shown),
.member-pop-field input[type="email"]:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
}
/* Le focus reprend toujours le dessus */
.member-pop-textarea:focus,
.member-pop-field input:focus {
  border-style: solid;
}

/* V7.1.9 — étoile « mettre en avant » (About → Trombi « À savoir », max 3) */
.mp-about-q .member-pop-label {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
}
.mp-star {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer;
  transition: all 0.15s ease;
}
.mp-star:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.mp-star.is-on {
  background: color-mix(in srgb, #f5b50a 16%, transparent);
  border-color: #f5b50a;
  color: #f5b50a;
}
.mp-star.is-on svg { fill: #f5b50a; }
.mp-star:disabled { opacity: 0.35; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   ── Onglet Marques (annuaire clients, lecture universelle — 2026-06-13) ──
   ════════════════════════════════════════════════════════════════ */
/* ── Gestion humaine (board management — V7.0 Phase 7) ── */
#panelGestionRH { padding: 18px 28px 60px; max-width: none; margin: 0; }
#panelGestionRH .grh-lvl-table, #panelGestionRH .grh-addrow { max-width: 720px; }
.grh-head { margin-bottom: 16px; }
.grh-title { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; color: var(--text); margin: 0; }
.grh-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.grh-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.grh-card-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.grh-card-hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.grh-soon { opacity: .75; }
.grh-muted { color: var(--muted); font-size: 13px; }
.grh-empty, .grh-loading, .grh-error { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 16px; color: var(--muted); }
.grh-error { flex-direction: row; }
.grh-lvl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grh-lvl-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 4px 8px; }
.grh-lvl-table th.ar, .grh-lvl-table td.ar { text-align: right; }
.grh-lvl-table td { padding: 5px 8px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.grh-lvl-row.is-archived { opacity: .55; }
.grh-lvl-f { font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; }
.grh-num { max-width: 80px; text-align: right; }
.grh-lvl-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.grh-lvl-save, .grh-lvl-arch, .grh-lvl-restore { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 7px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 4px; }
.grh-lvl-save:hover { color: var(--success,#16a34a); border-color: color-mix(in srgb, var(--success,#16a34a) 40%, transparent); }
.grh-lvl-arch:hover { color: var(--error,#d33); border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); }
.grh-lvl-restore:hover { color: var(--primary,#0043ff); border-color: var(--primary,#0043ff); }
.grh-arch-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, transparent); border-radius: 5px; padding: 1px 6px; }
.grh-addrow { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.grh-addrow input[type="text"] { flex: 1; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--text); }
.grh-addrow #grhAddLvl { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--primary,#0043ff); background: var(--primary,#0043ff); color: #fff; border-radius: 8px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 5px; }
.grh-arch { margin-top: 14px; }
.grh-arch summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
/* Org chart (qui manage qui) */
.grh-org-root-drop { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px dashed var(--border); border-radius: 9px; padding: 8px 12px; margin: 6px 0 12px; display: flex; align-items: center; gap: 6px; }
/* Organigramme HYBRIDE (« mixed ») : Direction + managers en colonnes côte à côte (connecteurs en T),
   puis chaque équipe pend en liste verticale indentée sous son manager. */
.grh-org-acts { display: flex; gap: 8px; margin-bottom: 10px; }
.grh-collapse-all { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; }
.grh-collapse-all:hover { color: var(--text); border-color: var(--primary,#0043ff); }
.grh-orgchart { overflow-x: auto; padding: 4px 2px 16px; }
.grh-org-li { list-style: none; }
/* racines côte à côte (pas de connecteur au-dessus) */
.grh-org-tree { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: flex-start; justify-content: center; width: max-content; min-width: 100%; }
.grh-org-tree > .grh-org-li { display: flex; flex-direction: column; align-items: center; }
/* niveau 1 : colonnes horizontales sous un manager, connecteurs en T */
.grh-org-h { list-style: none; margin: 0; padding: 22px 0 0; display: flex; justify-content: center; position: relative; }
.grh-org-h::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 22px; border-left: 2px solid var(--border); }
.grh-org-h > .grh-org-li { position: relative; padding: 22px 10px 0; display: flex; flex-direction: column; align-items: center; }
.grh-org-h > .grh-org-li::before, .grh-org-h > .grh-org-li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--border); }
.grh-org-h > .grh-org-li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.grh-org-h > .grh-org-li:only-child::before, .grh-org-h > .grh-org-li:only-child::after { display: none; }
.grh-org-h > .grh-org-li:only-child { padding-top: 22px; }
.grh-org-h > .grh-org-li:first-child::before, .grh-org-h > .grh-org-li:last-child::after { border: 0 none; }
.grh-org-h > .grh-org-li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.grh-org-h > .grh-org-li:first-child::after { border-radius: 6px 0 0 0; }
/* niveau ≥2 : équipe en liste verticale indentée (rail + tick) */
.grh-org-children { list-style: none; margin: 2px 0 0 16px; padding: 4px 0 0; position: relative; border-left: 2px solid var(--border); align-self: flex-start; }
.grh-org-children > .grh-org-li { display: block; position: relative; padding: 4px 0 0 16px; }
.grh-org-children > .grh-org-li::before { content: ''; position: absolute; left: 0; top: 19px; width: 13px; height: 0; border-top: 2px solid var(--border); }
.grh-org-card { display: inline-flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 11px 6px 7px; cursor: grab; transition: box-shadow .12s, border-color .12s; max-width: 240px; }
/* Bac « Non rattachés » (grille compacte, séparée de l'arbre) */
.grh-unassigned { margin-top: 16px; }
.grh-unassigned summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.grh-unassigned-n { font-weight: 700; font-size: 11px; color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-radius: 999px; padding: 1px 7px; }
.grh-unassigned-grid { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
/* Tableau PMC par équipe */
.grh-pmc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.grh-pmc-chip { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.grh-pmc-chip:hover { color: var(--text); border-color: var(--primary,#0043ff); }
.grh-pmc-chip.is-on { color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent); border-color: color-mix(in srgb, var(--primary,#0043ff) 35%, transparent); }
.grh-pmc-chip-n { font-size: 11px; font-weight: 700; opacity: .7; }
.grh-pmc-legend { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.grh-pmc-wrap { overflow-x: auto; }
.grh-pmc-table { border-collapse: collapse; font-size: 12.5px; }
.grh-pmc-table th, .grh-pmc-table td { border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.grh-pmc-mcol { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; font-weight: 600; color: var(--text); padding: 6px 10px; max-width: 240px; min-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
thead .grh-pmc-mcol { z-index: 2; }
.grh-pmc-mem { cursor: pointer; padding: 6px 4px; min-width: 54px; vertical-align: bottom; background: var(--card); }
.grh-pmc-mem:hover { background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.grh-pmc-mem-ava { display: block; width: 30px; height: 30px; margin: 0 auto 3px; border-radius: 50%; overflow: hidden; }
.grh-pmc-mem-ava img { width: 100%; height: 100%; object-fit: cover; }
.grh-pmc-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary,#0043ff) 16%, transparent); color: var(--primary,#0043ff); font-size: 10px; font-weight: 700; }
.grh-pmc-mem-pct { display: block; text-align: center; font-size: 11px; font-weight: 700; }
.grh-pmc-pct--hi { color: #16a34a; } .grh-pmc-pct--mid { color: #d97706; } .grh-pmc-pct--lo { color: var(--muted); }
.grh-pmc-cell { text-align: center; padding: 5px; cursor: pointer; }
.grh-pmc-cell:hover { background: color-mix(in srgb, var(--primary,#0043ff) 7%, transparent); }
.grh-pmc-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px; }
.grh-pmc-dot--acquis { background: #16a34a; }
.grh-pmc-dot--acquisition { background: #f59e0b; }
.grh-pmc-dot--observe { background: color-mix(in srgb, var(--primary,#0043ff) 45%, transparent); }
.grh-pmc-dot--none { background: color-mix(in srgb, var(--muted) 28%, transparent); }
/* Référentiel PMC (mapping rôle ↔ poste) */
.grh-ref-card > summary { cursor: pointer; list-style: none; }
.grh-ref-card > summary::-webkit-details-marker { display: none; }
.grh-ref-card[open] > summary { margin-bottom: 12px; }
.grh-ref-body { max-width: 560px; }
.grh-ref-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.grh-ref-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 5px 8px; }
.grh-ref-table th.ar, .grh-ref-table td.ar { text-align: right; }
.grh-ref-table td { padding: 5px 8px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); }
.grh-rolemap { font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; background: var(--bg); color: var(--text); min-width: 200px; }
.grh-ref-postes { margin-top: 12px; }
.grh-ref-postes summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.grh-ref-poste { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; margin: 8px 0; }
.grh-ref-poste > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); }
.grh-ref-mtable { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.grh-ref-mtable td { padding: 3px 4px; border: none; }
.grh-mission-t { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.grh-mission-acts { white-space: nowrap; text-align: right; width: 1%; }
.grh-mission-save, .grh-mission-arch { border: 1px solid var(--border); background: var(--card); cursor: pointer; padding: 4px 7px; border-radius: 6px; color: var(--muted); display: inline-flex; margin-left: 4px; }
.grh-mission-save:hover { color: var(--success,#16a34a); border-color: color-mix(in srgb, var(--success,#16a34a) 40%, transparent); }
.grh-mission-arch:hover { color: var(--error,#d33); border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); }
.grh-mission-addrow { display: flex; gap: 8px; margin-top: 6px; }
.grh-mission-new { flex: 1; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; background: var(--bg); color: var(--text); }
.grh-mission-addbtn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px dashed var(--border); background: none; color: var(--primary,#0043ff); border-radius: 7px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 5px; }
.grh-mission-addbtn:hover { background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.grh-org-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.grh-org-card.is-dragging { opacity: .45; cursor: grabbing; }
.grh-org-card.grh-org-over, .grh-org-root-drop.grh-org-over { border-color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary,#0043ff) 30%, transparent); }
/* Co-leader : puce + bouton + popover */
.grh-co-chip { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 10%, transparent); border-radius: 5px; padding: 1px 6px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Union de co-leaders (N cartes détachées côte à côte = « arbre généalogique ») */
.grh-org-li--union { align-items: center; }
.grh-union-head { display: inline-flex; align-items: flex-start; gap: 6px; }
.grh-union-head > .grh-org-toggle, .grh-union-head > .grh-org-toggle-sp, .grh-union-head > .grh-org-count { margin-top: 14px; }
.grh-union-leaders { display: inline-flex; align-items: flex-start; gap: 6px; border: 1.5px dashed color-mix(in srgb, var(--primary,#0043ff) 45%, var(--border)); border-radius: 14px; padding: 6px 8px; background: color-mix(in srgb, var(--primary,#0043ff) 5%, transparent); }
.grh-union-member { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.grh-union-member > .grh-org-children { align-self: stretch; margin-top: 4px; }
.grh-union-link { align-self: flex-start; margin-top: 13px; display: inline-flex; align-items: center; color: var(--primary,#0043ff); position: relative; flex: 0 0 auto; }
.grh-union-link::before { content: ''; position: absolute; top: 50%; left: -6px; right: -6px; height: 0; border-top: 2px dotted color-mix(in srgb, var(--primary,#0043ff) 55%, transparent); z-index: 0; }
.grh-union-link svg { position: relative; z-index: 1; background: var(--bg); }
.grh-union-shared { /* hérite .grh-org-h : le connecteur ::before (left:50%) tombe au centre du binôme */ }
/* 2026-06-23 (Lot 2) — la boîte pointillée ne contient QUE les co-leaders ; les reports
   PROPRES descendent en colonnes alignées sous chaque leader (hors pointillé). */
.grh-union-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.grh-union-body { display: inline-flex; align-items: flex-start; gap: 6px; padding: 0 8px; }
.grh-union-bcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grh-union-bcol > .grh-org-children { align-self: stretch; margin-top: 2px; }
.grh-union-bsp { flex: 0 0 auto; display: inline-flex; align-items: flex-start; margin-top: 8px; color: color-mix(in srgb, var(--primary,#0043ff) 30%, transparent); }
.grh-co-btn { flex: 0 0 auto; border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; align-items: center; opacity: .45; transition: opacity .12s, color .12s; }
.grh-org-card:hover .grh-co-btn { opacity: 1; }
.grh-co-btn:hover { color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 10%, transparent); }
.grh-co-btn.is-set { opacity: 1; color: var(--primary,#0043ff); }
/* 2026-06-23 (Lot 1) — bouton « détacher » direct (calqué sur le co-btn, accent rouge) */
.grh-detach-btn { flex: 0 0 auto; border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-flex; align-items: center; opacity: .4; transition: opacity .12s, color .12s, background .12s; }
.grh-org-card:hover .grh-detach-btn { opacity: .8; }
.grh-detach-btn:hover { opacity: 1; color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.grh-co-pop { position: fixed; z-index: 9600; width: 250px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 10px; }
.grh-co-pop-h { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.grh-co-pop-h strong { color: var(--text); }
.grh-co-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--bg); color: var(--text); }
.grh-co-remove { width: 100%; margin-top: 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--error,#d33); border-radius: 7px; padding: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.grh-co-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.grh-co-opt { font-size: 13px; color: var(--text); padding: 6px 8px; border-radius: 7px; cursor: pointer; display: flex; align-items: baseline; gap: 6px; }
.grh-co-opt:hover { background: color-mix(in srgb, var(--primary,#0043ff) 10%, transparent); }
.grh-co-opt.is-cur { background: color-mix(in srgb, var(--primary,#0043ff) 14%, transparent); font-weight: 600; }
.grh-co-role { font-size: 11px; color: var(--muted); margin-left: auto; }
.grh-co-hint { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.grh-co-check { width: 16px; flex: 0 0 auto; display: inline-flex; justify-content: center; align-items: center; color: var(--primary,#0043ff); }
.grh-co-opt { align-items: center; }
.grh-co-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grh-co-foot { margin-top: 8px; text-align: right; }
.grh-co-done { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; }
.grh-co-done:hover { border-color: var(--primary,#0043ff); color: var(--primary,#0043ff); }
.grh-org-toggle { flex: 0 0 auto; border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; align-items: center; }
.grh-org-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.grh-org-toggle-sp { flex: 0 0 auto; width: 18px; }
.grh-org-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.grh-org-ava--ph { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary,#0043ff) 16%, transparent); color: var(--primary,#0043ff); font-size: 11px; font-weight: 700; }
.grh-org-meta { min-width: 0; }
.grh-org-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grh-org-role { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grh-org-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 1px 7px; }

#panelMarques { padding: 18px 22px 60px; max-width: 1500px; margin: 0 auto; }
.mq-head { margin-bottom: 14px; }
.mq-title { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--text); margin: 0; }
.mq-title svg { color: var(--primary, #0043ff); }
.mq-subtitle { font-size: 13px; font-weight: 500; color: var(--muted); }

/* Filterbar */
.mq-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mq-search { display: flex; align-items: center; gap: 7px; flex: 1 1 280px; min-width: 220px;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; color: var(--muted); }
.mq-search input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 13.5px; color: var(--text); }
.mq-seg, .mq-teams { display: inline-flex; background: var(--subtle); border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; }
.mq-seg-btn, .mq-chip-btn { border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); padding: 5px 12px; border-radius: 7px; transition: all .12s; white-space: nowrap; }
.mq-seg-btn:hover, .mq-chip-btn:hover { color: var(--text); }
.mq-seg-btn.is-active, .mq-chip-btn.is-active { background: var(--card); color: var(--primary, #0043ff); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mq-holes-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; }
.mq-holes-toggle:hover { color: var(--text); }
.mq-holes-toggle.is-active { background: color-mix(in srgb, #e0820b 14%, transparent); border-color: #e0820b; color: #e0820b; }
.mq-mine-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; white-space: nowrap; }
.mq-mine-toggle:hover { color: var(--text); }
.mq-mine-toggle.is-active { background: color-mix(in srgb, var(--primary, #0043ff) 12%, transparent); border-color: var(--primary, #0043ff); color: var(--primary, #0043ff); }
.mq-holes { display: flex; gap: 7px; flex-wrap: wrap; margin: -4px 0 12px; }
.mq-hole-pill { font-size: 11.5px; font-weight: 600; color: #b45309; background: color-mix(in srgb, #e0820b 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0820b 30%, transparent); border-radius: 999px; padding: 2px 10px; }

/* Table */
.mq-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.mq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mq-table thead th { position: sticky; top: 0; z-index: 3; background: var(--subtle); color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mq-table thead th svg { vertical-align: -2px; opacity: .7; }
.mq-th[data-sortcol] { cursor: pointer; user-select: none; white-space: nowrap; }
.mq-th[data-sortcol]:hover { color: var(--text); }
.mq-th.is-sorted { color: var(--primary, #0043ff); }
.mq-sort-arrow { display: inline-flex; vertical-align: -2px; margin-left: 2px; }
.mq-sort-arrow svg { color: var(--primary, #0043ff); }
/* Colonnes figées en scroll horizontal : Rang (left:0) puis Client (left:50px) */
.mq-table td.mq-rang, .mq-table thead th.mq-th-rang {
  position: sticky; left: 0; z-index: 2; background: var(--card); }
.mq-table thead th.mq-th-rang { z-index: 4; background: var(--subtle); }
.mq-table td.mq-client, .mq-table thead th.mq-th-client {
  position: sticky; left: 50px; z-index: 2; background: var(--card); }
.mq-table thead th.mq-th-client { z-index: 4; background: var(--subtle); }
.mq-rang { width: 50px; min-width: 50px; text-align: center; color: var(--muted);
  font-size: 12px; font-variant-numeric: tabular-nums; }
.mq-th-rang { width: 50px; min-width: 50px; }

.mq-group-head td { background: color-mix(in srgb, var(--team-color, #888) 9%, var(--bg, #fff));
  font-weight: 800; font-size: 12px; color: var(--text); padding: 7px 12px;
  border-bottom: 1px solid var(--border); position: sticky; left: 0; }
.mq-group-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.mq-group-count { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }

.mq-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); transition: background .1s; }
.mq-row:hover { background: color-mix(in srgb, var(--primary, #0043ff) 4%, transparent); }
.mq-row.is-inactive { opacity: .5; }
.mq-row > td { padding: 8px 12px; vertical-align: middle; }
.mq-row.is-inactive:hover { opacity: .8; }

.mq-client { min-width: 190px; box-shadow: 1px 0 0 color-mix(in srgb, var(--border) 55%, transparent); }
.mq-row:hover .mq-client { background: color-mix(in srgb, var(--primary, #0043ff) 4%, var(--card)); }
.mq-client-name { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.mq-client-open { cursor: pointer; border-radius: 5px; width: fit-content; }
.mq-client-open:hover { color: var(--primary, #0043ff); text-decoration: underline; text-underline-offset: 2px; }
.mq-client-open:focus-visible { outline: 2px solid var(--primary, #0043ff); outline-offset: 2px; }
.mq-vig { color: #e0820b; display: inline-flex; cursor: pointer; border: none; background: none; padding: 1px; border-radius: 4px; vertical-align: -2px; }
.mq-vig:hover { background: color-mix(in srgb, #e0820b 16%, transparent); }
.mq-client-acr { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mq-exte { color: var(--primary, #0043ff); font-weight: 700; }

.mq-team-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #fff;
  background: var(--team-color, #888); border-radius: 6px; padding: 2px 9px; }
.mq-team.is-editable { cursor: pointer; border-radius: 7px; }
.mq-team.is-editable:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #0043ff) 45%, transparent); }
.mq-popover--team { width: 160px; }

/* People cells */
.mq-people { min-width: 120px; }
.mq-people.is-editable { cursor: pointer; border-radius: 7px; }
.mq-people.is-editable:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #0043ff) 45%, transparent); }
.mq-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.mq-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; background: color-mix(in srgb, var(--primary, #0043ff) 16%, transparent);
  color: var(--primary, #0043ff); font-size: 10px; font-weight: 800; }
.mq-chip-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-people.is-editable .mq-chip-name { cursor: pointer; }
.mq-people.is-editable .mq-chip-name:hover { text-decoration: underline; }
.mq-empty { color: var(--muted); font-size: 12.5px; }
.mq-empty--edit { color: color-mix(in srgb, var(--primary, #0043ff) 70%, var(--muted)); font-weight: 600; opacity: 0; transition: opacity .1s; }
.mq-people.is-editable:hover .mq-empty--edit { opacity: 1; }

/* Frame cell */
.mq-frame { white-space: nowrap; }
.mq-frame-link { display: inline-flex; color: var(--primary, #0043ff); vertical-align: middle; }
.mq-frame-link:hover { filter: brightness(1.2); }
.mq-frame-add { font-size: 11.5px; color: var(--muted); }
.mq-frame-edit { border: none; background: none; cursor: pointer; color: var(--muted); padding: 3px; margin-left: 3px;
  border-radius: 5px; vertical-align: middle; opacity: .5; transition: opacity .1s, color .1s; }
.mq-frame.is-editable:hover .mq-frame-edit { opacity: 1; } /* toujours présent (tactile/découvrabilité), accentué au survol */
.mq-frame-edit:hover { color: var(--primary, #0043ff); background: color-mix(in srgb, var(--primary) 10%, transparent); }

.mq-state-badge { font-size: 11px; font-weight: 600; color: var(--text); background: var(--subtle);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* Popover people */
.mq-popover { position: fixed; z-index: 9000; width: 240px; max-height: 300px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; }
.mq-pop-search { border: none; border-bottom: 1px solid var(--border); outline: none; font: inherit; font-size: 13px;
  padding: 9px 11px; background: var(--subtle); color: var(--text); }
.mq-pop-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.mq-pop-opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); }
.mq-pop-opt:hover, .mq-pop-opt.is-kb { background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent); }
.mq-pop-opt.is-selected { font-weight: 700; color: var(--primary, #0043ff); }
.mq-pop-opt.is-clear { color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; }

/* States */
.mq-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.mq-skel-row { height: 46px; border-radius: 8px; background: linear-gradient(90deg, var(--subtle) 25%, color-mix(in srgb, var(--subtle) 60%, var(--card)) 50%, var(--subtle) 75%);
  background-size: 200% 100%; animation: mqShimmer 1.3s infinite; }
@keyframes mqShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mq-error { display: flex; align-items: center; gap: 9px; color: var(--error, #d33); background: color-mix(in srgb, var(--error, #d33) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error, #d33) 25%, transparent); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; }
.mq-error button, .mq-empty-state button { border: 1px solid var(--border); background: var(--card); cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--primary, #0043ff); padding: 5px 12px; border-radius: 7px; }
.mq-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; color: var(--muted); }
.mq-empty-state svg { opacity: .5; }
.mq-empty-state p { margin: 0; font-size: 14px; }

/* Responsive — sous 900px, on garde la table scrollable horizontalement
   (les colonnes people restent lisibles, le client est figé à gauche). */
@media (max-width: 900px) {
  #panelMarques { padding: 14px 12px 50px; }
  /* On GARDE les noms (les initiales seules sont ambiguës en tactile, et le
     survol-tooltip n'existe pas) — la table scrolle horizontalement, colonne
     Client figée. */
}

/* Fiche client (modale) + circuit « demander un devis » — 2026-06-18 */
.mqm-back { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px 16px; overflow-y: auto; }
.mqm { position: relative; width: 100%; max-width: 540px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 22px 24px 24px; }
.mqm-x { position: absolute; top: 12px; right: 12px; border: none; background: none; color: var(--muted); cursor: pointer; padding: 5px; border-radius: 8px; display: inline-flex; }
.mqm-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.mqm-head { display: flex; align-items: flex-start; gap: 12px; padding-right: 28px; margin-bottom: 16px; }
.mqm-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.mqm-name { font-size: 19px; font-weight: 700; margin: 0; color: var(--text); }
.mqm-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mqm-state { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent); color: var(--primary,#0043ff); white-space: nowrap; }
.mqm-state.is-inactive { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.mqm-info { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 16px; }
.mqm-info-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; }
.mqm-info-row + .mqm-info-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mqm-info-k { flex: 0 0 120px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.mqm-info-v { flex: 1; color: var(--text); min-width: 0; }
.mqm-info-v a { color: var(--primary,#0043ff); text-decoration: none; }
.mqm-info-v a:hover { text-decoration: underline; }
.mqm-vig-row .mqm-info-v { color: #b46a00; }
.mqm-none { color: var(--muted); }
.mqm-chip { display: inline-flex; align-items: center; gap: 5px; }
.mqm-ava { width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--primary,#0043ff) 16%, transparent); color: var(--primary,#0043ff); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mqm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mqm-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 7px; }
.mqm-btn:hover { border-color: var(--primary,#0043ff); }
.mqm-btn--primary { background: var(--primary,#0043ff); border-color: var(--primary,#0043ff); color: #fff; }
.mqm-btn--primary:hover { filter: brightness(1.06); }
.mqm-btn--manual-on { background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); color: #b45309; }
.mqm-btn.is-loading { opacity: .6; pointer-events: none; }
.mqm-form { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.mqm-form-t { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.mqm-form-hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.mqm-l { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.mqm-opt { font-weight: 400; opacity: .8; }
.mqm-in { width: 100%; font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.mqm-in:focus { outline: none; border-color: var(--primary,#0043ff); }
.mqm-ta { resize: vertical; min-height: 56px; }
.mqm-lines { margin-top: 14px; }
.mqm-lines summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.mqm-ltable { width: 100%; border-collapse: collapse; margin: 6px 0; }
.mqm-ltable th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: left; padding: 2px 4px; font-weight: 600; }
.mqm-ltable th.ar, .mqm-ltable td.ar { text-align: right; }
.mqm-ltable td { padding: 2px 4px; }
.mqm-lin { padding: 5px 7px; font-size: 12.5px; }
.mqm-num { max-width: 80px; text-align: right; }
.mqm-lindel { border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.mqm-lindel:hover { color: var(--error,#d33); background: color-mix(in srgb, var(--error,#d33) 12%, transparent); }
.mqm-addline { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px dashed var(--border); background: none; color: var(--primary,#0043ff); border-radius: 8px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; }
.mqm-addline:hover { background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.mqm-ltotal { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.mqm-ltotal strong { color: var(--text); }
.mqm-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════
   ── Onglet Finance (vue AEL, Finance V1 — 2026-06-15) ──
   ════════════════════════════════════════════════════════════════ */
#panelFinance { padding: 18px 22px 80px; max-width: 1280px; margin: 0 auto; }
.fin-m-filter { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); background: color-mix(in srgb, var(--primary,#0043ff) 7%, transparent); border: 1px solid color-mix(in srgb, var(--primary,#0043ff) 22%, transparent); border-radius: 9px; padding: 7px 12px; margin-bottom: 12px; }
.fin-m-filter strong { color: var(--text); }
.fin-m-clearfilter { margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 7px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px; }
.fin-m-clearfilter:hover { color: var(--text); border-color: var(--primary,#0043ff); }
.fin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fin-title { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--text); margin: 0; }
.fin-title svg { color: var(--primary, #0043ff); }
.fin-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.fin-cmdk-hint { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.fin-cmdk-hint kbd { font: inherit; font-size: 11px; background: var(--subtle); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.fin-cmdk-hint:hover { color: var(--text); }

.fin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.fin-tab { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; margin-bottom: -1px; }
.fin-tab:hover { color: var(--text); }
.fin-tab.is-active { color: var(--primary, #0043ff); border-bottom-color: var(--primary, #0043ff); }

/* Page 0 — file d'action */
.fin-page0 { min-height: 200px; }
.fin-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-q-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; transition: box-shadow .12s; }
.fin-q-row:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.fin-q-icon { display: inline-flex; color: var(--primary, #0043ff); flex-shrink: 0; }
.fin-q-main { flex: 1; min-width: 0; }
.fin-q-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fin-q-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.fin-q-cli { color: var(--text); font-weight: 700; }
.fin-q-code { font-size: 10.5px; color: var(--muted); opacity: .7; }
.fin-q-late { color: #dc2626; font-weight: 600; }
.fin-q-amount { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fin-q-action { display: inline-flex; align-items: center; white-space: nowrap; }
/* Badge de statut non-cliquable (relances / abos — pas d'action câblée en V1) */
.fin-q-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.fin-q-badge--late { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, transparent); background: color-mix(in srgb, #dc2626 7%, transparent); }

/* Onglet Retards — barre de tri + regroupement par client + sévérité (2026-06-19) */
.fin-ret-sortbar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.fin-ret-sortlbl { font-size: 12px; color: var(--muted); margin-right: 2px; }
.fin-sortbtn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 999px; padding: 4px 12px; }
.fin-sortbtn:hover { color: var(--text); border-color: var(--primary,#0043ff); }
.fin-sortbtn.is-on { color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent); border-color: color-mix(in srgb, var(--primary,#0043ff) 35%, transparent); }
.fin-ret-group { margin-bottom: 18px; }
.fin-ret-ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 7px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.fin-ret-gname { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fin-ret-gmeta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fin-ret-gmeta strong { color: var(--text); }
.fin-ret-row { border-left: 3px solid var(--border); }
.fin-ret-row--high { border-left-color: #dc2626; }
.fin-ret-row--mid { border-left-color: #f59e0b; }
.fin-ret-row--low { border-left-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.fin-ret-partial { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.fin-ret-amt { display: inline-flex; flex-direction: column; align-items: flex-end; }
.fin-ret-amt-sub { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.fin-ret-pdf { display: inline-flex; color: var(--primary,#0043ff); margin-left: 4px; flex-shrink: 0; }
.fin-ret-subh { font-size: 13px; font-weight: 700; color: var(--text); margin: 22px 0 10px; display: flex; align-items: center; gap: 6px; }

/* Sticky footer 3 chiffres */
.fin-footer { position: sticky; bottom: 0; display: flex; gap: 12px; margin-top: 18px; padding: 14px 0 4px;
  background: linear-gradient(to top, var(--bg, #fff) 70%, transparent); }
.fin-stat { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.fin-stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.fin-stat-val { display: block; font-size: 20px; font-weight: 800; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.fin-stat-val.is-warn { color: #e0820b; }

/* Empty / error / skeleton */
.fin-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; text-align: center; color: var(--muted); }
.fin-empty svg { opacity: .5; }
.fin-empty p { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.fin-empty-hint { font-size: 12.5px; max-width: 420px; }
.fin-empty--mini { padding: 26px 14px; }
.fin-empty--mini p { font-size: 13px; font-weight: 500; color: var(--muted); }

/* 2026-06-18 — Onglet Validations : 2 colonnes (Facturations | Devis) */
.fin-val-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .fin-val-cols { grid-template-columns: 1fr; } }
.fin-val-col { min-width: 0; }
.fin-val-h { display: flex; align-items: center; gap: 7px; min-height: 30px; font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.fin-val-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 1px 8px; }
/* Boutons devis (valider / refuser) */
.fin-dvq-acts { display: inline-flex; gap: 6px; }
.fin-dvq-validate, .fin-dvq-reject { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--card); }
.fin-dvq-validate { color: #fff; background: var(--success, #16a34a); border-color: var(--success, #16a34a); }
.fin-dvq-validate:hover { filter: brightness(1.05); }
.fin-dvq-reject { color: var(--muted); }
.fin-dvq-reject:hover { color: var(--error, #d33); border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); }
/* Zone récupérable « Demandes refusées » (colonne Devis) — icône dans l'en-tête */
.fin-rej-icon { position: relative; cursor: pointer; border: 1px solid transparent; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 7px; }
.fin-rej-icon:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.fin-rej-icon.is-on { color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent); border-color: color-mix(in srgb, var(--primary,#0043ff) 30%, transparent); }
.fin-rej-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: var(--muted); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; }
.fin-rej-icon.is-on .fin-rej-badge { background: var(--primary,#0043ff); }
.fin-rej-list { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.fin-rej-sub { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fin-rej-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.fin-q-row--rej { opacity: .82; }
.fin-q-row--rej .fin-q-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.fin-dvq-restore { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--primary,#0043ff); border-radius: 7px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fin-dvq-restore:hover { border-color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.fin-dvq-delete { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 7px; padding: 5px 8px; display: inline-flex; align-items: center; }
.fin-dvq-delete:hover { color: var(--error,#d33); border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); background: color-mix(in srgb, var(--error,#d33) 8%, transparent); }
/* Onglet Clients : barre toggle actifs/archives */
.fin-c-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fin-c-toggle { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.fin-c-toggle:hover { border-color: var(--primary); }
.fin-c-toggle.is-on { background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent); color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary,#0043ff) 35%, transparent); }
.fin-error { display: flex; align-items: center; gap: 9px; color: var(--error, #d33); background: color-mix(in srgb, var(--error,#d33) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error,#d33) 25%, transparent); border-radius: 10px; padding: 12px 16px; }
.fin-error button { border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; color: var(--primary); padding: 4px 10px; border-radius: 6px; }
.fin-skeleton { display: flex; flex-direction: column; gap: 8px; }
.fin-skel-row { height: 52px; border-radius: 10px; background: linear-gradient(90deg, var(--subtle) 25%, color-mix(in srgb,var(--subtle) 60%,var(--card)) 50%, var(--subtle) 75%); background-size: 200% 100%; animation: mqShimmer 1.3s infinite; }

/* Vues clients */
.fin-c-count { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.fin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table thead th { position: sticky; top: 0; background: var(--subtle); color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fin-table th.fin-num, .fin-table td.fin-num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-c-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); cursor: pointer; transition: background .1s; }
.fin-c-row:last-child { border-bottom: none; }
.fin-c-row:hover { background: color-mix(in srgb, var(--primary, #0043ff) 5%, transparent); }
.fin-c-row > td { padding: 9px 14px; }
.fin-c-name { font-weight: 700; color: var(--text); }
.fin-c-code { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.fin-c-team, .fin-c-tax { font-size: 11px; font-weight: 600; color: var(--text); background: var(--subtle); border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.fin-muted { color: var(--muted); }

/* Sidesheet preview */
.fin-sheet { position: fixed; top: 64px; right: -380px; width: 360px; max-height: calc(100vh - 88px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px 0 0 12px; box-shadow: -8px 0 30px rgba(0,0,0,.14);
  padding: 16px 18px; z-index: 8500; transition: right .18s ease; }
.fin-sheet.is-open { right: 0; }
.fin-sheet-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; }
.fin-sheet-title { font-size: 15px; font-weight: 800; color: var(--text); }
.fin-sheet-code { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fin-sheet-rows { display: flex; flex-direction: column; gap: 7px; }
.fin-sheet-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.fin-sheet-label { color: var(--muted); flex-shrink: 0; }
.fin-sheet-val { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }
.fin-sheet-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }

/* Cmd+K palette */
.fin-palette-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.fin-palette { width: 540px; max-width: 92vw; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.fin-palette-input { width: 100%; border: none; border-bottom: 1px solid var(--border); outline: none; font: inherit; font-size: 15px; padding: 14px 18px; background: var(--card); color: var(--text); box-sizing: border-box; }
.fin-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.fin-palette-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.fin-palette-opt:hover { background: color-mix(in srgb, var(--primary, #0043ff) 10%, transparent); }
.fin-palette-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   ── Modale d'intentions de facturation CdP (Finance V1, Vague 5) ──
   ════════════════════════════════════════════════════════════════ */
.finm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9300; }
.finm-pop { position: fixed; z-index: 9301; top: 4vh; left: 50%; transform: translateX(-50%);
  width: 920px; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.finm-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--card); }
.finm-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--text); }
.finm-title svg { color: var(--primary, #0043ff); }
.finm-month { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.finm-close { border: none; background: none; cursor: pointer; font-size: 18px; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.finm-close:hover { background: var(--subtle); color: var(--text); }
.finm-body { overflow-y: auto; padding: 16px 20px 24px; }
.finm-loading, .finm-error, .finm-empty { padding: 40px; text-align: center; color: var(--muted); }
.finm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.finm-empty svg { opacity: .5; }
.finm-intro { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.finm-missions { display: flex; flex-direction: column; gap: 14px; }
/* Encarts par échéance (mois courant + retards) — remplace la navigation ◀▶ */
.finm-period { margin-bottom: 20px; }
.finm-period-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); text-transform: capitalize; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.finm-period-h svg { color: var(--muted); }
.finm-period-n { font-size: 11px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 1px 8px; }
.finm-period--late .finm-period-h { color: #b45309; border-bottom-color: color-mix(in srgb, #b45309 35%, var(--border)); }
.finm-period--late .finm-period-h svg { color: #b45309; }
.finm-period--late .finm-period-n { color: #b45309; background: color-mix(in srgb, #b45309 14%, transparent); }
.finm-period--late .finm-mission { border-color: color-mix(in srgb, #b45309 30%, var(--border)); }

/* ── Modale de tranchage (arbitrage factures ↔ missions) ── */
.fin-arb-modal { max-width: 820px; width: 92vw; }
.fin-arb-grp { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--card); overflow: hidden; }
.fin-arb-grp > summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; }
.fin-arb-grp > summary::-webkit-details-marker { display: none; }
.fin-arb-grp > summary svg { color: var(--muted); }
.fin-arb-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 1px 9px; }
.fin-arb-hint { margin: 0 14px 8px; font-size: 12px; color: var(--muted); }
.fin-arb-list { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.fin-arb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.fin-arb-main { flex: 1; min-width: 0; }
.fin-arb-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fin-arb-num { font-weight: 700; font-size: 13px; color: var(--text); }
.fin-arb-meta { font-size: 12px; color: var(--muted); }
.fin-arb-cur { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #b45309; margin-top: 3px; }
.fin-arb-cur svg { color: #b45309; }
.fin-arb-sel { max-width: 280px; flex: 0 1 280px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 12.5px; }
.fin-arb-apply { white-space: nowrap; padding: 7px 13px; border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fin-arb-apply:hover { filter: brightness(1.05); }
.fin-arb-apply:disabled { opacity: .6; cursor: default; }
.fin-arb-row.fin-arb-done { opacity: .55; border-color: color-mix(in srgb, var(--ok, #16a34a) 40%, var(--border)); }
.fin-arb-row.fin-arb-done .fin-arb-apply { background: transparent; color: var(--ok, #16a34a); border-color: transparent; }

.finm-mission { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.finm-mission.is-locked { opacity: .75; }
.finm-m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.finm-m-title { font-size: 14.5px; font-weight: 800; color: var(--text); display: flex; flex-direction: column; }
.finm-m-marque { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.finm-badge { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.finm-badge--draft { background: var(--subtle); color: var(--muted); border: 1px solid var(--border); }
.finm-badge--sent  { background: color-mix(in srgb, var(--primary,#0043ff) 14%, transparent); color: var(--primary,#0043ff); }
.finm-badge--rej   { background: color-mix(in srgb, #e0820b 16%, transparent); color: #b45309; }
.finm-badge--push, .finm-badge--paid { background: color-mix(in srgb, var(--success,#10b981) 16%, transparent); color: var(--success,#10b981); }

.finm-m-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.finm-seg { display: inline-flex; background: var(--subtle); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.finm-seg-btn { border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 7px; }
.finm-seg-btn.is-active { background: var(--card); color: var(--primary,#0043ff); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.finm-seg-btn:disabled { opacity: .5; cursor: default; }
.finm-ent-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--subtle); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.finm-ent-sel { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.finm-noent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #b45309; }

.finm-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; }
.finm-lines th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.finm-lines td { padding: 4px 6px; vertical-align: middle; }
.finm-lines .finm-r { text-align: right; }
.finm-l-prod { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); max-width: 180px; }
.finm-l-label { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); width: 100%; margin-top: 3px; box-sizing: border-box; }
.finm-l-qty { width: 56px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); text-align: right; }
/* Facturation manuelle : quantité à renseigner (0 → bordure d'alerte) + note + chip */
.finm-l-qty--zero { border-color: #f59e0b; box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 22%, transparent); background: color-mix(in srgb, #f59e0b 7%, var(--card)); }
.finm-manual-note { font-size: 12px; color: #b45309; background: color-mix(in srgb, #f59e0b 10%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 32%, var(--border)); border-radius: 8px; padding: 7px 10px; margin-bottom: 9px; }
.finm-manual-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); border-radius: 999px; padding: 1px 8px; margin-left: 8px; }
.fmi-manual-toggle.is-on { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); color: #b45309; }
.finm-l-pu { width: 80px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); text-align: right; }
.finm-l-total { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.finm-l-del { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 6px; border-radius: 5px; }
.finm-l-del:hover { color: var(--error,#d33); background: color-mix(in srgb,var(--error,#d33) 10%, transparent); }
.finm-addline { border: 1px dashed var(--border); background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--primary,#0043ff); padding: 5px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.finm-total { text-align: right; font-size: 13px; color: var(--muted); margin-top: 6px; }
.finm-total strong { color: var(--text); font-size: 15px; }
.finm-po { margin-top: 8px; }
.finm-po label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b45309; }
.finm-po input { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid #e0820b; border-radius: 8px; background: var(--card); color: var(--text); flex: 1; }
.finm-report, .finm-noinv { font-size: 12.5px; color: var(--muted); padding: 8px 0; }

.finm-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb,var(--border) 60%, transparent); }
.finm-saved { font-size: 11.5px; color: var(--muted); }
.finm-m-actions { display: flex; align-items: center; gap: 8px; }
.finm-doubt { border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.finm-doubt:hover { color: var(--text); }
.finm-submit { border: none; background: var(--primary,#0043ff); color: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.finm-submit:hover { filter: brightness(1.1); }
.finm-submit:disabled { opacity: .5; cursor: default; }

/* ── Finance V6 — bouton push + undo (page0) & nav mois modale ── */
.fin-push { border: none; background: var(--primary,#0043ff); color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fin-push:hover { filter: brightness(1.1); }
.fin-push:disabled { opacity: .6; cursor: default; }
.fin-q-row.is-pushed { background: color-mix(in srgb, var(--success,#10b981) 7%, transparent); }
.fin-pushed-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--success,#10b981); }
.fin-undo { margin-left: 8px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; font-size: 11.5px; color: var(--muted); padding: 4px 9px; border-radius: 7px; }
.fin-undo:hover { color: var(--text); }
/* Modale : navigation mois + bannière retard */
.finm-monthnav { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.finm-mnav { border: 1px solid var(--border); background: var(--card); cursor: pointer; color: var(--muted); display: inline-flex; padding: 3px; border-radius: 6px; }
.finm-mnav:hover { color: var(--primary,#0043ff); }
.finm-mnav:disabled { opacity: .4; cursor: default; }
.finm-overdue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #b45309;
  background: color-mix(in srgb, #e0820b 12%, transparent); border: 1px solid color-mix(in srgb,#e0820b 30%, transparent); border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; }
.finm-gotoprev { border: none; background: #e0820b; color: #fff; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 7px; }

/* ── Finance : zone justificatifs dans la modale (Vague 5/6) ── */
.finm-justifs { margin-top: 10px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.finm-justif-head { font-size: 11.5px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .03em; }
.finm-justif-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.finm-justif-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.finm-justif-list li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.finm-justif-list a { color: var(--primary, #0043ff); text-decoration: none; }
.finm-justif-list a:hover { text-decoration: underline; }
.finm-justif-size { font-size: 11px; color: var(--muted); }
.finm-justif-add { margin-top: 4px; border: 1px dashed var(--border); background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--primary, #0043ff); padding: 5px 11px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.finm-justif-add:hover { background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.finm-justif-msg { margin-left: 8px; font-size: 11.5px; color: var(--muted); }

/* ── Finance V7 — bouton Sync + spin ── */
.fin-head-acts { display: inline-flex; align-items: center; gap: 8px; }
.fin-sync-btn, .fin-help-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; }
.fin-help-btn:hover { color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* ── Modale d'aide (guides Markdown) — Vague 10 ── */
.fin-help-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 10, 16, .62);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; backdrop-filter: blur(2px);
  animation: finHelpIn .14s ease; }
@keyframes finHelpIn { from { opacity: 0; } to { opacity: 1; } }
.fin-help-modal { width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--card, #14161c); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.fin-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex: none; }
.fin-help-title { font-size: 15px; font-weight: 800; color: var(--text); }
.fin-help-close { cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); background: none; border: none;
  width: 30px; height: 30px; border-radius: 8px; }
.fin-help-close:hover { background: var(--bg); color: var(--text); }
.fin-help-body { padding: 8px 24px 26px; overflow-y: auto; }

/* ── Rendu Markdown générique (.md-doc) ── */
.md-doc { color: var(--text); font-size: 14px; line-height: 1.6; }
.md-doc .md-h { font-weight: 800; color: var(--text); line-height: 1.25; }
.md-doc .md-h1 { font-size: 22px; margin: 18px 0 6px; }
.md-doc .md-h2 { font-size: 16px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.md-doc .md-h1 + * , .md-doc .md-h2:first-child { border-top: 0; }
.md-doc .md-h3 { font-size: 14px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.md-doc .md-p { margin: 8px 0; }
.md-doc .md-ul, .md-doc .md-ol { margin: 8px 0; padding-left: 22px; }
.md-doc .md-ul li, .md-doc .md-ol li { margin: 4px 0; }
.md-doc a { color: var(--primary, #0043ff); }
.md-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.md-doc .md-hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.md-doc .md-quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--primary, #0043ff);
  background: color-mix(in srgb, var(--primary,#0043ff) 7%, transparent); border-radius: 0 8px 8px 0; color: var(--text); }
.md-doc .md-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.md-doc .md-table th, .md-doc .md-table td { border: 1px solid var(--border); padding: 8px 11px; text-align: left; vertical-align: top; }
.md-doc .md-table th { background: var(--bg); font-weight: 700; }
.md-doc .md-table tr:nth-child(even) td { background: color-mix(in srgb, var(--muted) 6%, transparent); }

/* ── Rapprochement missions finance ↔ Orga (Vague 10+) ── */
.fml-modal { width: min(840px, 100%); }
.fml-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.fml-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.fml-pill--amb { color: #d97706; border-color: color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 8%, transparent); }
.fml-pill--none { color: var(--muted); }
.fml-pill--auto { color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.fml-pill--ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, transparent); }
.fml-group { margin-bottom: 18px; }
.fml-group-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.fml-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.fml-main { flex: 1; min-width: 0; }
.fml-fin { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fml-meta { font-weight: 500; color: var(--muted); font-size: 12px; }
.fml-cands { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.fml-cand { font-size: 10.5px; color: var(--muted); border: 1px dashed var(--border); border-radius: 6px; padding: 1px 6px; }
.fml-cand.is-best { color: var(--text); border-style: solid; border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.fml-cand em { opacity: .6; font-style: normal; }
.fml-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.fml-badge--ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, transparent); }
.fml-badge--auto { color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.fml-badge--amb { color: #d97706; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.fml-badge--none { color: var(--muted); }
.fml-act { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.fml-sel { font: inherit; font-size: 12px; max-width: 220px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.fml-confirm { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: #fff; background: #16a34a; border: none; border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 4px; }
.fml-confirm:hover { filter: brightness(1.08); }

/* ── Suivi des missions (sous-onglet Missions) ── */
.fin-mtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-mtable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.fin-mtable th.ar, .fin-mtable td.ar { text-align: right; }
.fin-mtable td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.fin-m-row { cursor: pointer; }
.fin-m-row:hover td { background: color-mix(in srgb, var(--primary,#0043ff) 5%, transparent); }
.fin-m-name { font-weight: 700; color: var(--text); }
.fin-m-cli { color: var(--muted); }
.fin-m-etat { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.fin-m-etat--live { color: var(--primary,#0043ff); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.fin-m-etat--done { color: var(--muted); }
.fin-m-etat--soon { color: #d97706; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.fin-m-see { cursor: pointer; background: none; border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; color: var(--muted); }
.fin-m-see:hover { color: var(--primary,#0043ff); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.fin-m-note { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.fin-m-cli-tot { display: block; font-size: 11px; color: var(--muted); opacity: .85; font-weight: 500; margin-top: 1px; }
.fin-m-over { color: #d97706; font-weight: 700; }
.fin-m-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.fin-m-cad { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.fin-m-plan { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.fin-m-plan.ok { color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 10%, transparent); }
.fin-m-plan.none { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.fin-m-suivi { display: flex; align-items: flex-start; gap: 7px; min-width: 110px; }
.fin-m-suivi .fin-m-pct { margin-top: 5px; }   /* recentre la barre (6px) sur la 1re ligne de texte des cellules voisines (vertical-align:top) */
.fin-m-pct { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; max-width: 70px; }
.fin-m-pct span { display: block; height: 100%; border-radius: 999px; }
.fin-m-pct--low span { background: #dc2626; }
.fin-m-pct--mid span { background: #f59e0b; }
.fin-m-pct--done span { background: #16a34a; }
.fin-m-pct--over span { background: #d97706; }
.fin-m-pct-v { font-size: 11px; font-weight: 700; color: var(--muted); }
.fmi-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fmi-sum-box { flex: 1; min-width: 110px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--card); }
.fmi-sum-box span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.fmi-sum-box strong { font-size: 17px; color: var(--text); }
.fmi-devis { margin-bottom: 18px; }
.fmi-devis summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.fmi-h { font-size: 13px; font-weight: 700; color: var(--text); margin: 8px 0 6px; display: flex; align-items: center; gap: 6px; }
.fmi-kind { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); }
.fmi-kind--honos { color: var(--primary,#0043ff); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.fmi-kind--refact { color: #d97706; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.fmi-cov { font-size: 10.5px; font-weight: 600; color: #d97706; margin-left: 6px; }
/* Éditeur de devis (Phase D) */
.fmi-devis-table .fmi-e { font: inherit; font-size: 12.5px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); width: 100%; }
.fmi-devis-table .fmi-num { max-width: 88px; text-align: right; }
.fmi-del { cursor: pointer; background: none; border: none; color: var(--muted); padding: 3px; }
.fmi-del:hover { color: #dc2626; }
.fmi-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.fmi-addrow select, .fmi-addrow input { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.fmi-add-prod { min-width: 180px; }
.fmi-add-qty, .fmi-add-pu { max-width: 90px; }
.fmi-addbtn { cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--primary,#0043ff); border: none; border-radius: 7px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 5px; }
.fmi-addbtn:hover { filter: brightness(1.08); }
.fmi-addbtn:disabled { opacity: .6; cursor: default; }
.fmi-modal { width: min(720px, 100%); }
.fmi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fmi-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.fmi-table th.ar, .fmi-table td.ar { text-align: right; }
.fmi-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.fmi-table a { color: var(--primary,#0043ff); display: inline-flex; }
.fmi-tag { font-size: 10px; font-weight: 700; color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 10%, transparent); border-radius: 5px; padding: 1px 5px; }
.fmi-st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.fmi-st--ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, transparent); }
.fmi-st--late { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, transparent); }
.fmi-st--sent { color: var(--primary,#0043ff); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.fmi-st--none { color: var(--muted); }

/* ── Refonte modale Missions (2026-06-18) : devis initial protégé + compléments ── */
.fmi-devis summary { justify-content: flex-start; flex-wrap: wrap; }
.fmi-devis-sumv { margin-left: auto; font-size: 13px; color: var(--text); }
.fmi-devis--locked > summary { color: var(--text); }
.fmi-locked-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 5px; padding: 1px 6px; }
.fmi-unlocked-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #d97706; background: color-mix(in srgb, #f59e0b 14%, transparent); border-radius: 5px; padding: 1px 6px; }
.fmi-edit-btn, .fmi-lock-btn { margin-left: 8px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 7px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; }
.fmi-edit-btn:hover { border-color: var(--primary,#0043ff); color: var(--primary,#0043ff); }
.fmi-lock-btn { background: var(--success,#16a34a); border-color: var(--success,#16a34a); color: #fff; }
.fmi-devis-table--ro { width: 100%; border-collapse: collapse; font-size: 13px; opacity: .92; }
.fmi-devis-table--ro th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.fmi-devis-table--ro th.ar, .fmi-devis-table--ro td.ar { text-align: right; }
.fmi-devis-table--ro td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fmi-warn { font-size: 11.5px; color: #b45309; background: color-mix(in srgb, #f59e0b 9%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent); border-radius: 8px; padding: 6px 10px; margin: 2px 0 10px; display: flex; align-items: center; gap: 6px; }
.fmi-devis-empty, .fmi-devis-hint { font-size: 12.5px; color: var(--muted); padding: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.fmi-devis-hint { padding: 4px 0 10px; }
.fmi-h-hint { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.fmi-h-hint--block { display: block; margin: 0 0 8px; line-height: 1.4; }
.fmi-mi-add { margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--primary,#0043ff); border-radius: 7px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; }
.fmi-mi-add:hover { border-color: var(--primary,#0043ff); background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.fmi-mi-del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.fmi-mi-del:hover { color: var(--error,#d33); background: color-mix(in srgb, var(--error,#d33) 12%, transparent); }
/* Plan de facturation (échéances) */
.fmi-plan-over { color: #b45309; font-weight: 600; }
.fmi-plan-period { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.fmi-plan-period.is-locked { opacity: .7; }
.fmi-plan-phead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fmi-plan-label { flex: 1; min-width: 80px; font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; background: var(--bg); color: var(--text); }
.fmi-plan-month { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; background: var(--bg); color: var(--text); }
.fmi-plan-tot { font-size: 12.5px; font-weight: 700; color: var(--text); margin-left: auto; font-variant-numeric: tabular-nums; }
.fmi-plan-savep, .fmi-plan-delp { border: 1px solid var(--border); background: var(--card); cursor: pointer; padding: 4px 7px; border-radius: 6px; display: inline-flex; color: var(--muted); }
.fmi-plan-savep:hover { color: var(--success,#16a34a); border-color: color-mix(in srgb, var(--success,#16a34a) 40%, transparent); }
.fmi-plan-delp:hover { color: var(--error,#d33); border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); }
.fmi-plan-table { width: 100%; }
.fmi-plan-table td { padding: 3px 4px; border: none; }
.fmi-plan-l { width: 100%; font: inherit; font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; background: var(--card); color: var(--text); }
.fmi-plan-l.fmi-num { max-width: 90px; text-align: right; }
.fmi-plan-delline { border: none; background: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 5px; display: inline-flex; }
.fmi-plan-delline:hover { color: var(--error,#d33); }
.fmi-plan-addprod { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: var(--card); color: var(--text); }
.fmi-plan-addpu { font: inherit; font-size: 12px; max-width: 90px; text-align: right; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; background: var(--card); color: var(--text); }
.fmi-plan-addline, .fmi-plan-addp { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px dashed var(--border); background: none; color: var(--primary,#0043ff); border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 4px; }
.fmi-plan-addp { margin-top: 6px; }
.fmi-plan-addline:hover, .fmi-plan-addp:hover { background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent); }
.fmi-itable td { vertical-align: middle; }
.fmi-inv--here { background: color-mix(in srgb, var(--primary,#0043ff) 5%, transparent); }
.fmi-tag--other { color: #d97706; background: color-mix(in srgb, #f59e0b 12%, transparent); }
.fmi-inv-link, .fmi-inv-unlink { font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 7px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fmi-inv-link:hover { border-color: var(--primary,#0043ff); color: var(--primary,#0043ff); }
.fmi-inv-unlink { color: var(--muted); }
.fmi-inv-unlink:hover { border-color: color-mix(in srgb, var(--error,#d33) 40%, transparent); color: var(--error,#d33); }
.fmi-inv-link:disabled, .fmi-inv-unlink:disabled { opacity: .5; pointer-events: none; }

/* ── Mini-modales +Mission / +Client (2026-06-18) ── */
.fmm-modal { max-width: 480px; }
.fmm-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; display: flex; align-items: flex-start; gap: 6px; }
.fmm-form { display: flex; flex-direction: column; gap: 12px; }
.fmm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fmm-form input[type="text"], .fmm-form input[type="number"], .fmm-form select { font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--bg); color: var(--text); }
.fmm-form input:focus, .fmm-form select:focus { outline: none; border-color: var(--primary,#0043ff); }
.fmm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fmm-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; color: var(--text) !important; }
.fmm-check input { width: auto; }
.fmm-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.fmm-opt { font-weight: 400; color: var(--muted); font-size: 11px; }
/* Phase 2 — modale création entité Pennylane (onglets + formulaire + axes) */
.fmc-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.fmc-tab { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--muted); padding: 7px 10px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; margin-bottom: -1px; }
.fmc-tab.is-active { color: var(--primary,#0043ff); border-bottom-color: var(--primary,#0043ff); }
.fmc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fmc-create-form textarea { font: inherit; font-size: 13.5px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--bg); color: var(--text); resize: vertical; }
.fmc-create-form textarea:focus { outline: none; border-color: var(--primary,#0043ff); }
.fmc-cat-block { border: 1px dashed var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.fmc-cat-head { font-size: 12px; font-weight: 700; color: var(--muted); }
.fmc-cat-row { display: grid; grid-template-columns: 1fr 72px 28px; gap: 6px; align-items: center; }
.fmc-cat-row select, .fmc-cat-row input { font: inherit; font-size: 12.5px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 7px; background: var(--bg); color: var(--text); }
.fmc-cat-del { cursor: pointer; border: 1px solid var(--border); background: var(--card); border-radius: 7px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 5px; }
.fmc-cat-del:hover { color: var(--error,#d33); border-color: var(--error,#d33); }
.fmc-cat-add { align-self: flex-start; cursor: pointer; border: none; background: none; color: var(--primary,#0043ff); font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 2px; }
.fmc-cat-sum { font-size: 12px; color: var(--muted); }
.fmc-cat-sum .fmc-ok { color: var(--success,#16a34a); }
.fmc-cat-sum .fmc-bad { color: var(--error,#d33); }
.fin-new-btn--primary { background: var(--primary,#0043ff); border-color: var(--primary,#0043ff); color: #fff; }
.fin-new-btn--primary:hover { filter: brightness(1.07); }
.fin-new-btn--primary { text-decoration: none; }
.fmc-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 6px; text-align: center; }
.fmc-success-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--success,#16a34a) 16%, transparent); color: var(--success,#16a34a); }
.fmc-success-t { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.fmc-success-warn { font-size: 12.5px; color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); border-radius: 8px; padding: 8px 10px; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fmc-success-warn .fmc-retry-cat { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid currentColor; background: none; color: #b45309; border-radius: 6px; padding: 3px 9px; }
.fmc-success-acts { display: flex; gap: 8px; margin-top: 4px; }

/* ── Modale AE « Nouvelle facture » (brouillon Pennylane) ── */
.fin-new-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--primary, #0043ff); border: 1px solid var(--primary, #0043ff); border-radius: 8px; padding: 5px 12px; }
.fin-new-btn:hover { filter: brightness(1.08); }
.fdm-modal { width: min(720px, 100%); }
.fdm-step { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 10px; }
.fdm-search { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); margin-bottom: 10px; }
.fdm-results { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.fdm-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; cursor: pointer; }
.fdm-res:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary,#0043ff) 5%, transparent); }
.fdm-res-cli { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.fdm-res-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fdm-empty { color: var(--muted); font-style: italic; padding: 12px 0; }
.fdm-mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fdm-back { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 4px; }
.fdm-back:hover { color: var(--primary, #0043ff); }
.fdm-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fdm-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.fdm-lab--m { margin-left: 12px; }
.fdm-ent, .fdm-month { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.fdm-ent-one { font-weight: 700; color: var(--text); }
.fdm-noent { font-size: 12.5px; color: #d97706; display: inline-flex; align-items: center; gap: 5px; }
.fdm-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.fdm-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 6px; }
.fdm-lines td { padding: 4px 6px; vertical-align: middle; }
.fdm-lines input, .fdm-lines select { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); width: 100%; }
.fdm-l-qty { max-width: 56px; }
.fdm-l-pu { max-width: 90px; }
.fdm-l-del { cursor: pointer; background: none; border: none; color: var(--muted); padding: 4px; }
.fdm-l-del:hover { color: #dc2626; }
.fdm-addline { margin-top: 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--primary, #0043ff); background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 5px; }
.fdm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.fdm-total { font-size: 14px; color: var(--text); }
.fdm-total strong { font-size: 18px; }
.fdm-create { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--primary, #0043ff); border: none; border-radius: 9px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 6px; }
.fdm-create:hover { filter: brightness(1.08); }
.fdm-create:disabled { opacity: .55; cursor: default; }
.fdm-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.fdm-done { text-align: center; padding: 26px 10px; color: var(--text); }
.fdm-done svg { color: #16a34a; }
.fdm-done-t { font-size: 16px; font-weight: 800; margin: 10px 0 4px; }
.fdm-done-s { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.fdm-done-acts { display: inline-flex; gap: 10px; }
.fdm-undo, .fdm-close2 { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 8px 14px; }
.fdm-undo { color: #dc2626; background: none; border: 1px solid color-mix(in srgb, #dc2626 40%, transparent); }
.fdm-undo:disabled { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, transparent); cursor: default; }
.fdm-close2 { color: #fff; background: var(--primary, #0043ff); border: none; }

/* Bouton aide modale CdP */
.finm-head-acts { display: inline-flex; align-items: center; gap: 8px; }
.finm-help { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; }
.finm-help:hover { color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.fin-sync-btn:hover { color: var(--primary, #0043ff); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.fin-sync-btn:disabled { opacity: .6; cursor: default; }
.fin-sync-btn.is-spin svg { animation: mqShimmer 0s; animation: finSpin .8s linear infinite; }
@keyframes finSpin { to { transform: rotate(360deg); } }
.fin-sync-btn.is-spin svg { transform-origin: center; }

/* ── Finance V9 — vue Direction (Thomas) : 3 KPIs + alertes ── */
.fin-direction { display: flex; flex-direction: column; gap: 22px; }
.fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .fin-kpis { grid-template-columns: 1fr; } }
.fin-kpi {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card);
}
.fin-kpi-ico {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary,#0043ff) 12%, transparent);
  color: var(--primary, #0043ff);
}
.fin-kpi-body { min-width: 0; }
.fin-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.fin-kpi-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.05; letter-spacing: -.5px; }
.fin-kpi-value.is-neg { color: #dc2626; }
.fin-kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.fin-kpi-delta { font-weight: 700; }
.fin-kpi-delta.is-up { color: #16a34a; }
.fin-kpi-delta.is-down { color: #dc2626; }

.fin-dir-sec { display: flex; flex-direction: column; gap: 10px; }
.fin-dir-h3 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.fin-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-alert {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 10px; font-size: 13.5px; color: var(--text);
  border: 1px solid var(--border); background: var(--card);
}
.fin-alert-ico { flex: none; display: inline-flex; }
.fin-alert-label { flex: 1; min-width: 0; }
.fin-alert-meta { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.fin-alert--critical { border-color: color-mix(in srgb, #dc2626 45%, transparent); background: color-mix(in srgb, #dc2626 7%, transparent); }
.fin-alert--critical .fin-alert-ico { color: #dc2626; }
.fin-alert--warn { border-color: color-mix(in srgb, #f59e0b 50%, transparent); background: color-mix(in srgb, #f59e0b 8%, transparent); }
.fin-alert--warn .fin-alert-ico { color: #d97706; }
.fin-alert--info .fin-alert-ico { color: var(--primary, #0043ff); }
.fin-alerts-empty { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #16a34a; padding: 12px 0; }
.fin-alerts-empty svg { color: #16a34a; }

.fin-dir-foot { padding-top: 2px; }
.fin-link-ael {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--primary, #0043ff);
  background: none; border: none; padding: 0;
}
.fin-link-ael:hover { text-decoration: underline; }
.fin-dir-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-style: italic; }
.fin-dir-warn { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #d97706; margin-top: 10px;
  padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 8%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); }

/* ── Finance V8 — vue Demandes Ads (Anaëlle) ── */
.fin-ads-eng { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); background: color-mix(in srgb, var(--primary,#0043ff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.fin-ads-eng strong { font-size: 16px; }
.fin-ads-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .fin-ads-cols { grid-template-columns: 1fr; } }
.fin-ads-h { font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.fin-ads-card { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--card); margin-bottom: 8px; }
.fin-ads-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-ads-camp { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fin-ads-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fin-ads-card-acts { display: flex; gap: 8px; margin-top: 9px; }
.fin-ads-send { border: none; background: var(--primary,#0043ff); color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; }
.fin-ads-send:hover { filter: brightness(1.1); }
.fin-ads-del { border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 8px; }
.fin-ads-del:hover { color: var(--error,#d33); border-color: color-mix(in srgb,var(--error,#d33) 40%, transparent); }
.fin-ads-new { margin-top: 12px; }
.fin-ads-new summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary,#0043ff); padding: 8px 0; }
.fin-ads-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--subtle); }
.fin-ads-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.fin-ads-form input, .fin-ads-form select { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); }
.fin-ads-form label:nth-child(1), .fin-ads-form label:nth-child(2) { grid-column: 1 / -1; }
.fin-ads-create { grid-column: 1 / -1; border: none; background: var(--primary,#0043ff); color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 9px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fin-ads-pay { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.fin-ads-paylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (Phase 1) — onglet Docs : layout + viewer ProseMirror
 *   Design tokens cf. doc_editor_spec.md §7. Surfaces alignées sur
 *   le thème app (var(--bg/--card/--border/--text/--muted/--primary))
 *   → dark mode auto. Tokens fixes : radius / spacing / typo / anim.
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --tf-doc-radius-xs: 4px; --tf-doc-radius-sm: 8px; --tf-doc-radius-md: 12px;
  --tf-doc-radius-lg: 16px; --tf-doc-radius-xl: 24px;
  --tf-doc-tint: rgba(0,67,255,.07);
  --tf-doc-ease: cubic-bezier(0.2,0,0,1);
  --tf-doc-info: #0043ff; --tf-doc-success: #2eb67d; --tf-doc-warn: #f2994a; --tf-doc-danger: #e5484d;
}

/* Layout 2 panneaux (sidebar liste + canvas) */
#panelDocs { position: absolute; inset: 0; top: var(--header-h, 56px); }
.docs-layout { display: flex; height: 100%; background: var(--bg); }
.docs-sidebar { width: 280px; flex: 0 0 280px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--card); }
.docs-side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.docs-side-title { font-size: 15px; font-weight: 700; color: var(--text); }
.docs-refresh { border: none; background: none; color: var(--muted); font-size: 16px; cursor: pointer; border-radius: var(--tf-doc-radius-sm); width: 28px; height: 28px; transition: background var(--tf-doc-ease) 120ms; }
.docs-refresh:hover { background: var(--bg); color: var(--text); }
.docs-search { margin: 0 12px 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.docs-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--tf-doc-tint); }
.docs-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.doc-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 9px 11px; border-radius: var(--tf-doc-radius-sm); transition: background var(--tf-doc-ease) 120ms; }
.doc-card:hover { background: var(--bg); }
.doc-card.is-active { background: var(--tf-doc-tint); }
.doc-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.doc-card-pin { color: var(--primary); font-weight: 700; }

/* Canvas central */
.docs-canvas { flex: 1; overflow-y: auto; }
.doc-page { max-width: 760px; margin: 0 auto; padding: 48px 32px 120px; }
.doc-head { margin-bottom: 24px; }
.doc-title-h { font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.doc-meta { font-size: 13px; color: var(--muted); }
.doc-loading, .doc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 240px; color: var(--muted); font-size: 14px; text-align: center; padding: 24px; }
.doc-empty--side { min-height: 80px; height: auto; padding: 24px 12px; font-size: 12.5px; }
.doc-empty-ico { font-size: 32px; opacity: .7; }
.doc-empty-sub { font-size: 12px; opacity: .8; }

/* Contenu ProseMirror (read-only Phase 1) */
.doc-pm { font-size: 15px; line-height: 1.65; color: var(--text); }
.doc-pm:focus { outline: none; }
.doc-pm p { margin: 0 0 12px; }
.doc-pm h1 { font-size: 28px; line-height: 1.3; font-weight: 700; margin: 28px 0 12px; }
.doc-pm h2 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 24px 0 10px; }
.doc-pm h3 { font-size: 18px; line-height: 1.4; font-weight: 600; margin: 20px 0 8px; }
.doc-pm ul, .doc-pm ol { margin: 0 0 12px; padding-left: 26px; }
.doc-pm li { margin: 2px 0; }
.doc-pm li > p { margin: 0 0 4px; }
.doc-pm blockquote { margin: 0 0 12px; padding: 2px 0 2px 16px; border-left: 3px solid var(--primary); color: var(--muted); font-style: italic; }
.doc-pm pre { margin: 0 0 16px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); overflow-x: auto; font: 13.5px/1.55 'JetBrains Mono', ui-monospace, monospace; }
.doc-pm pre code { background: none; padding: 0; font: inherit; }
.doc-pm code { background: var(--tf-doc-tint); border-radius: var(--tf-doc-radius-xs); padding: 1px 5px; font: 13.5px/1.4 'JetBrains Mono', ui-monospace, monospace; }
.doc-pm hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.doc-pm a { color: var(--primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.doc-pm a:hover { border-bottom-color: var(--primary); }

/* Callouts (Obsidian-like) */
.doc-callout { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--tf-doc-radius-md); background: var(--tf-doc-tint); border-left: 3px solid var(--tf-doc-info); }
.doc-callout--warning { background: color-mix(in srgb, var(--tf-doc-warn) 9%, transparent); border-left-color: var(--tf-doc-warn); }
.doc-callout--success { background: color-mix(in srgb, var(--tf-doc-success) 10%, transparent); border-left-color: var(--tf-doc-success); }
.doc-callout--danger  { background: color-mix(in srgb, var(--tf-doc-danger) 9%, transparent); border-left-color: var(--tf-doc-danger); }
.doc-callout-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; color: var(--text); }
.doc-callout-body > :last-child { margin-bottom: 0; }
/* Pastille de couleur (ouvre la palette) */
.doc-callout-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; background: var(--tf-doc-info); }
.doc-callout--warning .doc-callout-swatch { background: var(--tf-doc-warn); }
.doc-callout--success .doc-callout-swatch { background: var(--tf-doc-success); }
.doc-callout--danger  .doc-callout-swatch { background: var(--tf-doc-danger); }
.doc-callout--custom  .doc-callout-swatch { background: currentColor; }
.doc-callout-title { cursor: text; }
/* Palette de couleurs du callout */
.doc-callout-palette { position: absolute; z-index: 9300; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px; }
.doc-cp-row { display: flex; gap: 6px; margin-bottom: 8px; }
.doc-cp-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.doc-cp-swatch:hover { border-color: var(--border); }
.doc-cp-swatch--info { background: var(--tf-doc-info); }
.doc-cp-swatch--warning { background: var(--tf-doc-warn); }
.doc-cp-swatch--success { background: var(--tf-doc-success); }
.doc-cp-swatch--danger { background: var(--tf-doc-danger); }
.doc-cp-custom { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.doc-cp-custom input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; }

/* Toggle (section repliable) */
.doc-toggle { margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); overflow: hidden; }
.doc-toggle-head { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; padding: 10px 14px; background: var(--bg); color: var(--text); }
.doc-toggle-arrow { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 12px; line-height: 1; padding: 2px; transition: transform var(--tf-doc-ease) 120ms; }
.doc-toggle.is-collapsed .doc-toggle-arrow { transform: rotate(-90deg); }
.doc-toggle-title { cursor: text; }
.doc-toggle-body { padding: 12px 14px; }
.doc-toggle-body > :last-child { margin-bottom: 0; }
.doc-toggle.is-collapsed .doc-toggle-body { display: none; }

/* Drag & drop de réorganisation : ligne indicatrice + état pendant le drag */
.doc-drop-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); border-radius: 2px; pointer-events: none; z-index: 50; }
.doc-drop-line::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.doc-pm.doc-dragging, .doc-dragging .ProseMirror { cursor: grabbing; }

/* ── Tableaux (prosemirror-tables) ── */
.doc-pm table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0 0 16px; overflow: hidden; }
.doc-pm table td, .doc-pm table th { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; position: relative; box-sizing: border-box; min-width: 40px; }
.doc-pm table th { background: var(--bg); font-weight: 600; text-align: left; }
.doc-pm table td > :last-child, .doc-pm table th > :last-child { margin-bottom: 0; }
.doc-pm table p { margin: 0; }
.doc-pm .selectedCell { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.doc-pm .selectedCell::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 8%, transparent); pointer-events: none; }
.doc-pm .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--primary); cursor: col-resize; z-index: 20; }
.doc-pm.resize-cursor { cursor: col-resize; }
/* Toolbar contextuelle de tableau */
.doc-table-toolbar { position: absolute; z-index: 60; display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 3px; }
.doc-table-toolbar button { border: none; background: none; cursor: pointer; padding: 4px 8px; border-radius: var(--tf-doc-radius-xs); font: inherit; font-size: 12px; color: var(--text); white-space: nowrap; }
.doc-table-toolbar button:hover { background: var(--tf-doc-tint); }
.doc-table-toolbar button.is-danger { color: var(--tf-doc-danger); }

/* ── Phase 6 — Commentaires ── */
.doc-comment-mark { background: color-mix(in srgb, #f59e0b 22%, transparent); border-bottom: 1.5px solid #f59e0b; cursor: pointer; border-radius: 2px; }
.doc-comment-mark.is-flash { background: color-mix(in srgb, #f59e0b 45%, transparent); transition: background .3s; }
.doc-comment-mark.is-resolved { background: none; border-bottom: 1px dotted var(--border); opacity: .7; }
/* Bouton flottant « Commenter » sur sélection */
.doc-comment-selbtn { position: absolute; z-index: 9400; background: var(--text); color: var(--card); border: none; border-radius: var(--tf-doc-radius-sm); padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.doc-comment-selbtn:hover { opacity: .9; }
/* Popover de création */
.doc-comment-composer { position: absolute; z-index: 9400; width: 320px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 10px; }
.doc-cc-quote { font-size: 12px; color: var(--muted); border-left: 2px solid #f59e0b; padding: 2px 0 2px 8px; margin-bottom: 8px; max-height: 48px; overflow: hidden; }
.doc-cc-text { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); padding: 7px 9px; font: inherit; font-size: 13px; resize: vertical; background: var(--bg); color: var(--text); }
.doc-cc-text:focus { outline: none; border-color: var(--primary); }
.doc-cc-mentions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.doc-cc-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--tf-doc-tint); color: var(--primary); border-radius: 10px; padding: 1px 4px 1px 8px; font-size: 11.5px; font-weight: 600; }
.doc-cc-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 11px; padding: 0 2px; }
.doc-cc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.doc-cc-cancel { border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; }
.doc-cc-send { border: none; background: var(--primary); color: #fff; cursor: pointer; border-radius: var(--tf-doc-radius-sm); padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; }
.doc-cc-send:disabled { opacity: .5; cursor: progress; }
.doc-cc-mention-dd { position: absolute; left: 10px; right: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); box-shadow: 0 8px 22px rgba(0,0,0,.16); margin-top: 2px; z-index: 9500; max-height: 180px; overflow-y: auto; }
.doc-cc-mention-dd button { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--text); }
.doc-cc-mention-dd button:hover { background: var(--tf-doc-tint); }
/* Sidebar des fils */
.doc-comments-panel { position: fixed; top: 0; right: 0; width: 340px; max-width: 90vw; height: 100vh; background: var(--card); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(0,0,0,.12); z-index: 9350; display: flex; flex-direction: column; }
.doc-cm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.doc-cm-close { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 16px; }
.doc-cm-list { flex: 1; overflow-y: auto; padding: 12px; }
.doc-cm-empty { color: var(--muted); font-size: 13px; padding: 16px 8px; text-align: center; }
.doc-cm-resolved-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 8px; }
.doc-cm-thread { border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); padding: 10px; margin-bottom: 10px; cursor: pointer; }
.doc-cm-thread.is-focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.doc-cm-thread.is-resolved { opacity: .62; }
.doc-cm-quote { font-size: 12px; color: var(--muted); border-left: 2px solid #f59e0b; padding: 2px 0 2px 8px; margin-bottom: 8px; }
.doc-cm-c { margin-bottom: 8px; }
.doc-cm-c-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.doc-cm-c-meta strong { color: var(--text); }
.doc-cm-del { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 11px; opacity: .6; }
.doc-cm-del:hover { opacity: 1; }
.doc-cm-c-body { font-size: 13.5px; color: var(--text); white-space: pre-wrap; margin-top: 2px; }
.doc-cm-thread-foot { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.doc-cm-reply { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); padding: 5px 8px; font: inherit; font-size: 12.5px; background: var(--bg); color: var(--text); }
.doc-cm-reply:focus { outline: none; border-color: var(--primary); }
.doc-cm-resolve, .doc-cm-reopen { border: 1px solid var(--border); background: none; cursor: pointer; border-radius: var(--tf-doc-radius-sm); padding: 5px 9px; font: inherit; font-size: 12px; color: var(--muted); white-space: nowrap; }
.doc-cm-resolve:hover { border-color: var(--tf-doc-success); color: var(--tf-doc-success); }
.doc-comments-btn { border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; padding: 5px 10px; border-radius: var(--tf-doc-radius-sm); font: inherit; font-size: 12.5px; }
.doc-comments-btn:hover { background: var(--tf-doc-tint); color: var(--text); }
/* Bouton ⋯ « plus d'actions » + menu */
.doc-more-btn { border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; padding: 5px 10px; border-radius: var(--tf-doc-radius-sm); font: inherit; font-size: 14px; line-height: 1; }
.doc-more-btn:hover { background: var(--tf-doc-tint); color: var(--text); }
.doc-more-menu { min-width: 200px; z-index: 9300; }
/* Picker « Déplacer sous… » */
.doc-move-pop { position: absolute; z-index: 9300; width: 300px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 10px; }
.doc-move-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.doc-move-search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); padding: 6px 9px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); }
.doc-move-search:focus { outline: none; border-color: var(--primary); }
.doc-move-results { max-height: 280px; overflow-y: auto; margin-top: 6px; }
.doc-move-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: var(--tf-doc-radius-xs); color: var(--text); font: inherit; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-move-item:hover { background: var(--tf-doc-tint); }
.doc-move-root { color: var(--primary); font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; }
.doc-move-hint { font-size: 12.5px; color: var(--muted); padding: 8px; text-align: center; }

/* Embed */
.doc-embed { margin: 0 0 16px; }
.doc-embed-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-lg); background: var(--card); transition: transform var(--tf-doc-ease) 160ms, box-shadow var(--tf-doc-ease) 160ms; }
.doc-embed-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.doc-embed-link { font-size: 13.5px; color: var(--primary); word-break: break-all; }
.doc-embed-cap { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 4px; }
.doc-img { max-width: 100%; border-radius: var(--tf-doc-radius-lg); }

/* Mentions — chip tinté, jamais souligné (cf. spec §7) */
.doc-mention { display: inline; padding: 1px 6px; border-radius: var(--tf-doc-radius-xs); background: var(--tf-doc-tint); color: var(--primary); font-weight: 500; font-size: .94em; white-space: nowrap; }
.doc-mention--user { background: color-mix(in srgb, var(--tf-doc-success) 14%, transparent); color: var(--tf-doc-success); }
.doc-mention--brand { background: color-mix(in srgb, var(--tf-doc-warn) 16%, transparent); color: var(--tf-doc-warn); }
.doc-mention--project { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }

/* Mobile (~380-768px) — sidebar au-dessus du canvas */
@media (max-width: 768px) {
  .docs-layout { flex-direction: column; }
  .docs-sidebar { width: 100%; flex: 0 0 auto; max-height: 38vh; border-right: none; border-bottom: 1px solid var(--border); }
  .doc-page { padding: 28px 18px 80px; }
  .doc-title-h { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (Phase 2) — éditeur : slash menu, gutter, autosave,
 *   titre éditable, placeholder, menu de bloc. Cf. spec §7.
 * ═══════════════════════════════════════════════════════════════ */
/* Bouton Nouveau doc */
.docs-new { margin: 0 12px 8px; padding: 9px 12px; border: none; border-radius: var(--tf-doc-radius-sm); background: var(--primary); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity var(--tf-doc-ease) 120ms, transform var(--tf-doc-ease) 120ms; }
.docs-new:hover { opacity: .92; }
.docs-new:active { transform: scale(.98); }
.docs-new:disabled { opacity: .6; cursor: default; }

/* En-tête doc (titre éditable + dot autosave) */
.doc-head-row { display: flex; align-items: center; gap: 10px; }
.doc-title-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 32px; line-height: 1.25; font-weight: 700; color: var(--text); padding: 0; font-family: inherit; }
.doc-title-input::placeholder { color: var(--muted); opacity: .55; }

/* Indicateur autosave (dot pulse) */
.doc-save-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background var(--tf-doc-ease) 200ms; }
.doc-save-dot--dirty  { background: var(--tf-doc-warn); }
.doc-save-dot--saving { background: var(--primary); animation: docSavePulse 900ms var(--tf-doc-ease) infinite; }
.doc-save-dot--saved  { background: var(--tf-doc-success); animation: docSaveFlash 800ms var(--tf-doc-ease); }
.doc-save-dot--error  { background: var(--tf-doc-danger); }
@keyframes docSavePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes docSaveFlash { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }

/* Éditeur ProseMirror (mode édition) */
.doc-pm[contenteditable="true"] { min-height: 320px; }
.doc-pm.ProseMirror-host .ProseMirror:focus { outline: none; }
.doc-pm .ProseMirror { white-space: pre-wrap; word-wrap: break-word; }
/* Placeholder sur paragraphe vide */
.doc-empty-ph { position: relative; }
.doc-empty-ph::before { content: attr(data-ph); position: absolute; left: 0; top: 0; color: var(--muted); opacity: .5; pointer-events: none; height: 0; }

/* Slash menu */
.doc-slash-menu { position: absolute; z-index: 9000; min-width: 250px; max-width: 300px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 4px; }
.doc-slash-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: var(--tf-doc-radius-sm); color: var(--text); }
.doc-slash-item.is-sel, .doc-slash-item:hover { background: var(--tf-doc-tint); }
.doc-slash-ico { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-xs); font-size: 13px; font-weight: 600; color: var(--text); }
.doc-slash-txt { display: flex; flex-direction: column; min-width: 0; }
.doc-slash-lab { font-size: 13.5px; font-weight: 600; }
.doc-slash-hint { font-size: 11.5px; color: var(--muted); }

/* Gutter (poignée + bouton +) */
.doc-gutter { position: absolute; left: -34px; display: flex; align-items: center; gap: 1px; height: 28px; opacity: 0; transition: opacity var(--tf-doc-ease) 80ms; }
.doc-pm:hover .doc-gutter, .doc-gutter:hover { opacity: 1; }
.doc-gutter-btn { border: none; background: none; color: var(--muted); cursor: pointer; width: 16px; height: 24px; border-radius: var(--tf-doc-radius-xs); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; opacity: .45; transition: opacity var(--tf-doc-ease) 80ms, background var(--tf-doc-ease) 80ms; }
.doc-gutter-btn:hover { opacity: 1; background: var(--bg); color: var(--text); }
.doc-gutter-handle { cursor: grab; }

/* Menu de mention (@personne / @projet / @doc / @marque) */
.doc-mention { cursor: pointer; }
.doc-mention:hover { filter: brightness(.96); text-decoration: underline; text-underline-offset: 2px; }
.doc-mention-menu { position: absolute; z-index: 9200; min-width: 260px; max-width: 340px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 4px; }
.doc-mention-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: var(--tf-doc-radius-sm); color: var(--text); }
.doc-mention-item.is-sel, .doc-mention-item:hover { background: var(--tf-doc-tint); }
.doc-mention-ico { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-xs); font-size: 13px; }
.doc-mention-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.doc-mention-lab { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-mention-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-mention-kind { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* Panneau Rétroliens */
.doc-backlinks-pop { position: absolute; z-index: 9200; min-width: 240px; max-width: 320px; max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px; }
.doc-bl-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px 6px; }
.doc-bl-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 9px; border-radius: var(--tf-doc-radius-xs); color: var(--text); font: inherit; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-bl-item:hover { background: var(--tf-doc-tint); }
.doc-bl-empty { font-size: 12.5px; color: var(--muted); padding: 8px 6px; }
.doc-bl-btn { border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; padding: 5px 10px; border-radius: var(--tf-doc-radius-sm); font: inherit; font-size: 12.5px; }
.doc-bl-btn:hover { background: var(--tf-doc-tint); color: var(--text); }

/* Menu de bloc (Dupliquer / Supprimer) */
.doc-block-menu { position: absolute; z-index: 9100; min-width: 150px; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 4px; }
.doc-block-menu button { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 7px 10px; border-radius: var(--tf-doc-radius-xs); color: var(--text); font: inherit; font-size: 13px; }
.doc-block-menu button:hover { background: var(--tf-doc-tint); }
.doc-block-menu button.is-danger { color: var(--tf-doc-danger); }

/* Dropcursor / gapcursor */
.doc-dropcursor { border-left: 2px solid var(--primary); }

/* Mode édition : un peu de marge à gauche pour le gutter */
.doc-page:has(.doc-title-input) { padding-left: 48px; }
@media (max-width: 768px) {
  .doc-gutter { display: none !important; }
  .doc-page:has(.doc-title-input) { padding-left: 18px; }
  .doc-title-input { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (Phase 3) — templates : picker création + manager admin
 * ═══════════════════════════════════════════════════════════════ */
.docs-head-actions { display: inline-flex; gap: 2px; }

/* Bouton "Enregistrer le modèle" (mode template) */
.doc-tpl-save { flex: 0 0 auto; border: none; border-radius: var(--tf-doc-radius-sm); background: var(--primary); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; cursor: pointer; transition: opacity var(--tf-doc-ease) 120ms; }
.doc-tpl-save:hover { opacity: .92; }
.doc-tpl-save:disabled { opacity: .6; cursor: default; }

/* Picker à la création */
.doc-tpl-pop { position: absolute; z-index: 9000; min-width: 260px; max-width: 320px; max-height: 380px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; }
.doc-tpl-pop-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 4px; }
.doc-tpl-sep { font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 8px 3px; }
.doc-tpl-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 9px; border-radius: var(--tf-doc-radius-sm); color: var(--text); }
.doc-tpl-opt:hover { background: var(--tf-doc-tint); }
.doc-tpl-ico { flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); font-size: 16px; }
.doc-tpl-txt { display: flex; flex-direction: column; min-width: 0; }
.doc-tpl-nm { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tpl-desc { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Manager modal (admin) */
.doc-tpl-modal-back { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 24px; }
.doc-tpl-modal { width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-lg); box-shadow: 0 20px 48px rgba(0,0,0,.3); overflow: hidden; }
.doc-tpl-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text); }
.doc-tpl-close { border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.doc-tpl-close:hover { color: var(--text); }
.doc-tpl-modal-body { flex: 1; overflow-y: auto; padding: 8px; }
.doc-tpl-modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); }
.doc-tpl-modal-foot .docs-new { margin: 0; width: 100%; }
.doc-tpl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--tf-doc-radius-sm); }
.doc-tpl-row:hover { background: var(--bg); }
.doc-tpl-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.doc-tpl-actions button { border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12px; padding: 5px 9px; border-radius: var(--tf-doc-radius-xs); cursor: pointer; }
.doc-tpl-actions button:hover { background: var(--tf-doc-tint); }
.doc-tpl-actions button.is-danger { color: var(--tf-doc-danger); }
.doc-tpl-actions button.is-danger:hover { background: color-mix(in srgb, var(--tf-doc-danger) 12%, transparent); }

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (Phase 3.5) — partage & visibilité
 * ═══════════════════════════════════════════════════════════════ */
/* En-têtes de section dans la liste */
.docs-group-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 11px 4px; }
.docs-group-h:first-child { padding-top: 4px; }

/* Bouton Partager (header doc) */
.doc-share-btn { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--tf-doc-radius-sm); cursor: pointer; transition: background var(--tf-doc-ease) 120ms; }
.doc-share-btn:hover { background: var(--tf-doc-tint); border-color: var(--primary); }

/* Popover partage */
.doc-share-pop { position: absolute; z-index: 9200; width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 12px; }
.doc-share-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.doc-share-vis { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.doc-share-vis-opt { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); cursor: pointer; transition: border-color var(--tf-doc-ease) 120ms, background var(--tf-doc-ease) 120ms; }
.doc-share-vis-opt.is-on { border-color: var(--primary); background: var(--tf-doc-tint); }
.doc-share-vis-opt input { margin-top: 3px; }
.doc-share-vis-opt span { display: flex; flex-direction: column; }
.doc-share-vis-opt strong { font-size: 13px; color: var(--text); font-weight: 600; }
.doc-share-vis-opt small { font-size: 11.5px; color: var(--muted); }
.doc-share-people { border-top: 1px solid var(--border); padding-top: 10px; transition: opacity var(--tf-doc-ease) 160ms; }
.doc-share-people.is-dim { opacity: .4; pointer-events: none; }
.doc-share-add { position: relative; margin-bottom: 8px; }
.doc-share-search { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.doc-share-search:focus { border-color: var(--primary); }
.doc-share-results { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.doc-share-hit { text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: 13px; padding: 7px 9px; border-radius: var(--tf-doc-radius-xs); cursor: pointer; }
.doc-share-hit:hover { background: var(--tf-doc-tint); }
.doc-share-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.doc-share-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: var(--tf-doc-radius-xs); }
.doc-share-row:hover { background: var(--bg); }
.doc-share-nm { font-size: 13px; color: var(--text); }
.doc-share-rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: var(--tf-doc-radius-xs); }
.doc-share-rm:hover { color: var(--tf-doc-danger); background: color-mix(in srgb, var(--tf-doc-danger) 12%, transparent); }
.doc-share-empty { font-size: 12px; color: var(--muted); padding: 8px 9px; }

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (sous-pages) — arbre, fil d'Ariane, lien de sous-page
 * ═══════════════════════════════════════════════════════════════ */
/* Fil d'Ariane */
.doc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.doc-bc-item { border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; padding: 2px 4px; border-radius: var(--tf-doc-radius-xs); }
.doc-bc-item:hover { color: var(--primary); background: var(--tf-doc-tint); }
.doc-bc-sep { color: var(--muted); opacity: .5; }
.doc-bc-cur { color: var(--text); font-weight: 600; padding: 2px 4px; }

/* Bouton + Sous-page */
.doc-subpage-btn { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: var(--tf-doc-radius-sm); cursor: pointer; transition: background var(--tf-doc-ease) 120ms; white-space: nowrap; }
.doc-subpage-btn:hover { background: var(--tf-doc-tint); border-color: var(--primary); }
.doc-subpage-btn:disabled { opacity: .6; cursor: default; }

/* Lien de sous-page (nœud dans le doc) */
.doc-pagelink { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--tf-doc-radius-md); background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--tf-doc-ease) 120ms, transform var(--tf-doc-ease) 120ms; }
.doc-pagelink:hover { background: var(--tf-doc-tint); border-color: var(--primary); transform: translateX(2px); }

/* Arbre liste : toggle de repli + indentation */
.doc-card-tog { flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); cursor: pointer; border-radius: 3px; height: 16px; }
.doc-card-tog:hover { background: var(--border); color: var(--text); }
.doc-card-tog--sp { cursor: default; }
.doc-card { align-items: center; }
.doc-card .doc-card-title { flex: 1; }

/* Bannière partage hérité */
.doc-share-inherit { font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: var(--tf-doc-radius-sm); padding: 7px 9px; margin-bottom: 10px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
 * Doc Editor (Phase 4) — versioning : sidebar droite + aperçu version
 * ═══════════════════════════════════════════════════════════════ */
/* Bouton Historique (header) */
.doc-hist-btn { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--tf-doc-radius-sm); cursor: pointer; transition: background var(--tf-doc-ease) 120ms; white-space: nowrap; }
.doc-hist-btn:hover { background: var(--tf-doc-tint); border-color: var(--primary); }

/* Drawer versions (droite, style Figma) */
.doc-ver-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; z-index: 60; background: var(--card); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,.08); display: flex; flex-direction: column; animation: docVerIn var(--tf-doc-ease) 200ms; }
@keyframes docVerIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.doc-ver-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text); }
.doc-ver-close { border: none; background: none; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
.doc-ver-close:hover { color: var(--text); }
.doc-ver-top { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.doc-ver-save { width: 100%; border: none; border-radius: var(--tf-doc-radius-sm); background: var(--primary); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 9px; cursor: pointer; transition: opacity var(--tf-doc-ease) 120ms; }
.doc-ver-save:hover { opacity: .92; }
.doc-ver-body { flex: 1; overflow-y: auto; padding: 8px; }
.doc-ver-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px 4px; }
.doc-ver-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--tf-doc-radius-sm); }
.doc-ver-row:hover { background: var(--bg); }
.doc-ver-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-ver-label { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ver-meta { font-size: 11px; color: var(--muted); }
.doc-ver-prev { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: var(--tf-doc-radius-xs); cursor: pointer; opacity: 0; transition: opacity var(--tf-doc-ease) 120ms; }
.doc-ver-row:hover .doc-ver-prev { opacity: 1; }
.doc-ver-prev:hover { background: var(--tf-doc-tint); border-color: var(--primary); }
.doc-ver-auto { margin-top: 6px; }
.doc-ver-auto > summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 8px; list-style: none; user-select: none; }
.doc-ver-auto > summary::-webkit-details-marker { display: none; }
.doc-ver-auto > summary::before { content: '▸ '; }
.doc-ver-auto[open] > summary::before { content: '▾ '; }

/* Bandeau aperçu d'une version (en haut du canvas) */
.doc-ver-banner { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--tf-doc-warn) 14%, var(--card)); border-bottom: 1px solid color-mix(in srgb, var(--tf-doc-warn) 40%, var(--border)); }
.doc-ver-banner-txt { font-size: 13px; color: var(--text); }
.doc-ver-banner-acts { display: inline-flex; gap: 6px; }
.doc-ver-banner-acts button { border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: var(--tf-doc-radius-sm); cursor: pointer; }
.doc-ver-banner-acts .doc-ver-b-restore { background: var(--primary); color: #fff; border-color: var(--primary); }
.doc-ver-banner-acts button:hover { filter: brightness(.97); }

@media (max-width: 768px) {
  .doc-ver-drawer { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
 * ProjectSearch — popover de recherche tapée (tous projets/missions)
 *   + bouton « Autre projet… » dans la card Créneaux orphelins.
 * ═══════════════════════════════════════════════════════════════ */
.home-pop-otherproj { margin-top: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.home-pop-otherproj:hover { background: var(--subtle, var(--bg)); border-color: var(--primary); color: var(--primary); }

.proj-search-pop { position: absolute; z-index: 9600; width: 320px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); padding: 8px; }
.proj-search-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; outline: none; box-sizing: border-box; }
.proj-search-input:focus { border-color: var(--primary); }
.proj-search-results { max-height: 280px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.proj-search-hint { font-size: 12px; color: var(--muted); padding: 10px; text-align: center; }
.proj-search-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 9px; border-radius: 8px; color: var(--text); }
.proj-search-item:hover { background: var(--subtle, var(--bg)); }
.proj-search-typo { flex: 0 0 auto; font-size: 14px; }
.proj-search-txt { display: flex; flex-direction: column; min-width: 0; }
.proj-search-nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-search-marque { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bouton « 🔍 Autre projet… » — chercher hors périmètre CdP */
.proj-other-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.proj-other-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.tc-sep-projrow { display: flex; gap: 6px; align-items: stretch; }
.tc-sep-projrow .tc-sep-project { flex: 1 1 auto; min-width: 0; }
.tc-sep-projrow .proj-other-btn { flex: 0 0 auto; }