/* ─── RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
/* Auth gate : cacher l'app tant que l'auth n'est pas confirmee */
body.auth-pending .sidebar,
body.auth-pending .main-content,
body.auth-pending .tab-bar-container { display: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  background: #ffffff;
  color: #1a1a2e;
  display: flex;
  flex-direction: row;
}

/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --accent: #7C5CFC;
  --accent-hover: #6347d6;
  --accent-light: #f0edff;
  --accent-muted: #eeecf5;
  --bg: #ffffff;
  --bg-panel: #faf9fd;
  --bg-canvas: #f5f4f8;
  --fg: #1a1a2e;
  --fg-dim: #8b82a8;
  --fg-key: #7C5CFC;
  --green: #22c55e;
  --green-light: #dcfce7;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --red: #ef4444;
  --red-light: #fee2e2;
  --blue: #3b82f6;
  --blue-light: #dbeafe;
  --border: #e8e5f0;
  --shadow-sm: 0 1px 3px rgba(124,92,252,0.06);
  --shadow-md: 0 4px 12px rgba(124,92,252,0.08);
  --shadow-lg: 0 8px 30px rgba(124,92,252,0.12);
  --radius: 10px;
  --radius-sm: 7px;
  --radius-pill: 50px;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── SIDEBAR ───────────────────────────────────────────────────── */
/* ═══ SIDEBAR ═══════════════════════════════════════════════════ */
.sidebar {
  width: 232px;
  min-width: 232px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}

