/* ============ Base ============ */
:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --border: #dfe3eb;
  --text: #1f2430;
  --muted: #5b6472;            /* assombri pour le contraste AA sur fond clair */
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --data: #0ea5e9;
  --chatgpt: #8b5cf6;
  --image: #ec4899;
  /* Surfaces neutres (variabilisées pour le mode sombre) */
  --surface-1: #ffffff;        /* cartes, modales, menus, contrôles */
  --surface-2: #e8edf5;        /* boutons « ghost », pistes, fonds doux */
  --surface-3: #eef2f7;        /* en-têtes de tableau, cellules figées */
  --surface-alt: #f5f8fc;      /* cartes de colonnes, fonds très clairs */
  --hover: #dde4f0;            /* survol des surfaces neutres */
  --stripe: #f7f9fc;           /* alternance de lignes du tableau */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 30, 60, 0.08);
  --nav-h: 60px; /* hauteur de la barre de navigation unifiée */
}

/* ============ Thème sombre ============ */
/* Activé par data-theme="dark" sur <html> (bascule manuelle, défaut = préférence
   système). On remappe les variables : tout ce qui passe par var() suit ; les tons
   de statut (succès/erreur/info) restent clairs et lisibles. */
html[data-theme="dark"] {
  --bg: #0f172a;
  --panel: #161f2e;
  --border: #2c3a4f;
  --text: #e6eaf1;
  --muted: #94a3b8;
  --surface-1: #161f2e;
  --surface-2: #233146;
  --surface-3: #1b2638;
  --surface-alt: #1a2333;
  --hover: #2c3a4f;
  --stripe: #1a2333;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* Les images rastérisées ne doivent pas être éclaircies ; on garde leur rendu. */
html[data-theme="dark"] .cell-img, html[data-theme="dark"] .modal-img { background: #0b1220; }
/* Overrides thème sombre : éléments sans variable CSS */
html[data-theme="dark"] .projects-table tr.active td { background: rgba(96, 165, 250, 0.12); }
html[data-theme="dark"] .fill-handle { border-color: var(--bg); }
html[data-theme="dark"] .cell-ctx-menu,
html[data-theme="dark"] .ctx-sub { box-shadow: 0 6px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .viewer-wrap { background: repeating-conic-gradient(#2d3748 0% 25%, #1e2d40 0% 50%) 50% / 24px 24px; }
html[data-theme="dark"] .sheet-menu { box-shadow: 0 8px 28px rgba(0,0,0,.55); }
html[data-theme="dark"] .modal-box, html[data-theme="dark"] .modal2-box { box-shadow: 0 20px 60px rgba(0,0,0,.6); }
html[data-theme="dark"] .var-chip { color: #a5b4fc; }
html[data-theme="dark"] #dataTable thead th.rownum-head.all-selected { background: #1e3a5f; color: #60a5fa; }

/* Bouton de bascule de thème (topbar) */
.theme-toggle {
  background: rgba(255,255,255,.12); color: #fff; border: none;
  width: 34px; height: 34px; border-radius: 8px; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: rgba(255,255,255,.2); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

h1, h2, h3 { margin: 0; }
textarea, input, select, button { font-family: inherit; font-size: 13px; }
textarea { resize: vertical; }

/* ============ Barre de navigation unifiée ============ */
.topbar {
  display: flex; align-items: center;
  height: var(--nav-h); padding: 0 20px; gap: 24px;
  background: #0b1220; color: #fff;
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid #1e293b;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand .logo { font-size: 22px; color: #60a5fa; }
.app-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 1px; }
.topbar .sub { margin: 0; font-size: 11px; color: #64748b; }

/* Onglets de navigation (intégrés dans la topbar) */
.mainnav {
  display: flex; align-items: stretch; align-self: stretch;
  background: transparent; border: none; padding: 0; gap: 0;
}
.nav-tab {
  display: flex; align-items: center;
  padding: 0 15px;
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500;
  background: none; border: none; border-radius: 0;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: color .15s;
}
.nav-tab::after {
  content: ''; position: absolute; bottom: 0; left: 8px; right: 8px;
  height: 2px; background: transparent; border-radius: 2px 2px 0 0;
  transition: background .15s;
}
.nav-tab:hover { color: rgba(255,255,255,.85); }
.nav-tab.active { color: #fff; font-weight: 600; }
.nav-tab.active::after { background: var(--blue); }
.nav-tab.locked { color: rgba(255,255,255,.2); cursor: not-allowed; }
.nav-tab.locked:hover { color: rgba(255,255,255,.2); }

/* Côté droit de la nav (sélecteur de projet + actions) */
.nav-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* Bouton icône générique */
.nav-icon-btn {
  background: none; border: none; color: #64748b;
  width: 34px; height: 34px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.nav-icon-btn:hover, .nav-icon-btn.active { background: rgba(255,255,255,.08); color: #e2e8f0; }


/* ── Sélecteur de projet dans la nav ── */
.nav-proj-picker {
  position: relative;
}
.nav-proj-btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 13px; font-weight: 600;
  padding: 6px 10px 6px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  max-width: 220px;
  white-space: nowrap;
}
.nav-proj-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.nav-proj-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
}
#navProjBtnName {
  overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.nav-proj-chevron { font-size: 11px; color: #64748b; flex-shrink: 0; }

.nav-proj-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 400;
  overflow: hidden;
  padding: 4px 0;
}
.nav-proj-dropdown[hidden] { display: none; }

.proj-dd-head {
  padding: 8px 14px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #475569;
}
.proj-dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  cursor: pointer; color: #cbd5e1; font-size: 13px;
  transition: background .1s;
}
.proj-dd-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.proj-dd-item.active-proj { color: #93c5fd; font-weight: 700; }
.proj-dd-item .dd-pin { font-size: 12px; color: #f59e0b; }
.proj-dd-item .dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-dd-item .dd-rows { font-size: 11px; color: #475569; white-space: nowrap; }
.proj-dd-sep { margin: 4px 0; border: none; border-top: 1px solid #2d3f55; }
.proj-dd-action {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  cursor: pointer; color: #94a3b8; font-size: 13px;
  transition: background .1s;
}
.proj-dd-action:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }
.proj-dd-action .dd-action-icon { font-size: 14px; }

/* Vues : on masque celle qui n'est pas active. */
.view[hidden] { display: none !important; }
.view-page { max-width: 1200px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
/* Les actions d'exécution ne concernent que les vues liées au projet actif. */
body.view-projets .topbar-actions,
body.view-logs .topbar-actions { display: none; }

/* ============ Vue Projets ============ */
.newproj { padding: 16px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.newproj-input { border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 14px; }
.newproj-import { display: inline-flex; align-items: center; cursor: pointer; }
.newproj-hint { grid-column: 1 / -1; margin: 0; }

.projects-grid { padding: 8px 16px 16px; overflow-x: auto; }
.projects-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.projects-empty .pe-icon { font-size: 40px; }

/* Tableau « Projets locaux » */
.projects-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.projects-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.projects-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.projects-table tr:hover td { background: var(--hover); }
.projects-table tr.active td { background: rgba(37, 99, 235, 0.07); }
.projects-table td.num { text-align: center; }
.projects-table td.pc-date { color: var(--muted); white-space: nowrap; }
/* Glisser-déposer des lignes (réordonner les projets) */
.proj-handle { margin-right: 6px; font-size: 14px; vertical-align: middle; }
.projects-table tr.dragging { opacity: .45; }
.projects-table tr.drag-over td { box-shadow: inset 0 2px 0 0 var(--primary, #2563eb); }
/* Statut éditable façon badge coloré */
.proj-status {
  border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; appearance: none;
  background-position: right 8px center;
}
.proj-status.st-draft      { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.proj-status.st-production { background: rgba(37, 99, 235, 0.1); color: var(--blue); border-color: rgba(37, 99, 235, 0.3); }
.proj-status.st-done       { background: rgba(22, 163, 74, 0.1); color: var(--green); border-color: rgba(22, 163, 74, 0.3); }
.proj-status.st-archived   { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.proj-status.st-error      { background: rgba(220, 38, 38, 0.1); color: var(--red); border-color: rgba(220, 38, 38, 0.3); }
.proj-status.st-review     { background: rgba(217, 119, 6, 0.1); color: var(--amber); border-color: rgba(217, 119, 6, 0.3); }

/* Barre de statistiques projets */
.projects-stats { display: flex; gap: 8px; padding: 0 0 12px; flex-wrap: wrap; }
.stats-chip { background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.06); white-space: nowrap; }
.stats-chip.stat-active { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.25); color: var(--blue); }
.stats-chip.stat-pin    { background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3); color: var(--amber); }

/* Bouton filtre Favoris */
.proj-filter-fav { color: var(--amber); }
.proj-filter-fav.active { background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3); color: var(--amber); font-weight: 700; }

/* Colonne checkbox sélection groupée */
.td-chk, .th-chk { width: 36px; padding: 8px 4px 8px 12px !important; text-align: center; }

/* Bouton épingler (★) */
.pin-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: #d1d5db; padding: 0 2px; line-height: 1; transition: color .15s; }
.pin-btn:hover, .pin-btn.pinned { color: #f59e0b; }

/* Barre d'actions groupées */
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bulk-count { font-size: 13px; font-weight: 600; color: var(--blue); flex: 1 1 auto; }

.pc-label { display: flex; align-items: center; gap: 8px; }
.pc-name { font-weight: 700; word-break: break-word; }
.pc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--green); color: #fff; padding: 2px 7px; border-radius: 10px; }
.pc-actions { white-space: nowrap; }
.pc-actions button { margin-right: 4px; }

/* Labels « importer » stylés comme des boutons (input fichier masqué) */
label.as-import { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; font-weight: 600; }

/* ============ Vue Suivi (dashboard) ============ */
.suivi-live { padding: 14px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; padding: 14px; }
.cumul { padding-top: 0; }
.suivi-charts { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.suivi-filter { display: flex; align-items: center; gap: 8px; }
.suivi-filter label { font-size: 12px; font-weight: 600; color: var(--muted); }
.suivi-filter .suivi-sheet-sel { flex: 0 1 260px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); font: inherit; }
.suivi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface-alt); border-left: 4px solid var(--border); }
.kpi-card .kpi-value { font-size: 24px; font-weight: 800; }
.kpi-card .kpi-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-card.tone-blue { border-left-color: var(--blue); }
.kpi-card.tone-green { border-left-color: var(--green); }
.kpi-card.tone-red { border-left-color: var(--red); }
.kpi-card.tone-red .kpi-value { color: var(--red); }

.chart-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface-1); }
.chart-card h4 { margin: 0 0 10px; font-size: 13px; }
.stacked { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.stacked .seg { min-width: 2px; }
.stacked .seg.ok { background: var(--green); }
.stacked .seg.pending { background: var(--amber); }
.stacked .seg.err { background: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.legend .lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .lg.ok i { background: var(--green); }
.legend .lg.pending i { background: var(--amber); }
.legend .lg.err i { background: var(--red); }

.barrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.barrow-label { flex: 0 1 auto; max-width: 150px; min-width: 48px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow-track { flex: 1 1 auto; min-width: 40px; height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.barrow-fill { height: 100%; background: var(--blue); border-radius: 7px; transition: width .25s; }
.barrow-fill.type-chatgpt { background: var(--chatgpt); }
.barrow-fill.type-image { background: var(--image); }
.barrow-val { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; text-align: right; }

/* ============ Layout ============ */
.layout { display: flex; align-items: flex-start; gap: 18px; padding: 18px; }
.sidebar { width: 300px; flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h) + 26px); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ============ Panels ============ */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px; }
.panel textarea, .panel input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.key-row { display: flex; gap: 6px; align-items: stretch; }
.key-row input { flex: 1; }
.key-row .key-eye { border: 1px solid var(--border); border-radius: 7px; padding: 0 12px; background: var(--surface-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.key-row .key-eye:hover { background: var(--hover); }

/* ============ Vue Réglages ============ */

/* La vue Réglages n'utilise pas .view-page — layout custom */
.view-config { display: block; }

/* ── Barre sticky de sauvegarde ── */
.cfg-sticky-bar {
  position: sticky;
  top: var(--nav-h);   /* juste sous la topbar sticky */
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cfg-sticky-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1200px; margin: 0 auto;
  padding: 10px 18px;
}
.cfg-bar-info { display: flex; align-items: baseline; gap: 14px; }
.cfg-bar-title { font-size: 16px; font-weight: 700; color: var(--text); }
.cfg-bar-proj  { font-size: 12px; color: var(--muted); }
.cfg-bar-actions { display: flex; align-items: center; gap: 10px; }
.cfg-saved { color: var(--green); font-weight: 600; font-size: 13px; }

/* ── Sous-onglets Réglages ── */
.cfg-subnav {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  padding: 0 18px;
  gap: 2px;
}
.cfg-tab-btn {
  padding: 11px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; border-radius: 0;
  transition: color .15s, border-color .15s;
}
.cfg-tab-btn:hover:not(.active) { color: var(--text); }
.cfg-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.cfg-tab-pane { display: none; padding: 18px; }
.cfg-tab-pane.active { display: block; }

/* Layouts dans les panneaux */
.cfg-tab-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 1200px; margin: 0 auto;
}
.cfg-tab-col { display: flex; flex-direction: column; gap: 18px; }
.cfg-tab-1col {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.cfg-rules-hint { margin: 0 0 12px; }

/* Onglet Règles IA : 2 cartes (ChatGPT / Image) empilées pleine largeur */
.cfg-rules-outer { display: flex; flex-direction: column; gap: 18px; }

/* Intérieur d'une carte : 2 champs côte à côte */
.cfg-rules-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.cfg-rules-field {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-rules-field + .cfg-rules-field { border-left: 1px solid var(--border); }
.cfg-rules-field .modal-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; }
.cfg-rules-field textarea {
  flex: 1;
  min-height: 160px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px;
  line-height: 1.5;
  resize: vertical;
}

/* ── Contenu des sections ── */
.config-section { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.config-section .modal-label { margin: 0; }
.config-section textarea { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 9px; line-height: 1.5; resize: vertical; }
.config-section .key-row .modal-input { flex: 1; min-width: 0; }
.config-section .key-row .key-eye { flex: 0 0 auto; }
.config-grid { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: end; }
.config-grid .field { display: flex; flex-direction: column; gap: 5px; }
.config-grid .field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.config-grid .field select, .config-grid .field input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 8px; }
.cfg-check { grid-column: 1 / -1; }


/* ============ Vue Exports ============ */
.exports-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.exports-left, .exports-right { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .exports-layout { grid-template-columns: 1fr; } }
.export-intro { padding: 0 16px 14px; margin: 0; }
.export-cols { padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.export-col-chk {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 13px;
  background: var(--surface-alt); border-left: 3px solid var(--border);
}
.export-col-chk.type-data { border-left-color: var(--data); }
.export-col-chk.type-chatgpt { border-left-color: var(--chatgpt); }
.export-col-chk.type-image { border-left-color: var(--image); }
.export-col-chk .ecc-name { font-weight: 600; }
.export-col-chk .ecc-type { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.export-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }

/* Section Images ZIP */
.zip-section { gap: 10px; }
.zip-scope-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.zip-img-cols { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; }
.zip-sheet-label { width: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 4px 0 0; }
.zip-col-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; background: var(--surface-1); border-left: 3px solid var(--image); }
/* JSON : la phrase reste à droite du bouton (elle s'enroule au lieu de passer dessous) */
.json-actions { flex-wrap: nowrap; }
.json-actions button { flex: 0 0 auto; }
.json-opt { flex: 1 1 auto; min-width: 0; align-items: flex-start; }
.json-opt span { white-space: normal; line-height: 1.3; }

.block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.block-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.block-head h2 { font-size: 15px; }
.block-actions { display: flex; gap: 6px; }

/* ============ Buttons ============ */
button, .as-button {
  cursor: pointer; border: 1px solid transparent; border-radius: 7px;
  padding: 8px 14px; font-weight: 600; transition: background .15s, opacity .15s;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--blue); color: #fff; }
.primary:hover:not(:disabled) { background: var(--blue-dark); }
.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.ghost:hover:not(:disabled) { background: var(--hover); }
.danger { background: var(--red); color: #fff; }
.danger:hover:not(:disabled) { filter: brightness(.92); }
.small { padding: 5px 10px; font-size: 12px; }
.full { width: 100%; margin-top: 8px; }
.icon { background: transparent; border: none; padding: 4px 7px; font-size: 14px; color: var(--muted); }
.icon:hover { color: var(--text); }
.icon.danger { color: var(--red); }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.as-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ============ Columns config ============ */
/* Largeur de colonne commune aux cartes (étapes) et au tableau (données),
   pour les aligner verticalement. */
.main { --col-w: 260px; --row-h: 40px; --head-h: 48px; }
.columns-list { display: flex; gap: 0; padding: 0; overflow-x: auto; align-items: stretch; }
.col-card {
  flex: 0 0 var(--col-w); width: var(--col-w);
  border: 1px solid var(--border); border-left: none; border-radius: 0;
  background: var(--surface-alt); border-top: 3px solid var(--border);
}
.col-card:first-child { border-left: 1px solid var(--border); }
.col-card.type-data { border-top-color: var(--data); }
.col-card.type-chatgpt { border-top-color: var(--chatgpt); }
.col-card.type-image { border-top-color: var(--image); }
.col-head { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); flex-wrap: nowrap; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; user-select: none; }
.drag-handle:hover { background: var(--surface-2); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.col-card.dragging { opacity: .5; }
.col-card.drag-over { outline: 2px dashed var(--blue); outline-offset: 2px; background: rgba(37, 99, 235, 0.07); }
.col-index { font-size: 11px; color: var(--muted); font-weight: 700; }
.col-name { flex: 1; min-width: 80px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font-weight: 600; }
.col-type { border: 1px solid var(--border); border-radius: 6px; padding: 5px; flex: 0 0 auto; }

/* Bascule des options de configuration (remplace la flèche de pli) */
.col-config-toggle {
  width: 100%; text-align: left; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px; font-weight: 600; font-size: 12px; color: var(--text);
}
.col-config-toggle:hover { background: var(--hover); }
.col-config-toggle.open { background: rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.3); color: var(--blue); }
.col-details { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }

/* Popin de configuration de colonne : champs espacés + 2 colonnes */
.col-config-form { display: flex; flex-direction: column; gap: 14px; }
.col-config-form .col-status { margin: 0; }
.cfg2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.cfg2-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cfg-type-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-type-row .modal-label { margin: 0; }
.cfg-type-row .col-type { flex: 1 1 auto; }
.col-preview-row { margin-top: 2px; }
.modal-dep { margin-right: auto; align-self: center; color: var(--blue); font-weight: 600; font-size: 12px; }

/* Sélection des sources : menu déroulant (cases + titres) */
.src-dropdown { border: 1px solid var(--border); border-radius: 7px; background: var(--surface-1); }
.src-summary { padding: 9px 11px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; }
.src-summary::-webkit-details-marker { display: none; }
.src-summary::after { content: "▾"; float: right; color: var(--muted); font-weight: 400; }
.src-dropdown[open] .src-summary::after { content: "▴"; }
.src-summary.placeholder { color: var(--muted); font-weight: 400; }
.src-menu { border-top: 1px solid var(--border); max-height: 240px; overflow-y: auto; overflow-x: hidden; padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px; }
.src-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.src-opt:hover { background: var(--surface-2); }
/* On annule le width:100% hérité de .field input pour les cases du menu. */
.src-menu .src-opt input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
.src-opt span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Popin centrée : aperçu du prompt final (au-dessus de la modale) */
.modal2 { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal2-box { background: var(--surface-1); border-radius: 12px; width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal2-head h3 { font-size: 14px; }
.modal2-body { margin: 0; padding: 16px 18px; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; }
.modal2-body.is-error { color: var(--red); font-family: inherit; font-size: 14px; }
.modal2-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); }

/* Rangée d'actions de colonne : boutons explicites, largeur naturelle */
.col-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; margin-top: 4px; border-top: 1px solid var(--border); }
.col-act { flex: 0 0 auto; }
/* « Lancer » dans l'en-tête, aligné à droite (vert) */
.col-head-launch { margin-left: auto; background: rgba(22, 163, 74, 0.1); color: var(--green); border: 1px solid rgba(22, 163, 74, 0.3); }
.col-head-launch:hover:not(:disabled) { background: rgba(22, 163, 74, 0.18); }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.col-fill { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px; min-height: 70px; font-size: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.field textarea, .field input, .field select { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px; }
.field textarea { min-height: 56px; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline label { white-space: nowrap; }
.field.inline input, .field.inline select { width: auto; flex: 1; }
.opts-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface-3); border-radius: 6px; padding: 8px; }
.opts-row .field.inline { margin: 0; }
.checkbox { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sources { display: flex; flex-wrap: wrap; gap: 6px; }
.src-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.col-status { font-size: 12px; font-weight: 600; padding: 5px 8px; border-radius: 6px; }
.col-status.ok { background: rgba(22, 163, 74, 0.1); color: var(--green); }
.col-status.ko { background: rgba(220, 38, 38, 0.1); color: var(--red); }

/* ============ Data table ============ */
/* Affiche ~6 lignes par défaut ; le reste est défilable (masqué). */
.table-scroll { overflow: auto; flex: 1; min-height: 0; max-height: calc(var(--head-h) + var(--row-h) * 6 + 16px); position: relative; }
#dataBlock.fullscreen .table-scroll { max-height: none; }
/* Barres de défilement bien visibles pour atteindre facilement la dernière colonne */
.table-scroll::-webkit-scrollbar { height: 14px; width: 12px; }
.table-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 7px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 7px; border: 3px solid var(--surface-2); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text); }
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface-2); }
/* table-layout fixe + largeur de colonne = --col-w → colonnes alignées avec les cartes.
   border-collapse: separate → en-tête collant opaque sans bavure de texte. */
#dataTable { border-collapse: separate; border-spacing: 0; width: max-content; table-layout: fixed; }
#dataTable th, #dataTable td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: middle; width: var(--col-w); }
#dataTable th:first-child, #dataTable td:first-child { border-left: 1px solid var(--border); }
/* Contexte d'empilement explicite sur thead : garantit que les en-têtes sticky
   restent toujours au-dessus des tbody td positionnés ET au-dessus de l'overlay de sélection (z-index 6). */
#dataTable thead { position: relative; z-index: 7; }
#dataTable thead th {
  position: sticky; top: 0; background: var(--surface-3); z-index: 5;
  padding: 8px; text-align: left; border-top: 1px solid var(--border);
  box-shadow: 0 1px 0 0 var(--border); height: var(--head-h);
}
#dataTable tbody td { height: var(--row-h); }
/* Perf : sur les grandes tables (classe posée par renderTable au-delà d'un seuil),
   on saute le rendu des lignes hors écran. `contain-intrinsic-size` réserve leur
   hauteur pour garder la barre de défilement stable. Ignoré si non supporté →
   aucune régression ; non activé sur les petites tables → zéro risque au quotidien. */
#dataTable.rows-virt tbody tr { content-visibility: auto; contain-intrinsic-size: auto var(--row-h); }
#dataTable thead th.type-data { border-top: 3px solid var(--data); }
#dataTable thead th.type-chatgpt { border-top: 3px solid var(--chatgpt); }
#dataTable thead th.type-image { border-top: 3px solid var(--image); }
.th-name { display: block; font-weight: 600; }
.th-type { display: block; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.cell { padding: 0; }
/* Colonne interne de numéros de ligne (non exportée), figée à gauche */
#dataTable th.rownum-cell, #dataTable td.rownum-cell {
  width: 48px !important; min-width: 48px !important; text-align: center;
  color: var(--muted); font-size: 12px; background: var(--surface-3);
  position: sticky; left: 0; z-index: 8; padding: 6px;
}
#dataTable thead th.rownum-head { z-index: 8; cursor: pointer; }
.rownum-head .rownum-hash { pointer-events: none; }
.rownum-head:hover { background: var(--hover); }
/* Numéros de ligne cliquables → sélection de toute la ligne */
#dataTable tbody td.rownum-cell { cursor: pointer; user-select: none; }
#dataTable tbody td.rownum-cell:hover { background: #e3edff; color: var(--primary, #2563eb); }
#dataTable tbody td.rownum-cell.row-sel { background: #d7e6ff; color: var(--primary, #2563eb); font-weight: 600; }
/* En-têtes de colonne → sélection de toute la colonne */
#dataTable thead th[data-col-pos]:hover { background: #e3edff; }
#dataTable thead th.col-sel { background: #d7e6ff; color: var(--primary, #2563eb); }
html[data-theme="dark"] #dataTable tbody td.rownum-cell:hover { background: #1e3a5f; color: #93c5fd; }
html[data-theme="dark"] #dataTable tbody td.rownum-cell.row-sel { background: #1e3a5f; color: #60a5fa; font-weight: 600; }
html[data-theme="dark"] #dataTable thead th[data-col-pos]:hover { background: #1e3a5f; }
html[data-theme="dark"] #dataTable thead th.col-sel { background: #1e3a5f; color: #60a5fa; }
/* Poignées de redimensionnement : largeur sur chaque en-tête (bord droit), hauteur sur chaque n° de ligne (bord bas). */
.grid-resize { position: absolute; z-index: 9; background: transparent; }
.grid-resize-col { top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; }
.grid-resize-row { left: 0; bottom: 0; width: 100%; height: 6px; cursor: row-resize; }
.grid-resize:hover { background: var(--primary, #2563eb); opacity: .5; }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; user-select: none; }
body.resizing-row, body.resizing-row * { cursor: row-resize !important; user-select: none; }

/* ============ Fill Handle (copier-coller vers le bas, comme Google Sheets) ============ */
#dataTable tbody td { position: relative; z-index: 0; }
.fill-handle {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border: 1.5px solid #fff;
  border-radius: 1px;
  cursor: crosshair;
  opacity: 0;
  z-index: 6;
  transition: opacity 0.12s;
}
td:hover > .fill-handle { opacity: 1; }
.fill-handle:hover { transform: scale(1.3); }
/* Overlay de prévisualisation du fill-handle : bordure pointillée style Google Sheets */
.fill-range-overlay {
  position: absolute;
  border: 2px dashed var(--blue);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 7;
}

/* ============ Sélection de cellules ============ */
/* Fond très léger (style Google Sheets) ; la bordure de la plage est portée par l'overlay externe */
#dataTable tbody td.cell-selected {
  background: rgba(26, 115, 232, 0.06) !important;
}
/* Bordure individuelle pour les cellules sélectionnées via Ctrl+Click */
#dataTable tbody td.cell-ctrl-border {
  box-shadow: inset 0 0 0 2px var(--blue);
}
/* Overlay extérieur : bordure pleine autour de la plage sélectionnée (pas sur chaque cellule) */
.selection-border-overlay {
  position: absolute;
  border: 2px solid var(--blue);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 6;
}

/* ============ Menu contextuel (clic droit) ============ */
.cell-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(20,30,60,.22);
  padding: 4px 0;
  min-width: 240px;
  font-size: 13px;
  user-select: none;
}
.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text);
  border: none;
  background: none;
  width: calc(100% - 8px);
  margin: 0 4px;
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 5px;
}
.ctx-item:hover:not([disabled]) { background: var(--hover); color: var(--blue); }
.ctx-item[disabled] { color: var(--muted); cursor: default; }
.ctx-sep { border-top: 1px solid var(--border); margin: 4px 0; }
.ctx-kbd { color: var(--muted); font-size: 11px; }
.ctx-arr { color: var(--muted); font-size: 10px; }
.ctx-has-sub { position: relative; cursor: default; }
.ctx-sub {
  display: none;
  position: absolute;
  left: calc(100% + 2px);
  top: -4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(20,30,60,.22);
  padding: 4px 0;
  min-width: 220px;
  z-index: 10000;
}
.ctx-has-sub:hover .ctx-sub { display: block; }
/* Empêche la sélection de texte native du navigateur pendant le glisser de cellules */
#dataTable tbody.cell-selecting { user-select: none; -webkit-user-select: none; }
/* « # » cliqué : tout le tableau sélectionné */
#dataTable.all-selected { outline: 2px solid var(--primary, #2563eb); outline-offset: -2px; }
#dataTable.all-selected td.cell { background: rgba(37, 99, 235, .07); }
#dataTable thead th.rownum-head.all-selected { background: #d7e6ff; color: var(--primary, #2563eb); }
.col-rownum-spacer { flex: 0 0 48px; width: 48px; position: sticky; left: 0; z-index: 2; background: var(--bg); border-right: 1px solid var(--border); }
.cell-result {
  padding: 8px 10px; font-size: 12px; word-break: break-word; overflow-wrap: anywhere;
  max-height: var(--row-h); overflow: hidden;
}
/* Alternance de teinte des lignes (lisibilité horizontale). La sélection
   (cell-selected, !important) et les modes vider/supprimer restent prioritaires. */
#dataTable tbody tr:nth-child(even) td.cell { background: var(--stripe); }
/* Cellule entièrement cliquable (même vide) */
#dataTable td.cell-clickable { cursor: pointer; }
#dataTable td.cell-clickable:hover { background: var(--hover); }
/* Éditeur inline (Google Sheets style) */
/* Le contour bleu est fourni par l'overlay de sélection (z-index 6, au-dessus des cellules).
   Le textarea n'a aucune bordure propre pour éviter le double trait. */
#dataTable td.cell-editing {
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
}
.inline-editor {
  display: block; position: absolute; top: 0; left: 0; z-index: 50;
  width: 100%; box-sizing: border-box;
  padding: 4px 8px; margin: 0;
  border: none; outline: none;
  background: var(--surface-1); color: var(--text);
  font-family: inherit; font-size: 12px; line-height: 1.5;
  resize: none; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.cell-result.empty { min-height: 18px; color: var(--muted); }
.cell-result.pending { color: var(--amber); font-style: italic; }
.cell-result.error { color: var(--red); }
.cell-img { max-width: 160px; max-height: 110px; display: block; margin: 5px auto; border-radius: 4px; cursor: pointer; }

/* Colonne d'actions de ligne */
#dataTable td.row-actions, #dataTable th.row-actions {
  width: 44px; min-width: 44px !important; text-align: center; padding: 0; background: var(--surface-1);
}
#dataTable thead th.row-actions { background: var(--surface-3); }
.row-del { background: transparent; border: none; color: var(--muted); font-size: 13px; padding: 6px 8px; border-radius: 6px; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
#dataTable tbody tr:hover .row-del { opacity: 1; }
.row-del:hover { background: var(--red); color: #fff; }

#dataTable td.cell { position: relative; }

.logs th, .logs td { border: 1px solid var(--border); padding: 6px 9px; font-size: 12px; text-align: left; }
.logs thead th { background: var(--surface-3); }

/* ============ Progress / sidebar ============ */
.bar-bg { background: var(--surface-2); border-radius: 6px; height: 12px; overflow: hidden; margin: 6px 0 8px; }
.bar-fill { background: var(--blue); height: 100%; width: 0; transition: width .4s ease; }
.kv { display: flex; justify-content: space-between; margin: 3px 0; font-size: 13px; }
.kv span:last-child { font-weight: 700; }
.state { font-weight: 700; font-size: 13px; }
.state.running { color: var(--green); }
.state.done { color: var(--blue); }
.state.stopped { color: var(--red); }
.state.idle { color: var(--muted); }

/* ============ Misc ============ */
.muted { color: var(--muted); font-weight: 400; font-size: 12px; }
.sel-info { font-size: 12px; font-weight: 600; color: var(--blue); margin-left: 10px; }
.sel-info:empty { display: none; }
.hint { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.hint.warn { color: var(--amber); }
.hint.ok-text { color: var(--green); font-weight: 600; }

/* ============ Topbar : divers ============ */
.icon-btn { background: rgba(255,255,255,.12); color: #fff; padding: 7px 11px; font-size: 15px; }
.icon-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.topbar .sep { width: 1px; height: 24px; background: rgba(255,255,255,.2); margin: 0 2px; }
.chk-inline { color: #cbd5e1; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ============ Barre de traitement (vue Données) ============ */
/* Onglets de feuilles (jeux de données), style Excel — collants sous le menu */
.sheet-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; position: sticky; top: var(--nav-h); z-index: 45; background: var(--bg); padding-top: 8px; }
.sheet-tabs-label { align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-right: 8px; }
.sheet-tab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-bottom: none; border-radius: 9px 9px 0 0; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sheet-tab:hover { background: var(--hover); color: var(--text); }
.sheet-tab.active { background: var(--panel); color: var(--text); box-shadow: inset 0 -3px 0 var(--blue); }
.sheet-tab-name { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.sheet-tab-menu { background: transparent; border: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.sheet-tab-menu:hover { background: rgba(0,0,0,.08); color: var(--text); }
.sheet-tab-edit { border: 1px solid var(--blue); border-radius: 5px; padding: 2px 6px; font-size: 13px; font-weight: 600; width: 130px; }
.sheet-tab-add { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 16px; line-height: 1; color: var(--muted); }
.sheet-tab-add:hover { background: var(--hover); color: var(--text); }

/* Menu contextuel d'une feuille */
.sheet-menu { position: fixed; z-index: 200; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px rgba(15,23,42,.2); padding: 5px; min-width: 180px; display: flex; flex-direction: column; }
.sheet-menu-item { background: transparent; border: none; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); }
.sheet-menu-item:hover:not(:disabled) { background: var(--surface-2); }
.sheet-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.sheet-menu-item.danger { color: var(--red); }
.sheet-menu-item.danger:hover:not(:disabled) { background: var(--red); color: #fff; }
.sheet-menu-sep { margin: 4px 0; border: none; border-top: 1px solid var(--border); }
.proj-more-btn { font-size: 16px; letter-spacing: 1px; padding: 4px 8px; }
.export-sheet-pick { display: inline-flex; align-items: center; gap: 6px; }
.export-scope { display: flex; flex-direction: column; gap: 10px; }
.scope-opt { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.scope-opt input { flex: 0 0 auto; margin: 2px 0 0; }

/* L'ombre en bas (couleur du fond) comble proprement l'écart vers « Données & résultats »
   et masque les colonnes qui défilent derrière. */
.run-block { position: sticky; top: calc(var(--nav-h) + 40px); z-index: 40; box-shadow: 0 24px 0 0 var(--bg); }

/* Repli animé de la section « Colonnes » lors du défilement dans le tableau */
/* Le wrap reste toujours visible ; seul le corps de cartes s'anime. */
.cols-body {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 0.25s ease-out;
}
.columns-section-wrap.columns-hidden .cols-body {
  max-height: 0;
}
/* Supprimer le séparateur interne quand le corps est replié */
.columns-section-wrap.columns-hidden .block-head {
  border-bottom: none;
}

/* Barre d'en-tête des colonnes (toujours visible) */
.cols-head-bar { gap: 10px; }

/* Bouton toggle Masquer/Afficher */
.cols-toggle-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; color: var(--muted); font-size: 11px;
  transition: background 0.15s;
  white-space: nowrap;
}
.cols-toggle-btn:hover { background: var(--surface-2); }
.cols-toggle-chevron { display: inline-block; transition: transform 0.28s ease; font-size: 10px; }
.columns-section-wrap.columns-hidden .cols-toggle-chevron { transform: rotate(-180deg); }

/* Badge nombre de colonnes */
.cols-count-badge {
  background: var(--blue); color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 600;
  padding: 1px 7px; margin-left: 2px; vertical-align: middle;
}

/* Quand les colonnes sont masquées automatiquement (défilement du tableau) :
   1. Supprimer l'ombre du run-block qui couvrait l'en-tête du bloc Données
   2. Repositionner #dataBlock juste sous le run-block
   3. Laisser le tableau remplir l'espace disponible */
.main.cols-hidden .run-block {
  box-shadow: none;
}
.main.cols-hidden #dataBlock {
  top: var(--run-block-bottom, 200px);
  max-height: calc(100vh - var(--run-block-bottom, 200px) - 18px);
}
.main.cols-hidden .table-scroll {
  max-height: none;
}
.run-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.run-left, .run-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-bar .chk-inline { color: var(--text); font-size: 13px; }
.run-bar .icon-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 7px 11px; font-size: 15px; border-radius: 7px; }
.run-bar .icon-btn:hover:not(:disabled) { background: var(--hover); }
.run-status { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 5px 10px; border-radius: 14px; }
.run-status.running { background: rgba(217, 119, 6, 0.1); color: var(--amber); border-color: rgba(217, 119, 6, 0.3); }
.run-status.done { background: rgba(22, 163, 74, 0.1); color: var(--green); border-color: rgba(22, 163, 74, 0.3); }
.run-status.stopped { background: rgba(220, 38, 38, 0.1); color: var(--red); border-color: rgba(220, 38, 38, 0.3); }

/* ============ Colonne : nom, description, dépendances, variables ============ */
.col-name-row { padding: 8px 10px 0; }
.col-name { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-weight: 600; font-size: 14px; }
/* Hauteur fixe pour aligner la rangée d'actions entre toutes les cartes */
.col-desc { margin: 6px 10px 0; font-size: 11px; color: var(--muted); line-height: 1.35; min-height: 46px; }
.col-dep { margin: 4px 0 0; font-size: 11px; color: var(--blue); font-weight: 600; }
.col-dep.collapsed-dep { padding: 0 10px 10px; }
.var-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.var-chip { background: rgba(99, 102, 241, 0.1); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.var-chip:hover { background: rgba(99, 102, 241, 0.18); }

/* ============ Badge qualité ============ */
.qbadge { display: inline-block; margin: 4px 7px 7px; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.qbadge.good { background: rgba(22, 163, 74, 0.1); color: var(--green); }
.qbadge.warn { background: rgba(217, 119, 6, 0.1); color: var(--amber); }
.qbadge.bad { background: rgba(220, 38, 38, 0.1); color: var(--red); }

/* ============ Cellules : coût, image dl ============ */
.row-cost { min-width: 70px !important; text-align: right; font-size: 12px; color: var(--muted); padding: 6px 8px; }
.img-dl { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.img-dl:hover { background: var(--hover); }

/* ============ Barre d'outils tableau ============ */
.mini-select { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font-size: 12px; }
.ghost.active { background: var(--blue); color: #fff; }

/* ── Barre de défilement horizontale partagée (entre colonnes et tableau) ── */
.shared-hscroll {
  overflow-x: scroll; overflow-y: hidden;
  height: 16px; background: var(--surface-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: sticky; left: 0; z-index: 28;
  flex-shrink: 0;
}
.shared-hscroll::-webkit-scrollbar { height: 8px; }
.shared-hscroll::-webkit-scrollbar-track { background: var(--surface-2); }
.shared-hscroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }
.shared-hscroll::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.shared-hscroll-inner { height: 1px; min-width: 100%; }

/* Données & résultats : collant sous la barre, masque les colonnes derrière.
   Hauteur = écran restant ; le tableau (flex) remplit → pas d'espace blanc. */
#dataBlock { position: sticky; top: calc(var(--nav-h) + 168px); z-index: 30; height: auto; max-height: calc(100vh - var(--nav-h) - 180px); background: var(--panel); display: flex; flex-direction: column; }

/* ============ Plein écran ============ */
/* !important nécessaire pour écraser les règles .main.cols-hidden #dataBlock plus spécifiques */
#dataBlock.fullscreen {
  position: fixed !important; inset: 0 !important;
  z-index: 200 !important; /* au-dessus de la nav (z-index: 100) */
  margin: 0; border-radius: 0;
  display: flex; flex-direction: column;
  height: 100vh !important; max-height: none !important;
  top: 0 !important; /* écrase var(--run-block-bottom) */
}
/* Bloquer le scroll du document en mode plein écran pour éviter que la nav resurgisse */
body.in-fullscreen { overflow: hidden; }

/* Bouton "Quitter le plein écran" : visible seulement en mode plein écran */
#btnExitFullscreen { display: none; }
#dataBlock.fullscreen #btnExitFullscreen {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2d3a4a; color: #fff; border: none;
  padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#dataBlock.fullscreen #btnExitFullscreen:hover { background: #1a2533; }
/* Masquer "Plein écran" quand on est déjà en plein écran */
#dataBlock.fullscreen #btnFullscreen { display: none; }

/* ============ Checklist ============ */
.checklist { display: flex; flex-direction: column; gap: 6px; }
.check-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.check-item.ok { background: rgba(22, 163, 74, 0.1); color: var(--green); }
.check-item.ko { background: rgba(220, 38, 38, 0.1); color: var(--red); }
.check-icon { font-weight: 800; }

/* ============ Multiselect (sources) ============ */
.multiselect { position: relative; }
.ms-toggle {
  width: 100%; text-align: left; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 9px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-toggle.placeholder { color: var(--muted); }
.ms-toggle::after { content: "▾"; float: right; color: var(--muted); }
.ms-panel {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20,30,60,.15); padding: 6px; max-height: 220px; overflow: auto;
}
.ms-panel.open { display: block; }
.ms-option { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; padding: 6px 8px; border-radius: 5px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ms-option:hover { background: var(--surface-2); }
.ms-option input { flex: 0 0 auto; margin: 0; }
.ms-option span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ============ Menu Exporter / Importer ============ */
.export-menu { display: inline-block; }
.export-menu .ms-panel { left: 0; right: auto; min-width: 210px; padding: 5px; }
.menu-group { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 6px 9px 3px; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu-item, .menu-item.as-import {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: var(--surface-1); border: none; border-radius: 5px; padding: 7px 9px;
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }

/* ============ Cellules image / SVG ============ */
.img-cell-wrap { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.img-check { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.img-view-btn { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-1); color: var(--fg); cursor: pointer; white-space: nowrap; }
.img-view-btn:hover { background: var(--hover); }
.cell-svg { width: 110px; height: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell-svg svg { max-width: 100%; max-height: 100%; }
.cell-img { cursor: pointer; }
/* Cellule image vide : s'étire pour remplir la hauteur de la ligne (qui peut être grande
   si d'autres cellules de la même ligne ont des images). Évite le "petit div flottant
   dans une grande cellule vide" qui paraît cassé. */
#dataTable td.type-image { vertical-align: middle; }
#dataTable td.type-image .cell-result.empty {
  position: absolute;
  inset: 0;
  min-height: unset;
}

/* ============ Logs compacts (sidebar) ============ */
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-head h3 { margin: 0; }
/* ============ Vue Suivi : pleine largeur, deux colonnes (dashboard + logs) ============ */
#viewSuivi { max-width: none; }
.suivi-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.suivi-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ============ Logs ============ */
.logs-summary { padding: 16px; }
.logs-list { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.logs-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.logs-empty .pe-icon { font-size: 36px; }
.log-item { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface-alt); }
.log-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.log-date { font-weight: 700; font-size: 13px; }
.log-mode { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 2px 9px; }
.log-status { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 12px; padding: 3px 10px; }
.log-status.done { background: rgba(22, 163, 74, 0.1); color: var(--green); }
.log-status.stopped { background: rgba(220, 38, 38, 0.1); color: var(--red); }
.log-status.warn { background: rgba(217, 119, 6, 0.1); color: var(--amber); }
.log-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.log-metric { background: var(--surface-1); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; text-align: center; }
.log-metric .lm-value { display: block; font-weight: 700; font-size: 14px; }
.log-metric .lm-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-top: 2px; }
.log-metric.err .lm-value { color: var(--red); }

/* ============ Visionneuse zoom ============ */
.viewer-wrap { overflow: auto; max-height: 70vh; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 24px 24px; border-radius: 8px; }
.viewer-media { transform-origin: center center; transition: transform .1s ease; max-width: 100%; }
.viewer-svg { width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; }
.viewer-svg svg { width: 100%; height: 100%; }
.zoom-label { align-self: center; font-weight: 700; min-width: 54px; text-align: center; }

/* ============ Popin de progression (ZIP) ============ */
.popin-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
.spinner { width: 38px; height: 38px; border: 4px solid var(--hover); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Modal ============ */
.modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 300; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-box { background: var(--surface-1); border-radius: 12px; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.wide .modal-box { width: min(1000px, 100%); }

/* Popin d'import de données */
.import-section { margin-bottom: 16px; }
.import-section h4 { margin: 0 0 8px; font-size: 13px; }
.import-seps { display: flex; flex-wrap: wrap; gap: 14px; }
.import-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.import-table-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.import-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.import-table th, .import-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.import-table th { background: var(--surface-3); position: sticky; top: 0; font-weight: 700; }
.import-table tbody tr:nth-child(even) td { background: var(--stripe); }
.import-count { margin: 8px 0 0; font-size: 12px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-content { padding: 18px; overflow: auto; }
.modal-pre { white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; margin: 0; }
.modal-edit { width: 100%; min-height: 260px; max-height: calc(86vh - 160px); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; resize: vertical; overflow-y: auto; box-sizing: border-box; }
.modal-edit:focus { border-color: var(--blue); outline: none; }
.modal-message { margin: 0; font-size: 14px; line-height: 1.5; }
.modal-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.modal-input { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 14px; }
.modal-input:focus { border-color: var(--blue); outline: none; }
.modal-img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }

/* ============ Aperçu de données ============ */
.preview-box {
  width: min(960px, 96vw) !important;
  height: min(700px, 92vh);
}
.preview-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.preview-cols-panel {
  width: 190px; flex: 0 0 190px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--surface-alt);
}
.preview-cols-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted);
}
.preview-cols-head .icon { padding: 2px 5px; font-size: 13px; }
.preview-cols-list { flex: 1; overflow-y: auto; padding: 5px; }
.preview-col-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--text); user-select: none;
}
.preview-col-item:hover { background: var(--hover); }
.preview-col-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
}
.preview-col-dot.data { background: var(--data); }
.preview-col-dot.chatgpt { background: var(--chatgpt); }
.preview-col-dot.image { background: var(--image); }
.preview-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.preview-nav-btns { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.preview-row-info { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 90px; text-align: center; }

.preview-content {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start;
}
.preview-field {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
  flex: 1 1 220px; max-width: 320px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.preview-field.preview-wide { flex: 1 1 100%; max-width: 100%; }
.preview-field-label {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.preview-field-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
}
.preview-field-dot.data { background: var(--data); }
.preview-field-dot.chatgpt { background: var(--chatgpt); }
.preview-field-dot.image { background: var(--image); }
.preview-field-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text); flex: 1;
}
.preview-field-type {
  font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
}
.preview-field-value {
  font-size: 13px; line-height: 1.6; color: var(--text);
  word-break: break-word; white-space: pre-wrap;
}
.preview-value-empty { color: var(--muted); font-style: italic; font-size: 12px; }
.preview-value-status { color: var(--amber); font-style: italic; font-size: 12px; }
.preview-value-error { color: var(--red); font-size: 12px; }
.preview-img-wrap { display: flex; justify-content: center; padding: 4px 0; }
.preview-img { max-width: 100%; max-height: 240px; border-radius: 6px; display: block; }
.preview-svg-wrap { display: flex; align-items: center; justify-content: center; max-height: 240px; overflow: hidden; }
.preview-svg-wrap svg { max-width: 100%; max-height: 240px; }
.preview-no-data {
  width: 100%; text-align: center; color: var(--muted); font-style: italic;
  padding: 48px 20px; font-size: 13px;
}

/* ============ Toast de notification ============ */
/* display:none par défaut — évite que display:flex override l'attribut HTML [hidden]. */
.storage-banner { display: none; }
.storage-banner:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: fixed;
  top: calc(var(--nav-h, 60px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 320px;
  max-width: 580px;
  width: calc(100% - 48px);
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  animation: toast-in .25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.storage-banner-msg { flex: 1; }
.storage-banner-close {
  flex-shrink: 0;
  background: none; border: none;
  color: #64748b; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0; margin-top: 1px;
}
.storage-banner-close:hover { color: #f1f5f9; }
/* Variante « reprise » : filet bleu sur le côté gauche. */
.resume-banner:not([hidden]) { border-left: 3px solid #3b82f6; }
.resume-banner .primary.small { padding: 4px 12px; }

/* ============ Accessibilité clavier (focus visible) ============ */
/* Anneau de focus net pour la navigation clavier, sans gêner le clic souris.
   Prioritaire sur les `outline: none` posés sur certains champs (:focus). */
button:focus-visible,
.as-button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.nav-tab:focus-visible,
.ctx-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 5px;
}
/* Léger retour visuel à l'appui des boutons. */
button:active:not(:disabled) { transform: translateY(1px); }

/* ============ Responsive (tablette / mobile) ============ */
@media (max-width: 900px) {
  .cfg-tab-2col { grid-template-columns: 1fr; }
  .cfg-tab-pane { padding: 14px; }
  .suivi-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topbar { padding: 0 10px; gap: 12px; }
  .brand .sub { display: none; }
  .mainnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-tab { padding: 0 10px; font-size: 12px; }
  .view-page, .layout { padding: 12px; gap: 12px; }
  .cfg-sticky-inner { padding: 10px 12px; }
  .newproj { grid-template-columns: 1fr; }
  .newproj-import { justify-self: start; }
  .run-bar { gap: 8px; }
  .main { --col-w: 180px; }
  /* Davantage de lignes visibles quand la config des colonnes est repliée. */
  .table-scroll { max-height: calc(var(--head-h) + var(--row-h) * 8 + 16px); }
  .modal-box, .modal2-box { width: 95vw; }
  .block-head { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
  .main { --col-w: 150px; }
  .nav-tab { padding: 10px 9px; }
  .block-head { padding: 12px; }
  .block-actions { flex-wrap: wrap; }
}