/* ─── Header : Logo C + Audit search ──────────────── */
.sb-header {
  padding: 16px 12px 8px;
  flex-shrink: 0;
  position: relative;
}
.sb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sb-logo-c {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent, #7C5CFC);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -1px;
  transition: opacity 0.15s;
}
.sb-logo-c:hover { opacity: 0.7; }
/* Audit search bar */
.sb-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e2e2);
  background: var(--card, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: text;
}
.sb-search-wrap:hover {
  border-color: #ccc;
}
.sb-search-wrap:focus-within {
  border-color: var(--accent, #7C5CFC);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.10);
}
.sb-search-icon {
  flex-shrink: 0;
  color: var(--fg-dim, #999);
  width: 14px;
  height: 14px;
}
.sb-search-wrap:focus-within .sb-search-icon {
  color: var(--accent, #7C5CFC);
}
.sb-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--fg);
  padding: 0;
  line-height: 36px;
}
.sb-search-input::placeholder {
  color: var(--fg-dim, #aaa);
  font-weight: 400;
}
.sb-search-input.has-audit {
  font-weight: 600;
  color: var(--fg);
}
.sb-search-shortcut {
  font-size: 10px;
  color: var(--fg-dim, #bbb);
  border: 1px solid var(--border, #e2e2e2);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 16px;
}

/* Audit dropdown */
.sb-audit-dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 12px;
  right: 12px;
  z-index: 300;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sb-audit-list {
  overflow-y: auto;
  max-height: 320px;
  padding: 6px;
}
.sb-audit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
  color: var(--fg);
  border-radius: 6px;
}
.sb-audit-item:hover {
  background: var(--bg-hover, rgba(0,0,0,0.05));
}
.sb-audit-item.active {
  background: rgba(124,92,252,0.08);
  font-weight: 600;
}
.sb-audit-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-audit-item-meta {
  font-size: 11px;
  color: var(--fg-dim, #888);
  flex-shrink: 0;
}
.sb-audit-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sb-audit-new {
  padding: 10px 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #8b82a8);
  cursor: pointer;
  transition: background 0.1s;
}
.sb-audit-new:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
}
.sb-audit-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim, #888);
}

/* ─── Photo upload dropzone ─────────────────────────────── */
.photo-dropzone {
  border: 2px dashed var(--border, #d1d5db);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg, #fff);
}
.photo-dropzone:hover {
  border-color: var(--accent, #8b82a8);
  background: rgba(139, 130, 168, 0.04);
}
.photo-dropzone.drag-over {
  border-color: var(--accent, #8b82a8);
  background: rgba(139, 130, 168, 0.08);
  transform: scale(1.01);
}
.photo-dropzone-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.photo-dropzone-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.photo-dropzone-sub {
  font-size: 12px;
  color: var(--fg-dim, #888);
}
.photo-dropzone-progress {
  margin-top: 12px;
  font-size: 12px;
  color: var(--fg-dim);
}
.photo-dropzone-bar {
  height: 4px;
  background: var(--accent, #8b82a8);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s;
  margin-bottom: 4px;
}

/* Synoptique empty state */
.syno-empty-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border: 2px dashed var(--border, #d1d5db);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 8px;
  min-height: 80px;
}
.syno-empty-upload:hover {
  border-color: var(--accent, #8b82a8);
  background: rgba(139, 130, 168, 0.04);
}
.syno-empty-upload-text {
  font-size: 13px;
  color: var(--fg-dim, #888);
  margin-top: 4px;
}


/* ─── Client Picker Popup (menu "+" des onglets) ─── */
.client-picker-popup {
  position: fixed;
  z-index: 9000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  width: 300px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  animation: cpReveal 0.12s ease;
}
@keyframes cpReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.client-picker-search {
  margin: 10px 10px 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-canvas);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.client-picker-search:focus { border-color: var(--accent); }
.client-picker-search::placeholder { color: var(--fg-dim); }

.client-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px;
  max-height: 300px;
}

.client-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}
.client-picker-item:hover { background: var(--accent-light); }
.client-picker-item.active { background: var(--accent-light); }
.client-picker-item.active .client-picker-item-name { color: var(--accent); font-weight: 600; }

.client-picker-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-picker-item-meta {
  font-size: 11px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

.client-picker-empty {
  font-size: 12px;
  color: var(--fg-dim);
  text-align: center;
  padding: 16px 8px;
}

.client-picker-browse {
  margin: 6px 10px 10px;
  padding: 7px 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.client-picker-browse:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
/* ─── Navigation sections ────────────────────────────────────── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 8px;
}
.sb-nav-group {
  margin-bottom: 8px;
}
.sb-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 4px 20px 4px;
  opacity: 0.6;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-dim);
  cursor: pointer;
  transition: all 0.1s;
  border-left: 3px solid transparent;
  user-select: none;
}
.sidebar-item:hover {
  background: rgba(124,92,252,0.04);
  color: var(--fg);
}
.sidebar-item.active {
  background: rgba(124,92,252,0.08);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sb-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.5;
}
.sidebar-item.active .sb-icon { opacity: 1; }
.sidebar-item .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-muted);
  color: var(--fg-dim);
}
.sidebar-item.active .badge {
  background: var(--accent);
  color: white;
}
.sb-item-disabled {
  opacity: 0.35;
}
.sidebar-spacer { flex: 1; }

/* ─── Footer : User + Meta ───────────────────────────────────── */
.sb-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  flex-shrink: 0;
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.sb-user:hover {
  background: rgba(124, 92, 252, 0.06);
}
.sb-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-user-email {
  font-size: 10px;
  color: var(--fg-dim);
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* User profile dropdown menu */
.user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 1000;
  overflow: hidden;
}
.user-menu.open { display: block; }
.user-menu-header {
  padding: 12px 14px;
}
.user-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.user-menu-email {
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 2px;
}
.user-menu-sep {
  height: 1px;
  background: #f0eef5;
}
.user-menu-item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.1s;
}
.user-menu-item:hover {
  background: #f8f7fc;
  color: var(--red, #ef4444);
}
.sb-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--fg-dim);
  opacity: 0.6;
}
.sb-save-indicator {
  color: var(--green);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 10px;
}
.sb-online-indicator {
  font-size: 10px;
  transition: opacity 0.3s;
}
.sb-version {
  font-size: 10px;
}

/* ─── App topbar (tabs + rapport button) ─────────────────────── */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.topbar-spacer { flex: 1; }
.btn-report {
  padding: 5px 14px;
  margin: 0 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-report:hover {
  background: var(--accent);
  color: #fff;
}
.btn-refresh-disk {
  padding: 5px 14px;
  margin: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-refresh-disk:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── APP CONTENT ───────────────────────────────────────────────── */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Sections: only one visible at a time */
.section { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.section.active { display: flex; }

/* Transition de chargement lors du switch de dossier client */
main { transition: opacity 150ms ease; }
main { transition: opacity 0.12s ease; }
main.main-loading { opacity: 0.4; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════
   SECTION 0 — DASHBOARD
   ════════════════════════════════════════════════════════════════════ */
.dashboard {
  padding: 32px 40px;
  overflow-y: auto;
  height: 100%;
}
.dashboard-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 24px;
}
.dashboard-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.dash-stat-card {
  flex: 1;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dash-stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(124,92,252,0.08);
}
.dash-stat-count {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}
.dash-stat-label {
  font-size: 13px;
  color: var(--fg-dim);
  margin-top: 6px;
}
.dash-stat-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 12px;
}
.dashboard-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.dash-table td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid #f5f4f8;
  vertical-align: middle;
}
.dash-table tr { cursor: pointer; transition: background 0.1s; }
.dash-table tr:hover { background: #faf9fe; }
.dash-table-name {
  font-weight: 600;
  color: var(--fg);
}
.dash-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.dash-status-select {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION 1 — PHOTO TAGGER
   ════════════════════════════════════════════════════════════════════ */

/* ─── HEADER ────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 52px;
  min-height: 52px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}
.header-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
.btn-folder {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--fg); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.btn-folder:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
/* .counter supprime */
.status-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.status-tagged { background: var(--green-light); color: #166534; }
.header-spacer { flex: 1; }
.zoom-control-inline { display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.btn-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--fg-dim); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* progress-bar supprime */

/* ─── MAIN LAYOUT ───────────────────────────────────────────────── */
.tagger-main { display: flex; flex: 1; overflow: hidden; }

/* ─── IMAGE AREA ────────────────────────────────────────────────── */
.image-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg-canvas); position: relative; overflow: hidden;
}
.image-area img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
/* welcome-message supprimé v4.2.0 */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); color: var(--fg); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: all var(--transition); opacity: 0; z-index: 5;
}
.image-area:hover .nav-arrow { opacity: 1; }
.nav-arrow:hover { background: var(--accent); color: white; }
.nav-prev { left: 16px; }
.nav-next { right: 16px; }

/* ─── RIGHT PANEL (Toolbox) ─────────────────────────────────────── */
.panel {
  width: 300px; min-width: 0; background: var(--bg-panel);
  border-left: 1px solid var(--border); display: flex;
  flex-direction: column; overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative; flex-shrink: 0;
}
.panel.collapsed { width: 0; min-width: 0; border-left-color: transparent; overflow: visible; }
.panel.collapsed > *:not(.panel-toggle) { opacity: 0; pointer-events: none; }
/* Toggle tab - toujours visible */
.panel-toggle {
  position: absolute; left: -32px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 64px; background: var(--bg-panel); border: 1px solid var(--border);
  border-right: none; border-radius: 10px 0 0 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fg-dim); z-index: 10;
  transition: all 0.15s; writing-mode: vertical-lr;
  letter-spacing: 0.5px; font-weight: 600;
  box-shadow: -2px 0 8px rgba(0,0,0,0.06);
}
.panel:not(.collapsed) .panel-toggle { display: none; }
.panel-toggle:hover { background: var(--accent-light); color: var(--accent); }
.panel-toggle .panel-toggle-arrow { font-size: 11px; writing-mode: horizontal-tb; margin-bottom: 2px; transition: transform 0.25s; }
.panel.collapsed .panel-toggle .panel-toggle-arrow { transform: rotate(180deg); }

.panel-header {
  padding: 12px 14px 10px; font-size: 12px; font-weight: 700;
  color: var(--fg); display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-header-icon { font-size: 15px; opacity: 0.45; }
.panel-header-title { flex: 1; }
.panel-collapse-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 10px;
  color: var(--fg-dim); transition: all 0.15s; flex-shrink: 0;
}
.panel-collapse-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.panel-header-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent); letter-spacing: 0.3px;
}

/* Blocs structurants du panneau tags */
.tag-bloc {
  border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 0;
}
.tag-bloc:last-child { border-bottom: none; }
.tag-bloc-title {
  padding: 10px 14px 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--fg-dim);
  display: flex; align-items: center; gap: 6px;
}
.tag-bloc-title::before {
  content: ''; display: inline-block; width: 3px; height: 12px;
  border-radius: 2px; background: var(--accent); opacity: 0.4; flex-shrink: 0;
}
/* Quick action buttons in panel */
.panel-actions {
  display: flex; gap: 6px; padding: 8px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.panel-action-btn {
  flex: 1; padding: 7px 10px; border: none; border-radius: 6px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; color: #fff; text-align: center;
}
.panel-action-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.panel-action-btn-primary { background: #334155; }
.panel-action-btn-accent { background: var(--accent); }
.tag-bloc-toggle {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.tag-bloc-toggle:hover { opacity: 0.8; }
.toggle-arrow { font-size: 12px; transition: transform 0.15s; }

/* Zone 1 : lignes matiere */
.audit-mat-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; font-size: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.1s;
}
.audit-mat-row:hover { background: rgba(124,92,252,0.04); }
.audit-mat-macro {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 20px; border-radius: 4px; padding: 0 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer; user-select: none; transition: all 0.15s;
}
.audit-mat-macro:hover { transform: scale(1.08); }
.audit-mat-macro-DIB { background: #dbeafe; color: #1e40af; }
.audit-mat-macro-DID { background: #fce7f3; color: #9d174d; }
.audit-mat-macro-AMV { background: #d1fae5; color: #065f46; }
.audit-mat-macro-none { background: var(--accent-muted); color: var(--fg-dim); }
.audit-mat-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.audit-mat-del {
  background: none; border: none; color: var(--fg-dim); cursor: pointer;
  font-size: 14px; padding: 0 4px; opacity: 0; transition: opacity 0.15s;
}
.audit-mat-row:hover .audit-mat-del { opacity: 0.6; }
.audit-mat-del:hover { opacity: 1; color: #ef4444; }

.tag-section { padding: 5px 14px; }
.tag-section-label {
  font-size: 11px; font-weight: 600; color: var(--fg-dim); margin-bottom: 5px;
  display: flex; align-items: center; gap: 5px;
}
.tag-section-label .check {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; background: var(--accent-muted); color: var(--fg-dim); transition: all var(--transition);
}
.tag-section-label .check.done { background: var(--green); color: white; }
.tag-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--fg); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all var(--transition); user-select: none; white-space: nowrap;
}
.pill:hover { border-color: var(--accent); background: var(--accent-light); }
.pill.active { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 2px 6px rgba(124,92,252,0.2); }
.pill .key { font-family: "SF Mono", monospace; font-size: 9px; font-weight: 600; opacity: 0.5; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,0.06); }
.pill.active .key { background: rgba(255,255,255,0.2); opacity: 0.8; }

/* ── Priorité / Geste de tri — proéminent ── */
.tag-section-priorite { background: rgba(239,68,68,0.04); border-radius: 8px; border: 1.5px dashed rgba(239,68,68,0.2); margin: 4px 12px; }
.tag-section-priorite .pill { border-color: rgba(239,68,68,0.3); }
.tag-section-priorite .pill:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.tag-section-priorite .pill.active { background: #ef4444; border-color: #ef4444; color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }

/* Text tag input (prestataire, etc.) */
/* Catalog search (pré-collecte / contenant expédition) */
.catalog-search-wrap { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; flex-wrap: nowrap; }
.catalog-search-input {
  flex: 1; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-size: 12px; background: var(--bg); color: var(--fg); font-family: inherit;
}
.catalog-search-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }
.catalog-search-input.catalog-has-value { font-weight: 600; border-color: var(--accent); background: rgba(124,92,252,0.04); }
.catalog-search-input::placeholder { color: var(--fg-dim); opacity: 0.6; font-weight: 400; }
.catalog-search-dd {
  display: none; position: absolute; top: 100%; left: 0; right: 32px; z-index: 50;
  max-height: 220px; overflow-y: auto; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); margin-top: 4px;
}
.catalog-search-fam {
  padding: 6px 10px 3px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg-dim); background: var(--bg-panel); position: sticky; top: 0;
}
.catalog-search-item {
  padding: 7px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.catalog-search-item:hover { background: rgba(124,92,252,0.06); }
.catalog-search-item.active { background: rgba(124,92,252,0.10); font-weight: 600; color: var(--accent); }
.catalog-search-empty { padding: 12px; text-align: center; font-size: 11px; color: var(--fg-dim); }

.text-tag-wrap { display: flex; align-items: center; gap: 4px; width: 100%; }
.text-tag-input {
  flex: 1; padding: 6px 10px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  color: var(--fg); background: var(--bg); transition: border-color 0.15s;
  font-family: inherit;
}
.text-tag-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }
.text-tag-input::placeholder { color: var(--fg-dim); opacity: 0.6; }
.text-tag-clear {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg-dim); font-size: 12px;
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
}
.text-tag-clear:hover { border-color: var(--red); color: var(--red); }

/* ─── Combobox (matière multi-sélect + autocomplétion) ──────────── */
.combobox-wrap { position: relative; width: 100%; }
.combobox-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.combobox-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
}
.combobox-chip-x {
  background: none; border: none; color: rgba(255,255,255,0.7); font-size: 14px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.combobox-chip-x:hover { color: #fff; }
.combobox-input {
  width: 100%; padding: 6px 10px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  color: var(--fg); background: var(--bg); transition: border-color 0.15s;
  font-family: inherit;
}
.combobox-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(124,92,252,0.15); }
.combobox-input::placeholder { color: var(--fg-dim); opacity: 0.6; }
.combobox-dropdown {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  max-height: 200px; overflow-y: auto; z-index: 50;
  background: var(--bg); border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  margin-top: 2px;
}
.combobox-option {
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.1s;
}
.combobox-option:hover { background: rgba(124,92,252,0.08); }
.combobox-option-nom { font-weight: 500; }
.combobox-option-flux {
  font-size: 10px; font-weight: 700; color: var(--fg-dim);
  background: var(--bg-dim); padding: 1px 6px; border-radius: 4px;
}
.combobox-option-new { color: var(--accent); font-style: italic; }

/* ─── Grouped pills (matière par flux) ────────────────────────── */
.grouped-pills-wrap { width: 100%; }
.matiere-flux-group { margin-bottom: 2px; border-radius: var(--radius-sm); overflow: hidden; }
.matiere-flux-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 700; color: var(--fg);
  border-radius: var(--radius-sm); transition: background 0.1s;
}
.matiere-flux-header:hover { background: var(--bg-dim); }
.matiere-flux-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.matiere-flux-label { flex: 1; }
.matiere-flux-count { font-size: 10px; color: var(--fg-dim); font-weight: 500; }
.matiere-flux-chevron { font-size: 10px; color: var(--fg-dim); transition: transform 0.15s; }
.matiere-flux-pills {
  display: none; flex-wrap: wrap; gap: 3px;
  padding: 4px 8px 8px; max-height: 180px; overflow-y: auto;
}
.matiere-flux-group.open .matiere-flux-pills { display: flex; }
.matiere-flux-pills .pill { font-size: 10px; padding: 2px 8px; }
.matiere-flux-pills .pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.panel-divider { height: 1px; background: var(--border); margin: 6px 16px; }
.panel-spacer { flex: 1; }
.actions { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 5px; }
.btn-action {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--fg); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all var(--transition); width: 100%; text-align: left;
}
.btn-action:hover { border-color: var(--accent); background: var(--accent-light); }
.btn-action .shortcut { margin-left: auto; font-family: "SF Mono", monospace; font-size: 10px; color: var(--fg-dim); }
/* Danger zone */
.panel-danger {
  flex-shrink: 0; padding: 10px 14px; border-top: 1px dashed #fca5a5;
  background: linear-gradient(180deg, rgba(254,226,226,0.3) 0%, rgba(254,226,226,0.08) 100%);
}
.panel-danger .tag-bloc-title { color: #b91c1c; font-size: 9px; letter-spacing: 1.2px; }
.panel-danger .tag-bloc-title::before { background: #ef4444; opacity: 0.6; }
.btn-danger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 6px 10px; border-radius: 6px;
  border: 1px solid #fca5a5; background: var(--bg);
  color: #b91c1c; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.btn-danger:hover { background: #fef2f2; border-color: #f87171; }
.btn-danger .shortcut { font-family: "SF Mono", monospace; font-size: 9px; opacity: 0.5; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ─── SUMMARY BAR ───────────────────────────────────────────────── */
.summary-bar {
  display: flex; align-items: center; padding: 0 16px; height: 30px;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  font-family: "SF Mono", monospace; font-size: 11px; color: var(--fg-dim); gap: 16px;
}
.summary-tags { color: var(--fg); font-weight: 500; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
.footer {
  display: flex; align-items: center; padding: 0 20px;
  height: 32px; min-height: 32px; background: var(--bg);
  border-top: 1px solid var(--border); font-size: 11px; color: var(--fg-dim); gap: 12px;
}
.footer kbd {
  font-family: "SF Mono", monospace; font-size: 10px; padding: 1px 5px;
  border-radius: 4px; background: var(--accent-muted); color: var(--fg-dim); border: 1px solid var(--border);
}
.footer-spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   SECTION 2 — ANALYSE FINANCIÈRE
   ════════════════════════════════════════════════════════════════════ */
.finance-content { flex: 1; overflow-y: auto; padding: 32px 40px; }
.section-title { font-size: 22px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.section-subtitle { font-size: 14px; color: var(--fg-dim); margin-bottom: 28px; }

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.kpi-card {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; transition: all var(--transition);
}
.kpi-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--fg-dim); margin-bottom: 8px; }
.kpi-value { font-size: 26px; font-weight: 800; color: var(--fg); letter-spacing: -1px; }
.kpi-delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }

/* Dropzone */
.dropzone-area { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 40px 24px; text-align: center;
  transition: all 0.2s ease; cursor: pointer; background: var(--bg-panel);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-light); }
.dropzone .dz-icon { font-size: 36px; margin-bottom: 12px; }
.dropzone .dz-title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.dropzone .dz-hint { font-size: 12px; color: var(--fg-dim); }

/* Recent files table */
.table-section-title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 12px; }
.file-table { width: 100%; border-collapse: collapse; }
.file-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px;
  border-bottom: 1.5px solid var(--border);
}
.file-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.file-table tr:hover td { background: var(--accent-light); }
.file-status {
  display: inline-flex; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
}
.file-status.ok { background: var(--green-light); color: #166534; }
.file-status.pending { background: var(--amber-light); color: #92400e; }
.file-status.error { background: var(--red-light); color: #991b1b; }

/* ════════════════════════════════════════════════════════════════════
   SECTION 3 — RSE & CONFORMITÉ
   ════════════════════════════════════════════════════════════════════ */
.rse-content { flex: 1; overflow-y: auto; padding: 32px 40px; }

/* Score cards */
.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
/* Checklist */
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.checklist-card {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px;
}
.checklist-card:hover { border-color: var(--accent); }
.checklist-title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.checklist-title .ct-icon { font-size: 16px; }
.checklist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13px; color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.checklist-item:last-child { border-bottom: none; }
.cl-check {
  width: 20px; height: 20px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.cl-check.done { background: var(--green); color: white; }
.cl-check.miss { background: var(--red-light); color: var(--red); }
.cl-check.warn { background: var(--amber-light); color: var(--amber); }
.cl-label { flex: 1; }
.cl-label.done-text { color: var(--fg-dim); text-decoration: line-through; }

/* Alerts */
.alerts-section { margin-bottom: 28px; }
.alert-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--border); margin-bottom: 10px;
  transition: all var(--transition);
}
.alert-card:hover { border-color: var(--accent); }
.alert-icon { font-size: 20px; flex-shrink: 0; padding-top: 2px; }
.alert-body { flex: 1; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.alert-desc { font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.alert-date { font-size: 11px; color: var(--fg-dim); white-space: nowrap; padding-top: 2px; }

/* ─── MODAL ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(26,26,46,0.4);
  backdrop-filter: blur(4px); display: none; align-items: center;
  justify-content: center; z-index: 200;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(124,92,252,0.15);
  width: 680px; max-width: 95vw; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; font-weight: 700; color: var(--fg); }
.modal-close { width: 28px; height: 28px; border: none; background: none; font-size: 20px; color: var(--fg-dim); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--accent-light); color: var(--accent); }
.modal-body { padding: 16px 24px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--border); }
.modal-hint { font-size: 11px; color: var(--fg-dim); flex: 1; }

/* Settings editor (same as before) */
/* dim-editor CSS supprimé — settings figés */
/* dim-table, row-drag, btn-add/del-row CSS supprimé — settings figés */

/* ─── AUDIT FORM (RSE) ─────────────────────────────────────────── */
.audit-header { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.audit-field { display: flex; flex-direction: column; gap: 4px; }
.audit-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-dim); }
.audit-field input, .audit-field select, .audit-field textarea {
  padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--fg); background: var(--bg); outline: none;
  transition: border-color var(--transition); font-family: inherit;
}
.audit-field input:focus, .audit-field select:focus, .audit-field textarea:focus { border-color: var(--accent); }
.audit-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238b82a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.audit-section-title { font-size: 14px; font-weight: 700; color: var(--fg); margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-muted); display: flex; align-items: center; gap: 8px; }
.audit-section-title .ast { font-size: 16px; }
.audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.audit-field textarea { resize: vertical; min-height: 80px; }
.audit-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.audit-btn {
  padding: 9px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border); background: var(--bg); color: var(--fg);
  transition: all var(--transition);
}
.audit-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.audit-btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.audit-btn.primary:hover { background: var(--accent-hover); }

/* Audit score summary */
.audit-score-summary { display: flex; gap: 12px; margin-bottom: 20px; }
.audit-score-pill {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--bg); font-size: 13px;
}
.audit-score-pill .dot { width: 10px; height: 10px; border-radius: 50%; }
.audit-score-pill .dot.green { background: var(--green); }
.audit-score-pill .dot.amber { background: var(--amber); }
.audit-score-pill .dot.red { background: var(--red); }
.audit-score-pill .dot.gray { background: var(--fg-dim); }
.audit-score-pill strong { font-weight: 700; }


/* (ancien bandeau contextuel supprimé — remplacé par client-switcher en sidebar) */
/* Publier button + dropdown in header */
.publish-wrap { position: relative; }
.btn-publish {
  padding: 6px 14px; border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-publish:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn-publish:disabled { opacity: 0.5; cursor: default; }
.btn-publish.published { background: #22c55e; }
.btn-publish.published:hover { background: #16a34a; }
/* Dropdown menu */
.publish-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); min-width: 200px; z-index: 100;
  padding: 6px; overflow: hidden;
}
.publish-menu.open { display: block; }
.publish-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; background: transparent;
  font-size: 13px; color: var(--fg); cursor: pointer; border-radius: 8px;
  transition: background 0.12s; text-align: left;
}
.publish-menu-item:hover { background: var(--accent-light); }
.publish-menu-item span { font-size: 15px; width: 20px; text-align: center; }
.publish-menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* ─── CONFORMITÉ LEGAL TABLE ───────────────────────────────────── */
.conf-legal-wrap { margin: 20px 0 24px; }
.conf-legal-title {
  font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.conf-legal-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 11.5px; line-height: 1.5; border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.conf-legal-table thead th {
  background: var(--bg-panel); color: var(--fg-dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px;
  padding: 10px 12px; text-align: left; border-bottom: 1.5px solid var(--border);
}
.conf-legal-table tbody td {
  padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--border);
}
.conf-legal-table tbody tr:last-child td { border-bottom: none; }
.conf-legal-table tbody tr:hover { background: var(--accent-light); }
/* Inputs dans tableau prestataires */
.presta-input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 11px; background: var(--bg);
  color: var(--fg); font-family: inherit; box-sizing: border-box;
}
.presta-input:focus { border-color: var(--accent); outline: none; }
select.presta-input {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238b82a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; padding-right: 22px;
}
/* Styles cl-*, constat-badge, conf-row-*, rse-row-* supprimes :
   les tableaux juridique et RSE n'existent plus dans le formulaire,
   ils sont generes uniquement dans le template rapport Jinja. */

/* ─── PYRAMIDE DÉCHETS ─────────────────────────────────────────── */
.pyramide-wrap { margin: 20px 0 24px; }
.pyramide-layout { display: flex; gap: 24px; align-items: stretch; }
.pyramide-col-bars { flex: 1; min-width: 0; }
.pyramide-col-diversion {
  width: 180px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.pyramide-chart { display: flex; gap: 16px; align-items: stretch; }
.pyramide-axis {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 24px; padding: 2px 0;
}
.pyramide-axis-line {
  flex: 1; width: 4px; border-radius: 2px; margin: 6px 0;
  background: linear-gradient(to top, var(--red), var(--amber), var(--green), var(--accent));
}
.pyramide-axis-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.pyramide-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pyramide-bar {
  border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; font-weight: 700;
  font-size: 13px; position: relative; transition: transform 0.15s;
  min-height: 48px;
}
.pyramide-bar:hover { transform: translateX(4px); }
.pyramide-bar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.pyra-top { background: linear-gradient(135deg, #DCFCE7, #BBF7D0); color: #166534; border: 1px solid #86EFAC; }
.pyra-top::before { background: var(--green); }
.pyra-high { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); color: #15803D; border: 1px solid #BBF7D0; }
.pyra-high::before { background: #22c55e; }
.pyra-mid { background: var(--bg-canvas); color: var(--fg-dim); border: 1px solid var(--border); }
.pyra-mid::before { background: #94a3b8; }
.pyra-bottom { background: linear-gradient(135deg, #FEF2F2, #FECACA); color: #991b1b; border: 1px solid #FECACA; }
.pyra-bottom::before { background: var(--red); }
.pyra-pct-input {
  width: 60px; text-align: right; font-size: 14px; font-weight: 800;
  border: none; background: rgba(255,255,255,0.6); padding: 4px 8px;
  border-radius: 6px; outline: none;
}
.pyra-pct-input:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pyra-pct-suffix { font-size: 12px; font-weight: 700; opacity: 0.7; margin-left: 2px; }
/* État "inconnu" : inputs disabled, barres restent visibles */
.pyramide-wrap.unknown .pyramide-bar { opacity: 0.8; }
.pyramide-wrap.unknown .pyra-pct-input { pointer-events: none; opacity: 0.5; }
/* Cercle taux connu */
.pyra-circle-known { text-align: center; }
.pyra-circ-label {
  font-size: 11px; font-weight: 700; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.pyra-circ-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 6px solid var(--green); display: flex; align-items: center;
  justify-content: center; margin: 0 auto;
  transition: border-color 0.3s;
}
.pyra-circ-ring.mid { border-color: var(--amber); }
.pyra-circ-ring.low { border-color: var(--red); }
.pyra-circ-pct { font-size: 28px; font-weight: 900; color: var(--fg); }
.pyra-circ-sub {
  font-size: 11px; color: var(--fg-dim); margin-top: 10px; line-height: 1.5;
}
/* Gros "?" quand taux inconnu */
.pyra-circle-unknown { text-align: center; }
.pyra-big-q {
  font-size: 80px; font-weight: 900; color: var(--accent); opacity: 0.35;
  line-height: 1;
}
.pyra-big-q-msg { font-size: 13px; font-weight: 700; color: var(--fg); margin-top: 8px; }
.pyra-big-q-sub { font-size: 11px; color: var(--fg-dim); margin-top: 4px; line-height: 1.4; }


/* ─── VIEW TOGGLE ──────────────────────────────────────────────── */
.view-toggle { display: flex; gap: 2px; background: var(--bg-canvas); border-radius: 6px; padding: 2px; }
.view-btn {
  padding: 4px 8px; border: none; background: transparent; border-radius: 4px;
  cursor: pointer; font-size: 14px; color: var(--fg-dim); transition: all 0.15s;
}
.view-btn:hover { background: var(--bg); color: var(--fg); }
.view-btn.active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }

/* View modes for tagger section */
.section[data-view="photo"] .tagger-main { display: flex; flex: 1; }
.section[data-view="photo"] #synoptiqueWrap { display: none !important; }
.section[data-view="photo"] .summary-bar,
.section[data-view="photo"] .footer { display: flex; }


/* ─── Constructor view: masquer image-area, garder panel ───────── */
.section[data-view="constructor"] .image-area { display: none !important; }
.section[data-view="constructor"] .summary-bar { display: none; }
.section[data-view="constructor"] .footer { display: none; }
.section[data-view="constructor"] #synoConstructor { display: flex !important; flex: 1; }
/* Masquer syno-mat-bar quand panel gere les matieres (classe toggled par JS) */
.syno-mat-bar.hidden-by-panel { display: none !important; }

/* ─── CONSTRUCTEUR SYNOPTIQUE (drag & drop) ───────────────────── */
.syno-constructor {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
/* Barre matières intégrée */
.syno-mat-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0); border-bottom: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.syno-mat-bar-label { font-size: 11px; font-weight: 700; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.syno-mat-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.syno-mat-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); color: var(--fg);
}
.syno-mat-chip-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 16px; border-radius: 4px; font-size: 8px; font-weight: 800;
  color: #fff; cursor: pointer; letter-spacing: 0.3px; transition: transform 0.1s;
  flex-shrink: 0;
}
.syno-mat-chip-dot:hover { transform: scale(1.15); }
.syno-mat-chip .syno-mat-chip-del {
  cursor: pointer; font-size: 10px; color: var(--fg-dim); margin-left: 2px;
  border: none; background: none; padding: 0; line-height: 1;
}
.syno-mat-chip .syno-mat-chip-del:hover { color: #ef4444; }
.syno-mat-input {
  padding: 4px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-size: 11px; background: var(--bg); color: var(--fg); outline: none; width: 140px;
}
.syno-mat-input:focus { border-color: var(--accent); }
.syno-mat-dd {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--bg);
  border: 1.5px solid var(--border); border-radius: var(--radius); max-height: 200px;
  overflow-y: auto; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.syno-mat-dd-item {
  padding: 6px 10px; font-size: 11px; cursor: pointer; display: flex; justify-content: space-between;
}
.syno-mat-dd-item:hover { background: var(--bg-hover); }
.syno-bar-btn {
  color: #fff; border: none; border-radius: 4px; padding: 4px 10px;
  font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.syno-unplaced {
  padding: 8px 12px; border-bottom: none;
  background: var(--bg-panel); flex-shrink: 0; overflow-y: auto;
  height: 35%; min-height: 100px;
}
.syno-unplaced.collapsed { height: 36px !important; min-height: 36px; overflow: hidden; }
.syno-unplaced.collapsed .syno-unplaced-photos { display: none; }
/* ─── Splitter drag handle ─── */
.syno-splitter {
  height: 6px; background: var(--border); cursor: row-resize; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; position: relative;
}
.syno-splitter:hover, .syno-splitter.dragging { background: var(--accent); }
.syno-splitter::after {
  content: ''; width: 32px; height: 3px; border-radius: 2px;
  background: rgba(0,0,0,0.15);
}
.syno-splitter:hover::after, .syno-splitter.dragging::after { background: rgba(255,255,255,0.5); }
.syno-unplaced-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg-dim); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.syno-unplaced-toggle {
  font-size: 10px; transition: transform 0.2s; display: inline-block;
}
.syno-unplaced.collapsed .syno-unplaced-toggle { transform: rotate(-90deg); }
.syno-unplaced-photos {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-content: flex-start;
}
.syno-drag-thumb {
  width: 110px; height: 110px; object-fit: cover; border-radius: 6px;
  cursor: grab; border: 2px solid transparent; transition: all 0.15s;
}
.syno-drag-thumb:active { cursor: grabbing; }
.syno-drag-thumb:hover { border-color: var(--primary); transform: scale(1.05); }
.syno-drag-thumb.dragging { opacity: 0.4; }
.syno-constructor-grid {
  flex: 1; overflow: auto; padding: 12px;
}
.syno-constructor-grid table { border-collapse: separate; border-spacing: 0; width: 100%; }
.syno-constructor-grid th {
  padding: 8px 6px; font-size: 11px; font-weight: 700;
  text-align: center; white-space: normal; word-break: break-word;
  border-bottom: 2px solid var(--border); border-right: 1px solid var(--border);
  max-width: 130px; line-height: 1.3;
}
.syno-constructor-grid td {
  padding: 4px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  vertical-align: middle; min-width: 140px; min-height: 80px; text-align: center;
  transition: background 0.15s;
}
.syno-constructor-grid td.drop-hover {
  background: rgba(124,92,252,0.1); outline: 2px dashed var(--primary);
}
.syno-drop-cell {
  min-height: 56px; max-height: 320px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; align-items: flex-start; align-content: flex-start;
}
.syno-drop-cell.empty { position: relative; }
.syno-drop-cell.empty .syno-add-icon-btn {
  width: 48px; height: 48px; border: 2px dashed var(--border); border-radius: 4px;
  background: none; cursor: pointer; font-size: 18px; color: var(--fg-dim);
  transition: all 0.15s; opacity: 0.5;
}
.syno-drop-cell.empty .syno-add-icon-btn:hover { opacity: 1; border-color: var(--primary); color: var(--primary); }

/* ─── Carte synoptique ─── */
.syno-card {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  background: var(--bg); border-radius: 6px; padding: 3px;
  border: 1px solid var(--border); transition: box-shadow 0.15s;
}
.syno-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.syno-card-meta {
  font-size: 9px; color: var(--fg-dim); text-align: center;
  max-width: 126px; word-wrap: break-word; overflow-wrap: break-word;
  padding: 2px 2px; line-height: 1.3;
}
.syno-card-edit {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: var(--accent); color: #fff;
  font-size: 9px; cursor: pointer; display: none; align-items: center; justify-content: center;
  line-height: 1;
}
.syno-card-del {
  position: absolute; top: -4px; left: -4px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: #ef4444; color: #fff;
  font-size: 10px; cursor: pointer; display: none; align-items: center; justify-content: center;
  line-height: 1; font-weight: 700;
}
.syno-card:hover .syno-card-edit,
.syno-card:hover .syno-card-del { display: flex; }
td.syno-cell-selected {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -2px;
  background: rgba(99, 102, 241, 0.06);
}

.syno-placed-thumb {
  width: 120px; height: 120px; object-fit: cover; border-radius: 6px;
  cursor: grab; border: 1px solid var(--border); transition: all 0.15s;
}
.syno-placed-thumb:hover { border-color: var(--primary); transform: scale(1.05); }

.syno-icon-card {
  width: 120px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--bg-panel); border-radius: 6px; border: 1px solid var(--border); padding: 6px 4px;
  color: var(--fg-dim);
}
.syno-icon-label {
  font-size: 9px; font-weight: 600; color: var(--fg-dim); text-align: center;
  line-height: 1.2; max-width: 110px; word-break: break-word;
}

/* ─── Popover édition carte ─── */
.syno-popover {
  position: fixed; z-index: 1000; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 12px; min-width: 220px;
  font-size: 12px;
}
.syno-popover-title { font-weight: 700; font-size: 11px; margin-bottom: 8px; color: var(--fg); text-transform: uppercase; letter-spacing: 0.5px; }
.syno-popover label { display: block; font-size: 10px; color: var(--fg-dim); margin: 6px 0 2px; font-weight: 600; }
.syno-pop-input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--fg); font-size: 12px; box-sizing: border-box;
}
.syno-pop-input:focus { border-color: var(--accent); outline: none; }
.syno-popover-actions { display: flex; gap: 8px; margin-top: 10px; }
.syno-pop-save, .syno-pop-del {
  flex: 1; padding: 5px 0; border: none; border-radius: 4px; cursor: pointer;
  font-size: 11px; font-weight: 600;
}
.syno-pop-save { background: var(--accent); color: #fff; }
.syno-pop-del { background: var(--bg-panel); color: var(--fg-dim); }

/* ─── Picker d'icônes ─── */
.syno-icon-picker .syno-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 280px; overflow-y: auto; }
.syno-icon-pick {
  width: auto; min-height: 52px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); cursor: pointer; transition: all 0.1s;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 4px;
}
.syno-icon-pick svg { width: 22px; height: 22px; }
.syno-icon-pick-label { font-size: 8px; font-weight: 600; color: var(--fg-dim); text-align: center; line-height: 1.1; }
.syno-icon-pick:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.syno-icon-pick:hover .syno-icon-pick-label { color: #fff; }
.syno-icon-custom { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.syno-pop-textarea { resize: vertical; min-height: 40px; font-family: inherit; }
.syno-etape-label {
  font-size: 10px; font-weight: 600; color: var(--fg-dim);
  text-align: left; white-space: normal; padding: 6px 8px;
  border-bottom: 1px solid var(--border); background: var(--bg-panel);
  min-width: 70px; max-width: 100px; word-break: break-word; line-height: 1.3;
}
.syno-presta-row { background: #faf9fd; }
.syno-presta-row td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; position: relative; }
.syno-presta-input {
  width: 100%; padding: 5px 22px 5px 8px; border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 11px; background: var(--bg); color: var(--fg); outline: none; box-sizing: border-box;
}
.syno-presta-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
.syno-presta-input::placeholder { color: var(--fg-dim); opacity: 0.5; }
.syno-presta-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--fg-dim); font-size: 14px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.syno-presta-clear:hover { color: #ef4444; }

/* ─── SYNOPTIQUE ───────────────────────────────────────────────── */
.syno-table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 11px; table-layout: auto;
}
.syno-table th, .syno-table td { padding: 6px 8px; vertical-align: middle; text-align: center; }
.syno-table thead th {
  position: sticky; top: 0; z-index: 2;
  font-weight: 700; font-size: 10px; color: #fff; padding: 8px 6px;
  border-right: 2px solid rgba(255,255,255,0.3);
  word-break: break-word; hyphens: auto; max-width: 110px; min-width: 70px;
  line-height: 1.3;
}
.syno-macro-row th { position: sticky; top: 0; z-index: 3; border-bottom: none; }
.syno-macro-row th:first-child { background: var(--bg-panel) !important; color: transparent; }
.syno-mat-header { background: var(--accent) !important; position: sticky; top: 28px !important; z-index: 2; font-size: 11px !important; color: #fff; padding: 6px 8px !important; white-space: normal !important; word-break: break-word; line-height: 1.3; max-width: 130px; }
.syno-table thead th:first-child { background: var(--bg-panel); color: var(--fg-dim); border-radius: 10px 0 0 0; max-width: none; }
.syno-table thead th:last-child { border-right: none; border-radius: 0 10px 0 0; }
/* Empty state */
.syno-empty-state { text-align: center; padding: 80px 40px; color: var(--fg-dim); }
.syno-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.4; }
.syno-empty-title { font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: 8px; }
.syno-empty-sub { font-size: 13px; color: var(--fg-dim); }
.syno-macro-DIB { background: #22c55e; }
.syno-macro-DID { background: #ef4444; }
.syno-macro-AMV { background: #3b82f6; }
.syno-macro-default { background: var(--accent); }
.syno-table tbody td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  background: #fff; min-width: 70px; max-width: 120px;
}
.syno-table tbody td:first-child {
  background: var(--bg-panel); font-weight: 700; color: var(--fg-dim);
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px;
  position: sticky; left: 0; z-index: 1; min-width: 70px; max-width: 100px;
  white-space: normal; word-break: break-word; line-height: 1.3;
}
.syno-table tbody tr:last-child td { border-bottom: none; }
/* Step cell: thumbnail + tag label stacked */
.syno-step-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0;
}
.syno-step-thumb {
  width: 64px; height: 48px; object-fit: cover; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12); cursor: pointer; transition: transform 0.15s;
}
.syno-step-thumb:hover { transform: scale(2.2); z-index: 10; position: relative; }
.syno-step-icon {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #f0f0ff; border: 1.5px solid #e0e0f0;
}
/* Legacy photo cell (kept for compat) */
.syno-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.syno-thumb {
  width: 80px; height: 60px; object-fit: cover; border-radius: 6px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s;
}
.syno-thumb:hover { transform: scale(1.8); z-index: 10; position: relative; }
.syno-label { font-size: 9px; color: var(--fg-dim); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syno-empty { color: #ccc; font-size: 14px; }
/* Row label with Lucide icon */
.syno-row-label { display: flex; align-items: center; gap: 6px; }
.syno-row-label svg { flex-shrink: 0; }
/* Tag styles */
.syno-filiere-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px;
  font-size: 9px; font-weight: 600; background: var(--accent-light); color: var(--accent);
}
.syno-dim-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 10px;
  font-size: 8px; font-weight: 600; background: #f1f5f9; color: #475569;
  word-break: break-word; text-align: center; line-height: 1.3; max-width: 100px;
}
.syno-presta-tag {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px;
  font-size: 9px; font-weight: 700; background: #fef3c7; color: #92400e;
}

/* ─── QUOTE: Matières taguées (hints) ─────────────────────────── */
.quote-matiere-hints {
  background: var(--bg-canvas); border: 1.5px dashed var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
}
.quote-matiere-hints-label {
  font-size: 11px; font-weight: 600; color: var(--fg-dim);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
.quote-matiere-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quote-matiere-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--accent-light); color: var(--accent);
  border: 1px solid transparent; transition: all 0.15s;
}
.quote-matiere-chip:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.quote-matiere-chip .chip-count {
  font-size: 10px; font-weight: 700; background: rgba(124,92,252,0.15);
  padding: 1px 6px; border-radius: 8px; min-width: 18px; text-align: center;
}
.quote-matiere-chip:hover .chip-count {
  background: rgba(255,255,255,0.25);
}
.quote-matiere-chip.used {
  opacity: 0.45; text-decoration: line-through;
}

/* ─── QUOTE GENERATOR ──────────────────────────────────────────── */
.quote-header {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 16px;
}
.quote-header-row {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.quote-header-field { display: flex; flex-direction: column; gap: 4px; }
.quote-header-field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-dim);
}
.quote-input-wrap {
  display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--fg);
}
.quote-input-wrap input {
  width: 140px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; text-align: right; outline: none; font-family: "SF Mono", monospace; color: var(--fg);
}
.quote-input-wrap input:focus { border-color: var(--accent); }

/* Tableau devis – mode plein écran */
.qt-fullscreen-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); flex-direction: column;
}
.qt-fullscreen-overlay.open { display: flex; }
.qt-fullscreen-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1.5px solid var(--border);
  background: var(--bg-panel); flex-shrink: 0;
}
.qt-fullscreen-bar h3 { margin: 0; font-size: 15px; font-weight: 700; }
.qt-fullscreen-body {
  flex: 1; overflow: auto; padding: 20px 24px;
}
.qt-fullscreen-actions {
  display: flex; gap: 8px; padding: 12px 24px; border-top: 1.5px solid var(--border);
  background: var(--bg-panel); flex-shrink: 0;
}
.qt-expand-btn {
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 11px; color: var(--fg-dim); cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.qt-expand-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Overlay synoptique (visualisation fermable) ──────────────── */
.syno-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-canvas, #f1f5f9); flex-direction: column;
}
.syno-overlay.open { display: flex; }
.syno-overlay-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 28px; border-bottom: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #fff); flex-shrink: 0;
}
.syno-overlay-bar h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; color: var(--fg, #1e293b); }
.syno-overlay-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border, #e2e8f0); background: var(--bg, #fff); color: var(--fg-dim, #64748b);
  transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px;
}
.syno-overlay-btn:hover { border-color: var(--accent); color: var(--accent); }
.syno-overlay-btn-primary { background: #334155; color: #fff; border-color: #334155; }
.syno-overlay-btn-primary:hover { background: #1e293b; }
.syno-overlay-btn-green { background: #16a34a; color: #fff; border-color: #16a34a; }
.syno-overlay-btn-green:hover { background: #15803d; }
.syno-overlay-btn-close {
  background: none; border: 1.5px solid var(--border, #e2e8f0); border-radius: 8px;
  font-size: 18px; color: #94a3b8; cursor: pointer; padding: 4px 10px; line-height: 1;
  transition: all 0.15s;
}
.syno-overlay-btn-close:hover { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
.syno-overlay-body {
  flex: 1; overflow: auto; padding: 24px 28px;
}
.syno-overlay-body .syno-table { border-collapse: separate; border-spacing: 0; min-width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.syno-overlay-body .syno-table thead th {
  position: sticky; top: 0; z-index: 2;
  font-weight: 700; font-size: 11px; color: #fff; padding: 10px 12px;
  border-right: 2px solid rgba(255,255,255,0.3);
  word-break: break-word; hyphens: auto; max-width: 160px; min-width: 100px;
  line-height: 1.3;
}
.syno-overlay-body .syno-macro-row th { position: sticky; top: 0; z-index: 3; border-bottom: none; }
.syno-overlay-body .syno-macro-row th:first-child { background: var(--bg-panel, #f8fafc) !important; color: transparent; }
.syno-overlay-body .syno-mat-header {
  background: var(--accent, #7c5cfc) !important; position: sticky; top: 32px !important; z-index: 2;
  font-size: 12px !important; color: #fff; padding: 8px 12px !important;
  white-space: normal !important; word-break: break-word; line-height: 1.3; max-width: 160px;
}
.syno-overlay-body .syno-table thead th:first-child { background: var(--bg-panel, #f8fafc); color: var(--fg-dim, #64748b); border-radius: 10px 0 0 0; max-width: none; }
.syno-overlay-body .syno-table thead th:last-child { border-right: none; border-radius: 0 10px 0 0; }
.syno-overlay-body .syno-table tbody td {
  border-bottom: 1px solid var(--border, #e2e8f0); border-right: 1px solid var(--border, #e2e8f0);
  background: #fff; min-width: 100px; max-width: 180px; padding: 8px 10px;
  vertical-align: top; text-align: center;
}
.syno-overlay-body .syno-table tbody td:first-child {
  background: var(--bg-panel, #f8fafc); font-weight: 700; color: var(--fg-dim, #64748b);
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px;
  position: sticky; left: 0; z-index: 1; min-width: 90px; max-width: 130px;
  white-space: normal; word-break: break-word; line-height: 1.4;
  border-right: 2px solid var(--border, #cbd5e1);
}
.syno-overlay-body .syno-table tbody tr:hover td { background: #f0f9ff; }
.syno-overlay-body .syno-table tbody tr:hover td:first-child { background: #e8f0fe; }
.syno-overlay-body .syno-table tbody tr:last-child td { border-bottom: none; }
/* Overlay cell content */
.syno-ov-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; }
.syno-ov-thumb {
  width: 120px; height: 90px; object-fit: cover; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.syno-ov-thumb:hover { transform: scale(1.8); z-index: 10; position: relative; }
.syno-ov-icon {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px;
  background: #f0f0ff; border: 2px solid #e0e0f0;
}
.syno-ov-icon-label { font-size: 9px; font-weight: 600; text-align: center; margin-top: 2px; }
.syno-ov-meta {
  font-size: 10px; color: var(--fg-dim, #64748b); text-align: center;
  max-width: 150px; line-height: 1.4;
}
.syno-ov-meta .tag {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 9px; font-weight: 600; margin: 1px 2px;
}
.syno-ov-meta .tag-presta { background: #fef3c7; color: #92400e; }
.syno-ov-meta .tag-freq { background: #dbeafe; color: #1e40af; }
.syno-ov-meta .tag-container { background: #f1f5f9; color: #475569; }
.syno-ov-meta .tag-qty { background: #ede9fe; color: #6d28d9; }
/* Subtitle header */
.syno-ov-header { text-align: center; margin-bottom: 20px; }
.syno-ov-header p { font-size: 13px; color: var(--fg-dim, #64748b); margin: 0; }
@media print {
  body > *:not(.syno-overlay) { display: none !important; }
  .syno-overlay.open { position: static; display: block; }
  .syno-overlay-bar { display: none !important; }
  .syno-overlay-body { overflow: visible; padding: 0; }
  .syno-overlay-body .syno-table thead th { font-size: 9px; padding: 4px; }
  .syno-overlay-body .syno-table tbody td { font-size: 9px; padding: 4px; }
  .syno-ov-thumb { width: 60px !important; height: 45px !important; }
}

/* ─── QUOTE VIEW TOGGLE ───────────────────────────────────────── */
.quote-view-toggle {
  display: flex; gap: 2px; margin-bottom: 14px;
  background: var(--bg-panel); border-radius: 8px; padding: 3px;
  width: fit-content; border: 1px solid var(--border);
}
.quote-view-btn {
  padding: 6px 16px; border: none; background: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--fg-dim);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.quote-view-btn.active {
  background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(124,92,252,0.2);
}
.quote-view-btn:hover:not(.active) { background: rgba(124,92,252,0.06); }

/* ─── QUOTE TABLE VIEW (inline editable spreadsheet) ──────────── */
.quote-table-view { margin-bottom: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.quote-table-view table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.quote-table-view thead th {
  padding: 7px 4px; text-align: left; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; color: #fff;
  background: #4a4a5a; white-space: nowrap;
  position: sticky; top: 0; border-right: 1px solid rgba(255,255,255,0.1);
}
.quote-table-view thead th:last-child { border-right: none; }
.quote-table-view thead th.num { text-align: right; }
.quote-table-view tbody tr { transition: background 0.08s; }
.quote-table-view tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.quote-table-view tbody tr:hover { background: rgba(124,92,252,0.04); }
.quote-table-view tbody td {
  padding: 0; vertical-align: middle;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.quote-table-view tbody td:last-child { border-right: none; }
.quote-table-view tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-table-view tbody td.mat-cell { font-weight: 700; }
.quote-table-view tbody td.total-cell { font-weight: 800; padding: 0 6px; white-space: nowrap; }
.quote-table-view tbody td.del-cell { padding: 0 2px; text-align: center; border-right: 1px solid var(--border); }
.quote-table-view tbody td.macro-cell { padding: 4px 6px; text-align: center; }
.quote-table-view input.qt-inline {
  width: 100%; padding: 6px 6px; border: none; border-radius: 0;
  font-size: 12px; text-align: right; background: transparent;
  font-family: inherit; color: var(--fg); font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.quote-table-view input.qt-inline:focus {
  background: rgba(124,92,252,0.06); outline: 2px solid var(--accent); outline-offset: -2px;
}
.quote-table-view input.qt-inline-mat {
  text-align: left; font-weight: 700;
}
.quote-table-view select.qt-sel {
  width: 100%; padding: 5px 4px; border: none; border-radius: 0;
  font-size: 11px; background: transparent; font-family: inherit;
  color: var(--fg); cursor: pointer; box-sizing: border-box;
  appearance: auto; -webkit-appearance: auto;
}
.quote-table-view select.qt-sel:focus {
  background: rgba(124,92,252,0.06); outline: 2px solid var(--accent); outline-offset: -2px;
}
.quote-table-view tfoot td {
  padding: 8px 6px; font-weight: 700; border-top: 2px solid var(--border);
}
.quote-table-view .qt-row-del {
  width: 22px; height: 22px; border: none; background: none;
  color: #ccc; cursor: pointer; font-size: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.quote-table-view .qt-row-del:hover { background: rgba(239,68,68,0.08); color: #ef4444; }

/* ─── QUOTE CARDS (grille cartes par matiere) ─────────────────── */
.qcard-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 16px; margin-bottom: 16px;
}
.qcard-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.qcard {
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg); overflow: visible;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qcard:hover { border-color: rgba(124,92,252,0.4); box-shadow: 0 2px 12px rgba(124,92,252,0.08); }

/* Dual panel layout : actuel a gauche, cible a droite */
.qcard-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.qcard-panel {
  display: flex; flex-direction: column;
}
.qcard-panel-actuel {
  border-right: 1px solid var(--border);
}
.qcard-panel-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 14px; text-align: center;
}
.qcard-panel-actuel .qcard-panel-title {
  background: #fef2f2; color: #991b1b;
}
.qcard-panel-cible .qcard-panel-title {
  background: #f0fdf4; color: #166534;
}
.qcard-row-presta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.qcard-row-presta label { font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
.qcard-row-presta input {
  flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 12px; font-family: inherit;
}
.qcard-row-presta input:focus { border-color: var(--accent); outline: none; }

/* Sections actuel - couleurs differenciees */
.qcard-trait-a { background: #fef2f2; }
.qcard-trait-a .qcard-section-label { color: #991b1b; }
.qcard-trans-a { background: #fffbeb; }
.qcard-trans-a .qcard-section-label { color: #92400e; }
.qcard-cont-a { background: #eff6ff; }
.qcard-cont-a .qcard-section-label { color: #1e40af; }

/* Delta par carte */
.qcard-delta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-radius: 0 0 11px 11px;
}
.qcard-delta-label { font-size: 11px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.qcard-delta-value { font-size: 14px; font-weight: 800; color: var(--fg-dim); font-family: "SF Mono", "Fira Code", monospace; }
.qcard-delta-value.economy { color: #16a34a; }
.qcard-delta-value.surcout { color: #dc2626; }
.qcard-delta-value.neutral { color: var(--fg-dim); }

/* Recap table : colonnes actuel/cible */
.qcard-recap-table th.rt-actuel { background: #fef2f2; color: #991b1b; }
.qcard-recap-table th.rt-cible { background: #f0fdf4; color: #166534; }
.qcard-recap-table th.rt-delta { background: var(--bg-panel); color: var(--fg); }
.qcard-recap-table td.economy { color: #16a34a; }
.qcard-recap-table td.surcout { color: #dc2626; }

/* Responsive : empiler les panels sur petit ecran */
@media (max-width: 700px) {
  .qcard-duo { grid-template-columns: 1fr; }
  .qcard-panel-actuel { border-right: none; border-bottom: 1px solid var(--border); }
}
.qcard-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
}
.qcard-header input {
  flex: 1; border: none; background: transparent; font-size: 14px;
  font-weight: 700; color: var(--fg); outline: none; font-family: inherit;
  min-width: 0;
}
.qcard-header input::placeholder { color: #c4bfda; font-weight: 500; }
.qcard-header input:focus { background: rgba(124,92,252,0.04); border-radius: 4px; }
.qcard-del {
  width: 24px; height: 24px; border: none; background: none; color: #ccc;
  cursor: pointer; font-size: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.qcard-del:hover { background: rgba(239,68,68,0.08); color: #ef4444; }

.qcard-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.qcard-section {
  border-radius: 8px; padding: 8px 10px;
}
.qcard-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px;
}
.qcard-section select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; color: var(--fg);
  background: #fff; cursor: pointer; outline: none; font-family: inherit;
}
.qcard-section select:focus { border-color: var(--accent); }

/* Searchable select */
.qsel {
  position: relative; width: 100%;
}
.qsel-display {
  width: 100%; padding: 6px 28px 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; color: var(--fg);
  background: #fff; cursor: pointer; outline: none; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 30px; line-height: 18px; box-sizing: border-box;
}
.qsel-display:hover { border-color: var(--fg-dim); }
.qsel-display::after {
  content: ''; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--fg-dim); pointer-events: none;
}
.qsel-display.qsel-empty { color: var(--fg-dim); }
.qsel-dropdown {
  /* position et coords overrides par JS (fixed via getBoundingClientRect) */
  display: none; position: absolute; left: 0; top: 100%;
  min-width: 100%; width: max-content; max-width: 520px;
  margin-top: 2px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 9999; max-height: 280px; overflow: hidden;
  flex-direction: column;
}
.qsel.open .qsel-dropdown { display: flex; }
.qsel-search {
  width: 100%; padding: 7px 10px; border: none;
  border-bottom: 1px solid var(--border); font-size: 12px;
  color: var(--fg); outline: none; font-family: inherit;
  box-sizing: border-box; background: var(--bg-panel);
}
.qsel-search::placeholder { color: #aaa; }
.qsel-list {
  overflow-y: auto; max-height: 200px; padding: 4px 0;
}
.qsel-opt {
  padding: 6px 10px; font-size: 12px; cursor: pointer;
  white-space: normal; word-break: break-word; line-height: 1.35;
  color: var(--fg);
}
.qsel-opt:hover, .qsel-opt.qsel-hl { background: var(--accent-alpha, rgba(124,92,252,0.08)); }
.qsel-opt.selected { font-weight: 600; color: var(--accent); }
.qsel-opt-group {
  padding: 5px 10px 3px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-dim);
  pointer-events: none;
}
.qsel-no-result {
  padding: 10px; font-size: 11px; color: var(--fg-dim);
  text-align: center; font-style: italic;
}
/* Compact qsel for tableur view */
.qt-tbl-qsel .qsel-display {
  padding: 3px 20px 3px 6px; font-size: 11px; min-height: 24px; line-height: 16px;
  border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qt-tbl-qsel .qsel-display::after { right: 6px; border-top-width: 4px; border-left-width: 3px; border-right-width: 3px; }
.qt-tbl-trait-slot, .qt-tbl-trans-slot, .qt-tbl-cont-slot, .qt-tbl-mat-slot { position: relative; overflow: visible; }
.qt-tbl-trait-slot .qsel, .qt-tbl-trans-slot .qsel, .qt-tbl-cont-slot .qsel, .qt-tbl-mat-slot .qsel { width: 100%; }
.quote-table-view tbody td.mat-cell { overflow: hidden; text-overflow: ellipsis; }
.quote-table-view input.qt-inline-mat { overflow: hidden; text-overflow: ellipsis; }
.qcard-section .qcard-row {
  display: flex; gap: 8px; align-items: center; margin-top: 6px;
}
.qcard-section .qcard-row label {
  font-size: 11px; color: var(--fg-dim); white-space: nowrap; min-width: 32px;
}
.qcard-section .qcard-row input {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; font-family: "SF Mono", monospace;
  text-align: right; color: var(--fg); outline: none; min-width: 0;
}
.qcard-section .qcard-row input:focus { border-color: var(--accent); }
.qcard-section .qcard-row .qcard-unit {
  font-size: 11px; color: var(--fg-dim); white-space: nowrap;
}
.qcard-section .qcard-row select.qcard-unite-sel {
  width: auto; flex: 0 0 auto; padding: 5px 6px; font-size: 11px;
  min-width: 60px;
}

/* Section couleurs */
.qcard-section.qcard-trait { background: #f0fdf4; }
.qcard-section.qcard-trait .qcard-section-label { color: #166534; }
.qcard-section.qcard-trans { background: #fffbeb; }
.qcard-section.qcard-trans .qcard-section-label { color: #92400e; }
.qcard-section.qcard-cont { background: #eff6ff; }
.qcard-section.qcard-cont .qcard-section-label { color: #1e40af; }

.qcard-autres-row {
  display: flex; gap: 8px; align-items: center;
  padding: 0 2px;
}
.qcard-autres-row label { font-size: 11px; color: var(--fg-dim); }
.qcard-autres-row input {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; font-family: "SF Mono", monospace;
  text-align: right; color: var(--fg); outline: none; min-width: 0;
}
.qcard-autres-row input:focus { border-color: var(--accent); }

.qcard-footer {
  padding: 10px 14px; border-top: 1.5px solid var(--border);
  background: var(--bg-panel); display: flex; justify-content: space-between;
  align-items: center;
}
.qcard-footer-label { font-size: 11px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.qcard-footer-total {
  font-family: "SF Mono", monospace; font-weight: 800; font-size: 14px;
  color: var(--fg);
}
.qcard-footer-total.incomplete { color: #ccc; }
.qcard-footer-total.rachat { color: #16a34a; }

.qcard .qcard-invalid { box-shadow: inset 0 0 0 1.5px rgba(239,68,68,0.5); }

/* Modal tableau recapitulatif */
.qcard-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.4); display: flex;
  align-items: center; justify-content: center;
}
.qcard-modal {
  background: var(--bg); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 95vw; max-width: 1200px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.qcard-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1.5px solid var(--border);
  background: var(--bg-panel); flex-shrink: 0;
}
.qcard-modal-body {
  flex: 1; overflow: auto; padding: 20px;
}

/* Tableau recap dans la modal (reutilise les couleurs qt) */
.qcard-recap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qcard-recap-table th {
  padding: 8px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; text-align: left; white-space: nowrap;
  border-bottom: 2px solid var(--border);
}
.qcard-recap-table th.rt-mat { background: var(--bg-panel); color: var(--fg-dim); }
.qcard-recap-table th.rt-trait { background: #f0fdf4; color: #166534; }
.qcard-recap-table th.rt-trans { background: #fffbeb; color: #92400e; }
.qcard-recap-table th.rt-cont { background: #eff6ff; color: #1e40af; }
.qcard-recap-table th.rt-aut { background: #fdf4ff; color: #7e22ce; }
.qcard-recap-table th.num { text-align: right; }
.qcard-recap-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.qcard-recap-table td.num { text-align: right; font-family: "SF Mono", monospace; }
.qcard-recap-table td.mat-cell { font-weight: 700; }
.qcard-recap-table tbody tr:last-child td { border-bottom: none; }
.qcard-recap-table tbody tr:hover { background: rgba(124,92,252,0.02); }
.qcard-recap-table tfoot td {
  padding: 10px; font-weight: 800; border-top: 2px solid var(--border);
}
.qcard-recap-table tfoot td.num { font-size: 14px; color: var(--accent); }

/* Récap */
.quote-recap {
  margin-top: 20px; padding: 16px 20px;
  background: var(--bg-panel); border: 1.5px solid var(--border); border-radius: var(--radius);
}
.quote-recap-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px; color: var(--fg);
}
.quote-recap-row span:last-child { font-family: "SF Mono", monospace; font-weight: 700; font-size: 14px; }
.quote-recap-sep { border-top: 2px solid var(--border); margin: 6px 0; }
.quote-recap-total { font-size: 15px; font-weight: 800; }
.quote-recap-total span:last-child { color: var(--accent); font-size: 18px; }
.quote-recap-mensuel { font-size: 13px; color: var(--fg-dim); }

/* Gain en un coup d'oeil */
.quote-gain {
  margin-top: 16px; padding: 16px 20px;
  background: rgba(124,92,252,0.04); border: 1.5px solid rgba(124,92,252,0.2); border-radius: var(--radius);
}
.quote-gain-title {
  font-size: 14px; font-weight: 800; color: var(--accent); margin-bottom: 10px;
}
.quote-gain-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 13px; color: var(--fg);
}
.quote-gain-row span:last-child { font-family: "SF Mono", monospace; font-weight: 700; }
.quote-gain-cinqo span:last-child { color: var(--accent); font-size: 15px; }
.quote-gain-mensuel { color: var(--fg-dim); font-style: italic; }
.quote-gain-delta {
  margin-top: 8px; padding: 10px; border-radius: var(--radius);
  font-size: 14px; font-weight: 700; text-align: center;
}
.quote-gain-delta.economy { background: rgba(34,197,94,0.08); color: #166534; }
.quote-gain-delta.surcout { background: #fef2f2; color: #991b1b; }
.quote-gain-delta.neutral { background: #f1f5f9; color: #64748b; }

/* ─── Analyse factures ──────────────────────────────────────────── */
.factures-section {
  margin-top: 24px; padding: 20px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.factures-header { margin-bottom: 16px; }
.factures-title { font-size: 15px; font-weight: 700; display: block; margin-bottom: 4px; }
.factures-subtitle { font-size: 12px; color: var(--fg-dim); }
.factures-dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-md);
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: all 0.2s; background: var(--bg-dim);
}
.factures-dropzone.dragover {
  border-color: var(--accent); background: rgba(124,92,252,0.04);
}
.factures-dropzone-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.5; }
.factures-dropzone-text { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.factures-dropzone-hint { font-size: 11px; color: var(--fg-dim); margin-bottom: 8px; }
.factures-drive-row {
  display: flex; gap: 8px; margin-top: 10px; align-items: center;
}
.factures-drive-input {
  flex: 1; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px; background: var(--bg);
  color: var(--fg); outline: none;
}
.factures-drive-input:focus { border-color: var(--accent); }
.factures-file-list {
  margin-top: 12px; display: flex; flex-direction: column; gap: 4px;
}
.factures-file-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--bg-dim); border-radius: var(--radius-sm); font-size: 12px;
}
.factures-file-item .fname { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.factures-file-item .fsize { color: var(--fg-dim); font-size: 11px; }
.factures-file-item .fremove {
  background: none; border: none; color: var(--fg-dim); cursor: pointer;
  font-size: 14px; padding: 0 4px; transition: color 0.15s;
}
.factures-file-item .fremove:hover { color: #ef4444; }
.factures-actions {
  margin-top: 12px; display: flex; align-items: center; gap: 12px;
}
.factures-actions-hint { font-size: 12px; color: var(--fg-dim); }
/* Resultats */
.factures-results { margin-top: 16px; }
.factures-results-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.factures-results-title { font-size: 14px; font-weight: 700; }
.factures-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.factures-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.factures-table th {
  text-align: left; padding: 8px 10px; background: var(--bg-dim);
  border-bottom: 2px solid var(--border); font-weight: 600; white-space: nowrap;
}
.factures-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--border);
}
.factures-table tr:last-child td { font-weight: 700; border-bottom: none; }
/* Graphique barres */
.factures-chart { margin-bottom: 16px; }
.factures-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px;
}
.factures-bar-label { width: 120px; text-align: right; color: var(--fg-dim); flex-shrink: 0; }
.factures-bar-track {
  flex: 1; height: 22px; background: var(--bg-dim); border-radius: 4px; overflow: hidden; position: relative;
}
.factures-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
  display: flex; align-items: center; padding-left: 8px;
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
}
.factures-bar-amount { margin-left: 8px; font-weight: 600; white-space: nowrap; min-width: 70px; }
/* Delta comparaison */
.factures-delta {
  padding: 12px; border-radius: var(--radius); background: rgba(124,92,252,0.04);
  border: 1px solid rgba(124,92,252,0.15);
}
.factures-delta-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.factures-delta-row {
  display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0;
}
.factures-delta-row .eco { color: #16a34a; font-weight: 600; }
.factures-delta-row .sur { color: #dc2626; font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════
   SECTION 5 — PARAMÈTRES CLIENT
   ════════════════════════════════════════════════════════════════════ */
/* ─── PARAMS : Supabase-style compact layout ─── */
.p-layout {
  flex: 1; overflow-y: auto; padding: 24px 32px;
  display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start;
}
@media (max-width: 960px) { .p-layout { grid-template-columns: 1fr; } }
.p-fields-col { display: flex; flex-direction: column; gap: 0; }
.p-section {
  border-bottom: 1px solid var(--border); padding: 16px 0;
}
.p-section:first-child { padding-top: 0; }
.p-section:last-child { border-bottom: none; }
.p-section-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--fg-dim); margin-bottom: 12px;
}
/* Each row: label left, input right */
.p-row {
  display: grid; grid-template-columns: 140px 1fr; align-items: center;
  gap: 8px; padding: 5px 0; position: relative;
}
.p-row label {
  font-size: 12px; font-weight: 500; color: var(--fg-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.p-row input, .p-row select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--fg); background: var(--bg); outline: none;
  transition: border-color 0.15s; font-family: inherit; width: 100%;
}
.p-row input:focus, .p-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,92,252,0.08); }
.p-row input::placeholder { color: var(--fg-dim); opacity: 0.4; }
/* Two fields side by side */
.p-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Logo row */
.p-row-logo { align-items: center; }
.p-logo-wrap { display: flex; align-items: center; gap: 8px; }
.p-logo-btn {
  font-size: 11px; font-weight: 600; color: var(--accent); cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--accent); border-radius: 5px;
  transition: all 0.15s; background: transparent;
}
.p-logo-btn:hover { background: rgba(124,92,252,0.06); }
/* Toggle switches for report sections */
.p-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.p-toggle {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg);
  cursor: pointer; padding: 3px 10px 3px 6px; border-radius: 5px;
  border: 1px solid var(--border); transition: all 0.15s; user-select: none;
}
.p-toggle:hover { border-color: var(--accent); }
.p-toggle input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.p-toggle span { white-space: nowrap; }
/* Right column: dropzone */
.p-drop-col {
  position: sticky; top: 24px;
}
.p-drop-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 24px; background: var(--bg-panel);
}
.p-drop-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--fg-dim); margin-bottom: 12px;
}
.p-drop-zone {
  border: 2px dashed var(--border); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 280px; text-align: center; transition: all 0.2s;
}
.p-drop-zone:hover { border-color: var(--accent); background: rgba(124,92,252,0.03); }
.p-drop-zone.drag-over { border-color: var(--accent); background: rgba(124,92,252,0.06); transform: scale(1.01); }
.p-drop-title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.p-drop-hint { font-size: 12px; color: var(--fg-dim); margin-bottom: 2px; }
.p-drop-formats { font-size: 11px; color: var(--fg-dim); opacity: 0.6; }
.p-drop-count { font-size: 12px; color: var(--fg-dim); margin-top: 10px; text-align: center; }
/* Legacy compat - keep old classes working if referenced elsewhere */
.params-content { flex: 1; overflow-y: auto; padding: 24px 32px; }
.params-field label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-dim);
}
.params-field input {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; color: var(--fg); outline: none; transition: border-color 0.15s; font-family: inherit;
}
.params-field input:focus { border-color: var(--accent); }
.params-field input::placeholder { color: var(--fg-dim); opacity: 0.4; }
/* Google Places Autocomplete dropdown */
.pac-container { z-index: 10000 !important; font-family: inherit; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.15); margin-top: 2px; }
.pac-item { padding: 6px 12px; font-size: 13px; cursor: pointer; }
.pac-item:hover { background: rgba(124,92,252,0.06); }
#paramAdresseSearch { width: 100%; }

/* Attio CRM search dropdown */
#paramAttioSearch { width: 100%; }
.p-attio-link { display:flex; align-items:center; gap:4px; min-height:28px; }
.attio-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); margin-top: 2px; max-height: 240px; overflow-y: auto;
}
.attio-item {
  padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; border-bottom: 1px solid var(--border);
}
.attio-item:last-child { border-bottom: none; }
.attio-item:hover { background: rgba(124,92,252,0.06); }
.attio-name { font-weight: 500; color: var(--fg); }
.attio-city { font-size: 11px; color: var(--fg-dim); }
.attio-empty { color: var(--fg-dim); font-style: italic; cursor: default; }
.attio-empty:hover { background: none; }

.fillout-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 13px; cursor: pointer;
}
.fillout-trigger:hover { border-color: var(--accent, #8b82a8); }

.report-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--fg); cursor: pointer; padding: 4px 0;
}
.report-toggle input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   GRID VIEW — PAINT MODE (v3.4.1)
   ════════════════════════════════════════════════════════════════════ */

/* Grid view mode — hide image-area, show grid */
.section[data-view="grid"] .image-area { display: none !important; }
.section[data-view="grid"] #gridContainer { display: flex !important; flex-direction: column; flex: 1; overflow: hidden; }
.section[data-view="grid"] #synoptiqueWrap { display: none !important; }
.section[data-view="grid"] .summary-bar { display: flex; }
.section[data-view="grid"] .footer { display: none; }
/* Grid mode: show ALL tag sections (no pass filtering) */
.section[data-view="grid"] .tag-section { display: block; }

/* Paint brush active state on pills */
.pill.paint-active {
  background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.3);
  animation: pulse-brush 1.5s ease-in-out infinite;
}
@keyframes pulse-brush {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124,92,252,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(124,92,252,0.15); }
}
/* Paint cursor on grid */
.grid-groups.paint-cursor { cursor: crosshair; }
.grid-groups.paint-cursor .grid-photo { cursor: crosshair; }

/* ─── GRID CONTAINER ───────────────────────────────────────────── */
.grid-container {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
}
.grid-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.grid-tool-btn {
  padding: 4px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  font-size: 12px; font-weight: 500; color: var(--fg-dim);
  cursor: pointer; transition: all var(--transition);
}
.grid-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.grid-tool-count {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--accent);
}
.grid-groups {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}

/* ─── GRID GROUP (header + photos) ─────────────────────────────── */
.grid-group { margin-bottom: 16px; }
.grid-group-header {
  font-size: 13px; font-weight: 700; color: var(--fg);
  padding: 6px 10px; margin-bottom: 8px;
  background: var(--accent-light); border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px;
}
.grid-group-header .grid-group-count {
  font-size: 11px; font-weight: 500; color: var(--fg-dim);
}

/* ─── GRID PHOTOS (CSS Grid) ──────────────────────────────────── */
.grid-group-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.grid-photo {
  position: relative; aspect-ratio: 1/1; border-radius: 8px;
  overflow: hidden; cursor: pointer; border: 2.5px solid transparent;
  transition: all 0.15s; background: var(--bg-canvas);
}
.grid-photo:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.grid-photo.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}
.grid-photo.selected::after {
  content: '✓'; position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; z-index: 2;
}
.grid-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.grid-photo .grid-photo-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3px 6px; background: rgba(0,0,0,0.55);
  font-size: 9px; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Tag badges on grid photos (multi-tag display) */
.grid-photo .grid-photo-tags {
  position: absolute; top: 4px; left: 4px; right: 28px;
  display: flex; flex-wrap: wrap; gap: 3px; z-index: 2;
}
.grid-tag-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px;
  font-size: 9px; font-weight: 700;
  background: rgba(0,0,0,0.6); color: #fff;
  line-height: 1.4; cursor: default;
  transition: opacity 0.15s;
}
.grid-tag-badge.brush-match {
  outline: 2px solid #fff; outline-offset: -1px;
}
.grid-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 50%;
  font-size: 10px; line-height: 1; font-weight: 700;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
  background: rgba(0,0,0,0.3); margin-left: 1px;
}
.grid-tag-badge:hover .grid-tag-x { opacity: 1; }
.grid-tag-x:hover { background: rgba(255,255,255,0.3); }

/* Large grid mode */
.grid-large .grid-group-photos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-large .grid-photo .grid-photo-label { font-size: 11px; padding: 4px 8px; }
/* Responsive grid */
@media (max-width: 900px) {
  .grid-group-photos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ─── TOAST ─────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--fg); color: white; padding: 10px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); opacity: 0; transition: all 0.3s ease; z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
.panel::-webkit-scrollbar, .finance-content::-webkit-scrollbar, .rse-content::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-track, .finance-content::-webkit-scrollbar-track, .rse-content::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb, .finance-content::-webkit-scrollbar-thumb, .rse-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ─── MODE RAPPORT (lecture seule, face client) ─── */
body.rapport-mode .sidebar { display: none !important; }
body.rapport-mode .app-topbar { display: none !important; }
body.rapport-mode .app-content { margin-left: 0 !important; }
body.rapport-mode .header { display: none !important; }
body.rapport-mode .panel { display: none !important; }
body.rapport-mode .btn-publish { display: none !important; }
body.rapport-mode .btn-folder { display: none !important; }

/* ─── GESTE DE TRI ───────────────────────────────────────────── */
.geste-content { padding: 28px 32px; max-width: 1400px; overflow-y: auto; }
.geste-eval { margin-bottom: 28px; }
.geste-eval-label { display: block; font-size: 13px; font-weight: 700; color: var(--fg-dim); margin-bottom: 10px; }
.geste-eval-options { display: flex; gap: 8px; flex-wrap: wrap; }
.geste-eval-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg); font-size: 13px; font-weight: 600; color: var(--fg-dim);
  cursor: pointer; transition: all 0.15s;
}
.geste-eval-btn:hover { border-color: var(--accent); color: var(--accent); }
.geste-eval-btn.active { border-color: var(--accent); background: rgba(124,92,252,0.08); color: var(--accent); font-weight: 700; }
.geste-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.geste-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.geste-card {
  border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg); transition: border-color 0.15s;
}
.geste-card:hover { border-color: var(--accent); }
.geste-card-rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(124,92,252,0.3);
}
.geste-card-photo {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: var(--bg-dim); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.geste-card-photo img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
}
.geste-card-empty {
  text-align: center; font-size: 12px; color: var(--fg-dim); line-height: 1.6; padding: 16px;
}
.geste-card-text {
  width: 100%; border: none; border-top: 1px solid var(--border);
  padding: 10px 12px; font-size: 12px; font-family: inherit; color: var(--fg);
  resize: none; height: 60px; background: transparent;
}
.geste-card-text:focus { outline: none; background: rgba(124,92,252,0.03); }
/* Drop zone active state */
.geste-dropzone { transition: border-color 0.15s, background 0.15s; border: 2px dashed transparent; }
.geste-dropzone.drag-over {
  border-color: var(--accent); background: rgba(124,92,252,0.08);
}
.geste-dropzone .geste-remove-btn {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 14px; cursor: pointer;
  display: none; align-items: center; justify-content: center; line-height: 1;
}
.geste-dropzone:hover .geste-remove-btn { display: flex; }
/* Gallery section */
.geste-gallery-section { margin-bottom: 20px; }
.geste-gallery-title {
  font-size: 14px; font-weight: 700; color: var(--fg); margin: 0 0 12px;
}
.geste-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px;
  max-height: 240px; overflow-y: auto; padding-right: 4px;
}
.geste-gallery-thumb {
  aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: grab;
  border: 2px solid transparent; transition: border-color 0.15s, opacity 0.15s;
  position: relative;
}
.geste-gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.geste-gallery-thumb:hover { border-color: var(--accent); }
.geste-gallery-thumb.dragging { opacity: 0.4; }
.geste-gallery-thumb.assigned {
  opacity: 0.45;
}
.geste-gallery-thumb .geste-thumb-badge {
  position: absolute; top: 3px; left: 3px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 4px; line-height: 1.4;
}
@media (max-width: 700px) {
  .geste-cards { grid-template-columns: 1fr; }
  .geste-gallery { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* ─── LIGHTBOX PHOTO PREVIEW ─────────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; animation: lbFadeIn 0.15s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; color: #fff; font-size: 36px;
  cursor: pointer; opacity: 0.7; transition: opacity 0.15s;
  line-height: 1; z-index: 10;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-img {
  max-width: 90vw; max-height: 85vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5); cursor: default;
  object-fit: contain; animation: lbZoomIn 0.2s ease;
}
@keyframes lbZoomIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox-caption {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500;
  background: rgba(0,0,0,0.4); padding: 4px 14px; border-radius: 20px;
  pointer-events: none;
}

/* ─── TAB BAR (navigation multi-clients) ─────────────────────── */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px 0;
  flex-shrink: 0;
  min-height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
}
.tab-bar::-webkit-scrollbar { height: 3px; }
.tab-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tab-list {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--fg-dim);
  white-space: nowrap;
  max-width: 180px;
  position: relative;
  top: 1px;
}
.tab-item:hover {
  background: var(--bg);
  color: var(--fg);
}
.tab-item.active {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--border);
  font-weight: 600;
  z-index: 1;
}
.tab-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-item-close {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-dim);
  padding: 0;
}
.tab-item:hover .tab-item-close,
.tab-item.active .tab-item-close { visibility: visible; }
.tab-item-close:hover { background: rgba(0,0,0,0.08); color: var(--fg); }
.tab-add-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 2px;
}
.tab-add-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* Ancien menu "+" remplace par .client-picker-popup (voir plus haut) */

/* Spinner generique petit */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ─── LANDING PIPELINE ─────────────────────────────────────────── */
#landingPipeline { position:fixed; inset:0; background:#f5f4f8; z-index:100; overflow-y:auto; font-family:system-ui,-apple-system,sans-serif; display:none; }
.lp-header { display:flex; justify-content:space-between; align-items:center; padding:16px 32px; background:#fff; border-bottom:1px solid #e5e7eb; }
.lp-header-left { display:flex; align-items:center; gap:12px; }
.lp-logo { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--accent,#7c3aed); color:#fff; border-radius:10px; font-weight:700; font-size:18px; text-decoration:none; }
.lp-title { font-size:20px; font-weight:600; color:#1e1b4b; }
.lp-header-right { display:flex; align-items:center; gap:12px; }
.lp-btn-new { background:var(--accent,#7c3aed); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.lp-btn-new:hover { opacity:0.9; }
.lp-user { font-size:13px; color:#6b7280; }

/* Progress bar */
.lp-progress-wrap { position:relative; height:32px; background:#e5e7eb; margin:0; overflow:hidden; }
.lp-progress-bar { position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,#7c3aed,#a78bfa); transition:width 0.4s ease; }
.lp-progress-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:#374151; z-index:1; }

/* Stats */
.lp-stats { display:flex; gap:8px; padding:16px 32px 8px; flex-wrap:wrap; }
.lp-stat { background:#fff; border-radius:8px; padding:10px 16px; text-align:center; min-width:90px; border:1px solid #e5e7eb; }
.lp-stat-n { display:block; font-size:22px; font-weight:700; color:#1e1b4b; }
.lp-stat-l { display:block; font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:0.5px; }
.lp-stat-audited { border-left:3px solid #f59e0b; }
.lp-stat-closing { border-left:3px solid #3b82f6; }
.lp-stat-won { border-left:3px solid #22c55e; }
.lp-stat-followup { border-left:3px solid #a855f7; }
.lp-stat-scheduled { border-left:3px solid #06b6d4; }
.lp-stat-with { border-left:3px solid #22c55e; }
.lp-stat-without { border-left:3px solid #ef4444; }

/* Toolbar */
.lp-toolbar { display:flex; align-items:center; gap:12px; padding:12px 32px; flex-wrap:wrap; }
.lp-search { flex:1; min-width:200px; padding:8px 14px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; outline:none; }
.lp-search:focus { border-color:var(--accent,#7c3aed); box-shadow:0 0 0 2px rgba(124,58,237,0.15); }
.lp-pills { display:flex; gap:4px; }
.lp-pill { padding:6px 12px; border-radius:20px; border:1px solid #d1d5db; background:#fff; font-size:12px; cursor:pointer; font-weight:500; color:#374151; }
.lp-pill:hover { background:#f3f4f6; }
.lp-pill-active { background:#1e1b4b !important; color:#fff !important; border-color:#1e1b4b !important; }
.lp-pill-audited.lp-pill-active { background:#f59e0b !important; border-color:#f59e0b !important; }
.lp-pill-closing.lp-pill-active { background:#3b82f6 !important; border-color:#3b82f6 !important; }
.lp-pill-won.lp-pill-active { background:#22c55e !important; border-color:#22c55e !important; color:#fff !important; }
.lp-pill-followup.lp-pill-active { background:#a855f7 !important; border-color:#a855f7 !important; }
.lp-pill-scheduled.lp-pill-active { background:#06b6d4 !important; border-color:#06b6d4 !important; }
.lp-view-toggle { display:flex; border:1px solid #d1d5db; border-radius:8px; overflow:hidden; }
.lp-view-btn { padding:6px 14px; border:none; background:#fff; font-size:12px; cursor:pointer; font-weight:500; color:#374151; }
.lp-view-btn:first-child { border-right:1px solid #d1d5db; }
.lp-view-active { background:#1e1b4b !important; color:#fff !important; }

/* Table */
.lp-body { padding:0 32px 32px; }
.lp-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.lp-table th { padding:10px 14px; text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#6b7280; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.lp-table td { padding:10px 14px; font-size:13px; color:#1f2937; border-bottom:1px solid #f3f4f6; }
.lp-table tr:hover td { background:#f9fafb; }
.lp-table .lp-name { font-weight:600; }
.lp-stage-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.lp-stage-audited { background:#fef3c7; color:#92400e; }
.lp-stage-closing { background:#dbeafe; color:#1e40af; }
.lp-stage-won { background:#dcfce7; color:#166534; }
.lp-stage-followup { background:#f3e8ff; color:#6b21a8; }
.lp-stage-scheduled { background:#cffafe; color:#0e7490; }
.lp-audit-yes { color:#16a34a; font-weight:600; }
.lp-audit-no { color:#9ca3af; }
.lp-btn-open { padding:4px 12px; border-radius:6px; border:1px solid var(--accent,#7c3aed); background:#fff; color:var(--accent,#7c3aed); font-size:12px; font-weight:500; cursor:pointer; text-decoration:none; }
.lp-btn-open:hover { background:var(--accent,#7c3aed); color:#fff; }
.lp-btn-create { padding:4px 12px; border-radius:6px; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:12px; font-weight:500; cursor:pointer; }
.lp-btn-create:hover { background:#f3f4f6; }
.lp-empty { padding:40px; text-align:center; color:#9ca3af; font-size:14px; }
.lp-table th[data-sort]:hover { background:#eef2ff; }
.lp-sort-arrow { font-size:10px; color:#6b7280; margin-left:2px; }
.lp-gmv { text-align:right; font-variant-numeric:tabular-nums; color:#374151; }
.lp-attio-link { color:#1e1b4b; text-decoration:none; }
.lp-attio-link:hover { color:var(--accent,#7c3aed); text-decoration:underline; }
.lp-stat { cursor:pointer; transition:transform 0.1s; }
.lp-stat:hover { transform:translateY(-2px); box-shadow:0 2px 8px rgba(0,0,0,0.1); }

/* Lien Dashboard dans la sidebar audit */
.sb-dashboard-link { display:flex; align-items:center; gap:6px; padding:8px 12px; margin:4px 8px; border-radius:6px; font-size:12px; font-weight:500; color:var(--fg-dim,#6b7280); text-decoration:none; border:1px solid var(--border,#e5e7eb); transition:all 0.15s; }
.sb-dashboard-link:hover { background:var(--bg-hover,#f3f4f6); color:var(--accent,#7c3aed); border-color:var(--accent,#7c3aed); }
.lp-btn-terrain { padding:4px 10px; border-radius:6px; border:1px solid #06b6d4; background:#ecfeff; color:#0e7490; font-size:11px; font-weight:500; text-decoration:none; display:inline-block; }
.lp-btn-terrain:hover { background:#06b6d4; color:#fff; }
.lp-btn-refresh { padding:6px 12px; border-radius:8px; border:1px solid #d1d5db; background:#fff; font-size:12px; font-weight:500; color:#374151; cursor:pointer; }
.lp-btn-refresh:hover { background:#f3f4f6; }
.lp-btn-refresh:disabled { opacity:0.5; cursor:wait; }